@xplor-education/core-stencil-components 2.0.0

package/dist/components/xplor-nav-tabs.js

@@ -0,0 +1,59 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const xplorNavTabsCss = "@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-nav-tabs {\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-nav-tabs {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-nav-tabs {\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-nav-tabs {\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-nav-tabs {\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-nav-tabs {\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-nav-tabs, ul.sc-xplor-nav-tabs {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-nav-tabs li.sc-xplor-nav-tabs, ul.sc-xplor-nav-tabs li.sc-xplor-nav-tabs {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-nav-tabs, ul.mdc-list.sc-xplor-nav-tabs {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-nav-tabs li.mdc-list-item.sc-xplor-nav-tabs, ul.mdc-list.sc-xplor-nav-tabs li.mdc-list-item.sc-xplor-nav-tabs {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-nav-tabs {\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-nav-tabs {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-nav-tabs {\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-nav-tabs {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-nav-tabs .mdc-text-field--outlined.sc-xplor-nav-tabs .mdc-notched-outline__notch.sc-xplor-nav-tabs {\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-nav-tabs .mdc-notched-outline__notch.sc-xplor-nav-tabs {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-nav-tabs .mdc-notched-outline.sc-xplor-nav-tabs .mdc-notched-outline__notch.sc-xplor-nav-tabs {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-nav-tabs {\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-nav-tabs:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-nav-tabs {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-nav-tabs-h {\n  display: block;\n}\n\n.nav-tabs.sc-xplor-nav-tabs {\n  display: flex;\n  border-bottom: 2px solid #e0e0e0;\n  gap: 0;\n}\n.nav-tabs--grow.sc-xplor-nav-tabs .nav-tabs__tab.sc-xplor-nav-tabs {\n  flex: 1;\n}\n\n.nav-tabs__tab.sc-xplor-nav-tabs {\n  background: none;\n  border: none;\n  padding: 0.75rem 1.5rem;\n  font-family: inherit;\n  font-size: 0.875rem;\n  font-weight: 500;\n  cursor: pointer;\n  color: #757575;\n  position: relative;\n  transition: color 0.2s;\n  white-space: nowrap;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n.nav-tabs__tab.sc-xplor-nav-tabs::after {\n  content: \"\";\n  position: absolute;\n  bottom: -2px;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background-color: transparent;\n  transition: background-color 0.2s;\n}\n.nav-tabs__tab.sc-xplor-nav-tabs:hover:not(.nav-tabs__tab--disabled) {\n  color: #424242;\n}\n.nav-tabs__tab.sc-xplor-nav-tabs:focus {\n  outline: 2px solid #1976d2;\n  outline-offset: -2px;\n}\n.nav-tabs__tab--active.sc-xplor-nav-tabs {\n  color: #1976d2;\n}\n.nav-tabs__tab--active.sc-xplor-nav-tabs::after {\n  background-color: #1976d2;\n}\n.nav-tabs--secondary.sc-xplor-nav-tabs .nav-tabs__tab--active.sc-xplor-nav-tabs {\n  color: #9c27b0;\n}\n.nav-tabs--secondary.sc-xplor-nav-tabs .nav-tabs__tab--active.sc-xplor-nav-tabs::after {\n  background-color: #9c27b0;\n}\n.nav-tabs__tab--disabled.sc-xplor-nav-tabs {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.nav-tabs--secondary.sc-xplor-nav-tabs .nav-tabs__tab.sc-xplor-nav-tabs:hover:not(.nav-tabs__tab--disabled) {\n  color: #7b1fa2;\n}";
+
+const XplorNavTabs$1 = /*@__PURE__*/ proxyCustomElement(class XplorNavTabs extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.xplorChange = createEvent(this, "xplorChange");
+        this.items = [];
+        this.color = 'primary';
+        this.grow = false;
+        this.handleTabClick = (item) => {
+            if (item.disabled)
+                return;
+            this.value = item.value;
+            this.xplorChange.emit(item.value);
+        };
+    }
+    render() {
+        return (h(Host, { key: '30bab02780d071338f386b6a72559bbd65212118' }, h("div", { key: '2684dbbd4a812bbb88d55baeb42b281c2f3bf753', class: {
+                'nav-tabs': true,
+                'nav-tabs--grow': this.grow,
+                [`nav-tabs--${this.color}`]: true,
+            }, role: "tablist" }, this.items.map((item) => (h("button", { key: item.value, class: {
+                'nav-tabs__tab': true,
+                'nav-tabs__tab--active': this.value === item.value,
+                'nav-tabs__tab--disabled': item.disabled,
+            }, onClick: () => this.handleTabClick(item), disabled: item.disabled, role: "tab", "aria-selected": this.value === item.value ? 'true' : 'false', type: "button" }, item.label))), h("slot", { key: 'dae806f8f498015b5837c799cb024fc3d688cc8d' }))));
+    }
+    static get style() { return xplorNavTabsCss; }
+}, [6, "xplor-nav-tabs", {
+        "value": [1025],
+        "items": [16],
+        "color": [1],
+        "grow": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-nav-tabs"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-nav-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorNavTabs$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorNavTabs = XplorNavTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorNavTabs, defineCustomElement };
+//# sourceMappingURL=xplor-nav-tabs.js.map
+
+//# sourceMappingURL=xplor-nav-tabs.js.map

package/dist/components/xplor-nav-tabs.js.map

@@ -0,0 +1 @@
+{"file":"xplor-nav-tabs.js","mappings":";;AAAA,MAAM,eAAe,GAAG,shQAAshQ;;MCajiQA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAOY,QAAA,IAAK,CAAA,KAAA,GAAiB,EAAE;AACxB,QAAA,IAAK,CAAA,KAAA,GAA4B,SAAS;AAC1C,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAIrB,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,IAAgB,KAAI;YAC1C,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;YACvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACrC,SAAC;AAmCJ;IAjCG,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,UAAU,EAAE,IAAI;gBAChB,gBAAgB,EAAE,IAAI,CAAC,IAAI;AAC3B,gBAAA,CAAC,aAAa,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AACpC,aAAA,EACD,IAAI,EAAC,SAAS,EAAA,EAEb,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACjB,CAAA,CAAA,QAAA,EAAA,EACI,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,KAAK,EAAE;AACH,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,uBAAuB,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;gBAClD,yBAAyB,EAAE,IAAI,CAAC,QAAQ;AAC3C,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,KAAK,EACK,eAAA,EAAA,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,MAAM,GAAG,OAAO,EAC3D,IAAI,EAAC,QAAQ,EAAA,EAEZ,IAAI,CAAC,KAAK,CACN,CACZ,CAAC,EACF,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorNavTabs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-nav-tabs/xplor-nav-tabs.scss?tag=xplor-nav-tabs&encapsulation=scoped","src/components/xplor-nav-tabs/xplor-nav-tabs.tsx"],"sourcesContent":[":host {\n    display: block;\n}\n\n.nav-tabs {\n    display: flex;\n    border-bottom: 2px solid #e0e0e0;\n    gap: 0;\n\n    &--grow {\n        .nav-tabs__tab {\n            flex: 1;\n        }\n    }\n}\n\n.nav-tabs__tab {\n    background: none;\n    border: none;\n    padding: 0.75rem 1.5rem;\n    font-family: inherit;\n    font-size: 0.875rem;\n    font-weight: 500;\n    cursor: pointer;\n    color: #757575;\n    position: relative;\n    transition: color 0.2s;\n    white-space: nowrap;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n\n    &::after {\n        content: '';\n        position: absolute;\n        bottom: -2px;\n        left: 0;\n        right: 0;\n        height: 2px;\n        background-color: transparent;\n        transition: background-color 0.2s;\n    }\n\n    &:hover:not(&--disabled) {\n        color: #424242;\n    }\n\n    &:focus {\n        outline: 2px solid #1976d2;\n        outline-offset: -2px;\n    }\n\n    &--active {\n        color: #1976d2;\n\n        &::after {\n            background-color: #1976d2;\n        }\n\n        .nav-tabs--secondary & {\n            color: #9c27b0;\n\n            &::after {\n                background-color: #9c27b0;\n            }\n        }\n    }\n\n    &--disabled {\n        opacity: 0.4;\n        cursor: not-allowed;\n    }\n}\n\n.nav-tabs--secondary {\n    .nav-tabs__tab {\n        &:hover:not(.nav-tabs__tab--disabled) {\n            color: #7b1fa2;\n        }\n    }\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\nexport interface NavTabItem {\n    label: string;\n    value: string;\n    disabled?: boolean;\n}\n\n@Component({\n    tag: 'xplor-nav-tabs',\n    styleUrl: 'xplor-nav-tabs.scss',\n    scoped: true,\n})\nexport class XplorNavTabs {\n    @Prop({ mutable: true }) value: string;\n    @Prop() items: NavTabItem[] = [];\n    @Prop() color: 'primary' | 'secondary' = 'primary';\n    @Prop() grow: boolean = false;\n\n    @Event() xplorChange: EventEmitter<string>;\n\n    private handleTabClick = (item: NavTabItem) => {\n        if (item.disabled) return;\n\n        this.value = item.value;\n        this.xplorChange.emit(item.value);\n    };\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        'nav-tabs': true,\n                        'nav-tabs--grow': this.grow,\n                        [`nav-tabs--${this.color}`]: true,\n                    }}\n                    role=\"tablist\"\n                >\n                    {this.items.map((item) => (\n                        <button\n                            key={item.value}\n                            class={{\n                                'nav-tabs__tab': true,\n                                'nav-tabs__tab--active': this.value === item.value,\n                                'nav-tabs__tab--disabled': item.disabled,\n                            }}\n                            onClick={() => this.handleTabClick(item)}\n                            disabled={item.disabled}\n                            role=\"tab\"\n                            aria-selected={this.value === item.value ? 'true' : 'false'}\n                            type=\"button\"\n                        >\n                            {item.label}\n                        </button>\n                    ))}\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/xplor-section-card.d.ts

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

package/dist/components/xplor-section-card.js

@@ -0,0 +1,47 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+
+const xplorSectionCardCss = "@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-section-card {\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-section-card {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-section-card {\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-section-card {\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-section-card {\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-section-card {\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-section-card, ul.sc-xplor-section-card {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-section-card li.sc-xplor-section-card, ul.sc-xplor-section-card li.sc-xplor-section-card {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-section-card, ul.mdc-list.sc-xplor-section-card {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-section-card li.mdc-list-item.sc-xplor-section-card, ul.mdc-list.sc-xplor-section-card li.mdc-list-item.sc-xplor-section-card {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-section-card {\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-section-card {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-section-card {\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-section-card {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-section-card .mdc-text-field--outlined.sc-xplor-section-card .mdc-notched-outline__notch.sc-xplor-section-card {\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-section-card .mdc-notched-outline__notch.sc-xplor-section-card {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-section-card .mdc-notched-outline.sc-xplor-section-card .mdc-notched-outline__notch.sc-xplor-section-card {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-section-card {\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-section-card:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-section-card {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-section-card {\n  margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-section-card {\n  margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-section-card {\n  margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-section-card {\n  margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-section-card {\n  margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-section-card {\n  margin-left: 8rem;\n  margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-section-card {\n  margin-top: 8rem;\n  margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-section-card {\n  margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-section-card {\n  margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-section-card {\n  margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-section-card {\n  margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-section-card {\n  margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-section-card {\n  margin-left: 5rem;\n  margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-section-card {\n  margin-top: 5rem;\n  margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-section-card {\n  margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-section-card {\n  margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-section-card {\n  margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-section-card {\n  margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-section-card {\n  margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-section-card {\n  margin-left: 4rem;\n  margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-section-card {\n  margin-top: 4rem;\n  margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-section-card {\n  margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-section-card {\n  margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-section-card {\n  margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-section-card {\n  margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-section-card {\n  margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-section-card {\n  margin-left: 3.5rem;\n  margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-section-card {\n  margin-top: 3.5rem;\n  margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-section-card {\n  margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-section-card {\n  margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-section-card {\n  margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-section-card {\n  margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-section-card {\n  margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-section-card {\n  margin-left: 3rem;\n  margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-section-card {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-section-card {\n  margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-section-card {\n  margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-section-card {\n  margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-section-card {\n  margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-section-card {\n  margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-section-card {\n  margin-left: 2.5rem;\n  margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-section-card {\n  margin-top: 2.5rem;\n  margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-section-card {\n  margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-section-card {\n  margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-section-card {\n  margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-section-card {\n  margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-section-card {\n  margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-section-card {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-section-card {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-section-card {\n  margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-section-card {\n  margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-section-card {\n  margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-section-card {\n  margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-section-card {\n  margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-section-card {\n  margin-left: 1.5rem;\n  margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-section-card {\n  margin-top: 1.5rem;\n  margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-section-card {\n  margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-section-card {\n  margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-section-card {\n  margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-section-card {\n  margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-section-card {\n  margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-section-card {\n  margin-left: 1.25rem;\n  margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-section-card {\n  margin-top: 1.25rem;\n  margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-section-card {\n  margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-section-card {\n  margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-section-card {\n  margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-section-card {\n  margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-section-card {\n  margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-section-card {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-section-card {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-section-card {\n  margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-section-card {\n  margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-section-card {\n  margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-section-card {\n  margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-section-card {\n  margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-section-card {\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-section-card {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-section-card {\n  margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-section-card {\n  margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-section-card {\n  margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-section-card {\n  margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-section-card {\n  margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-section-card {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-section-card {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-section-card {\n  margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-section-card {\n  margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-section-card {\n  margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-section-card {\n  margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-section-card {\n  margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-section-card {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-section-card {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-section-card {\n  padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-section-card {\n  padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-section-card {\n  padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-section-card {\n  padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-section-card {\n  padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-section-card {\n  padding-left: 8rem;\n  padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-section-card {\n  padding-top: 8rem;\n  padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-section-card {\n  padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-section-card {\n  padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-section-card {\n  padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-section-card {\n  padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-section-card {\n  padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-section-card {\n  padding-left: 5rem;\n  padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-section-card {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-section-card {\n  padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-section-card {\n  padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-section-card {\n  padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-section-card {\n  padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-section-card {\n  padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-section-card {\n  padding-left: 4rem;\n  padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-section-card {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-section-card {\n  padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-section-card {\n  padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-section-card {\n  padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-section-card {\n  padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-section-card {\n  padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-section-card {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-section-card {\n  padding-top: 3.5rem;\n  padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-section-card {\n  padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-section-card {\n  padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-section-card {\n  padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-section-card {\n  padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-section-card {\n  padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-section-card {\n  padding-left: 3rem;\n  padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-section-card {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-section-card {\n  padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-section-card {\n  padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-section-card {\n  padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-section-card {\n  padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-section-card {\n  padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-section-card {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-section-card {\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-section-card {\n  padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-section-card {\n  padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-section-card {\n  padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-section-card {\n  padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-section-card {\n  padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-section-card {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-section-card {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-section-card {\n  padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-section-card {\n  padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-section-card {\n  padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-section-card {\n  padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-section-card {\n  padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-section-card {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-section-card {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-section-card {\n  padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-section-card {\n  padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-section-card {\n  padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-section-card {\n  padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-section-card {\n  padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-section-card {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-section-card {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-section-card {\n  padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-section-card {\n  padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-section-card {\n  padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-section-card {\n  padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-section-card {\n  padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-section-card {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-section-card {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-section-card {\n  padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-section-card {\n  padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-section-card {\n  padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-section-card {\n  padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-section-card {\n  padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-section-card {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-section-card {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-section-card {\n  padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-section-card {\n  padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-section-card {\n  padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-section-card {\n  padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-section-card {\n  padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-section-card {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-section-card {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-section-card {\n  padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-section-card {\n  padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-section-card {\n  padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-section-card {\n  padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-section-card {\n  padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-section-card {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-section-card {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.sc-xplor-section-card-h {\n  display: block;\n}\n\n.section-card.sc-xplor-section-card {\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.section-card--outlined.sc-xplor-section-card {\n  border: 2px solid #D0C7E5;\n}\n.section-card--rounded.sc-xplor-section-card {\n  border-radius: 1rem;\n}\n.section-card__body.sc-xplor-section-card {\n  flex: 1;\n}\n.section-card__actions.sc-xplor-section-card {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding-top: 0.5rem;\n}\n.section-card__actions.sc-xplor-section-card:empty {\n  display: none;\n}";
+
+const XplorSectionCard$1 = /*@__PURE__*/ proxyCustomElement(class XplorSectionCard extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.outlined = true;
+        this.rounded = true;
+        this.padding = '1.5rem';
+    }
+    render() {
+        return (h(Host, { key: '667ddbeb2048497ae0ec2d23876f50058e9b4870' }, h("div", { key: 'ccbce0700966f088c5a053df2169d466529d4ce3', class: {
+                'section-card': true,
+                'section-card--outlined': this.outlined,
+                'section-card--rounded': this.rounded,
+            }, style: { padding: this.padding } }, h("slot", { key: 'edd611a0afe1e5343ddedabf7d1daec8962a037b', name: "title" }), h("slot", { key: '2543fd02c710dd9045a7e5920ddc625712febc71', name: "subtitle" }), h("div", { key: 'bdd87422f48d711b43e6a1bf3f27a08d33819d1e', class: "section-card__body" }, h("slot", { key: '4989480c1010e3bae58cfeba4e0637e5fc1397da', name: "body" })), h("div", { key: '891bd2f17631f7f2732dbb04caefb26503d30e75', class: "section-card__actions" }, h("slot", { key: '8d49640f1c96c75afb915ed4acd1dd574ae4c2b9', name: "actions" })))));
+    }
+    static get style() { return xplorSectionCardCss; }
+}, [6, "xplor-section-card", {
+        "outlined": [4],
+        "rounded": [4],
+        "padding": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-section-card"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-section-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorSectionCard$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorSectionCard = XplorSectionCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorSectionCard, defineCustomElement };
+//# sourceMappingURL=xplor-section-card.js.map
+
+//# sourceMappingURL=xplor-section-card.js.map

package/dist/components/xplor-section-card.js.map

@@ -0,0 +1 @@
+{"file":"xplor-section-card.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,4woBAA4woB;;MCO3xoBA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;AAMU,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AACxB,QAAA,IAAO,CAAA,OAAA,GAAY,IAAI;AACvB,QAAA,IAAO,CAAA,OAAA,GAAW,QAAQ;AAyBnC;IAvBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;gBACvC,uBAAuB,EAAE,IAAI,CAAC,OAAO;aACtC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAA,EAEhC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAG,CAAA,EACxB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorSectionCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-section-card/xplor-section-card.scss?tag=xplor-section-card&encapsulation=scoped","src/components/xplor-section-card/xplor-section-card.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours;\n@use '../../styles/spacing.scss' as spacing;\n\n:host {\n  display: block;\n}\n\n.section-card {\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n\n  &--outlined {\n    border: 2px solid #D0C7E5;\n  }\n\n  &--rounded {\n    border-radius: 1rem;\n  }\n\n  &__body {\n    flex: 1;\n  }\n\n  &__actions {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding-top: 0.5rem;\n\n    &:empty {\n      display: none;\n    }\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-section-card',\n  styleUrl: 'xplor-section-card.scss',\n  scoped: true,\n})\nexport class XplorSectionCard {\n  @Prop() outlined: boolean = true;\n  @Prop() rounded: boolean = true;\n  @Prop() padding: string = '1.5rem';\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'section-card': true,\n            'section-card--outlined': this.outlined,\n            'section-card--rounded': this.rounded,\n          }}\n          style={{ padding: this.padding }}\n        >\n          <slot name=\"title\" />\n          <slot name=\"subtitle\" />\n          <div class=\"section-card__body\">\n            <slot name=\"body\" />\n          </div>\n          <div class=\"section-card__actions\">\n            <slot name=\"actions\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/xplor-section-heading.d.ts

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

package/dist/components/xplor-section-heading.js

@@ -0,0 +1,44 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+
+const xplorSectionHeadingCss = "@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-section-heading {\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-section-heading {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-section-heading {\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-section-heading {\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-section-heading {\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-section-heading {\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-section-heading, ul.sc-xplor-section-heading {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-section-heading li.sc-xplor-section-heading, ul.sc-xplor-section-heading li.sc-xplor-section-heading {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-section-heading, ul.mdc-list.sc-xplor-section-heading {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-section-heading li.mdc-list-item.sc-xplor-section-heading, ul.mdc-list.sc-xplor-section-heading li.mdc-list-item.sc-xplor-section-heading {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-section-heading {\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-section-heading {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-section-heading {\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-section-heading {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-section-heading .mdc-text-field--outlined.sc-xplor-section-heading .mdc-notched-outline__notch.sc-xplor-section-heading {\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-section-heading .mdc-notched-outline__notch.sc-xplor-section-heading {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-section-heading .mdc-notched-outline.sc-xplor-section-heading .mdc-notched-outline__notch.sc-xplor-section-heading {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-section-heading {\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-section-heading:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-section-heading {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-section-heading-h {\n  display: block;\n  font-size: 1rem;\n}\n\n.section-heading.sc-xplor-section-heading {\n  line-height: 1.33;\n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n  font-weight: 500;\n}\n.section-heading--small.sc-xplor-section-heading {\n  font-size: 0.9em;\n}\n.section-heading--large.sc-xplor-section-heading {\n  font-size: 1.1em;\n}";
+
+const XplorSectionHeading$1 = /*@__PURE__*/ proxyCustomElement(class XplorSectionHeading extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.size = 'medium';
+    }
+    render() {
+        return (h(Host, { key: '4c30a434a144abb7ba1925a4fe98847fb8a0e09c' }, h("span", { key: 'faa456eebb9ba58d55945f0b5f6db9e02efd9d31', class: {
+                'section-heading': true,
+                'section-heading--small': this.size === 'small',
+                'section-heading--large': this.size === 'large',
+            } }, h("slot", { key: '3a164def63f5365f6a76702e7a8462fe0ce4fcc9' }, this.text))));
+    }
+    static get style() { return xplorSectionHeadingCss; }
+}, [6, "xplor-section-heading", {
+        "size": [1],
+        "text": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-section-heading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-section-heading":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorSectionHeading$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorSectionHeading = XplorSectionHeading$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorSectionHeading, defineCustomElement };
+//# sourceMappingURL=xplor-section-heading.js.map
+
+//# sourceMappingURL=xplor-section-heading.js.map

package/dist/components/xplor-section-heading.js.map

@@ -0,0 +1 @@
+{"file":"xplor-section-heading.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,yjOAAyjO;;MCO3kOA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAkBtD;IAfC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAC/C,gBAAA,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAChD,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,CACnB,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorSectionHeading","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-section-heading/xplor-section-heading.scss?tag=xplor-section-heading&encapsulation=scoped","src/components/xplor-section-heading/xplor-section-heading.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-size: 1rem;\n}\n\n.section-heading {\n  line-height: 1.33;\n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n  font-weight: 500;\n\n  &--small {\n    font-size: 0.9em;\n  }\n\n  &--large {\n    font-size: 1.1em;\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-section-heading',\n  styleUrl: 'xplor-section-heading.scss',\n  scoped: true,\n})\nexport class XplorSectionHeading {\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  @Prop() text: string;\n\n  render() {\n    return (\n      <Host>\n        <span\n          class={{\n            'section-heading': true,\n            'section-heading--small': this.size === 'small',\n            'section-heading--large': this.size === 'large',\n          }}\n        >\n          <slot>{this.text}</slot>\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/xplor-table.js

@@ -0,0 +1,276 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const getIconType = (sortType) => {
+    switch (sortType) {
+        case 'asc':
+            return 'arrow-up';
+        case 'desc':
+            return 'arrow-down';
+        default:
+            return 'dash';
+    }
+};
+const XplorTable$1 = /*@__PURE__*/ proxyCustomElement(class XplorTable extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tableSelect = createEvent(this, "tableSelect");
+        /**
+         * The values for the input for each row when multiselect is activated.
+         */
+        this.selectedValues = [];
+        /**
+         * Toggles to show the sort button on each table head
+         */
+        this.isSortable = true;
+        /**
+         * Manually determined if the column is sortable
+         */
+        this.sortableColumns = [];
+        this.areAllSelected = false;
+        this.hasScrolled = false;
+        this.sortTypeArray = [];
+        this.selectedDateRange = 'All';
+        /**
+         * Callback function that is called when the checkbox for a row of a
+         * `multiselect` table is checked
+         */
+        this.currentPage = 1;
+        this.totalPages = 3;
+        this.handlePagination = (direction) => {
+            switch (direction) {
+                case 'first':
+                    this.currentPage = 1;
+                    break;
+                case 'prev':
+                    if (this.currentPage > 1)
+                        this.currentPage--;
+                    break;
+                case 'next':
+                    if (this.currentPage < this.totalPages)
+                        this.currentPage++;
+                    break;
+                case 'last':
+                    this.currentPage = this.totalPages;
+                    break;
+            }
+        };
+        this.handleDateRangeChange = (event) => {
+            const target = event.target;
+            this.selectedDateRange = target.value;
+        };
+        this.handleFilterReports = () => {
+            console.log('Filter reports clicked');
+        };
+        this.handleDownloadAll = () => {
+            console.log('Download all clicked');
+        };
+        // private handleDownloadReport = (index: number) => {
+        //   console.log(`Download report ${index} clicked`);
+        // };
+        this.selectAllValue = Math.random().toString(36).slice(2);
+        this.selectAll = (e) => {
+            const { target } = e;
+            if (!(target instanceof HTMLInputElement))
+                return;
+            const { checked } = target;
+            this.areAllSelected = checked;
+            this.selected =
+                this.selectedValues.length > 0
+                    ? // gets all checkboxes in body
+                        Array.from(this.el.querySelectorAll('tbody td:first-child input')).map((input) => 
+                        // if the select all checkbox is checked, return
+                        // the value from the current input. If false, set all to false.
+                        checked ? input === null || input === void 0 ? void 0 : input.value : checked)
+                    : this.selected.map(() => checked);
+            this.onChange();
+        };
+        this.selectOne = (e, checkboxIdx) => {
+            const { target } = e;
+            if (!(target instanceof HTMLInputElement))
+                return;
+            const { checked, value } = target;
+            this.areAllSelected = false;
+            this.selected = this.selected.map((v, selectedIdx) => {
+                // if the checkbox that fired the event is not the current idx
+                // return the current value
+                if (selectedIdx !== checkboxIdx)
+                    return v;
+                /**
+                 * If there are values in this.selectedValues, either return the value
+                 * for that checkbox or false, dependent on if the checkbox is checked or not.
+                 * If there are no values in this.selectedValues, return the value
+                 * to either true or false, dependent on if the checkbox is checked or not.
+                 *
+                 */
+                return this.selectedValues.length > 0
+                    ? checked
+                        ? value
+                        : checked
+                    : checked;
+            });
+            this.onChange();
+        };
+        this.onChange = () => {
+            this.tableSelect.emit({
+                selected: this.selected,
+                areAllSelected: this.areAllSelected,
+            });
+        };
+        this.onScroll = () => {
+            this.hasScrolled = this.container.scrollLeft > 0;
+        };
+        this.sortBy = (col) => {
+            this.sortTypeArray = this.sortTypeArray.map((val, idx) => {
+                if (idx !== col)
+                    return null;
+                switch (val) {
+                    case 'asc':
+                        return 'desc';
+                    case 'desc':
+                        return null;
+                    default:
+                        return 'asc';
+                }
+            });
+            const handleSort = (a, b) => {
+                if (a[col].toLocaleLowerCase() < b[col].toLocaleLowerCase()) {
+                    return -1;
+                }
+                if (a[col].toLocaleLowerCase() > b[col].toLocaleLowerCase()) {
+                    return 1;
+                }
+                return 0;
+            };
+            if (this.sortTypeArray[col] === 'asc') {
+                this.rowData.sort((a, b) => handleSort(a, b));
+            }
+            else if (this.sortTypeArray[col] === 'desc') {
+                this.rowData.sort((a, b) => handleSort(b, a));
+            }
+            else {
+                this.rowData = this.data;
+                this.sortTypeArray[col] = null;
+            }
+            this.rowData = Array.from(this.rowData);
+            this.render();
+        };
+        this.setData = () => {
+            this.rowData = this.data !== undefined ? Array.from(this.data) : [];
+        };
+    }
+    // Add this method to paginate rowData
+    getPaginatedData() {
+        const startIndex = (this.currentPage - 1) * 10;
+        const endIndex = startIndex + 10;
+        return this.rowData.slice(startIndex, endIndex);
+    }
+    watchData() {
+        this.setData();
+    }
+    componentWillLoad() {
+        this.areAllSelected = false;
+        this.setData();
+        this.selected = new Array(this.rowData.length).fill(false);
+        // Fill the Sort Type Array to default null depends on number of columns
+        this.sortTypeArray = this.columns && this.columns.map(() => null);
+    }
+    render() {
+        let className = 'xpl-table';
+        if (this.striped)
+            className += ' xpl-table--striped';
+        if (this.freeze)
+            className += ' xpl-table--freeze';
+        if (this.hasScrolled)
+            className += ' xpl-table--has-scrolled';
+        const paginatedData = this.getPaginatedData();
+        return (h(Host, { key: '2d97030af789ed65f7021cb28a7afc2419fbccd5', class: "xplor-table" }, h("div", { key: 'e790897b07a94c98f28af0c1a8d9acbc0bded6c6', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, h("div", { key: 'a1f167a0de10b05288715269bc9c469a547c6102', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+                this.container = el;
+            } }, h("div", { key: '84ab92d9467e4ac9d866a3220ccba9d63b8c8cc8', class: "mb-6" }, h("h1", { key: 'f8746a5162a38476937b83d9549a2fad2a030f8a', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), h("div", { key: '1e7188d1e0a7dd74f466dab3e6ee00189ab88e53', class: "flex flex-wrap items-center gap-4 mb-6" }, h("div", { key: 'c3f2d92bef894ccc749e1249536154147a324711', class: "flex items-center gap-2" }, h("label", { key: '6156ed236c96b1e1f7d480bc97bb0ab8b0b01a87', class: "text-sm text-gray-600 font-medium" }, "Date Range"), h("select", { key: 'da1caff2afb5a1b4786adec7fd9ca7a9480c0f57', class: "border border-gray-300 rounded px-3 py-1.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500",
+            // value={this.selectedDateRange}
+            onInput: this.handleDateRangeChange }, h("option", { key: '6c31c50fe2119d1f5086e3f33ddff4903a290a03', value: "All" }, "All"), h("option", { key: '17d4c7b7c52763065dab2f5dceb85ddd8d23e892', value: "Today" }, "Today"), h("option", { key: '1ec247907dc275825d6a8a105b3c841d2de131f0', value: "This Week" }, "This Week"), h("option", { key: '3fa99b268c42232eb3dccf73dd125b27608d2ba8', value: "This Month" }, "This Month"), h("option", { key: 'bfeea456dde4d67cdc12b00cdba0b694fb5fa3cf', value: "Custom" }, "Custom Range")), h("button", { key: 'f5d3badb19132f137573b4248f0ce99e95e38daa', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, h("svg", { key: 'f32657ec8d66d3e1a10cdb304406999a933ad7ee', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '4b63cca1e36df1a5cd5b598f558fc5bd88f25f17', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })))), h("button", { key: 'f5133d241b1669c8ae425a76b69a25db91bc9e69', onClick: this.handleFilterReports, class: "bg-teal-600 hover:bg-teal-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors" }, "Filter Reports"), h("button", { key: '4df30f93e7b019be1ad293a7e70fad80df5c42a8', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, h("svg", { key: '18dc2f9716e0f5bc095d84349f85703f38d23238', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'cbcfc4fd12a099008c3fcbf762cbfccc63b1706c', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })), "Download All"))), h("table", { key: 'cf9f942709fcc413f99891d612b1640eed94debf', class: `w-full ${className}` }, this.columns && (h("thead", { key: 'baeee3644d8fb2fd9e2d038200b24d433bbdf87b' }, this.columns.map((column, i) => {
+            const iconType = getIconType(this.sortTypeArray[i]);
+            const isColumnSortable = !!(this.isSortable &&
+                this.sortableColumns[i]);
+            return (h("th", { class: "text-left py-3 px-4 text-sm font-medium text-gray-600" }, this.multiselect && i === 0 ? (h("label", { onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    debugger;
+                    if (isColumnSortable) {
+                        this.sortBy(i);
+                    }
+                }, class: isColumnSortable
+                    ? 'cursor-pointer'
+                    : '' }, h("input", { checked: this.areAllSelected, id: "__xpl-table-th",
+                // appear indeterminate when at least one but not all
+                // are selected
+                indeterminate: !this
+                    .areAllSelected &&
+                    this.selected.some((a) => a), onClick: (e) => {
+                    e.stopPropagation();
+                    this.selectAll(e);
+                }, type: "checkbox", value: `select-all-${this.selectAllValue}` }), column, isColumnSortable &&
+                !!this.sortTypeArray[i] && (h("xpl-icon", { icon: iconType, size: 16 })))) : (h("label", { onClick: () => isColumnSortable &&
+                    this.sortBy(i), class: isColumnSortable
+                    ? 'cursor-pointer'
+                    : '' }, column, isColumnSortable &&
+                !!this.sortTypeArray[i] && (h("svg", { width: "11", height: "6", viewBox: "0 0 11 6", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M10.5 5.5L5.5 0.5L0.5 5.5L10.5 5.5Z", fill: "currentColor" }))
+            // <xpl-icon
+            //     icon={iconType}
+            //     size={16}
+            //     id="__xpl-icon-sort"
+            // ></xpl-icon>
+            )))));
+        }))), h("tbody", { key: 'b0715075cfba14dd9ac1e783e0c27a197e41a725' }, paginatedData.map((row, rowNum) => (h("tr", { class: `border-b border-gray-100 hover:bg-gray-50` }, row.map((cell, i) => (h("td", { class: "py-3 px-4 text-sm text-gray-900" }, this.multiselect && i === 0 ? (h("label", { class: "flex items-center gap-2", htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues
+                .length > 0
+                ? this
+                    .selectedValues[rowNum]
+                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell })))))))))), h("div", { key: '658aec34fd3394c205d12ab67d06c6f1bb385aa6', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, h("div", { key: 'aa7d796792186a3bd76f4201ead86e2055d65cf9', class: "flex items-center gap-2" }, h("button", { key: '7517d034c1456224fb24a0d66c3f60a446e96ef0', onClick: () => this.handlePagination('first'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: '9af8fe875c042ffdd8fd7015b01703d29789a1af', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '41a1023ce1243190df484411ac9390ccd1496f10', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), h("button", { key: 'ac9f0e09603e4bd45d6aa10dd45303f8bc90f892', onClick: () => this.handlePagination('prev'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: 'af67ed98c91a36076f1578e5eaa49321aa919984', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'f0e3498f7b8e784e4848c0190eaab285f1c220af', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), h("span", { key: '29ae566f6e8f3cbaad39998165529b5022073a56', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), h("div", { key: '91da8153fd11fac318ef63b768e3ce0fda3e4b63', class: "flex items-center gap-2" }, h("button", { key: 'f8e399e46605f060d09c0f1fcc5864dae84949fd', onClick: () => this.handlePagination('next'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: '93a0154407f0034993b31f79f746b905d8c720ba', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '67341c2e70e6e0e51bca7f6c0f8d790577efb80c', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), h("button", { key: '6c4e12bf4877e44ffb5cb6cec4a91dd41c76a95d', onClick: () => this.handlePagination('last'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: 'b476cb40832e1116db85780080839fe87fc75777', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'da32eb5c65018fe776af2f65ccd433573b21822e', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 5l7 7-7 7M5 5l7 7-7 7" })))))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "data": ["watchData"]
+    }; }
+}, [1, "xplor-table", {
+        "columns": [16],
+        "data": [16],
+        "freeze": [4],
+        "multiselect": [4],
+        "striped": [4],
+        "selectedValues": [16, "selected-values"],
+        "isSortable": [4, "is-sortable"],
+        "sortableColumns": [16, "sortable-columns"],
+        "areAllSelected": [32],
+        "rowData": [32],
+        "hasScrolled": [32],
+        "selected": [32],
+        "sortTypeArray": [32],
+        "selectedDateRange": [32],
+        "currentPage": [32],
+        "totalPages": [32]
+    }, undefined, {
+        "data": ["watchData"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["xplor-table"];
+    components.forEach(tagName => { switch (tagName) {
+        case "xplor-table":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, XplorTable$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const XplorTable = XplorTable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { XplorTable, defineCustomElement };
+//# sourceMappingURL=xplor-table.js.map
+
+//# sourceMappingURL=xplor-table.js.map