@paperless/core 3.5.1 → 3.6.1

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

@@ -4,7 +4,7 @@ var index = require('./index-BGtpSJv_.js');
 var themedHost_component = require('./themed-host.component-BeeT9Ite.js');
 require('./state-DM8SZBNO.js');
 
-const rangeComponentCss = () => `.m-0{margin:0}.mt-\\[calc\\(\\(0\\.5rem-1px\\)\\*-1\\)\\]{margin-top:calc(-.5rem + 1px)}.h-4{height:1rem}.h-6{height:1.5rem}.h-\\[2px\\]{height:2px}.w-4{width:1rem}.w-full{width:100%}.appearance-none{appearance:none}.rounded-full{border-radius:9999px}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))}*{box-sizing:border-box}:host{input{appearance:none;background-color:transparent;height:1.5rem;margin:0;width:100%}input::-webkit-slider-runnable-track{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1));height:2px}input:where(:host([data-theme=dark]),:host([data-theme=dark]) *)::-webkit-slider-runnable-track{background-color:hsla(0,0%,100%,.15)}input:where([data-theme=dark],[data-theme=dark] *)::-webkit-slider-runnable-track{background-color:hsla(0,0%,100%,.15)}input::-moz-range-track{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1));height:2px}input:where(:host([data-theme=dark]),:host([data-theme=dark]) *)::-moz-range-track{background-color:hsla(0,0%,100%,.15)}input:where([data-theme=dark],[data-theme=dark] *)::-moz-range-track{background-color:hsla(0,0%,100%,.15)}input::-webkit-slider-thumb{--tw-bg-opacity:1;appearance:none;background-color:rgb(82 138 250/var(--tw-bg-opacity,1));border-radius:9999px;border-width:0;height:1rem;margin-top:calc(-.5rem + 1px);width:1rem}input::-webkit-slider-thumb:hover{cursor:grab}input::-webkit-slider-thumb:active,input::-webkit-slider-thumb:hover{--tw-bg-opacity:1;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))}input::-webkit-slider-thumb:active{cursor:grabbing}input::-moz-range-thumb{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1));border-radius:9999px;border-width:0;height:1rem;width:1rem}input::-moz-range-thumb:hover{cursor:grab}input::-moz-range-thumb:active,input::-moz-range-thumb:hover{--tw-bg-opacity:1;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))}input::-moz-range-thumb:active{cursor:grabbing}}.hover\\:cursor-grab:hover{cursor:grab}.hover\\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))}.active\\:cursor-grabbing:active{cursor:grabbing}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-1\\/2{top:50%}.flex{display:flex}.w-inherit{width:inherit}.flex-1{flex:1 1 0%}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-1\\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.gap-2{gap:.5rem}.text-storm-300{--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.dark\\:text-hurricane-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\\:text-hurricane-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}`;
+const rangeComponentCss = () => `.m-0{margin:0}.mt-\\[calc\\(\\(0\\.5rem-1px\\)\\*-1\\)\\]{margin-top:calc(-.5rem + 1px)}.h-4{height:1rem}.h-6{height:1.5rem}.h-\\[2px\\]{height:2px}.w-4{width:1rem}.w-full{width:100%}.appearance-none{appearance:none}.rounded-full{border-radius:9999px}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))}*{box-sizing:border-box}:host{input{appearance:none;background-color:transparent;height:1.5rem;margin:0;width:100%}input::-webkit-slider-runnable-track{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1));height:2px}input:where(:host([data-theme=dark]),:host([data-theme=dark]) *)::-webkit-slider-runnable-track{background-color:hsla(0,0%,100%,.15)}input:where([data-theme=dark],[data-theme=dark] *)::-webkit-slider-runnable-track{background-color:hsla(0,0%,100%,.15)}input::-moz-range-track{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1));height:2px}input:where(:host([data-theme=dark]),:host([data-theme=dark]) *)::-moz-range-track{background-color:hsla(0,0%,100%,.15)}input:where([data-theme=dark],[data-theme=dark] *)::-moz-range-track{background-color:hsla(0,0%,100%,.15)}input::-webkit-slider-thumb{--tw-bg-opacity:1;appearance:none;background-color:rgb(82 138 250/var(--tw-bg-opacity,1));border-radius:9999px;border-width:0;height:1rem;margin-top:calc(-.5rem + 1px);width:1rem}input::-webkit-slider-thumb:hover{cursor:grab}input::-webkit-slider-thumb:active,input::-webkit-slider-thumb:hover{--tw-bg-opacity:1;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))}input::-webkit-slider-thumb:active{cursor:grabbing}input::-moz-range-thumb{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1));border-radius:9999px;border-width:0;height:1rem;width:1rem}input::-moz-range-thumb:hover{cursor:grab}input::-moz-range-thumb:active,input::-moz-range-thumb:hover{--tw-bg-opacity:1;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))}input::-moz-range-thumb:active{cursor:grabbing}}.hover\\:cursor-grab:hover{cursor:grab}.hover\\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(47 111 240/var(--tw-bg-opacity,1))}.active\\:cursor-grabbing:active{cursor:grabbing}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-1\\/2{top:50%}.z-\\[1\\]{z-index:1}.flex{display:flex}.w-inherit{width:inherit}.flex-1{flex:1 1 0%}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-1\\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.gap-2{gap:.5rem}.text-storm-300{--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.dark\\:text-hurricane-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\\:text-hurricane-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}`;
 
 const Range = class {
     constructor(hostRef) {
@@ -37,9 +37,9 @@ const Range = class {
                 const value = ev.target.value;
                 this.value = Number.parseFloat(value);
                 this.valueChange.emit(value);
-            } }), index.h("div", { key: '0bea7f03b87ab00d74780796f00f3eda90bc1b96', class: '\n         z-1 absolute left-0 top-1/2 h-[2px] -translate-y-1/2 transform\n         bg-indigo-600\n       ', style: {
+            } }), index.h("div", { key: 'aa3025e342179b0b046835aba388737e4d723986', class: '\n         absolute left-0 top-1/2 z-[1] h-[2px] -translate-y-1/2 transform\n         bg-indigo-600\n       ', style: {
                 width: `calc(${percentage}% - (1rem * ${percentage} / 100))`,
-            } })), index.h("p-icon", { key: '8136e15955e461ec30c3bb8d83cabbd80c8089f2', variant: 'plus' }))));
+            } })), index.h("p-icon", { key: '7b7c6f55fe81458e96f8edf67f1fc47a028d707b', variant: 'plus' }))));
     }
 };
 Range.style = rangeComponentCss();

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

@@ -2,8 +2,8 @@ import { h, Host } from "@stencil/core";
 import { cva } from "class-variance-authority";
 const avatar = cva([
     `
-    p-avatar flex aspect-branding items-center justify-center rounded-full
-    font-ambit font-bold leading-none ring-1 ring-inset ring-storm-500/20
+    flex aspect-branding items-center justify-center rounded-full font-ambit
+    font-bold leading-none ring-1 ring-inset ring-storm-500/20
   `,
 ], {
     variants: {
@@ -57,7 +57,7 @@ export class Avatar {
         }
     }
     render() {
-        return (h(Host, { key: '3a9dc3ebf87eed33626d3ae0885100a3ea4d9c78', class: avatar({
+        return (h(Host, { key: 'ebe30260e369ddc3f8ad1729ba1445915508fa1b', class: avatar({
                 size: this.size,
                 variant: this.variant,
             }) }, this._failed ? (h("span", null, this.letters?.[0] ?? ' ')) : (h("img", { class: 'z-0 aspect-branding h-full rounded-full object-cover', src: this._src, onError: () => this._setFailed() }))));

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

@@ -0,0 +1,17 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Avatar/Avatar',
+    component: 'p-avatar',
+};
+export default meta;
+export const Default = {
+    render: ({ size, 'default-image': defaultImage, src, letters, variant, }) => html `
+		<p-avatar
+			size=${size ?? nothing}
+			variant=${variant ?? nothing}
+			default-image=${defaultImage ?? nothing}
+			src=${src ?? nothing}
+			letters=${letters ?? nothing}
+		/>
+	`,
+};

package/dist/collection/components/atoms/avatar/avatar-group/avatar-group.stories.js

@@ -0,0 +1,19 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Avatar/Avatar group',
+    component: 'p-avatar-group',
+    args: {
+        content: 'AvatarGroup',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, extra }) => html `
+		<p-avatar-group extra=${extra ?? nothing}> ${content} </p-avatar-group>
+	`,
+};

package/dist/collection/components/atoms/backdrop/backdrop.stories.js

@@ -0,0 +1,29 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Backdrop',
+    component: 'p-backdrop',
+    args: {
+        content: 'Backdrop',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, variant, 'apply-blur': applyBlur, closing, 'scroll-lock': scrollLock, class: className, }) => html `
+		<p-backdrop
+			variant=${variant ?? nothing}
+			apply-blur=${applyBlur ?? nothing}
+			closing=${closing ?? nothing}
+			scroll-lock=${scrollLock ?? nothing}
+			class=${className ?? nothing}
+			@clicked=${action('clicked')}
+		>
+			${content}
+		</p-backdrop>
+	`,
+};

package/dist/collection/components/atoms/badge/badge.stories.js

@@ -0,0 +1,17 @@
+import { html } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Badge',
+    component: 'p-badge',
+    args: {
+        content: '10',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content }) => html `<p-badge>${content}</p-badge>`,
+};

package/dist/collection/components/atoms/card/body/card-body.stories.js

@@ -0,0 +1,21 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Card/Body',
+    component: 'p-card-body',
+    args: {
+        content: 'CardBody',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, 'inherit-text': inheritText }) => html `
+		<p-card-body inherit-text=${inheritText ?? nothing}>
+			${content}
+		</p-card-body>
+	`,
+};

package/dist/collection/components/atoms/card/container/card-container.stories.js

@@ -0,0 +1,27 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Card/Container',
+    component: 'p-card-container',
+    args: {
+        content: 'CardContainer',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, hoverable, shadow, variant, 'bg-class': bgClass, border, }) => html `
+		<p-card-container
+			hoverable=${hoverable ?? nothing}
+			shadow=${shadow ?? nothing}
+			border=${border ?? nothing}
+			bg-class=${bgClass ?? nothing}
+			variant=${variant ?? nothing}
+		>
+			${content}
+		</p-card-container>
+	`,
+};

package/dist/collection/components/atoms/card/header/card-header.stories.js

@@ -0,0 +1,18 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Card/Header',
+    component: 'p-card-header',
+};
+export default meta;
+export const Default = {
+    render: ({ header, variant, divider, icon, 'icon-rotate': iconRotate, 'icon-flip': iconFlip, }) => html `
+		<p-card-header
+			header=${header ?? nothing}
+			variant=${variant ?? nothing}
+			divider=${divider ?? nothing}
+			icon=${icon ?? nothing}
+			icon-rotate=${iconRotate ?? nothing}
+			icon-flip=${iconFlip ?? nothing}
+		/>
+	`,
+};

package/dist/collection/components/atoms/checkbox/checkbox.stories.js

@@ -0,0 +1,31 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Checkbox',
+    component: 'p-checkbox',
+    args: {
+        content: 'Checkbox',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, checked, indeterminate, disabled, required, id, name, }) => html `
+		<p-checkbox
+			checked=${checked ?? nothing}
+			indeterminate=${indeterminate ?? nothing}
+			disabled=${disabled ?? nothing}
+			required=${required ?? nothing}
+			id=${id ?? nothing}
+			name=${name ?? nothing}
+			@checkedChange=${action('checkedChange')}
+			@indeterminateChange=${action('indeterminateChange')}
+		>
+			${content}
+		</p-checkbox>
+	`,
+};

package/dist/collection/components/atoms/divider/divider.stories.js

@@ -0,0 +1,26 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Divider',
+    component: 'p-divider',
+    args: {
+        content: 'Divider',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, variant, 'align-content': alignContent }) => content.length > 0
+        ? html `
+				<p-divider
+					variant=${variant ?? nothing}
+					align-content=${alignContent ?? nothing}
+				>
+					${content}
+				</p-divider>
+			`
+        : html `<p-divider variant=${variant ?? nothing} />`,
+};

package/dist/collection/components/atoms/drawer/body/drawer-body.stories.js

@@ -0,0 +1,19 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Drawer/Body',
+    component: 'p-drawer-body',
+    args: {
+        content: 'ModalBody',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, variant }) => html `
+		<p-drawer-body variant=${variant ?? nothing}> ${content} </p-drawer-body>
+	`,
+};

package/dist/collection/components/atoms/drawer/container/drawer-container.stories.js

@@ -0,0 +1,21 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Drawer/Container',
+    component: 'p-drawer-container',
+    args: {
+        content: 'ModalContainer',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, closing }) => html `
+		<p-drawer-container closing=${closing ?? nothing}>
+			${content}
+		</p-drawer-container>
+	`,
+};

package/dist/collection/components/atoms/drawer/header/drawer-header.component.css

@@ -1 +1 @@
-*{box-sizing:border-box}.static{position:static}.relative{position:relative}.z-\[1\]{z-index:1}.flex{display:flex}.inline-flex{display:inline-flex}.size-8{height:2rem;width:2rem}.min-h-12{min-height:3rem}.min-h-18{min-height:4.5rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.justify-between{justify-content:space-between}.overflow-hidden{overflow:hidden}.rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.pb-0{padding-bottom:0}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1))}.dark\:bg-hurricane-600:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1;background-color:rgb(46 52 62/var(--tw-bg-opacity,1))}.dark\:text-hurricane-400:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.dark\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:bg-hurricane-600:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1;background-color:rgb(46 52 62/var(--tw-bg-opacity,1))}.dark\:text-hurricane-400:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.dark\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}
+*{box-sizing:border-box}.static{position:static}.relative{position:relative}.z-\[1\]{z-index:1}.flex{display:flex}.inline-flex{display:inline-flex}.size-8{height:2rem;width:2rem}.min-h-12{min-height:3rem}.min-h-18{min-height:4.5rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.justify-between{justify-content:space-between}.overflow-hidden{overflow:hidden}.rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.pb-0{padding-bottom:0}.text-center{text-align:center}.font-ambit{font-family:Ambit,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1))}.dark\:bg-hurricane-600:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1;background-color:rgb(46 52 62/var(--tw-bg-opacity,1))}.dark\:text-hurricane-400:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.dark\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:bg-hurricane-600:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1;background-color:rgb(46 52 62/var(--tw-bg-opacity,1))}.dark\:text-hurricane-400:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.dark\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}

package/dist/collection/components/atoms/drawer/header/drawer-header.component.js

@@ -13,7 +13,7 @@ const content = cva(['flex justify-between', 'min-h-12 w-full p-4 pb-0']);
 const title = cva([
     'flex-1 text-center',
     `
-   text-ambit text-2xl font-bold text-storm-500
+   font-ambit text-2xl font-bold text-storm-500
    dark:text-white
  `,
 ]);

package/dist/collection/components/atoms/drawer/header/drawer-header.stories.js

@@ -0,0 +1,25 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Drawer/Header',
+    component: 'p-drawer-header',
+    args: {
+        content: 'ModalHeader',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, 'show-close': showClose }) => html `
+		<p-drawer-header
+			show-close=${showClose ?? nothing}
+			@close=${action('close')}
+		>
+			${content}
+		</p-drawer-header>
+	`,
+};

package/dist/collection/components/atoms/dropdown-menu/container/dropdown-menu-container.component.js

@@ -2,13 +2,7 @@ import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
 import { ThemedHost } from "../../../../internal/themed-host.component";
 import { asBoolean } from "../../../../utils/as-boolean";
-const dropdownMenuContainer = cva([
-    'p-dropdown-menu-container',
-    'p-1',
-    'z-10 rounded-lg',
-    'border',
-    'transform-gpu will-change-transform',
-], {
+const dropdownMenuContainer = cva(['p-1', 'z-10 rounded-lg', 'border', 'transform-gpu will-change-transform'], {
     variants: {
         variant: {
             default: [
@@ -82,15 +76,15 @@ export class DropdownMenuContainer {
             : this.scrollable === true
                 ? 'default'
                 : this.scrollable;
-        return (h(ThemedHost, { key: '5e114d019269c53de1c486382f94df63a07a8270' }, h("div", { key: '45d734038bf0ff32b352552cd3acfbf284a4dd04', class: dropdownMenuContainer({
+        return (h(ThemedHost, { key: 'b4669178b51e78cc37779e2f3ba42ed2dd001d71' }, h("div", { key: '1e7a8752816f578d793072517f80f18d52417a2c', class: dropdownMenuContainer({
                 class: this.class,
                 variant: this.variant,
                 fullWidth: asBoolean(this.fullWidth, true),
                 maxWidth: this.maxWidth,
-            }) }, h("div", { key: '5835894bc68ed27da004ff8e93cc6cb393e75586', class: innerContainer({
+            }) }, h("div", { key: '2f1f710cf34a1542797ee7234f915d83f1928cb2', class: innerContainer({
                 allowOverflow: asBoolean(this.allowOverflow),
                 scrollable,
-            }) }, h("div", { key: '2fc4b47ac15be1c804c427874a6f5a81a26264e9', class: 'flex w-full flex-col' }, h("slot", { key: '8a14a049fc08d84ee9b43ce12e5301bd99773c0e' }))))));
+            }) }, h("div", { key: '50ced2c063ab9524450f258dfc3fadaeb507b4e7', class: 'flex w-full flex-col' }, h("slot", { key: '6a5f6a88b779efa49bc5dba3161a74056d4504ef' }))))));
     }
     static get is() { return "p-dropdown-menu-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/dropdown-menu/container/dropdown-menu-container.stories.js

@@ -0,0 +1,31 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Dropdown menu/Container',
+    component: 'p-dropdown-menu-container',
+};
+export default meta;
+export const Default = {
+    render: ({ variant, 'max-width': maxWidth, class: className, 'full-width': fullWidth, 'allow-overflow': allowOverflow, scrollable, }) => html `
+		<p-dropdown-menu-container
+			variant=${variant ?? nothing}
+			max-width=${maxWidth ?? nothing}
+			class=${className ?? nothing}
+			full-width=${fullWidth ?? nothing}
+			allow-overflow=${allowOverflow ?? nothing}
+			scrollable=${scrollable ?? nothing}
+		>
+			<p-dropdown-menu-item variant=${variant ?? nothing}>
+				Item 1
+			</p-dropdown-menu-item>
+			<p-dropdown-menu-item variant=${variant ?? nothing}>
+				Item 2
+			</p-dropdown-menu-item>
+			<p-dropdown-menu-item
+				active
+				variant=${variant ?? nothing}
+			>
+				Item 3
+			</p-dropdown-menu-item>
+		</p-dropdown-menu-container>
+	`,
+};

package/dist/collection/components/atoms/dropdown-menu/item/dropdown-menu-item.component.js

@@ -3,12 +3,7 @@ import { cva } from "class-variance-authority";
 import { ThemedHost } from "../../../../internal/themed-host.component";
 import { cn } from "../../../../utils";
 import { asBoolean } from "../../../../utils/as-boolean";
-const dropdownMenuItem = cva([
-    `
-    p-dropdown-menu-item group flex max-w-full items-center gap-2 rounded-lg
-    text-sm
-  `,
-], {
+const dropdownMenuItem = cva([`group flex max-w-full items-center gap-2 rounded-lg text-sm`], {
     variants: {
         variant: {
             default: null,
@@ -285,19 +280,19 @@ export class DropdownMenuItem {
      */
     autoHeight = false;
     render() {
-        return (h(ThemedHost, { key: '9db5400644abc5f1cd2b61bddbf2e17ff7b819a1' }, h("div", { key: '35a64c76b96041fc565c19845aca3f0330c96b49', class: cn(dropdownMenuItem({
+        return (h(ThemedHost, { key: '147401764920d564b7a00d1b31a2d10a262329be' }, h("div", { key: '06dd61d4b5bf8cd1e447d326d30082d638e7b033', class: cn(dropdownMenuItem({
                 variant: this.variant,
                 active: asBoolean(this.active),
                 enableHover: asBoolean(this.enableHover ?? true),
                 autoHeight: asBoolean(this.autoHeight ?? false),
                 enableTextWrap: this.enableTextWrap,
                 disabled: asBoolean(this.disabled),
-            })) }, this.icon && (h("p-icon", { key: 'a7a7a2d9c28cf63aeb66043eb7c8e28fe375437c', class: dropdownMenuItemIcon({
+            })) }, this.icon && (h("p-icon", { key: '057978ce674d15f2013cc44941a535bd61b09aa9', class: dropdownMenuItemIcon({
                 variant: this.variant,
                 active: asBoolean(this.active),
                 disabled: asBoolean(this.disabled),
                 wave: asBoolean(this.iconWave),
-            }), variant: this.icon })), this.checkbox && (h("p-checkbox", { key: 'e57a547ced7bd228f920d5c5197d6c17dc1aeaee', checked: this.active, disabled: this.disabled })), this.useContainer ? (h("div", { class: cn('block w-full overflow-hidden text-start', {
+            }), variant: this.icon })), this.checkbox && (h("p-checkbox", { key: '1a953c17a54475d4d2f09ae18cd2cf5b46438a23', checked: this.active, disabled: this.disabled })), this.useContainer ? (h("div", { class: cn('block w-full overflow-hidden text-start', {
                 'text-ellipsis whitespace-nowrap': !this.enableTextWrap,
             }) }, h("slot", null))) : (h("slot", null)))));
     }

package/dist/collection/components/atoms/dropdown-menu/item/dropdown-menu-item.stories.js

@@ -0,0 +1,31 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Dropdown menu/Item',
+    component: 'p-dropdown-menu-item',
+    args: {
+        content: 'DropdownMenuItem',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, active, checkbox, variant, 'enable-hover': enableHover, 'enable-text-wrap': enableTextWrap, disabled, icon, 'icon-wave': iconWave, 'use-container': useContainer, }) => html `
+		<p-dropdown-menu-item
+			active=${active ?? nothing}
+			checkbox=${checkbox ?? nothing}
+			variant=${variant ?? nothing}
+			enable-hover=${enableHover ?? nothing}
+			enable-text-wrap=${enableTextWrap ?? nothing}
+			disabled=${disabled ?? nothing}
+			icon=${icon ?? nothing}
+			icon-wave=${iconWave ?? nothing}
+			use-container=${useContainer ?? nothing}
+		>
+			${content}
+		</p-dropdown-menu-item>
+	`,
+};

package/dist/collection/components/atoms/floating-menu/container/floating-menu-container.stories.js

@@ -0,0 +1,29 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Floating menu/Container',
+    component: 'p-floating-menu-container',
+    args: {
+        content: 'FloatingMenuContainer',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, 'used-in-table': usedInTable, 'enable-amount-selected': enableAmountSelected, amount, 'enable-close': enableClose, 'amount-selected-template': amountSelectedTemplate, }) => html `
+		<p-floating-menu-container
+			used-in-table=${usedInTable ?? nothing}
+			enable-amount-selected=${enableAmountSelected ?? nothing}
+			amount=${amount ?? nothing}
+			enable-close=${enableClose ?? nothing}
+			amount-selected-template=${amountSelectedTemplate ?? nothing}
+			@close=${action('close')}
+		>
+			${content}
+		</p-floating-menu-container>
+	`,
+};

package/dist/collection/components/atoms/floating-menu/item/floating-menu-item.stories.js

@@ -0,0 +1,29 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Floating menu/Item',
+    component: 'p-floating-menu-item',
+    args: {
+        content: 'FloatingMenuItem',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, hover, disabled, loading, icon, 'icon-position': iconPosition, 'icon-flip': iconFlip, 'icon-rotate': iconRotate, }) => html `
+		<p-floating-menu-item
+			hover=${hover ?? nothing}
+			disabled=${disabled ?? nothing}
+			loading=${loading ?? nothing}
+			icon=${icon ?? nothing}
+			icon-position=${iconPosition ?? nothing}
+			icon-flip=${iconFlip ?? nothing}
+			icon-rotate=${iconRotate ?? nothing}
+		>
+			${content}
+		</p-floating-menu-item>
+	`,
+};

package/dist/collection/components/atoms/helper/helper.stories.js

@@ -0,0 +1,24 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Helper',
+    component: 'p-helper',
+    args: {
+        content: 'Helper',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, strategy, placement }) => html `
+		<p-helper
+			strategy=${strategy ?? nothing}
+			placement=${placement ?? nothing}
+		>
+			${content}
+		</p-helper>
+	`,
+};

package/dist/collection/components/atoms/iban-icon/iban-icon.stories.js

@@ -0,0 +1,14 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Iban icon',
+    component: 'p-iban-icon',
+};
+export default meta;
+export const Default = {
+    render: ({ iban, variant }) => html `
+		<p-iban-icon
+			iban=${iban ?? nothing}
+			variant=${variant ?? nothing}
+		/>
+	`,
+};

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
 import { icons } from "../../../utils/icons";
-const icon = cva(['p-icon inline-flex', 'transform-gpu transition-transform'], {
+const icon = cva(['inline-flex', 'transform-gpu transition-transform'], {
     variants: {
         flip: {
             none: null,
@@ -56,7 +56,7 @@ export class Icon {
     render() {
         const hasTextSizeClass = /text-(xs|sm|base|lg|xl)/.test(this._el.className);
         const svg = icons[this.variant];
-        return (h("div", { key: '1bea88e95c14970d3dc5ff08737acbde058699d7', class: icon({
+        return (h("div", { key: '004e863b264cecc97018773dcd07d2816c6e20d1', class: icon({
                 flip: this.flip,
                 size: hasTextSizeClass ? 'auto' : this.size,
                 transform: this.flip !== 'none' || this.rotate > 0 || this.rotate < 0,

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

@@ -0,0 +1,20 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Icon',
+    component: 'p-icon',
+    args: {
+        variant: 'caret',
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ variant, size, rotate, flip }) => html `
+		<p-icon
+			variant=${variant ?? nothing}
+			size=${size ?? nothing}
+			rotate=${rotate ?? nothing}
+			flip=${flip ?? nothing}
+		/>
+	`,
+    tags: ['!dev'],
+};

package/dist/collection/components/atoms/illustration/illustration.stories.js

@@ -0,0 +1,12 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Illustration',
+    component: 'p-illustration',
+    args: {
+        variant: 'calculator',
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ variant }) => html `<p-illustration variant=${variant ?? nothing} />`,
+};