@paperless/core 2.0.1-beta.5 → 2.0.1-beta.6

package/dist/cjs/p-button_3.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"p-button.p-icon.p-loader.entry.cjs.js","mappings":"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","names":["cva","icon","h","Host","icons"],"sources":["src/components/molecules/button/button.component.scss?tag=p-button","src/components/molecules/button/button.component.tsx","src/components/atoms/icon/icon.component.scss?tag=p-icon","src/components/atoms/icon/icon.component.tsx","src/components/atoms/loader/loader.component.scss?tag=p-loader&encapsulation=shadow","src/components/atoms/loader/loader.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tElement,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\nimport { cva } from 'class-variance-authority';\n\nconst button = cva(\n\t[\n\t\t'group',\n\t\t'font-semibold leading-4',\n\t\t'flex items-center justify-center gap-2',\n\t\t'cursor-pointer',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tprimary: ['bg-supportive-lilac border-black-teal/20'],\n\t\t\t\tsecondary: ['bg-white border-black-teal/10'],\n\t\t\t\ttext: ['text-teal'],\n\t\t\t\ttransparent: ['bg-transparent'],\n\t\t\t},\n\t\t\tactive: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tloading: {\n\t\t\t\ttrue: 'cursor-wait',\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tsm: ['text-xs h-6'],\n\t\t\t\tbase: ['text-sm h-8'],\n\t\t\t\tlg: ['text-base h-10'],\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\ttrue: 'cursor-not-allowed',\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tunderline: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tbuttonGroupPosition: {\n\t\t\t\tnone: null,\n\t\t\t\tstart: null,\n\t\t\t\tcenter: null,\n\t\t\t\tend: null,\n\t\t\t},\n\t\t\ticonOnly: {\n\t\t\t\ttrue: 'justify-center',\n\t\t\t\tfalse: 'w-inherit py-1',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t// variants\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary'],\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'border',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'active:border-supportive-lilac-800 active:ring active:ring-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'border-supportive-lilac-800 ring ring-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tbuttonGroupPosition: 'none',\n\t\t\t\tclass: 'rounded-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tbuttonGroupPosition: 'start',\n\t\t\t\tclass: 'rounded-s-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tbuttonGroupPosition: 'end',\n\t\t\t\tclass: 'rounded-e-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary'],\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-black-teal',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'bg-supportive-lilac-100 text-black-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass:\n\t\t\t\t\t'drop-shadow-supportive-lilac hover:drop-shadow-2 hover:bg-supportive-lilac-700 active:text-black-teal/60 active:ring-black-teal/10',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'ring-black-teal/10',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'secondary',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'border bg-white-600 text-black-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'secondary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass:\n\t\t\t\t\t'drop-shadow-1 hover:drop-shadow-1 hover:bg-white-600 active:text-black-teal/60 active:ring-supportive-lilac-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'secondary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'ring-supportive-lilac-100',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tunderline: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'border-b border-teal',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tunderline: true,\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'border-b border-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'active:text-teal-800',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-dark-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'hover:bg-dark-teal active:text-dark-teal-100/60',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-dark-teal-100/60',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tsize: ['base', 'sm'],\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'px-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tsize: 'lg',\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'px-3',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'py-1',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tsize: 'sm',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-6',\n\t\t\t},\n\t\t\t{\n\t\t\t\tsize: 'base',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-8',\n\t\t\t},\n\t\t\t{\n\t\t\t\tsize: 'lg',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-10',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst icon = cva([], {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: 'text-sm',\n\t\t\tbase: 'text-base',\n\t\t\tlg: 'text-base',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-button',\n\tstyleUrl: 'button.component.scss',\n})\nexport class Button {\n\t/**\n\t * The type of the button\n\t */\n\t@Prop() as: 'a' | 'button' = 'button';\n\n\t/**\n\t * The variant of the button\n\t */\n\t@Prop() variant: 'primary' | 'secondary' | 'transparent' | 'text' = 'primary';\n\n\t/**\n\t * Wether to force an active state\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * Wether the text variant has underline\n\t */\n\t@Prop() underline: boolean = true;\n\n\t/**\n\t * Href in case of \"text\" version\n\t */\n\t@Prop() href: string;\n\n\t/**\n\t * Target in case of \"text\" version\n\t */\n\t@Prop() target: string;\n\n\t/**\n\t * The size of the button\n\t */\n\t@Prop() size: 'sm' | 'base' | 'lg' = 'base';\n\n\t/**\n\t * The type of the button\n\t */\n\t@Prop() type: 'button' | 'submit' = 'button';\n\n\t/**\n\t * Wether to show a loader or not\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * Wether to show a chevron or not\n\t */\n\t@Prop() chevron: boolean | 'up' | 'down' = false;\n\n\t/**\n\t * Chevron position\n\t */\n\t@Prop() chevronPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Wether the button is disabled\n\t */\n\t@Prop() disabled: boolean = false;\n\n\t/**\n\t * Icon to show on the button\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t * Wether the button is icon only\n\t */\n\t@Prop() iconOnly: boolean = false;\n\n\t/**\n\t * Icon position\n\t */\n\t@Prop() iconPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Icon flip\n\t */\n\t@Prop() iconFlip: IconFlipOptions;\n\n\t/**\n\t * Icon rotate\n\t */\n\t@Prop() iconRotate: RotateOptions;\n\n\t/**\n\t * Wether the button should inherit text styles\n\t */\n\t@Prop() inheritText: boolean = false;\n\n\t/**\n\t * Position of the button in the button group, mostly un-used if not in a group\n\t */\n\t@Prop() buttonGroupPosition: 'start' | 'center' | 'end' | 'none' = 'none';\n\n\t/**\n\t * Button click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tonClick: EventEmitter<MouseEvent>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\trender() {\n\t\tlet loaderColor: 'white' | 'storm' | 'indigo' = 'white';\n\t\tswitch (this.variant) {\n\t\t\tcase 'secondary':\n\t\t\t\tloaderColor = 'storm';\n\t\t\t\tbreak;\n\t\t\tcase 'text':\n\t\t\t\tloaderColor = 'indigo';\n\t\t\t\tbreak;\n\t\t}\n\n\t\tconst VariableTag =\n\t\t\tthis.variant === 'text' || this.href?.length || this.as === 'a'\n\t\t\t\t? 'a'\n\t\t\t\t: 'button';\n\n\t\tconst active = this.active || this._el.classList.contains('active');\n\n\t\treturn (\n\t\t\t<Host class='p-button inline-block'>\n\t\t\t\t<VariableTag\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttype={this.variant !== 'text' ? this.type : undefined}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t\tclass={button({\n\t\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\t\tsize: this.size,\n\t\t\t\t\t\tunderline: this.underline,\n\t\t\t\t\t\tloading: this.loading,\n\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\tbuttonGroupPosition: this.buttonGroupPosition,\n\t\t\t\t\t\ticonOnly: this.iconOnly,\n\t\t\t\t\t\tactive,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{this.chevron && this.chevronPosition === 'start' && (\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tvariant='caret'\n\t\t\t\t\t\t\trotate={this.chevron === 'up' ? 180 : 0}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\tthis.iconPosition === 'start' &&\n\t\t\t\t\t\t!(this.iconOnly && this.loading) &&\n\t\t\t\t\t\tthis._getIcon()}\n\n\t\t\t\t\t<slot />\n\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\tthis.iconPosition === 'end' &&\n\t\t\t\t\t\t!this.loading &&\n\t\t\t\t\t\t!this.chevron &&\n\t\t\t\t\t\tthis._getIcon()}\n\n\t\t\t\t\t{this.chevron && !this.loading && this.chevronPosition === 'end' && (\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tvariant='caret'\n\t\t\t\t\t\t\trotate={this.chevron === 'up' ? 180 : 0}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.loading && <p-loader color={loaderColor} />}\n\t\t\t\t</VariableTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('click', { capture: true })\n\thandleClick(ev: MouseEvent) {\n\t\tif (this.loading || this.disabled) {\n\t\t\tev.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tthis.onClick.emit(ev);\n\t}\n\n\tprivate _getIcon() {\n\t\tif (!this.icon) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn (\n\t\t\t<p-icon\n\t\t\t\tclass={icon({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t})}\n\t\t\t\tvariant={this.icon}\n\t\t\t\tflip={this.iconFlip}\n\t\t\t\trotate={this.iconRotate}\n\t\t\t/>\n\t\t);\n\t}\n}\n",":host {\n\t-webkit-transform-origin: 50% 51%;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { TextSizeOptions } from '../../../types/tailwind';\nimport { icons } from '../../../utils/icons';\n\nexport type IconVariant = keyof typeof icons;\nexport type IconFlipOptions = 'none' | 'horizontal' | 'vertical';\n\nconst icon = cva(['p-icon flex'], {\n\tvariants: {\n\t\tflip: {\n\t\t\tnone: null,\n\t\t\thorizontal: 'scale-x-flip',\n\t\t\tvertical: 'scale-y-flip',\n\t\t},\n\t\tsize: {\n\t\t\tauto: 'text-auto',\n\t\t\txxs: 'text-xxs',\n\t\t\txs: 'text-xs',\n\t\t\tsm: 'text-sm',\n\t\t\tbase: 'text-base',\n\t\t\tlg: 'text-lg',\n\t\t\txl: 'text-xl',\n\t\t\t'2xl': 'text-2xl',\n\t\t\t'3xl': 'text-3xl',\n\t\t\t'4xl': 'text-4xl',\n\t\t},\n\t\ttransform: {\n\t\t\ttrue: 'transform-gpu scale-[0.99]',\n\t\t\tfalse: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-icon',\n\tstyleUrl: 'icon.component.scss',\n\t// shadow: true,\n})\nexport class Icon {\n\t/**\n\t * The icon the be displayed\n\t */\n\t@Prop() variant!: IconVariant;\n\n\t/**\n\t * The size of the icon, using tailwind sizes\n\t */\n\t@Prop() size: TextSizeOptions = 'auto';\n\n\t/**\n\t * Wether to rotate the icon x degrees\n\t */\n\t@Prop() rotate: number = 0;\n\n\t/**\n\t * Wether to flip the icon horizontally or vertically\n\t */\n\t@Prop() flip: IconFlipOptions = 'none';\n\n\trender() {\n\t\tconst svg = icons[this.variant];\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={icon({\n\t\t\t\t\tflip: this.flip,\n\t\t\t\t\tsize: this.size,\n\t\t\t\t\ttransform: this.flip !== 'none' || this.rotate > 0 || this.rotate < 0,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\t'--tw-rotate': `${this.rotate}deg`,\n\t\t\t\t}}\n\t\t\t\tinnerHTML={svg}\n\t\t\t></Host>\n\t\t);\n\t}\n}\n",":host {\n\t.loader {\n\t\t@apply inline-block h-[1em] w-[1em] rounded-full;\n\t\t@apply border-2 border-solid border-indigo-light border-t-indigo;\n\t\tanimation: 500ms spin linear infinite;\n\n\t\twill-change: transform;\n\n\t\t&.color-storm {\n\t\t\t@apply border-storm-light/40 border-t-storm #{!important};\n\t\t}\n\n\t\t&.color-white {\n\t\t\t@apply border-indigo-light/40 border-t-white #{!important};\n\t\t}\n\t}\n\n\t.loading-screen {\n\t\t@apply w-screen-safe h-screen-safe fixed top-0 left-0;\n\t\t@apply flex items-center justify-center;\n\t\t@apply bg-mystic;\n\n\t\tz-index: 1001;\n\n\t\t.content {\n\t\t\t@apply max-w-xs;\n\n\t\t\t.loader-wrapper {\n\t\t\t\t@apply flex w-full justify-center;\n\n\t\t\t\t.loader {\n\t\t\t\t\t@apply text-4xl;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n:host(.variant-ghost) {\n\t@apply box-border block;\n\n\twill-change: background, background-position-x, background-color;\n\n\tmin-height: 1em;\n\tmin-width: 1em;\n\n\t--loading-bg: #f7fafc;\n\t--loading-stripe: rgba(252, 253, 254, 1);\n\n\tbackground-color: var(--loading-bg);\n\tbackground: linear-gradient(\n\t\t\t100deg,\n\t\t\trgba(255, 255, 255, 0) 40%,\n\t\t\tvar(--loading-stripe) 50%,\n\t\t\trgba(255, 255, 255, 0) 60%\n\t\t)\n\t\tvar(--loading-bg);\n\tbackground-size: 200% 100%;\n\tbackground-position-x: 180%;\n\tanimation: 1s loading ease-in-out infinite;\n}\n\n@keyframes loading {\n\tto {\n\t\tbackground-position-x: -20%;\n\t}\n}\n\n@keyframes spin {\n\t100% {\n\t\ttransform: rotate(1turn);\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n\ttag: 'p-loader',\n\tstyleUrl: 'loader.component.scss',\n\tshadow: true,\n})\nexport class Loader {\n\t/**\n\t * Wether to show or hide the loader\n\t */\n\t@Prop() show: boolean | Observable<boolean> = true;\n\n\t/**\n\t * Variant of loader\n\t */\n\t@Prop() variant:\n\t\t| 'inline'\n\t\t| 'full-width'\n\t\t| 'full-screen'\n\t\t| 'modal'\n\t\t| 'ghost' = 'inline';\n\n\t/**\n\t * Color of the loader\n\t */\n\t@Prop() color: 'indigo' | 'white' | 'storm' = 'indigo';\n\n\t/**\n\t * !NOT IMPLEMENTED! Modal title for modal variant\n\t */\n\t@Prop() modalTitle: string;\n\n\t/**\n\t * !NOT IMPLEMENTED! Modal description for modal variant\n\t */\n\t@Prop() modalDescription: string;\n\n\tprivate _show = this.show;\n\tprivate _showSubscriber: Subscription;\n\n\tprivate _loader = (<div class={`loader color-${this.color}`}></div>);\n\n\tcomponentWillRender() {\n\t\tthis._checkShow();\n\t}\n\n\tcomponentShouldUpdate() {\n\t\tthis._checkShow();\n\t}\n\n\trender() {\n\t\tif (!this._show) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.variant === 'ghost') {\n\t\t\treturn <Host class=\"p-loader variant-ghost\"></Host>;\n\t\t}\n\n\t\tif (this.variant === 'full-screen') {\n\t\t\treturn (\n\t\t\t\t<Host class=\"p-loader variant-full-screen\">\n\t\t\t\t\t<div class=\"loading-screen\">\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t<slot />\n\n\t\t\t\t\t\t\t<div class=\"loader-wrapper\">{this._loader}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Host>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-loader variant-default flex ${\n\t\t\t\t\tthis.variant === 'full-width' &&\n\t\t\t\t\t'w-full flex justify-center text-4xl'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{this._loader}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _checkShow() {\n\t\tif (this._showSubscriber) {\n\t\t\tthis._showSubscriber.unsubscribe();\n\t\t\tthis._showSubscriber = null;\n\t\t}\n\n\t\tif (typeof this.show !== 'boolean') {\n\t\t\tthis._showSubscriber = this.show?.subscribe(\n\t\t\t\t(show) => (this._show = show)\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show = this.show;\n\t}\n}\n"],"version":3}
+{"file":"p-button.p-icon.p-loader.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,4tMAA4tM;;ACcvvM,MAAM,MAAM,GAAGA,WAAG,CACjB;EACC,OAAO;EACP,yBAAyB;EACzB,wCAAwC;EACxC,gBAAgB;CAChB,EACD;EACC,QAAQ,EAAE;IACT,OAAO,EAAE;MACR,OAAO,EAAE,CAAC,0CAA0C,CAAC;MACrD,SAAS,EAAE,IAAI;MACf,IAAI,EAAE,CAAC,WAAW,CAAC;MACnB,WAAW,EAAE,CAAC,gBAAgB,CAAC;MAC/B,QAAQ,EAAE,IAAI;KACd;IACD,MAAM,EAAE;MACP,IAAI,EAAE,IAAI;MACV,KAAK,EAAE,IAAI;KACX;IACD,OAAO,EAAE;MACR,IAAI,EAAE,aAAa;MACnB,KAAK,EAAE,IAAI;KACX;IACD,IAAI,EAAE;MACL,EAAE,EAAE,CAAC,aAAa,CAAC;MACnB,IAAI,EAAE,CAAC,aAAa,CAAC;MACrB,EAAE,EAAE,CAAC,gBAAgB,CAAC;KACtB;IACD,QAAQ,EAAE;MACT,IAAI,EAAE,oBAAoB;MAC1B,KAAK,EAAE,IAAI;KACX;IACD,SAAS,EAAE;MACV,IAAI,EAAE,IAAI;MACV,KAAK,EAAE,IAAI;KACX;IACD,mBAAmB,EAAE;MACpB,IAAI,EAAE,IAAI;MACV,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,IAAI;MACZ,GAAG,EAAE,IAAI;KACT;IACD,QAAQ,EAAE;MACT,IAAI,EAAE,gBAAgB;MACtB,KAAK,EAAE,gBAAgB;KACvB;GACD;EACD,gBAAgB,EAAE;;IAEjB;MACC,OAAO,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC;MAClC,KAAK,EAAE,CAAC,+BAA+B,CAAC;KACxC;IACD;MACC,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;MAC7C,QAAQ,EAAE,KAAK;MACf,KAAK,EAAE,QAAQ;KACf;IACD;MACC,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;MAC7C,QAAQ,EAAE,KAAK;MACf,OAAO,EAAE,KAAK;MACd,KAAK,EAAE,8DAA8D;KACrE;IACD;MACC,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;MAC7C,QAAQ,EAAE,KAAK;MACf,OAAO,EAAE,KAAK;MACd,MAAM,EAAE,IAAI;MACZ,KAAK,EAAE,yCAAyC;KAChD;IACD;MACC,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,CAAC;MAC5D,mBAAmB,EAAE,MAAM;MAC3B,KAAK,EAAE,YAAY;KACnB;IACD;MACC,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,CAAC;MAC5D,mBAAmB,EAAE,OAAO;MAC5B,KAAK,EAAE,cAAc;KACrB;IACD;MACC,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,CAAC;MAC5D,mBAAmB,EAAE,KAAK;MAC1B,KAAK,EAAE,cAAc;KACrB;IACD;MACC,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;MAC7C,QAAQ,EAAE,KAAK;MACf,KAAK,EAAE,iBAAiB;KACxB;IACD;MACC,OAAO,EAAE,SAAS;MAClB,QAAQ,EAAE,IAAI;MACd,KAAK,EAAE,6CAA6C;KACpD;IACD;MACC,OAAO,EAAE,SAAS;MAClB,QAAQ,EAAE,KAAK;MACf,OAAO,EAAE,KAAK;MACd,KAAK,EACJ,oIAAoI;KACrI;IACD;MACC,OAAO,EAAE,SAAS;MAClB,QAAQ,EAAE,KAAK;MACf,OAAO,EAAE,KAAK;MACd,MAAM,EAAE,IAAI;MACZ,KAAK,EAAE,oBAAoB;KAC3B;IACD;MACC,OAAO,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC;MAClC,QAAQ,EAAE,IAAI;MACd,KAAK,EAAE,yCAAyC;KAChD;IACD;MACC,OAAO,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC;MAClC,QAAQ,EAAE,KAAK;MACf,OAAO,EAAE,KAAK;MACd,KAAK,EACJ,iHAAiH;KAClH;IACD;MACC,OAAO,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC;MAClC,QAAQ,EAAE,KAAK;MACf,OAAO,EAAE,KAAK;MACd,MAAM,EAAE,IAAI;MACZ,KAAK,EAAE,2BAA2B;KAClC;IAED;MACC,OAAO,EAAE,MAAM;MACf,SAAS,EAAE,IAAI;MACf,QAAQ,EAAE,KAAK;MACf,KAAK,EAAE,sBAAsB;KAC7B;IACD;MACC,OAAO,EAAE,MAAM;MACf,SAAS,EAAE,IAAI;MACf,QAAQ,EAAE,IAAI;MACd,KAAK,EAAE,0BAA0B;KACjC;IACD;MACC,OAAO,EAAE,MAAM;MACf,QAAQ,EAAE,IAAI;MACd,KAAK,EAAE,eAAe;KACtB;IACD;MACC,OAAO,EAAE,MAAM;MACf,QAAQ,EAAE,KAAK;MACf,OAAO,EAAE,KAAK;MACd,KAAK,EAAE,sBAAsB;KAC7B;IAED;MACC,OAAO,EAAE,aAAa;MACtB,QAAQ,EAAE,KAAK;MACf,KAAK,EAAE,oBAAoB;KAC3B;IACD;MACC,OAAO,EAAE,aAAa;MACtB,QAAQ,EAAE,KAAK;MACf,OAAO,EAAE,KAAK;MACd,KAAK,EAAE,iDAAiD;KACxD;IACD;MACC,OAAO,EAAE,aAAa;MACtB,QAAQ,EAAE,IAAI;MACd,KAAK,EAAE,uBAAuB;KAC9B;IAED;MACC,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,aAAa,CAAC;MAChD,IAAI,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC;MACpB,QAAQ,EAAE,KAAK;MACf,KAAK,EAAE,MAAM;KACb;IACD;MACC,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,aAAa,CAAC;MAChD,IAAI,EAAE,IAAI;MACV,QAAQ,EAAE,KAAK;MACf,KAAK,EAAE,MAAM;KACb;IACD;MACC,OAAO,EAAE,UAAU;MACnB,QAAQ,EAAE,KAAK;MACf,KAAK,EAAE,KAAK;KACZ;IAED;MACC,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,CAAC;MACxD,QAAQ,EAAE,KAAK;MACf,KAAK,EAAE,MAAM;KACb;IAED;MACC,IAAI,EAAE,IAAI;MACV,QAAQ,EAAE,IAAI;MACd,KAAK,EAAE,KAAK;KACZ;IACD;MACC,IAAI,EAAE,MAAM;MACZ,QAAQ,EAAE,IAAI;MACd,KAAK,EAAE,KAAK;KACZ;IACD;MACC,IAAI,EAAE,IAAI;MACV,QAAQ,EAAE,IAAI;MACd,KAAK,EAAE,MAAM;KACb;GACD;CACD,CACD,CAAC;AAEF,MAAMC,MAAI,GAAGD,WAAG,CAAC,EAAE,EAAE;EACpB,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,EAAE,EAAE,SAAS;MACb,IAAI,EAAE,WAAW;MACjB,EAAE,EAAE,WAAW;KACf;GACD;CACD,CAAC,CAAC;MAMU,MAAM;;;;cAIW,QAAQ;mBAUrB,SAAS;kBAKC,KAAK;qBAKF,IAAI;;;gBAeI,MAAM;gBAKP,QAAQ;mBAKjB,KAAK;mBAKW,KAAK;2BAKL,KAAK;oBAKpB,KAAK;;oBAUL,KAAK;wBAKO,KAAK;;;uBAed,KAAK;+BAK+B,MAAM;;EAezE,MAAM;;IACL,IAAI,WAAW,GAAiC,OAAO,CAAC;IACxD,QAAQ,IAAI,CAAC,OAAO;MACnB,KAAK,WAAW;QACf,WAAW,GAAG,OAAO,CAAC;QACtB,MAAM;MACP,KAAK,MAAM;QACV,WAAW,GAAG,QAAQ,CAAC;QACvB,MAAM;KACP;IAED,MAAM,WAAW,GAChB,IAAI,CAAC,OAAO,KAAK,MAAM,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAA,IAAI,IAAI,CAAC,EAAE,KAAK,GAAG;QAC5D,GAAG;QACH,QAAQ,CAAC;IAEb,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEpE,QACCE,QAACC,UAAI,IAAC,KAAK,EAAC,gBAAgB,IAC3BD,QAAC,WAAW,IACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EACrD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,mBAAmB,EAAE,IAAI,CAAC,mBAAmB;QAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,MAAM;OACN,CAAC,IAED,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,eAAe,KAAK,OAAO,KAChDA,oBACC,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,GAAG,GAAG,GAAG,CAAC,GACtC,CACF,EAEA,IAAI,CAAC,IAAI;MACT,IAAI,CAAC,YAAY,KAAK,OAAO;MAC7B,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC;MAChC,IAAI,CAAC,QAAQ,EAAE,EAEhBA,qBAAQ,EAEP,IAAI,CAAC,IAAI;MACT,IAAI,CAAC,YAAY,KAAK,KAAK;MAC3B,CAAC,IAAI,CAAC,OAAO;MACb,CAAC,IAAI,CAAC,OAAO;MACb,IAAI,CAAC,QAAQ,EAAE,EAEf,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,eAAe,KAAK,KAAK,KAC/DA,oBACC,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,GAAG,GAAG,GAAG,CAAC,GACtC,CACF,EAEA,IAAI,CAAC,OAAO,IAAIA,sBAAU,KAAK,EAAE,WAAW,GAAI,CACpC,CACR,EACN;GACF;EAGD,WAAW,CAAC,EAAc;IACzB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE;MAClC,EAAE,CAAC,cAAc,EAAE,CAAC;MACpB,OAAO;KACP;IAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;GACtB;EAEO,QAAQ;IACf,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACf,OAAO;KACP;IAED,QACCA,oBACC,KAAK,EAAED,MAAI,CAAC;QACX,IAAI,EAAE,IAAI,CAAC,IAAI;OACf,CAAC,EACF,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,MAAM,EAAE,IAAI,CAAC,UAAU,GACtB,EACD;GACF;;;;;ACncF,MAAM,gBAAgB,GAAG,mgDAAmgD;;ACQ5hD,MAAM,IAAI,GAAGD,WAAG,CAAC,CAAC,aAAa,CAAC,EAAE;EACjC,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,IAAI,EAAE,IAAI;MACV,UAAU,EAAE,cAAc;MAC1B,QAAQ,EAAE,cAAc;KACxB;IACD,IAAI,EAAE;MACL,IAAI,EAAE,WAAW;MACjB,GAAG,EAAE,UAAU;MACf,EAAE,EAAE,SAAS;MACb,EAAE,EAAE,SAAS;MACb,IAAI,EAAE,WAAW;MACjB,EAAE,EAAE,SAAS;MACb,EAAE,EAAE,SAAS;MACb,KAAK,EAAE,UAAU;MACjB,KAAK,EAAE,UAAU;MACjB,KAAK,EAAE,UAAU;KACjB;IACD,SAAS,EAAE;MACV,IAAI,EAAE,4BAA4B;MAClC,KAAK,EAAE,IAAI;KACX;GACD;CACD,CAAC,CAAC;MAOU,IAAI;;;;gBASgB,MAAM;kBAKb,CAAC;gBAKM,MAAM;;EAEtC,MAAM;IACL,MAAM,GAAG,GAAGI,WAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAEhC,QACCF,QAACC,UAAI,IACJ,KAAK,EAAE,IAAI,CAAC;QACX,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;OACrE,CAAC,EACF,KAAK,EAAE;QACN,aAAa,EAAE,GAAG,IAAI,CAAC,MAAM,KAAK;OAClC,EACD,SAAS,EAAE,GAAG,GACP,EACP;GACF;;;;AC5EF,MAAM,kBAAkB,GAAG,+2GAA+2G;;MCQ73G,MAAM;;;IA+BV,UAAK,GAAG,IAAI,CAAC,IAAI,CAAC;IAGlB,YAAO,IAAID,iBAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE,GAAQ,CAAC,CAAC;gBA9BvB,IAAI;mBAUrC,QAAQ;iBAKyB,QAAQ;;;;EAiBtD,mBAAmB;IAClB,IAAI,CAAC,UAAU,EAAE,CAAC;GAClB;EAED,qBAAqB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;GAClB;EAED,MAAM;IACL,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAChB,OAAO;KACP;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;MAC7B,OAAOA,QAACC,UAAI,IAAC,KAAK,EAAC,wBAAwB,GAAQ,CAAC;KACpD;IAED,IAAI,IAAI,CAAC,OAAO,KAAK,aAAa,EAAE;MACnC,QACCD,QAACC,UAAI,IAAC,KAAK,EAAC,8BAA8B,IACzCD,iBAAK,KAAK,EAAC,gBAAgB,IAC1BA,iBAAK,KAAK,EAAC,SAAS,IACnBA,qBAAQ,EAERA,iBAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,OAAO,CAAO,CAC3C,CACD,CACA,EACN;KACF;IAED,QACCA,QAACC,UAAI,IACJ,KAAK,EAAE,iCACN,IAAI,CAAC,OAAO,KAAK,YAAY;QAC7B,qCACD,EAAE,IAED,IAAI,CAAC,OAAO,CACP,EACN;GACF;EAEO,UAAU;;IACjB,IAAI,IAAI,CAAC,eAAe,EAAE;MACzB,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;MACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC5B;IAED,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;MACnC,IAAI,CAAC,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,SAAS,CAC1C,CAAC,IAAI,MAAM,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAC7B,CAAC;MACF,OAAO;KACP;IAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;GACvB;;;;;;;;","names":["cva","icon","h","Host","icons"],"sources":["src/components/molecules/button/button.component.scss?tag=p-button","src/components/molecules/button/button.component.tsx","src/components/atoms/icon/icon.component.scss?tag=p-icon","src/components/atoms/icon/icon.component.tsx","src/components/atoms/loader/loader.component.scss?tag=p-loader&encapsulation=shadow","src/components/atoms/loader/loader.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tElement,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\nimport { cva } from 'class-variance-authority';\n\nconst button = cva(\n\t[\n\t\t'group',\n\t\t'font-semibold leading-4',\n\t\t'flex items-center justify-center gap-2',\n\t\t'cursor-pointer',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tprimary: ['bg-supportive-lilac border-black-teal/20'],\n\t\t\t\tsecondary: null,\n\t\t\t\ttext: ['text-teal'],\n\t\t\t\ttransparent: ['bg-transparent'],\n\t\t\t\tdropdown: null,\n\t\t\t},\n\t\t\tactive: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tloading: {\n\t\t\t\ttrue: 'cursor-wait',\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tsm: ['text-xs h-6'],\n\t\t\t\tbase: ['text-sm h-8'],\n\t\t\t\tlg: ['text-base h-10'],\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\ttrue: 'cursor-not-allowed',\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tunderline: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tbuttonGroupPosition: {\n\t\t\t\tnone: null,\n\t\t\t\tstart: null,\n\t\t\t\tcenter: null,\n\t\t\t\tend: null,\n\t\t\t},\n\t\t\ticonOnly: {\n\t\t\t\ttrue: 'justify-center',\n\t\t\t\tfalse: 'w-inherit py-1',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t// variants\n\t\t\t{\n\t\t\t\tvariant: ['secondary', 'dropdown'],\n\t\t\t\tclass: ['bg-white border-black-teal/10'],\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'border',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'active:border-supportive-lilac-800 active:ring active:ring-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'border-supportive-lilac-800 ring ring-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent', 'dropdown'],\n\t\t\t\tbuttonGroupPosition: 'none',\n\t\t\t\tclass: 'rounded-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent', 'dropdown'],\n\t\t\t\tbuttonGroupPosition: 'start',\n\t\t\t\tclass: 'rounded-s-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent', 'dropdown'],\n\t\t\t\tbuttonGroupPosition: 'end',\n\t\t\t\tclass: 'rounded-e-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-black-teal',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'bg-supportive-lilac-100 text-black-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass:\n\t\t\t\t\t'drop-shadow-supportive-lilac hover:drop-shadow-2 hover:bg-supportive-lilac-700 active:text-black-teal/60 active:ring-black-teal/10',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'ring-black-teal/10',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['secondary', 'dropdown'],\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'border bg-white-600 text-black-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass:\n\t\t\t\t\t'drop-shadow-1 hover:drop-shadow-1 hover:bg-white-600 active:text-black-teal/60 active:ring-supportive-lilac-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'ring-supportive-lilac-100',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tunderline: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'border-b border-teal',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tunderline: true,\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'border-b border-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'active:text-teal-800',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-dark-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'hover:bg-dark-teal active:text-dark-teal-100/60',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-dark-teal-100/60',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tsize: ['base', 'sm'],\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'px-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tsize: 'lg',\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'px-3',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'dropdown',\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'p-2',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent', 'text'],\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'py-1',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tsize: 'sm',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-6',\n\t\t\t},\n\t\t\t{\n\t\t\t\tsize: 'base',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-8',\n\t\t\t},\n\t\t\t{\n\t\t\t\tsize: 'lg',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-10',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst icon = cva([], {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: 'text-sm',\n\t\t\tbase: 'text-base',\n\t\t\tlg: 'text-base',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-button',\n\tstyleUrl: 'button.component.scss',\n})\nexport class Button {\n\t/**\n\t * The type of the button\n\t */\n\t@Prop() as: 'a' | 'button' = 'button';\n\n\t/**\n\t * The variant of the button\n\t */\n\t@Prop() variant:\n\t\t| 'primary'\n\t\t| 'secondary'\n\t\t| 'transparent'\n\t\t| 'text'\n\t\t| 'dropdown' = 'primary';\n\n\t/**\n\t * Wether to force an active state\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * Wether the text variant has underline\n\t */\n\t@Prop() underline: boolean = true;\n\n\t/**\n\t * Href in case of \"text\" version\n\t */\n\t@Prop() href: string;\n\n\t/**\n\t * Target in case of \"text\" version\n\t */\n\t@Prop() target: string;\n\n\t/**\n\t * The size of the button\n\t */\n\t@Prop() size: 'sm' | 'base' | 'lg' = 'base';\n\n\t/**\n\t * The type of the button\n\t */\n\t@Prop() type: 'button' | 'submit' = 'button';\n\n\t/**\n\t * Wether to show a loader or not\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * Wether to show a chevron or not\n\t */\n\t@Prop() chevron: boolean | 'up' | 'down' = false;\n\n\t/**\n\t * Chevron position\n\t */\n\t@Prop() chevronPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Wether the button is disabled\n\t */\n\t@Prop() disabled: boolean = false;\n\n\t/**\n\t * Icon to show on the button\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t * Wether the button is icon only\n\t */\n\t@Prop() iconOnly: boolean = false;\n\n\t/**\n\t * Icon position\n\t */\n\t@Prop() iconPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Icon flip\n\t */\n\t@Prop() iconFlip: IconFlipOptions;\n\n\t/**\n\t * Icon rotate\n\t */\n\t@Prop() iconRotate: RotateOptions;\n\n\t/**\n\t * Wether the button should inherit text styles\n\t */\n\t@Prop() inheritText: boolean = false;\n\n\t/**\n\t * Position of the button in the button group, mostly un-used if not in a group\n\t */\n\t@Prop() buttonGroupPosition: 'start' | 'center' | 'end' | 'none' = 'none';\n\n\t/**\n\t * Button click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tonClick: EventEmitter<MouseEvent>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\trender() {\n\t\tlet loaderColor: 'white' | 'storm' | 'indigo' = 'white';\n\t\tswitch (this.variant) {\n\t\t\tcase 'secondary':\n\t\t\t\tloaderColor = 'storm';\n\t\t\t\tbreak;\n\t\t\tcase 'text':\n\t\t\t\tloaderColor = 'indigo';\n\t\t\t\tbreak;\n\t\t}\n\n\t\tconst VariableTag =\n\t\t\tthis.variant === 'text' || this.href?.length || this.as === 'a'\n\t\t\t\t? 'a'\n\t\t\t\t: 'button';\n\n\t\tconst active = this.active || this._el.classList.contains('active');\n\n\t\treturn (\n\t\t\t<Host class='p-button block'>\n\t\t\t\t<VariableTag\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttype={this.variant !== 'text' ? this.type : undefined}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t\tclass={button({\n\t\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\t\tsize: this.size,\n\t\t\t\t\t\tunderline: this.underline,\n\t\t\t\t\t\tloading: this.loading,\n\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\tbuttonGroupPosition: this.buttonGroupPosition,\n\t\t\t\t\t\ticonOnly: this.iconOnly,\n\t\t\t\t\t\tactive,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{this.chevron && this.chevronPosition === 'start' && (\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tvariant='caret'\n\t\t\t\t\t\t\trotate={this.chevron === 'up' ? 180 : 0}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\tthis.iconPosition === 'start' &&\n\t\t\t\t\t\t!(this.iconOnly && this.loading) &&\n\t\t\t\t\t\tthis._getIcon()}\n\n\t\t\t\t\t<slot />\n\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\tthis.iconPosition === 'end' &&\n\t\t\t\t\t\t!this.loading &&\n\t\t\t\t\t\t!this.chevron &&\n\t\t\t\t\t\tthis._getIcon()}\n\n\t\t\t\t\t{this.chevron && !this.loading && this.chevronPosition === 'end' && (\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tvariant='caret'\n\t\t\t\t\t\t\trotate={this.chevron === 'up' ? 180 : 0}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.loading && <p-loader color={loaderColor} />}\n\t\t\t\t</VariableTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('click', { capture: true })\n\thandleClick(ev: MouseEvent) {\n\t\tif (this.loading || this.disabled) {\n\t\t\tev.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tthis.onClick.emit(ev);\n\t}\n\n\tprivate _getIcon() {\n\t\tif (!this.icon) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn (\n\t\t\t<p-icon\n\t\t\t\tclass={icon({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t})}\n\t\t\t\tvariant={this.icon}\n\t\t\t\tflip={this.iconFlip}\n\t\t\t\trotate={this.iconRotate}\n\t\t\t/>\n\t\t);\n\t}\n}\n",":host {\n\t-webkit-transform-origin: 50% 51%;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { TextSizeOptions } from '../../../types/tailwind';\nimport { icons } from '../../../utils/icons';\n\nexport type IconVariant = keyof typeof icons;\nexport type IconFlipOptions = 'none' | 'horizontal' | 'vertical';\n\nconst icon = cva(['p-icon flex'], {\n\tvariants: {\n\t\tflip: {\n\t\t\tnone: null,\n\t\t\thorizontal: 'scale-x-flip',\n\t\t\tvertical: 'scale-y-flip',\n\t\t},\n\t\tsize: {\n\t\t\tauto: 'text-auto',\n\t\t\txxs: 'text-xxs',\n\t\t\txs: 'text-xs',\n\t\t\tsm: 'text-sm',\n\t\t\tbase: 'text-base',\n\t\t\tlg: 'text-lg',\n\t\t\txl: 'text-xl',\n\t\t\t'2xl': 'text-2xl',\n\t\t\t'3xl': 'text-3xl',\n\t\t\t'4xl': 'text-4xl',\n\t\t},\n\t\ttransform: {\n\t\t\ttrue: 'transform-gpu scale-[0.99]',\n\t\t\tfalse: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-icon',\n\tstyleUrl: 'icon.component.scss',\n\t// shadow: true,\n})\nexport class Icon {\n\t/**\n\t * The icon the be displayed\n\t */\n\t@Prop() variant!: IconVariant;\n\n\t/**\n\t * The size of the icon, using tailwind sizes\n\t */\n\t@Prop() size: TextSizeOptions = 'base';\n\n\t/**\n\t * Wether to rotate the icon x degrees\n\t */\n\t@Prop() rotate: number = 0;\n\n\t/**\n\t * Wether to flip the icon horizontally or vertically\n\t */\n\t@Prop() flip: IconFlipOptions = 'none';\n\n\trender() {\n\t\tconst svg = icons[this.variant];\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={icon({\n\t\t\t\t\tflip: this.flip,\n\t\t\t\t\tsize: this.size,\n\t\t\t\t\ttransform: this.flip !== 'none' || this.rotate > 0 || this.rotate < 0,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\t'--tw-rotate': `${this.rotate}deg`,\n\t\t\t\t}}\n\t\t\t\tinnerHTML={svg}\n\t\t\t></Host>\n\t\t);\n\t}\n}\n",":host {\n\t.loader {\n\t\t@apply inline-block h-[1em] w-[1em] rounded-full;\n\t\t@apply border-2 border-solid border-indigo-light border-t-indigo;\n\t\tanimation: 500ms spin linear infinite;\n\n\t\twill-change: transform;\n\n\t\t&.color-storm {\n\t\t\t@apply border-storm-light/40 border-t-storm #{!important};\n\t\t}\n\n\t\t&.color-white {\n\t\t\t@apply border-indigo-light/40 border-t-white #{!important};\n\t\t}\n\t}\n\n\t.loading-screen {\n\t\t@apply w-screen-safe h-screen-safe fixed top-0 left-0;\n\t\t@apply flex items-center justify-center;\n\t\t@apply bg-mystic;\n\n\t\tz-index: 1001;\n\n\t\t.content {\n\t\t\t@apply max-w-xs;\n\n\t\t\t.loader-wrapper {\n\t\t\t\t@apply flex w-full justify-center;\n\n\t\t\t\t.loader {\n\t\t\t\t\t@apply text-4xl;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n:host(.variant-ghost) {\n\t@apply box-border block;\n\n\twill-change: background, background-position-x, background-color;\n\n\tmin-height: 1em;\n\tmin-width: 1em;\n\n\t--loading-bg: #f7fafc;\n\t--loading-stripe: rgba(252, 253, 254, 1);\n\n\tbackground-color: var(--loading-bg);\n\tbackground: linear-gradient(\n\t\t\t100deg,\n\t\t\trgba(255, 255, 255, 0) 40%,\n\t\t\tvar(--loading-stripe) 50%,\n\t\t\trgba(255, 255, 255, 0) 60%\n\t\t)\n\t\tvar(--loading-bg);\n\tbackground-size: 200% 100%;\n\tbackground-position-x: 180%;\n\tanimation: 1s loading ease-in-out infinite;\n}\n\n@keyframes loading {\n\tto {\n\t\tbackground-position-x: -20%;\n\t}\n}\n\n@keyframes spin {\n\t100% {\n\t\ttransform: rotate(1turn);\n\t}\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n\ttag: 'p-loader',\n\tstyleUrl: 'loader.component.scss',\n\tshadow: true,\n})\nexport class Loader {\n\t/**\n\t * Wether to show or hide the loader\n\t */\n\t@Prop() show: boolean | Observable<boolean> = true;\n\n\t/**\n\t * Variant of loader\n\t */\n\t@Prop() variant:\n\t\t| 'inline'\n\t\t| 'full-width'\n\t\t| 'full-screen'\n\t\t| 'modal'\n\t\t| 'ghost' = 'inline';\n\n\t/**\n\t * Color of the loader\n\t */\n\t@Prop() color: 'indigo' | 'white' | 'storm' = 'indigo';\n\n\t/**\n\t * !NOT IMPLEMENTED! Modal title for modal variant\n\t */\n\t@Prop() modalTitle: string;\n\n\t/**\n\t * !NOT IMPLEMENTED! Modal description for modal variant\n\t */\n\t@Prop() modalDescription: string;\n\n\tprivate _show = this.show;\n\tprivate _showSubscriber: Subscription;\n\n\tprivate _loader = (<div class={`loader color-${this.color}`}></div>);\n\n\tcomponentWillRender() {\n\t\tthis._checkShow();\n\t}\n\n\tcomponentShouldUpdate() {\n\t\tthis._checkShow();\n\t}\n\n\trender() {\n\t\tif (!this._show) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.variant === 'ghost') {\n\t\t\treturn <Host class=\"p-loader variant-ghost\"></Host>;\n\t\t}\n\n\t\tif (this.variant === 'full-screen') {\n\t\t\treturn (\n\t\t\t\t<Host class=\"p-loader variant-full-screen\">\n\t\t\t\t\t<div class=\"loading-screen\">\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t<slot />\n\n\t\t\t\t\t\t\t<div class=\"loader-wrapper\">{this._loader}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Host>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-loader variant-default flex ${\n\t\t\t\t\tthis.variant === 'full-width' &&\n\t\t\t\t\t'w-full flex justify-center text-4xl'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{this._loader}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _checkShow() {\n\t\tif (this._showSubscriber) {\n\t\t\tthis._showSubscriber.unsubscribe();\n\t\t\tthis._showSubscriber = null;\n\t\t}\n\n\t\tif (typeof this.show !== 'boolean') {\n\t\t\tthis._showSubscriber = this.show?.subscribe(\n\t\t\t\t(show) => (this._show = show)\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tthis._show = this.show;\n\t}\n}\n"],"version":3}

package/dist/cjs/p-profile.cjs.entry.js

@@ -6,9 +6,9 @@ const index = require('./index-02e05522.js');
 const index$1 = require('./index-b556e70f.js');
 require('./clsx-fc789adc.js');
 
-const profileComponentCss = "*{box-sizing:border-box}.static{position:static!important}.absolute{position:absolute!important}.block{display:block!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-medium{font-weight:500!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}";
+const profileComponentCss = "*{box-sizing:border-box}.static{position:static!important}.absolute{position:absolute!important}.block{display:block!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.w-full{width:100%!important}.w-inherit{width:inherit!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-medium{font-weight:500!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}";
 
-const profileContent = index$1.cva(['flex gap-2 items-center w-full'], {
+const profileContent = index$1.cva(['flex gap-2 items-center flex-1 min-w-0'], {
   variants: {
     dropdown: {
       false: 'h-10 py-1',
@@ -26,14 +26,24 @@ const Profile = class {
   componentWillLoad() {
     this._hasDropdownSlot = !!this._el.querySelector(':scope > [slot="dropdown"]');
   }
+  componentWillRender() {
+    this._updateAvatar();
+  }
   render() {
     const content = this._getContent();
-    return (index.h(index.Host, { class: 'p-profile inline-block' }, this._hasDropdownSlot ? (index.h("p-dropdown", { class: 'block', strategy: 'absolute', placement: this.dropdownLocation, applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, index.h("p-button", { variant: 'secondary', chevron: this._dropdownOpen ? 'up' : 'down', active: this._dropdownOpen, slot: 'trigger', size: 'lg' }, content), index.h("div", { slot: 'items' }, index.h("slot", { name: 'dropdown' })))) : (content)));
+    return (index.h(index.Host, { class: 'p-profile inline-block w-inherit' }, this._hasDropdownSlot ? (index.h("p-dropdown", { class: 'block', strategy: 'absolute', placement: this.dropdownLocation, applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, index.h("p-button", { variant: 'dropdown', chevron: this._dropdownOpen ? 'up' : 'down', active: this._dropdownOpen, slot: 'trigger', size: 'lg', class: 'w-full px-2' }, content), index.h("div", { slot: 'items' }, index.h("slot", { name: 'dropdown' })))) : (content)));
   }
   _getContent() {
     return (index.h("div", { class: profileContent({
         dropdown: this._hasDropdownSlot,
-      }) }, index.h("slot", { name: 'avatar' }), index.h("div", { class: 'flex flex-1 flex-col' }, index.h("p", { class: 'font-sm font-medium' }, index.h("slot", { name: 'title' })), index.h("p", { class: 'text-xs text-black-teal-300' }, index.h("slot", { name: 'subtitle' }))), index.h("slot", { name: 'post-title' })));
+      }) }, index.h("slot", { name: 'avatar' }), index.h("div", { class: 'flex min-w-0 flex-1 flex-col' }, index.h("p", { class: 'overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium' }, index.h("slot", { name: 'title' })), index.h("p", { class: 'overflow-hidden text-ellipsis whitespace-nowrap text-xs text-black-teal-300' }, index.h("slot", { name: 'subtitle' }))), index.h("slot", { name: 'post-title' })));
+  }
+  _updateAvatar() {
+    const avatar = this._el.querySelector('p-avatar[slot="avatar"]');
+    if (!avatar) {
+      return;
+    }
+    avatar.size = this._hasDropdownSlot ? 'sm' : avatar.size;
   }
   get _el() { return index.getElement(this); }
 };

package/dist/cjs/p-profile.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"p-profile.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,0qBAA0qB;;ACGtsB,MAAM,cAAc,GAAGA,WAAG,CAAC,CAAC,gCAAgC,CAAC,EAAE;EAC9D,QAAQ,EAAE;IACT,QAAQ,EAAE;MACT,KAAK,EAAE,WAAW;MAClB,IAAI,EAAE,IAAI;KACV;GACD;CACD,CAAC,CAAC;MAMU,OAAO;;;4BAIkC,YAAY;yBAOhC,KAAK;4BACF,KAAK;;EAEzC,iBAAiB;IAChB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC/C,4BAA4B,CAC5B,CAAC;GACF;EAED,MAAM;IACL,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACnC,QACCC,QAACC,UAAI,IAAC,KAAK,EAAC,wBAAwB,IAClC,IAAI,CAAC,gBAAgB,IACrBD,wBACC,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,UAAU,EACnB,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,cAAc,EAAE,IAAI,EACpB,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,MAAM,CAAC,IAEhDA,sBACC,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,MAAM,EAC3C,MAAM,EAAE,IAAI,CAAC,aAAa,EAC1B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,IAER,OAAO,CACE,EACXA,iBAAK,IAAI,EAAC,OAAO,IAChBA,kBAAM,IAAI,EAAC,UAAU,GAAG,CACnB,CACM,KAEb,OAAO,CACP,CACK,EACN;GACF;EAEO,WAAW;IAClB,QACCA,iBACC,KAAK,EAAE,cAAc,CAAC;QACrB,QAAQ,EAAE,IAAI,CAAC,gBAAgB;OAC/B,CAAC,IAEFA,kBAAM,IAAI,EAAC,QAAQ,GAAG,EACtBA,iBAAK,KAAK,EAAC,sBAAsB,IAChCA,eAAG,KAAK,EAAC,qBAAqB,IAC7BA,kBAAM,IAAI,EAAC,OAAO,GAAG,CAClB,EACJA,eAAG,KAAK,EAAC,6BAA6B,IACrCA,kBAAM,IAAI,EAAC,UAAU,GAAG,CACrB,CACC,EAENA,kBAAM,IAAI,EAAC,YAAY,GAAG,CACrB,EACL;GACF;;;;;;;","names":["cva","h","Host"],"sources":["src/components/molecules/profile/profile.component.scss?tag=p-profile","src/components/molecules/profile/profile.component.tsx"],"sourcesContent":["// :host {\n// \t@apply flex;\n//\n// \t.content {\n// \t\t@apply flex gap-3 items-center w-full;\n//\n// \t\t.name {\n// \t\t\t@apply flex flex-col justify-center overflow-hidden;\n//\n// \t\t\t> *:nth-child(1) {\n// \t\t\t\t@apply text-sm text-storm-dark;\n// \t\t\t\t@apply font-semibold;\n// \t\t\t}\n//\n// \t\t\t> *:nth-child(2) {\n// \t\t\t\t@apply text-sm text-storm-vague;\n// \t\t\t}\n//\n// \t\t\t::slotted(*) {\n// \t\t\t\t@apply text-ellipsis overflow-hidden whitespace-nowrap;\n// \t\t\t}\n// \t\t}\n// \t}\n// }\n//\n// :host([size='xsmall']) {\n// \t@apply h-6;\n// }\n//\n// :host([size='small']) {\n// \t@apply h-8;\n// }\n//\n// :host([size='table']) {\n// \t@apply h-10;\n// }\n//\n// :host([size='medium']) {\n// \t@apply h-[3.125rem];\n// }\n//\n// :host([size='large']) {\n// \t@apply h-16;\n// }\n//\n// :host([size='xlarge']) {\n// \t@apply h-[6.5rem];\n// }\n//\n// :host(.has-dropdown) {\n// \t@apply cursor-pointer;\n//\n// \t.content {\n// \t\t@apply p-2 rounded;\n// \t\t@apply border border-solid border-mystic-dark #{!important};\n// \t}\n// }\n//\n// :host(.has-dropdown[size='small']) {\n// \t@apply h-12;\n// }\n//\n// :host(.has-dropdown[size='medium']) {\n// \t@apply h-[4.125rem];\n// }\n//\n// :host(.has-dropdown[size='large']) {\n// \t@apply h-20;\n// }\n//\n// :host(.has-dropdown:hover),\n// :host(.active) {\n// \t.content {\n// \t\t@apply shadow-3;\n// \t}\n// }\n//\n// :host(.active) {\n// \t.content {\n// \t\tp-icon {\n// \t\t\t@apply text-indigo;\n// \t\t}\n// \t}\n// }\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst profileContent = cva(['flex gap-2 items-center w-full'], {\n\tvariants: {\n\t\tdropdown: {\n\t\t\tfalse: 'h-10 py-1',\n\t\t\ttrue: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-profile',\n\tstyleUrl: 'profile.component.scss',\n})\nexport class Profile {\n\t/**\n\t * The position of the dropdown\n\t */\n\t@Prop() dropdownLocation: 'top-end' | 'bottom-end' = 'bottom-end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _dropdownOpen = false;\n\t@State() private _hasDropdownSlot = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasDropdownSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"dropdown\"]'\n\t\t);\n\t}\n\n\trender() {\n\t\tconst content = this._getContent();\n\t\treturn (\n\t\t\t<Host class='p-profile inline-block'>\n\t\t\t\t{this._hasDropdownSlot ? (\n\t\t\t\t\t<p-dropdown\n\t\t\t\t\t\tclass='block'\n\t\t\t\t\t\tstrategy='absolute'\n\t\t\t\t\t\tplacement={this.dropdownLocation}\n\t\t\t\t\t\tapplyFullWidth={true}\n\t\t\t\t\t\tapplyMaxWidth={false}\n\t\t\t\t\t\tonIsOpen={ev => (this._dropdownOpen = ev.detail)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\tchevron={this._dropdownOpen ? 'up' : 'down'}\n\t\t\t\t\t\t\tactive={this._dropdownOpen}\n\t\t\t\t\t\t\tslot='trigger'\n\t\t\t\t\t\t\tsize='lg'\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t<div slot='items'>\n\t\t\t\t\t\t\t<slot name='dropdown' />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</p-dropdown>\n\t\t\t\t) : (\n\t\t\t\t\tcontent\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _getContent() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={profileContent({\n\t\t\t\t\tdropdown: this._hasDropdownSlot,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot name='avatar' />\n\t\t\t\t<div class='flex flex-1 flex-col'>\n\t\t\t\t\t<p class='font-sm font-medium'>\n\t\t\t\t\t\t<slot name='title' />\n\t\t\t\t\t</p>\n\t\t\t\t\t<p class='text-xs text-black-teal-300'>\n\t\t\t\t\t\t<slot name='subtitle' />\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t<slot name='post-title' />\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"p-profile.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,2/BAA2/B;;ACGvhC,MAAM,cAAc,GAAGA,WAAG,CAAC,CAAC,wCAAwC,CAAC,EAAE;EACtE,QAAQ,EAAE;IACT,QAAQ,EAAE;MACT,KAAK,EAAE,WAAW;MAClB,IAAI,EAAE,IAAI;KACV;GACD;CACD,CAAC,CAAC;MAMU,OAAO;;;4BAIkC,YAAY;yBAOhC,KAAK;4BACF,KAAK;;EAEzC,iBAAiB;IAChB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC/C,4BAA4B,CAC5B,CAAC;GACF;EAED,mBAAmB;IAClB,IAAI,CAAC,aAAa,EAAE,CAAC;GACrB;EAED,MAAM;IACL,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACnC,QACCC,QAACC,UAAI,IAAC,KAAK,EAAC,kCAAkC,IAC5C,IAAI,CAAC,gBAAgB,IACrBD,wBACC,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,UAAU,EACnB,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,cAAc,EAAE,IAAI,EACpB,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,MAAM,CAAC,IAEhDA,sBACC,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,MAAM,EAC3C,MAAM,EAAE,IAAI,CAAC,aAAa,EAC1B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,aAAa,IAElB,OAAO,CACE,EACXA,iBAAK,IAAI,EAAC,OAAO,IAChBA,kBAAM,IAAI,EAAC,UAAU,GAAG,CACnB,CACM,KAEb,OAAO,CACP,CACK,EACN;GACF;EAEO,WAAW;IAClB,QACCA,iBACC,KAAK,EAAE,cAAc,CAAC;QACrB,QAAQ,EAAE,IAAI,CAAC,gBAAgB;OAC/B,CAAC,IAEFA,kBAAM,IAAI,EAAC,QAAQ,GAAG,EACtBA,iBAAK,KAAK,EAAC,8BAA8B,IACxCA,eAAG,KAAK,EAAC,qEAAqE,IAC7EA,kBAAM,IAAI,EAAC,OAAO,GAAG,CAClB,EACJA,eAAG,KAAK,EAAC,6EAA6E,IACrFA,kBAAM,IAAI,EAAC,UAAU,GAAG,CACrB,CACC,EAENA,kBAAM,IAAI,EAAC,YAAY,GAAG,CACrB,EACL;GACF;EAEO,aAAa;IACpB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CACpC,yBAAyB,CACH,CAAC;IAExB,IAAI,CAAC,MAAM,EAAE;MACZ,OAAO;KACP;IAED,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;GACzD;;;;;;;","names":["cva","h","Host"],"sources":["src/components/molecules/profile/profile.component.scss?tag=p-profile","src/components/molecules/profile/profile.component.tsx"],"sourcesContent":["// :host {\n// \t@apply flex;\n//\n// \t.content {\n// \t\t@apply flex gap-3 items-center w-full;\n//\n// \t\t.name {\n// \t\t\t@apply flex flex-col justify-center overflow-hidden;\n//\n// \t\t\t> *:nth-child(1) {\n// \t\t\t\t@apply text-sm text-storm-dark;\n// \t\t\t\t@apply font-semibold;\n// \t\t\t}\n//\n// \t\t\t> *:nth-child(2) {\n// \t\t\t\t@apply text-sm text-storm-vague;\n// \t\t\t}\n//\n// \t\t\t::slotted(*) {\n// \t\t\t\t@apply text-ellipsis overflow-hidden whitespace-nowrap;\n// \t\t\t}\n// \t\t}\n// \t}\n// }\n//\n// :host([size='xsmall']) {\n// \t@apply h-6;\n// }\n//\n// :host([size='small']) {\n// \t@apply h-8;\n// }\n//\n// :host([size='table']) {\n// \t@apply h-10;\n// }\n//\n// :host([size='medium']) {\n// \t@apply h-[3.125rem];\n// }\n//\n// :host([size='large']) {\n// \t@apply h-16;\n// }\n//\n// :host([size='xlarge']) {\n// \t@apply h-[6.5rem];\n// }\n//\n// :host(.has-dropdown) {\n// \t@apply cursor-pointer;\n//\n// \t.content {\n// \t\t@apply p-2 rounded;\n// \t\t@apply border border-solid border-mystic-dark #{!important};\n// \t}\n// }\n//\n// :host(.has-dropdown[size='small']) {\n// \t@apply h-12;\n// }\n//\n// :host(.has-dropdown[size='medium']) {\n// \t@apply h-[4.125rem];\n// }\n//\n// :host(.has-dropdown[size='large']) {\n// \t@apply h-20;\n// }\n//\n// :host(.has-dropdown:hover),\n// :host(.active) {\n// \t.content {\n// \t\t@apply shadow-3;\n// \t}\n// }\n//\n// :host(.active) {\n// \t.content {\n// \t\tp-icon {\n// \t\t\t@apply text-indigo;\n// \t\t}\n// \t}\n// }\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst profileContent = cva(['flex gap-2 items-center flex-1 min-w-0'], {\n\tvariants: {\n\t\tdropdown: {\n\t\t\tfalse: 'h-10 py-1',\n\t\t\ttrue: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-profile',\n\tstyleUrl: 'profile.component.scss',\n})\nexport class Profile {\n\t/**\n\t * The position of the dropdown\n\t */\n\t@Prop() dropdownLocation: 'top-end' | 'bottom-end' = 'bottom-end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _dropdownOpen = false;\n\t@State() private _hasDropdownSlot = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasDropdownSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"dropdown\"]'\n\t\t);\n\t}\n\n\tcomponentWillRender() {\n\t\tthis._updateAvatar();\n\t}\n\n\trender() {\n\t\tconst content = this._getContent();\n\t\treturn (\n\t\t\t<Host class='p-profile inline-block w-inherit'>\n\t\t\t\t{this._hasDropdownSlot ? (\n\t\t\t\t\t<p-dropdown\n\t\t\t\t\t\tclass='block'\n\t\t\t\t\t\tstrategy='absolute'\n\t\t\t\t\t\tplacement={this.dropdownLocation}\n\t\t\t\t\t\tapplyFullWidth={true}\n\t\t\t\t\t\tapplyMaxWidth={false}\n\t\t\t\t\t\tonIsOpen={ev => (this._dropdownOpen = ev.detail)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\tvariant='dropdown'\n\t\t\t\t\t\t\tchevron={this._dropdownOpen ? 'up' : 'down'}\n\t\t\t\t\t\t\tactive={this._dropdownOpen}\n\t\t\t\t\t\t\tslot='trigger'\n\t\t\t\t\t\t\tsize='lg'\n\t\t\t\t\t\t\tclass='w-full px-2'\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t<div slot='items'>\n\t\t\t\t\t\t\t<slot name='dropdown' />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</p-dropdown>\n\t\t\t\t) : (\n\t\t\t\t\tcontent\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _getContent() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={profileContent({\n\t\t\t\t\tdropdown: this._hasDropdownSlot,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot name='avatar' />\n\t\t\t\t<div class='flex min-w-0 flex-1 flex-col'>\n\t\t\t\t\t<p class='overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium'>\n\t\t\t\t\t\t<slot name='title' />\n\t\t\t\t\t</p>\n\t\t\t\t\t<p class='overflow-hidden text-ellipsis whitespace-nowrap text-xs text-black-teal-300'>\n\t\t\t\t\t\t<slot name='subtitle' />\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t<slot name='post-title' />\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate _updateAvatar() {\n\t\tconst avatar = this._el.querySelector(\n\t\t\t'p-avatar[slot=\"avatar\"]'\n\t\t) as HTMLPAvatarElement;\n\n\t\tif (!avatar) {\n\t\t\treturn;\n\t\t}\n\n\t\tavatar.size = this._hasDropdownSlot ? 'sm' : avatar.size;\n\t}\n}\n"],"version":3}

package/dist/collection/components/atoms/avatar/avatar.component.css

@@ -1 +1 @@
-*{box-sizing:border-box}.static{position:static!important}.z-0{z-index:0!important}.flex{display:flex!important}.aspect-branding{aspect-ratio:23/24!important}.h-10{height:2.5rem!important}.h-14{height:3.5rem!important}.h-20{height:5rem!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.h-\[6\.5rem\]{height:6.5rem!important}.h-\[8\.5rem\]{height:8.5rem!important}.h-full{height:100%!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.rounded-full{border-radius:9999px!important}.bg-off-white{--tw-bg-opacity:1!important;background-color:rgb(243 241 237/var(--tw-bg-opacity,1))!important}.object-cover{object-fit:cover!important}.p-\[1px\]{padding:1px!important}.font-ambit{font-family:Ambit,sans-serif!important}.text-4xl{font-size:2.5rem!important;line-height:3rem!important}.text-\[3\.5rem\]{font-size:3.5rem!important}.text-\[4\.5rem\]{font-size:4.5rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important}.text-xs,.text-xxs{line-height:1rem!important}.text-xxs{font-size:.5rem!important}.leading-\[4rem\]{line-height:4rem!important}.leading-\[5rem\]{line-height:5rem!important}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-inset{--tw-ring-inset:inset!important}.ring-black-teal\/20{--tw-ring-color:rgba(3,42,36,.2)!important}
+*{box-sizing:border-box}.static{position:static!important}.z-0{z-index:0!important}.flex{display:flex!important}.aspect-branding{aspect-ratio:23/24!important}.h-10{height:2.5rem!important}.h-14{height:3.5rem!important}.h-20{height:5rem!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.h-\[6\.5rem\]{height:6.5rem!important}.h-\[8\.5rem\]{height:8.5rem!important}.h-full{height:100%!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.rounded-full{border-radius:9999px!important}.bg-off-white{--tw-bg-opacity:1!important;background-color:rgb(243 241 237/var(--tw-bg-opacity,1))!important}.object-cover{object-fit:cover!important}.p-\[1px\]{padding:1px!important}.font-ambit{font-family:Ambit,sans-serif!important}.text-4xl{font-size:2.5rem!important;line-height:3rem!important}.text-\[3\.5rem\]{font-size:3.5rem!important}.text-\[4\.5rem\]{font-size:4.5rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important}.text-xs,.text-xxs{line-height:1rem!important}.text-xxs{font-size:.5rem!important}.leading-\[4rem\]{line-height:4rem!important}.leading-\[5rem\]{line-height:5rem!important}.leading-none{line-height:1!important}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-inset{--tw-ring-inset:inset!important}.ring-black-teal\/20{--tw-ring-color:rgba(3,42,36,.2)!important}

package/dist/collection/components/atoms/avatar/avatar.component.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { cva } from "class-variance-authority";
 const avatar = cva([
-  'p-avatar bg-off-white rounded-full aspect-branding ring-inset ring-1 ring-black-teal/20 p-[1px] flex items-center justify-center font-ambit',
+  'p-avatar bg-off-white rounded-full aspect-branding ring-inset ring-1 ring-black-teal/20 p-[1px] flex items-center justify-center font-ambit leading-none',
 ], {
   variants: {
     size: {

package/dist/collection/components/atoms/avatar/avatar.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/avatar/avatar.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,MAAM,GAAG,GAAG,CACjB;EACC,6IAA6I;CAC7I,EACD;EACC,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,EAAE,EAAE,cAAc;MAClB,EAAE,EAAE,aAAa;MACjB,IAAI,EAAE,eAAe;MACrB,EAAE,EAAE,cAAc;MAClB,EAAE,EAAE,cAAc;MAClB,KAAK,EAAE,eAAe;MACtB,KAAK,EAAE,yCAAyC;MAChD,KAAK,EAAE,yCAAyC;KAChD;GACD;CACD,CACD,CAAC;AAOF,MAAM,OAAO,MAAM;;gBAYP,MAAM;;;;;mBAkBmB,KAAK;;EAGzC,YAAY,CAAC,GAAW;IACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;EACjB,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACf,IAAI,CAAC,UAAU,EAAE,CAAC;KAClB;EACF,CAAC;EAED,MAAM;;IACL,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;OACf,CAAC,IAED,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACf,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAG,CAAC,CAAC,mCAAI,GAAG,CACxB,CAAC,CAAC,CAAC,CACH,WACC,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,KAAK,EAAC,sDAAsD,EAC5D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAC/B,CACF,CACK,CACP,CAAC;EACH,CAAC;EAEO,UAAU;IACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst avatar = cva(\n\t[\n\t\t'p-avatar bg-off-white rounded-full aspect-branding ring-inset ring-1 ring-black-teal/20 p-[1px] flex items-center justify-center font-ambit',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: 'h-4 text-xxs',\n\t\t\t\tsm: 'h-6 text-xs',\n\t\t\t\tbase: 'h-8 text-base',\n\t\t\t\tlg: 'h-10 text-xl',\n\t\t\t\txl: 'h-14 text-xl',\n\t\t\t\t'2xl': 'h-20 text-4xl',\n\t\t\t\t'3xl': 'h-[6.5rem] text-[3.5rem] leading-[4rem]',\n\t\t\t\t'4xl': 'h-[8.5rem] text-[4.5rem] leading-[5rem]',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-avatar',\n\tstyleUrl: 'avatar.component.scss',\n\t// shadow: true,\n})\nexport class Avatar {\n\t/**\n\t * The size of the avatar\n\t */\n\t@Prop({ reflect: true }) size:\n\t\t| 'xs'\n\t\t| 'sm'\n\t\t| 'base'\n\t\t| 'lg'\n\t\t| 'xl'\n\t\t| '2xl'\n\t\t| '3xl'\n\t\t| '4xl' = 'base';\n\n\t/**\n\t * The default image to show on errors\n\t */\n\t@Prop() defaultImage: string;\n\n\t/**\n\t * The image used for the avatar\n\t */\n\t@Prop() src!: string;\n\n\t/**\n\t * The letters to show on the empty state variant\n\t */\n\t@Prop() letters: string;\n\n\t@State() private _src: string;\n\t@State() private _failed: boolean = false;\n\n\t@Watch('src')\n\tonSrchChange(src: string) {\n\t\tthis._failed = false;\n\t\tthis._src = src;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.onSrchChange(this.src);\n\t\tif (!this._src) {\n\t\t\tthis._setFailed();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={avatar({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{this._failed ? (\n\t\t\t\t\tthis.letters?.[0] ?? ' '\n\t\t\t\t) : (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={this._src}\n\t\t\t\t\t\tclass='z-0 aspect-branding h-full rounded-full object-cover'\n\t\t\t\t\t\tonError={() => this._setFailed()}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _setFailed() {\n\t\tthis._failed = true;\n\t\tthis._src = undefined;\n\t}\n}\n"]}
+{"version":3,"file":"avatar.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/avatar/avatar.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,MAAM,GAAG,GAAG,CACjB;EACC,0JAA0J;CAC1J,EACD;EACC,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,EAAE,EAAE,cAAc;MAClB,EAAE,EAAE,aAAa;MACjB,IAAI,EAAE,eAAe;MACrB,EAAE,EAAE,cAAc;MAClB,EAAE,EAAE,cAAc;MAClB,KAAK,EAAE,eAAe;MACtB,KAAK,EAAE,yCAAyC;MAChD,KAAK,EAAE,yCAAyC;KAChD;GACD;CACD,CACD,CAAC;AAOF,MAAM,OAAO,MAAM;;gBAYP,MAAM;;;;;mBAkBmB,KAAK;;EAGzC,YAAY,CAAC,GAAW;IACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;EACjB,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACf,IAAI,CAAC,UAAU,EAAE,CAAC;KAClB;EACF,CAAC;EAED,MAAM;;IACL,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;OACf,CAAC,IAED,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACf,MAAA,MAAA,IAAI,CAAC,OAAO,0CAAG,CAAC,CAAC,mCAAI,GAAG,CACxB,CAAC,CAAC,CAAC,CACH,WACC,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,KAAK,EAAC,sDAAsD,EAC5D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAC/B,CACF,CACK,CACP,CAAC;EACH,CAAC;EAEO,UAAU;IACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst avatar = cva(\n\t[\n\t\t'p-avatar bg-off-white rounded-full aspect-branding ring-inset ring-1 ring-black-teal/20 p-[1px] flex items-center justify-center font-ambit leading-none',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\txs: 'h-4 text-xxs',\n\t\t\t\tsm: 'h-6 text-xs',\n\t\t\t\tbase: 'h-8 text-base',\n\t\t\t\tlg: 'h-10 text-xl',\n\t\t\t\txl: 'h-14 text-xl',\n\t\t\t\t'2xl': 'h-20 text-4xl',\n\t\t\t\t'3xl': 'h-[6.5rem] text-[3.5rem] leading-[4rem]',\n\t\t\t\t'4xl': 'h-[8.5rem] text-[4.5rem] leading-[5rem]',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-avatar',\n\tstyleUrl: 'avatar.component.scss',\n\t// shadow: true,\n})\nexport class Avatar {\n\t/**\n\t * The size of the avatar\n\t */\n\t@Prop({ reflect: true }) size:\n\t\t| 'xs'\n\t\t| 'sm'\n\t\t| 'base'\n\t\t| 'lg'\n\t\t| 'xl'\n\t\t| '2xl'\n\t\t| '3xl'\n\t\t| '4xl' = 'base';\n\n\t/**\n\t * The default image to show on errors\n\t */\n\t@Prop() defaultImage: string;\n\n\t/**\n\t * The image used for the avatar\n\t */\n\t@Prop() src!: string;\n\n\t/**\n\t * The letters to show on the empty state variant\n\t */\n\t@Prop() letters: string;\n\n\t@State() private _src: string;\n\t@State() private _failed: boolean = false;\n\n\t@Watch('src')\n\tonSrchChange(src: string) {\n\t\tthis._failed = false;\n\t\tthis._src = src;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.onSrchChange(this.src);\n\t\tif (!this._src) {\n\t\t\tthis._setFailed();\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={avatar({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{this._failed ? (\n\t\t\t\t\tthis.letters?.[0] ?? ' '\n\t\t\t\t) : (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={this._src}\n\t\t\t\t\t\tclass='z-0 aspect-branding h-full rounded-full object-cover'\n\t\t\t\t\t\tonError={() => this._setFailed()}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _setFailed() {\n\t\tthis._failed = true;\n\t\tthis._src = undefined;\n\t}\n}\n"]}

package/dist/collection/components/atoms/icon/icon.component.js

@@ -29,7 +29,7 @@ const icon = cva(['p-icon flex'], {
 export class Icon {
   constructor() {
     this.variant = undefined;
-    this.size = 'auto';
+    this.size = 'base';
     this.rotate = 0;
     this.flip = 'none';
   }
@@ -101,7 +101,7 @@ export class Icon {
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "'auto'"
+        "defaultValue": "'base'"
       },
       "rotate": {
         "type": "number",

package/dist/collection/components/atoms/icon/icon.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/icon/icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAK7C,MAAM,IAAI,GAAG,GAAG,CAAC,CAAC,aAAa,CAAC,EAAE;EACjC,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,IAAI,EAAE,IAAI;MACV,UAAU,EAAE,cAAc;MAC1B,QAAQ,EAAE,cAAc;KACxB;IACD,IAAI,EAAE;MACL,IAAI,EAAE,WAAW;MACjB,GAAG,EAAE,UAAU;MACf,EAAE,EAAE,SAAS;MACb,EAAE,EAAE,SAAS;MACb,IAAI,EAAE,WAAW;MACjB,EAAE,EAAE,SAAS;MACb,EAAE,EAAE,SAAS;MACb,KAAK,EAAE,UAAU;MACjB,KAAK,EAAE,UAAU;MACjB,KAAK,EAAE,UAAU;KACjB;IACD,SAAS,EAAE;MACV,IAAI,EAAE,4BAA4B;MAClC,KAAK,EAAE,IAAI;KACX;GACD;CACD,CAAC,CAAC;AAOH,MAAM,OAAO,IAAI;;;gBASgB,MAAM;kBAKb,CAAC;gBAKM,MAAM;;EAEtC,MAAM;IACL,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAEhC,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,IAAI,CAAC;QACX,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;OACrE,CAAC,EACF,KAAK,EAAE;QACN,aAAa,EAAE,GAAG,IAAI,CAAC,MAAM,KAAK;OAClC,EACD,SAAS,EAAE,GAAG,GACP,CACR,CAAC;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { TextSizeOptions } from '../../../types/tailwind';\nimport { icons } from '../../../utils/icons';\n\nexport type IconVariant = keyof typeof icons;\nexport type IconFlipOptions = 'none' | 'horizontal' | 'vertical';\n\nconst icon = cva(['p-icon flex'], {\n\tvariants: {\n\t\tflip: {\n\t\t\tnone: null,\n\t\t\thorizontal: 'scale-x-flip',\n\t\t\tvertical: 'scale-y-flip',\n\t\t},\n\t\tsize: {\n\t\t\tauto: 'text-auto',\n\t\t\txxs: 'text-xxs',\n\t\t\txs: 'text-xs',\n\t\t\tsm: 'text-sm',\n\t\t\tbase: 'text-base',\n\t\t\tlg: 'text-lg',\n\t\t\txl: 'text-xl',\n\t\t\t'2xl': 'text-2xl',\n\t\t\t'3xl': 'text-3xl',\n\t\t\t'4xl': 'text-4xl',\n\t\t},\n\t\ttransform: {\n\t\t\ttrue: 'transform-gpu scale-[0.99]',\n\t\t\tfalse: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-icon',\n\tstyleUrl: 'icon.component.scss',\n\t// shadow: true,\n})\nexport class Icon {\n\t/**\n\t * The icon the be displayed\n\t */\n\t@Prop() variant!: IconVariant;\n\n\t/**\n\t * The size of the icon, using tailwind sizes\n\t */\n\t@Prop() size: TextSizeOptions = 'auto';\n\n\t/**\n\t * Wether to rotate the icon x degrees\n\t */\n\t@Prop() rotate: number = 0;\n\n\t/**\n\t * Wether to flip the icon horizontally or vertically\n\t */\n\t@Prop() flip: IconFlipOptions = 'none';\n\n\trender() {\n\t\tconst svg = icons[this.variant];\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={icon({\n\t\t\t\t\tflip: this.flip,\n\t\t\t\t\tsize: this.size,\n\t\t\t\t\ttransform: this.flip !== 'none' || this.rotate > 0 || this.rotate < 0,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\t'--tw-rotate': `${this.rotate}deg`,\n\t\t\t\t}}\n\t\t\t\tinnerHTML={svg}\n\t\t\t></Host>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"icon.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/icon/icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAK7C,MAAM,IAAI,GAAG,GAAG,CAAC,CAAC,aAAa,CAAC,EAAE;EACjC,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,IAAI,EAAE,IAAI;MACV,UAAU,EAAE,cAAc;MAC1B,QAAQ,EAAE,cAAc;KACxB;IACD,IAAI,EAAE;MACL,IAAI,EAAE,WAAW;MACjB,GAAG,EAAE,UAAU;MACf,EAAE,EAAE,SAAS;MACb,EAAE,EAAE,SAAS;MACb,IAAI,EAAE,WAAW;MACjB,EAAE,EAAE,SAAS;MACb,EAAE,EAAE,SAAS;MACb,KAAK,EAAE,UAAU;MACjB,KAAK,EAAE,UAAU;MACjB,KAAK,EAAE,UAAU;KACjB;IACD,SAAS,EAAE;MACV,IAAI,EAAE,4BAA4B;MAClC,KAAK,EAAE,IAAI;KACX;GACD;CACD,CAAC,CAAC;AAOH,MAAM,OAAO,IAAI;;;gBASgB,MAAM;kBAKb,CAAC;gBAKM,MAAM;;EAEtC,MAAM;IACL,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAEhC,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,IAAI,CAAC;QACX,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;OACrE,CAAC,EACF,KAAK,EAAE;QACN,aAAa,EAAE,GAAG,IAAI,CAAC,MAAM,KAAK;OAClC,EACD,SAAS,EAAE,GAAG,GACP,CACR,CAAC;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\nimport { TextSizeOptions } from '../../../types/tailwind';\nimport { icons } from '../../../utils/icons';\n\nexport type IconVariant = keyof typeof icons;\nexport type IconFlipOptions = 'none' | 'horizontal' | 'vertical';\n\nconst icon = cva(['p-icon flex'], {\n\tvariants: {\n\t\tflip: {\n\t\t\tnone: null,\n\t\t\thorizontal: 'scale-x-flip',\n\t\t\tvertical: 'scale-y-flip',\n\t\t},\n\t\tsize: {\n\t\t\tauto: 'text-auto',\n\t\t\txxs: 'text-xxs',\n\t\t\txs: 'text-xs',\n\t\t\tsm: 'text-sm',\n\t\t\tbase: 'text-base',\n\t\t\tlg: 'text-lg',\n\t\t\txl: 'text-xl',\n\t\t\t'2xl': 'text-2xl',\n\t\t\t'3xl': 'text-3xl',\n\t\t\t'4xl': 'text-4xl',\n\t\t},\n\t\ttransform: {\n\t\t\ttrue: 'transform-gpu scale-[0.99]',\n\t\t\tfalse: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-icon',\n\tstyleUrl: 'icon.component.scss',\n\t// shadow: true,\n})\nexport class Icon {\n\t/**\n\t * The icon the be displayed\n\t */\n\t@Prop() variant!: IconVariant;\n\n\t/**\n\t * The size of the icon, using tailwind sizes\n\t */\n\t@Prop() size: TextSizeOptions = 'base';\n\n\t/**\n\t * Wether to rotate the icon x degrees\n\t */\n\t@Prop() rotate: number = 0;\n\n\t/**\n\t * Wether to flip the icon horizontally or vertically\n\t */\n\t@Prop() flip: IconFlipOptions = 'none';\n\n\trender() {\n\t\tconst svg = icons[this.variant];\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={icon({\n\t\t\t\t\tflip: this.flip,\n\t\t\t\t\tsize: this.size,\n\t\t\t\t\ttransform: this.flip !== 'none' || this.rotate > 0 || this.rotate < 0,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\t'--tw-rotate': `${this.rotate}deg`,\n\t\t\t\t}}\n\t\t\t\tinnerHTML={svg}\n\t\t\t></Host>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/molecules/button/button.component.css

@@ -1 +1 @@
-*{box-sizing:border-box}.static{position:static!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-10{width:2.5rem!important}.w-6{width:1.5rem!important}.w-8{width:2rem!important}.w-inherit{width:inherit!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.cursor-wait{cursor:wait!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-lg{border-radius:.5rem!important}.rounded-e-lg{border-end-end-radius:.5rem!important;border-start-end-radius:.5rem!important}.rounded-s-lg{border-end-start-radius:.5rem!important;border-start-start-radius:.5rem!important}.border{border-width:1px!important}.border-b{border-bottom-width:1px!important}.border-black-teal\/10{border-color:rgba(3,42,36,.1)!important}.border-black-teal\/20{border-color:rgba(3,42,36,.2)!important}.border-supportive-lilac-800{--tw-border-opacity:1!important;border-color:rgb(189 140 255/var(--tw-border-opacity,1))!important}.border-teal{border-color:rgb(8 136 121/var(--tw-border-opacity,1))!important}.border-teal,.border-teal-100{--tw-border-opacity:1!important}.border-teal-100{border-color:rgb(206 231 228/var(--tw-border-opacity,1))!important}.bg-supportive-lilac{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac-100{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.leading-4{line-height:1rem!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-black-teal-100{--tw-text-opacity:1!important;color:rgb(205 212 211/var(--tw-text-opacity,1))!important}.text-dark-teal-100{--tw-text-opacity:1!important;color:rgb(204 220 218/var(--tw-text-opacity,1))!important}.text-dark-teal-100\/60{color:rgba(204,220,218,.6)!important}.text-teal{color:rgb(8 136 121/var(--tw-text-opacity,1))!important}.text-teal,.text-teal-100{--tw-text-opacity:1!important}.text-teal-100{color:rgb(206 231 228/var(--tw-text-opacity,1))!important}.underline{text-decoration-line:underline!important}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring-black-teal\/10{--tw-ring-color:rgba(3,42,36,.1)!important}.ring-supportive-lilac-100{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.drop-shadow-1{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.drop-shadow-1,.drop-shadow-supportive-lilac{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}.drop-shadow-supportive-lilac{--tw-drop-shadow:drop-shadow(0px 1px 1px 0px rgba(189,140,255,.2))!important}.hover\:bg-dark-teal:hover{--tw-bg-opacity:1!important;background-color:rgb(0 81 72/var(--tw-bg-opacity,1))!important}.hover\:bg-supportive-lilac-700:hover{--tw-bg-opacity:1!important;background-color:rgb(200 159 255/var(--tw-bg-opacity,1))!important}.hover\:bg-white-600:hover{--tw-bg-opacity:1!important;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.hover\:drop-shadow-1:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.hover\:drop-shadow-1:hover,.hover\:drop-shadow-2:hover{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}.hover\:drop-shadow-2:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.04)) drop-shadow(0 2px 2px rgba(0,2,2,.04)) drop-shadow(0 4px 4px rgba(0,2,2,.04))!important}.active\:border-supportive-lilac-800:active{--tw-border-opacity:1!important;border-color:rgb(189 140 255/var(--tw-border-opacity,1))!important}.active\:text-black-teal\/60:active{color:rgba(3,42,36,.6)!important}.active\:text-dark-teal-100\/60:active{color:rgba(204,220,218,.6)!important}.active\:text-teal-800:active{--tw-text-opacity:1!important;color:rgb(2 102 92/var(--tw-text-opacity,1))!important}.active\:ring:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\:ring-2:active,.active\:ring:active{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.active\:ring-2:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\:ring-black-teal\/10:active{--tw-ring-color:rgba(3,42,36,.1)!important}.active\:ring-supportive-lilac-100:active{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}
+*{box-sizing:border-box}.static{position:static!important}.block{display:block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.w-10{width:2.5rem!important}.w-6{width:1.5rem!important}.w-8{width:2rem!important}.w-inherit{width:inherit!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.cursor-wait{cursor:wait!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-lg{border-radius:.5rem!important}.rounded-e-lg{border-end-end-radius:.5rem!important;border-start-end-radius:.5rem!important}.rounded-s-lg{border-end-start-radius:.5rem!important;border-start-start-radius:.5rem!important}.border{border-width:1px!important}.border-b{border-bottom-width:1px!important}.border-black-teal\/10{border-color:rgba(3,42,36,.1)!important}.border-black-teal\/20{border-color:rgba(3,42,36,.2)!important}.border-supportive-lilac-800{--tw-border-opacity:1!important;border-color:rgb(189 140 255/var(--tw-border-opacity,1))!important}.border-teal{border-color:rgb(8 136 121/var(--tw-border-opacity,1))!important}.border-teal,.border-teal-100{--tw-border-opacity:1!important}.border-teal-100{border-color:rgb(206 231 228/var(--tw-border-opacity,1))!important}.bg-supportive-lilac{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.bg-supportive-lilac-100{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.p-2{padding:.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-semibold{font-weight:600!important}.leading-4{line-height:1rem!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-black-teal-100{--tw-text-opacity:1!important;color:rgb(205 212 211/var(--tw-text-opacity,1))!important}.text-dark-teal-100{--tw-text-opacity:1!important;color:rgb(204 220 218/var(--tw-text-opacity,1))!important}.text-dark-teal-100\/60{color:rgba(204,220,218,.6)!important}.text-teal{color:rgb(8 136 121/var(--tw-text-opacity,1))!important}.text-teal,.text-teal-100{--tw-text-opacity:1!important}.text-teal-100{color:rgb(206 231 228/var(--tw-text-opacity,1))!important}.underline{text-decoration-line:underline!important}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.ring-black-teal\/10{--tw-ring-color:rgba(3,42,36,.1)!important}.ring-supportive-lilac-100{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.drop-shadow-1{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.drop-shadow-1,.drop-shadow-supportive-lilac{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}.drop-shadow-supportive-lilac{--tw-drop-shadow:drop-shadow(0px 1px 1px 0px rgba(189,140,255,.2))!important}.hover\:bg-dark-teal:hover{--tw-bg-opacity:1!important;background-color:rgb(0 81 72/var(--tw-bg-opacity,1))!important}.hover\:bg-supportive-lilac-700:hover{--tw-bg-opacity:1!important;background-color:rgb(200 159 255/var(--tw-bg-opacity,1))!important}.hover\:bg-white-600:hover{--tw-bg-opacity:1!important;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.hover\:drop-shadow-1:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.08))!important}.hover\:drop-shadow-1:hover,.hover\:drop-shadow-2:hover{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}.hover\:drop-shadow-2:hover{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.04)) drop-shadow(0 2px 2px rgba(0,2,2,.04)) drop-shadow(0 4px 4px rgba(0,2,2,.04))!important}.active\:border-supportive-lilac-800:active{--tw-border-opacity:1!important;border-color:rgb(189 140 255/var(--tw-border-opacity,1))!important}.active\:text-black-teal\/60:active{color:rgba(3,42,36,.6)!important}.active\:text-dark-teal-100\/60:active{color:rgba(204,220,218,.6)!important}.active\:text-teal-800:active{--tw-text-opacity:1!important;color:rgb(2 102 92/var(--tw-text-opacity,1))!important}.active\:ring:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\:ring-2:active,.active\:ring:active{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.active\:ring-2:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important}.active\:ring-black-teal\/10:active{--tw-ring-color:rgba(3,42,36,.1)!important}.active\:ring-supportive-lilac-100:active{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}

package/dist/collection/components/molecules/button/button.component.js

@@ -9,9 +9,10 @@ const button = cva([
   variants: {
     variant: {
       primary: ['bg-supportive-lilac border-black-teal/20'],
-      secondary: ['bg-white border-black-teal/10'],
+      secondary: null,
       text: ['text-teal'],
       transparent: ['bg-transparent'],
+      dropdown: null,
     },
     active: {
       true: null,
@@ -48,40 +49,44 @@ const button = cva([
   compoundVariants: [
     // variants
     {
-      variant: ['primary', 'secondary'],
+      variant: ['secondary', 'dropdown'],
+      class: ['bg-white border-black-teal/10'],
+    },
+    {
+      variant: ['primary', 'secondary', 'dropdown'],
       disabled: false,
       class: 'border',
     },
     {
-      variant: ['primary', 'secondary'],
+      variant: ['primary', 'secondary', 'dropdown'],
       disabled: false,
       loading: false,
       class: 'active:border-supportive-lilac-800 active:ring active:ring-2',
     },
     {
-      variant: ['primary', 'secondary'],
+      variant: ['primary', 'secondary', 'dropdown'],
       disabled: false,
       loading: false,
       active: true,
       class: 'border-supportive-lilac-800 ring ring-2',
     },
     {
-      variant: ['primary', 'secondary', 'transparent'],
+      variant: ['primary', 'secondary', 'transparent', 'dropdown'],
       buttonGroupPosition: 'none',
       class: 'rounded-lg',
     },
     {
-      variant: ['primary', 'secondary', 'transparent'],
+      variant: ['primary', 'secondary', 'transparent', 'dropdown'],
       buttonGroupPosition: 'start',
       class: 'rounded-s-lg',
     },
     {
-      variant: ['primary', 'secondary', 'transparent'],
+      variant: ['primary', 'secondary', 'transparent', 'dropdown'],
       buttonGroupPosition: 'end',
       class: 'rounded-e-lg',
     },
     {
-      variant: ['primary', 'secondary'],
+      variant: ['primary', 'secondary', 'dropdown'],
       disabled: false,
       class: 'text-black-teal',
     },
@@ -104,18 +109,18 @@ const button = cva([
       class: 'ring-black-teal/10',
     },
     {
-      variant: 'secondary',
+      variant: ['secondary', 'dropdown'],
       disabled: true,
       class: 'border bg-white-600 text-black-teal-100',
     },
     {
-      variant: 'secondary',
+      variant: ['secondary', 'dropdown'],
       disabled: false,
       loading: false,
       class: 'drop-shadow-1 hover:drop-shadow-1 hover:bg-white-600 active:text-black-teal/60 active:ring-supportive-lilac-100',
     },
     {
-      variant: 'secondary',
+      variant: ['secondary', 'dropdown'],
       disabled: false,
       loading: false,
       active: true,
@@ -173,6 +178,12 @@ const button = cva([
       class: 'px-3',
     },
     {
+      variant: 'dropdown',
+      iconOnly: false,
+      class: 'p-2',
+    },
+    {
+      variant: ['primary', 'secondary', 'transparent', 'text'],
       iconOnly: false,
       class: 'py-1',
     },
@@ -239,7 +250,7 @@ export class Button {
       ? 'a'
       : 'button';
     const active = this.active || this._el.classList.contains('active');
-    return (h(Host, { class: 'p-button inline-block' }, h(VariableTag, { disabled: this.disabled, href: this.href, type: this.variant !== 'text' ? this.type : undefined, target: this.target, class: button({
+    return (h(Host, { class: 'p-button block' }, h(VariableTag, { disabled: this.disabled, href: this.href, type: this.variant !== 'text' ? this.type : undefined, target: this.target, class: button({
         variant: this.variant,
         size: this.size,
         underline: this.underline,
@@ -307,8 +318,8 @@ export class Button {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'primary' | 'secondary' | 'transparent' | 'text'",
-          "resolved": "\"primary\" | \"secondary\" | \"text\" | \"transparent\"",
+          "original": "| 'primary'\n\t\t| 'secondary'\n\t\t| 'transparent'\n\t\t| 'text'\n\t\t| 'dropdown'",
+          "resolved": "\"dropdown\" | \"primary\" | \"secondary\" | \"text\" | \"transparent\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/molecules/button/button.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/button/button.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tElement,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\nimport { cva } from 'class-variance-authority';\n\nconst button = cva(\n\t[\n\t\t'group',\n\t\t'font-semibold leading-4',\n\t\t'flex items-center justify-center gap-2',\n\t\t'cursor-pointer',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tprimary: ['bg-supportive-lilac border-black-teal/20'],\n\t\t\t\tsecondary: ['bg-white border-black-teal/10'],\n\t\t\t\ttext: ['text-teal'],\n\t\t\t\ttransparent: ['bg-transparent'],\n\t\t\t},\n\t\t\tactive: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tloading: {\n\t\t\t\ttrue: 'cursor-wait',\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tsm: ['text-xs h-6'],\n\t\t\t\tbase: ['text-sm h-8'],\n\t\t\t\tlg: ['text-base h-10'],\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\ttrue: 'cursor-not-allowed',\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tunderline: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tbuttonGroupPosition: {\n\t\t\t\tnone: null,\n\t\t\t\tstart: null,\n\t\t\t\tcenter: null,\n\t\t\t\tend: null,\n\t\t\t},\n\t\t\ticonOnly: {\n\t\t\t\ttrue: 'justify-center',\n\t\t\t\tfalse: 'w-inherit py-1',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t// variants\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary'],\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'border',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'active:border-supportive-lilac-800 active:ring active:ring-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'border-supportive-lilac-800 ring ring-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tbuttonGroupPosition: 'none',\n\t\t\t\tclass: 'rounded-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tbuttonGroupPosition: 'start',\n\t\t\t\tclass: 'rounded-s-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tbuttonGroupPosition: 'end',\n\t\t\t\tclass: 'rounded-e-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary'],\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-black-teal',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'bg-supportive-lilac-100 text-black-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass:\n\t\t\t\t\t'drop-shadow-supportive-lilac hover:drop-shadow-2 hover:bg-supportive-lilac-700 active:text-black-teal/60 active:ring-black-teal/10',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'ring-black-teal/10',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'secondary',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'border bg-white-600 text-black-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'secondary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass:\n\t\t\t\t\t'drop-shadow-1 hover:drop-shadow-1 hover:bg-white-600 active:text-black-teal/60 active:ring-supportive-lilac-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'secondary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'ring-supportive-lilac-100',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tunderline: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'border-b border-teal',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tunderline: true,\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'border-b border-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'active:text-teal-800',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-dark-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'hover:bg-dark-teal active:text-dark-teal-100/60',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-dark-teal-100/60',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tsize: ['base', 'sm'],\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'px-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tsize: 'lg',\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'px-3',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'py-1',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tsize: 'sm',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-6',\n\t\t\t},\n\t\t\t{\n\t\t\t\tsize: 'base',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-8',\n\t\t\t},\n\t\t\t{\n\t\t\t\tsize: 'lg',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-10',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst icon = cva([], {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: 'text-sm',\n\t\t\tbase: 'text-base',\n\t\t\tlg: 'text-base',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-button',\n\tstyleUrl: 'button.component.scss',\n})\nexport class Button {\n\t/**\n\t * The type of the button\n\t */\n\t@Prop() as: 'a' | 'button' = 'button';\n\n\t/**\n\t * The variant of the button\n\t */\n\t@Prop() variant: 'primary' | 'secondary' | 'transparent' | 'text' = 'primary';\n\n\t/**\n\t * Wether to force an active state\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * Wether the text variant has underline\n\t */\n\t@Prop() underline: boolean = true;\n\n\t/**\n\t * Href in case of \"text\" version\n\t */\n\t@Prop() href: string;\n\n\t/**\n\t * Target in case of \"text\" version\n\t */\n\t@Prop() target: string;\n\n\t/**\n\t * The size of the button\n\t */\n\t@Prop() size: 'sm' | 'base' | 'lg' = 'base';\n\n\t/**\n\t * The type of the button\n\t */\n\t@Prop() type: 'button' | 'submit' = 'button';\n\n\t/**\n\t * Wether to show a loader or not\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * Wether to show a chevron or not\n\t */\n\t@Prop() chevron: boolean | 'up' | 'down' = false;\n\n\t/**\n\t * Chevron position\n\t */\n\t@Prop() chevronPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Wether the button is disabled\n\t */\n\t@Prop() disabled: boolean = false;\n\n\t/**\n\t * Icon to show on the button\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t * Wether the button is icon only\n\t */\n\t@Prop() iconOnly: boolean = false;\n\n\t/**\n\t * Icon position\n\t */\n\t@Prop() iconPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Icon flip\n\t */\n\t@Prop() iconFlip: IconFlipOptions;\n\n\t/**\n\t * Icon rotate\n\t */\n\t@Prop() iconRotate: RotateOptions;\n\n\t/**\n\t * Wether the button should inherit text styles\n\t */\n\t@Prop() inheritText: boolean = false;\n\n\t/**\n\t * Position of the button in the button group, mostly un-used if not in a group\n\t */\n\t@Prop() buttonGroupPosition: 'start' | 'center' | 'end' | 'none' = 'none';\n\n\t/**\n\t * Button click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tonClick: EventEmitter<MouseEvent>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\trender() {\n\t\tlet loaderColor: 'white' | 'storm' | 'indigo' = 'white';\n\t\tswitch (this.variant) {\n\t\t\tcase 'secondary':\n\t\t\t\tloaderColor = 'storm';\n\t\t\t\tbreak;\n\t\t\tcase 'text':\n\t\t\t\tloaderColor = 'indigo';\n\t\t\t\tbreak;\n\t\t}\n\n\t\tconst VariableTag =\n\t\t\tthis.variant === 'text' || this.href?.length || this.as === 'a'\n\t\t\t\t? 'a'\n\t\t\t\t: 'button';\n\n\t\tconst active = this.active || this._el.classList.contains('active');\n\n\t\treturn (\n\t\t\t<Host class='p-button inline-block'>\n\t\t\t\t<VariableTag\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttype={this.variant !== 'text' ? this.type : undefined}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t\tclass={button({\n\t\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\t\tsize: this.size,\n\t\t\t\t\t\tunderline: this.underline,\n\t\t\t\t\t\tloading: this.loading,\n\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\tbuttonGroupPosition: this.buttonGroupPosition,\n\t\t\t\t\t\ticonOnly: this.iconOnly,\n\t\t\t\t\t\tactive,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{this.chevron && this.chevronPosition === 'start' && (\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tvariant='caret'\n\t\t\t\t\t\t\trotate={this.chevron === 'up' ? 180 : 0}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\tthis.iconPosition === 'start' &&\n\t\t\t\t\t\t!(this.iconOnly && this.loading) &&\n\t\t\t\t\t\tthis._getIcon()}\n\n\t\t\t\t\t<slot />\n\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\tthis.iconPosition === 'end' &&\n\t\t\t\t\t\t!this.loading &&\n\t\t\t\t\t\t!this.chevron &&\n\t\t\t\t\t\tthis._getIcon()}\n\n\t\t\t\t\t{this.chevron && !this.loading && this.chevronPosition === 'end' && (\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tvariant='caret'\n\t\t\t\t\t\t\trotate={this.chevron === 'up' ? 180 : 0}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.loading && <p-loader color={loaderColor} />}\n\t\t\t\t</VariableTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('click', { capture: true })\n\thandleClick(ev: MouseEvent) {\n\t\tif (this.loading || this.disabled) {\n\t\t\tev.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tthis.onClick.emit(ev);\n\t}\n\n\tprivate _getIcon() {\n\t\tif (!this.icon) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn (\n\t\t\t<p-icon\n\t\t\t\tclass={icon({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t})}\n\t\t\t\tvariant={this.icon}\n\t\t\t\tflip={this.iconFlip}\n\t\t\t\trotate={this.iconRotate}\n\t\t\t/>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/button/button.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tElement,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';\nimport { cva } from 'class-variance-authority';\n\nconst button = cva(\n\t[\n\t\t'group',\n\t\t'font-semibold leading-4',\n\t\t'flex items-center justify-center gap-2',\n\t\t'cursor-pointer',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tprimary: ['bg-supportive-lilac border-black-teal/20'],\n\t\t\t\tsecondary: null,\n\t\t\t\ttext: ['text-teal'],\n\t\t\t\ttransparent: ['bg-transparent'],\n\t\t\t\tdropdown: null,\n\t\t\t},\n\t\t\tactive: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tloading: {\n\t\t\t\ttrue: 'cursor-wait',\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tsm: ['text-xs h-6'],\n\t\t\t\tbase: ['text-sm h-8'],\n\t\t\t\tlg: ['text-base h-10'],\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\ttrue: 'cursor-not-allowed',\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tunderline: {\n\t\t\t\ttrue: null,\n\t\t\t\tfalse: null,\n\t\t\t},\n\t\t\tbuttonGroupPosition: {\n\t\t\t\tnone: null,\n\t\t\t\tstart: null,\n\t\t\t\tcenter: null,\n\t\t\t\tend: null,\n\t\t\t},\n\t\t\ticonOnly: {\n\t\t\t\ttrue: 'justify-center',\n\t\t\t\tfalse: 'w-inherit py-1',\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t// variants\n\t\t\t{\n\t\t\t\tvariant: ['secondary', 'dropdown'],\n\t\t\t\tclass: ['bg-white border-black-teal/10'],\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'border',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'active:border-supportive-lilac-800 active:ring active:ring-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'border-supportive-lilac-800 ring ring-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent', 'dropdown'],\n\t\t\t\tbuttonGroupPosition: 'none',\n\t\t\t\tclass: 'rounded-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent', 'dropdown'],\n\t\t\t\tbuttonGroupPosition: 'start',\n\t\t\t\tclass: 'rounded-s-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent', 'dropdown'],\n\t\t\t\tbuttonGroupPosition: 'end',\n\t\t\t\tclass: 'rounded-e-lg',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-black-teal',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'bg-supportive-lilac-100 text-black-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass:\n\t\t\t\t\t'drop-shadow-supportive-lilac hover:drop-shadow-2 hover:bg-supportive-lilac-700 active:text-black-teal/60 active:ring-black-teal/10',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'primary',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'ring-black-teal/10',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['secondary', 'dropdown'],\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'border bg-white-600 text-black-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass:\n\t\t\t\t\t'drop-shadow-1 hover:drop-shadow-1 hover:bg-white-600 active:text-black-teal/60 active:ring-supportive-lilac-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['secondary', 'dropdown'],\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tactive: true,\n\t\t\t\tclass: 'ring-supportive-lilac-100',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tunderline: true,\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'border-b border-teal',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tunderline: true,\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'border-b border-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'text',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'active:text-teal-800',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: false,\n\t\t\t\tclass: 'text-dark-teal-100',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: false,\n\t\t\t\tloading: false,\n\t\t\t\tclass: 'hover:bg-dark-teal active:text-dark-teal-100/60',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'transparent',\n\t\t\t\tdisabled: true,\n\t\t\t\tclass: 'text-dark-teal-100/60',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tsize: ['base', 'sm'],\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'px-2',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent'],\n\t\t\t\tsize: 'lg',\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'px-3',\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: 'dropdown',\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'p-2',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tvariant: ['primary', 'secondary', 'transparent', 'text'],\n\t\t\t\ticonOnly: false,\n\t\t\t\tclass: 'py-1',\n\t\t\t},\n\n\t\t\t{\n\t\t\t\tsize: 'sm',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-6',\n\t\t\t},\n\t\t\t{\n\t\t\t\tsize: 'base',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-8',\n\t\t\t},\n\t\t\t{\n\t\t\t\tsize: 'lg',\n\t\t\t\ticonOnly: true,\n\t\t\t\tclass: 'w-10',\n\t\t\t},\n\t\t],\n\t}\n);\n\nconst icon = cva([], {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: 'text-sm',\n\t\t\tbase: 'text-base',\n\t\t\tlg: 'text-base',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-button',\n\tstyleUrl: 'button.component.scss',\n})\nexport class Button {\n\t/**\n\t * The type of the button\n\t */\n\t@Prop() as: 'a' | 'button' = 'button';\n\n\t/**\n\t * The variant of the button\n\t */\n\t@Prop() variant:\n\t\t| 'primary'\n\t\t| 'secondary'\n\t\t| 'transparent'\n\t\t| 'text'\n\t\t| 'dropdown' = 'primary';\n\n\t/**\n\t * Wether to force an active state\n\t */\n\t@Prop() active: boolean = false;\n\n\t/**\n\t * Wether the text variant has underline\n\t */\n\t@Prop() underline: boolean = true;\n\n\t/**\n\t * Href in case of \"text\" version\n\t */\n\t@Prop() href: string;\n\n\t/**\n\t * Target in case of \"text\" version\n\t */\n\t@Prop() target: string;\n\n\t/**\n\t * The size of the button\n\t */\n\t@Prop() size: 'sm' | 'base' | 'lg' = 'base';\n\n\t/**\n\t * The type of the button\n\t */\n\t@Prop() type: 'button' | 'submit' = 'button';\n\n\t/**\n\t * Wether to show a loader or not\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * Wether to show a chevron or not\n\t */\n\t@Prop() chevron: boolean | 'up' | 'down' = false;\n\n\t/**\n\t * Chevron position\n\t */\n\t@Prop() chevronPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Wether the button is disabled\n\t */\n\t@Prop() disabled: boolean = false;\n\n\t/**\n\t * Icon to show on the button\n\t */\n\t@Prop() icon: IconVariant;\n\n\t/**\n\t * Wether the button is icon only\n\t */\n\t@Prop() iconOnly: boolean = false;\n\n\t/**\n\t * Icon position\n\t */\n\t@Prop() iconPosition: 'start' | 'end' = 'end';\n\n\t/**\n\t * Icon flip\n\t */\n\t@Prop() iconFlip: IconFlipOptions;\n\n\t/**\n\t * Icon rotate\n\t */\n\t@Prop() iconRotate: RotateOptions;\n\n\t/**\n\t * Wether the button should inherit text styles\n\t */\n\t@Prop() inheritText: boolean = false;\n\n\t/**\n\t * Position of the button in the button group, mostly un-used if not in a group\n\t */\n\t@Prop() buttonGroupPosition: 'start' | 'center' | 'end' | 'none' = 'none';\n\n\t/**\n\t * Button click event\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tonClick: EventEmitter<MouseEvent>;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\trender() {\n\t\tlet loaderColor: 'white' | 'storm' | 'indigo' = 'white';\n\t\tswitch (this.variant) {\n\t\t\tcase 'secondary':\n\t\t\t\tloaderColor = 'storm';\n\t\t\t\tbreak;\n\t\t\tcase 'text':\n\t\t\t\tloaderColor = 'indigo';\n\t\t\t\tbreak;\n\t\t}\n\n\t\tconst VariableTag =\n\t\t\tthis.variant === 'text' || this.href?.length || this.as === 'a'\n\t\t\t\t? 'a'\n\t\t\t\t: 'button';\n\n\t\tconst active = this.active || this._el.classList.contains('active');\n\n\t\treturn (\n\t\t\t<Host class='p-button block'>\n\t\t\t\t<VariableTag\n\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\thref={this.href}\n\t\t\t\t\ttype={this.variant !== 'text' ? this.type : undefined}\n\t\t\t\t\ttarget={this.target}\n\t\t\t\t\tclass={button({\n\t\t\t\t\t\tvariant: this.variant,\n\t\t\t\t\t\tsize: this.size,\n\t\t\t\t\t\tunderline: this.underline,\n\t\t\t\t\t\tloading: this.loading,\n\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\tbuttonGroupPosition: this.buttonGroupPosition,\n\t\t\t\t\t\ticonOnly: this.iconOnly,\n\t\t\t\t\t\tactive,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{this.chevron && this.chevronPosition === 'start' && (\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tvariant='caret'\n\t\t\t\t\t\t\trotate={this.chevron === 'up' ? 180 : 0}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\tthis.iconPosition === 'start' &&\n\t\t\t\t\t\t!(this.iconOnly && this.loading) &&\n\t\t\t\t\t\tthis._getIcon()}\n\n\t\t\t\t\t<slot />\n\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\tthis.iconPosition === 'end' &&\n\t\t\t\t\t\t!this.loading &&\n\t\t\t\t\t\t!this.chevron &&\n\t\t\t\t\t\tthis._getIcon()}\n\n\t\t\t\t\t{this.chevron && !this.loading && this.chevronPosition === 'end' && (\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tvariant='caret'\n\t\t\t\t\t\t\trotate={this.chevron === 'up' ? 180 : 0}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.loading && <p-loader color={loaderColor} />}\n\t\t\t\t</VariableTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('click', { capture: true })\n\thandleClick(ev: MouseEvent) {\n\t\tif (this.loading || this.disabled) {\n\t\t\tev.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tthis.onClick.emit(ev);\n\t}\n\n\tprivate _getIcon() {\n\t\tif (!this.icon) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn (\n\t\t\t<p-icon\n\t\t\t\tclass={icon({\n\t\t\t\t\tsize: this.size,\n\t\t\t\t})}\n\t\t\t\tvariant={this.icon}\n\t\t\t\tflip={this.iconFlip}\n\t\t\t\trotate={this.iconRotate}\n\t\t\t/>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/molecules/profile/profile.component.css

@@ -1 +1 @@
-*{box-sizing:border-box}.static{position:static!important}.absolute{position:absolute!important}.block{display:block!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.w-full{width:100%!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-medium{font-weight:500!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}
+*{box-sizing:border-box}.static{position:static!important}.absolute{position:absolute!important}.block{display:block!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.w-full{width:100%!important}.w-inherit{width:inherit!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.py-1{padding-bottom:.25rem!important;padding-top:.25rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.font-medium{font-weight:500!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}

package/dist/collection/components/molecules/profile/profile.component.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { cva } from "class-variance-authority";
-const profileContent = cva(['flex gap-2 items-center w-full'], {
+const profileContent = cva(['flex gap-2 items-center flex-1 min-w-0'], {
   variants: {
     dropdown: {
       false: 'h-10 py-1',
@@ -17,14 +17,24 @@ export class Profile {
   componentWillLoad() {
     this._hasDropdownSlot = !!this._el.querySelector(':scope > [slot="dropdown"]');
   }
+  componentWillRender() {
+    this._updateAvatar();
+  }
   render() {
     const content = this._getContent();
-    return (h(Host, { class: 'p-profile inline-block' }, this._hasDropdownSlot ? (h("p-dropdown", { class: 'block', strategy: 'absolute', placement: this.dropdownLocation, applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, h("p-button", { variant: 'secondary', chevron: this._dropdownOpen ? 'up' : 'down', active: this._dropdownOpen, slot: 'trigger', size: 'lg' }, content), h("div", { slot: 'items' }, h("slot", { name: 'dropdown' })))) : (content)));
+    return (h(Host, { class: 'p-profile inline-block w-inherit' }, this._hasDropdownSlot ? (h("p-dropdown", { class: 'block', strategy: 'absolute', placement: this.dropdownLocation, applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, h("p-button", { variant: 'dropdown', chevron: this._dropdownOpen ? 'up' : 'down', active: this._dropdownOpen, slot: 'trigger', size: 'lg', class: 'w-full px-2' }, content), h("div", { slot: 'items' }, h("slot", { name: 'dropdown' })))) : (content)));
   }
   _getContent() {
     return (h("div", { class: profileContent({
         dropdown: this._hasDropdownSlot,
-      }) }, h("slot", { name: 'avatar' }), h("div", { class: 'flex flex-1 flex-col' }, h("p", { class: 'font-sm font-medium' }, h("slot", { name: 'title' })), h("p", { class: 'text-xs text-black-teal-300' }, h("slot", { name: 'subtitle' }))), h("slot", { name: 'post-title' })));
+      }) }, h("slot", { name: 'avatar' }), h("div", { class: 'flex min-w-0 flex-1 flex-col' }, h("p", { class: 'overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium' }, h("slot", { name: 'title' })), h("p", { class: 'overflow-hidden text-ellipsis whitespace-nowrap text-xs text-black-teal-300' }, h("slot", { name: 'subtitle' }))), h("slot", { name: 'post-title' })));
+  }
+  _updateAvatar() {
+    const avatar = this._el.querySelector('p-avatar[slot="avatar"]');
+    if (!avatar) {
+      return;
+    }
+    avatar.size = this._hasDropdownSlot ? 'sm' : avatar.size;
   }
   static get is() { return "p-profile"; }
   static get originalStyleUrls() {

package/dist/collection/components/molecules/profile/profile.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"profile.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/profile/profile.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,cAAc,GAAG,GAAG,CAAC,CAAC,gCAAgC,CAAC,EAAE;EAC9D,QAAQ,EAAE;IACT,QAAQ,EAAE;MACT,KAAK,EAAE,WAAW;MAClB,IAAI,EAAE,IAAI;KACV;GACD;CACD,CAAC,CAAC;AAMH,MAAM,OAAO,OAAO;;4BAIkC,YAAY;yBAOhC,KAAK;4BACF,KAAK;;EAEzC,iBAAiB;IAChB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC/C,4BAA4B,CAC5B,CAAC;EACH,CAAC;EAED,MAAM;IACL,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACnC,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAC,wBAAwB,IAClC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CACxB,kBACC,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,UAAU,EACnB,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,cAAc,EAAE,IAAI,EACpB,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,MAAM,CAAC;MAEhD,gBACC,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAC3C,MAAM,EAAE,IAAI,CAAC,aAAa,EAC1B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,IAER,OAAO,CACE;MACX,WAAK,IAAI,EAAC,OAAO;QAChB,YAAM,IAAI,EAAC,UAAU,GAAG,CACnB,CACM,CACb,CAAC,CAAC,CAAC,CACH,OAAO,CACP,CACK,CACP,CAAC;EACH,CAAC;EAEO,WAAW;IAClB,OAAO,CACN,WACC,KAAK,EAAE,cAAc,CAAC;QACrB,QAAQ,EAAE,IAAI,CAAC,gBAAgB;OAC/B,CAAC;MAEF,YAAM,IAAI,EAAC,QAAQ,GAAG;MACtB,WAAK,KAAK,EAAC,sBAAsB;QAChC,SAAG,KAAK,EAAC,qBAAqB;UAC7B,YAAM,IAAI,EAAC,OAAO,GAAG,CAClB;QACJ,SAAG,KAAK,EAAC,6BAA6B;UACrC,YAAM,IAAI,EAAC,UAAU,GAAG,CACrB,CACC;MAEN,YAAM,IAAI,EAAC,YAAY,GAAG,CACrB,CACN,CAAC;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst profileContent = cva(['flex gap-2 items-center w-full'], {\n\tvariants: {\n\t\tdropdown: {\n\t\t\tfalse: 'h-10 py-1',\n\t\t\ttrue: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-profile',\n\tstyleUrl: 'profile.component.scss',\n})\nexport class Profile {\n\t/**\n\t * The position of the dropdown\n\t */\n\t@Prop() dropdownLocation: 'top-end' | 'bottom-end' = 'bottom-end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _dropdownOpen = false;\n\t@State() private _hasDropdownSlot = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasDropdownSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"dropdown\"]'\n\t\t);\n\t}\n\n\trender() {\n\t\tconst content = this._getContent();\n\t\treturn (\n\t\t\t<Host class='p-profile inline-block'>\n\t\t\t\t{this._hasDropdownSlot ? (\n\t\t\t\t\t<p-dropdown\n\t\t\t\t\t\tclass='block'\n\t\t\t\t\t\tstrategy='absolute'\n\t\t\t\t\t\tplacement={this.dropdownLocation}\n\t\t\t\t\t\tapplyFullWidth={true}\n\t\t\t\t\t\tapplyMaxWidth={false}\n\t\t\t\t\t\tonIsOpen={ev => (this._dropdownOpen = ev.detail)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\t\tchevron={this._dropdownOpen ? 'up' : 'down'}\n\t\t\t\t\t\t\tactive={this._dropdownOpen}\n\t\t\t\t\t\t\tslot='trigger'\n\t\t\t\t\t\t\tsize='lg'\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t<div slot='items'>\n\t\t\t\t\t\t\t<slot name='dropdown' />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</p-dropdown>\n\t\t\t\t) : (\n\t\t\t\t\tcontent\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _getContent() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={profileContent({\n\t\t\t\t\tdropdown: this._hasDropdownSlot,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot name='avatar' />\n\t\t\t\t<div class='flex flex-1 flex-col'>\n\t\t\t\t\t<p class='font-sm font-medium'>\n\t\t\t\t\t\t<slot name='title' />\n\t\t\t\t\t</p>\n\t\t\t\t\t<p class='text-xs text-black-teal-300'>\n\t\t\t\t\t\t<slot name='subtitle' />\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t<slot name='post-title' />\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"profile.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/profile/profile.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,cAAc,GAAG,GAAG,CAAC,CAAC,wCAAwC,CAAC,EAAE;EACtE,QAAQ,EAAE;IACT,QAAQ,EAAE;MACT,KAAK,EAAE,WAAW;MAClB,IAAI,EAAE,IAAI;KACV;GACD;CACD,CAAC,CAAC;AAMH,MAAM,OAAO,OAAO;;4BAIkC,YAAY;yBAOhC,KAAK;4BACF,KAAK;;EAEzC,iBAAiB;IAChB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAC/C,4BAA4B,CAC5B,CAAC;EACH,CAAC;EAED,mBAAmB;IAClB,IAAI,CAAC,aAAa,EAAE,CAAC;EACtB,CAAC;EAED,MAAM;IACL,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACnC,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAC,kCAAkC,IAC5C,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CACxB,kBACC,KAAK,EAAC,OAAO,EACb,QAAQ,EAAC,UAAU,EACnB,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,cAAc,EAAE,IAAI,EACpB,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,MAAM,CAAC;MAEhD,gBACC,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAC3C,MAAM,EAAE,IAAI,CAAC,aAAa,EAC1B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,aAAa,IAElB,OAAO,CACE;MACX,WAAK,IAAI,EAAC,OAAO;QAChB,YAAM,IAAI,EAAC,UAAU,GAAG,CACnB,CACM,CACb,CAAC,CAAC,CAAC,CACH,OAAO,CACP,CACK,CACP,CAAC;EACH,CAAC;EAEO,WAAW;IAClB,OAAO,CACN,WACC,KAAK,EAAE,cAAc,CAAC;QACrB,QAAQ,EAAE,IAAI,CAAC,gBAAgB;OAC/B,CAAC;MAEF,YAAM,IAAI,EAAC,QAAQ,GAAG;MACtB,WAAK,KAAK,EAAC,8BAA8B;QACxC,SAAG,KAAK,EAAC,qEAAqE;UAC7E,YAAM,IAAI,EAAC,OAAO,GAAG,CAClB;QACJ,SAAG,KAAK,EAAC,6EAA6E;UACrF,YAAM,IAAI,EAAC,UAAU,GAAG,CACrB,CACC;MAEN,YAAM,IAAI,EAAC,YAAY,GAAG,CACrB,CACN,CAAC;EACH,CAAC;EAEO,aAAa;IACpB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CACpC,yBAAyB,CACH,CAAC;IAExB,IAAI,CAAC,MAAM,EAAE;MACZ,OAAO;KACP;IAED,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;EAC1D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\nconst profileContent = cva(['flex gap-2 items-center flex-1 min-w-0'], {\n\tvariants: {\n\t\tdropdown: {\n\t\t\tfalse: 'h-10 py-1',\n\t\t\ttrue: null,\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-profile',\n\tstyleUrl: 'profile.component.scss',\n})\nexport class Profile {\n\t/**\n\t * The position of the dropdown\n\t */\n\t@Prop() dropdownLocation: 'top-end' | 'bottom-end' = 'bottom-end';\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t@State() private _dropdownOpen = false;\n\t@State() private _hasDropdownSlot = false;\n\n\tcomponentWillLoad() {\n\t\tthis._hasDropdownSlot = !!this._el.querySelector(\n\t\t\t':scope > [slot=\"dropdown\"]'\n\t\t);\n\t}\n\n\tcomponentWillRender() {\n\t\tthis._updateAvatar();\n\t}\n\n\trender() {\n\t\tconst content = this._getContent();\n\t\treturn (\n\t\t\t<Host class='p-profile inline-block w-inherit'>\n\t\t\t\t{this._hasDropdownSlot ? (\n\t\t\t\t\t<p-dropdown\n\t\t\t\t\t\tclass='block'\n\t\t\t\t\t\tstrategy='absolute'\n\t\t\t\t\t\tplacement={this.dropdownLocation}\n\t\t\t\t\t\tapplyFullWidth={true}\n\t\t\t\t\t\tapplyMaxWidth={false}\n\t\t\t\t\t\tonIsOpen={ev => (this._dropdownOpen = ev.detail)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\tvariant='dropdown'\n\t\t\t\t\t\t\tchevron={this._dropdownOpen ? 'up' : 'down'}\n\t\t\t\t\t\t\tactive={this._dropdownOpen}\n\t\t\t\t\t\t\tslot='trigger'\n\t\t\t\t\t\t\tsize='lg'\n\t\t\t\t\t\t\tclass='w-full px-2'\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</p-button>\n\t\t\t\t\t\t<div slot='items'>\n\t\t\t\t\t\t\t<slot name='dropdown' />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</p-dropdown>\n\t\t\t\t) : (\n\t\t\t\t\tcontent\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate _getContent() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={profileContent({\n\t\t\t\t\tdropdown: this._hasDropdownSlot,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<slot name='avatar' />\n\t\t\t\t<div class='flex min-w-0 flex-1 flex-col'>\n\t\t\t\t\t<p class='overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium'>\n\t\t\t\t\t\t<slot name='title' />\n\t\t\t\t\t</p>\n\t\t\t\t\t<p class='overflow-hidden text-ellipsis whitespace-nowrap text-xs text-black-teal-300'>\n\t\t\t\t\t\t<slot name='subtitle' />\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t<slot name='post-title' />\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate _updateAvatar() {\n\t\tconst avatar = this._el.querySelector(\n\t\t\t'p-avatar[slot=\"avatar\"]'\n\t\t) as HTMLPAvatarElement;\n\n\t\tif (!avatar) {\n\t\t\treturn;\n\t\t}\n\n\t\tavatar.size = this._hasDropdownSlot ? 'sm' : avatar.size;\n\t}\n}\n"]}