polotno 3.0.0-beta.13 → 3.0.0-beta.14

package/blueprint.polotno.css

@@ -1,4 +1,234 @@
 @charset "UTF-8";
+:root{
+  --bp-emphasis-transition-duration:100ms;
+  --bp-emphasis-ease-default:cubic-bezier(0.4, 1, 0.75, 0.9);
+  --bp-emphasis-ease-bounce:cubic-bezier(0.54, 1.12, 0.38, 1.11);
+  --bp-emphasis-focus-color:var(--bp-intent-primary-rest);
+  --bp-emphasis-focus-width:2px;
+  --bp-emphasis-focus-offset:2px;
+  --bp-emphasis-motion-reduced:0;
+  --bp-iconography-size-small:16px;
+  --bp-iconography-size-default:20px;
+  --bp-iconography-color-muted:var(--bp-intent-default-rest);
+  --bp-iconography-color-default-rest:var(--bp-intent-default-rest);
+  --bp-iconography-color-default-hover:oklch(from var(--bp-intent-default-hover) calc(l + -0.154) calc(c + -0.009) calc(h + -5.3));
+  --bp-iconography-color-default-active:oklch(from var(--bp-intent-default-active) calc(l + -0.116) calc(c + -0.004) calc(h + -5.3));
+  --bp-iconography-color-default-disabled:oklch(from var(--bp-intent-default-disabled) calc(l + -0.156) calc(c + 0.006) calc(h + -1.3) / 0.6);
+  --bp-iconography-color-primary-rest:var(--bp-intent-primary-rest);
+  --bp-iconography-color-primary-hover:var(--bp-intent-primary-hover);
+  --bp-iconography-color-primary-active:var(--bp-intent-primary-active);
+  --bp-iconography-color-primary-disabled:var(--bp-intent-primary-disabled);
+  --bp-iconography-color-success-rest:var(--bp-intent-success-rest);
+  --bp-iconography-color-success-hover:var(--bp-intent-success-hover);
+  --bp-iconography-color-success-active:var(--bp-intent-success-active);
+  --bp-iconography-color-success-disabled:var(--bp-intent-success-disabled);
+  --bp-iconography-color-warning-rest:var(--bp-intent-warning-rest);
+  --bp-iconography-color-warning-hover:var(--bp-intent-warning-hover);
+  --bp-iconography-color-warning-active:var(--bp-intent-warning-active);
+  --bp-iconography-color-warning-disabled:var(--bp-intent-warning-disabled);
+  --bp-iconography-color-danger-rest:var(--bp-intent-danger-rest);
+  --bp-iconography-color-danger-hover:var(--bp-intent-danger-hover);
+  --bp-iconography-color-danger-active:var(--bp-intent-danger-active);
+  --bp-iconography-color-danger-disabled:var(--bp-intent-danger-disabled);
+  --bp-intent-default-rest:var(--bp-palette-gray-1);
+  --bp-intent-default-hover:var(--bp-palette-dark-gray-5);
+  --bp-intent-default-active:var(--bp-palette-dark-gray-4);
+  --bp-intent-default-disabled:var(--bp-palette-gray-3);
+  --bp-intent-default-foreground:var(--bp-palette-white);
+  --bp-intent-primary-rest:var(--bp-palette-blue-3);
+  --bp-intent-primary-hover:var(--bp-palette-blue-2);
+  --bp-intent-primary-active:var(--bp-palette-blue-1);
+  --bp-intent-primary-disabled:var(--bp-palette-blue-4);
+  --bp-intent-primary-foreground:var(--bp-palette-white);
+  --bp-intent-success-rest:var(--bp-palette-green-3);
+  --bp-intent-success-hover:var(--bp-palette-green-2);
+  --bp-intent-success-active:var(--bp-palette-green-1);
+  --bp-intent-success-disabled:var(--bp-palette-green-4);
+  --bp-intent-success-foreground:var(--bp-palette-white);
+  --bp-intent-warning-rest:var(--bp-palette-orange-3);
+  --bp-intent-warning-hover:var(--bp-palette-orange-2);
+  --bp-intent-warning-active:var(--bp-palette-orange-1);
+  --bp-intent-warning-disabled:var(--bp-palette-orange-4);
+  --bp-intent-warning-foreground:var(--bp-palette-black);
+  --bp-intent-danger-rest:var(--bp-palette-red-3);
+  --bp-intent-danger-hover:var(--bp-palette-red-2);
+  --bp-intent-danger-active:var(--bp-palette-red-1);
+  --bp-intent-danger-disabled:var(--bp-palette-red-4);
+  --bp-intent-danger-foreground:var(--bp-palette-white);
+  --bp-palette-black:#111418;
+  --bp-palette-white:#ffffff;
+  --bp-palette-dark-gray-1:#1c2127;
+  --bp-palette-dark-gray-2:#252a31;
+  --bp-palette-dark-gray-3:#2f343c;
+  --bp-palette-dark-gray-4:#383e47;
+  --bp-palette-dark-gray-5:#404854;
+  --bp-palette-gray-1:#5f6b7c;
+  --bp-palette-gray-2:#738091;
+  --bp-palette-gray-3:#8f99a8;
+  --bp-palette-gray-4:#abb3bf;
+  --bp-palette-gray-5:#c5cbd3;
+  --bp-palette-light-gray-1:#d3d8de;
+  --bp-palette-light-gray-2:#dce0e5;
+  --bp-palette-light-gray-3:#e5e8eb;
+  --bp-palette-light-gray-4:#edeff2;
+  --bp-palette-light-gray-5:#f6f7f9;
+  --bp-palette-blue-1:#184a90;
+  --bp-palette-blue-2:#215db0;
+  --bp-palette-blue-3:#2d72d2;
+  --bp-palette-blue-4:#4c90f0;
+  --bp-palette-blue-5:#8abbff;
+  --bp-palette-green-1:#165a36;
+  --bp-palette-green-2:#1c6e42;
+  --bp-palette-green-3:#238551;
+  --bp-palette-green-4:#32a467;
+  --bp-palette-green-5:#72ca9b;
+  --bp-palette-orange-1:#77450d;
+  --bp-palette-orange-2:#935610;
+  --bp-palette-orange-3:#c87619;
+  --bp-palette-orange-4:#ec9a3c;
+  --bp-palette-orange-5:#fbb360;
+  --bp-palette-red-1:#8e292c;
+  --bp-palette-red-2:#ac2f33;
+  --bp-palette-red-3:#cd4246;
+  --bp-palette-red-4:#e76a6e;
+  --bp-palette-red-5:#fa999c;
+  --bp-palette-vermilion-1:#96290d;
+  --bp-palette-vermilion-2:#b83211;
+  --bp-palette-vermilion-3:#d33d17;
+  --bp-palette-vermilion-4:#eb6847;
+  --bp-palette-vermilion-5:#ff9980;
+  --bp-palette-rose-1:#a82255;
+  --bp-palette-rose-2:#c22762;
+  --bp-palette-rose-3:#db2c6f;
+  --bp-palette-rose-4:#f5498b;
+  --bp-palette-rose-5:#ff66a1;
+  --bp-palette-violet-1:#5c255c;
+  --bp-palette-violet-2:#7c327c;
+  --bp-palette-violet-3:#9d3f9d;
+  --bp-palette-violet-4:#bd6bbd;
+  --bp-palette-violet-5:#d69fd6;
+  --bp-palette-indigo-1:#5642a6;
+  --bp-palette-indigo-2:#634dbf;
+  --bp-palette-indigo-3:#7961db;
+  --bp-palette-indigo-4:#9881f3;
+  --bp-palette-indigo-5:#bdadff;
+  --bp-palette-cerulean-1:#0c5174;
+  --bp-palette-cerulean-2:#0f6894;
+  --bp-palette-cerulean-3:#147eb3;
+  --bp-palette-cerulean-4:#3fa6da;
+  --bp-palette-cerulean-5:#68c1ee;
+  --bp-palette-turquoise-1:#004d46;
+  --bp-palette-turquoise-2:#007067;
+  --bp-palette-turquoise-3:#00a396;
+  --bp-palette-turquoise-4:#13c9ba;
+  --bp-palette-turquoise-5:#7ae1d8;
+  --bp-palette-forest-1:#1d7324;
+  --bp-palette-forest-2:#238c2c;
+  --bp-palette-forest-3:#29a634;
+  --bp-palette-forest-4:#43bf4d;
+  --bp-palette-forest-5:#62d96b;
+  --bp-palette-lime-1:#43501b;
+  --bp-palette-lime-2:#5a701a;
+  --bp-palette-lime-3:#8eb125;
+  --bp-palette-lime-4:#b6d94c;
+  --bp-palette-lime-5:#d4f17e;
+  --bp-palette-gold-1:#5c4405;
+  --bp-palette-gold-2:#866103;
+  --bp-palette-gold-3:#d1980b;
+  --bp-palette-gold-4:#f0b726;
+  --bp-palette-gold-5:#fbd065;
+  --bp-palette-sepia-1:#5e4123;
+  --bp-palette-sepia-2:#7a542e;
+  --bp-palette-sepia-3:#946638;
+  --bp-palette-sepia-4:#af855a;
+  --bp-palette-sepia-5:#d0b090;
+  --bp-surface-border-color-default:oklch(from var(--bp-intent-default-rest) l c h / 0.12);
+  --bp-surface-border-color-strong:oklch(from var(--bp-intent-default-rest) l c h / 0.25);
+  --bp-surface-border-width:1px;
+  --bp-surface-border-radius:4px;
+  --bp-surface-shadow-0:0px 0px 0px 1px rgba(17, 20, 24, 0.15);
+  --bp-surface-shadow-1:0px 0px 0px 1px rgba(17, 20, 24, 0.1), 0px 1px 1px 0px rgba(17, 20, 24, 0.2);
+  --bp-surface-shadow-2:0px 0px 0px 1px rgba(17, 20, 24, 0.1), 0px 1px 1px 0px rgba(17, 20, 24, 0.2), 0px 2px 6px 0px rgba(17, 20, 24, 0.2);
+  --bp-surface-shadow-3:0px 0px 0px 1px rgba(17, 20, 24, 0.1), 0px 2px 4px 0px rgba(17, 20, 24, 0.2), 0px 8px 24px 0px rgba(17, 20, 24, 0.2);
+  --bp-surface-shadow-4:0px 0px 0px 1px rgba(17, 20, 24, 0.1), 0px 4px 8px 0px rgba(17, 20, 24, 0.2), 0px 18px 46px 6px rgba(17, 20, 24, 0.2);
+  --bp-surface-spacing:4px;
+  --bp-surface-z-index-0:0;
+  --bp-surface-z-index-1:10;
+  --bp-surface-z-index-2:20;
+  --bp-surface-z-index-3:30;
+  --bp-surface-z-index-4:40;
+  --bp-surface-color-code:oklch(from var(--bp-palette-white) l c h / 0.7);
+  --bp-surface-layer-opacity:0.05;
+  --bp-surface-layer-color-default:oklch(from var(--bp-intent-default-rest) l c h / var(--bp-surface-layer-opacity));
+  --bp-surface-layer-color-primary:oklch(from var(--bp-intent-primary-rest) l c h / var(--bp-surface-layer-opacity));
+  --bp-surface-layer-color-success:oklch(from var(--bp-intent-success-rest) l c h / var(--bp-surface-layer-opacity));
+  --bp-surface-layer-color-warning:oklch(from var(--bp-intent-warning-rest) l c h / var(--bp-surface-layer-opacity));
+  --bp-surface-layer-color-danger:oklch(from var(--bp-intent-danger-rest) l c h / var(--bp-surface-layer-opacity));
+  --bp-surface-layer-default:linear-gradient(var(--bp-surface-layer-color-default) 0 0);
+  --bp-surface-layer-primary:linear-gradient(var(--bp-surface-layer-color-primary) 0 0);
+  --bp-surface-layer-success:linear-gradient(var(--bp-surface-layer-color-success) 0 0);
+  --bp-surface-layer-warning:linear-gradient(var(--bp-surface-layer-color-warning) 0 0);
+  --bp-surface-layer-danger:linear-gradient(var(--bp-surface-layer-color-danger) 0 0);
+  --bp-surface-background-color-default-rest:oklch(from var(--bp-intent-default-rest) calc(l + 0.452) calc(c + -0.028) calc(h + 7.5));
+  --bp-surface-background-color-default-hover:oklch(from var(--bp-intent-default-hover) calc(l + 0.552) calc(c + -0.018) calc(h + 0));
+  --bp-surface-background-color-default-active:oklch(from var(--bp-intent-default-active) calc(l + 0.568) calc(c + -0.012) calc(h + -10.5));
+  --bp-surface-background-color-default-disabled:oklch(from var(--bp-intent-default-disabled) calc(l + 0.296) calc(c + -0.022) calc(h + 6.2));
+  --bp-surface-background-color-primary-rest:var(--bp-intent-primary-rest);
+  --bp-surface-background-color-primary-hover:var(--bp-intent-primary-hover);
+  --bp-surface-background-color-primary-active:var(--bp-intent-primary-active);
+  --bp-surface-background-color-primary-disabled:var(--bp-intent-primary-disabled);
+  --bp-surface-background-color-success-rest:var(--bp-intent-success-rest);
+  --bp-surface-background-color-success-hover:var(--bp-intent-success-hover);
+  --bp-surface-background-color-success-active:var(--bp-intent-success-active);
+  --bp-surface-background-color-success-disabled:var(--bp-intent-success-disabled);
+  --bp-surface-background-color-warning-rest:var(--bp-intent-warning-rest);
+  --bp-surface-background-color-warning-hover:var(--bp-intent-warning-hover);
+  --bp-surface-background-color-warning-active:var(--bp-intent-warning-active);
+  --bp-surface-background-color-warning-disabled:var(--bp-intent-warning-disabled);
+  --bp-surface-background-color-danger-rest:var(--bp-intent-danger-rest);
+  --bp-surface-background-color-danger-hover:var(--bp-intent-danger-hover);
+  --bp-surface-background-color-danger-active:var(--bp-intent-danger-active);
+  --bp-surface-background-color-danger-disabled:var(--bp-intent-danger-disabled);
+  --bp-typography-family-default:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", blueprint-icons-16, sans-serif;
+  --bp-typography-family-mono:monospace;
+  --bp-typography-size-body-x-small:10px;
+  --bp-typography-size-body-small:12px;
+  --bp-typography-size-body-medium:14px;
+  --bp-typography-size-body-large:16px;
+  --bp-typography-size-heading-small:16px;
+  --bp-typography-size-heading-medium:20px;
+  --bp-typography-size-heading-large:24px;
+  --bp-typography-size-heading-x-large:28px;
+  --bp-typography-size-heading-display:46px;
+  --bp-typography-size-code-small:12px;
+  --bp-typography-size-code-medium:13px;
+  --bp-typography-size-code-large:14px;
+  --bp-typography-weight-default:400;
+  --bp-typography-weight-bold:600;
+  --bp-typography-line-height-default:1.28581;
+  --bp-typography-line-height-large:1.5;
+  --bp-typography-color-muted:var(--bp-intent-default-rest);
+  --bp-typography-color-default-rest:oklch(from var(--bp-intent-default-rest) calc(l + -0.279) calc(c + -0.017) calc(h + -4));
+  --bp-typography-color-default-hover:oklch(from var(--bp-intent-default-hover) calc(l + -0.209) calc(c + -0.013) calc(h + -2.7));
+  --bp-typography-color-default-active:oklch(from var(--bp-intent-default-active) calc(l + -0.079) calc(c + -0.003) calc(h + -1.6));
+  --bp-typography-color-default-disabled:var(--bp-intent-default-disabled);
+  --bp-typography-color-primary-rest:var(--bp-intent-primary-rest);
+  --bp-typography-color-primary-hover:var(--bp-intent-primary-hover);
+  --bp-typography-color-primary-active:var(--bp-intent-primary-active);
+  --bp-typography-color-primary-disabled:var(--bp-intent-primary-disabled);
+  --bp-typography-color-success-rest:var(--bp-intent-success-rest);
+  --bp-typography-color-success-hover:var(--bp-intent-success-hover);
+  --bp-typography-color-success-active:var(--bp-intent-success-active);
+  --bp-typography-color-success-disabled:var(--bp-intent-success-disabled);
+  --bp-typography-color-warning-rest:var(--bp-intent-warning-rest);
+  --bp-typography-color-warning-hover:var(--bp-intent-warning-hover);
+  --bp-typography-color-warning-active:var(--bp-intent-warning-active);
+  --bp-typography-color-warning-disabled:var(--bp-intent-warning-disabled);
+  --bp-typography-color-danger-rest:var(--bp-intent-danger-rest);
+  --bp-typography-color-danger-hover:var(--bp-intent-danger-hover);
+  --bp-typography-color-danger-active:var(--bp-intent-danger-active);
+  --bp-typography-color-danger-disabled:var(--bp-intent-danger-disabled);
+}
 .bp6-scope,.bp6-portal{
   box-sizing:border-box;
 }
@@ -2955,7 +3185,7 @@ a > .bp6-running-text code{
 .bp6-key,
 .bp6-running-text kbd{
   background:#ffffff;
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 1px 1px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
   color:#5f6b7c;
 }
 
@@ -3286,7 +3516,7 @@ a > .bp6-dark .bp6-running-text code{
 .bp6-dark .bp6-key,
 .bp6-dark .bp6-running-text kbd{
   background:#2f343c;
-  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px 0 rgba(17, 20, 24, 0.4);
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 10px 0 rgba(0, 0, 0, 0.2), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 1px 10px -1px rgba(0, 0, 0, 0.2);
   color:#abb3bf;
 }
 .bp6-dark .bp6-icon.bp6-intent-primary, .bp6-dark .bp6-icon-standard.bp6-intent-primary, .bp6-dark .bp6-icon-large.bp6-intent-primary{
@@ -4950,13 +5180,13 @@ a.bp6-button.bp6-disabled{
 .bp6-card{
   background-color:#ffffff;
   border-radius:4px;
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.15);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.15), 0 0 5px 0 rgba(0, 0, 0, 0.02);
   padding:20px;
   transition:transform 200ms cubic-bezier(0.4, 1, 0.75, 0.9), box-shadow 200ms cubic-bezier(0.4, 1, 0.75, 0.9);
 }
 .bp6-card.bp6-dark, .bp6-dark .bp6-card{
   background-color:#252a31;
-  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2);
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 10px 0 rgba(0, 0, 0, 0.2);
 }
 @media (forced-colors: active) and (prefers-color-scheme: dark){
   .bp6-card{
@@ -4966,10 +5196,10 @@ a.bp6-button.bp6-disabled{
 }
 
 .bp6-elevation-0{
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.15);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.15), 0 0 5px 0 rgba(0, 0, 0, 0.02);
 }
 .bp6-elevation-0.bp6-dark, .bp6-dark .bp6-elevation-0{
-  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2);
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 10px 0 rgba(0, 0, 0, 0.2);
 }
 @media (forced-colors: active) and (prefers-color-scheme: dark){
   .bp6-elevation-0{
@@ -4978,10 +5208,10 @@ a.bp6-button.bp6-disabled{
 }
 
 .bp6-elevation-1{
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 1px 1px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
 }
 .bp6-elevation-1.bp6-dark, .bp6-dark .bp6-elevation-1{
-  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px 0 rgba(17, 20, 24, 0.4);
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 10px 0 rgba(0, 0, 0, 0.2), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 1px 10px -1px rgba(0, 0, 0, 0.2);
 }
 @media (forced-colors: active) and (prefers-color-scheme: dark){
   .bp6-elevation-1{
@@ -4990,10 +5220,10 @@ a.bp6-button.bp6-disabled{
 }
 
 .bp6-elevation-2{
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 1px 1px rgba(17, 20, 24, 0.2), 0 2px 6px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 .bp6-elevation-2.bp6-dark, .bp6-dark .bp6-elevation-2{
-  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px rgba(17, 20, 24, 0.4), 0 2px 6px rgba(17, 20, 24, 0.4);
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.5), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 10px 30px -5px rgba(0, 0, 0, 0.5);
 }
 @media (forced-colors: active) and (prefers-color-scheme: dark){
   .bp6-elevation-2{
@@ -5002,10 +5232,10 @@ a.bp6-button.bp6-disabled{
 }
 
 .bp6-elevation-3{
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 .bp6-elevation-3.bp6-dark, .bp6-dark .bp6-elevation-3{
-  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(17, 20, 24, 0.4), 0 8px 24px rgba(17, 20, 24, 0.4);
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 20px 25px -5px rgba(0, 0, 0, 0.3), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 10px 30px -5px rgba(0, 0, 0, 0.3);
 }
 @media (forced-colors: active) and (prefers-color-scheme: dark){
   .bp6-elevation-3{
@@ -5014,10 +5244,10 @@ a.bp6-button.bp6-disabled{
 }
 
 .bp6-elevation-4{
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 4px 8px rgba(17, 20, 24, 0.2), 0 18px 46px 6px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 25px 50px -12px rgba(0, 0, 0, 0.3);
 }
 .bp6-elevation-4.bp6-dark, .bp6-dark .bp6-elevation-4{
-  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 4px 8px rgba(17, 20, 24, 0.4), 0 18px 46px 6px rgba(17, 20, 24, 0.4);
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 25px 60px -12px rgba(0, 0, 0, 0.85), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08);
 }
 @media (forced-colors: active) and (prefers-color-scheme: dark){
   .bp6-elevation-4{
@@ -5030,11 +5260,11 @@ a.bp6-button.bp6-disabled{
 }
 
 .bp6-card.bp6-interactive:hover{
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   cursor:pointer;
 }
 .bp6-card.bp6-interactive:hover.bp6-dark, .bp6-dark .bp6-card.bp6-interactive:hover{
-  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(17, 20, 24, 0.4), 0 8px 24px rgba(17, 20, 24, 0.4);
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 20px 25px -5px rgba(0, 0, 0, 0.3), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 10px 30px -5px rgba(0, 0, 0, 0.3);
 }
 .bp6-card.bp6-interactive.bp6-selected{
   box-shadow:0 0 0 3px rgba(76, 144, 240, 0.2), 0 0 0 1px #4c90f0;
@@ -5043,11 +5273,11 @@ a.bp6-button.bp6-disabled{
   box-shadow:0 0 0 3px rgba(138, 187, 255, 0.4), 0 0 0 1px #8abbff;
 }
 .bp6-card.bp6-interactive:active{
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 1px 1px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
   transition-duration:0;
 }
 .bp6-card.bp6-interactive:active.bp6-dark, .bp6-dark .bp6-card.bp6-interactive:active{
-  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px 0 rgba(17, 20, 24, 0.4);
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 10px 0 rgba(0, 0, 0, 0.2), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 1px 10px -1px rgba(0, 0, 0, 0.2);
 }
 .bp6-card-list{
   overflow:auto;
@@ -5203,7 +5433,7 @@ a.bp6-button.bp6-disabled{
 .bp6-dialog{
   background:#f6f7f9;
   border-radius:4px;
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   display:flex;
   flex-direction:column;
   margin:32px 0;
@@ -5219,7 +5449,7 @@ a.bp6-button.bp6-disabled{
 }
 .bp6-dialog.bp6-dark, .bp6-dark .bp6-dialog{
   background:#1c2127;
-  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(17, 20, 24, 0.4), 0 8px 24px rgba(17, 20, 24, 0.4);
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 20px 25px -5px rgba(0, 0, 0, 0.3), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 10px 30px -5px rgba(0, 0, 0, 0.3);
   color:#f6f7f9;
 }
 @media (forced-colors: active) and (prefers-color-scheme: dark){
@@ -5490,7 +5720,7 @@ a.bp6-button.bp6-disabled{
 }
 .bp6-drawer{
   background:#ffffff;
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 4px 8px rgba(17, 20, 24, 0.2), 0 18px 46px 6px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 25px 50px -12px rgba(0, 0, 0, 0.3);
   display:flex;
   flex-direction:column;
   margin:0;
@@ -5625,7 +5855,7 @@ a.bp6-button.bp6-disabled{
 }
 .bp6-drawer.bp6-dark, .bp6-dark .bp6-drawer{
   background:#2f343c;
-  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(17, 20, 24, 0.4), 0 8px 24px rgba(17, 20, 24, 0.4);
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 20px 25px -5px rgba(0, 0, 0, 0.3), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 10px 30px -5px rgba(0, 0, 0, 0.3);
   color:#f6f7f9;
 }
 
@@ -11470,13 +11700,13 @@ span.bp6-icon:empty.bp6-icon-large{
   padding:0 4px;
 }
 .bp6-submenu.bp6-popover > .bp6-popover-content{
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 .bp6-dark .bp6-submenu.bp6-popover, .bp6-submenu.bp6-popover.bp6-dark{
   box-shadow:none;
 }
 .bp6-dark .bp6-submenu.bp6-popover > .bp6-popover-content, .bp6-submenu.bp6-popover.bp6-dark > .bp6-popover-content{
-  box-shadow:0 0 0 1px hsl(215, 3%, 38%), inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(17, 20, 24, 0.4), 0 8px 24px rgba(17, 20, 24, 0.4);
+  box-shadow:0 0 0 1px hsl(215, 3%, 38%), inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 20px 25px -5px rgba(0, 0, 0, 0.3), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 10px 30px -5px rgba(0, 0, 0, 0.3);
 }
 
 .bp6-menu{
@@ -11976,7 +12206,7 @@ button.bp6-menu-item{
 }
 .bp6-navbar{
   background-color:#ffffff;
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 1px 1px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
   height:50px;
   padding:0 16px;
   position:relative;
@@ -11987,10 +12217,10 @@ button.bp6-menu-item{
   background-color:#252a31;
 }
 .bp6-navbar.bp6-dark{
-  box-shadow:inset inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px 0 rgba(17, 20, 24, 0.4);
+  box-shadow:inset inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 10px 0 rgba(0, 0, 0, 0.2), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 1px 10px -1px rgba(0, 0, 0, 0.2);
 }
 .bp6-dark .bp6-navbar{
-  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px 0 rgba(17, 20, 24, 0.4);
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 10px 0 rgba(0, 0, 0, 0.2), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 1px 10px -1px rgba(0, 0, 0, 0.2);
 }
 .bp6-navbar.bp6-fixed-top{
   left:0;
@@ -12333,13 +12563,13 @@ label.bp6-label .bp6-popover-target{
   padding:0 4px;
 }
 .bp6-submenu.bp6-popover > .bp6-popover-content{
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 .bp6-dark .bp6-submenu.bp6-popover, .bp6-submenu.bp6-popover.bp6-dark{
   box-shadow:none;
 }
 .bp6-dark .bp6-submenu.bp6-popover > .bp6-popover-content, .bp6-submenu.bp6-popover.bp6-dark > .bp6-popover-content{
-  box-shadow:0 0 0 1px hsl(215, 3%, 38%), inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(17, 20, 24, 0.4), 0 8px 24px rgba(17, 20, 24, 0.4);
+  box-shadow:0 0 0 1px hsl(215, 3%, 38%), inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 20px 25px -5px rgba(0, 0, 0, 0.3), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 10px 30px -5px rgba(0, 0, 0, 0.3);
 }
 .bp6-tree-node-secondary-label .bp6-popover-target{
   align-items:center;
@@ -12357,7 +12587,7 @@ label.bp6-label .bp6-popover-target{
   width:20px;
 }
 .bp6-popover{
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 .bp6-popover .bp6-popover-content{
   background:#ffffff;
@@ -12458,7 +12688,7 @@ label.bp6-label .bp6-popover-target{
   width:100%;
 }
 .bp6-popover.bp6-dark, .bp6-dark .bp6-popover{
-  box-shadow:0 0 0 1px hsl(215, 3%, 38%), inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(17, 20, 24, 0.4), 0 8px 24px rgba(17, 20, 24, 0.4);
+  box-shadow:0 0 0 1px hsl(215, 3%, 38%), inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 20px 25px -5px rgba(0, 0, 0, 0.3), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 10px 30px -5px rgba(0, 0, 0, 0.3);
 }
 .bp6-popover.bp6-dark .bp6-popover-content, .bp6-dark .bp6-popover .bp6-popover-content{
   background:#2f343c;
@@ -12767,7 +12997,7 @@ span.bp6-popover-target{
   width:14px;
 }
 .bp6-tooltip{
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 .bp6-tooltip .bp6-popover-content{
   background:#404854;
@@ -12868,7 +13098,7 @@ a > .bp6-tooltip .bp6-running-text code{
 .bp6-tooltip .bp6-key,
 .bp6-tooltip .bp6-running-text kbd{
   background:#2f343c;
-  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px 0 rgba(17, 20, 24, 0.4);
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 10px 0 rgba(0, 0, 0, 0.2), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 1px 10px -1px rgba(0, 0, 0, 0.2);
   color:#abb3bf;
 }
 .bp6-tooltip .bp6-icon.bp6-intent-primary, .bp6-tooltip .bp6-icon-standard.bp6-intent-primary, .bp6-tooltip .bp6-icon-large.bp6-intent-primary{
@@ -13002,7 +13232,7 @@ a > .bp6-dark .bp6-tooltip .bp6-running-text code{
 .bp6-dark .bp6-tooltip .bp6-key,
 .bp6-dark .bp6-tooltip .bp6-running-text kbd{
   background:#ffffff;
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 1px 1px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
   color:#5f6b7c;
 }
 .bp6-tooltip.bp6-dark .bp6-icon.bp6-intent-primary, .bp6-tooltip.bp6-dark .bp6-icon-standard.bp6-intent-primary, .bp6-tooltip.bp6-dark .bp6-icon-large.bp6-intent-primary, .bp6-dark .bp6-tooltip .bp6-icon.bp6-intent-primary, .bp6-dark .bp6-tooltip .bp6-icon-standard.bp6-intent-primary, .bp6-dark .bp6-tooltip .bp6-icon-large.bp6-intent-primary{
@@ -13227,7 +13457,7 @@ a > .bp6-dark .bp6-tooltip .bp6-running-text code{
 .bp6-slider-handle .bp6-slider-label{
   background:#404854;
   border-radius:4px;
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   color:#f6f7f9;
   margin-left:8px;
 }
@@ -14631,7 +14861,7 @@ a > .bp6-dark .bp6-tooltip .bp6-running-text code{
 }
 .bp6-toast.bp6-dark, .bp6-dark .bp6-toast{
   background-color:#383e47;
-  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(17, 20, 24, 0.4), 0 8px 24px rgba(17, 20, 24, 0.4);
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 20px 25px -5px rgba(0, 0, 0, 0.3), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 10px 30px -5px rgba(0, 0, 0, 0.3);
 }
 .bp6-toast.bp6-dark > .bp6-icon, .bp6-dark .bp6-toast > .bp6-icon{
   color:#abb3bf;
@@ -14817,7 +15047,7 @@ a > .bp6-dark .bp6-tooltip .bp6-running-text code{
   width:14px;
 }
 .bp6-tooltip{
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 2px 4px rgba(17, 20, 24, 0.2), 0 8px 24px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 .bp6-tooltip .bp6-popover-content{
   background:#404854;
@@ -14918,7 +15148,7 @@ a > .bp6-tooltip .bp6-running-text code{
 .bp6-tooltip .bp6-key,
 .bp6-tooltip .bp6-running-text kbd{
   background:#2f343c;
-  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px 0 rgba(17, 20, 24, 0.4);
+  box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 10px 0 rgba(0, 0, 0, 0.2), inset 0 0 0.5px 0 rgba(255, 255, 255, 0.3), inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 1px 10px -1px rgba(0, 0, 0, 0.2);
   color:#abb3bf;
 }
 .bp6-tooltip .bp6-icon.bp6-intent-primary, .bp6-tooltip .bp6-icon-standard.bp6-intent-primary, .bp6-tooltip .bp6-icon-large.bp6-intent-primary{
@@ -15052,7 +15282,7 @@ a > .bp6-dark .bp6-tooltip .bp6-running-text code{
 .bp6-dark .bp6-tooltip .bp6-key,
 .bp6-dark .bp6-tooltip .bp6-running-text kbd{
   background:#ffffff;
-  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 1px 1px rgba(17, 20, 24, 0.2);
+  box-shadow:0 0 0 1px rgba(17, 20, 24, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
   color:#5f6b7c;
 }
 .bp6-tooltip.bp6-dark .bp6-icon.bp6-intent-primary, .bp6-tooltip.bp6-dark .bp6-icon-standard.bp6-intent-primary, .bp6-tooltip.bp6-dark .bp6-icon-large.bp6-intent-primary, .bp6-dark .bp6-tooltip .bp6-icon.bp6-intent-primary, .bp6-dark .bp6-tooltip .bp6-icon-standard.bp6-intent-primary, .bp6-dark .bp6-tooltip .bp6-icon-large.bp6-intent-primary{

package/canvas/audio.d.ts

@@ -4,7 +4,7 @@ type Props = {
     store: StoreType;
     audio: AudioType;
 };
-export declare const AudioElement: (({ audio, store }: Props) => any) & {
+export declare const AudioElement: (({ audio, store }: Props) => null) & {
     displayName: string;
 };
 export {};

package/canvas/context-menu/context-menu.d.ts

@@ -11,7 +11,7 @@ type ContextMenuProps = {
     isOpen: boolean;
     setIsOpen: (b: boolean) => void;
 };
-export declare const ContextMenu: (({ store, isOpen, offset, setIsOpen }: ContextMenuProps) => React.JSX.Element) & {
+export declare const ContextMenu: (({ store, isOpen, offset, setIsOpen }: ContextMenuProps) => React.JSX.Element | null) & {
     displayName: string;
 };
 export {};

package/canvas/drawing-layer.d.ts

@@ -11,7 +11,7 @@ type DrawingLayerProps = {
     yPadding: number;
     bleed: number;
 };
-export declare const DrawingLayer: (({ store, page, width, height, scale, xPadding, yPadding, bleed, }: DrawingLayerProps) => React.JSX.Element) & {
+export declare const DrawingLayer: (({ store, page, width, height, scale, xPadding, yPadding, bleed, }: DrawingLayerProps) => React.JSX.Element | null) & {
     displayName: string;
 };
 export {};

package/canvas/element.d.ts

@@ -7,7 +7,7 @@ type ShapeProps = {
     onClick: Function;
 };
 export declare function registerShapeComponent(type: string, component: JSX.Element): void;
-declare const Element: ((props: ShapeProps) => React.JSX.Element) & {
+declare const Element: ((props: ShapeProps) => React.JSX.Element | null) & {
     displayName: string;
 };
 export default Element;

package/canvas/image-element.d.ts

@@ -10,7 +10,7 @@ export declare const useCornerRadiusAndCrop: (element: ImageElementType, image:
     y: number;
     width: number;
     height: number;
-}, pixelRatio: number, cornerRadius?: number, skipDownscale?: boolean, isVector?: boolean) => HTMLCanvasElement | HTMLImageElement;
+}, pixelRatio: number, cornerRadius?: number, skipDownscale?: boolean, isVector?: boolean) => HTMLCanvasElement | HTMLImageElement | undefined;
 type ImageProps = {
     store: StoreType;
     element: ImageElementType;

package/canvas/page-controls.d.ts

@@ -7,6 +7,6 @@ export declare const PageControls: (({ store, page, xPadding, yPadding, layout,
     xPadding: number;
     yPadding: number;
     layout?: "vertical" | "horizontal";
-}) => React.JSX.Element) & {
+}) => React.JSX.Element | null) & {
     displayName: string;
 };

package/canvas/rules.d.ts

@@ -1,14 +1,16 @@
 import React from 'react';
 import { StoreType } from '../model/store.js';
-type PageProps = {
+type TopRulesProps = {
     store: StoreType;
     xPadding: number;
     yPadding: number;
     width: number;
     height: number;
+    pageSizes?: number[];
     layout?: 'vertical' | 'horizontal';
+    renderOnlyActivePage?: boolean;
 };
-export declare const TopRules: (({ store, width, height, layout }: PageProps) => React.JSX.Element) & {
+export declare const TopRules: (({ store, width, height, pageSizes, layout, renderOnlyActivePage }: TopRulesProps) => React.JSX.Element | null) & {
     displayName: string;
 };
 export {};