@paperless/core 3.22.2 → 3.23.0

package/dist/types/components/atoms/stepper/item/stepper-item.component.d.ts

@@ -1,12 +1,21 @@
+import { IconVariant } from '../../../../types';
 export declare class StepperItem {
     /**
      * The number of the step
      */
     number: number;
+    /**
+     * Icon to show instead of the number
+     */
+    icon: IconVariant;
     /**
      * The direction of the item
      */
     direction: 'horizontal' | 'vertical';
+    /**
+     * The variant of the item
+     */
+    variant: 'default' | 'icon';
     /**
      * The alignment of the content in case of vertical direction
      */

package/dist/types/components/atoms/stepper/item/stepper-item.stories.d.ts

@@ -12,12 +12,14 @@ declare const meta: {
 };
 export default meta;
 export declare const Default: {
-    render: ({ align, direction, "content-position": contentPosition, finished, active, content, }: {
+    render: ({ align, direction, "content-position": contentPosition, finished, active, content, icon, variant }: {
         align: any;
         direction: any;
         "content-position": any;
         finished: any;
         active: any;
         content: any;
+        icon: any;
+        variant: any;
     }) => import("lit-html").TemplateResult<1>;
 };

package/dist/types/components/organisms/stepper/stepper.component.d.ts

@@ -1,9 +1,15 @@
+import { IconVariant } from '../../../types';
 export interface StepperStepItemObj {
+    icon?: IconVariant;
     content: string;
     active: boolean;
     finished: boolean;
 }
 export declare class Stepper {
+    /**
+     * The variant of the item
+     */
+    variant: 'default' | 'icon';
     /**
      * The steps but as a property, can also be used via slot
      */

package/dist/types/components/organisms/stepper/stepper.stories.d.ts

@@ -15,18 +15,20 @@ declare const meta: {
 };
 export default meta;
 export declare const Horizontal: {
-    render: ({ "active-step": activeStep, "enable-auto-status": enableAutoStatus, "content-position": contentPosition, steps, }: {
+    render: ({ "active-step": activeStep, "enable-auto-status": enableAutoStatus, "content-position": contentPosition, steps, variant, }: {
         "active-step": any;
         "enable-auto-status": any;
         "content-position": any;
         steps: any;
+        variant: any;
     }) => import("lit-html").TemplateResult<1>;
 };
 export declare const Vertical: {
-    render: ({ "active-step": activeStep, "enable-auto-status": enableAutoStatus, "content-position": contentPosition, align, }: {
+    render: ({ "active-step": activeStep, "enable-auto-status": enableAutoStatus, "content-position": contentPosition, align, variant, }: {
         "active-step": any;
         "enable-auto-status": any;
         "content-position": any;
         align: any;
+        variant: any;
     }) => import("lit-html").TemplateResult<1>;
 };

package/dist/types/components.d.ts

@@ -1944,6 +1944,11 @@ export namespace Components {
           * The steps but as a property, can also be used via slot
          */
         "steps": string | string[] | StepperStepItemObj[];
+        /**
+          * The variant of the item
+          * @default 'default'
+         */
+        "variant": 'default' | 'icon';
     }
     interface PStepperItem {
         /**
@@ -1971,11 +1976,20 @@ export namespace Components {
           * @default false
          */
         "finished": boolean;
+        /**
+          * Icon to show instead of the number
+         */
+        "icon": IconVariant;
         /**
           * The number of the step
           * @default 1
          */
         "number": number;
+        /**
+          * The variant of the item
+          * @default 'default'
+         */
+        "variant": 'default' | 'icon';
     }
     interface PStepperLine {
         /**
@@ -5909,6 +5923,11 @@ declare namespace LocalJSX {
           * The steps but as a property, can also be used via slot
          */
         "steps"?: string | string[] | StepperStepItemObj[];
+        /**
+          * The variant of the item
+          * @default 'default'
+         */
+        "variant"?: 'default' | 'icon';
     }
     interface PStepperItem {
         /**
@@ -5936,11 +5955,20 @@ declare namespace LocalJSX {
           * @default false
          */
         "finished"?: boolean;
+        /**
+          * Icon to show instead of the number
+         */
+        "icon"?: IconVariant;
         /**
           * The number of the step
           * @default 1
          */
         "number"?: number;
+        /**
+          * The variant of the item
+          * @default 'default'
+         */
+        "variant"?: 'default' | 'icon';
     }
     interface PStepperLine {
         /**

package/hydrate/index.js

@@ -99865,7 +99865,7 @@ class Smile {
     }; }
 }
 
-const stepperComponentCss = () => `*{box-sizing:border-box}.static{position:static}.flex{display:flex}.h-auto{height:auto}.w-full{width:100%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.gap-2{gap:.5rem}.opacity-0{opacity:0}.opacity-100{opacity:1}`;
+const stepperComponentCss = () => `*{box-sizing:border-box}.static{position:static}.flex{display:flex}.h-auto{height:auto}.w-full{width:100%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.gap-2{gap:.5rem}.text-indigo-600{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity,1))}.text-storm-100{--tw-text-opacity:1;color:rgb(209 210 212/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.dark\\:text-hurricane-300:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.dark\\:text-hurricane-300:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}`;
 
 const stepper = cva(['flex gap-2'], {
     variants: {
@@ -99883,6 +99883,10 @@ class Stepper {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    /**
+     * The variant of the item
+     */
+    variant = 'default';
     /**
      * The steps but as a property, can also be used via slot
      */
@@ -99971,10 +99975,18 @@ class Stepper {
     }
     _getItem(data, i) {
         const activeStep = this.activeStep - 1 || 0;
-        return (hAsync("p-stepper-item", { active: this.enableAutoStatus ? i === activeStep : data.active, align: this.direction === 'vertical' ? this.align : 'start', contentPosition: this.contentPosition, finished: this.enableAutoStatus ? i < activeStep : data.finished, number: i + 1 }, data.content));
+        return (hAsync("p-stepper-item", { active: this.enableAutoStatus ? i === activeStep : data.active, align: this.direction === 'vertical' ? this.align : 'start', contentPosition: this.contentPosition, finished: this.enableAutoStatus ? i < activeStep : data.finished, icon: data.icon, number: i + 1, variant: this.variant }, data.content));
     }
     _getLine(i) {
         const activeStep = this.activeStep - 1 || 0;
+        if (this.variant === 'icon') {
+            return (hAsync("p-icon", { class: i < activeStep
+                    ? 'text-indigo-600'
+                    : `
+         text-storm-100
+         dark:text-hurricane-300
+       `, rotate: this.direction === 'vertical' ? 0 : -90, variant: 'caret' }));
+        }
         return (hAsync("p-stepper-line", { active: i < activeStep, direction: this.direction }));
     }
     _checkItems(items) {
@@ -99989,6 +100001,7 @@ class Stepper {
             item.align = this.direction === 'vertical' ? this.align : 'start';
             item.direction = this.direction;
             item.contentPosition = this.contentPosition;
+            item.variant = this.variant;
         }
     }
     _generateLinesOnce() {
@@ -100097,6 +100110,7 @@ class Stepper {
         "$flags$": 777,
         "$tagName$": "p-stepper",
         "$members$": {
+            "variant": [1],
             "steps": [1],
             "activeStep": [2, "active-step"],
             "enableAutoStatus": [4, "enable-auto-status"],
@@ -100112,7 +100126,7 @@ class Stepper {
     }; }
 }
 
-const stepperItemComponentCss = () => `*{box-sizing:border-box}.static{position:static}.mb-5{margin-bottom:1.25rem}.mt-5{margin-top:1.25rem}.mt-\\[1px\\]{margin-top:1px}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-1{flex:1 1 0%}.flex-row-reverse{flex-direction:row-reverse}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-solid{border-style:solid}.border-indigo-600{--tw-border-opacity:1;border-color:rgb(82 138 250/var(--tw-border-opacity,1))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.font-medium{font-weight:500}.text-indigo-600{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity,1))}.text-storm-400{--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}@media (min-width:64rem){.desktop-xs\\:inline-block{display:inline-block}}.dark\\:border-white\\/15:where(:host([data-theme=dark]),:host([data-theme=dark]) *){border-color:hsla(0,0%,100%,.15)}.dark\\:bg-white\\/15:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:hsla(0,0%,100%,.15)}.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-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\\:border-white\\/15:where([data-theme=dark],[data-theme=dark] *){border-color:hsla(0,0%,100%,.15)}.dark\\:bg-white\\/15:where([data-theme=dark],[data-theme=dark] *){background-color:hsla(0,0%,100%,.15)}.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))}.dark\\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}`;
+const stepperItemComponentCss = () => `*{box-sizing:border-box}.static{position:static}.mb-5{margin-bottom:1.25rem}.mt-5{margin-top:1.25rem}.mt-\\[1px\\]{margin-top:1px}.flex{display:flex}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.size-8{height:2rem;width:2rem}.flex-1{flex:1 1 0%}.flex-row-reverse{flex-direction:row-reverse}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-solid{border-style:solid}.border-indigo-600{--tw-border-opacity:1;border-color:rgb(82 138 250/var(--tw-border-opacity,1))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(142 179 251/var(--tw-bg-opacity,1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-indigo-600{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity,1))}.text-storm-200{--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.text-storm-300{--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.text-storm-400{--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}@media (min-width:64rem){.desktop-xs\\:inline-block{display:inline-block}}.dark\\:border-white\\/15:where(:host([data-theme=dark]),:host([data-theme=dark]) *){border-color:hsla(0,0%,100%,.15)}.dark\\:bg-white\\/15:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:hsla(0,0%,100%,.15)}.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-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\\:border-white\\/15:where([data-theme=dark],[data-theme=dark] *){border-color:hsla(0,0%,100%,.15)}.dark\\:bg-white\\/15:where([data-theme=dark],[data-theme=dark] *){background-color:hsla(0,0%,100%,.15)}.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))}.dark\\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}`;
 
 const item$1 = cva('flex gap-2', {
     variants: {
@@ -100128,9 +100142,8 @@ const item$1 = cva('flex gap-2', {
     },
 });
 const circle$1 = cva([
-    'flex h-6 w-6 items-center justify-center',
+    'flex items-center justify-center',
     'text-center text-sm font-medium',
-    'border border-solid',
     'rounded-full',
 ], {
     variants: {
@@ -100151,11 +100164,17 @@ const circle$1 = cva([
             true: null,
             false: null,
         },
+        variant: {
+            default: ['size-6', 'border border-solid'],
+            icon: 'size-8',
+        },
     },
     compoundVariants: [
+        // default variant colors
         {
             finished: false,
             active: false,
+            variant: 'default',
             class: [
                 'border-indigo-600 bg-indigo-50 text-indigo-600',
                 'dark:border-white/15 dark:bg-white/15 dark:text-hurricane-200',
@@ -100164,13 +100183,37 @@ const circle$1 = cva([
         {
             active: true,
             finished: false,
+            variant: 'default',
             class: 'border-indigo-600 bg-indigo-600 text-white',
         },
         {
             active: false,
             finished: true,
+            variant: 'default',
             class: 'border-indigo-600 bg-indigo-600 text-white',
         },
+        // icon variant colors
+        {
+            finished: false,
+            active: false,
+            variant: 'icon',
+            class: [
+                'bg-indigo-100 text-storm-200',
+                'dark:bg-white/15 dark:text-hurricane-200',
+            ],
+        },
+        {
+            active: true,
+            finished: false,
+            variant: 'icon',
+            class: 'bg-indigo-500 text-storm-500',
+        },
+        {
+            active: false,
+            finished: true,
+            variant: 'icon',
+            class: 'bg-indigo-100 text-indigo-600',
+        },
         {
             direction: 'vertical',
             align: 'start',
@@ -100183,7 +100226,7 @@ const circle$1 = cva([
         },
     ],
 });
-const content$2 = cva('mt-[1px] flex-1 text-sm font-medium', {
+const content$2 = cva('mt-[1px] flex-1 text-sm', {
     variants: {
         finished: {
             true: null,
@@ -100197,11 +100240,17 @@ const content$2 = cva('mt-[1px] flex-1 text-sm font-medium', {
             horizontal: null,
             vertical: null,
         },
+        variant: {
+            default: 'font-medium',
+            icon: 'font-semibold',
+        },
     },
     compoundVariants: [
+        // default variant
         {
             finished: false,
             active: false,
+            variant: 'default',
             class: `
      text-storm-400
      dark:text-hurricane-200
@@ -100210,6 +100259,7 @@ const content$2 = cva('mt-[1px] flex-1 text-sm font-medium', {
         {
             active: true,
             finished: false,
+            variant: 'default',
             class: `
      text-storm-500
      dark:text-white
@@ -100218,6 +100268,24 @@ const content$2 = cva('mt-[1px] flex-1 text-sm font-medium', {
         {
             active: false,
             finished: true,
+            variant: 'default',
+            class: `
+     text-storm-500
+     dark:text-white
+   `,
+        },
+        // icon variant
+        {
+            active: false,
+            variant: 'icon',
+            class: `
+     text-storm-300
+     dark:text-hurricane-200
+   `,
+        },
+        {
+            active: true,
+            variant: 'icon',
             class: `
      text-storm-500
      dark:text-white
@@ -100241,10 +100309,18 @@ class StepperItem {
      * The number of the step
      */
     number = 1;
+    /**
+     * Icon to show instead of the number
+     */
+    icon;
     /**
      * The direction of the item
      */
     direction = 'horizontal';
+    /**
+     * The variant of the item
+     */
+    variant = 'default';
     /**
      * The alignment of the content in case of vertical direction
      */
@@ -100262,19 +100338,21 @@ class StepperItem {
      */
     active = false;
     render() {
-        return (hAsync(ThemedHost, { key: '5012c9d710066816ef50553aace01c6297894515' }, hAsync("div", { key: '294e352030f1d44642d3f0fe0ce044bf4b8a1d58', class: item$1({
-                align: this.align,
+        return (hAsync(ThemedHost, { key: '367d59656e6767f50c1c7aefab806f15c024e296' }, hAsync("div", { key: '622a892f8241c64d1b38bad2c5850d3cf24e1c33', class: item$1({
+                align: this.variant === 'default' ? this.align : 'center',
                 contentPosition: this.contentPosition,
-            }) }, hAsync("div", { key: 'a373a9e423628fe246ea1978d0036f679528aef8', class: circle$1({
+            }) }, hAsync("div", { key: '199eb6369e37094d21e6bc5f74facee3a8d5b6ac', class: circle$1({
                 align: this.align,
                 direction: this.direction,
                 active: asBoolean(this.active),
                 finished: asBoolean(this.finished),
-            }) }, this.number), hAsync("div", { key: 'c99e661d3b6be8ef7ea5462914e8facc8b496a57', class: content$2({
+                variant: this.variant,
+            }) }, this.variant === 'icon' && (this.icon || this.finished) ? (hAsync("p-icon", { variant: this.finished ? 'checkmark' : this.icon })) : (this.number)), hAsync("div", { key: '7b5349a6e9719c14f57834909912587202c6725b', class: content$2({
                 active: asBoolean(this.active),
                 finished: asBoolean(this.finished),
                 direction: this.direction,
-            }) }, hAsync("slot", { key: '22fb20a110ad1d27dc352b384577ef03adae0316' })))));
+                variant: this.variant,
+            }) }, hAsync("slot", { key: '5a7ed0fa8acc0af1bf53f0c935c2b114a8efefc7' })))));
     }
     static get style() { return stepperItemComponentCss(); }
     static get cmpMeta() { return {
@@ -100282,7 +100360,9 @@ class StepperItem {
         "$tagName$": "p-stepper-item",
         "$members$": {
             "number": [2],
+            "icon": [1],
             "direction": [1],
+            "variant": [1],
             "align": [1],
             "contentPosition": [1, "content-position"],
             "finished": [4],

package/hydrate/index.mjs

@@ -99863,7 +99863,7 @@ class Smile {
     }; }
 }
 
-const stepperComponentCss = () => `*{box-sizing:border-box}.static{position:static}.flex{display:flex}.h-auto{height:auto}.w-full{width:100%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.gap-2{gap:.5rem}.opacity-0{opacity:0}.opacity-100{opacity:1}`;
+const stepperComponentCss = () => `*{box-sizing:border-box}.static{position:static}.flex{display:flex}.h-auto{height:auto}.w-full{width:100%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.gap-2{gap:.5rem}.text-indigo-600{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity,1))}.text-storm-100{--tw-text-opacity:1;color:rgb(209 210 212/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.dark\\:text-hurricane-300:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.dark\\:text-hurricane-300:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}`;
 
 const stepper = cva(['flex gap-2'], {
     variants: {
@@ -99881,6 +99881,10 @@ class Stepper {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    /**
+     * The variant of the item
+     */
+    variant = 'default';
     /**
      * The steps but as a property, can also be used via slot
      */
@@ -99969,10 +99973,18 @@ class Stepper {
     }
     _getItem(data, i) {
         const activeStep = this.activeStep - 1 || 0;
-        return (hAsync("p-stepper-item", { active: this.enableAutoStatus ? i === activeStep : data.active, align: this.direction === 'vertical' ? this.align : 'start', contentPosition: this.contentPosition, finished: this.enableAutoStatus ? i < activeStep : data.finished, number: i + 1 }, data.content));
+        return (hAsync("p-stepper-item", { active: this.enableAutoStatus ? i === activeStep : data.active, align: this.direction === 'vertical' ? this.align : 'start', contentPosition: this.contentPosition, finished: this.enableAutoStatus ? i < activeStep : data.finished, icon: data.icon, number: i + 1, variant: this.variant }, data.content));
     }
     _getLine(i) {
         const activeStep = this.activeStep - 1 || 0;
+        if (this.variant === 'icon') {
+            return (hAsync("p-icon", { class: i < activeStep
+                    ? 'text-indigo-600'
+                    : `
+         text-storm-100
+         dark:text-hurricane-300
+       `, rotate: this.direction === 'vertical' ? 0 : -90, variant: 'caret' }));
+        }
         return (hAsync("p-stepper-line", { active: i < activeStep, direction: this.direction }));
     }
     _checkItems(items) {
@@ -99987,6 +99999,7 @@ class Stepper {
             item.align = this.direction === 'vertical' ? this.align : 'start';
             item.direction = this.direction;
             item.contentPosition = this.contentPosition;
+            item.variant = this.variant;
         }
     }
     _generateLinesOnce() {
@@ -100095,6 +100108,7 @@ class Stepper {
         "$flags$": 777,
         "$tagName$": "p-stepper",
         "$members$": {
+            "variant": [1],
             "steps": [1],
             "activeStep": [2, "active-step"],
             "enableAutoStatus": [4, "enable-auto-status"],
@@ -100110,7 +100124,7 @@ class Stepper {
     }; }
 }
 
-const stepperItemComponentCss = () => `*{box-sizing:border-box}.static{position:static}.mb-5{margin-bottom:1.25rem}.mt-5{margin-top:1.25rem}.mt-\\[1px\\]{margin-top:1px}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-1{flex:1 1 0%}.flex-row-reverse{flex-direction:row-reverse}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-solid{border-style:solid}.border-indigo-600{--tw-border-opacity:1;border-color:rgb(82 138 250/var(--tw-border-opacity,1))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.font-medium{font-weight:500}.text-indigo-600{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity,1))}.text-storm-400{--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}@media (min-width:64rem){.desktop-xs\\:inline-block{display:inline-block}}.dark\\:border-white\\/15:where(:host([data-theme=dark]),:host([data-theme=dark]) *){border-color:hsla(0,0%,100%,.15)}.dark\\:bg-white\\/15:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:hsla(0,0%,100%,.15)}.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-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\\:border-white\\/15:where([data-theme=dark],[data-theme=dark] *){border-color:hsla(0,0%,100%,.15)}.dark\\:bg-white\\/15:where([data-theme=dark],[data-theme=dark] *){background-color:hsla(0,0%,100%,.15)}.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))}.dark\\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}`;
+const stepperItemComponentCss = () => `*{box-sizing:border-box}.static{position:static}.mb-5{margin-bottom:1.25rem}.mt-5{margin-top:1.25rem}.mt-\\[1px\\]{margin-top:1px}.flex{display:flex}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.size-8{height:2rem;width:2rem}.flex-1{flex:1 1 0%}.flex-row-reverse{flex-direction:row-reverse}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-solid{border-style:solid}.border-indigo-600{--tw-border-opacity:1;border-color:rgb(82 138 250/var(--tw-border-opacity,1))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(142 179 251/var(--tw-bg-opacity,1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-indigo-600{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity,1))}.text-storm-200{--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.text-storm-300{--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.text-storm-400{--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}@media (min-width:64rem){.desktop-xs\\:inline-block{display:inline-block}}.dark\\:border-white\\/15:where(:host([data-theme=dark]),:host([data-theme=dark]) *){border-color:hsla(0,0%,100%,.15)}.dark\\:bg-white\\/15:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:hsla(0,0%,100%,.15)}.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-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\\:border-white\\/15:where([data-theme=dark],[data-theme=dark] *){border-color:hsla(0,0%,100%,.15)}.dark\\:bg-white\\/15:where([data-theme=dark],[data-theme=dark] *){background-color:hsla(0,0%,100%,.15)}.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))}.dark\\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}`;
 
 const item$1 = cva('flex gap-2', {
     variants: {
@@ -100126,9 +100140,8 @@ const item$1 = cva('flex gap-2', {
     },
 });
 const circle$1 = cva([
-    'flex h-6 w-6 items-center justify-center',
+    'flex items-center justify-center',
     'text-center text-sm font-medium',
-    'border border-solid',
     'rounded-full',
 ], {
     variants: {
@@ -100149,11 +100162,17 @@ const circle$1 = cva([
             true: null,
             false: null,
         },
+        variant: {
+            default: ['size-6', 'border border-solid'],
+            icon: 'size-8',
+        },
     },
     compoundVariants: [
+        // default variant colors
         {
             finished: false,
             active: false,
+            variant: 'default',
             class: [
                 'border-indigo-600 bg-indigo-50 text-indigo-600',
                 'dark:border-white/15 dark:bg-white/15 dark:text-hurricane-200',
@@ -100162,13 +100181,37 @@ const circle$1 = cva([
         {
             active: true,
             finished: false,
+            variant: 'default',
             class: 'border-indigo-600 bg-indigo-600 text-white',
         },
         {
             active: false,
             finished: true,
+            variant: 'default',
             class: 'border-indigo-600 bg-indigo-600 text-white',
         },
+        // icon variant colors
+        {
+            finished: false,
+            active: false,
+            variant: 'icon',
+            class: [
+                'bg-indigo-100 text-storm-200',
+                'dark:bg-white/15 dark:text-hurricane-200',
+            ],
+        },
+        {
+            active: true,
+            finished: false,
+            variant: 'icon',
+            class: 'bg-indigo-500 text-storm-500',
+        },
+        {
+            active: false,
+            finished: true,
+            variant: 'icon',
+            class: 'bg-indigo-100 text-indigo-600',
+        },
         {
             direction: 'vertical',
             align: 'start',
@@ -100181,7 +100224,7 @@ const circle$1 = cva([
         },
     ],
 });
-const content$2 = cva('mt-[1px] flex-1 text-sm font-medium', {
+const content$2 = cva('mt-[1px] flex-1 text-sm', {
     variants: {
         finished: {
             true: null,
@@ -100195,11 +100238,17 @@ const content$2 = cva('mt-[1px] flex-1 text-sm font-medium', {
             horizontal: null,
             vertical: null,
         },
+        variant: {
+            default: 'font-medium',
+            icon: 'font-semibold',
+        },
     },
     compoundVariants: [
+        // default variant
         {
             finished: false,
             active: false,
+            variant: 'default',
             class: `
      text-storm-400
      dark:text-hurricane-200
@@ -100208,6 +100257,7 @@ const content$2 = cva('mt-[1px] flex-1 text-sm font-medium', {
         {
             active: true,
             finished: false,
+            variant: 'default',
             class: `
      text-storm-500
      dark:text-white
@@ -100216,6 +100266,24 @@ const content$2 = cva('mt-[1px] flex-1 text-sm font-medium', {
         {
             active: false,
             finished: true,
+            variant: 'default',
+            class: `
+     text-storm-500
+     dark:text-white
+   `,
+        },
+        // icon variant
+        {
+            active: false,
+            variant: 'icon',
+            class: `
+     text-storm-300
+     dark:text-hurricane-200
+   `,
+        },
+        {
+            active: true,
+            variant: 'icon',
             class: `
      text-storm-500
      dark:text-white
@@ -100239,10 +100307,18 @@ class StepperItem {
      * The number of the step
      */
     number = 1;
+    /**
+     * Icon to show instead of the number
+     */
+    icon;
     /**
      * The direction of the item
      */
     direction = 'horizontal';
+    /**
+     * The variant of the item
+     */
+    variant = 'default';
     /**
      * The alignment of the content in case of vertical direction
      */
@@ -100260,19 +100336,21 @@ class StepperItem {
      */
     active = false;
     render() {
-        return (hAsync(ThemedHost, { key: '5012c9d710066816ef50553aace01c6297894515' }, hAsync("div", { key: '294e352030f1d44642d3f0fe0ce044bf4b8a1d58', class: item$1({
-                align: this.align,
+        return (hAsync(ThemedHost, { key: '367d59656e6767f50c1c7aefab806f15c024e296' }, hAsync("div", { key: '622a892f8241c64d1b38bad2c5850d3cf24e1c33', class: item$1({
+                align: this.variant === 'default' ? this.align : 'center',
                 contentPosition: this.contentPosition,
-            }) }, hAsync("div", { key: 'a373a9e423628fe246ea1978d0036f679528aef8', class: circle$1({
+            }) }, hAsync("div", { key: '199eb6369e37094d21e6bc5f74facee3a8d5b6ac', class: circle$1({
                 align: this.align,
                 direction: this.direction,
                 active: asBoolean(this.active),
                 finished: asBoolean(this.finished),
-            }) }, this.number), hAsync("div", { key: 'c99e661d3b6be8ef7ea5462914e8facc8b496a57', class: content$2({
+                variant: this.variant,
+            }) }, this.variant === 'icon' && (this.icon || this.finished) ? (hAsync("p-icon", { variant: this.finished ? 'checkmark' : this.icon })) : (this.number)), hAsync("div", { key: '7b5349a6e9719c14f57834909912587202c6725b', class: content$2({
                 active: asBoolean(this.active),
                 finished: asBoolean(this.finished),
                 direction: this.direction,
-            }) }, hAsync("slot", { key: '22fb20a110ad1d27dc352b384577ef03adae0316' })))));
+                variant: this.variant,
+            }) }, hAsync("slot", { key: '5a7ed0fa8acc0af1bf53f0c935c2b114a8efefc7' })))));
     }
     static get style() { return stepperItemComponentCss(); }
     static get cmpMeta() { return {
@@ -100280,7 +100358,9 @@ class StepperItem {
         "$tagName$": "p-stepper-item",
         "$members$": {
             "number": [2],
+            "icon": [1],
             "direction": [1],
+            "variant": [1],
             "align": [1],
             "contentPosition": [1, "content-position"],
             "finished": [4],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@paperless/core",
-	"version": "3.22.2",
+	"version": "3.23.0",
 	"description": "Stencil Component Starter",
 	"type": "module",
 	"main": "dist/index.cjs.js",