@paperless/core 1.6.0 → 1.7.0

package/dist/components/pagination.component.js.map

@@ -1 +1 @@
-{"file":"pagination.component.js","mappings":"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","names":[],"sources":["./src/components/molecules/pagination/pagination.component.scss?tag=p-pagination","./src/components/molecules/pagination/pagination.component.tsx"],"sourcesContent":["p-pagination {\n  @apply flex;\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    Watch\n} from '@stencil/core';\n\ntype PaginationSetItem = {\n    type: string;\n    value?: number | Element | JSX.Element | string;\n};\n\n@Component({\n    tag: 'p-pagination',\n    styleUrl: 'pagination.component.scss',\n})\nexport class Pagination {\n    /**\n     * The current page\n     */\n    @Prop({ mutable: true, reflect: true }) page: number = 1;\n\n    /**\n     * Event whenever the page changes\n     */\n    @Event({\n        bubbles: false\n    }) pageChange: EventEmitter<number>;\n\n    /**\n     * The amount of items per page\n     */\n    @Prop() pageSize: number = 12;\n\n    /**\n     * Wether to hide when there is only 1 page available\n     */\n    @Prop() hideOnSinglePage: boolean = false;\n\n    /**\n     * The total amount of items\n     */\n    @Prop() total!: number;\n\n    private _pages: number[] = [];\n    private _set: PaginationSetItem[] = [];\n\n    componentWillRender() {\n        this._generate();\n    }\n\n    render() {\n        return (\n            <Host\n                class={`p-pagination ${\n                    this.hideOnSinglePage && this._set?.length === 3 && 'hidden'\n                }`}\n            >\n                {this._set?.map((p) => {\n                    if (p.type === 'previous' || p.type === 'next') {\n                        return (\n                            <p-pagination-item\n                                onClick={() =>\n                                    p.type === 'previous'\n                                        ? this._previousClick()\n                                        : this._nextClick()\n                                }\n                            >\n                                {p.value}\n                            </p-pagination-item>\n                        );\n                    }\n\n                    if (p.type === 'ellipsis') {\n                        return <p-pagination-item>...</p-pagination-item>;\n                    }\n\n                    return (\n                        <p-pagination-item\n                            active={p.value === this.page}\n                            onClick={() => this._pageClick(p.value as number)}\n                        >\n                            {p.value}\n                        </p-pagination-item>\n                    );\n                })}\n            </Host>\n        );\n    }\n\n    @Watch('page')\n    @Watch('pageSize')\n    @Watch('total')\n    protected pageChangeHandler() {\n        this._generate();\n    }\n\n    private _generate() {\n        this._pages = this._generatePages();\n        this._set = this._generateSet();\n\n        if (this.page > this._pages?.length) {\n            this._changePage(this._pages.length);\n        }\n    }\n\n    private _changePage(p?: number) {\n        if (!p) {\n            return;\n        }\n\n        this.page = p;\n        this.pageChange.emit(this.page);\n    }\n\n    private _previousClick() {\n        const previousPage = this.page - 1;\n        if (previousPage < this._pages[0]) {\n            return;\n        }\n\n        this._changePage(previousPage);\n    }\n\n    private _nextClick = () => {\n        const nextPage = this.page + 1;\n        if (nextPage > this._pages[this._pages.length - 1]) {\n            return;\n        }\n\n        this._changePage(nextPage);\n    };\n\n    private _pageClick = (p?: number) => this._changePage(p);\n\n    private _generatePages() {\n        if (!this.total || !this.pageSize) {\n            return [];\n        }\n\n        const pages = Math.ceil(this.total / this.pageSize);\n        return new Array(pages).fill(undefined).map((_, i) => i + 1);\n    }\n\n    private _generateSet = (\n        range: number = 1,\n        enableBoundaries: boolean = true\n    ): PaginationSetItem[] => {\n        const totalPages = this._pages.length;\n\n        if (!totalPages) {\n            return [];\n        }\n\n        let start = this.page - range;\n        let end = this.page + range;\n\n        if (end > totalPages) {\n            end = totalPages;\n            start = totalPages - range * 2;\n            start = start < 1 ? 1 : start;\n        }\n\n        if (start <= 1) {\n            start = 1;\n            end = Math.min(range * 2 + 1, totalPages);\n        }\n\n        const set = [];\n\n        const previous = {\n            type: 'previous',\n            value: <p-icon variant=\"chevron\" rotate={90} />,\n        };\n\n        const next = {\n            type: 'next',\n            value: <p-icon variant=\"chevron\" rotate={-90} />,\n        };\n\n        // Disable page range, display all the pages\n        if (range === null) {\n            const p = this._pages.map((p) => ({\n                type: 'page',\n                value: p,\n            }));\n\n            return enableBoundaries ? [previous, ...p, next] : p;\n        }\n\n        if (enableBoundaries) {\n            set.push(previous);\n        }\n\n        if (start <= 3) {\n            for (let i = 1; i < start; i++) {\n                set.push({\n                    type: 'page',\n                    value: this._pages[i - 1],\n                });\n            }\n        } else {\n            set.push({\n                type: 'page',\n                value: 1,\n            });\n\n            set.push({\n                type: 'ellipsis',\n                value: 'ellipsis',\n            });\n        }\n\n        for (let i = start; i <= end; i++) {\n            set.push({\n                type: 'page',\n                value: this._pages[i - 1],\n            });\n        }\n\n        if (end >= totalPages - 2) {\n            for (let i = end + 1; i <= totalPages; i++) {\n                set.push({\n                    type: 'page',\n                    value: this._pages[i - 1],\n                });\n            }\n        } else {\n            set.push({\n                type: 'ellipsis',\n            });\n\n            set.push({\n                type: 'page',\n                value: this._pages[this._pages.length - 1],\n            });\n        }\n\n        if (enableBoundaries) {\n            set.push(next);\n        }\n\n        return set;\n    };\n}\n"],"version":3}
+{"file":"pagination.component.js","mappings":"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","names":[],"sources":["./src/components/molecules/pagination/pagination.component.scss?tag=p-pagination","./src/components/molecules/pagination/pagination.component.tsx"],"sourcesContent":["p-pagination {\n  @apply flex;\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    Watch\n} from '@stencil/core';\n\ntype PaginationSetItem = {\n    type: string;\n    value?: number | Element | JSX.Element | string;\n};\n\n@Component({\n    tag: 'p-pagination',\n    styleUrl: 'pagination.component.scss',\n})\nexport class Pagination {\n    /**\n     * The current page\n     */\n    @Prop({ mutable: true, reflect: true }) page: number = 1;\n\n    /**\n     * Event whenever the page changes\n     */\n    @Event({\n        bubbles: false\n    }) pageChange: EventEmitter<number>;\n\n    /**\n     * The amount of items per page\n     */\n    @Prop() pageSize: number = 12;\n\n    /**\n     * Wether to hide when there is only 1 page available\n     */\n    @Prop() hideOnSinglePage: boolean = false;\n\n    /**\n     * The total amount of items\n     */\n    @Prop() total!: number;\n\n    private _pages: number[] = [];\n    private _set: PaginationSetItem[] = [];\n\n    componentWillRender() {\n        this._generate();\n    }\n\n    render() {\n        return (\n            <Host\n                class={`p-pagination ${\n                    this.hideOnSinglePage && this._set?.length === 3 && 'hidden'\n                }`}\n            >\n                {this._set?.map((p) => {\n                    if (p.type === 'previous' || p.type === 'next') {\n                        return (\n                            <p-pagination-item\n                                onClick={() =>\n                                    p.type === 'previous'\n                                        ? this._previousClick()\n                                        : this._nextClick()\n                                }\n                            >\n                                {p.value}\n                            </p-pagination-item>\n                        );\n                    }\n\n                    if (p.type === 'ellipsis') {\n                        return <p-pagination-item>...</p-pagination-item>;\n                    }\n\n                    return (\n                        <p-pagination-item\n                            active={p.value === this.page}\n                            onClick={() => this._pageClick(p.value as number)}\n                        >\n                            {p.value}\n                        </p-pagination-item>\n                    );\n                })}\n            </Host>\n        );\n    }\n\n    @Watch('page')\n    @Watch('pageSize')\n    @Watch('total')\n    protected pageChangeHandler() {\n        this._generate();\n    }\n\n    private _generate() {\n        this._pages = this._generatePages();\n        this._set = this._generateSet();\n\n        if (this.page > this._pages?.length) {\n            this._changePage(this._pages.length);\n        }\n    }\n\n    private _changePage(p?: number) {\n        if (!p) {\n            return;\n        }\n\n        this.page = p;\n        this.pageChange.emit(this.page);\n    }\n\n    private _previousClick() {\n        const previousPage = this.page - 1;\n        if (previousPage < this._pages[0]) {\n            return;\n        }\n\n        this._changePage(previousPage);\n    }\n\n    private _nextClick = () => {\n        const nextPage = this.page + 1;\n        if (nextPage > this._pages[this._pages.length - 1]) {\n            return;\n        }\n\n        this._changePage(nextPage);\n    };\n\n    private _pageClick = (p?: number) => this._changePage(p);\n\n    private _generatePages() {\n        if (!this.total || !this.pageSize) {\n            return [];\n        }\n\n        const pages = Math.ceil(this.total / this.pageSize);\n        return new Array(pages).fill(undefined).map((_, i) => i + 1);\n    }\n\n    private _generateSet = (\n        range: number = 1,\n        enableBoundaries: boolean = true\n    ): PaginationSetItem[] => {\n        const totalPages = this._pages.length;\n\n        if (!totalPages) {\n            return [];\n        }\n\n        let start = this.page - range;\n        let end = this.page + range;\n\n        if (end > totalPages) {\n            end = totalPages;\n            start = totalPages - range * 2;\n            start = start < 1 ? 1 : start;\n        }\n\n        if (start <= 1) {\n            start = 1;\n            end = Math.min(range * 2 + 1, totalPages);\n        }\n\n        const set = [];\n\n        const previous = {\n            type: 'previous',\n            value: <p-icon variant=\"chevron\" rotate={90} />,\n        };\n\n        const next = {\n            type: 'next',\n            value: <p-icon variant=\"chevron\" rotate={-90} />,\n        };\n\n        // Disable page range, display all the pages\n        if (range === null) {\n            const p = this._pages.map((p) => ({\n                type: 'page',\n                value: p,\n            }));\n\n            return enableBoundaries ? [previous, ...p, next] : p;\n        }\n\n        if (enableBoundaries) {\n            set.push(previous);\n        }\n\n        if (start <= 3) {\n            for (let i = 1; i < start; i++) {\n                set.push({\n                    type: 'page',\n                    value: this._pages[i - 1],\n                });\n            }\n        } else {\n            set.push({\n                type: 'page',\n                value: 1,\n            });\n\n            set.push({\n                type: 'ellipsis',\n                value: 'ellipsis',\n            });\n        }\n\n        for (let i = start; i <= end; i++) {\n            set.push({\n                type: 'page',\n                value: this._pages[i - 1],\n            });\n        }\n\n        if (end >= totalPages - 2) {\n            for (let i = end + 1; i <= totalPages; i++) {\n                set.push({\n                    type: 'page',\n                    value: this._pages[i - 1],\n                });\n            }\n        } else {\n            set.push({\n                type: 'ellipsis',\n            });\n\n            set.push({\n                type: 'page',\n                value: this._pages[this._pages.length - 1],\n            });\n        }\n\n        if (enableBoundaries) {\n            set.push(next);\n        }\n\n        return set;\n    };\n}\n"],"version":3}

package/dist/components/segment-container.component.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const segmentContainerComponentCss = ".flex{display:flex!important}.h-8{height:2rem!important}.items-center{align-items:center!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}*{box-sizing:border-box}p-segment-container{--tw-bg-opacity:1;--tw-border-opacity:1;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity));border-radius:.375rem;border-style:solid;border-width:1px;display:flex;gap:.25rem;height:2rem;padding:.25rem}.static{position:static!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.max-w-\\[20rem\\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.self-center{align-self:center!important}.rounded{border-radius:.25rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.table-cell{display:table-cell!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}.w-auto{width:auto!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.pr-4{padding-right:1rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.w-3\\/4{width:75%!important}.gap-4{gap:1rem!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.m-0{margin:0!important}.table-row{display:table-row!important}.visible{visibility:visible!important}.absolute{position:absolute!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.inline{display:inline!important}";
+const segmentContainerComponentCss = ".flex{display:flex!important}.h-8{height:2rem!important}.items-center{align-items:center!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}*{box-sizing:border-box}p-segment-container{--tw-bg-opacity:1;--tw-border-opacity:1;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity));border-radius:.375rem;border-style:solid;border-width:1px;display:flex;gap:.25rem;height:2rem;padding:.25rem}.static{position:static!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.max-w-\\[20rem\\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.self-center{align-self:center!important}.rounded{border-radius:.25rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.table-cell{display:table-cell!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}.w-auto{width:auto!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.pr-4{padding-right:1rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.w-3\\/4{width:75%!important}.gap-4{gap:1rem!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.visible{visibility:visible!important}.absolute{position:absolute!important}.m-0{margin:0!important}.table-row{display:table-row!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}";
 
 const SegmentContainer = /*@__PURE__*/ proxyCustomElement(class SegmentContainer extends HTMLElement {
   constructor() {

package/dist/components/segment-container.component.js.map

@@ -1 +1 @@
-{"file":"segment-container.component.js","mappings":";;AAAA,MAAM,4BAA4B,GAAG,isWAAisW;;MCMztW,gBAAgB;;;;;EACzB,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,qBAAqB,IAC7B,eAAQ,CACL,EACT;GACL;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/segment-container/segment-container.component.scss?tag=p-segment-container","./src/components/atoms/segment-container/segment-container.component.tsx"],"sourcesContent":["p-segment-container {\n    @apply flex items-center gap-1;\n    @apply bg-white rounded-large;\n    @apply h-8 p-1;\n    @apply border border-solid border-mystic-dark;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n    tag: 'p-segment-container',\n    styleUrl: 'segment-container.component.scss',\n})\nexport class SegmentContainer {\n    render() {\n        return (\n            <Host class=\"p-segment-container\">\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"segment-container.component.js","mappings":";;AAAA,MAAM,4BAA4B,GAAG,k+VAAk+V;;MCM1/V,gBAAgB;;;;;EACzB,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,qBAAqB,IAC7B,eAAQ,CACL,EACT;GACL;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/segment-container/segment-container.component.scss?tag=p-segment-container","./src/components/atoms/segment-container/segment-container.component.tsx"],"sourcesContent":["p-segment-container {\n    @apply flex items-center gap-1;\n    @apply bg-white rounded-large;\n    @apply h-8 p-1;\n    @apply border border-solid border-mystic-dark;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n    tag: 'p-segment-container',\n    styleUrl: 'segment-container.component.scss',\n})\nexport class SegmentContainer {\n    render() {\n        return (\n            <Host class=\"p-segment-container\">\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/segment-item.component.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './icon.component.js';
 
-const segmentItemComponentCss = ".flex{display:flex!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-indigo{color:rgb(82 138 250/var(--tw-text-opacity))!important}.text-indigo,.text-storm{--tw-text-opacity:1!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;border-radius:.375rem;color:rgb(81 83 107/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;height:1.5rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;white-space:nowrap}:host(.variant-icon){justify-content:center;padding-left:0;padding-right:0;width:1.5rem}:host(:hover){--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity))}:host(.active){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(82 138 250/var(--tw-text-opacity))}.static{position:static!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.hidden{display:none!important}.max-w-\\[20rem\\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.self-center{align-self:center!important}.rounded{border-radius:.25rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.table-cell{display:table-cell!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}.w-auto{width:auto!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.pr-4{padding-right:1rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.h-8{height:2rem!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.w-3\\/4{width:75%!important}.gap-4{gap:1rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.m-0{margin:0!important}.table-row{display:table-row!important}.visible{visibility:visible!important}.absolute{position:absolute!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.inline{display:inline!important}";
+const segmentItemComponentCss = ".flex{display:flex!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-indigo{color:rgb(82 138 250/var(--tw-text-opacity))!important}.text-indigo,.text-storm{--tw-text-opacity:1!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{--tw-text-opacity:1;align-items:center;border-radius:.375rem;color:rgb(81 83 107/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:600;height:1.5rem;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem;white-space:nowrap}:host(.variant-icon){justify-content:center;padding-left:0;padding-right:0;width:1.5rem}:host(:hover){--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity))}:host(.active){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity));color:rgb(82 138 250/var(--tw-text-opacity))}.static{position:static!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.hidden{display:none!important}.max-w-\\[20rem\\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.self-center{align-self:center!important}.rounded{border-radius:.25rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.table-cell{display:table-cell!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}.w-auto{width:auto!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.pr-4{padding-right:1rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.h-8{height:2rem!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.w-3\\/4{width:75%!important}.gap-4{gap:1rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.visible{visibility:visible!important}.absolute{position:absolute!important}.m-0{margin:0!important}.table-row{display:table-row!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}";
 
 const SegmentItem = /*@__PURE__*/ proxyCustomElement(class SegmentItem extends HTMLElement {
   constructor() {

package/dist/components/segment-item.component.js.map

@@ -1 +1 @@
-{"file":"segment-item.component.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,qqXAAqqX;;MCSxrX,WAAW;;;;;kBAIM,KAAK;;;;;EAiB/B,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE,0BACH,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,SACzB,IAAI,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,IAE5B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,eAAQ,CACpC,EACT;GACL;EAEO,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,QACI,cACI,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,EACJ;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/segment-item/segment-item.component.scss?tag=p-segment-item&encapsulation=shadow","./src/components/atoms/segment-item/segment-item.component.tsx"],"sourcesContent":[":host {\n    @apply h-6 flex items-center px-2 rounded-large;\n    @apply text-storm text-sm font-semibold whitespace-nowrap;\n    @apply cursor-pointer;\n}\n\n:host(.variant-icon) {\n    @apply w-6 justify-center px-0;\n}\n\n:host(:hover) {\n    @apply bg-indigo-light;\n}\n\n:host(.active) {\n    @apply text-indigo bg-indigo-light;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../icon/icon.component';\n\n@Component({\n    tag: 'p-segment-item',\n    styleUrl: 'segment-item.component.scss',\n    shadow: true,\n})\nexport class SegmentItem {\n    /**\n     * Wether the segment item is active\n     */\n    @Prop() active: boolean = false;\n\n    /**\n     * Icon to show on the segment item\n     */\n    @Prop() icon: IconVariant;\n\n    /**\n     * Icon flip\n     */\n    @Prop() iconFlip: IconFlipOptions;\n\n    /**\n     * Icon rotate\n     */\n    @Prop() iconRotate: RotateOptions;\n\n    render() {\n        return (\n            <Host\n                class={`p-segment-item variant-${\n                    this.icon ? 'icon' : 'default'\n                } ${this.active && 'active'}`}\n            >\n                {this.icon ? this._getIcon() : <slot />}\n            </Host>\n        );\n    }\n\n    private _getIcon() {\n        if (!this.icon) {\n            return;\n        }\n\n        return (\n            <p-icon\n                class=\"flex\"\n                variant={this.icon}\n                flip={this.iconFlip}\n                rotate={this.iconRotate}\n            />\n        );\n    }\n}\n"],"version":3}
+{"file":"segment-item.component.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,s8WAAs8W;;MCSz9W,WAAW;;;;;kBAIM,KAAK;;;;;EAiB/B,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE,0BACH,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,SACzB,IAAI,IAAI,CAAC,MAAM,IAAI,QAAQ,EAAE,IAE5B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,eAAQ,CACpC,EACT;GACL;EAEO,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,QACI,cACI,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACzB,EACJ;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/segment-item/segment-item.component.scss?tag=p-segment-item&encapsulation=shadow","./src/components/atoms/segment-item/segment-item.component.tsx"],"sourcesContent":[":host {\n    @apply h-6 flex items-center px-2 rounded-large;\n    @apply text-storm text-sm font-semibold whitespace-nowrap;\n    @apply cursor-pointer;\n}\n\n:host(.variant-icon) {\n    @apply w-6 justify-center px-0;\n}\n\n:host(:hover) {\n    @apply bg-indigo-light;\n}\n\n:host(.active) {\n    @apply text-indigo bg-indigo-light;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../icon/icon.component';\n\n@Component({\n    tag: 'p-segment-item',\n    styleUrl: 'segment-item.component.scss',\n    shadow: true,\n})\nexport class SegmentItem {\n    /**\n     * Wether the segment item is active\n     */\n    @Prop() active: boolean = false;\n\n    /**\n     * Icon to show on the segment item\n     */\n    @Prop() icon: IconVariant;\n\n    /**\n     * Icon flip\n     */\n    @Prop() iconFlip: IconFlipOptions;\n\n    /**\n     * Icon rotate\n     */\n    @Prop() iconRotate: RotateOptions;\n\n    render() {\n        return (\n            <Host\n                class={`p-segment-item variant-${\n                    this.icon ? 'icon' : 'default'\n                } ${this.active && 'active'}`}\n            >\n                {this.icon ? this._getIcon() : <slot />}\n            </Host>\n        );\n    }\n\n    private _getIcon() {\n        if (!this.icon) {\n            return;\n        }\n\n        return (\n            <p-icon\n                class=\"flex\"\n                variant={this.icon}\n                flip={this.iconFlip}\n                rotate={this.iconRotate}\n            />\n        );\n    }\n}\n"],"version":3}

package/dist/components/table-cell.component.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { o as objectGetByPath, i as isTableColumnSizesKey } from './object-get-by-path.js';
 import { d as defineCustomElement$1 } from './loader.component.js';
 
-const tableCellComponentCss = ".flex{display:flex!important}.gap-4{gap:1rem!important}*{box-sizing:border-box}p-table-cell{align-items:center;display:flex;gap:1rem}.static{position:static!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.max-w-\\[20rem\\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.self-center{align-self:center!important}.rounded{border-radius:.25rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.table-cell{display:table-cell!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}.w-auto{width:auto!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.pr-4{padding-right:1rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.h-8{height:2rem!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.w-3\\/4{width:75%!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.m-0{margin:0!important}.table-row{display:table-row!important}.visible{visibility:visible!important}.absolute{position:absolute!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.inline{display:inline!important}";
+const tableCellComponentCss = ".flex{display:flex!important}.gap-4{gap:1rem!important}*{box-sizing:border-box}p-table-cell{align-items:center;display:flex;gap:1rem}.static{position:static!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.max-w-\\[20rem\\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.self-center{align-self:center!important}.rounded{border-radius:.25rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.table-cell{display:table-cell!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}.w-auto{width:auto!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.pr-4{padding-right:1rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.h-8{height:2rem!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.w-3\\/4{width:75%!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.visible{visibility:visible!important}.absolute{position:absolute!important}.m-0{margin:0!important}.table-row{display:table-row!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}";
 
 const TableCell = /*@__PURE__*/ proxyCustomElement(class TableCell extends HTMLElement {
   constructor() {

package/dist/components/table-cell.component.js.map

@@ -1 +1 @@
-{"file":"table-cell.component.js","mappings":"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","names":[],"sources":["./src/components/molecules/table-cell/table-cell.component.scss?tag=p-table-cell","./src/components/molecules/table-cell/table-cell.component.tsx"],"sourcesContent":["p-table-cell {\n    @apply flex gap-4 items-center;\n\n    // TODO: Remove this\n    // @import '../../../style/form/checkbox';\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport {\n    isTableColumnSizesKey,\n    TableColumnSizes,\n    TableColumnSizesKey,\n    TableDefinitionData,\n    TableDefinitionTemplateFunc,\n} from '../../../types';\nimport { objectGetByPath } from '../../../utils';\nimport { TableColumn } from '../../helpers/table-column/table-column.component';\n\n@Component({\n    tag: 'p-table-cell',\n    styleUrl: 'table-cell.component.scss',\n})\nexport class TableCell {\n    /**\n     * The variant of the column\n     */\n    @Prop() variant: 'default' | 'loading' | 'header' = 'default';\n\n    /**\n     * The index of the column\n     */\n    @Prop() index: number;\n\n    /**\n     * The index of the row\n     */\n    @Prop() rowIndex: number;\n\n    /**\n     * The definition of the table column\n     */\n    @Prop() definition?: TableColumn;\n\n    /**\n     * The item in question\n     */\n    @Prop() item: any;\n\n    /**\n     * The value of the column\n     */\n    @Prop() value: any;\n\n    /**\n     * The checkbox to show\n     */\n    @Prop() checkbox: any;\n\n    /**\n     * The template to show\n     */\n    @Prop() template: TableDefinitionTemplateFunc = ({\n        value,\n    }: TableDefinitionData) => value;\n\n    get data(): TableDefinitionData | { value: string } {\n        if (this.variant === 'header') {\n            return {\n                value: this.value,\n            };\n        }\n\n        return {\n            value:\n                this.value ?? objectGetByPath(this.item, this.definition.path),\n            item: this.item,\n            index: this.index,\n            rowIndex: this.rowIndex,\n        };\n    }\n\n    render() {\n        return (\n            <Host\n                class={{\n                    'p-table-cell': true,\n                    [`variant-${this.variant}`]: true,\n                    ...this._getColumnClasses(),\n                }}\n            >\n                {this.checkbox}\n\n                {this.variant === 'loading' ? (\n                    <p-loader\n                        variant=\"ghost\"\n                        class=\"h-6 w-full flex-1 rounded\"\n                    />\n                ) : (\n                    <div\n                        class={{\n                            flex: true,\n                            'justify-start': this.definition.align === 'start',\n                            'justify-center':\n                                this.definition.align === 'center',\n                            'justify-end': this.definition.align === 'end',\n                        }}\n                    >\n                        {this.variant === 'header' ? (\n                            this.data.value\n                        ) : this.definition.useSlot ? (\n                            <slot />\n                        ) : (\n                            this.template(this.data as TableDefinitionData)\n                        )}\n                    </div>\n                )}\n            </Host>\n        );\n    }\n\n    private _getColumnClasses() {\n        const sizes = this.definition ? this._getSizes(this.definition) : {};\n        return {\n            'justify-start':\n                !this.definition?.align || this.definition?.align === 'start',\n            'justify-center': this.definition?.align === 'center',\n            'justify-end': this.definition?.align === 'end',\n            'font-semibold':\n                this.variant !== 'header' && this.definition?.type === 'th',\n            'text-storm-dark':\n                this.variant !== 'header' && this.definition?.type === 'th',\n            'pr-4': this.definition.isLast === false,\n            ...sizes,\n        };\n    }\n\n    /* \n     With this, we shall hack the system in ways no one would ever have thought.\n     \n     <div class=\"w-1/12 w-2/12 w-3/12 w-4/12 w-5/12 w-6/12 w-7/12 w-8/12 w-9/12 w-10/12 w-11/12 w-12/12\"></div>\n     <div class=\"tablet:w-1/12 tablet:w-2/12 tablet:w-3/12 tablet:w-4/12 tablet:w-5/12 tablet:w-6/12 tablet:w-7/12 tablet:w-8/12 tablet:w-9/12 tablet:w-10/12 tablet:w-11/12 tablet:w-12/12\"></div>\n     <div class=\"desktop-xs:w-1/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-12/12\"></div>\n     <div class=\"desktop-xs:w-1/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-12/12\"></div>\n     <div class=\"desktop-sm:w-1/12 desktop-sm:w-2/12 desktop-sm:w-3/12 desktop-sm:w-4/12 desktop-sm:w-5/12 desktop-sm:w-6/12 desktop-sm:w-7/12 desktop-sm:w-8/12 desktop-sm:w-9/12 desktop-sm:w-10/12 desktop-sm:w-11/12 desktop-sm:w-12/12\"></div>\n     <div class=\"desktop:w-1/12 desktop:w-2/12 desktop:w-3/12 desktop:w-4/12 desktop:w-5/12 desktop:w-6/12 desktop:w-7/12 desktop:w-8/12 desktop:w-9/12 desktop:w-10/12 desktop:w-11/12 desktop:w-12/12\"></div>\n     <div class=\"desktop-lg:w-1/12 desktop-lg:w-2/12 desktop-lg:w-3/12 desktop-lg:w-4/12 desktop-lg:w-5/12 desktop-lg:w-6/12 desktop-lg:w-7/12 desktop-lg:w-8/12 desktop-lg:w-9/12 desktop-lg:w-10/12 desktop-lg:w-11/12 desktop-lg:w-12/12\"></div>\n     <div class=\"desktop-xl:w-1/12 desktop-xl:w-2/12 desktop-xl:w-3/12 desktop-xl:w-4/12 desktop-xl:w-5/12 desktop-xl:w-6/12 desktop-xl:w-7/12 desktop-xl:w-8/12 desktop-xl:w-9/12 desktop-xl:w-10/12 desktop-xl:w-11/12 desktop-xl:w-12/12\"></div>\n\n     \n        ⠀⠀⠀⠀⠀⣠⣴⣶⣿⣿⠿⣷⣶⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣴⣶⣷⠿⣿⣿⣶⣦⣀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⢀⣾⣿⣿⣿⣿⣿⣿⣿⣶⣦⣬⡉⠒⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠚⢉⣥⣴⣾⣿⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀\n        ⠀⠀⠀⡾⠿⠛⠛⠛⠛⠿⢿⣿⣿⣿⣿⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣾⣿⣿⣿⣿⣿⠿⠿⠛⠛⠛⠛⠿⢧⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠻⣿⣿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⣠⣿⣿⣿⣿⡿⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⢰⣿⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⣠⣤⠶⠶⠶⠰⠦⣤⣀⠀⠙⣷⠀⠀⠀⠀⠀⠀⠀⢠⡿⠋⢀⣀⣤⢴⠆⠲⠶⠶⣤⣄⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠘⣆⠀⠀⢠⣾⣫⣶⣾⣿⣿⣿⣿⣷⣯⣿⣦⠈⠃⡇⠀⠀⠀⠀⢸⠘⢁⣶⣿⣵⣾⣿⣿⣿⣿⣷⣦⣝⣷⡄⠀⠀⡰⠂⠀\n        ⠀⠀⣨⣷⣶⣿⣧⣛⣛⠿⠿⣿⢿⣿⣿⣛⣿⡿⠀⠀⡇⠀⠀⠀⠀⢸⠀⠈⢿⣟⣛⠿⢿⡿⢿⢿⢿⣛⣫⣼⡿⣶⣾⣅⡀⠀\n        ⢀⡼⠋⠁⠀⠀⠈⠉⠛⠛⠻⠟⠸⠛⠋⠉⠁⠀⠀⢸⡇⠀⠀⠄⠀⢸⡄⠀⠀⠈⠉⠙⠛⠃⠻⠛⠛⠛⠉⠁⠀⠀⠈⠙⢧⡀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⡇⢠⠀⠀⠀⢸⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⣿⡇⠀⠀⠀⠀⢸⣿⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠟⠁⣿⠇⠀⠀⠀⠀⢸⡇⠙⢿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠰⣄⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣾⠖⡾⠁⠀⠀⣿⠀⠀⠀⠀⠀⠘⣿⠀⠀⠙⡇⢸⣷⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠄⠀\n        ⠀⠀⢻⣷⡦⣤⣤⣤⡴⠶⠿⠛⠉⠁⠀⢳⠀⢠⡀⢿⣀⠀⠀⠀⠀⣠⡟⢀⣀⢠⠇⠀⠈⠙⠛⠷⠶⢦⣤⣤⣤⢴⣾⡏⠀⠀\n        ⠀⠀⠈⣿⣧⠙⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠘⠛⢊⣙⠛⠒⠒⢛⣋⡚⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀⣠⣿⡿⠁⣾⡿⠀⠀⠀\n        ⠀⠀⠀⠘⣿⣇⠈⢿⣿⣦⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⡿⢿⣿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀⢀⣼⣿⡟⠁⣼⡿⠁⠀⠀⠀\n        ⠀⠀⠀⠀⠘⣿⣦⠀⠻⣿⣷⣦⣤⣤⣶⣶⣶⣿⣿⣿⣿⠏⠀⠀⠻⣿⣿⣿⣿⣶⣶⣶⣦⣤⣴⣿⣿⠏⢀⣼⡿⠁⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠘⢿⣷⣄⠙⠻⠿⠿⠿⠿⠿⢿⣿⣿⣿⣁⣀⣀⣀⣀⣙⣿⣿⣿⠿⠿⠿⠿⠿⠿⠟⠁⣠⣿⡿⠁⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠈⠻⣯⠙⢦⣀⠀⠀⠀⠀⠀⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠀⠀⠀⠀⠀⣠⠴⢋⣾⠟⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠙⢧⡀⠈⠉⠒⠀⠀⠀⠀⠀⠀⣀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠐⠒⠉⠁⢀⡾⠃⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀⠀⠻⣿⣿⣿⣿⠋⠀⠀⠀⠀⠀⠀⠀⠀⣠⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢦⡀⠀⠀⠀⠀⠀⠀⠀⣸⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⢀⡴⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n    */\n    private _getSizes({ sizes }: TableColumn) {\n        if (sizes === 'auto' || !sizes) {\n            return {\n                'w-auto': true,\n            };\n        }\n\n        if (sizes === 'hidden') {\n            return {\n                hidden: true,\n            };\n        }\n\n        if (typeof sizes === 'object') {\n            sizes = sizes as TableColumnSizes;\n            const classes: any = {};\n            let previousSize: TableColumnSizesKey | undefined;\n\n            for (let size in sizes) {\n                if (!isTableColumnSizesKey(sizes, size)) {\n                    continue;\n                }\n\n                if (size === 'default') {\n                    if (sizes.default === 'hidden') {\n                        classes['hidden'] = true;\n                        previousSize = size;\n                        continue;\n                    }\n\n                    classes[`w-${sizes.default}/12`] = true;\n                    previousSize = size;\n                    continue;\n                }\n\n                const currentValue = sizes[size];\n                const previousValue = previousSize ? sizes[previousSize] : null;\n                if (\n                    currentValue !== 'hidden' &&\n                    previousValue &&\n                    previousValue === 'hidden'\n                ) {\n                    classes[`${size}:flex`] = true;\n                }\n\n                if (currentValue === 'hidden') {\n                    classes[`${size}:hidden`] = true;\n                    previousSize = size;\n                    continue;\n                }\n\n                if (currentValue === 12 || currentValue === 'full') {\n                    classes[`${size}:w-full`] = true;\n                }\n\n                classes[`${size}:w-${currentValue}/12`] = true;\n                previousSize = size;\n            }\n\n            return classes;\n        }\n\n        if (sizes === 12 || sizes === 'full') {\n            return {\n                'w-full': true,\n            };\n        }\n\n        // is a number.\n        return {\n            [`w-${sizes}/12`]: true,\n        };\n    }\n}\n"],"version":3}
+{"file":"table-cell.component.js","mappings":"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","names":[],"sources":["./src/components/molecules/table-cell/table-cell.component.scss?tag=p-table-cell","./src/components/molecules/table-cell/table-cell.component.tsx"],"sourcesContent":["p-table-cell {\n    @apply flex gap-4 items-center;\n\n    // TODO: Remove this\n    // @import '../../../style/form/checkbox';\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport {\n    isTableColumnSizesKey,\n    TableColumnSizes,\n    TableColumnSizesKey,\n    TableDefinitionData,\n    TableDefinitionTemplateFunc,\n} from '../../../types';\nimport { objectGetByPath } from '../../../utils';\nimport { TableColumn } from '../../helpers/table-column/table-column.component';\n\n@Component({\n    tag: 'p-table-cell',\n    styleUrl: 'table-cell.component.scss',\n})\nexport class TableCell {\n    /**\n     * The variant of the column\n     */\n    @Prop() variant: 'default' | 'loading' | 'header' = 'default';\n\n    /**\n     * The index of the column\n     */\n    @Prop() index: number;\n\n    /**\n     * The index of the row\n     */\n    @Prop() rowIndex: number;\n\n    /**\n     * The definition of the table column\n     */\n    @Prop() definition?: TableColumn;\n\n    /**\n     * The item in question\n     */\n    @Prop() item: any;\n\n    /**\n     * The value of the column\n     */\n    @Prop() value: any;\n\n    /**\n     * The checkbox to show\n     */\n    @Prop() checkbox: any;\n\n    /**\n     * The template to show\n     */\n    @Prop() template: TableDefinitionTemplateFunc = ({\n        value,\n    }: TableDefinitionData) => value;\n\n    get data(): TableDefinitionData | { value: string } {\n        if (this.variant === 'header') {\n            return {\n                value: this.value,\n            };\n        }\n\n        return {\n            value:\n                this.value ?? objectGetByPath(this.item, this.definition.path),\n            item: this.item,\n            index: this.index,\n            rowIndex: this.rowIndex,\n        };\n    }\n\n    render() {\n        return (\n            <Host\n                class={{\n                    'p-table-cell': true,\n                    [`variant-${this.variant}`]: true,\n                    ...this._getColumnClasses(),\n                }}\n            >\n                {this.checkbox}\n\n                {this.variant === 'loading' ? (\n                    <p-loader\n                        variant=\"ghost\"\n                        class=\"h-6 w-full flex-1 rounded\"\n                    />\n                ) : (\n                    <div\n                        class={{\n                            flex: true,\n                            'justify-start': this.definition.align === 'start',\n                            'justify-center':\n                                this.definition.align === 'center',\n                            'justify-end': this.definition.align === 'end',\n                        }}\n                    >\n                        {this.variant === 'header' ? (\n                            this.data.value\n                        ) : this.definition.useSlot ? (\n                            <slot />\n                        ) : (\n                            this.template(this.data as TableDefinitionData)\n                        )}\n                    </div>\n                )}\n            </Host>\n        );\n    }\n\n    private _getColumnClasses() {\n        const sizes = this.definition ? this._getSizes(this.definition) : {};\n        return {\n            'justify-start':\n                !this.definition?.align || this.definition?.align === 'start',\n            'justify-center': this.definition?.align === 'center',\n            'justify-end': this.definition?.align === 'end',\n            'font-semibold':\n                this.variant !== 'header' && this.definition?.type === 'th',\n            'text-storm-dark':\n                this.variant !== 'header' && this.definition?.type === 'th',\n            'pr-4': this.definition.isLast === false,\n            ...sizes,\n        };\n    }\n\n    /* \n     With this, we shall hack the system in ways no one would ever have thought.\n     \n     <div class=\"w-1/12 w-2/12 w-3/12 w-4/12 w-5/12 w-6/12 w-7/12 w-8/12 w-9/12 w-10/12 w-11/12 w-12/12\"></div>\n     <div class=\"tablet:w-1/12 tablet:w-2/12 tablet:w-3/12 tablet:w-4/12 tablet:w-5/12 tablet:w-6/12 tablet:w-7/12 tablet:w-8/12 tablet:w-9/12 tablet:w-10/12 tablet:w-11/12 tablet:w-12/12\"></div>\n     <div class=\"desktop-xs:w-1/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-12/12\"></div>\n     <div class=\"desktop-xs:w-1/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-12/12\"></div>\n     <div class=\"desktop-sm:w-1/12 desktop-sm:w-2/12 desktop-sm:w-3/12 desktop-sm:w-4/12 desktop-sm:w-5/12 desktop-sm:w-6/12 desktop-sm:w-7/12 desktop-sm:w-8/12 desktop-sm:w-9/12 desktop-sm:w-10/12 desktop-sm:w-11/12 desktop-sm:w-12/12\"></div>\n     <div class=\"desktop:w-1/12 desktop:w-2/12 desktop:w-3/12 desktop:w-4/12 desktop:w-5/12 desktop:w-6/12 desktop:w-7/12 desktop:w-8/12 desktop:w-9/12 desktop:w-10/12 desktop:w-11/12 desktop:w-12/12\"></div>\n     <div class=\"desktop-lg:w-1/12 desktop-lg:w-2/12 desktop-lg:w-3/12 desktop-lg:w-4/12 desktop-lg:w-5/12 desktop-lg:w-6/12 desktop-lg:w-7/12 desktop-lg:w-8/12 desktop-lg:w-9/12 desktop-lg:w-10/12 desktop-lg:w-11/12 desktop-lg:w-12/12\"></div>\n     <div class=\"desktop-xl:w-1/12 desktop-xl:w-2/12 desktop-xl:w-3/12 desktop-xl:w-4/12 desktop-xl:w-5/12 desktop-xl:w-6/12 desktop-xl:w-7/12 desktop-xl:w-8/12 desktop-xl:w-9/12 desktop-xl:w-10/12 desktop-xl:w-11/12 desktop-xl:w-12/12\"></div>\n\n     \n        ⠀⠀⠀⠀⠀⣠⣴⣶⣿⣿⠿⣷⣶⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣴⣶⣷⠿⣿⣿⣶⣦⣀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⢀⣾⣿⣿⣿⣿⣿⣿⣿⣶⣦⣬⡉⠒⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠚⢉⣥⣴⣾⣿⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀\n        ⠀⠀⠀⡾⠿⠛⠛⠛⠛⠿⢿⣿⣿⣿⣿⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣾⣿⣿⣿⣿⣿⠿⠿⠛⠛⠛⠛⠿⢧⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠻⣿⣿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⣠⣿⣿⣿⣿⡿⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⢰⣿⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⣠⣤⠶⠶⠶⠰⠦⣤⣀⠀⠙⣷⠀⠀⠀⠀⠀⠀⠀⢠⡿⠋⢀⣀⣤⢴⠆⠲⠶⠶⣤⣄⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠘⣆⠀⠀⢠⣾⣫⣶⣾⣿⣿⣿⣿⣷⣯⣿⣦⠈⠃⡇⠀⠀⠀⠀⢸⠘⢁⣶⣿⣵⣾⣿⣿⣿⣿⣷⣦⣝⣷⡄⠀⠀⡰⠂⠀\n        ⠀⠀⣨⣷⣶⣿⣧⣛⣛⠿⠿⣿⢿⣿⣿⣛⣿⡿⠀⠀⡇⠀⠀⠀⠀⢸⠀⠈⢿⣟⣛⠿⢿⡿⢿⢿⢿⣛⣫⣼⡿⣶⣾⣅⡀⠀\n        ⢀⡼⠋⠁⠀⠀⠈⠉⠛⠛⠻⠟⠸⠛⠋⠉⠁⠀⠀⢸⡇⠀⠀⠄⠀⢸⡄⠀⠀⠈⠉⠙⠛⠃⠻⠛⠛⠛⠉⠁⠀⠀⠈⠙⢧⡀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⡇⢠⠀⠀⠀⢸⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⣿⡇⠀⠀⠀⠀⢸⣿⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠟⠁⣿⠇⠀⠀⠀⠀⢸⡇⠙⢿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠰⣄⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣾⠖⡾⠁⠀⠀⣿⠀⠀⠀⠀⠀⠘⣿⠀⠀⠙⡇⢸⣷⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠄⠀\n        ⠀⠀⢻⣷⡦⣤⣤⣤⡴⠶⠿⠛⠉⠁⠀⢳⠀⢠⡀⢿⣀⠀⠀⠀⠀⣠⡟⢀⣀⢠⠇⠀⠈⠙⠛⠷⠶⢦⣤⣤⣤⢴⣾⡏⠀⠀\n        ⠀⠀⠈⣿⣧⠙⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠘⠛⢊⣙⠛⠒⠒⢛⣋⡚⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀⣠⣿⡿⠁⣾⡿⠀⠀⠀\n        ⠀⠀⠀⠘⣿⣇⠈⢿⣿⣦⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⡿⢿⣿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀⢀⣼⣿⡟⠁⣼⡿⠁⠀⠀⠀\n        ⠀⠀⠀⠀⠘⣿⣦⠀⠻⣿⣷⣦⣤⣤⣶⣶⣶⣿⣿⣿⣿⠏⠀⠀⠻⣿⣿⣿⣿⣶⣶⣶⣦⣤⣴⣿⣿⠏⢀⣼⡿⠁⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠘⢿⣷⣄⠙⠻⠿⠿⠿⠿⠿⢿⣿⣿⣿⣁⣀⣀⣀⣀⣙⣿⣿⣿⠿⠿⠿⠿⠿⠿⠟⠁⣠⣿⡿⠁⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠈⠻⣯⠙⢦⣀⠀⠀⠀⠀⠀⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠀⠀⠀⠀⠀⣠⠴⢋⣾⠟⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠙⢧⡀⠈⠉⠒⠀⠀⠀⠀⠀⠀⣀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠐⠒⠉⠁⢀⡾⠃⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀⠀⠻⣿⣿⣿⣿⠋⠀⠀⠀⠀⠀⠀⠀⠀⣠⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢦⡀⠀⠀⠀⠀⠀⠀⠀⣸⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⢀⡴⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀\n    */\n    private _getSizes({ sizes }: TableColumn) {\n        if (sizes === 'auto' || !sizes) {\n            return {\n                'w-auto': true,\n            };\n        }\n\n        if (sizes === 'hidden') {\n            return {\n                hidden: true,\n            };\n        }\n\n        if (typeof sizes === 'object') {\n            sizes = sizes as TableColumnSizes;\n            const classes: any = {};\n            let previousSize: TableColumnSizesKey | undefined;\n\n            for (let size in sizes) {\n                if (!isTableColumnSizesKey(sizes, size)) {\n                    continue;\n                }\n\n                if (size === 'default') {\n                    if (sizes.default === 'hidden') {\n                        classes['hidden'] = true;\n                        previousSize = size;\n                        continue;\n                    }\n\n                    classes[`w-${sizes.default}/12`] = true;\n                    previousSize = size;\n                    continue;\n                }\n\n                const currentValue = sizes[size];\n                const previousValue = previousSize ? sizes[previousSize] : null;\n                if (\n                    currentValue !== 'hidden' &&\n                    previousValue &&\n                    previousValue === 'hidden'\n                ) {\n                    classes[`${size}:flex`] = true;\n                }\n\n                if (currentValue === 'hidden') {\n                    classes[`${size}:hidden`] = true;\n                    previousSize = size;\n                    continue;\n                }\n\n                if (currentValue === 12 || currentValue === 'full') {\n                    classes[`${size}:w-full`] = true;\n                }\n\n                classes[`${size}:w-${currentValue}/12`] = true;\n                previousSize = size;\n            }\n\n            return classes;\n        }\n\n        if (sizes === 12 || sizes === 'full') {\n            return {\n                'w-full': true,\n            };\n        }\n\n        // is a number.\n        return {\n            [`w-${sizes}/12`]: true,\n        };\n    }\n}\n"],"version":3}

package/dist/components/table-container.component.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const tableContainerComponentCss = ".flex{display:flex!important}.flex-col{flex-direction:column!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.shadow-4{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.375rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;display:flex;flex-direction:column;width:100%}.static{position:static!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.max-w-\\[20rem\\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.self-center{align-self:center!important}.rounded{border-radius:.25rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.table-cell{display:table-cell!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}.w-auto{width:auto!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.pr-4{padding-right:1rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.h-8{height:2rem!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.w-3\\/4{width:75%!important}.gap-4{gap:1rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.m-0{margin:0!important}.table-row{display:table-row!important}.visible{visibility:visible!important}.absolute{position:absolute!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.inline{display:inline!important}";
+const tableContainerComponentCss = ".flex{display:flex!important}.flex-col{flex-direction:column!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.shadow-4{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.375rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;display:flex;flex-direction:column;width:100%}.static{position:static!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.max-w-\\[20rem\\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.self-center{align-self:center!important}.rounded{border-radius:.25rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.table-cell{display:table-cell!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}.w-auto{width:auto!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.pr-4{padding-right:1rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.h-8{height:2rem!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.w-3\\/4{width:75%!important}.gap-4{gap:1rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.visible{visibility:visible!important}.absolute{position:absolute!important}.m-0{margin:0!important}.table-row{display:table-row!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}";
 
 const TableContainer = /*@__PURE__*/ proxyCustomElement(class TableContainer extends HTMLElement {
   constructor() {

package/dist/components/table-container.component.js.map

@@ -1 +1 @@
-{"file":"table-container.component.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,ssXAAssX;;MCO5tX,cAAc;;;;;;EACvB,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,mBAAmB,IAC3B,eAAQ,CACL,EACT;GACL;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/table-container/table-container.component.scss?tag=p-table-container&encapsulation=shadow","./src/components/atoms/table-container/table-container.component.tsx"],"sourcesContent":[":host {\n    @apply flex flex-col w-full;\n    @apply bg-white rounded-large;\n    @apply shadow-4 #{!important};\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n    tag: 'p-table-container',\n    styleUrl: 'table-container.component.scss',\n    shadow: true,\n})\nexport class TableContainer {\n    render() {\n        return (\n            <Host class=\"p-table-container\">\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"table-container.component.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,u+WAAu+W;;MCO7/W,cAAc;;;;;;EACvB,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,mBAAmB,IAC3B,eAAQ,CACL,EACT;GACL;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/table-container/table-container.component.scss?tag=p-table-container&encapsulation=shadow","./src/components/atoms/table-container/table-container.component.tsx"],"sourcesContent":[":host {\n    @apply flex flex-col w-full;\n    @apply bg-white rounded-large;\n    @apply shadow-4 #{!important};\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n    tag: 'p-table-container',\n    styleUrl: 'table-container.component.scss',\n    shadow: true,\n})\nexport class TableContainer {\n    render() {\n        return (\n            <Host class=\"p-table-container\">\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/table-footer.component.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$4 } from './loader.component.js';
 import { d as defineCustomElement$2 } from './pagination.component.js';
 import { d as defineCustomElement$1 } from './pagination-item.component.js';
 
-const tableFooterComponentCss = ".flex{display:flex!important}.grid{display:grid!important}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))!important}.justify-self-end{justify-self:end!important}.justify-self-center{justify-self:center!important}*{box-sizing:border-box}:host{display:grid;gap:1rem;grid-template-columns:repeat(1,minmax(0,1fr));padding:1.5rem;width:100%}:host>p-pagination{display:flex;grid-column-start:1;justify-self:center}:host>p-loader{grid-column-start:1}@media (min-width:64rem){:host{grid-template-areas:\"page-size pagination export\";grid-template-columns:repeat(3,minmax(0,1fr))}:host>p-page-size-select{grid-column-start:1}:host>p-pagination{grid-column-start:2}:host>p-loader{grid-column-start:2}:host>p-button{grid-column-start:3;justify-self:end}}:host(.page-size-disabled.export-disabled){grid-template-columns:repeat(1,minmax(0,1fr))}:host(.page-size-disabled.export-disabled)>p-pagination{grid-column-start:1}.static{position:static!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.max-w-\\[20rem\\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.self-center{align-self:center!important}.rounded{border-radius:.25rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.table-cell{display:table-cell!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}.w-auto{width:auto!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.pr-4{padding-right:1rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.h-8{height:2rem!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.w-3\\/4{width:75%!important}.gap-4{gap:1rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.m-0{margin:0!important}.table-row{display:table-row!important}.visible{visibility:visible!important}.absolute{position:absolute!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.inline{display:inline!important}";
+const tableFooterComponentCss = ".flex{display:flex!important}.grid{display:grid!important}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))!important}.justify-self-end{justify-self:end!important}.justify-self-center{justify-self:center!important}*{box-sizing:border-box}:host{display:grid;gap:1rem;grid-template-columns:repeat(1,minmax(0,1fr));padding:1.5rem;width:100%}:host>p-pagination{display:flex;grid-column-start:1;justify-self:center}:host>p-loader{grid-column-start:1}@media (min-width:64rem){:host{grid-template-areas:\"page-size pagination export\";grid-template-columns:repeat(3,minmax(0,1fr))}:host>p-page-size-select{grid-column-start:1}:host>p-pagination{grid-column-start:2}:host>p-loader{grid-column-start:2}:host>p-button{grid-column-start:3;justify-self:end}}:host(.page-size-disabled.export-disabled){grid-template-columns:repeat(1,minmax(0,1fr))}:host(.page-size-disabled.export-disabled)>p-pagination{grid-column-start:1}.static{position:static!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.max-w-\\[20rem\\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.self-center{align-self:center!important}.rounded{border-radius:.25rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.table-cell{display:table-cell!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}.w-auto{width:auto!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.pr-4{padding-right:1rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.h-8{height:2rem!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.w-3\\/4{width:75%!important}.gap-4{gap:1rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.visible{visibility:visible!important}.absolute{position:absolute!important}.m-0{margin:0!important}.table-row{display:table-row!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}";
 
 const TableFooter = /*@__PURE__*/ proxyCustomElement(class TableFooter extends HTMLElement {
   constructor() {

package/dist/components/table-footer.component.js.map

@@ -1 +1 @@
-{"file":"table-footer.component.js","mappings":";;;;;;;;;;;;AAAA,MAAM,uBAAuB,GAAG,0vXAA0vX;;MCsB7wX,WAAW;;;;;;;;0BAIc,IAAI;4BAKF,IAAI;wBAKR,IAAI;mBAKT,KAAK;gBAKuB,CAAC;;oBAiB7B,WAAW;2BAKF,kBAAkB;4BAmBlB,IAAI;oBAUP,EAAE;;EAEnC,iBAAiB;IACb,IAAI,CAAC,WAAW,EAAE,CAAC;GACtB;EAED,MAAM;;IACF,MAAM,kBAAkB,GACpB,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,KAAK,IAAG,MAAA,IAAI,CAAC,eAAe,0CAAG,CAAC,CAAC,CAAA,CAAC;IACpE,QACI,EAAC,IAAI,IACD,KAAK,EAAE,kBACH,CAAC,IAAI,CAAC,cAAc,IAAI,oBAC5B,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,qBAAqB,IAC/C,CAAC,IAAI,CAAC,YAAY,IAAI,iBAC1B,EAAE,IAED,CAAC,IAAI,CAAC,OAAO;MACV,IAAI,CAAC,gBAAgB;MACrB,IAAI,CAAC,cAAc,KACf,0BACI,KAAK,EACD,CAAC,kBAAkB,IAAI,wBAAwB,EAEnD,MAAM,EAAE,kBAAkB,EAC1B,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,KACrB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAElC,CACL,EAEJ,IAAI,CAAC,OAAO,KACT,gBACI,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,oBAAoB,GAClB,CACf,EAEA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,KACnC,oBACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,KACrB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,GAElC,CACL,EACA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,KAC/B,gBACI,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAEhC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CACjC,CACd,CACE,EACT;GACL;EAGO,MAAM,WAAW;IACrB,IAAI,CAAC,QAAQ,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GAC7D;EAEO,eAAe,CAAC,CAAU;IAC9B,IAAI,CAAC,CAAC,EAAE;MACJ,OAAO;KACV;IAED,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IAClB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/molecules/table-footer/table-footer.component.scss?tag=p-table-footer&encapsulation=shadow","./src/components/molecules/table-footer/table-footer.component.tsx"],"sourcesContent":[":host {\n    @apply grid grid-cols-1 gap-4;\n    @apply w-full;\n    @apply p-6;\n\n    > p-pagination {\n        @apply flex justify-self-center col-start-1;\n    }\n\n    > p-loader {\n        @apply col-start-1;\n    }\n\n    @screen desktop-xs {\n        @apply grid-cols-3;\n        grid-template-areas: 'page-size pagination export';\n\n        > p-page-size-select {\n            @apply col-start-1;\n        }\n\n        > p-pagination {\n            @apply col-start-2;\n        }\n\n        > p-loader {\n            @apply col-start-2;\n        }\n\n        > p-button {\n            @apply justify-self-end col-start-3;\n        }\n    }\n}\n\n:host(.page-size-disabled.export-disabled) {\n    @apply grid-cols-1;\n\n    > p-pagination {\n        @apply col-start-1;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State\n} from '@stencil/core';\nimport {\n    formatTranslation,\n    getLocaleComponentStrings\n} from '../../../utils/localization';\nimport { defaultSize, defaultSizeOptions } from '../page-size-select/constants';\n\n@Component({\n    tag: 'p-table-footer',\n    styleUrl: 'table-footer.component.scss',\n    shadow: true,\n})\nexport class TableFooter {\n    /**\n     * Wether to enable page size select\n     */\n    @Prop() enablePageSize: boolean = true;\n\n    /**\n     * Wether to enable pagination\n     */\n    @Prop() enablePagination: boolean = true;\n\n    /**\n     * Wether to enable export\n     */\n    @Prop() enableExport: boolean = true;\n\n    /**\n     * Wether we want to show loading state\n     */\n    @Prop() loading: boolean = false;\n\n    /**\n     * The current page\n     */\n    @Prop({ mutable: true, reflect: true }) page: number = 1;\n\n    /**\n     * The total amount of items\n     */\n    @Prop() total!: number;\n\n    /**\n     * Event whenever the page changes\n     */\n    @Event({\n        bubbles: false\n    }) pageChange: EventEmitter<number>;\n\n    /**\n     * The amount of items per page\n     */\n    @Prop() pageSize: number = defaultSize;\n\n    /**\n     * The options for the page size\n     */\n    @Prop() pageSizeOptions: number[] = defaultSizeOptions;\n\n    /**\n     * Event whenever the page changes\n     */\n    @Event({\n        bubbles: false\n    }) pageSizeChange: EventEmitter<number>;\n\n    /**\n     * Event whenever the page changes\n     */\n    @Event({\n        bubbles: false\n    }) export: EventEmitter<number>;\n\n    /**\n     * Wether to hide when there is only 1 page available\n     */\n    @Prop() hideOnSinglePage: boolean = true;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    /**\n     * Locales used for this component\n     */\n    @State() private _locales: any = {};\n\n    componentWillLoad() {\n        this._setLocales();\n    }\n\n    render() {\n        const hidePageSizeSelect =\n            this.hideOnSinglePage && this.total < this.pageSizeOptions?.[0];\n        return (\n            <Host\n                class={`p-table-footer ${\n                    !this.enablePageSize && 'page-size-disabled'\n                } ${!this.enablePagination && 'pagination-disabled'} ${\n                    !this.enableExport && 'export-disabled'\n                }`}\n            >\n                {!this.loading &&\n                    this.enablePagination &&\n                    this.enablePageSize && (\n                        <p-page-size-select\n                            class={\n                                !hidePageSizeSelect && 'hidden desktop-xs:flex'\n                            }\n                            hidden={hidePageSizeSelect}\n                            size={this.pageSize}\n                            sizeOptions={this.pageSizeOptions}\n                            onSizeChange={({ detail }) =>\n                                this._changePageSize(detail)\n                            }\n                        />\n                    )}\n\n                {this.loading && (\n                    <p-loader\n                        variant=\"ghost\"\n                        class=\"rounded w-full h-8\"\n                    ></p-loader>\n                )}\n\n                {!this.loading && this.enablePagination && (\n                    <p-pagination\n                        pageSize={this.pageSize}\n                        total={this.total}\n                        page={this.page}\n                        hideOnSinglePage={this.hideOnSinglePage}\n                        onPageChange={({ detail }) =>\n                            this.pageChange.emit(detail)\n                        }\n                    />\n                )}\n                {!this.loading && this.enableExport && (\n                    <p-button\n                        class=\"hidden desktop-xs:flex\"\n                        variant=\"secondary\"\n                        size=\"small\"\n                        icon=\"download\"\n                        onClick={() => this.export.emit()}\n                    >\n                        {formatTranslation(this._locales.export)}\n                    </p-button>\n                )}\n            </Host>\n        );\n    }\n\n    @Listen('localeChanged', { target: 'body' })\n    private async _setLocales(): Promise<void> {\n        this._locales = await getLocaleComponentStrings(this._el);\n    }\n\n    private _changePageSize(s?: number) {\n        if (!s) {\n            return;\n        }\n\n        this.pageSize = s;\n        this.pageSizeChange.emit(this.pageSize);\n    }\n}\n"],"version":3}
+{"file":"table-footer.component.js","mappings":";;;;;;;;;;;;AAAA,MAAM,uBAAuB,GAAG,2hXAA2hX;;MCsB9iX,WAAW;;;;;;;;0BAIc,IAAI;4BAKF,IAAI;wBAKR,IAAI;mBAKT,KAAK;gBAKuB,CAAC;;oBAiB7B,WAAW;2BAKF,kBAAkB;4BAmBlB,IAAI;oBAUP,EAAE;;EAEnC,iBAAiB;IACb,IAAI,CAAC,WAAW,EAAE,CAAC;GACtB;EAED,MAAM;;IACF,MAAM,kBAAkB,GACpB,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,KAAK,IAAG,MAAA,IAAI,CAAC,eAAe,0CAAG,CAAC,CAAC,CAAA,CAAC;IACpE,QACI,EAAC,IAAI,IACD,KAAK,EAAE,kBACH,CAAC,IAAI,CAAC,cAAc,IAAI,oBAC5B,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,qBAAqB,IAC/C,CAAC,IAAI,CAAC,YAAY,IAAI,iBAC1B,EAAE,IAED,CAAC,IAAI,CAAC,OAAO;MACV,IAAI,CAAC,gBAAgB;MACrB,IAAI,CAAC,cAAc,KACf,0BACI,KAAK,EACD,CAAC,kBAAkB,IAAI,wBAAwB,EAEnD,MAAM,EAAE,kBAAkB,EAC1B,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,KACrB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAElC,CACL,EAEJ,IAAI,CAAC,OAAO,KACT,gBACI,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,oBAAoB,GAClB,CACf,EAEA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,KACnC,oBACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,KACrB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,GAElC,CACL,EACA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,KAC/B,gBACI,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAEhC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CACjC,CACd,CACE,EACT;GACL;EAGO,MAAM,WAAW;IACrB,IAAI,CAAC,QAAQ,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GAC7D;EAEO,eAAe,CAAC,CAAU;IAC9B,IAAI,CAAC,CAAC,EAAE;MACJ,OAAO;KACV;IAED,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IAClB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/molecules/table-footer/table-footer.component.scss?tag=p-table-footer&encapsulation=shadow","./src/components/molecules/table-footer/table-footer.component.tsx"],"sourcesContent":[":host {\n    @apply grid grid-cols-1 gap-4;\n    @apply w-full;\n    @apply p-6;\n\n    > p-pagination {\n        @apply flex justify-self-center col-start-1;\n    }\n\n    > p-loader {\n        @apply col-start-1;\n    }\n\n    @screen desktop-xs {\n        @apply grid-cols-3;\n        grid-template-areas: 'page-size pagination export';\n\n        > p-page-size-select {\n            @apply col-start-1;\n        }\n\n        > p-pagination {\n            @apply col-start-2;\n        }\n\n        > p-loader {\n            @apply col-start-2;\n        }\n\n        > p-button {\n            @apply justify-self-end col-start-3;\n        }\n    }\n}\n\n:host(.page-size-disabled.export-disabled) {\n    @apply grid-cols-1;\n\n    > p-pagination {\n        @apply col-start-1;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State\n} from '@stencil/core';\nimport {\n    formatTranslation,\n    getLocaleComponentStrings\n} from '../../../utils/localization';\nimport { defaultSize, defaultSizeOptions } from '../page-size-select/constants';\n\n@Component({\n    tag: 'p-table-footer',\n    styleUrl: 'table-footer.component.scss',\n    shadow: true,\n})\nexport class TableFooter {\n    /**\n     * Wether to enable page size select\n     */\n    @Prop() enablePageSize: boolean = true;\n\n    /**\n     * Wether to enable pagination\n     */\n    @Prop() enablePagination: boolean = true;\n\n    /**\n     * Wether to enable export\n     */\n    @Prop() enableExport: boolean = true;\n\n    /**\n     * Wether we want to show loading state\n     */\n    @Prop() loading: boolean = false;\n\n    /**\n     * The current page\n     */\n    @Prop({ mutable: true, reflect: true }) page: number = 1;\n\n    /**\n     * The total amount of items\n     */\n    @Prop() total!: number;\n\n    /**\n     * Event whenever the page changes\n     */\n    @Event({\n        bubbles: false\n    }) pageChange: EventEmitter<number>;\n\n    /**\n     * The amount of items per page\n     */\n    @Prop() pageSize: number = defaultSize;\n\n    /**\n     * The options for the page size\n     */\n    @Prop() pageSizeOptions: number[] = defaultSizeOptions;\n\n    /**\n     * Event whenever the page changes\n     */\n    @Event({\n        bubbles: false\n    }) pageSizeChange: EventEmitter<number>;\n\n    /**\n     * Event whenever the page changes\n     */\n    @Event({\n        bubbles: false\n    }) export: EventEmitter<number>;\n\n    /**\n     * Wether to hide when there is only 1 page available\n     */\n    @Prop() hideOnSinglePage: boolean = true;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    /**\n     * Locales used for this component\n     */\n    @State() private _locales: any = {};\n\n    componentWillLoad() {\n        this._setLocales();\n    }\n\n    render() {\n        const hidePageSizeSelect =\n            this.hideOnSinglePage && this.total < this.pageSizeOptions?.[0];\n        return (\n            <Host\n                class={`p-table-footer ${\n                    !this.enablePageSize && 'page-size-disabled'\n                } ${!this.enablePagination && 'pagination-disabled'} ${\n                    !this.enableExport && 'export-disabled'\n                }`}\n            >\n                {!this.loading &&\n                    this.enablePagination &&\n                    this.enablePageSize && (\n                        <p-page-size-select\n                            class={\n                                !hidePageSizeSelect && 'hidden desktop-xs:flex'\n                            }\n                            hidden={hidePageSizeSelect}\n                            size={this.pageSize}\n                            sizeOptions={this.pageSizeOptions}\n                            onSizeChange={({ detail }) =>\n                                this._changePageSize(detail)\n                            }\n                        />\n                    )}\n\n                {this.loading && (\n                    <p-loader\n                        variant=\"ghost\"\n                        class=\"rounded w-full h-8\"\n                    ></p-loader>\n                )}\n\n                {!this.loading && this.enablePagination && (\n                    <p-pagination\n                        pageSize={this.pageSize}\n                        total={this.total}\n                        page={this.page}\n                        hideOnSinglePage={this.hideOnSinglePage}\n                        onPageChange={({ detail }) =>\n                            this.pageChange.emit(detail)\n                        }\n                    />\n                )}\n                {!this.loading && this.enableExport && (\n                    <p-button\n                        class=\"hidden desktop-xs:flex\"\n                        variant=\"secondary\"\n                        size=\"small\"\n                        icon=\"download\"\n                        onClick={() => this.export.emit()}\n                    >\n                        {formatTranslation(this._locales.export)}\n                    </p-button>\n                )}\n            </Host>\n        );\n    }\n\n    @Listen('localeChanged', { target: 'body' })\n    private async _setLocales(): Promise<void> {\n        this._locales = await getLocaleComponentStrings(this._el);\n    }\n\n    private _changePageSize(s?: number) {\n        if (!s) {\n            return;\n        }\n\n        this.pageSize = s;\n        this.pageSizeChange.emit(this.pageSize);\n    }\n}\n"],"version":3}