@paperless/core 3.0.2 → 3.1.0

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

@@ -12,9 +12,12 @@ const popover = cva([
 ], {
     variants: {
         variant: {
-            hover: 'bg-storm-500 dark:bg-white text-white dark:text-storm-300 py-1 max-w-[14.5rem]',
+            hover: `
+      max-w-[14.5rem] bg-storm-500 py-1 text-white
+      dark:bg-white dark:text-storm-300
+    `,
             click: 'max-w-[18rem]',
-            error: 'max-w-full w-full',
+            error: 'w-full max-w-full',
         },
         strategy: {
             fixed: 'fixed',
@@ -28,7 +31,10 @@ const popover = cva([
         },
         {
             variant: ['click', 'error'],
-            class: 'bg-white dark:bg-hurricane-800 text-storm-300 dark:text-hurricane-200 py-2',
+            class: `
+      bg-white py-2 text-storm-300
+      dark:bg-hurricane-800 dark:text-hurricane-200
+    `,
         },
     ],
 });
@@ -91,10 +97,10 @@ export class Tooltip {
         this._cleanup = null;
     }
     render() {
-        return (h(ThemedHost, { key: '927a65c827b316e40b2c7a67b0c1a5463457a995', "data-filled": this.content?.length > 0 || this._hasContentSlot }, h("slot", { key: '732bf5d85d3b6b76d767a5ef4deaab036c617e1b', name: 'trigger' }), h("div", { key: '4b6ad7714c2363d0148245c2d225dd8fe98894eb', class: popover({
+        return (h(ThemedHost, { key: 'd6eed2d0ae314f5bc0c956df0360c7c3affe5349', "data-filled": this.content?.length > 0 || this._hasContentSlot }, h("slot", { key: '68a50b13f23fbb9ff40b83d6a1f1cbad56a12add', name: 'trigger' }), h("div", { key: '6d4726e4663fe88a8758485c55ee003fca9e9c59', class: popover({
                 variant: this.variant,
                 strategy: this.strategy,
-            }), "data-placement": this.placement, ref: el => this._load(el), role: 'popover' }, h("div", { key: 'ed5bb24dc56bd4459515ad8aac888de77fbaffbe', class: 'flex gap-2 whitespace-normal' }, this.variant === 'error' && (h("div", { key: 'c869c7e2ec3b8d1acd3c891079cc24d8187c5423', class: 'w-[2px] bg-negative-red-500 dark:bg-negative-red-alternative' })), this.content ?? h("slot", { key: '0f99a6654b8059b0f84bb99a6f1dbf9a52882f3f', name: 'content' })))));
+            }), "data-placement": this.placement, ref: el => this._load(el), role: 'popover' }, h("div", { key: '9ded5ee86411c2d35b3ef4b75894740b5a9db814', class: 'flex gap-2 whitespace-normal' }, this.variant === 'error' && (h("div", { key: 'fe330950d9662c415e99d1594581c096b5210cd7', class: '\n          w-[2px] bg-negative-red-500\n          dark:bg-negative-red-alternative\n        ' })), this.content ?? h("slot", { key: '9ec941819d62d3fcca4edf9262d704644fb0f294', name: 'content' })))));
     }
     clickHandler() {
         if (this.variant === 'hover' || !this.enableUserInput) {

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

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import { cn, isMobile, isTablet } from "../../../utils";
 const attachment = cva([
     'flex flex-1 items-center justify-start gap-2',
-    'h-8 min-w-0 px-2 rounded-lg',
+    'h-8 min-w-0 rounded-lg px-2',
     'border border-solid',
     'bg-white-600 text-storm-200',
     'dark:bg-white/15 dark:text-hurricane-200',
@@ -14,8 +14,14 @@ const attachment = cva([
             true: 'cursor-pointer',
         },
         error: {
-            false: 'border-storm-100 dark:border-white/15',
-            true: 'border-negative-red-500 dark:border-negative-red-alternative',
+            false: `
+      border-storm-100
+      dark:border-white/15
+    `,
+            true: `
+      border-negative-red-500
+      dark:border-negative-red-alternative
+    `,
         },
     },
 });
@@ -95,21 +101,28 @@ export class Attachment {
     _fileRef;
     _cameraFileRef;
     render() {
-        let prefix = (h("p-icon", { key: 'c32bd5160f16b5fe66dd6bdddc7abab643ecac69', class: 'text-storm-300', variant: 'attachment' }));
+        let prefix = (h("p-icon", { key: '38bee5bc396126d20cc43e7278e4b5da7fb7a695', class: 'text-storm-300', variant: 'attachment' }));
         if (this.error) {
-            prefix = (h("p-icon", { key: '258cc04fd6a6ca24cc99fd4402740c600c845641', class: 'text-negative-red-500', variant: 'warning' }));
+            prefix = (h("p-icon", { key: '66dfe096ee491c8c3f97170eb8ae3417d1d95de4', class: 'text-negative-red-500', variant: 'warning' }));
         }
         // const isMobileDevice = isMobile();
         const isMobileDevice = isTablet();
         const baseText = 'min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm';
-        return (h(Fragment, { key: '2d4812f3d31f3cd0816628933c7f430526db82d6' }, h("p-field-container", { key: '349206b933ad13c0f37cd07d2a8da5b7be1a5c06', error: this.error, forceShowTooltip: !!this.error?.length, helper: this.helper, label: this.label, required: this.required, variant: 'write' }, h("div", { key: '59d1189891173772085e25882c3fcb474e459e0a', class: 'flex w-full items-start gap-2', slot: 'content' }, h("div", { key: '41b8af0f2636db293df1e503effbd1ec7f97685b', class: attachment({
+        return (h(Fragment, { key: '8b2d38564597724ee40f9916d45b053d946b35de' }, h("p-field-container", { key: '33a74e375c9fb319a20abd1962723572adaf11c6', error: this.error, forceShowTooltip: !!this.error?.length, helper: this.helper, label: this.label, required: this.required, variant: 'write' }, h("div", { key: '92d7a778625a40c171f58a722f34d7bdb6b978da', class: 'flex w-full items-start gap-2', slot: 'content' }, h("div", { key: 'aaf92c3e3d2017456492ac31f11bda522bafb62e', class: attachment({
                 click: this.mode === 'write' && !this.value?.length,
                 error: !!this.error?.length,
-            }), onClick: () => this._uploadClick() }, prefix, h("span", { key: 'd53642b51ad59ff0b5ccf497085ba81f4111bebf', class: cn(baseText, 'peer empty:hidden dark:text-white') }, this.value), h("span", { key: '285839432a117ed07ad59c5d66e5784109ac5f79', class: cn(baseText, 'hidden peer-empty:block') }, this.placeholder)), h("p-tooltip", { key: '1e5cd8b15e61316f678fb7b66af77969a3cb403a', class: 'w-8', content: this.mode === 'read'
+            }), onClick: () => this._uploadClick() }, prefix, h("span", { key: '13cfd3cb6c405275f36c3bdc4b5f0b43010dcacd', class: cn(baseText, `
+           peer
+           empty:hidden
+           dark:text-white
+         `) }, this.value), h("span", { key: '251d050ffb58678f6da944fd4775833f24874ed0', class: cn(baseText, `
+           hidden
+           peer-empty:block
+         `) }, this.placeholder)), h("p-tooltip", { key: 'c55bd274b3a21ea4ed12b8201d8acb8ba37e39c0', class: 'w-8', content: this.mode === 'read'
                 ? this.downloadTooltip
                 : this.value?.length
                     ? this.deleteTooltip
-                    : this.uploadTooltip }, h("p-button", { key: 'a0f090e19e177cff757ebae1fc2f5d1f4df8db68', disabled: this.loading, icon: this.mode === 'read'
+                    : this.uploadTooltip }, h("p-button", { key: '2e47e228cdcfe7d19224a1e3884cc39cbb5c83c6', disabled: this.loading, icon: this.mode === 'read'
                 ? 'download'
                 : this.value?.length
                     ? 'trash'
@@ -120,7 +133,7 @@ export class Attachment {
                     : this.delete).emit() })), this.enableCameraOnMobile &&
             this.mode === 'write' &&
             isMobileDevice &&
-            !this.value?.length && (h("p-tooltip", { key: '2b41ef669b3fc1e58a394d847a30b1316f0e3a0d', class: 'w-8 desktop-xs:hidden', content: this.cameraTooltip }, h("p-button", { key: 'b3ddba24285c00e05397221a77f73a08164c6953', icon: 'camera', iconOnly: true, slot: 'trigger', variant: 'secondary', onOnClick: () => this._cameraClick() }))))), h("input", { key: '5eec66f53142eb76391fbd626a01556470ce395a', accept: Array.isArray(this.accept) ? this.accept?.join(',') : this.accept, class: 'hidden', ref: el => (this._fileRef = el), type: 'file', onChange: ev => this._onFileChange(ev) }), h("input", { key: '288987b14646880b3fbe960514e0b5915b421270', accept: 'image/*', capture: 'true', class: 'hidden', ref: el => (this._cameraFileRef = el), type: 'file', onChange: ev => this._onFileChange(ev) })));
+            !this.value?.length && (h("p-tooltip", { key: 'b70b24f761917d9581abea3176f7baad59a8c643', class: '\n           w-8\n           desktop-xs:hidden\n         ', content: this.cameraTooltip }, h("p-button", { key: 'e9cd1e9c59547671c77f1f0f78bb5ecc45b6d94a', icon: 'camera', iconOnly: true, slot: 'trigger', variant: 'secondary', onOnClick: () => this._cameraClick() }))))), h("input", { key: '129ff3a7706fd2ce0c85e9867c1a5b35cd6b2021', accept: Array.isArray(this.accept) ? this.accept?.join(',') : this.accept, class: 'hidden', ref: el => (this._fileRef = el), type: 'file', onChange: ev => this._onFileChange(ev) }), h("input", { key: 'a214ffd826b76810792348b03662f6e8674658d5', accept: 'image/*', capture: 'true', class: 'hidden', ref: el => (this._cameraFileRef = el), type: 'file', onChange: ev => this._onFileChange(ev) })));
     }
     _uploadClick() {
         if (!this._fileRef || this.mode !== 'write' || this.value?.length) {

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

@@ -80,7 +80,7 @@ const button = cva([
             primary: ['border-storm-500/20', 'text-white'],
             secondary: null,
             text: 'border-0',
-            transparent: 'bg-transparent border-transparent',
+            transparent: 'border-transparent bg-transparent',
             dropdown: null,
         },
         active: {
@@ -96,9 +96,9 @@ const button = cva([
             false: null,
         },
         size: {
-            sm: ['text-xs h-6 gap-1'],
-            base: ['text-sm h-8 gap-2'],
-            lg: ['text-base h-10 gap-2'],
+            sm: ['h-6 gap-1 text-xs'],
+            base: ['h-8 gap-2 text-sm'],
+            lg: ['h-10 gap-2 text-base'],
         },
         disabled: {
             true: 'cursor-not-allowed border-transparent',
@@ -123,7 +123,7 @@ const button = cva([
         // variants
         {
             variant: ['secondary', 'dropdown'],
-            class: 'bg-white dark:bg-white/15',
+            class: ['bg-white', 'dark:bg-white/15'],
         },
         {
             variant: ['primary', 'secondary', 'dropdown'],
@@ -149,16 +149,25 @@ const button = cva([
             variant: ['secondary', 'dropdown'],
             disabled: false,
             error: false,
-            class: 'text-storm-500 dark:text-white',
+            class: `
+      text-storm-500
+      dark:text-white
+    `,
         },
         {
             variant: 'primary',
-            class: 'dark:border-0 dark:active:border-0',
+            class: `
+      dark:border-0
+      dark:active:border-0
+    `,
         },
         {
             variant: 'primary',
             disabled: true,
-            class: 'bg-indigo-200 dark:bg-indigo-600/30 dark:text-white/30',
+            class: `
+      bg-indigo-200
+      dark:bg-indigo-600/30 dark:text-white/30
+    `,
         },
         {
             variant: 'primary',
@@ -170,8 +179,15 @@ const button = cva([
             disabled: false,
             loading: false,
             class: [
-                'active:border-storm-500/10 dark:active:ring-0 active:ring-2 active:text-white/60',
-                'drop-shadow-primary-button hover:drop-shadow-2 hover:bg-indigo-700 active:ring-indigo-100',
+                `
+       active:border-storm-500/10 active:text-white/60 active:ring-2
+       dark:active:ring-0
+     `,
+                `
+       drop-shadow-primary-button
+       hover:bg-indigo-700 hover:drop-shadow-2
+       active:ring-indigo-100
+     `,
             ],
         },
         {
@@ -179,7 +195,7 @@ const button = cva([
             disabled: false,
             loading: false,
             active: true,
-            class: 'ring ring-2',
+            class: 'ring-2',
         },
         {
             variant: 'primary',
@@ -191,20 +207,33 @@ const button = cva([
         {
             variant: ['secondary', 'dropdown'],
             disabled: true,
-            class: 'border bg-white-600 text-storm-100 dark:bg-white/5 dark:border-white/5 dark:text-hurricane-400',
+            class: `
+      border bg-white-600 text-storm-100
+      dark:border-white/5 dark:bg-white/5 dark:text-hurricane-400
+    `,
         },
         {
             variant: ['secondary', 'dropdown'],
             disabled: false,
-            class: 'text-storm-500 dark:text-white',
+            class: `
+      text-storm-500
+      dark:text-white
+    `,
         },
         {
             variant: ['secondary', 'dropdown'],
             disabled: false,
             loading: false,
             class: [
-                'drop-shadow-1 hover:drop-shadow-1 hover:bg-white-600 active:ring-indigo-100 active:text-storm-500/60',
-                'dark:hover:bg-white/25 dark:active:bg-white/25 dark:active:ring-0 dark:active:text-white/60',
+                `
+       drop-shadow-1
+       hover:bg-white-600 hover:drop-shadow-1
+       active:text-storm-500/60 active:ring-indigo-100
+     `,
+                `
+       dark:hover:bg-white/25
+       dark:active:bg-white/25 dark:active:text-white/60 dark:active:ring-0
+     `,
             ],
         },
         {
@@ -229,20 +258,35 @@ const button = cva([
             variant: ['secondary', 'dropdown'],
             error: false,
             active: false,
-            class: ['border-storm-500/20 dark:border-transparent'],
+            class: [
+                `
+       border-storm-500/20
+       dark:border-transparent
+     `,
+            ],
         },
         {
             variant: ['secondary', 'dropdown'],
             error: true,
             class: [
-                'border border-negative-red-500 text-negative-red-800 ring ring-2 ring-negative-red-50  active:text-negative-red-800',
-                'dark:ring-0 dark:border-negative-red-700 dark:text-negative-red-alternative',
+                `
+       border border-negative-red-500 text-negative-red-800 ring ring-2
+       ring-negative-red-50
+       active:text-negative-red-800
+     `,
+                `
+       dark:border-negative-red-700 dark:text-negative-red-alternative
+       dark:ring-0
+     `,
             ],
         },
         {
             variant: ['text', 'transparent'],
             disabled: false,
-            class: 'text-indigo-700 hover:text-indigo-800',
+            class: `
+      text-indigo-700
+      hover:text-indigo-800
+    `,
         },
         {
             variant: ['text', 'transparent'],
@@ -331,7 +375,11 @@ const icon = cva([], {
             disabled: false,
             active: false,
             error: false,
-            class: 'text-indigo-300 group-hover/button:text-white group-active/button:text-white/60',
+            class: `
+     text-indigo-300
+     group-hover/button:text-white
+     group-active/button:text-white/60
+   `,
         },
         {
             variant: 'primary',
@@ -345,8 +393,15 @@ const icon = cva([], {
             active: false,
             error: false,
             class: [
-                'text-storm-300 group-hover/button:text-storm-500 group-active/button:text-storm-500/60',
-                'dark:group-hover/button:text-white dark:group-active/button:text-white/60',
+                `
+      text-storm-300
+      group-hover/button:text-storm-500
+      group-active/button:text-storm-500/60
+    `,
+                `
+      dark:group-hover/button:text-white
+      dark:group-active/button:text-white/60
+    `,
             ],
         },
         {
@@ -370,19 +425,30 @@ const icon = cva([], {
             disabled: false,
             active: true,
             error: false,
-            class: 'text-storm-500/60 dark:text-white/60',
+            class: `
+     text-storm-500/60
+     dark:text-white/60
+   `,
         },
         {
             variant: ['transparent', 'text'],
             disabled: false,
             active: false,
-            class: 'text-indigo-500 group-hover/button:text-indigo-700 group-active/button:text-indigo-800',
+            class: `
+     text-indigo-500
+     group-hover/button:text-indigo-700
+     group-active/button:text-indigo-800
+   `,
         },
         {
             variant: ['secondary', 'dropdown'],
             active: false,
             error: true,
-            class: 'text-negative-red-500 group-hover/button:text-negative-red-800 dark:text-negative-red-alternative',
+            class: `
+     text-negative-red-500
+     group-hover/button:text-negative-red-800
+     dark:text-negative-red-alternative
+   `,
         },
         {
             variant: ['secondary', 'dropdown'],
@@ -513,7 +579,7 @@ export class Button {
             : 'button';
         const hostClass = cn('p-button inline-block', this.class);
         const active = asBoolean(this.active) || hostClass?.includes('active');
-        return (h(ThemedHost, { key: '7452fa765b24901c77a8ed76278994150ba11acf', class: hostClass }, h(VariableTag, { key: '9f0d18fb8068bb01f0dd5d844aa322c1effccb9b', class: button({
+        return (h(ThemedHost, { key: '96d79703fdd577fadf843e31db00fc39c7a0f60b', class: hostClass }, h(VariableTag, { key: 'b61672659ecbd461e3ee99ac8288f90fddc9f2e1', class: button({
                 variant: this.variant,
                 size: this.size,
                 loading: asBoolean(this.loading),
@@ -523,14 +589,14 @@ export class Button {
                 active,
                 error: asBoolean(this.error),
                 underline: asBoolean(this.underline) && VariableTag === 'a',
-            }), disabled: asBoolean(this.disabled), href: this.href, tabIndex: this.tabIndex, target: this.target, type: this.variant === 'text' ? undefined : this.type }, this.chevron && this.chevronPosition === 'start' && (h("p-icon", { key: 'c838235c3411be17231b10e8fcca992f62d89afe', rotate: this.chevron === 'up' ? 180 : 0, variant: 'caret' })), this.icon &&
+            }), disabled: asBoolean(this.disabled), href: this.href, tabIndex: this.tabIndex, target: this.target, type: this.variant === 'text' ? undefined : this.type }, this.chevron && this.chevronPosition === 'start' && (h("p-icon", { key: '53ad0547df945a2055d9d9a8e9a4e32f8b4474d6', rotate: this.chevron === 'up' ? 180 : 0, variant: 'caret' })), this.icon &&
             this.iconPosition === 'start' &&
             !(this.iconOnly && this.loading) &&
-            this._getIcon(), this.label ?? h("slot", { key: '96401595325aecdfb14c77b5dce103a67d4d8da8' }), this.icon &&
+            this._getIcon(), this.label ?? h("slot", { key: '59dc0d14a430e8e47fa46752025d76c0848bcbc4' }), this.icon &&
             this.iconPosition === 'end' &&
             !this.loading &&
             !this.chevron &&
-            this._getIcon(), this.chevron && !this.loading && this.chevronPosition === 'end' && (h("p-icon", { key: 'b543d3ca7e0253c71e93d6736a1a99a69d156fe0', rotate: this.chevron === 'up' ? 180 : 0, variant: 'caret' })), this.loading && h("p-loader", { key: 'f655d54d167b02f7e546962f182e61b3cec77ccc', color: loaderColor }))));
+            this._getIcon(), this.chevron && !this.loading && this.chevronPosition === 'end' && (h("p-icon", { key: '5e1c8d2f5781900af5ff53b565f7904a42df2c23', rotate: this.chevron === 'up' ? 180 : 0, variant: 'caret' })), this.loading && h("p-loader", { key: 'a760f9a6c098b0857225acd689bda1824021455a', color: loaderColor }))));
     }
     handleClick(ev) {
         if (this.loading || this.disabled) {

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

@@ -5,18 +5,21 @@ import { enUS, nl } from "date-fns/locale";
 import { ThemedHost } from "../../../internal/themed-host.component";
 import { state } from "../../../state";
 import { cn } from "../../../utils/cn";
-const calendar = cva(['w-[17.5rem] flex flex-col gap-4'], {
+const calendar = cva(['flex w-[17.5rem] flex-col gap-4'], {
     variants: {
         variant: {
-            default: ['p-2 rounded-lg drop-shadow-2', 'border border-storm-100'],
+            default: ['rounded-lg p-2 drop-shadow-2', 'border border-storm-100'],
             embedded: 'p-1',
         },
     },
 });
 const header = cva([
     'flex items-center gap-2',
-    'w-full p-2 rounded-lg',
-    'bg-off-white-300 dark:bg-white/15',
+    'w-full rounded-lg p-2',
+    `
+    bg-off-white-300
+    dark:bg-white/15
+  `,
 ], {
     variants: {
         type: {
@@ -186,7 +189,7 @@ export class Calendar {
         }
     }
     render() {
-        return (h(ThemedHost, { key: '579b8140d5697bdc7fb1dd76017773d313e466eb' }, h("div", { key: 'e642635da9ec396325e0f1829860bc14e6231463', class: calendar({ variant: this.variant }) }, this._getView())));
+        return (h(ThemedHost, { key: 'f15ea9c031af444ef0d1679b88baf45d554fea8b' }, h("div", { key: 'ffd0b34ea60681b58a5ca1e75ae81bd4209a442f', class: calendar({ variant: this.variant }) }, this._getView())));
     }
     _checkTodayButton() {
         if (this._maxDate && isAfter(this._today, this._maxDate)) {
@@ -219,10 +222,14 @@ export class Calendar {
         const daysInMonth = this._generateDaysInMonth();
         return (h("div", { class: view({ view: 'day' }) }, this._getHeader('day'), h("div", { class: 'grid grid-cols-7 justify-between gap-1' }, this._weekDays.map(weekday => (h("span", { class: 'w-8 text-center text-xs text-storm-200' }, format(addDays(new Date(2022, 7, 1), weekday), state.locale === 'nl' ? 'EEEEEE' : 'eee', {
             locale: state.locale === 'nl' ? nl : enUS,
-        })))), daysInMonth.map(day => day.active ? (h("p-button", { class: cn('w-8', `col-start-${day.offset}`), tabIndex: -1, variant: 'primary', onClick: () => this._setValue(day.date) }, day.day)) : (h("time", { class: cn('normal flex items-center justify-center rounded-lg', 'h-8 w-8 text-sm font-semibold', 'text-storm-300', 'dark:bg-white/15', {
+        })))), daysInMonth.map(day => day.active ? (h("p-button", { class: cn('w-8', `
+           col-start-${day.offset}
+         `), tabIndex: -1, variant: 'primary', onClick: () => this._setValue(day.date) }, day.day)) : (h("time", { class: cn('normal flex items-center justify-center rounded-lg', 'h-8 w-8 text-sm font-semibold', 'text-storm-300', 'dark:bg-white/15', {
                 'cursor-pointer hover:bg-white-600 hover:text-storm-500 dark:text-white dark:hover:bg-hurricane-300 dark:hover:text-white': !day.disabled,
                 'dark:text-hurricane-200': day.disabled,
-            }, `col-start-${day.offset}`, { 'cursor-not-allowed opacity-60': day.disabled }, {
+            }, `
+           col-start-${day.offset}
+         `, { 'cursor-not-allowed opacity-60': day.disabled }, {
                 'border border-solid border-off-white-700 bg-off-white-300 text-storm-500 dark:border-none dark:bg-hurricane-200 dark:text-white': !day.disabled && isSameDay(day.date, new Date()),
             }), onClick: () => this._setValue(day.date) }, day.day))))));
     }

package/dist/collection/components/molecules/content-slider/content-slider.component.js

@@ -47,9 +47,19 @@ export class ContentSlider {
         }
     }
     render() {
-        return (h(Host, { key: '82853208f8862b3485a5a00b0c9c4f6986ea92ea', class: 'p-content-slider' }, h("div", { key: '3250c367ac25464a769c43d4093df28dbff8085d', class: `slider ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, ref: el => (this._sliderRef = el), style: {
+        return (h(Host, { key: '82853208f8862b3485a5a00b0c9c4f6986ea92ea', class: 'p-content-slider' }, h("div", { key: 'c06c9b5385f6fe2d69b17415ed46fc78fc8be5ae', class: `
+       slider
+       ${!this.disableDrag && 'draggable'}
+       ${this._dragging && 'dragging'}
+     `, ref: el => (this._sliderRef = el), style: {
                 height: `${this._outerHeight}px`,
-            }, onMouseDown: e => this._mouseDownHandler(e), onMouseMove: e => this._mouseMoveHandler(e), onTouchMove: e => this._mouseMoveHandler(e), onTouchStart: e => this._mouseDownHandler(e) }, h("div", { key: 'cb82eacdfc02898e9eeaff865b5e7fa7da69a2f9', class: 'inner-slider', ref: ref => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, h("slot", { key: 'e6e5636ba8ed11665e0d623bcffb8a53bba03908', onSlotchange: () => this._slotChange() }))), h("div", { key: '9d596407cda3aaa5cbae5c0a0a19209623627edd', class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._filteredItems.map((_, i) => (h("div", { class: `item ${!this.disableIndicatorClick && 'cursor-pointer'}`, onClick: () => this._scrollTo(i, true) }, h("div", { class: cn('block h-2 w-2 rounded-full', {
+            }, onMouseDown: e => this._mouseDownHandler(e), onMouseMove: e => this._mouseMoveHandler(e), onTouchMove: e => this._mouseMoveHandler(e), onTouchStart: e => this._mouseDownHandler(e) }, h("div", { key: '5dfdd1adee4730a98789496e923c5ec6e3a8eb9c', class: 'inner-slider', ref: ref => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, h("slot", { key: 'd1557d4fa4336b8f01d7039a3b6e1fb9c65716f9', onSlotchange: () => this._slotChange() }))), h("div", { key: '1bf3e7c46755f0f85fc6fa573bd04ee43bd0752d', class: `
+       indicator
+       ${this.hideMobileIndicator && 'hidden'}
+     ` }, this._filteredItems.map((_, i) => (h("div", { class: `
+         item
+         ${!this.disableIndicatorClick && 'cursor-pointer'}
+       `, onClick: () => this._scrollTo(i, true) }, h("div", { class: cn('block h-2 w-2 rounded-full', {
                 'bg-indigo-600': i === this._visibleIndex,
                 'bg-indigo-300': i !== this._visibleIndex,
             }) })))))));

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

@@ -42,7 +42,7 @@ export class Cropper {
         const themeColor = state.theme === 'dark'
             ? 'rgba(70, 75, 84, 0.5)'
             : 'rgba(255, 255, 255, 0.5)';
-        return (h(ThemedHost, { key: 'dd4ea15cbdfbac6e25202bd1a4871d9635fd33a7' }, this._loaded && (h("cropper-canvas", { key: 'cb359d80b35eae4aa2e58c75bed8ccd5a15b2df2', class: 'h-[17.5rem] w-full border-0 border-b border-solid border-off-white-700 bg-white dark:border-hurricane-200', onAction: () => this._onAction() }, h("cropper-image", { key: '8a96ad1f1f11adc4a8291a1376f329af52c3d920', alt: 'Picture', crossorigin: 'anonymous', ref: ref => this._setImageRef(ref), src: this.value, scalable: true, translatable: true }), h("cropper-shade", { key: '1b375fe73b98ec31776ba4762e10781a1c33117b', class: 'aspect-branding rounded-full', "theme-color": themeColor, hidden: true }), h("cropper-selection", { key: 'ae41c83bf91f714beb89b79998c2636ffe837f51', "aspect-ratio": '1', "initial-coverage": '0.7', ref: ref => (this._selectionRef = ref) }), h("cropper-handle", { key: '45148a814f6b3d1f04e94c0a8ee756b31d6dc7cb', action: 'move', plain: true }))), h("p-range", { key: 'b215e5dfc3aea8cae98d85dc590436a52c667c28', class: 'w-full px-14 tablet:max-w-xs tablet:px-1', value: this._currentScale, onValueChange: ev => this._onInput(ev.detail) })));
+        return (h(ThemedHost, { key: 'dd4ea15cbdfbac6e25202bd1a4871d9635fd33a7' }, this._loaded && (h("cropper-canvas", { key: '69757749ad6d01c41e7aca2e8f21c693666e98fe', class: '\n        h-[17.5rem] w-full border-0 border-b border-solid border-off-white-700\n        bg-white\n        dark:border-hurricane-200\n      ', onAction: () => this._onAction() }, h("cropper-image", { key: '07b78454e15277f87160a6832c4fed1bbbfb08c1', alt: 'Picture', crossorigin: 'anonymous', ref: ref => this._setImageRef(ref), src: this.value, scalable: true, translatable: true }), h("cropper-shade", { key: 'e1784c618c68dac7a8311f8d7e93666c5d3b3611', class: 'aspect-branding rounded-full', "theme-color": themeColor, hidden: true }), h("cropper-selection", { key: '2348efb74b1bf52ee4fab7157d32bb1dfe523430', "aspect-ratio": '1', "initial-coverage": '0.7', ref: ref => (this._selectionRef = ref) }), h("cropper-handle", { key: '45f943c9eefaf4312bd20ca8f4d089a5a0ece738', action: 'move', plain: true }))), h("p-range", { key: 'c96960f209547ddef6cd66a4ee9981d96901d0f0', class: '\n       w-full px-14\n       tablet:max-w-xs tablet:px-1\n     ', value: this._currentScale, onValueChange: ev => this._onInput(ev.detail) })));
     }
     _setImageRef(ref) {
         if (this._imageRef || !ref) {

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

@@ -208,7 +208,7 @@ export class Datepicker {
         this.parseValue(this.value);
     }
     render() {
-        return (h("p-dropdown", { key: 'c65daeff45afabeefa654b8d033a40d9fda5b4e2', allowOverflow: true, applyFullWidth: false, applyMaxWidth: false, disableTriggerClick: true, insideClick: true, isDatepicker: true, placement: this.placement, show: this._showDropdown, strategy: this.strategy }, h("p-field", { key: '09aaa8a320e9a1852171aa59054a9b269667addb', autoShowError: false, disabled: asBoolean(this.disabled), error: this.error, focused: this._showDropdown, forceShowTooltip: !!this.error?.length && !this._showDropdown, helper: this.helper, icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar-multi', iconPosition: 'start', label: this.label, loading: this.loading, placeholder: this.placeholder, prefix: this.prefix, required: asBoolean(this.required), showOptional: asBoolean(this.showOptional), size: this.size, slot: 'trigger', value: this._getFormattedDate(), onBlur: (ev) => this._onBlur(ev), onFocus: () => this._onFocus(), onInputRefChange: ev => (this._inputRef = ev.detail), onValueChange: ev => this._onValueChange(ev.detail) }), this.enableNativePicker && this._isMobileBrowser && (h("input", { key: 'f63ca80f15e52a5824a51e997f7b45664104a196', class: 'pointer-events-none absolute left-0 top-0 z-[-10] overflow-hidden opacity-0', max: this.maxDate &&
+        return (h("p-dropdown", { key: 'c65daeff45afabeefa654b8d033a40d9fda5b4e2', allowOverflow: true, applyFullWidth: false, applyMaxWidth: false, disableTriggerClick: true, insideClick: true, isDatepicker: true, placement: this.placement, show: this._showDropdown, strategy: this.strategy }, h("p-field", { key: '09aaa8a320e9a1852171aa59054a9b269667addb', autoShowError: false, disabled: asBoolean(this.disabled), error: this.error, focused: this._showDropdown, forceShowTooltip: !!this.error?.length && !this._showDropdown, helper: this.helper, icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar-multi', iconPosition: 'start', label: this.label, loading: this.loading, placeholder: this.placeholder, prefix: this.prefix, required: asBoolean(this.required), showOptional: asBoolean(this.showOptional), size: this.size, slot: 'trigger', value: this._getFormattedDate(), onBlur: (ev) => this._onBlur(ev), onFocus: () => this._onFocus(), onInputRefChange: ev => (this._inputRef = ev.detail), onValueChange: ev => this._onValueChange(ev.detail) }), this.enableNativePicker && this._isMobileBrowser && (h("input", { key: '5d3bc6559f556f4965bfbdf5789691e1aebac89b', class: '\n        pointer-events-none absolute left-0 top-0 z-[-10] overflow-hidden\n        opacity-0\n      ', max: this.maxDate &&
                 format(new Date(this.maxDate), 'yyyy-MM-dd', {
                     locale: state.locale === 'nl' ? nl : enUS,
                 }), min: this._minDate &&
@@ -217,7 +217,7 @@ export class Datepicker {
                 }), ref: ref => (this._dateInputRef = ref), slot: 'trigger', type: this.mode === 'day' ? 'date' : 'month', value: this._value &&
                 format(this._value, 'yyyy-MM-dd', {
                     locale: state.locale === 'nl' ? nl : enUS,
-                }), onInput: ev => this._onNativeInput(ev) })), h("div", { key: 'f57a7045507cc0bf0bb2ae070258c0d4ed1af81f', slot: 'items', tabIndex: -1 }, h("p-calendar", { key: '469d4b2a4c2972a0bfb621d85a67fb3d8c3c3e83', disableWeekends: this.disableWeekends, disabledDates: this.disabledDates, enableToday: this.enableToday, maxDate: this.maxDate, minDate: this.minDate, mode: this.mode, preselectToday: this.preselectToday, todayText: this.todayText, value: this._value, variant: 'embedded', onValueChange: ({ detail }) => (this.value = detail) }))));
+                }), onInput: ev => this._onNativeInput(ev) })), h("div", { key: '360edd69e71e6f308aea157491d3612bb3ea095f', slot: 'items', tabIndex: -1 }, h("p-calendar", { key: '0f1545e528dbf99bf47e3dc48d866d56522caae3', disableWeekends: this.disableWeekends, disabledDates: this.disabledDates, enableToday: this.enableToday, maxDate: this.maxDate, minDate: this.minDate, mode: this.mode, preselectToday: this.preselectToday, todayText: this.todayText, value: this._value, variant: 'embedded', onValueChange: ({ detail }) => (this.value = detail) }))));
     }
     documentClickHandler({ target }) {
         if (!this._showDropdown || childOf(target, this._el)) {

package/dist/collection/components/molecules/empty-state/empty-state.component.js

@@ -2,7 +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 emptyState = cva(['flex flex-col w-full items-center justify-start max-w-[20rem]'], {
+const emptyState = cva(['flex w-full max-w-[20rem] flex-col items-center justify-start'], {
     variants: {
         enableAction: {
             true: 'cursor-pointer',
@@ -63,7 +63,7 @@ export class EmptyState {
                 enableAction: asBoolean(this.enableAction, true),
             }), onClick: ev => this.enableAction && !this.actionLoading
                 ? this.action.emit(ev)
-                : undefined }, this.illustration && (h("p-illustration", { key: '3434e243bb9a41e7f56982fff2450cc92013b25f', class: 'mb-8 text-5xl text-indigo-600', variant: this.illustration })), hasHeaderSlot ? (h("slot", { name: 'header' })) : (this.header?.length && (h("p", { class: 'my-0 text-center font-ambit text-sm font-bold text-storm-500 dark:text-white' }, this.header))), hasContentSlot ? (h("slot", { name: 'content' })) : (this.content?.length && (h("p", { class: 'my-0 text-center text-sm font-normal text-storm-300 dark:text-hurricane-200' }, this.content))), this.enableAction &&
+                : undefined }, this.illustration && (h("p-illustration", { key: '3434e243bb9a41e7f56982fff2450cc92013b25f', class: 'mb-8 text-5xl text-indigo-600', variant: this.illustration })), hasHeaderSlot ? (h("slot", { name: 'header' })) : (this.header?.length && (h("p", { class: '\n          my-0 text-center font-ambit text-sm font-bold text-storm-500\n          dark:text-white\n        ' }, this.header))), hasContentSlot ? (h("slot", { name: 'content' })) : (this.content?.length && (h("p", { class: '\n          my-0 text-center text-sm font-normal text-storm-300\n          dark:text-hurricane-200\n        ' }, this.content))), this.enableAction &&
             (hasActionSlot ? (h("slot", { name: 'action' })) : (h("p-button", { class: 'mt-4', icon: this.actionIcon, iconPosition: this.actionIconPosition, loading: this.actionLoading, variant: this.actionVariant }, this.actionText))))));
     }
     static get is() { return "p-empty-state"; }

package/dist/collection/components/molecules/field/container/field-container.component.js

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import { ThemedHost } from "../../../../internal/themed-host.component";
 import { cn, formatTranslation, getLocaleComponentStrings, } from "../../../../utils";
 import { asBoolean } from "../../../../utils/as-boolean";
-const loader = cva(['rounded-lg w-full'], {
+const loader = cva(['w-full rounded-lg'], {
     variants: {
         variant: {
             read: null,
@@ -111,18 +111,21 @@ export class FieldContainer {
         }
         return (h(ThemedHost, { key: '9b4ab7a1d59cead07a2065b0d6bc72be41d24287' }, h("label", { key: 'ac31d16bdd75b4b236479638efd367f4771627d1', class: cn('flex w-inherit flex-col gap-1', {
                 'cursor-auto': this.variant === 'read',
-            }), htmlFor: this.id }, h("div", { key: '06a0c419582c71df7323bc3b0deb2d8a98541ca7', class: cn('flex items-end justify-between gap-1 empty:hidden', {
+            }), htmlFor: this.id }, h("div", { key: '512c7c3162d9a40483f5d43d7fbea5635c40b45d', class: cn(`
+         flex items-end justify-between gap-1
+         empty:hidden
+       `, {
                 'flex-row-reverse': this.align === 'end',
-            }) }, (!!label?.length || !!helper?.length) && (h("div", { key: '97d2b33bb04145650b000dde1859015361855fa3', class: 'flex min-w-0 gap-2', onClick: () => this.focus.emit() }, h("span", { key: '4a2fc2b62dba4fc7d4a5f816944996333cff2ca3', class: 'min-w-0 overflow-hidden text-ellipsis text-xs font-medium text-storm-300 dark:text-hurricane-200' }, label), helper && (h("p-helper", { key: '1638bb0c6c3683bd2bd0836b9f4fd0ca07561baf', class: 'flex flex-shrink-0', placement: 'top' }, helper)))), ((!asBoolean(this.required) && asBoolean(this.showOptional)) ||
-            hasHeaderSlot) && (h("div", { key: '4f9f56fc0951dab62bd75c4cc7ea724e17ec05aa', class: 'flex items-center gap-1' }, !asBoolean(this.required) &&
+            }) }, (!!label?.length || !!helper?.length) && (h("div", { key: '77b5887681e6537714b0352a02873a56ab22e304', class: 'flex min-w-0 gap-2', onClick: () => this.focus.emit() }, h("span", { key: '786e241b3537a05c4bf12f58333d5c10065879c3', class: '\n           min-w-0 overflow-hidden text-ellipsis text-xs font-medium\n           text-storm-300\n           dark:text-hurricane-200\n         ' }, label), helper && (h("p-helper", { key: 'd14700f7a78349ffb1de0a39bcb92ca9833e7f3b', class: 'flex flex-shrink-0', placement: 'top' }, helper)))), ((!asBoolean(this.required) && asBoolean(this.showOptional)) ||
+            hasHeaderSlot) && (h("div", { key: 'a3f63057ac68b62a68cf4d0b31b09039817ea87f', class: 'flex items-center gap-1' }, !asBoolean(this.required) &&
             asBoolean(this.showOptional) &&
-            this.variant === 'write' && (h("span", { key: '5a86b8751d683868f5c6f001571c184684014741', class: 'text-xs font-medium text-storm-200 dark:text-hurricane-300' }, this.optionalTemplate())), hasHeaderSlot && h("slot", { key: '2bb4125dfcf6a346259a64f5a92000413fcd13ab', name: 'header' })))), h("p-tooltip", { key: '9ddda9fc48a0d3e95ba9953c1787728692b04b27', class: cn({
+            this.variant === 'write' && (h("span", { key: '6e98ac54bcabfe7b4481b1745b7c25fbc0c1e717', class: '\n             text-xs font-medium text-storm-200\n             dark:text-hurricane-300\n           ' }, this.optionalTemplate())), hasHeaderSlot && h("slot", { key: 'e4b5a07a66a036c619d0a788c959a3d80af2f58c', name: 'header' })))), h("p-tooltip", { key: 'd482091d838534d3f3e3f177c9f5ccd605e8e519', class: cn({
                 'w-full': this.variant === 'write' || this.loading,
                 'ml-auto': this.align === 'end',
                 'font-normal': this.variant === 'read',
                 'text-storm-500 dark:text-white': this.variant === 'read',
             }), content: this.error, enableUserInput: false, placement: this.errorPlacement, show: errorAndErrorIsNotBoolean &&
-                asBoolean(this.forceShowTooltip, false), variant: 'error' }, hasErrorSlot && (h("slot", { key: '3670780d5e0907d655e282fbea6c43dcceea7e00', name: 'error', slot: 'content' })), contentSlot))));
+                asBoolean(this.forceShowTooltip, false), variant: 'error' }, hasErrorSlot && (h("slot", { key: '45fc720b8771ffca3ce381fcc98c162947aa1e71', name: 'error', slot: 'content' })), contentSlot))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);