@xplor-education/core-stencil-components 2.0.0

package/dist/components/p-DIv_A5Gj.js

@@ -0,0 +1,57 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+
+const xplorButtonCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-button {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-button {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-button {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-button {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-button {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-button {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-button, ul.sc-xplor-button {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-button li.sc-xplor-button, ul.sc-xplor-button li.sc-xplor-button {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-button, ul.mdc-list.sc-xplor-button {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-button li.mdc-list-item.sc-xplor-button, ul.mdc-list.sc-xplor-button li.mdc-list-item.sc-xplor-button {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-button {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-button {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-button {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-button {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-button .mdc-text-field--outlined.sc-xplor-button .mdc-notched-outline__notch.sc-xplor-button {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-button .mdc-notched-outline__notch.sc-xplor-button {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-button .mdc-notched-outline.sc-xplor-button .mdc-notched-outline__notch.sc-xplor-button {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-button {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-button:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-button {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-button {\n  margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-button {\n  margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-button {\n  margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-button {\n  margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-button {\n  margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-button {\n  margin-left: 8rem;\n  margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-button {\n  margin-top: 8rem;\n  margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-button {\n  margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-button {\n  margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-button {\n  margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-button {\n  margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-button {\n  margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-button {\n  margin-left: 5rem;\n  margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-button {\n  margin-top: 5rem;\n  margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-button {\n  margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-button {\n  margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-button {\n  margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-button {\n  margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-button {\n  margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-button {\n  margin-left: 4rem;\n  margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-button {\n  margin-top: 4rem;\n  margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-button {\n  margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-button {\n  margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-button {\n  margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-button {\n  margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-button {\n  margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-button {\n  margin-left: 3.5rem;\n  margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-button {\n  margin-top: 3.5rem;\n  margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-button {\n  margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-button {\n  margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-button {\n  margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-button {\n  margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-button {\n  margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-button {\n  margin-left: 3rem;\n  margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-button {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-button {\n  margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-button {\n  margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-button {\n  margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-button {\n  margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-button {\n  margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-button {\n  margin-left: 2.5rem;\n  margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-button {\n  margin-top: 2.5rem;\n  margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-button {\n  margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-button {\n  margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-button {\n  margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-button {\n  margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-button {\n  margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-button {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-button {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-button {\n  margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-button {\n  margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-button {\n  margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-button {\n  margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-button {\n  margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-button {\n  margin-left: 1.5rem;\n  margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-button {\n  margin-top: 1.5rem;\n  margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-button {\n  margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-button {\n  margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-button {\n  margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-button {\n  margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-button {\n  margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-button {\n  margin-left: 1.25rem;\n  margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-button {\n  margin-top: 1.25rem;\n  margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-button {\n  margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-button {\n  margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-button {\n  margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-button {\n  margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-button {\n  margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-button {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-button {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-button {\n  margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-button {\n  margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-button {\n  margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-button {\n  margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-button {\n  margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-button {\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-button {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-button {\n  margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-button {\n  margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-button {\n  margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-button {\n  margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-button {\n  margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-button {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-button {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-button {\n  margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-button {\n  margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-button {\n  margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-button {\n  margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-button {\n  margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-button {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-button {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-button {\n  padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-button {\n  padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-button {\n  padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-button {\n  padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-button {\n  padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-button {\n  padding-left: 8rem;\n  padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-button {\n  padding-top: 8rem;\n  padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-button {\n  padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-button {\n  padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-button {\n  padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-button {\n  padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-button {\n  padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-button {\n  padding-left: 5rem;\n  padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-button {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-button {\n  padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-button {\n  padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-button {\n  padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-button {\n  padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-button {\n  padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-button {\n  padding-left: 4rem;\n  padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-button {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-button {\n  padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-button {\n  padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-button {\n  padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-button {\n  padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-button {\n  padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-button {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-button {\n  padding-top: 3.5rem;\n  padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-button {\n  padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-button {\n  padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-button {\n  padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-button {\n  padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-button {\n  padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-button {\n  padding-left: 3rem;\n  padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-button {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-button {\n  padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-button {\n  padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-button {\n  padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-button {\n  padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-button {\n  padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-button {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-button {\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-button {\n  padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-button {\n  padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-button {\n  padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-button {\n  padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-button {\n  padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-button {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-button {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-button {\n  padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-button {\n  padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-button {\n  padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-button {\n  padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-button {\n  padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-button {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-button {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-button {\n  padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-button {\n  padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-button {\n  padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-button {\n  padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-button {\n  padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-button {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-button {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-button {\n  padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-button {\n  padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-button {\n  padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-button {\n  padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-button {\n  padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-button {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-button {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-button {\n  padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-button {\n  padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-button {\n  padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-button {\n  padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-button {\n  padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-button {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-button {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-button {\n  padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-button {\n  padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-button {\n  padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-button {\n  padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-button {\n  padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-button {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-button {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-button {\n  padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-button {\n  padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-button {\n  padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-button {\n  padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-button {\n  padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-button {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-button {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.sc-xplor-button-h {\n  display: block;\n}\n\n.x-button.sc-xplor-button {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: relative;\n  -webkit-align-items: center;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n  border: 1px solid;\n  border-radius: 1rem;\n  cursor: pointer;\n  display: block;\n  -webkit-flex-direction: row;\n  -ms-flex-direction: row;\n  flex-direction: row;\n  font-size: 1rem;\n  font-weight: 500;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-letter-spacing: 0.75px;\n  -moz-letter-spacing: 0.75px;\n  -ms-letter-spacing: 0.75px;\n  padding: 0.75rem 1.5rem;\n  letter-spacing: 0.75px;\n  overflow: hidden;\n  position: relative;\n  -webkit-transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n  transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n}\n.x-button.x-button--icon-only.sc-xplor-button {\n  width: 48px;\n  height: 48px;\n  padding: 0;\n  border-radius: 50%;\n  min-width: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.x-button.x-button--icon-only.sc-xplor-button .button-icon.sc-xplor-button {\n  font-size: 20px;\n  font-weight: 300;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.x-button.x-button--icon-only.sc-xplor-button .button-icon.button-icon--svg.sc-xplor-button svg.sc-xplor-button {\n  width: 1rem;\n  height: 1rem;\n  display: block;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-icon.sc-xplor-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  line-height: 1;\n}\n.x-button.x-button--with-icon.x-button--icon-start.sc-xplor-button .button-icon--svg.sc-xplor-button {\n  margin-right: 0.5rem;\n}\n.x-button.x-button--with-icon.x-button--icon-end.sc-xplor-button .button-icon--svg.sc-xplor-button {\n  margin-left: 0.5rem;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-icon--svg.sc-xplor-button svg.sc-xplor-button {\n  display: block;\n  width: 14px;\n  height: 14px;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-icon--svg.sc-xplor-button svg.sc-xplor-button path.sc-xplor-button {\n  fill: currentColor;\n}\n.x-button.x-button--with-icon.sc-xplor-button .button-text.sc-xplor-button {\n  line-height: 1;\n}\n.x-button.x-button--icon-start.sc-xplor-button {\n  flex-direction: row;\n}\n.x-button.x-button--icon-end.sc-xplor-button {\n  flex-direction: row;\n}\n.x-button.shadow.sc-xplor-button {\n  box-shadow: 0px 2.30969px 4.25707px rgba(20, 20, 21, 0.28), 0px 6.38599px 11.7703px rgba(20, 20, 21, 0.0521271), 0px 15.375px 28.3382px rgba(20, 20, 21, 0.04), 0px 32px 94px rgba(20, 20, 21, 0.0278729);\n}\n.x-button.primary.sc-xplor-button {\n  background-color: var(--color-primary);\n  border-color: var(--color-primary);\n  color: white;\n}\n.x-button.primary.sc-xplor-button:hover {\n  background-color: var(--color-primary-50, #e3f2fd);\n  border-color: var(--color-primary-50, #e3f2fd);\n  color: white;\n}\n.x-button.secondary.sc-xplor-button {\n  background-color: var(--color-secondary);\n  border-color: var(--color-secondary);\n  color: white;\n}\n.x-button.secondary.sc-xplor-button:hover {\n  background-color: var(--color-secondary-50, #f3e5f5);\n  border-color: var(--color-secondary-50, #f3e5f5);\n  color: white;\n}\n.x-button.ghost.sc-xplor-button {\n  background-color: #fff;\n  border-color: var(--color-secondary);\n  color: var(--color-secondary);\n}\n.x-button.ghost.sc-xplor-button:hover {\n  background-color: #DFF2F1;\n  border-color: var(--color-secondary);\n  color: var(--color-secondary);\n}\n.x-button.ghost.sc-xplor-button:active {\n  background-color: #BEE6E4;\n  border-color: var(--color-secondary);\n  color: var(--color-secondary);\n}\n.x-button.minimal.sc-xplor-button {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--color-primary);\n}\n.x-button.success.sc-xplor-button {\n  background-color: transparent;\n  border-color: var(--color-success, #4caf50);\n  color: var(--color-success, #4caf50);\n}\n.x-button.success.sc-xplor-button:hover {\n  background-color: var(--color-success-50, #e8f5e9);\n  border-color: var(--color-success, #4caf50);\n  color: var(--color-success, #4caf50);\n}\n.x-button.success.sc-xplor-button:active {\n  background-color: var(--color-success-100, #c8e6c9);\n}\n.x-button.text.sc-xplor-button {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--color-secondary);\n}\n.x-button.text.sc-xplor-button:hover {\n  background-color: var(--color-secondary-50, #f3e5f5);\n}\n.x-button.text.sc-xplor-button:active {\n  background-color: var(--color-secondary-100, #e1bee7);\n}\n.x-button.disabled.sc-xplor-button {\n  background-color: #f6f6f6;\n  border-color: #a0a0a0;\n  color: #a0a0a0;\n}\n\n.icon.sc-xplor-button {\n  background-color: #ffffff;\n  bottom: 0px;\n  left: 0px;\n  opacity: 0;\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  -webkit-transition: opacity 0.2s;\n  transition: opacity 0.2s;\n}\n\n.x-button--icon-only.small.sc-xplor-button {\n  width: 36px;\n  height: 36px;\n  padding: 0.25rem;\n}\n.x-button--icon-only.small.sc-xplor-button .button-icon.sc-xplor-button {\n  font-size: 16px;\n}\n.x-button--icon-only.button-icon--svg.sc-xplor-button {\n  padding: 0.25rem;\n}\n.x-button--icon-only.button-icon--svg.sc-xplor-button svg.sc-xplor-button {\n  width: 16px;\n  height: 16px;\n}\n.x-button--icon-only.large.sc-xplor-button {\n  width: 56px;\n  height: 56px;\n}\n.x-button--icon-only.large.sc-xplor-button .button-icon.sc-xplor-button {\n  font-size: 24px;\n}\n\n.x-button.disabled.x-button--icon-only.sc-xplor-button, .x-button.disabled.x-button--with-icon.sc-xplor-button {\n  cursor: not-allowed;\n  opacity: 0.6;\n}";
+
+const XplorButton = /*@__PURE__*/ proxyCustomElement(class XplorButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.type = 'secondary';
+        this.mode = 'pg'; // 'dark', 'pg', 'office' (default: 'dark')
+        /**
+         * Icon to display (defaults to plus sign)
+         */
+        this.icon = '+';
+    }
+    renderIcon() {
+        if (this.icon === 'svg' && this.iconSvg) {
+            return (h("span", { class: "button-icon button-icon--svg ", innerHTML: this.iconSvg }));
+        }
+        return (h("span", { class: "button-icon" }, this.icon));
+    }
+    render() {
+        const isIconOnly = !this.text && this.iconPosition !== null;
+        const hasIcon = this.iconPosition !== null;
+        return (h(Host, { key: '94fed7b7f39f8aca0273d5b6da123e1ce7d87d01' }, h("slot", { key: 'fd6a53ce8ce00175207dff16d976379a0ab8040b' }, h("button", { key: 'a688aabc8675ef63f3c18c2af4b0a24c8bc29de7', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'shadow': this.type !== 'minimal' && this.type !== 'text', 'x-button--icon-only': isIconOnly, 'x-button--with-icon': hasIcon && !isIconOnly, 'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly, 'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly }, (this.styles ? { [this.styles]: true } : {})), onClick: () => this.clickAction && this.clickAction() }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && h("span", { key: '82d9558a551bcc23ead90b3f42d0fcd94bd7301f', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
+    }
+    static get style() { return xplorButtonCss; }
+}, [6, "xplor-button", {
+        "text": [1],
+        "type": [1],
+        "mode": [1],
+        "size": [1],
+        "styles": [1],
+        "clickAction": [16, "click-action"],
+        "iconPosition": [1, "icon-position"],
+        "icon": [1],
+        "iconSvg": [1, "icon-svg"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorButton);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { XplorButton as X, defineCustomElement as d };
+//# sourceMappingURL=p-DIv_A5Gj.js.map
+
+//# sourceMappingURL=p-DIv_A5Gj.js.map

package/dist/components/p-DIv_A5Gj.js.map

@@ -0,0 +1 @@
+{"file":"p-DIv_A5Gj.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kywBAAkywB;;MCe5ywB,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AAbxB,IAAA,WAAA,GAAA;;;AAeU,QAAA,IAAI,CAAA,IAAA,GAAoF,WAAW;AACnG,QAAA,IAAA,CAAA,IAAI,GAA8B,IAAI,CAAC;AAU/C;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;AA6C3B;IA1CS,UAAU,GAAA;QAChB,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE;AACvC,YAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,+BAA+B,EAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAA,CAAS;;AAGhF,QAAA,QACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EACtB,EAAA,IAAI,CAAC,IAAI,CACL;;IAIX,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI;AAC3D,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI;QAE1C,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EACH,MAAA,CAAA,MAAA,CAAA,EAAA,UAAU,EAAE,IAAI,EAChB,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EACjB,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EACzD,qBAAqB,EAAE,UAAU,EACjC,qBAAqB,EAAE,OAAO,IAAI,CAAC,UAAU,EAC7C,sBAAsB,EAAE,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,CAAC,UAAU,EACpE,oBAAoB,EAAE,IAAI,CAAC,YAAY,KAAK,KAAK,IAAI,CAAC,UAAU,EAAA,GAC5D,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,EAEhD,EAAA,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE,EAAA,EAEpD,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CAAC,UAAU,EAAE,EAC7D,IAAI,CAAC,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,IAAI,CAAQ,EACzD,OAAO,IAAI,IAAI,CAAC,YAAY,KAAK,KAAK,IAAI,IAAI,CAAC,UAAU,EAAE,CACrD,CACJ,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-button/xplor-button.scss?tag=xplor-button&encapsulation=scoped","src/components/xplor-button/xplor-button.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours-pg;\n@use '../../styles/spacing.scss' as spacing;\n\n:host {\n  display: block;\n}\n\n.x-button {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: relative;\n  -webkit-align-items: center;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n  border: 1px solid;\n  border-radius: 1rem;\n  cursor: pointer;\n  display: block;\n  -webkit-flex-direction: row;\n  -ms-flex-direction: row;\n  flex-direction: row;\n  font-size: 1rem;\n  font-weight: 500;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-letter-spacing: 0.75px;\n  -moz-letter-spacing: 0.75px;\n  -ms-letter-spacing: 0.75px;\n  padding: spacing.$spacing-12 spacing.$spacing-24;\n  letter-spacing: 0.75px;\n  overflow: hidden;\n  position: relative;\n  -webkit-transition:\n    background-color 0.2s,\n    border-color 0.2s,\n    color 0.2s;\n  transition:\n    background-color 0.2s,\n    border-color 0.2s,\n    color 0.2s;\n\n  // Icon Only Button (Circular)\n  &.x-button--icon-only {\n    width: 48px;\n    height: 48px;\n    padding: 0;\n    border-radius: 50%;\n    min-width: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    .button-icon {\n      font-size: 20px;\n      font-weight: 300;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &.button-icon--svg {\n        svg {\n          width: spacing.$spacing-16;\n          height: spacing.$spacing-16;\n          display: block;\n        }\n      }\n    }\n  }\n\n  // Regular Button with Icon\n  &.x-button--with-icon {\n    .button-icon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 18px;\n      line-height: 1;\n    }\n\n    // SVG icon styles\n    &.x-button--icon-start {\n      .button-icon--svg {\n        margin-right: spacing.$spacing-8 ;\n      }\n    }\n\n    &.x-button--icon-end {\n      .button-icon--svg {\n        margin-left: spacing.$spacing-8 ;\n      }\n    }\n\n    .button-icon--svg {\n\n\n      svg {\n        display: block;\n        width: 14px;\n        height: 14px;\n\n\n        path {\n          fill: currentColor;\n        }\n      }\n    }\n\n    .button-text {\n      line-height: 1;\n    }\n  }\n\n  // Icon positioning\n  &.x-button--icon-start {\n    flex-direction: row;\n  }\n\n  &.x-button--icon-end {\n    flex-direction: row;\n  }\n\n  &.shadow {\n    box-shadow:\n      0px 2.30969px 4.25707px rgba(20, 20, 21, 0.28),\n      0px 6.38599px 11.7703px rgba(20, 20, 21, 0.0521271),\n      0px 15.375px 28.3382px rgba(20, 20, 21, 0.04),\n      0px 32px 94px rgba(20, 20, 21, 0.0278729);\n  }\n\n  &.primary {\n    background-color: colours-pg.$primary;\n    border-color: colours-pg.$primary;\n    color: white;\n\n    &:hover {\n      background-color: colours-pg.$primary-50;\n      border-color: colours-pg.$primary-50;\n      color: white;\n    }\n  }\n\n  &.secondary {\n    background-color: colours-pg.$secondary;\n    border-color: colours-pg.$secondary;\n    color: white;\n\n    &:hover {\n      background-color: colours-pg.$secondary-50;\n      border-color: colours-pg.$secondary-50;\n      color: white;\n      ;\n    }\n  }\n\n  &.ghost {\n    background-color: #fff;\n    border-color: colours-pg.$secondary;\n    color: colours-pg.$secondary;\n\n    &:hover {\n      background-color: #DFF2F1;\n      border-color: colours-pg.$secondary;\n      color: colours-pg.$secondary;\n\n    }\n\n    &:active {\n      background-color: #BEE6E4;\n      border-color: colours-pg.$secondary;\n      color: colours-pg.$secondary;\n\n    }\n  }\n\n  &.minimal {\n    background-color: transparent;\n    border-color: transparent;\n    color: colours-pg.$primary;\n  }\n\n  &.success {\n    background-color: transparent;\n    border-color: colours-pg.$success;\n    color: colours-pg.$success;\n\n    &:hover {\n      background-color: colours-pg.$success-50;\n      border-color: colours-pg.$success;\n      color: colours-pg.$success;\n    }\n\n    &:active {\n      background-color: colours-pg.$success-100;\n    }\n  }\n\n  &.text {\n    background-color: transparent;\n    border-color: transparent;\n    color: colours-pg.$secondary;\n\n    &:hover {\n      background-color: colours-pg.$secondary-50;\n    }\n\n    &:active {\n      background-color: colours-pg.$secondary-100;\n    }\n  }\n\n  &.disabled {\n    background-color: #f6f6f6;\n    border-color: #a0a0a0;\n    color: #a0a0a0;\n  }\n}\n\n.icon {\n  background-color: #ffffff;\n  bottom: 0px;\n  left: 0px;\n  opacity: 0;\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  -webkit-transition: opacity 0.2s;\n  transition: opacity 0.2s;\n}\n\n// Size variations for icon-only buttons\n.x-button--icon-only {\n  &.small {\n    width: 36px;\n    height: 36px;\n    padding: spacing.$spacing-4;\n\n    .button-icon {\n      font-size: 16px;\n    }\n  }\n\n  &.button-icon--svg {\n    padding: spacing.$spacing-4;\n\n    svg {\n      width: 16px;\n      height: 16px;\n\n    }\n  }\n\n  &.large {\n    width: 56px;\n    height: 56px;\n\n    .button-icon {\n      font-size: 24px;\n    }\n  }\n}\n\n// Ensure disabled state works with icon buttons\n.x-button.disabled {\n\n  &.x-button--icon-only,\n  &.x-button--with-icon {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-button',\n  styleUrl: 'xplor-button.scss',\n  // we cant use multiple styleUrls because the mode property is not reactive only in stencilJS and once the component is rendered it wont change the css file\n  // so we are using only one styleUrl and changing the styles based on the mode property in the class\n  // styleUrls: {\n  //   default: 'xplor-button.scss',\n  //   dark: 'xplor-button-pg.scss',\n  //   pg: 'xplor-button-pg.scss',\n  //   office: 'xplor-button-office.scss',\n  // },\n  scoped: true,\n})\nexport class XplorButton {\n  @Prop() text: string;\n  @Prop() type: 'minimal' | 'primary' | 'secondary' | 'ghost' | 'disabled' | 'success' | 'text' = 'secondary';\n  @Prop() mode?: 'dark' | 'pg' | 'office' = 'pg'; // 'dark', 'pg', 'office' (default: 'dark')\n  @Prop() size?: string; // 'small', 'medium', 'large' (default:'medium')\n  @Prop() styles?: string;\n  @Prop() clickAction: () => void;\n\n  /**\n   * Icon position: 'start' | 'end' | null\n   */\n  @Prop() iconPosition: 'start' | 'end' | null;\n\n  /**\n   * Icon to display (defaults to plus sign)\n   */\n  @Prop() icon: string = '+';\n  @Prop() iconSvg?: string;\n\n  private renderIcon() {\n    if (this.icon === 'svg' && this.iconSvg) {\n      return (\n        <span class=\"button-icon button-icon--svg \" innerHTML={this.iconSvg}></span>\n      );\n    }\n    return (\n      <span class=\"button-icon\">\n        {this.icon}\n      </span>\n    );\n  }\n\n  render() {\n    const isIconOnly = !this.text && this.iconPosition !== null;\n    const hasIcon = this.iconPosition !== null;\n\n    return (\n      <Host>\n        <slot>\n          <button\n            role=\"button\"\n            class={{\n              'x-button': true,\n              [this.type]: true,\n              'shadow': this.type !== 'minimal' && this.type !== 'text',\n              'x-button--icon-only': isIconOnly,\n              'x-button--with-icon': hasIcon && !isIconOnly,\n              'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly,\n              'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly,\n              ...(this.styles ? { [this.styles]: true } : {}),\n            }}\n            onClick={() => this.clickAction && this.clickAction()}\n          >\n            {hasIcon && this.iconPosition === 'start' && this.renderIcon()}\n            {this.text && <span class=\"button-text\">{this.text}</span>}\n            {hasIcon && this.iconPosition === 'end' && this.renderIcon()}\n          </button>\n        </slot>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/components/p-DKh6y3GY.js

@@ -0,0 +1,118 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorModalCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-modal {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-modal {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-modal {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-modal {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-modal {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-modal {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-modal, ul.sc-xplor-modal {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-modal li.sc-xplor-modal, ul.sc-xplor-modal li.sc-xplor-modal {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-modal, ul.mdc-list.sc-xplor-modal {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-modal li.mdc-list-item.sc-xplor-modal, ul.mdc-list.sc-xplor-modal li.mdc-list-item.sc-xplor-modal {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-modal {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-modal {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-modal {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-modal {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-modal .mdc-text-field--outlined.sc-xplor-modal .mdc-notched-outline__notch.sc-xplor-modal {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-modal .mdc-notched-outline__notch.sc-xplor-modal {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-modal .mdc-notched-outline.sc-xplor-modal .mdc-notched-outline__notch.sc-xplor-modal {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-modal {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-modal:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-modal {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-modal-h {\n  display: contents;\n}\n\n.xplor-modal__backdrop.sc-xplor-modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 2000;\n  padding: 1rem;\n}\n.xplor-modal__card.sc-xplor-modal {\n  position: relative;\n  background-color: white;\n  border-radius: 1rem;\n  padding: 1rem;\n  max-width: 90vw;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n  animation: xplor-modal-fade-in 0.2s ease-out;\n}\n.xplor-modal__card--scrollable.sc-xplor-modal {\n  overflow: hidden;\n}\n.xplor-modal__close-btn.sc-xplor-modal {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n  width: 2.25rem;\n  height: 2.25rem;\n  border: none;\n  background-color: white;\n  color: #008480;\n  font-size: 1rem;\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease;\n  z-index: 1;\n}\n.xplor-modal__close-btn.sc-xplor-modal:hover {\n  background-color: #E6F7F7;\n}\n.xplor-modal__close-btn.sc-xplor-modal:active {\n  background-color: #D0EBD2;\n}\n.xplor-modal__title.sc-xplor-modal {\n  padding-right: 3rem;\n  margin-bottom: 0.5rem;\n  font-size: 1.5rem;\n  font-weight: 500;\n  color: rgba(0, 0, 0, 0.87);\n  white-space: normal;\n  word-wrap: break-word;\n}\n.xplor-modal__subtitle.sc-xplor-modal {\n  margin: 0.5rem;\n  margin-bottom: 1rem;\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n}\n.xplor-modal__body.sc-xplor-modal {\n  flex: 1;\n  overflow-y: auto;\n  margin-bottom: 1rem;\n}\n.xplor-modal__body--no-title.sc-xplor-modal {\n  margin-top: 3.5rem;\n}\n.xplor-modal__actions.sc-xplor-modal {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-end;\n  margin: 1rem 0;\n}\n.xplor-modal__loading.sc-xplor-modal {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 3rem;\n}\n.xplor-modal__spinner.sc-xplor-modal {\n  width: 3rem;\n  height: 3rem;\n  border: 4px solid rgba(0, 0, 0, 0.1);\n  border-top-color: #008480;\n  border-radius: 50%;\n  animation: xplor-spinner-rotate 0.8s linear infinite;\n}\n\n@keyframes xplor-modal-fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes xplor-spinner-rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}";
+
+const XplorModal = /*@__PURE__*/ proxyCustomElement(class XplorModal extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorClose = createEvent(this, "xplorClose");
+        /**
+         * Whether the modal is open
+         */
+        this.open = false;
+        /**
+         * Modal width
+         */
+        this.width = '600px';
+        /**
+         * Maximum width
+         */
+        this.maxWidth = '90%';
+        /**
+         * Maximum height
+         */
+        this.maxHeight = '90%';
+        /**
+         * Whether the modal content is scrollable
+         */
+        this.scrollable = true;
+        /**
+         * Persistent mode - prevents closing on backdrop click
+         */
+        this.persistent = false;
+        /**
+         * Loading state
+         */
+        this.loading = false;
+        /**
+         * Whether to show the title area (for spacing)
+         */
+        this.showTitle = true;
+        this.handleBackdropClick = () => {
+            if (!this.persistent) {
+                this.closeModal();
+            }
+        };
+        this.handleCardClick = (event) => {
+            event.stopPropagation();
+        };
+        this.closeModal = () => {
+            this.open = false;
+            this.xplorClose.emit();
+        };
+    }
+    handleOpenChange(newValue) {
+        if (newValue) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+    }
+    disconnectedCallback() {
+        document.body.style.overflow = '';
+    }
+    render() {
+        if (!this.open) {
+            return null;
+        }
+        const cardClasses = {
+            'xplor-modal__card': true,
+            'xplor-modal__card--scrollable': this.scrollable,
+        };
+        const bodyClasses = {
+            'xplor-modal__body': true,
+            'xplor-modal__body--no-title': !this.showTitle,
+        };
+        return (h(Host, null, h("div", { class: "xplor-modal__backdrop", onClick: this.handleBackdropClick }, h("div", { class: cardClasses, style: {
+                width: this.width,
+                maxWidth: this.maxWidth,
+                maxHeight: this.maxHeight,
+            }, onClick: this.handleCardClick }, h("button", { type: "button", class: "xplor-modal__close-btn", onClick: this.closeModal, "aria-label": "Close modal", "data-testid": "common-modal-close-button" }, "\u2715"), h("div", { class: "xplor-modal__title" }, h("slot", { name: "title" })), h("div", { class: "xplor-modal__subtitle" }, h("slot", { name: "subtitle" })), h("div", { class: bodyClasses }, this.loading ? (h("div", { class: "xplor-modal__loading" }, h("div", { class: "xplor-modal__spinner" }))) : (h("slot", { name: "body" }))), h("div", { class: "xplor-modal__actions" }, h("slot", { name: "actions" }))))));
+    }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+    static get style() { return xplorModalCss; }
+}, [6, "xplor-modal", {
+        "open": [1028],
+        "width": [1],
+        "maxWidth": [1, "max-width"],
+        "maxHeight": [1, "max-height"],
+        "scrollable": [4],
+        "persistent": [4],
+        "loading": [4],
+        "showTitle": [4, "show-title"]
+    }, undefined, {
+        "open": ["handleOpenChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorModal);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { XplorModal as X, defineCustomElement as d };
+//# sourceMappingURL=p-DKh6y3GY.js.map
+
+//# sourceMappingURL=p-DKh6y3GY.js.map

package/dist/components/p-DKh6y3GY.js.map

@@ -0,0 +1 @@
+{"file":"p-DKh6y3GY.js","mappings":";;AAAA,MAAM,aAAa,GAAG,06RAA06R;;MCOn7R,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAE9C;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,OAAO;AAE/B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,KAAK;AAEhC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAW,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,IAAI;AAElC;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAEnC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEhC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAoBzB,QAAA,IAAmB,CAAA,mBAAA,GAAG,MAAK;AACjC,YAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;gBACpB,IAAI,CAAC,UAAU,EAAE;;AAErB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAY,KAAI;YACzC,KAAK,CAAC,eAAe,EAAE;AACzB,SAAC;AAEO,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACxB,SAAC;AAiEF;AA1FC,IAAA,gBAAgB,CAAC,QAAiB,EAAA;QAChC,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;;aAClC;YACL,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE;;;IAIrC,oBAAoB,GAAA;QAClB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE;;IAkBnC,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AACd,YAAA,OAAO,IAAI;;AAGb,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,mBAAmB,EAAE,IAAI;YACzB,+BAA+B,EAAE,IAAI,CAAC,UAAU;SACjD;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,mBAAmB,EAAE,IAAI;AACzB,YAAA,6BAA6B,EAAE,CAAC,IAAI,CAAC,SAAS;SAC/C;AAED,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAA,EAClE,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;AAC1B,aAAA,EACD,OAAO,EAAE,IAAI,CAAC,eAAe,EAAA,EAE7B,CAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,IAAI,CAAC,UAAU,gBACb,aAAa,EAAA,aAAA,EACZ,2BAA2B,EAGhC,EAAA,QAAA,CAAA,EAET,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CACjB,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,UAAU,EAAA,CAAG,CACpB,EAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,WAAW,EAAA,EACpB,IAAI,CAAC,OAAO,IACX,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,sBAAsB,EAAO,CAAA,CACpC,KAEN,YAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CACrB,CACG,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-modal/xplor-modal.scss?tag=xplor-modal&encapsulation=scoped","src/components/xplor-modal/xplor-modal.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.xplor-modal {\n  &__backdrop {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2000;\n    padding: 1rem;\n  }\n\n  &__card {\n    position: relative;\n    background-color: white;\n    border-radius: 1rem;\n    padding: 1rem;\n    max-width: 90vw;\n    display: flex;\n    flex-direction: column;\n    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),\n                0px 24px 38px 3px rgba(0, 0, 0, 0.14),\n                0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n    animation: xplor-modal-fade-in 0.2s ease-out;\n\n    &--scrollable {\n      overflow: hidden;\n    }\n  }\n\n  &__close-btn {\n    position: absolute;\n    top: 1rem;\n    right: 1rem;\n    width: 2.25rem;\n    height: 2.25rem;\n    border: none;\n    background-color: white;\n    color: #008480;\n    font-size: 1rem;\n    cursor: pointer;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background-color 0.2s ease;\n    z-index: 1;\n\n    &:hover {\n      background-color: #E6F7F7;\n    }\n\n    &:active {\n      background-color: #D0EBD2;\n    }\n  }\n\n  &__title {\n    padding-right: 3rem;\n    margin-bottom: 0.5rem;\n    font-size: 1.5rem;\n    font-weight: 500;\n    color: rgba(0, 0, 0, 0.87);\n    white-space: normal;\n    word-wrap: break-word;\n  }\n\n  &__subtitle {\n    margin: 0.5rem;\n    margin-bottom: 1rem;\n    font-size: 0.875rem;\n    color: rgba(0, 0, 0, 0.6);\n  }\n\n  &__body {\n    flex: 1;\n    overflow-y: auto;\n    margin-bottom: 1rem;\n\n    &--no-title {\n      margin-top: 3.5rem;\n    }\n  }\n\n  &__actions {\n    display: flex;\n    gap: 0.5rem;\n    justify-content: flex-end;\n    margin: 1rem 0;\n  }\n\n  &__loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 3rem;\n  }\n\n  &__spinner {\n    width: 3rem;\n    height: 3rem;\n    border: 4px solid rgba(0, 0, 0, 0.1);\n    border-top-color: #008480;\n    border-radius: 50%;\n    animation: xplor-spinner-rotate 0.8s linear infinite;\n  }\n}\n\n@keyframes xplor-modal-fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes xplor-spinner-rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-modal',\n  styleUrl: 'xplor-modal.scss',\n  scoped: true,\n})\nexport class XplorModal {\n  /**\n   * Whether the modal is open\n   */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /**\n   * Modal width\n   */\n  @Prop() width: string = '600px';\n\n  /**\n   * Maximum width\n   */\n  @Prop() maxWidth: string = '90%';\n\n  /**\n   * Maximum height\n   */\n  @Prop() maxHeight: string = '90%';\n\n  /**\n   * Whether the modal content is scrollable\n   */\n  @Prop() scrollable: boolean = true;\n\n  /**\n   * Persistent mode - prevents closing on backdrop click\n   */\n  @Prop() persistent: boolean = false;\n\n  /**\n   * Loading state\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Whether to show the title area (for spacing)\n   */\n  @Prop() showTitle: boolean = true;\n\n  /**\n   * Close event\n   */\n  @Event() xplorClose: EventEmitter<void>;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n  }\n\n  disconnectedCallback() {\n    document.body.style.overflow = '';\n  }\n\n  private handleBackdropClick = () => {\n    if (!this.persistent) {\n      this.closeModal();\n    }\n  };\n\n  private handleCardClick = (event: Event) => {\n    event.stopPropagation();\n  };\n\n  private closeModal = () => {\n    this.open = false;\n    this.xplorClose.emit();\n  };\n\n  render() {\n    if (!this.open) {\n      return null;\n    }\n\n    const cardClasses = {\n      'xplor-modal__card': true,\n      'xplor-modal__card--scrollable': this.scrollable,\n    };\n\n    const bodyClasses = {\n      'xplor-modal__body': true,\n      'xplor-modal__body--no-title': !this.showTitle,\n    };\n\n    return (\n      <Host>\n        <div class=\"xplor-modal__backdrop\" onClick={this.handleBackdropClick}>\n          <div\n            class={cardClasses}\n            style={{\n              width: this.width,\n              maxWidth: this.maxWidth,\n              maxHeight: this.maxHeight,\n            }}\n            onClick={this.handleCardClick}\n          >\n            <button\n              type=\"button\"\n              class=\"xplor-modal__close-btn\"\n              onClick={this.closeModal}\n              aria-label=\"Close modal\"\n              data-testid=\"common-modal-close-button\"\n            >\n              ✕\n            </button>\n\n            <div class=\"xplor-modal__title\">\n              <slot name=\"title\" />\n            </div>\n\n            <div class=\"xplor-modal__subtitle\">\n              <slot name=\"subtitle\" />\n            </div>\n\n            <div class={bodyClasses}>\n              {this.loading ? (\n                <div class=\"xplor-modal__loading\">\n                  <div class=\"xplor-modal__spinner\"></div>\n                </div>\n              ) : (\n                <slot name=\"body\" />\n              )}\n            </div>\n\n            <div class=\"xplor-modal__actions\">\n              <slot name=\"actions\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-alert-dialog.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorAlertDialog extends Components.XplorAlertDialog, HTMLElement {}
+export const XplorAlertDialog: {
+    prototype: XplorAlertDialog;
+    new (): XplorAlertDialog;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-alert-dialog.js

@@ -0,0 +1,86 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorAlertDialogCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-alert-dialog {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-alert-dialog {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-alert-dialog {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-alert-dialog {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-alert-dialog {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-alert-dialog {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-alert-dialog, ul.sc-xplor-alert-dialog {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-alert-dialog li.sc-xplor-alert-dialog, ul.sc-xplor-alert-dialog li.sc-xplor-alert-dialog {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-alert-dialog, ul.mdc-list.sc-xplor-alert-dialog {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-alert-dialog li.mdc-list-item.sc-xplor-alert-dialog, ul.mdc-list.sc-xplor-alert-dialog li.mdc-list-item.sc-xplor-alert-dialog {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-alert-dialog {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-alert-dialog {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-alert-dialog {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-alert-dialog {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-alert-dialog .mdc-text-field--outlined.sc-xplor-alert-dialog .mdc-notched-outline__notch.sc-xplor-alert-dialog {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-alert-dialog .mdc-notched-outline__notch.sc-xplor-alert-dialog {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-alert-dialog .mdc-notched-outline.sc-xplor-alert-dialog .mdc-notched-outline__notch.sc-xplor-alert-dialog {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-alert-dialog {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-alert-dialog:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-alert-dialog {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-alert-dialog-h {\n  display: contents;\n}\n\n.xplor-alert-dialog__backdrop.sc-xplor-alert-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 2000;\n  padding: 1rem;\n}\n.xplor-alert-dialog__card.sc-xplor-alert-dialog {\n  position: relative;\n  background-color: white;\n  border-radius: 0.5rem;\n  padding: 3.75rem 1.25rem;\n  min-height: 320px;\n  max-width: 90vw;\n  max-height: 90vh;\n  overflow: auto;\n  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n  animation: xplor-dialog-fade-in 0.2s ease-out;\n}\n.xplor-alert-dialog__close-btn.sc-xplor-alert-dialog {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n  width: 2rem;\n  height: 2rem;\n  border: none;\n  background: transparent;\n  color: rgba(0, 0, 0, 0.54);\n  font-size: 1.5rem;\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease;\n  z-index: 1;\n}\n.xplor-alert-dialog__close-btn.sc-xplor-alert-dialog:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-alert-dialog__close-btn.sc-xplor-alert-dialog:active {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n.xplor-alert-dialog__title.sc-xplor-alert-dialog {\n  padding-top: 0;\n  margin-bottom: 1rem;\n  font-size: 1.25rem;\n  font-weight: 500;\n  color: rgba(0, 0, 0, 0.87);\n}\n.xplor-alert-dialog__text.sc-xplor-alert-dialog {\n  margin-bottom: 1.5rem;\n  color: rgba(0, 0, 0, 0.87);\n}\n.xplor-alert-dialog__actions.sc-xplor-alert-dialog {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n@keyframes xplor-dialog-fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}";
+
+const XplorAlertDialog$1 = /*@__PURE__*/ proxyCustomElement(class XplorAlertDialog extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorClose = createEvent(this, "xplorClose");
+        this.xplorDialogChange = createEvent(this, "xplorDialogChange");
+        /**
+         * Whether the dialog is open
+         */
+        this.open = false;
+        /**
+         * Dialog width (can be pixel value or percentage)
+         */
+        this.width = '408px';
+        /**
+         * Persistent mode - prevents closing on backdrop click
+         */
+        this.persistent = true;
+        this.handleBackdropClick = () => {
+            if (!this.persistent) {
+                this.closeDialog();
+            }
+        };
+        this.handleCardClick = (event) => {
+            event.stopPropagation();
+        };
+        this.closeDialog = () => {
+            this.open = false;
+            this.xplorClose.emit();
+            this.xplorDialogChange.emit(false);
+        };
+    }
+    handleOpenChange(newValue) {
+        if (newValue) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+    }
+    disconnectedCallback() {
+        document.body.style.overflow = '';
+    }
+    render() {
+        if (!this.open) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: "xplor-alert-dialog__backdrop", onClick: this.handleBackdropClick }, h("div", { class: "xplor-alert-dialog__card", style: { width: this.width }, onClick: this.handleCardClick }, h("button", { type: "button", class: "xplor-alert-dialog__close-btn", onClick: this.closeDialog, "aria-label": "Close dialog" }, "\u2715"), h("div", { class: "xplor-alert-dialog__title" }, h("slot", { name: "title" })), h("div", { class: "xplor-alert-dialog__text" }, h("slot", { name: "text" })), h("div", { class: "xplor-alert-dialog__actions" }, h("slot", { name: "actions" }))))));
+    }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+    static get style() { return xplorAlertDialogCss; }
+}, [6, "xplor-alert-dialog", {
+        "open": [1028],
+        "width": [1],
+        "persistent": [4]
+    }, undefined, {
+        "open": ["handleOpenChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-alert-dialog"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-alert-dialog":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorAlertDialog$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorAlertDialog = XplorAlertDialog$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorAlertDialog, defineCustomElement };
+//# sourceMappingURL=xplor-alert-dialog.js.map
+
+//# sourceMappingURL=xplor-alert-dialog.js.map

package/dist/components/xplor-alert-dialog.js.map

@@ -0,0 +1 @@
+{"file":"xplor-alert-dialog.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,w/QAAw/Q;;MCOvgRA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;;;AAME;;AAEG;AACsB,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAE9C;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,OAAO;AAE/B;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,IAAI;AAyB1B,QAAA,IAAmB,CAAA,mBAAA,GAAG,MAAK;AACjC,YAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;gBACpB,IAAI,CAAC,WAAW,EAAE;;AAEtB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAY,KAAI;YACzC,KAAK,CAAC,eAAe,EAAE;AACzB,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACtB,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;AACpC,SAAC;AAwCF;AAlEC,IAAA,gBAAgB,CAAC,QAAiB,EAAA;QAChC,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;;aAClC;YACL,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE;;;IAIrC,oBAAoB,GAAA;QAClB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE;;IAmBnC,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AACd,YAAA,OAAO,IAAI;;AAGb,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,8BAA8B,EAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAC5B,OAAO,EAAE,IAAI,CAAC,eAAe,EAAA,EAE7B,CAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,+BAA+B,EACrC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,YAAA,EACd,cAAc,EAGlB,EAAA,QAAA,CAAA,EAET,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CACjB,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorAlertDialog","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-alert-dialog/xplor-alert-dialog.scss?tag=xplor-alert-dialog&encapsulation=scoped","src/components/xplor-alert-dialog/xplor-alert-dialog.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.xplor-alert-dialog {\n  &__backdrop {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2000;\n    padding: 1rem;\n  }\n\n  &__card {\n    position: relative;\n    background-color: white;\n    border-radius: 0.5rem;\n    padding: 3.75rem 1.25rem;\n    min-height: 320px;\n    max-width: 90vw;\n    max-height: 90vh;\n    overflow: auto;\n    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),\n                0px 24px 38px 3px rgba(0, 0, 0, 0.14),\n                0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n    animation: xplor-dialog-fade-in 0.2s ease-out;\n  }\n\n  &__close-btn {\n    position: absolute;\n    top: 1rem;\n    right: 1rem;\n    width: 2rem;\n    height: 2rem;\n    border: none;\n    background: transparent;\n    color: rgba(0, 0, 0, 0.54);\n    font-size: 1.5rem;\n    cursor: pointer;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background-color 0.2s ease;\n    z-index: 1;\n\n    &:hover {\n      background-color: rgba(0, 0, 0, 0.04);\n    }\n\n    &:active {\n      background-color: rgba(0, 0, 0, 0.08);\n    }\n  }\n\n  &__title {\n    padding-top: 0;\n    margin-bottom: 1rem;\n    font-size: 1.25rem;\n    font-weight: 500;\n    color: rgba(0, 0, 0, 0.87);\n  }\n\n  &__text {\n    margin-bottom: 1.5rem;\n    color: rgba(0, 0, 0, 0.87);\n  }\n\n  &__actions {\n    display: flex;\n    gap: 0.5rem;\n    justify-content: flex-end;\n  }\n}\n\n@keyframes xplor-dialog-fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-alert-dialog',\n  styleUrl: 'xplor-alert-dialog.scss',\n  scoped: true,\n})\nexport class XplorAlertDialog {\n  /**\n   * Whether the dialog is open\n   */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /**\n   * Dialog width (can be pixel value or percentage)\n   */\n  @Prop() width: string = '408px';\n\n  /**\n   * Persistent mode - prevents closing on backdrop click\n   */\n  @Prop() persistent: boolean = true;\n\n  /**\n   * Close event\n   */\n  @Event() xplorClose: EventEmitter<void>;\n\n  /**\n   * Dialog state change event\n   */\n  @Event() xplorDialogChange: EventEmitter<boolean>;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n  }\n\n  disconnectedCallback() {\n    document.body.style.overflow = '';\n  }\n\n  private handleBackdropClick = () => {\n    if (!this.persistent) {\n      this.closeDialog();\n    }\n  };\n\n  private handleCardClick = (event: Event) => {\n    event.stopPropagation();\n  };\n\n  private closeDialog = () => {\n    this.open = false;\n    this.xplorClose.emit();\n    this.xplorDialogChange.emit(false);\n  };\n\n  render() {\n    if (!this.open) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <div class=\"xplor-alert-dialog__backdrop\" onClick={this.handleBackdropClick}>\n          <div\n            class=\"xplor-alert-dialog__card\"\n            style={{ width: this.width }}\n            onClick={this.handleCardClick}\n          >\n            <button\n              type=\"button\"\n              class=\"xplor-alert-dialog__close-btn\"\n              onClick={this.closeDialog}\n              aria-label=\"Close dialog\"\n            >\n              ✕\n            </button>\n\n            <div class=\"xplor-alert-dialog__title\">\n              <slot name=\"title\" />\n            </div>\n\n            <div class=\"xplor-alert-dialog__text\">\n              <slot name=\"text\" />\n            </div>\n\n            <div class=\"xplor-alert-dialog__actions\">\n              <slot name=\"actions\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-alert-message.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorAlertMessage extends Components.XplorAlertMessage, HTMLElement {}
+export const XplorAlertMessage: {
+    prototype: XplorAlertMessage;
+    new (): XplorAlertMessage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/xplor-alert-message.js

@@ -0,0 +1,49 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorAlertMessageCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-alert-message {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-alert-message {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-alert-message {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-alert-message {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-alert-message {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-alert-message {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-alert-message, ul.sc-xplor-alert-message {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-alert-message li.sc-xplor-alert-message, ul.sc-xplor-alert-message li.sc-xplor-alert-message {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-alert-message, ul.mdc-list.sc-xplor-alert-message {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-alert-message li.mdc-list-item.sc-xplor-alert-message, ul.mdc-list.sc-xplor-alert-message li.mdc-list-item.sc-xplor-alert-message {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-alert-message {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-alert-message {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-alert-message {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-alert-message {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-alert-message .mdc-text-field--outlined.sc-xplor-alert-message .mdc-notched-outline__notch.sc-xplor-alert-message {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-alert-message .mdc-notched-outline__notch.sc-xplor-alert-message {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-alert-message .mdc-notched-outline.sc-xplor-alert-message .mdc-notched-outline__notch.sc-xplor-alert-message {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-alert-message {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-alert-message:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-alert-message {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-alert-message-h {\n  display: block;\n}\n\n.alert-message.sc-xplor-alert-message {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 1rem 1.5rem;\n  border-radius: 4px;\n  border-left: 4px solid;\n  gap: 1rem;\n}\n.alert-message--info.sc-xplor-alert-message {\n  background-color: #ede7f6;\n  border-left-color: #673ab7;\n  color: #4a148c;\n}\n.alert-message--warning.sc-xplor-alert-message {\n  background-color: #fff3e0;\n  border-left-color: #ff9800;\n  color: #e65100;\n}\n.alert-message--success.sc-xplor-alert-message {\n  background-color: #e8f5e9;\n  border-left-color: #4caf50;\n  color: #1b5e20;\n}\n.alert-message--error.sc-xplor-alert-message {\n  background-color: #ffebee;\n  border-left-color: #f44336;\n  color: #b71c1c;\n}\n\n.alert-message__content.sc-xplor-alert-message {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.alert-message__title.sc-xplor-alert-message {\n  font-weight: 600;\n  font-size: 1rem;\n  line-height: 1.5;\n}\n\n.alert-message__body.sc-xplor-alert-message {\n  font-size: 0.875rem;\n  line-height: 1.5;\n}\n\n.alert-message__actions.sc-xplor-alert-message {\n  margin-top: 0.5rem;\n}\n.alert-message__actions.sc-xplor-alert-message:empty {\n  display: none;\n}\n\n.alert-message__dismiss.sc-xplor-alert-message {\n  background: none;\n  border: none;\n  font-size: 1.5rem;\n  line-height: 1;\n  cursor: pointer;\n  padding: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: currentColor;\n  opacity: 0.7;\n  transition: opacity 0.2s;\n  flex-shrink: 0;\n}\n.alert-message__dismiss.sc-xplor-alert-message:hover {\n  opacity: 1;\n}\n.alert-message__dismiss.sc-xplor-alert-message:focus {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n  border-radius: 2px;\n}";
+
+const XplorAlertMessage$1 = /*@__PURE__*/ proxyCustomElement(class XplorAlertMessage extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorDismiss = createEvent(this, "xplorDismiss");
+        this.type = 'info';
+        this.dismissible = false;
+        this.handleDismiss = () => {
+            this.xplorDismiss.emit();
+        };
+    }
+    render() {
+        return (h(Host, { key: '9b7353e68d89701b3fdb4dcd5fb5e6c886b08d8b' }, h("div", { key: '335c16829ae65019c3c7d32a9e7dd3a3ef13c1ae', class: {
+                'alert-message': true,
+                [`alert-message--${this.type}`]: true,
+            }, role: "alert" }, h("div", { key: '08feddcdf81a93b0aaa907688923d3b943fcc7ed', class: "alert-message__content" }, this.alertTitle && (h("div", { key: 'a994f5d65e9112cae41bf3379f4454e986d62e00', class: "alert-message__title" }, h("slot", { key: 'b4cd15b229b6e5539c29c929dfa804b7da537030', name: "title" }, this.alertTitle))), h("div", { key: 'ef6135360584c77ad418f46022ed8600c5786c2a', class: "alert-message__body" }, h("slot", { key: '36d800fb3ebdfad5c2bf602212410381210db99b' })), h("div", { key: '79d1d65fc21759299f17d42523839c0d733b2098', class: "alert-message__actions" }, h("slot", { key: 'f4cc482a2392656d0bc385c0d3cafe23285f32e8', name: "actions" }))), this.dismissible && (h("button", { key: '37656219e43ce25d72e7afa66a1fc1a2e9f22002', class: "alert-message__dismiss", onClick: this.handleDismiss, "aria-label": "Dismiss alert", type: "button" }, "\u00D7")))));
+    }
+    static get style() { return xplorAlertMessageCss; }
+}, [6, "xplor-alert-message", {
+        "type": [1],
+        "alertTitle": [1, "alert-title"],
+        "dismissible": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-alert-message"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-alert-message":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorAlertMessage$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorAlertMessage = XplorAlertMessage$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorAlertMessage, defineCustomElement };
+//# sourceMappingURL=xplor-alert-message.js.map
+
+//# sourceMappingURL=xplor-alert-message.js.map

package/dist/components/xplor-alert-message.js.map

@@ -0,0 +1 @@
+{"file":"xplor-alert-message.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,+8QAA+8Q;;MCO/9QA,mBAAiB,iBAAAC,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;AAMY,QAAA,IAAI,CAAA,IAAA,GAA6C,MAAM;AAEvD,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAI5B,QAAA,IAAa,CAAA,aAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC5B,SAAC;AAuCJ;IArCG,MAAM,GAAA;QACF,QACI,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAE;AACH,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AACxC,aAAA,EACD,IAAI,EAAC,OAAO,EAAA,EAEZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EAC9B,IAAI,CAAC,UAAU,KACZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC7B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,UAAU,CAAQ,CACzC,CACT,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACN,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CACrB,CACJ,EACL,IAAI,CAAC,WAAW,KACb,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,IAAI,CAAC,aAAa,EAAA,YAAA,EAChB,eAAe,EAC1B,IAAI,EAAC,QAAQ,EAAA,EAAA,QAAA,CAGR,CACZ,CACC,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorAlertMessage","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-alert-message/xplor-alert-message.scss?tag=xplor-alert-message&encapsulation=scoped","src/components/xplor-alert-message/xplor-alert-message.tsx"],"sourcesContent":[":host {\n    display: block;\n}\n\n.alert-message {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: 1rem 1.5rem;\n    border-radius: 4px;\n    border-left: 4px solid;\n    gap: 1rem;\n\n    &--info {\n        background-color: #ede7f6;\n        border-left-color: #673ab7;\n        color: #4a148c;\n    }\n\n    &--warning {\n        background-color: #fff3e0;\n        border-left-color: #ff9800;\n        color: #e65100;\n    }\n\n    &--success {\n        background-color: #e8f5e9;\n        border-left-color: #4caf50;\n        color: #1b5e20;\n    }\n\n    &--error {\n        background-color: #ffebee;\n        border-left-color: #f44336;\n        color: #b71c1c;\n    }\n}\n\n.alert-message__content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.alert-message__title {\n    font-weight: 600;\n    font-size: 1rem;\n    line-height: 1.5;\n}\n\n.alert-message__body {\n    font-size: 0.875rem;\n    line-height: 1.5;\n}\n\n.alert-message__actions {\n    margin-top: 0.5rem;\n\n    &:empty {\n        display: none;\n    }\n}\n\n.alert-message__dismiss {\n    background: none;\n    border: none;\n    font-size: 1.5rem;\n    line-height: 1;\n    cursor: pointer;\n    padding: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: currentColor;\n    opacity: 0.7;\n    transition: opacity 0.2s;\n    flex-shrink: 0;\n\n    &:hover {\n        opacity: 1;\n    }\n\n    &:focus {\n        outline: 2px solid currentColor;\n        outline-offset: 2px;\n        border-radius: 2px;\n    }\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n    tag: 'xplor-alert-message',\n    styleUrl: 'xplor-alert-message.scss',\n    scoped: true,\n})\nexport class XplorAlertMessage {\n    @Prop() type: 'info' | 'warning' | 'success' | 'error' = 'info';\n    @Prop() alertTitle: string;\n    @Prop() dismissible: boolean = false;\n\n    @Event() xplorDismiss: EventEmitter<void>;\n\n    private handleDismiss = () => {\n        this.xplorDismiss.emit();\n    };\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        'alert-message': true,\n                        [`alert-message--${this.type}`]: true,\n                    }}\n                    role=\"alert\"\n                >\n                    <div class=\"alert-message__content\">\n                        {this.alertTitle && (\n                            <div class=\"alert-message__title\">\n                                <slot name=\"title\">{this.alertTitle}</slot>\n                            </div>\n                        )}\n                        <div class=\"alert-message__body\">\n                            <slot />\n                        </div>\n                        <div class=\"alert-message__actions\">\n                            <slot name=\"actions\" />\n                        </div>\n                    </div>\n                    {this.dismissible && (\n                        <button\n                            class=\"alert-message__dismiss\"\n                            onClick={this.handleDismiss}\n                            aria-label=\"Dismiss alert\"\n                            type=\"button\"\n                        >\n                            ×\n                        </button>\n                    )}\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/xplor-assistant.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface XplorAssistant extends Components.XplorAssistant, HTMLElement {}
+export const XplorAssistant: {
+    prototype: XplorAssistant;
+    new (): XplorAssistant;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;