@nascentdigital/funnel-editor 4.5.2 → 4.5.4

package/dist/styles/index.css

@@ -549,6 +549,8 @@ video {
         --color-surface2: 237 242 247;
         --color-surface-gradient1: 247 250 252;
         --color-surface-gradient2: 203 213 224;
+        --color-surface-placeholder: 203 213 224;
+        --color-surface-placeholder-raised: 179 188 200;
 
         --color-modal-background: 255 255 255;
         --color-modal-surface1: 247 250 252;
@@ -580,10 +582,10 @@ video {
         --color-ix-disabled-content : 156 163 176;
 
         --color-glass: 156 163 176;
-        --color-glass-fill-l1: rgba(226, 232, 240, 0.5);
-        --color-glass-fill-l2: rgba(255, 255, 255, 0.75);
-        --color-glass-stroke-l1: rgba(255, 255, 255, 1);
-        --color-glass-stroke-l2: rgba(226, 232, 240, 1);
+        --color-glass-fill-l1: 203 213 224;
+        --color-glass-fill-l2: 226 232 240;
+        --color-glass-stroke-l1: 156 163 176;
+        --color-glass-stroke-l2: 156 163 176;
 
         --color-destructive-content: 255 84 84;
         --color-destructive: 255 94 94;
@@ -603,6 +605,8 @@ video {
         --color-surface2: 48 47 67 !important;
         --color-surface-gradient1: 48 47 67 !important;
         --color-surface-gradient2: 74 85 104 !important;
+        --color-surface-placeholder: 60 59 80 !important;
+        --color-surface-placeholder-raised: 74 85 104 !important;
 
         --color-modal-background: 48 47 67 !important;
         --color-modal-surface1: 42 41 59 !important;
@@ -634,10 +638,10 @@ video {
         --color-ix-disabled-content : 156 163 176 !important;
 
         --color-glass: 26 32 44 !important;
-        --color-glass-fill-l1: rgba(0, 0, 0, 0.1) !important;
-        --color-glass-fill-l2: rgba(117, 119, 130, 0.25) !important;
-        --color-glass-stroke-l1: rgba(117, 119, 130, 1) !important;
-        --color-glass-stroke-l2: rgba(30, 29, 44, 1) !important;
+        --color-glass-fill-l1: 0 0 0 !important;
+        --color-glass-fill-l2: 26 32 44 !important;
+        --color-glass-stroke-l1: 117 119 130 !important;
+        --color-glass-stroke-l2: 30 29 44 !important;
 
         --color-destructive-content: 255 84 84 !important;
         --color-destructive: 255 94 94 !important;
@@ -657,6 +661,8 @@ video {
         --color-surface2: 48 47 67;
         --color-surface-gradient1: 48 47 67;
         --color-surface-gradient2: 74 85 104;
+        --color-surface-placeholder: 60 59 80;
+        --color-surface-placeholder-raised: 74 85 104;
 
         --color-modal-background: 48 47 67;
         --color-modal-surface1: 42 41 59;
@@ -688,10 +694,10 @@ video {
         --color-ix-disabled-content : 156 163 176;
 
         --color-glass: 26 32 44;
-        --color-glass-fill-l1: rgba(0, 0, 0, 0.1);
-        --color-glass-fill-l2: rgba(117, 119, 130, 0.25);
-        --color-glass-stroke-l1: rgba(117, 119, 130, 1);
-        --color-glass-stroke-l2: rgba(30, 29, 44, 1);
+        --color-glass-fill-l1: 0 0 0;
+        --color-glass-fill-l2: 26 32 44;
+        --color-glass-stroke-l1: 117 119 130;
+        --color-glass-stroke-l2: 30 29 44;
 
         --color-destructive-content: 255 84 84;
         --color-destructive: 255 94 94;
@@ -925,7 +931,7 @@ video {
 .react-datepicker{
     font-size: 13px;
     font-weight: 400;
-    line-height: 1.5;
+    line-height: 1.4;
     overflow: hidden;
     border-radius: 8px;
     --tw-text-opacity: 1;
@@ -940,7 +946,7 @@ video {
     border-bottom-left-radius: 8px;
 }
 .react-datepicker-popper{
-    z-index: 140;
+    z-index: 150;
 }
 .react-datepicker__header{
     position: relative;
@@ -2034,7 +2040,7 @@ video {
 .label-sm{
     font-size: 13px;
     font-weight: 400;
-    line-height: 1.5;
+    line-height: 1.4;
 }
 .label-xs{
     font-family: var(--font-primary), sans-serif;
@@ -2045,25 +2051,18 @@ video {
 .label-xs{
     font-size: 11px;
     font-weight: 400;
-    line-height: 1.5;
-}
-.Backdrop-root{
-    position: fixed;
-    inset: 0px;
-    background-color: rgb(var(--color-glass) / .8);
-    --tw-backdrop-blur: blur(9px);
-    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-    will-change: backdrop-filter;
+    line-height: 1.1;
 }
-/* vertical stacking */
-.Backdrop-root.Backdrop-l1{
-    z-index: 100;
+.label-xxs{
+    font-family: var(--font-primary), sans-serif;
 }
-.Backdrop-root.Backdrop-l2{
-    z-index: 200;
+.label-xxs.label-strong{
+    font-weight: 600;
 }
-.Backdrop-root.Backdrop-l3{
-    z-index: 300;
+.label-xxs{
+    font-size: 10px;
+    font-weight: 400;
+    line-height: 1.1;
 }
 .button{
     flex-shrink: 0;
@@ -2122,17 +2121,17 @@ video {
 .button.button-xs{
     font-family: var(--font-primary), sans-serif;
 }
-.button.button-xs.body-strong{
+.button.button-xs.label-strong{
     font-weight: 600;
 }
 .button.button-xs{
     font-size: 11px;
     font-weight: 400;
-    line-height: 1.4;
-    height: 20px;
+    line-height: 1.1;
+    height: 24px;
     gap: 6px;
-    padding-left: 8px;
-    padding-right: 8px;
+    padding-left: 12px;
+    padding-right: 12px;
 }
 .button.button-xs:active{
     --tw-scale-x: .95;
@@ -2429,17 +2428,8 @@ video {
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
         transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
-        font-family: var(--font-primary), sans-serif;
-}
-.\!field.body-strong{
-    font-weight: 600;
-}
-.\!field{
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 1.4;
-    --tw-text-opacity: 1;
-    color: rgb(var(--color-content-primary) / var(--tw-text-opacity, 1));
+        --tw-text-opacity: 1;
+        color: rgb(var(--color-content-primary) / var(--tw-text-opacity, 1));
 }
 .\!field:-moz-placeholder{
     --tw-text-opacity: 1;
@@ -2454,17 +2444,8 @@ video {
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
         transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
-        font-family: var(--font-primary), sans-serif;
-}
-.field.body-strong{
-    font-weight: 600;
-}
-.field{
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 1.4;
-    --tw-text-opacity: 1;
-    color: rgb(var(--color-content-primary) / var(--tw-text-opacity, 1));
+        --tw-text-opacity: 1;
+        color: rgb(var(--color-content-primary) / var(--tw-text-opacity, 1));
 }
 .field:-moz-placeholder{
     --tw-text-opacity: 1;
@@ -2475,68 +2456,92 @@ video {
     color: rgb(var(--color-content-secondary) / var(--tw-text-opacity, 1));
 }
 .\!field{
+    border-radius: 9999px;
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--color-surface1) / var(--tw-bg-opacity, 1));
+    outline-style: solid;
+    outline-width: 1px;
+    outline-color: rgb(var(--color-border-l1) / 1);
+}
+.field{
+    border-radius: 9999px;
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--color-surface1) / var(--tw-bg-opacity, 1));
+    outline-style: solid;
+    outline-width: 1px;
+    outline-color: rgb(var(--color-border-l1) / 1);
+}
+.\!field:hover{
+    outline-color: rgb(var(--color-ix-primary) / .35);
+}
+.field:hover{
+    outline-color: rgb(var(--color-ix-primary) / .35);
+}
+.\!field.field-md{
     font-family: var(--font-primary), sans-serif;
 }
-.\!field.body-strong{
+.\!field.field-md.label-strong{
     font-weight: 600;
 }
-.\!field{
+.\!field.field-md{
     font-size: 13px;
     font-weight: 400;
     line-height: 1.4;
-    --tw-text-opacity: 1;
-    color: rgb(var(--color-content-primary) / var(--tw-text-opacity, 1));
-}
-.\!field:-moz-placeholder{
-    --tw-text-opacity: 1;
-    color: rgb(var(--color-content-secondary) / var(--tw-text-opacity, 1));
 }
-.\!field:placeholder-shown{
-    --tw-text-opacity: 1;
-    color: rgb(var(--color-content-secondary) / var(--tw-text-opacity, 1));
-}
-.field{
+.field.field-md{
     font-family: var(--font-primary), sans-serif;
 }
-.field.body-strong{
+.field.field-md.label-strong{
     font-weight: 600;
 }
-.field{
+.field.field-md{
     font-size: 13px;
     font-weight: 400;
     line-height: 1.4;
-    --tw-text-opacity: 1;
-    color: rgb(var(--color-content-primary) / var(--tw-text-opacity, 1));
 }
-.field:-moz-placeholder{
-    --tw-text-opacity: 1;
-    color: rgb(var(--color-content-secondary) / var(--tw-text-opacity, 1));
+.\!field.field-sm{
+    font-family: var(--font-primary), sans-serif;
 }
-.field:placeholder-shown{
-    --tw-text-opacity: 1;
-    color: rgb(var(--color-content-secondary) / var(--tw-text-opacity, 1));
+.\!field.field-sm.label-strong{
+    font-weight: 600;
 }
-.\!field{
-    border-radius: 9999px;
-    --tw-bg-opacity: 1;
-    background-color: rgb(var(--color-surface1) / var(--tw-bg-opacity, 1));
-    outline-style: solid;
-    outline-width: 1px;
-    outline-color: rgb(var(--color-border-l1) / 1);
+.\!field.field-sm{
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 1.1;
 }
-.field{
-    border-radius: 9999px;
-    --tw-bg-opacity: 1;
-    background-color: rgb(var(--color-surface1) / var(--tw-bg-opacity, 1));
-    outline-style: solid;
-    outline-width: 1px;
-    outline-color: rgb(var(--color-border-l1) / 1);
+.field.field-sm{
+    font-family: var(--font-primary), sans-serif;
 }
-.\!field:hover{
-    outline-color: rgb(var(--color-ix-primary) / .35);
+.field.field-sm.label-strong{
+    font-weight: 600;
 }
-.field:hover{
-    outline-color: rgb(var(--color-ix-primary) / .35);
+.field.field-sm{
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 1.1;
+}
+.\!field.field-xs{
+    font-family: var(--font-primary), sans-serif;
+}
+.\!field.field-xs.label-strong{
+    font-weight: 600;
+}
+.\!field.field-xs{
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 1.1;
+}
+.field.field-xs{
+    font-family: var(--font-primary), sans-serif;
+}
+.field.field-xs.label-strong{
+    font-weight: 600;
+}
+.field.field-xs{
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 1.1;
 }
 .\!field.field-focused {
         }
@@ -2620,17 +2625,8 @@ video {
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
         transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
-        font-family: var(--font-primary), sans-serif;
-}
-.\!field:has(> input) > input.body-strong{
-    font-weight: 600;
-}
-.\!field:has(> input) > input{
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 1.4;
-    --tw-text-opacity: 1;
-    color: rgb(var(--color-content-primary) / var(--tw-text-opacity, 1));
+        --tw-text-opacity: 1;
+        color: rgb(var(--color-content-primary) / var(--tw-text-opacity, 1));
 }
 .\!field:has(> input) > input:-moz-placeholder{
     --tw-text-opacity: 1;
@@ -2651,17 +2647,8 @@ video {
     transition-duration: 500ms;
     transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
         transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
-        font-family: var(--font-primary), sans-serif;
-}
-.field:has(> input) > input.body-strong{
-    font-weight: 600;
-}
-.field:has(> input) > input{
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 1.4;
-    --tw-text-opacity: 1;
-    color: rgb(var(--color-content-primary) / var(--tw-text-opacity, 1));
+        --tw-text-opacity: 1;
+        color: rgb(var(--color-content-primary) / var(--tw-text-opacity, 1));
 }
 .field:has(> input) > input:-moz-placeholder{
     --tw-text-opacity: 1;
@@ -2683,7 +2670,7 @@ video {
     transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
         transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
         overflow: hidden;
-        border-radius: 12px;
+        border-radius: 8px;
         border-width: 1px;
         border-style: solid;
         --tw-border-opacity: 1;
@@ -2800,17 +2787,17 @@ video {
 .iconbutton.button-xs{
     font-family: var(--font-primary), sans-serif;
 }
-.iconbutton.button-xs.body-strong{
+.iconbutton.button-xs.label-strong{
     font-weight: 600;
 }
 .iconbutton.button-xs{
     font-size: 11px;
     font-weight: 400;
-    line-height: 1.4;
-    height: 20px;
+    line-height: 1.1;
+    height: 24px;
     gap: 6px;
-    padding-left: 8px;
-    padding-right: 8px;
+    padding-left: 12px;
+    padding-right: 12px;
 }
 .iconbutton.button-xs:active{
     --tw-scale-x: .95;
@@ -2861,6 +2848,10 @@ video {
     height: 20px;
     width: 20px;
 }
+.iconbutton.iconbutton-xxs{
+    height: 16px;
+    width: 16px;
+}
 .iconbutton.iconbutton-disabled{
     cursor: default;
 }
@@ -2975,17 +2966,17 @@ video {
 .iconbutton-util.button-xs{
     font-family: var(--font-primary), sans-serif;
 }
-.iconbutton-util.button-xs.body-strong{
+.iconbutton-util.button-xs.label-strong{
     font-weight: 600;
 }
 .iconbutton-util.button-xs{
     font-size: 11px;
     font-weight: 400;
-    line-height: 1.4;
-    height: 20px;
+    line-height: 1.1;
+    height: 24px;
     gap: 6px;
-    padding-left: 8px;
-    padding-right: 8px;
+    padding-left: 12px;
+    padding-right: 12px;
 }
 .iconbutton-util.button-xs:active{
     --tw-scale-x: .95;
@@ -3036,6 +3027,10 @@ video {
     height: 20px;
     width: 20px;
 }
+.iconbutton-util.iconbutton-xxs{
+    height: 16px;
+    width: 16px;
+}
 .iconbutton-util.iconbutton-disabled{
     cursor: default;
 }
@@ -3130,17 +3125,17 @@ video {
 .iconbutton-avatar.button-xs{
     font-family: var(--font-primary), sans-serif;
 }
-.iconbutton-avatar.button-xs.body-strong{
+.iconbutton-avatar.button-xs.label-strong{
     font-weight: 600;
 }
 .iconbutton-avatar.button-xs{
     font-size: 11px;
     font-weight: 400;
-    line-height: 1.4;
-    height: 20px;
+    line-height: 1.1;
+    height: 24px;
     gap: 6px;
-    padding-left: 8px;
-    padding-right: 8px;
+    padding-left: 12px;
+    padding-right: 12px;
 }
 .iconbutton-avatar.button-xs:active{
     --tw-scale-x: .95;
@@ -3191,6 +3186,10 @@ video {
     height: 20px;
     width: 20px;
 }
+.iconbutton-avatar.iconbutton-xxs{
+    height: 16px;
+    width: 16px;
+}
 .iconbutton-avatar.iconbutton-disabled{
     cursor: default;
 }
@@ -3286,17 +3285,17 @@ video {
 .iconbutton-toolbar.button-xs{
     font-family: var(--font-primary), sans-serif;
 }
-.iconbutton-toolbar.button-xs.body-strong{
+.iconbutton-toolbar.button-xs.label-strong{
     font-weight: 600;
 }
 .iconbutton-toolbar.button-xs{
     font-size: 11px;
     font-weight: 400;
-    line-height: 1.4;
-    height: 20px;
+    line-height: 1.1;
+    height: 24px;
     gap: 6px;
-    padding-left: 8px;
-    padding-right: 8px;
+    padding-left: 12px;
+    padding-right: 12px;
 }
 .iconbutton-toolbar.button-xs:active{
     --tw-scale-x: .95;
@@ -3347,6 +3346,10 @@ video {
     height: 20px;
     width: 20px;
 }
+.iconbutton-toolbar.iconbutton-xxs{
+    height: 16px;
+    width: 16px;
+}
 .iconbutton-toolbar.iconbutton-disabled{
     cursor: default;
 }
@@ -3587,12 +3590,19 @@ video {
     --tw-backdrop-blur: blur(10px);
     backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
     background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
-    --tw-gradient-from: var(--color-glass-fill-l2) var(--tw-gradient-from-position);
-    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+    --tw-gradient-from: rgb(var(--color-glass-fill-l2) / .5) var(--tw-gradient-from-position);
+    --tw-gradient-to: rgb(var(--color-glass-fill-l2) / 0) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-    --tw-gradient-to: var(--color-glass-fill-l1) var(--tw-gradient-to-position);
+    --tw-gradient-from-position: 0%;
+    --tw-gradient-to: rgb(var(--color-glass-fill-l1) / .5) var(--tw-gradient-to-position);
     --tw-gradient-to-position: 75%;
 }
+@media (prefers-color-scheme: dark){
+
+    .glass-overlay{
+        --tw-gradient-to: rgb(var(--color-glass-fill-l1) / .01) var(--tw-gradient-to-position);
+    }
+}
 .Picker-root{
     margin-left: auto;
     margin-right: auto;
@@ -3643,12 +3653,8 @@ video {
     transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
         transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
         display: flex;
-        height: 33px;
         align-items: center;
         justify-content: center;
-        gap: 8px;
-        padding-left: 16px;
-        padding-right: 16px;
         overflow: hidden;
         border-width: 1px;
         border-style: solid;
@@ -3661,15 +3667,6 @@ video {
     outline-color: rgb(var(--color-ix-primary) / 1);
 }
 .segmented-button{
-    font-family: var(--font-primary), sans-serif;
-}
-.segmented-button.label-strong{
-    font-weight: 600;
-}
-.segmented-button{
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 1.5;
     text-overflow: ellipsis;
     --tw-bg-opacity: 1;
     background-color: rgb(var(--color-ix-util) / var(--tw-bg-opacity, 1));
@@ -3686,6 +3683,51 @@ video {
     --tw-text-opacity: 1;
     color: rgb(var(--color-content-button-contrast) / var(--tw-text-opacity, 1));
 }
+.segmented-button.segmented-button-md{
+    font-family: var(--font-primary), sans-serif;
+}
+.segmented-button.segmented-button-md.label-strong{
+    font-weight: 600;
+}
+.segmented-button.segmented-button-md{
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.4;
+    height: 40px;
+    gap: 8px;
+    padding-left: 16px;
+    padding-right: 16px;
+}
+.segmented-button.segmented-button-sm{
+    font-family: var(--font-primary), sans-serif;
+}
+.segmented-button.segmented-button-sm.label-strong{
+    font-weight: 600;
+}
+.segmented-button.segmented-button-sm{
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 1.1;
+    height: 32px;
+    gap: 6px;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+.segmented-button.segmented-button-xs{
+    font-family: var(--font-primary), sans-serif;
+}
+.segmented-button.segmented-button-xs.label-strong{
+    font-weight: 600;
+}
+.segmented-button.segmented-button-xs{
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 1.1;
+    height: 24px;
+    gap: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
 /* first */
 .segmented-button:first-child{
     border-start-start-radius: 9999px;
@@ -3748,13 +3790,13 @@ video {
 .nd-Caption.nd-RichText {
             --nd-RichText-p-mb: 0;
             --nd-RichText-p-font: var(--nd-caption-font);
-            --nd-RichText-p-color: var(--nd-caption-color, var(--nd-block-fg));
+            --nd-RichText-p-color: var(--nd-caption-color, currentColor);
             --nd-RichText-p-letterspacing: var(--nd-caption-letterspacing);
         }
 .nd-Caption{
         font: var(--nd-caption-font);
         letter-spacing: var(--nd-caption-letterspacing);
-        color: var(--nd-caption-color, var(--nd-block-fg));
+        color: var(--nd-caption-color, currentColor);
         font-variant-numeric: lining-nums proportional-nums;
 }
 :root {
@@ -3769,13 +3811,13 @@ video {
 .nd-Description.nd-RichText {
             --nd-RichText-p-mb: 0;
             --nd-RichText-p-font: var(--nd-description-font);
-            --nd-RichText-p-color: var(--nd-description-color, var(--nd-block-fg));
+            --nd-RichText-p-color: var(--nd-description-color, currentColor);
             --nd-RichText-p-letterspacing: var(--nd-description-letterspacing);
         }
 .nd-Description{
         font: var(--nd-description-font);
         letter-spacing: var(--nd-description-letterspacing);
-        color: var(--nd-description-color, var(--nd-block-fg));
+        color: var(--nd-description-color, currentColor);
         font-variant-numeric: lining-nums proportional-nums;
 }
 :root {
@@ -3846,7 +3888,7 @@ video {
     display: inline-block;
     height: 100%;
     width: 100%;
-        background-color: var(--nd-icon-color, var(--nd-block-fg));
+        background-color: var(--nd-icon-color, currentColor);
         -webkit-mask-repeat: no-repeat;
                 mask-repeat: no-repeat;
         -webkit-mask-size: contain;
@@ -3880,7 +3922,7 @@ video {
     text-wrap: nowrap;
         font: var(--nd-link-font);
         letter-spacing: var(--nd-link-letterspacing);
-        color: var(--nd-link-color, var(--nd-block-fg));
+        color: var(--nd-link-color, currentColor);
         font-variant-numeric: lining-nums proportional-nums;
 }
 :root {
@@ -3907,7 +3949,7 @@ video {
 .nd-Quote.nd-RichText {
             --nd-RichText-p-mb: 0;
             --nd-RichText-p-font: var(--nd-quote-font);
-            --nd-RichText-p-color: var(--nd-quote-color, var(--nd-block-fg));
+            --nd-RichText-p-color: var(--nd-quote-color, currentColor);
             --nd-RichText-p-letterspacing: var(--nd-quote-letterspacing);
             --nd-RichText-priority-font: var(--nd-quote-priority-font);
             --nd-RichText-priority-color: var(--nd-quote-priority-color);
@@ -3920,7 +3962,7 @@ video {
 
         font: var(--nd-quote-font);
         letter-spacing: var(--nd-quote-letterspacing);
-        color: var(--nd-quote-color, var(--nd-block-fg));
+        color: var(--nd-quote-color, currentColor);
         font-variant-numeric: lining-nums proportional-nums;
 }
 .nd-Quote span:first-child:before {
@@ -4181,7 +4223,7 @@ video {
         overflow-wrap: anywhere;
         font: var(--nd-title-font);
         letter-spacing: var(--nd-title-letterspacing);
-        color: var(--nd-title-color, var(--nd-block-fg));
+        color: var(--nd-title-color, currentColor);
         font-variant-numeric: lining-nums proportional-nums;
 }
 :root {
@@ -4292,11 +4334,8 @@ video {
 .z-backdrop{
     z-index: 100;
 }
-.z-backdrop-l1{
-    z-index: 100;
-}
 .z-dialog{
-    z-index: 130;
+    z-index: 140;
 }
 .z-header{
     z-index: 120;
@@ -4305,10 +4344,10 @@ video {
     z-index: 10;
 }
 .z-popup{
-    z-index: 140;
+    z-index: 150;
 }
-.z-popup-l1{
-    z-index: 140;
+.z-sheet{
+    z-index: 130;
 }
 .z-splash{
     z-index: 199;
@@ -4376,6 +4415,10 @@ video {
     margin-left: 16px;
     margin-right: 16px;
 }
+.mx-l8{
+    margin-left: 24px;
+    margin-right: 24px;
+}
 .my-l3{
     margin-top: 6px;
     margin-bottom: 6px;
@@ -4507,6 +4550,10 @@ video {
     width: 20px;
     height: 20px;
 }
+.size-full{
+    width: 100%;
+    height: 100%;
+}
 .h-10{
     height: 10px;
 }
@@ -4555,23 +4602,35 @@ video {
 .h-9{
     height: 9px;
 }
+.h-\[120px\]{
+    height: 120px;
+}
 .h-\[13\.5px\]{
     height: 13.5px;
 }
 .h-\[170px\]{
     height: 170px;
 }
+.h-\[20px\]{
+    height: 20px;
+}
 .h-\[210px\]{
     height: 210px;
 }
 .h-\[400px\]{
     height: 400px;
 }
+.h-\[55px\]{
+    height: 55px;
+}
+.h-\[60\%\]{
+    height: 60%;
+}
 .h-\[80px\]{
     height: 80px;
 }
-.h-\[88px\]{
-    height: 88px;
+.h-auto{
+    height: auto;
 }
 .h-dvh{
     height: 100dvh;
@@ -4588,8 +4647,11 @@ video {
 .h-screen{
     height: 100vh;
 }
-.max-h-\[240px\]{
-    max-height: 240px;
+.max-h-\[120px\]{
+    max-height: 120px;
+}
+.max-h-\[213px\]{
+    max-height: 213px;
 }
 .max-h-\[400px\]{
     max-height: 400px;
@@ -4675,15 +4737,15 @@ video {
 .w-6{
     width: 6px;
 }
+.w-7\/12{
+    width: 58.333333%;
+}
 .w-8\/12{
     width: 66.666667%;
 }
 .w-\[100px\]{
     width: 100px;
 }
-.w-\[116px\]{
-    width: 116px;
-}
 .w-\[120px\]{
     width: 120px;
 }
@@ -4702,9 +4764,21 @@ video {
 .w-\[220px\]{
     width: 220px;
 }
+.w-\[288px\]{
+    width: 288px;
+}
+.w-\[30px\]{
+    width: 30px;
+}
+.w-\[320px\]{
+    width: 320px;
+}
 .w-\[330px\]{
     width: 330px;
 }
+.w-\[372px\]{
+    width: 372px;
+}
 .w-\[420px\]{
     width: 420px;
 }
@@ -4714,6 +4788,12 @@ video {
 .w-\[64px\]{
     width: 64px;
 }
+.w-\[72px\]{
+    width: 72px;
+}
+.w-auto{
+    width: auto;
+}
 .w-dvw{
     width: 100dvw;
 }
@@ -4726,6 +4806,9 @@ video {
 .min-w-18{
     min-width: 18px;
 }
+.min-w-\[120px\]{
+    min-width: 120px;
+}
 .min-w-\[180px\]{
     min-width: 180px;
 }
@@ -4750,6 +4833,9 @@ video {
 .max-w-\[360px\]{
     max-width: 360px;
 }
+.max-w-\[380px\]{
+    max-width: 380px;
+}
 .max-w-\[420px\]{
     max-width: 420px;
 }
@@ -4968,6 +5054,13 @@ video {
 .gap-l9{
     gap: 32px;
 }
+.gap-x-l5{
+    -moz-column-gap: 12px;
+         column-gap: 12px;
+}
+.gap-y-l4{
+    row-gap: 8px;
+}
 .self-end{
     align-self: flex-end;
 }
@@ -5007,6 +5100,9 @@ video {
 .text-pretty{
     text-wrap: pretty;
 }
+.rounded-\[2px\]{
+    border-radius: 2px;
+}
 .rounded-full{
     border-radius: 9999px;
 }
@@ -5035,12 +5131,6 @@ video {
     border-top-left-radius: 18px;
     border-top-right-radius: 18px;
 }
-.rounded-bl-md{
-    border-bottom-left-radius: 12px;
-}
-.rounded-tl-md{
-    border-top-left-radius: 12px;
-}
 .border{
     border-width: 1px;
 }
@@ -5105,7 +5195,11 @@ video {
     border-color: rgb(var(--color-draft) / .3);
 }
 .border-glass-stroke-l1{
-    border-color: var(--color-glass-stroke-l1);
+    --tw-border-opacity: 1;
+    border-color: rgb(var(--color-glass-stroke-l1) / var(--tw-border-opacity, 1));
+}
+.border-glass-stroke-l1\/tint5{
+    border-color: rgb(var(--color-glass-stroke-l1) / .5);
 }
 .border-info-content{
     --tw-border-opacity: 1;
@@ -5151,6 +5245,9 @@ video {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--color-border-l1) / var(--tw-bg-opacity, 1));
 }
+.bg-content-button-contrast\/backdrop{
+    background-color: rgb(var(--color-content-button-contrast) / .8);
+}
 .bg-content-primary{
     --tw-bg-opacity: 1;
     background-color: rgb(var(--color-content-primary) / var(--tw-bg-opacity, 1));
@@ -5162,6 +5259,10 @@ video {
 .bg-content-tertiary\/tint1{
     background-color: rgb(var(--color-content-tertiary) / .1);
 }
+.bg-destructive{
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--color-destructive) / var(--tw-bg-opacity, 1));
+}
 .bg-destructive-content{
     --tw-bg-opacity: 1;
     background-color: rgb(var(--color-destructive-content) / var(--tw-bg-opacity, 1));
@@ -5182,7 +5283,8 @@ video {
     background-color: rgb(var(--color-draft) / .3);
 }
 .bg-glass-fill-l1{
-    background-color: var(--color-glass-fill-l1);
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--color-glass-fill-l1) / var(--tw-bg-opacity, 1));
 }
 .bg-glass\/backdrop{
     background-color: rgb(var(--color-glass) / .8);
@@ -5246,6 +5348,14 @@ video {
 .bg-success\/tint1{
     background-color: rgb(var(--color-success) / .1);
 }
+.bg-surface-placeholder{
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--color-surface-placeholder) / var(--tw-bg-opacity, 1));
+}
+.bg-surface-placeholder-raised{
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--color-surface-placeholder-raised) / var(--tw-bg-opacity, 1));
+}
 .bg-surface1{
     --tw-bg-opacity: 1;
     background-color: rgb(var(--color-surface1) / var(--tw-bg-opacity, 1));
@@ -5423,6 +5533,14 @@ video {
     padding-top: 72px;
     padding-bottom: 72px;
 }
+.py-l2{
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+.py-l3{
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
 .py-l4{
     padding-top: 8px;
     padding-bottom: 8px;
@@ -6201,16 +6319,39 @@ video {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--color-ix-secondary) / var(--tw-bg-opacity, 1));
 }
+@media not all and (min-width: 768px){
+
+    .max-md\:inset-x-0{
+        left: 0px;
+        right: 0px;
+    }
+
+    .max-md\:bottom-0{
+        bottom: 0px;
+    }
+
+    .max-md\:top-\[40px\]{
+        top: 40px;
+    }
+
+    .max-md\:rounded-tl-md{
+        border-top-left-radius: 12px;
+    }
+
+    .max-md\:rounded-tr-md{
+        border-top-right-radius: 12px;
+    }
+
+    .max-md\:border-t{
+        border-top-width: 1px;
+    }
+}
 @media (min-width: 480px){
 
     .sm\:w-4\/5{
         width: 80%;
     }
 
-    .sm\:w-\[380px\]{
-        width: 380px;
-    }
-
     .sm\:max-w-screen-sm{
         max-width: 480px;
     }
@@ -6225,6 +6366,15 @@ video {
 }
 @media (min-width: 768px){
 
+    .md\:inset-y-0{
+        top: 0px;
+        bottom: 0px;
+    }
+
+    .md\:right-0{
+        right: 0px;
+    }
+
     .md\:block{
         display: block;
     }
@@ -6241,6 +6391,18 @@ video {
         width: 280px;
     }
 
+    .md\:w-\[320px\]{
+        width: 320px;
+    }
+
+    .md\:w-\[380px\]{
+        width: 380px;
+    }
+
+    .md\:w-\[480px\]{
+        width: 480px;
+    }
+
     .md\:w-screen-sm{
         width: 600px;
     }
@@ -6249,6 +6411,18 @@ video {
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 
+    .md\:rounded-bl-md{
+        border-bottom-left-radius: 12px;
+    }
+
+    .md\:rounded-tl-md{
+        border-top-left-radius: 12px;
+    }
+
+    .md\:border-l{
+        border-left-width: 1px;
+    }
+
     .md\:px-l10{
         padding-left: 40px;
         padding-right: 40px;