@paperless/core 2.0.1-beta.31 → 2.0.1-beta.33

package/dist/types/components/molecules/field/field.component.d.ts

@@ -6,27 +6,31 @@ import { IconFlipOptions, IconVariant } from '../../atoms/icon/icon.component';
 import { templateFunc } from '../field-container/field-container.component';
 export declare class Field {
     /**
-     * The size of the input group
+     * The variant of the field
+     */
+    variant: 'read' | 'write';
+    /**
+     * The size of the field
      */
     size: 'sm' | 'base';
     /**
-     * The type of the input group
+     * The type of the field
      */
     type: HTMLInputTypeAttribute | 'textarea' | 'slot';
     /**
-     * The size of the input group
+     * The size of the field
      */
     properties: any | string;
     /**
-     * The prefix of the input group
+     * The prefix of the field
      */
     prefix: string;
     /**
-     * The suffix of the input group
+     * The suffix of the field
      */
     suffix: string;
     /**
-     * Icon of the input group
+     * Icon of the field
      */
     icon: IconVariant;
     /**
@@ -45,7 +49,7 @@ export declare class Field {
      */
     value: string;
     /**
-     * The label of the input group
+     * The label of the field
      */
     label: string;
     /**
@@ -53,7 +57,7 @@ export declare class Field {
      */
     placeholder: string;
     /**
-     * The helper of the input group
+     * The helper of the field
      */
     helper: string;
     /**
@@ -73,11 +77,11 @@ export declare class Field {
      */
     errorPlacement: Placement;
     /**
-     * Wether the input group is disabled
+     * Wether the field is disabled
      */
     disabled: boolean;
     /**
-     * Wether the input group is focused
+     * Wether the field is focused
      */
     focused: boolean;
     /**
@@ -115,7 +119,7 @@ export declare class Field {
     handleFocusIn(): void;
     handleFocusOut(): void;
     private _getSlotInfo;
-    private _getInput;
+    private _getContent;
     private _setInputRef;
     private _focusInput;
     private _selectAll;

package/dist/types/components/molecules/field-container/field-container.component.d.ts

@@ -7,6 +7,10 @@ export declare class FieldContainer {
      * The label of the input group
      */
     label: string | HTMLSlotElement;
+    /**
+     * The variant of the field container
+     */
+    variant: 'read' | 'write';
     /**
      * The helper of the input group
      */

package/dist/types/components.d.ts

@@ -615,7 +615,7 @@ export namespace Components {
          */
         "autofocus": boolean;
         /**
-          * Wether the input group is disabled
+          * Wether the field is disabled
          */
         "disabled": boolean;
         /**
@@ -631,7 +631,7 @@ export namespace Components {
          */
         "focusMethod": 'focus' | 'click';
         /**
-          * Wether the input group is focused
+          * Wether the field is focused
          */
         "focused": boolean;
         /**
@@ -639,11 +639,11 @@ export namespace Components {
          */
         "forceShowTooltip": boolean;
         /**
-          * The helper of the input group
+          * The helper of the field
          */
         "helper": string;
         /**
-          * Icon of the input group
+          * Icon of the field
          */
         "icon": IconVariant;
         /**
@@ -659,7 +659,7 @@ export namespace Components {
          */
         "iconRotate": RotateOptions;
         /**
-          * The label of the input group
+          * The label of the field
          */
         "label": string;
         /**
@@ -671,11 +671,11 @@ export namespace Components {
          */
         "placeholder": string;
         /**
-          * The prefix of the input group
+          * The prefix of the field
          */
         "prefix": string;
         /**
-          * The size of the input group
+          * The size of the field
          */
         "properties": any | string;
         /**
@@ -687,21 +687,25 @@ export namespace Components {
          */
         "selectAllOnFocus": boolean;
         /**
-          * The size of the input group
+          * The size of the field
          */
         "size": 'sm' | 'base';
         /**
-          * The suffix of the input group
+          * The suffix of the field
          */
         "suffix": string;
         /**
-          * The type of the input group
+          * The type of the field
          */
         "type": HTMLInputTypeAttribute | 'textarea' | 'slot';
         /**
           * The value of the input
          */
         "value": string;
+        /**
+          * The variant of the field
+         */
+        "variant": 'read' | 'write';
     }
     interface PFieldContainer {
         /**
@@ -732,6 +736,10 @@ export namespace Components {
           * Wether the field is required
          */
         "required": boolean;
+        /**
+          * The variant of the field container
+         */
+        "variant": 'read' | 'write';
     }
     interface PFloatingMenuContainer {
         /**
@@ -3553,7 +3561,7 @@ declare namespace LocalJSX {
          */
         "autofocus"?: boolean;
         /**
-          * Wether the input group is disabled
+          * Wether the field is disabled
          */
         "disabled"?: boolean;
         /**
@@ -3569,7 +3577,7 @@ declare namespace LocalJSX {
          */
         "focusMethod"?: 'focus' | 'click';
         /**
-          * Wether the input group is focused
+          * Wether the field is focused
          */
         "focused"?: boolean;
         /**
@@ -3577,11 +3585,11 @@ declare namespace LocalJSX {
          */
         "forceShowTooltip"?: boolean;
         /**
-          * The helper of the input group
+          * The helper of the field
          */
         "helper"?: string;
         /**
-          * Icon of the input group
+          * Icon of the field
          */
         "icon"?: IconVariant;
         /**
@@ -3597,7 +3605,7 @@ declare namespace LocalJSX {
          */
         "iconRotate"?: RotateOptions;
         /**
-          * The label of the input group
+          * The label of the field
          */
         "label"?: string;
         /**
@@ -3617,11 +3625,11 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * The prefix of the input group
+          * The prefix of the field
          */
         "prefix"?: string;
         /**
-          * The size of the input group
+          * The size of the field
          */
         "properties"?: any | string;
         /**
@@ -3633,21 +3641,25 @@ declare namespace LocalJSX {
          */
         "selectAllOnFocus"?: boolean;
         /**
-          * The size of the input group
+          * The size of the field
          */
         "size"?: 'sm' | 'base';
         /**
-          * The suffix of the input group
+          * The suffix of the field
          */
         "suffix"?: string;
         /**
-          * The type of the input group
+          * The type of the field
          */
         "type"?: HTMLInputTypeAttribute | 'textarea' | 'slot';
         /**
           * The value of the input
          */
         "value"?: string;
+        /**
+          * The variant of the field
+         */
+        "variant"?: 'read' | 'write';
     }
     interface PFieldContainer {
         /**
@@ -3679,6 +3691,10 @@ declare namespace LocalJSX {
           * Wether the field is required
          */
         "required"?: boolean;
+        /**
+          * The variant of the field container
+         */
+        "variant"?: 'read' | 'write';
     }
     interface PFloatingMenuContainer {
         /**

package/hydrate/index.js

@@ -12138,7 +12138,7 @@ const nonce = (length) => {
     return result;
 };
 
-const checkboxComponentCss = "*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-1\\/2{left:50%!important}.top-1\\/2{top:50%!important}.m-0{margin:0!important}.flex{display:flex!important}.hidden{display:none!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.w-4{width:1rem!important}.w-6{width:1.5rem!important}.flex-shrink-0{flex-shrink:0!important}.-translate-x-1\\/2{--tw-translate-x:-50%!important}.-translate-x-1\\/2,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-translate-y-1\\/2{--tw-translate-y:-50%!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.appearance-none{appearance:none!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.gap-2{gap:.5rem!important}.rounded{border-radius:.25rem!important}.rounded-lg{border-radius:.5rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-black-teal-100{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.border-black-teal-50{--tw-border-opacity:1!important;border-color:rgb(230 234 233/var(--tw-border-opacity,1))!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-black-teal-200{--tw-text-opacity:1!important;color:rgb(154 170 167/var(--tw-text-opacity,1))!important}.text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.shadow-1{--tw-shadow:0 1px 1px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.drop-shadow-black-teal-10\\%{--tw-drop-shadow:drop-shadow(0px 1px 0px rgba(3,42,36,.1))!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.checked\\:border-black-teal\\/20:checked{border-color:rgba(3,42,36,.2)!important}.checked\\:bg-supportive-lilac:checked{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.checked\\:ring-2:checked{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.checked\\:ring-supportive-lilac-100:checked{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.indeterminate\\:border-black-teal\\/20:indeterminate{border-color:rgba(3,42,36,.2)!important}.indeterminate\\:bg-supportive-lilac:indeterminate{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.indeterminate\\:ring-2:indeterminate{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.indeterminate\\:ring-supportive-lilac-100:indeterminate{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.hover\\:border-black-teal-100:hover{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.hover\\:bg-supportive-lilac-100:hover{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.checked\\:hover\\:border-black-teal\\/20:hover:checked{border-color:rgba(3,42,36,.2)!important}.checked\\:hover\\:bg-supportive-lilac:hover:checked{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.indeterminate\\:hover\\:border-black-teal\\/20:hover:indeterminate{border-color:rgba(3,42,36,.2)!important}.indeterminate\\:hover\\:bg-supportive-lilac:hover:indeterminate{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.peer:checked~.peer-checked\\:flex{display:flex!important}.peer:indeterminate~.peer-indeterminate\\:flex{display:flex!important}";
+const checkboxComponentCss = "*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-1\\/2{left:50%!important}.top-1\\/2{top:50%!important}.m-0{margin:0!important}.flex{display:flex!important}.hidden{display:none!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.w-4{width:1rem!important}.w-6{width:1.5rem!important}.flex-shrink-0{flex-shrink:0!important}.-translate-x-1\\/2{--tw-translate-x:-50%!important}.-translate-x-1\\/2,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-translate-y-1\\/2{--tw-translate-y:-50%!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.appearance-none{appearance:none!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.gap-2{gap:.5rem!important}.rounded{border-radius:.25rem!important}.rounded-lg{border-radius:.5rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-black-teal-100{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.border-black-teal-50{--tw-border-opacity:1!important;border-color:rgb(230 234 233/var(--tw-border-opacity,1))!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-black-teal-200{--tw-text-opacity:1!important;color:rgb(154 170 167/var(--tw-text-opacity,1))!important}.text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.shadow-1{--tw-shadow:0 1px 1px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.drop-shadow-black-teal-10\\%{--tw-drop-shadow:drop-shadow(0px 1px 0px rgba(3,42,36,.1))!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.checked\\:border-black-teal\\/20:checked{border-color:rgba(3,42,36,.2)!important}.checked\\:bg-supportive-lilac:checked{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.checked\\:ring-2:checked{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.checked\\:ring-supportive-lilac-100:checked{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.indeterminate\\:border-black-teal\\/20:indeterminate{border-color:rgba(3,42,36,.2)!important}.indeterminate\\:bg-supportive-lilac-700:indeterminate{--tw-bg-opacity:1!important;background-color:rgb(200 159 255/var(--tw-bg-opacity,1))!important}.indeterminate\\:ring-2:indeterminate{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.indeterminate\\:ring-supportive-lilac-100:indeterminate{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.hover\\:border-black-teal-100:hover{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.hover\\:bg-supportive-lilac-100:hover{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.checked\\:hover\\:border-black-teal\\/20:hover:checked{border-color:rgba(3,42,36,.2)!important}.checked\\:hover\\:bg-supportive-lilac-700:hover:checked{--tw-bg-opacity:1!important;background-color:rgb(200 159 255/var(--tw-bg-opacity,1))!important}.indeterminate\\:hover\\:border-black-teal\\/20:hover:indeterminate{border-color:rgba(3,42,36,.2)!important}.indeterminate\\:hover\\:bg-supportive-lilac:hover:indeterminate{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.peer:checked~.peer-checked\\:flex{display:flex!important}.peer:indeterminate~.peer-indeterminate\\:flex{display:flex!important}";
 var PCheckboxStyle0 = checkboxComponentCss;
 
 const checkbox$1 = cva([
@@ -12154,27 +12154,17 @@ const checkbox$1 = cva([
             false: [
                 'cursor-pointer shadow-1',
                 'bg-white border-black-teal-100',
-                'hover:bg-supportivce-lilac-100 hover:border-black-teal-100',
+                'hover:bg-supportive-lilac-100 hover:border-black-teal-100',
                 'checked:bg-supportive-lilac checked:border-black-teal/20',
                 'checked:ring-2 checked:ring-supportive-lilac-100',
-                'checked:hover:bg-supportive-lilac checked:hover:border-black-teal/20',
-                'indeterminate:bg-supportive-lilac indeterminate:border-black-teal/20',
+                'checked:hover:bg-supportive-lilac-700 checked:hover:border-black-teal/20',
+                'indeterminate:bg-supportive-lilac-700 indeterminate:border-black-teal/20',
                 'indeterminate:ring-2 indeterminate:ring-supportive-lilac-100',
                 'indeterminate:hover:bg-supportive-lilac indeterminate:hover:border-black-teal/20',
             ],
             true: 'bg-white-600 border-black-teal-50 cursor-not-allowed ',
         },
     },
-    compoundVariants: [
-        {
-            disabled: false,
-            class: [
-                'cursor-pointer shadow-1',
-                'bg-white border-black-teal-100',
-                'hover:bg-supportive-lilac-100 hover:border-black-teal-100',
-            ],
-        },
-    ],
 });
 const icon$1 = cva([
     'hidden peer-indeterminate:flex peer-checked:flex',
@@ -12210,12 +12200,12 @@ class Checkbox {
      */
     indeterminateChange;
     render() {
-        return (hAsync(Host, { key: '763757228cc34a2ad33d913ff61a612fd5e5955c', class: 'p-checkbox' }, hAsync("label", { key: 'bfff8193dffe46ff7b20e42b98ef2e8468b3c7d3', htmlFor: this.id ?? this._nonce, class: 'flex items-center justify-start gap-2 text-black-teal' }, hAsync("div", { key: 'b2d392f038e6eada52cad8048fa80aa9eb059482', class: 'relative flex flex-shrink-0 items-center' }, hAsync("input", { key: '46784ca50fd4815283f7bac2cfc9a28602ab8026', class: checkbox$1({
+        return (hAsync(Host, { key: 'e2efce30f2d5a1f955c2a8ddefb2b229eca1cfd5', class: 'p-checkbox' }, hAsync("label", { key: 'd26d81c88cb2f2a941cd9539e8060fbf60aa634f', htmlFor: this.id ?? this._nonce, class: 'flex items-center justify-start gap-2 text-black-teal' }, hAsync("div", { key: 'd59c67ca2cbccdd8c91f860f5aa7561f34f79120', class: 'relative flex flex-shrink-0 items-center' }, hAsync("input", { key: '6a8317350b7f60e3fdb7665d7d68d3f1a2ce9868', class: checkbox$1({
                 size: this.size,
                 disabled: this.disabled,
-            }), type: 'checkbox', id: this.id ?? this._nonce, name: this.name, required: this.required, checked: !!this.checked, indeterminate: this.indeterminate, disabled: this.disabled, onChange: ev => this._onChange(ev) }), hAsync("div", { key: '300cdf6032a669bdb6745e106b626e22b527f527', class: icon$1({
+            }), type: 'checkbox', id: this.id ?? this._nonce, name: this.name, required: this.required, checked: !!this.checked, indeterminate: this.indeterminate, disabled: this.disabled, onChange: ev => this._onChange(ev) }), hAsync("div", { key: 'b9010adaa74914c00b8018566b0c31808cc63b33', class: icon$1({
                 disabled: this.disabled,
-            }) }, hAsync("p-icon", { key: '949a7e8cdc7ebaa494f2892b6c3d0e73f9676d4b', size: this.size, class: 'drop-shadow-black-teal-10%', variant: !!this.indeterminate ? 'minus' : 'checkmark' }))), hAsync("slot", { key: 'b68faa0a1f9232a425f918d7be9e4e47a93dfa03' }))));
+            }) }, hAsync("p-icon", { key: '3d760b5e7ee1b76b79dae46beff4094dc00fe8b0', size: this.size, class: 'drop-shadow-black-teal-10%', variant: !!this.indeterminate ? 'minus' : 'checkmark' }))), hAsync("slot", { key: '17f8e47facc7b631494534b68986eebe5aa96fa0' }))));
     }
     _onChange(ev) {
         if (this.disabled) {
@@ -22763,14 +22753,18 @@ class DropdownMenuItem {
     }; }
 }
 
-const fieldComponentCss = "*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.h-full{height:100%!important}.w-inherit{width:inherit!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.cursor-not-allowed{cursor:not-allowed!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-lg{border-radius:.5rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-none{border-style:none!important}.border-black-teal-100{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.border-negative-red{--tw-border-opacity:1!important;border-color:rgb(230 30 30/var(--tw-border-opacity,1))!important}.border-supportive-lilac-800{--tw-border-opacity:1!important;border-color:rgb(189 140 255/var(--tw-border-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-black-teal-100{--tw-text-opacity:1!important;color:rgb(205 212 211/var(--tw-text-opacity,1))!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}.text-black-teal-500{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-negative-red{--tw-text-opacity:1!important;color:rgb(230 30 30/var(--tw-text-opacity,1))!important}.text-negative-red-800{--tw-text-opacity:1!important;color:rgb(141 16 16/var(--tw-text-opacity,1))!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-negative-red-50{--tw-ring-opacity:1!important;--tw-ring-color:rgb(253 237 237/var(--tw-ring-opacity,1))!important}.ring-supportive-lilac-100{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.selection\\:bg-negative-red-50 ::selection{--tw-bg-opacity:1!important;background-color:rgb(253 237 237/var(--tw-bg-opacity,1))!important}.selection\\:bg-supportive-lilac ::selection{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.selection\\:bg-negative-red-50::selection{--tw-bg-opacity:1!important;background-color:rgb(253 237 237/var(--tw-bg-opacity,1))!important}.selection\\:bg-supportive-lilac::selection{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.placeholder\\:text-sm::placeholder{font-size:.875rem!important;line-height:1.25rem!important}.placeholder\\:text-black-teal-200::placeholder{--tw-text-opacity:1!important;color:rgb(154 170 167/var(--tw-text-opacity,1))!important}.focus\\:outline-none:focus{outline:2px solid transparent!important;outline-offset:2px!important}";
+const fieldComponentCss = "*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.h-full{height:100%!important}.w-inherit{width:inherit!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.cursor-not-allowed{cursor:not-allowed!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-lg{border-radius:.5rem!important}.border{border-width:1px!important}.border-0{border-width:0!important}.border-solid{border-style:solid!important}.border-none{border-style:none!important}.border-black-teal-100{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.border-negative-red{--tw-border-opacity:1!important;border-color:rgb(230 30 30/var(--tw-border-opacity,1))!important}.border-supportive-lilac-800{--tw-border-opacity:1!important;border-color:rgb(189 140 255/var(--tw-border-opacity,1))!important}.bg-transparent{background-color:transparent!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-black-teal-100{--tw-text-opacity:1!important;color:rgb(205 212 211/var(--tw-text-opacity,1))!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}.text-black-teal-500{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-negative-red{--tw-text-opacity:1!important;color:rgb(230 30 30/var(--tw-text-opacity,1))!important}.text-negative-red-800{--tw-text-opacity:1!important;color:rgb(141 16 16/var(--tw-text-opacity,1))!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-negative-red-50{--tw-ring-opacity:1!important;--tw-ring-color:rgb(253 237 237/var(--tw-ring-opacity,1))!important}.ring-supportive-lilac-100{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.selection\\:bg-negative-red-50 ::selection{--tw-bg-opacity:1!important;background-color:rgb(253 237 237/var(--tw-bg-opacity,1))!important}.selection\\:bg-supportive-lilac ::selection{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.selection\\:bg-negative-red-50::selection{--tw-bg-opacity:1!important;background-color:rgb(253 237 237/var(--tw-bg-opacity,1))!important}.selection\\:bg-supportive-lilac::selection{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.placeholder\\:text-sm::placeholder{font-size:.875rem!important;line-height:1.25rem!important}.placeholder\\:text-black-teal-200::placeholder{--tw-text-opacity:1!important;color:rgb(154 170 167/var(--tw-text-opacity,1))!important}.focus\\:outline-none:focus{outline:2px solid transparent!important;outline-offset:2px!important}";
 var PFieldStyle0 = fieldComponentCss;
 
-const field = cva(['flex gap-2', 'w-inherit px-2', 'border border-solid rounded-lg'], {
+const field = cva(['flex gap-2', 'w-inherit', 'border-solid rounded-lg'], {
     variants: {
+        variant: {
+            read: 'border-0 items-center',
+            write: 'border px-2',
+        },
         size: {
-            sm: 'h-6',
-            base: 'h-8',
+            sm: null,
+            base: null,
         },
         disabled: {
             false: 'bg-white',
@@ -22786,6 +22780,26 @@ const field = cva(['flex gap-2', 'w-inherit px-2', 'border border-solid rounded-
         },
     },
     compoundVariants: [
+        {
+            size: 'sm',
+            variant: 'write',
+            class: 'h-6',
+        },
+        {
+            size: 'base',
+            variant: 'write',
+            class: 'h-8',
+        },
+        {
+            size: 'sm',
+            variant: 'read',
+            class: 'h-4',
+        },
+        {
+            size: 'base',
+            variant: 'read',
+            class: 'h-6',
+        },
         {
             focused: false,
             error: false,
@@ -22832,6 +22846,10 @@ const prefixAndSuffix = cva(['flex flex-shrink-0 justify-center items-center tex
             false: null,
             true: null,
         },
+        isText: {
+            false: null,
+            true: 'text-sm',
+        },
     },
     compoundVariants: [
         {
@@ -22865,6 +22883,7 @@ class Field {
         registerInstance(this, hostRef);
         this.valueChange = createEvent(this, "valueChange", 7);
         this.inputRefChange = createEvent(this, "inputRefChange", 7);
+        this.variant = 'write';
         this.size = 'base';
         this.type = 'text';
         this.properties = {};
@@ -22904,20 +22923,23 @@ class Field {
         this._checkAutoFocus();
     }
     render() {
-        const { prefix, suffix, hasHeaderSlot, hasLabelSlot, hasHelperSlot, hasErrorSlot, } = this._getSlotInfo();
-        return (hAsync(Host, { key: 'cf990118b7fb2b397a4ed1d00026893fb5d65651', class: 'p-field' }, hAsync("p-field-container", { key: '8957ddbafafbe9be741359ae9c4265bb5c2ab08d', forceShowTooltip: this.forceShowTooltip || this._focused, label: this.label, helper: this.helper, error: this.error, required: this.required }, hasLabelSlot && (hAsync("slot", { key: 'f60081c6a1485f8066715a2e422ea5903f0963a8', name: 'label', slot: 'label' })), hasHeaderSlot && (hAsync("slot", { key: 'e4b78626d1a79acb5b95692158b5809a4b24dd63', name: 'header', slot: 'header' })), hasHelperSlot && (hAsync("slot", { key: '4346e4bc124d1de2ceb4ee4005eb9b661bf677dd', name: 'helper', slot: 'helper' })), hasErrorSlot && (hAsync("slot", { key: '6d0408efce0e27da7d14dfb4aa9fffb38d3b927a', name: 'error', slot: 'error' })), hAsync("div", { key: 'cf6aed5c63d0652a7fa0ca66c562a7c79d57dafa', class: field({
+        const { prefix, suffix, hasHeaderSlot, hasLabelSlot, hasHelperSlot, hasErrorSlot, hasValueSlot, } = this._getSlotInfo();
+        return (hAsync(Host, { key: '1a79a5c8f8247833586cf9e8e663b5c6fe6a2bd9', class: 'p-field' }, hAsync("p-field-container", { key: '10b84cef30d39755c90812095158541c5d653002', forceShowTooltip: this.forceShowTooltip || this._focused, label: this.label, helper: this.helper, error: this.error, required: this.required, variant: this.variant }, hasLabelSlot && (hAsync("slot", { key: 'bffa3ae2c58bb688956bfe65652fd578968227f4', name: 'label', slot: 'label' })), hasHeaderSlot && (hAsync("slot", { key: '1e4c706e8166014605a494c975bd16c502ff79cf', name: 'header', slot: 'header' })), hasHelperSlot && (hAsync("slot", { key: '298572eb4da550e87443aecc0d68842eef9e9f98', name: 'helper', slot: 'helper' })), hasErrorSlot && (hAsync("slot", { key: '4a9f6b0a99b88cffc4c0d84e31d880a3d07776b2', name: 'error', slot: 'error' })), hAsync("div", { key: 'cc5d1bff2b66717facdf1df95e11bc4c16e401c2', class: field({
                 error: !!this.error?.length,
                 disabled: this.disabled,
                 focused: this.focused || this._focused,
                 size: this.size,
-            }), slot: 'content' }, (prefix || (this.icon && this.iconPosition === 'start')) && (hAsync("div", { key: 'fb6c0aa6cebc783dc15a44462bc04e89fcd13f13', class: prefixAndSuffix({
+                variant: this.variant,
+            }), slot: 'content' }, (prefix || (this.icon && this.iconPosition === 'start')) && (hAsync("div", { key: '9a559c208e22f1c512121a81648777f5496375c9', class: prefixAndSuffix({
                 error: !!this.error?.length,
                 disabled: this.disabled,
                 focused: this.focused || this._focused,
-            }), onClick: () => this._focusInput() }, this.icon && this.iconPosition === 'start' ? (hAsync("p-icon", { class: 'flex', variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))), this._getInput(), (suffix || (this.icon && this.iconPosition === 'end')) && (hAsync("div", { key: '2822280cb543d2315d062b00b52729f1603b8c6f', class: prefixAndSuffix({
+                isText: typeof suffix === 'string',
+            }), onClick: () => this._focusInput() }, this.icon && this.iconPosition === 'start' ? (hAsync("p-icon", { class: 'flex', variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))), this._getContent(hasValueSlot), (suffix || (this.icon && this.iconPosition === 'end')) && (hAsync("div", { key: '6ae960c4a1fe98dd99d83af0035992e3aedcf86f', class: prefixAndSuffix({
                 error: !!this.error?.length,
                 disabled: this.disabled,
                 focused: this.focused || this._focused,
+                isText: typeof suffix === 'string',
             }), onClick: () => this._focusInput() }, this.icon && this.iconPosition === 'end' ? (hAsync("p-icon", { class: 'flex', variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (suffix)))))));
     }
     handleFocusIn() {
@@ -22940,6 +22962,7 @@ class Field {
         const hasSuffixSlot = !!this._el.querySelector(':scope > [slot="suffix"]');
         const hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
         const hasErrorSlot = !!this._el.querySelector(':scope > [slot="error"]');
+        const hasValueSlot = !!this._el.querySelector(':scope > [slot="value"]');
         const prefix = hasPrefixSlot ? hAsync("slot", { name: 'prefix' }) : this.prefix;
         const suffix = hasSuffixSlot ? hAsync("slot", { name: 'suffix' }) : this.suffix;
         const errorAndErrorIsNotBoolean = this.error && typeof this.error === 'string' && this.error !== 'true';
@@ -22950,12 +22973,16 @@ class Field {
             hasSuffixSlot,
             hasHeaderSlot,
             hasErrorSlot,
+            hasValueSlot,
             prefix,
             suffix,
             errorAndErrorIsNotBoolean,
         };
     }
-    _getInput() {
+    _getContent(hasValueSlot = false) {
+        if (this.variant === 'read') {
+            return (hAsync("div", { class: 'text-sm' }, hasValueSlot ? (hAsync("slot", { name: 'value' })) : !!this.value && this.value.length > 0 ? (this.value) : ('—')));
+        }
         if (this.type === 'slot') {
             return hAsync("slot", { name: 'input' });
         }
@@ -23015,6 +23042,7 @@ class Field {
         "$flags$": 9,
         "$tagName$": "p-field",
         "$members$": {
+            "variant": [1],
             "size": [1],
             "type": [1],
             "properties": [8],
@@ -23054,6 +23082,7 @@ class FieldContainer {
         registerInstance(this, hostRef);
         this.focus = createEvent(this, "focus", 7);
         this.label = undefined;
+        this.variant = undefined;
         this.helper = undefined;
         this.required = undefined;
         this.error = undefined;
@@ -23070,7 +23099,8 @@ class FieldContainer {
     }
     render() {
         const { hasHeaderSlot, hasErrorSlot, helper, label, errorAndErrorIsNotBoolean, } = this._getSlotInfo();
-        return (hAsync(Host, { key: 'd281d2a9ff20d8ade9f76ad4eb86085e9924130f', class: 'p-field-container' }, hAsync("div", { key: 'bd089038396275d6055446fdc3c8df5565905633', class: 'flex w-inherit flex-col gap-1' }, hAsync("div", { key: 'dabb2165c9791a856aac3ba207cdc8633174c322', class: 'flex items-end justify-between gap-1' }, label && (hAsync("div", { key: '955a3a463212f5eebb50c84156b4245cec176e05', class: 'text-xs font-medium text-black-teal-300', onClick: () => this.focus.emit() }, label)), (!this.required || helper || hasHeaderSlot) && (hAsync("div", { key: 'eeb7241af592900b4d7703af00d5ba5083d23836', class: 'flex items-center gap-1' }, !this.required && (hAsync("span", { key: 'e59dca6b1ee35d7a69489c0a38d5fb7b25a9da9d', class: 'text-xs font-medium text-black-teal-200' }, this.optionalTemplate())), (helper || hasHeaderSlot) && (hAsync(Fragment, { key: 'c8b6efc1f2acaff910265a8db68c50626c6c9d37' }, hasHeaderSlot && hAsync("slot", { key: '511747f7a8fe7cfc33e8e88d6fc156cb0f86ac14', name: 'header' }), helper && (hAsync("p-helper", { key: '08c8ba308601ba7247cfe6f4272c4b5f3b2d1f32', class: `flex ${hasHeaderSlot ? 'ml-2' : ''}`, placement: 'top-end' }, helper))))))), hAsync("p-tooltip", { key: '9b0ddbeae82d7cdaa7db4eb0ca7a3312166983dc', class: 'w-full', variant: 'error', content: this.error, show: errorAndErrorIsNotBoolean && this.forceShowTooltip, enableUserInput: false, placement: this.errorPlacement }, hasErrorSlot && (hAsync("slot", { key: '653ddb7c4ab6b8d1c14f581a72e663c96cd7c494', name: 'error', slot: 'content' })), hAsync("slot", { key: '66e58f122515c6e68ca669b6d00d2a23feee31c9', name: 'content', slot: 'trigger' })))));
+        const contentSlot = (hAsync("slot", { key: 'a7e3919d645cc21fa538340b0c9ea7a98e66ca90', name: 'content', slot: 'trigger' }));
+        return (hAsync(Host, { key: '44a79d2058aafb4d9bf89f09cb3e7a1a708d99f9', class: 'p-field-container' }, hAsync("div", { key: '47af2893a5f27a1a905c846a016c183756d026f8', class: 'flex w-inherit flex-col gap-1' }, hAsync("div", { key: 'cd64bc812c19e11d35ea4eb1756f9885a1f2a148', class: 'flex items-end justify-between gap-1' }, label && (hAsync("div", { key: '962aecba76c4ba9326ed992d6ad39c1efbdab8ab', class: 'text-xs font-medium text-black-teal-300', onClick: () => this.focus.emit() }, label)), (!this.required || helper || hasHeaderSlot) && (hAsync("div", { key: 'd0cdd8810de8098eaca90d2aeddd1f01fbcd0faf', class: 'flex items-center gap-1' }, !this.required && this.variant === 'write' && (hAsync("span", { key: 'e83d37fcb0050bad328d0aa2d6890c1226fe17fb', class: 'text-xs font-medium text-black-teal-200' }, this.optionalTemplate())), (helper || hasHeaderSlot) && (hAsync(Fragment, { key: 'c156ee1c951fec9dbe602cf317ff7591a6bce9bf' }, hasHeaderSlot && hAsync("slot", { key: 'e568644b05673354c9059042b0ba40f137d1709c', name: 'header' }), helper && (hAsync("p-helper", { key: '7dcbdd61deb2eba74abf8f57b245b011fbf9066b', class: `flex ${hasHeaderSlot ? 'ml-2' : ''}`, placement: 'top-end' }, helper))))))), hAsync("p-tooltip", { key: '41588daf8a794d9d16d32bcd841f5f4cbe64349a', class: 'w-full', variant: 'error', content: this.error, show: errorAndErrorIsNotBoolean && this.forceShowTooltip, enableUserInput: false, placement: this.errorPlacement }, hasErrorSlot && (hAsync("slot", { key: 'a61dd91094db6ac2b016ee79320cffd887976e12', name: 'error', slot: 'content' })), contentSlot))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);
@@ -23100,6 +23130,7 @@ class FieldContainer {
         "$tagName$": "p-field-container",
         "$members$": {
             "label": [1],
+            "variant": [1],
             "helper": [1],
             "required": [516],
             "error": [513],
@@ -27644,7 +27675,7 @@ class ToastContainer {
     }; }
 }
 
-const toggleComponentCss = "*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-\\[1px\\]{left:1px!important}.left-\\[2px\\]{left:2px!important}.top-1\\/2{top:50%!important}.m-0{margin:0!important}.flex{display:flex!important}.h-3{height:.75rem!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.h-\\[14px\\]{height:14px!important}.h-\\[20px\\]{height:20px!important}.h-\\[22px\\]{height:22px!important}.w-10{width:2.5rem!important}.w-3{width:.75rem!important}.w-8{width:2rem!important}.w-\\[14px\\]{width:14px!important}.w-\\[20px\\]{width:20px!important}.w-\\[22px\\]{width:22px!important}.flex-shrink-0{flex-shrink:0!important}.-translate-y-1\\/2{--tw-translate-y:-50%!important}.-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))!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.appearance-none{appearance:none!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-full{border-radius:9999px!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-black-teal-100{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.border-black-teal-50{--tw-border-opacity:1!important;border-color:rgb(230 234 233/var(--tw-border-opacity,1))!important}.bg-black-teal-100{--tw-bg-opacity:1!important;background-color:rgb(205 212 211/var(--tw-bg-opacity,1))!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.shadow-1{--tw-shadow:0 1px 1px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-black-teal\\/10{--tw-ring-color:rgba(3,42,36,.1)!important}.transition-all{transition-duration:.15s!important;transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.after\\:h-1:after{content:var(--tw-content)!important;height:.25rem!important}.after\\:h-2:after{content:var(--tw-content)!important;height:.5rem!important}.after\\:w-1:after{content:var(--tw-content)!important;width:.25rem!important}.after\\:w-2:after{content:var(--tw-content)!important;width:.5rem!important}.after\\:rounded-full:after{border-radius:9999px!important;content:var(--tw-content)!important}.after\\:bg-supportive-lilac-800:after{--tw-bg-opacity:1!important;background-color:rgb(189 140 255/var(--tw-bg-opacity,1))!important;content:var(--tw-content)!important}.after\\:transition-all:after{content:var(--tw-content)!important;transition-duration:.15s!important;transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.after\\:content-\\[\\'\\'\\]:after{--tw-content:\"\"!important;content:var(--tw-content)!important}.checked\\:border-black-teal\\/20:checked{border-color:rgba(3,42,36,.2)!important}.checked\\:bg-supportive-lilac:checked{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.checked\\:ring-2:checked{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.checked\\:ring-supportive-lilac-100:checked{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.hover\\:border-black-teal-100:hover{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.hover\\:bg-supportive-lilac-100:hover{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.checked\\:hover\\:border-black-teal\\/20:hover:checked{border-color:rgba(3,42,36,.2)!important}.checked\\:hover\\:bg-supportive-lilac:hover:checked{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.group:hover .group-hover\\:w-\\[18px\\]{width:18px!important}.group:hover .group-hover\\:w-\\[26px\\]{width:26px!important}.group:hover .group-hover\\:after\\:w-2:after{content:var(--tw-content)!important;width:.5rem!important}.group:hover .group-hover\\:after\\:w-3:after{content:var(--tw-content)!important;width:.75rem!important}.peer:checked~.peer-checked\\:left-full{left:100%!important}.peer:checked~.peer-checked\\:-translate-x-\\[calc\\(100\\%\\+1px\\)\\]{--tw-translate-x:calc(-100% - 1px)!important}.peer:checked~.peer-checked\\:-translate-x-\\[calc\\(100\\%\\+1px\\)\\],.peer:checked~.peer-checked\\:-translate-x-\\[calc\\(100\\%\\+2px\\)\\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.peer:checked~.peer-checked\\:-translate-x-\\[calc\\(100\\%\\+2px\\)\\]{--tw-translate-x:calc(-100% - 2px)!important}.peer:checked~.peer-checked\\:bg-black-teal-200{--tw-bg-opacity:1!important;background-color:rgb(154 170 167/var(--tw-bg-opacity,1))!important}";
+const toggleComponentCss = "*{box-sizing:border-box}.pointer-events-none{pointer-events:none!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.left-\\[1px\\]{left:1px!important}.left-\\[2px\\]{left:2px!important}.top-1\\/2{top:50%!important}.m-0{margin:0!important}.flex{display:flex!important}.h-3{height:.75rem!important}.h-4{height:1rem!important}.h-6{height:1.5rem!important}.h-\\[14px\\]{height:14px!important}.h-\\[20px\\]{height:20px!important}.h-\\[22px\\]{height:22px!important}.w-10{width:2.5rem!important}.w-3{width:.75rem!important}.w-8{width:2rem!important}.w-\\[14px\\]{width:14px!important}.w-\\[20px\\]{width:20px!important}.w-\\[22px\\]{width:22px!important}.flex-shrink-0{flex-shrink:0!important}.-translate-y-1\\/2{--tw-translate-y:-50%!important}.-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))!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.appearance-none{appearance:none!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.rounded-full{border-radius:9999px!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-black-teal-100{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.border-black-teal-50{--tw-border-opacity:1!important;border-color:rgb(230 234 233/var(--tw-border-opacity,1))!important}.bg-black-teal-100{--tw-bg-opacity:1!important;background-color:rgb(205 212 211/var(--tw-bg-opacity,1))!important}.bg-black-teal-50{--tw-bg-opacity:1!important;background-color:rgb(230 234 233/var(--tw-bg-opacity,1))!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.bg-white,.bg-white-600{--tw-bg-opacity:1!important}.bg-white-600{background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.shadow-1{--tw-shadow:0 1px 1px rgba(0,2,2,.08)!important;--tw-shadow-colored:0 1px 1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.outline-none{outline:2px solid transparent!important;outline-offset:2px!important}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.ring-black-teal\\/10{--tw-ring-color:rgba(3,42,36,.1)!important}.transition-all{transition-duration:.15s!important;transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.after\\:h-1:after{content:var(--tw-content)!important;height:.25rem!important}.after\\:h-2:after{content:var(--tw-content)!important;height:.5rem!important}.after\\:w-1:after{content:var(--tw-content)!important;width:.25rem!important}.after\\:w-2:after{content:var(--tw-content)!important;width:.5rem!important}.after\\:rounded-full:after{border-radius:9999px!important;content:var(--tw-content)!important}.after\\:bg-supportive-lilac-800:after{--tw-bg-opacity:1!important;background-color:rgb(189 140 255/var(--tw-bg-opacity,1))!important;content:var(--tw-content)!important}.after\\:transition-all:after{content:var(--tw-content)!important;transition-duration:.15s!important;transition-property:all!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.after\\:content-\\[\\]:after{--tw-content:!important;content:var(--tw-content)!important}.checked\\:border-black-teal\\/20:checked{border-color:rgba(3,42,36,.2)!important}.checked\\:bg-supportive-lilac:checked{--tw-bg-opacity:1!important;background-color:rgb(209 174 255/var(--tw-bg-opacity,1))!important}.checked\\:ring-2:checked{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.checked\\:ring-supportive-lilac-100:checked{--tw-ring-opacity:1!important;--tw-ring-color:rgb(246 239 255/var(--tw-ring-opacity,1))!important}.hover\\:border-black-teal-100:hover{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.hover\\:bg-supportive-lilac-100:hover{--tw-bg-opacity:1!important;background-color:rgb(246 239 255/var(--tw-bg-opacity,1))!important}.checked\\:hover\\:border-black-teal\\/20:hover:checked{border-color:rgba(3,42,36,.2)!important}.checked\\:hover\\:bg-supportive-lilac-700:hover:checked{--tw-bg-opacity:1!important;background-color:rgb(200 159 255/var(--tw-bg-opacity,1))!important}.group:hover .group-hover\\:w-\\[18px\\]{width:18px!important}.group:hover .group-hover\\:w-\\[26px\\]{width:26px!important}.group:hover .group-hover\\:after\\:w-2:after{content:var(--tw-content)!important;width:.5rem!important}.group:hover .group-hover\\:after\\:w-3:after{content:var(--tw-content)!important;width:.75rem!important}.peer:checked~.peer-checked\\:left-full{left:100%!important}.peer:checked~.peer-checked\\:-translate-x-\\[calc\\(100\\%\\+1px\\)\\]{--tw-translate-x:calc(-100% - 1px)!important}.peer:checked~.peer-checked\\:-translate-x-\\[calc\\(100\\%\\+1px\\)\\],.peer:checked~.peer-checked\\:-translate-x-\\[calc\\(100\\%\\+2px\\)\\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.peer:checked~.peer-checked\\:-translate-x-\\[calc\\(100\\%\\+2px\\)\\]{--tw-translate-x:calc(-100% - 2px)!important}.peer:checked~.peer-checked\\:bg-black-teal-200{--tw-bg-opacity:1!important;background-color:rgb(154 170 167/var(--tw-bg-opacity,1))!important}.peer:checked~.peer-checked\\:after\\:content-\\[\\'\\'\\]:after{--tw-content:\"\"!important;content:var(--tw-content)!important}";
 var PToggleStyle0 = toggleComponentCss;
 
 const checkbox = cva([
@@ -27659,25 +27690,15 @@ const checkbox = cva([
         disabled: {
             false: [
                 'cursor-pointer shadow-1',
-                'bg-white border-black-teal-100',
-                'hover:bg-supportivce-lilac-100 hover:border-black-teal-100',
+                'bg-black-teal-50 border-black-teal-100',
+                'hover:bg-supportive-lilac-100 hover:border-black-teal-100',
                 'checked:bg-supportive-lilac checked:border-black-teal/20',
                 'checked:ring-2 checked:ring-supportive-lilac-100',
-                'checked:hover:bg-supportive-lilac checked:hover:border-black-teal/20',
+                'checked:hover:bg-supportive-lilac-700 checked:hover:border-black-teal/20',
             ],
             true: 'bg-white-600 border-black-teal-50 cursor-not-allowed ',
         },
     },
-    compoundVariants: [
-        {
-            disabled: false,
-            class: [
-                'cursor-pointer shadow-1',
-                'bg-white border-black-teal-100',
-                'hover:bg-supportive-lilac-100 hover:border-black-teal-100',
-            ],
-        },
-    ],
 });
 const circle = cva([
     'flex items-center justify-center',
@@ -27693,7 +27714,7 @@ const circle = cva([
             false: [
                 'bg-white ring-1 ring-black-teal/10',
                 'left-[1px] peer-checked:-translate-x-[calc(100%+1px)]',
-                "after:content-[''] after:bg-supportive-lilac-800 after:rounded-full after:transition-all",
+                "after:content-[] peer-checked:after:content-['']  after:bg-supportive-lilac-800 after:rounded-full after:transition-all",
             ],
             true: [
                 'bg-black-teal-100 peer-checked:bg-black-teal-200',
@@ -27753,13 +27774,13 @@ class Toggle {
      */
     indeterminateChange;
     render() {
-        return (hAsync(Host, { key: 'e0f9e0a259926cc4dddb435f0be377340b5ad63b', class: 'p-checkbox' }, hAsync("label", { key: '7b3546956ea8aefcb5f7ca943aba71bcc260459d', htmlFor: this.id ?? this._nonce, class: 'flex items-center justify-start gap-2 text-black-teal' }, hAsync("div", { key: 'c17acd7e7e6295d67334ce79cb1fe081ef8d2a29', class: 'group relative flex flex-shrink-0 items-center' }, hAsync("input", { key: '52794fb1f7da33ec227a9ce6985df108ace97ff4', class: checkbox({
+        return (hAsync(Host, { key: '7e7322642bd2ae209f3693d86f7d206ba48e32aa', class: 'p-checkbox' }, hAsync("label", { key: '6bcb61ef0326e9ae1df59c88c3fc8a1c09aa6c59', htmlFor: this.id ?? this._nonce, class: 'flex items-center justify-start gap-2 text-black-teal' }, hAsync("div", { key: 'a4993dac0cf2193aab80749460615d1da97f91cc', class: 'group relative flex flex-shrink-0 items-center' }, hAsync("input", { key: '9225f841e623b436930c116ddd6767a55e335001', class: checkbox({
                 size: this.size,
                 disabled: this.disabled,
-            }), type: 'checkbox', id: this.id ?? this._nonce, name: this.name, required: this.required, checked: !!this.checked, indeterminate: this.indeterminate, disabled: this.disabled, onChange: ev => this._onChange(ev) }), hAsync("div", { key: 'a1fdb9d8588fcdb0a62090f93cbe97c1c7bb791e', class: circle({
+            }), type: 'checkbox', id: this.id ?? this._nonce, name: this.name, required: this.required, checked: !!this.checked, indeterminate: this.indeterminate, disabled: this.disabled, onChange: ev => this._onChange(ev) }), hAsync("div", { key: '4c6f3a78c1c9c483bb655ccb5555615fcdf338b3', class: circle({
                 size: this.size,
                 disabled: this.disabled,
-            }) })), hAsync("slot", { key: '3ada9cd9fd19d9df7a4613f3810b9dbfa6af8d2a' }))));
+            }) })), hAsync("slot", { key: '25d9c3ce61d0ae9442092fe02b17fdd31a5b912b' }))));
     }
     _onChange(ev) {
         if (this.disabled) {