@nascentdigital/funnel-editor 4.5.3 → 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;
@@ -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;
@@ -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;
@@ -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;
@@ -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,7 +2051,18 @@ video {
 .label-xs{
     font-size: 11px;
     font-weight: 400;
-    line-height: 1.5;
+    line-height: 1.1;
+}
+.label-xxs{
+    font-family: var(--font-primary), sans-serif;
+}
+.label-xxs.label-strong{
+    font-weight: 600;
+}
+.label-xxs{
+    font-size: 10px;
+    font-weight: 400;
+    line-height: 1.1;
 }
 .button{
     flex-shrink: 0;
@@ -2104,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;
@@ -2411,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;
@@ -2436,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;
@@ -2457,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 {
         }
@@ -2602,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;
@@ -2633,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;
@@ -2665,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;
@@ -2782,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;
@@ -2843,6 +2848,10 @@ video {
     height: 20px;
     width: 20px;
 }
+.iconbutton.iconbutton-xxs{
+    height: 16px;
+    width: 16px;
+}
 .iconbutton.iconbutton-disabled{
     cursor: default;
 }
@@ -2957,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;
@@ -3018,6 +3027,10 @@ video {
     height: 20px;
     width: 20px;
 }
+.iconbutton-util.iconbutton-xxs{
+    height: 16px;
+    width: 16px;
+}
 .iconbutton-util.iconbutton-disabled{
     cursor: default;
 }
@@ -3112,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;
@@ -3173,6 +3186,10 @@ video {
     height: 20px;
     width: 20px;
 }
+.iconbutton-avatar.iconbutton-xxs{
+    height: 16px;
+    width: 16px;
+}
 .iconbutton-avatar.iconbutton-disabled{
     cursor: default;
 }
@@ -3268,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;
@@ -3329,6 +3346,10 @@ video {
     height: 20px;
     width: 20px;
 }
+.iconbutton-toolbar.iconbutton-xxs{
+    height: 16px;
+    width: 16px;
+}
 .iconbutton-toolbar.iconbutton-disabled{
     cursor: default;
 }
@@ -3632,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;
@@ -3650,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));
@@ -3675,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;
@@ -3737,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 {
@@ -3758,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 {
@@ -3835,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;
@@ -3869,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 {
@@ -3896,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);
@@ -3909,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 {
@@ -4170,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 {
@@ -4362,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;
@@ -4545,6 +4602,9 @@ video {
 .h-9{
     height: 9px;
 }
+.h-\[120px\]{
+    height: 120px;
+}
 .h-\[13\.5px\]{
     height: 13.5px;
 }
@@ -4560,14 +4620,17 @@ video {
 .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;
@@ -4584,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;
@@ -4680,9 +4746,6 @@ video {
 .w-\[100px\]{
     width: 100px;
 }
-.w-\[116px\]{
-    width: 116px;
-}
 .w-\[120px\]{
     width: 120px;
 }
@@ -4701,12 +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;
 }
@@ -4716,6 +4788,12 @@ video {
 .w-\[64px\]{
     width: 64px;
 }
+.w-\[72px\]{
+    width: 72px;
+}
+.w-auto{
+    width: auto;
+}
 .w-dvw{
     width: 100dvw;
 }
@@ -4728,6 +4806,9 @@ video {
 .min-w-18{
     min-width: 18px;
 }
+.min-w-\[120px\]{
+    min-width: 120px;
+}
 .min-w-\[180px\]{
     min-width: 180px;
 }
@@ -4752,6 +4833,9 @@ video {
 .max-w-\[360px\]{
     max-width: 360px;
 }
+.max-w-\[380px\]{
+    max-width: 380px;
+}
 .max-w-\[420px\]{
     max-width: 420px;
 }
@@ -4970,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;
 }
@@ -5009,6 +5100,9 @@ video {
 .text-pretty{
     text-wrap: pretty;
 }
+.rounded-\[2px\]{
+    border-radius: 2px;
+}
 .rounded-full{
     border-radius: 9999px;
 }
@@ -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));
@@ -5247,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));
@@ -5424,6 +5533,10 @@ video {
     padding-top: 72px;
     padding-bottom: 72px;
 }
+.py-l2{
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
 .py-l3{
     padding-top: 6px;
     padding-bottom: 6px;