@greese/ui 0.0.0-stage → 1.1.0

package/dist/_maps.scss

@@ -0,0 +1,1884 @@
+// GENERATED by @greese/ui from src/tokens.ts - do not edit.
+$breakpoints: (
+  'xs': 0px,
+  'sm': 600px,
+  'md': 900px,
+  'lg': 1200px,
+  'xl': 1536px,
+);
+
+$space-keys: (0, 1, 2, 3, 4, 5, 6, 7, 8);
+
+// Every token's default, keyed as in its custom property: (accent: (light, dark)).
+$color: (
+  'canvas': (light: "#ffffff", dark: "#11171c"),
+  'surface': (light: "#f5f7f9", dark: "#2a333c"),
+  'surface-overlay': (light: "#ffffff", dark: "#3c4854"),
+  'fg': (light: "#11171c", dark: "#e9edf2"),
+  'fg-muted': (light: "#505e6d", dark: "#a3b3c4"),
+  'border': (light: "#d7dfe7", dark: "#3c4854"),
+  'border-strong': (light: "#a3b3c4", dark: "#505e6d"),
+  'track': (light: "#d7dfe7", dark: "#687889"),
+  'primary': (light: "#2771e0", dark: "#81b2ff"),
+  'primary-strong': (light: "#1356b8", dark: "#aaccff"),
+  'primary-content': (light: "#ffffff", dark: "#11171c"),
+  'secondary': (light: "#7e5bd0", dark: "#b69fff"),
+  'secondary-strong': (light: "#6443ab", dark: "#cdbfff"),
+  'secondary-content': (light: "#ffffff", dark: "#11171c"),
+  'tertiary': (light: "#007069", dark: "#5dcec5"),
+  'tertiary-strong': (light: "#00544f", dark: "#94e1da"),
+  'tertiary-content': (light: "#ffffff", dark: "#11171c"),
+  'accent': (light: "#c13b7b", dark: "#ff81b6"),
+  'accent-strong': (light: "#9c2661", dark: "#ffaecd"),
+  'accent-content': (light: "#ffffff", dark: "#11171c"),
+  'focus-ring': (light: "var(--greese-color-primary)", dark: "var(--greese-color-primary-strong)"),
+  'positive': (light: "#007231", dark: "#61cf7e"),
+  'negative': (light: "#ae0914", dark: "#ff8b7f"),
+  'negative-content': (light: "#ffffff", dark: "#11171c"),
+  'warning': (light: "#8a5f00", dark: "#feb93d"),
+  'info': (light: "#00668f", dark: "#5ac0f7"),
+  'white': (light: "#ffffff", dark: "#ffffff"),
+  'black': (light: "#000000", dark: "#000000"),
+  'scrim': (light: "color-mix(in srgb, var(--greese-color-black) 45%, transparent)", dark: "color-mix(in srgb, var(--greese-color-black) 60%, transparent)"),
+);
+
+// Scheme-independent groups: (font-size: (lg: '1.125rem'), ...).
+$scalars: (
+  'space': (
+    '0': "0",
+    '1': "0.25rem",
+    '2': "0.5rem",
+    '3': "0.75rem",
+    '4': "1rem",
+    '5': "1.5rem",
+    '6': "2rem",
+    '7': "3rem",
+    '8': "4rem",
+  ),
+  'radius': (
+    'none': "0",
+    'sm': "4px",
+    'md': "8px",
+    'lg': "16px",
+    'xl': "24px",
+    'pill': "999px",
+    'round': "50%",
+  ),
+  'corner': (
+    'control': "var(--greese-radius-md)",
+    'field': "var(--greese-radius-md)",
+    'surface': "var(--greese-radius-lg)",
+    'panel': "var(--greese-radius-md)",
+    'inset': "var(--greese-radius-sm)",
+    'pill': "var(--greese-radius-pill)",
+    'round': "var(--greese-radius-round)",
+  ),
+  'font': (
+    'body': "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    'mono': "ui-monospace, SFMono-Regular, Menlo, monospace",
+  ),
+  'font-weight': (
+    'regular': "400",
+    'medium': "500",
+    'semibold': "600",
+    'bold': "700",
+  ),
+  'line-height': (
+    'tight': "1.25",
+    'snug': "1.375",
+    'normal': "1.5",
+  ),
+  'shadow': (
+    'sm': "0 1px 2px color-mix(in srgb, var(--greese-color-black) 8%, transparent)",
+    'md': "0 4px 12px color-mix(in srgb, var(--greese-color-black) 12%, transparent)",
+    'lg': "0 12px 32px color-mix(in srgb, var(--greese-color-black) 18%, transparent)",
+  ),
+  'z-index': (
+    'dropdown': "1000",
+    'sticky': "1100",
+    'overlay': "1300",
+    'modal': "1400",
+    'popover': "1500",
+    'toast': "1600",
+    'tooltip': "1700",
+  ),
+  'duration': (
+    'fast': "120ms",
+    'normal': "200ms",
+    'slow': "320ms",
+  ),
+  'easing': (
+    'standard': "cubic-bezier(0.2, 0, 0, 1)",
+    'enter': "cubic-bezier(0, 0, 0, 1)",
+    'exit': "cubic-bezier(0.3, 0, 1, 1)",
+  ),
+);
+
+// The palette: (lavender: (600: #805dd3, ...), ...), for the kit's palette().
+$palette: (
+  'steel': (50: #f5f7f9, 100: #e9edf2, 200: #d7dfe7, 300: #bfcbd8, 400: #a3b3c4, 500: #8597a9, 600: #687889, 700: #505e6d, 800: #3c4854, 900: #2a333c, 999: #11171c),
+  'gray': (50: #f7f7f7, 100: #ededed, 200: #dedede, 300: #cacaca, 400: #b1b1b1, 500: #949494, 600: #767676, 700: #5c5c5c, 800: #464646, 900: #323232, 999: #161616),
+  'silver': (50: #f6f7f7, 100: #ebedee, 200: #dadfe1, 300: #c5cbce, 400: #aab3b7, 500: #8d969b, 600: #6f777c, 700: #565e61, 800: #41474b, 900: #2e3335, 999: #141618),
+  'ash': (50: #f7f7f6, 100: #ededeb, 200: #dfdeda, 300: #cbcac4, 400: #b3b1aa, 500: #97958d, 600: #78766e, 700: #5e5c56, 800: #484641, 900: #33322e, 999: #171614),
+  'taupe': (50: #f8f6f5, 100: #f0ece9, 200: #e4dcd6, 300: #d3c7be, 400: #bdaea2, 500: #a29184, 600: #827366, 700: #67594f, 800: #4f443b, 900: #38302a, 999: #1a1511),
+  'red': (50: #fff4f2, 100: #ffe6e3, 200: #ffd2cc, 300: #ffb4ab, 400: #ff8b7f, 500: #fd4c45, 600: #d52727, 700: #ae0914, 800: #88030c, 900: #620407, 999: #330000),
+  'orange': (50: #fff4ee, 100: #ffe8da, 200: #ffd8c1, 300: #ffc19c, 400: #ff9d5e, 500: #ef7500, 600: #c05d00, 700: #964700, 800: #733400, 900: #522300, 999: #290d00),
+  'gold': (50: #fff5e7, 100: #ffeaca, 200: #ffe1b5, 300: #ffd593, 400: #feb93d, 500: #df9c00, 600: #b37d00, 700: #8a5f00, 800: #664500, 900: #472e00, 999: #211300),
+  'yellow': (50: #fcf8df, 100: #f8efb6, 200: #fce873, 300: #fbe136, 400: #f4d90b, 500: #d3bb00, 600: #ab9700, 700: #817100, 800: #5c5000, 900: #3d3500, 999: #1b1600),
+  'lime': (50: #f2fae9, 100: #e2f4ce, 200: #d2f4a9, 300: #c0ee82, 400: #a6dc51, 500: #87bf0e, 600: #6b9a00, 700: #517600, 800: #3a5600, 900: #263b00, 999: #0e1a00),
+  'green': (50: #effaf1, 100: #dcf5e0, 200: #bdeec6, 300: #95e2a5, 400: #61cf7e, 500: #25b459, 600: #009141, 700: #007231, 800: #005724, 900: #003e17, 999: #001d06),
+  'jade': (50: #eefaf4, 100: #daf4e8, 200: #baedd6, 300: #8ee1be, 400: #54cea1, 500: #00b283, 600: #008e68, 700: #006f51, 800: #00553d, 900: #003c2a, 999: #001c11),
+  'turquoise': (50: #eefaf8, 100: #daf3f0, 200: #bcece7, 300: #94e1da, 400: #5dcec5, 500: #13b3aa, 600: #009088, 700: #007069, 800: #00544f, 900: #003b38, 999: #001b19),
+  'aqua': (50: #eef9fb, 100: #daf2f5, 200: #beecf2, 300: #98e3ec, 400: #64d0de, 500: #23b5c4, 600: #00919f, 700: #00707b, 800: #00545c, 900: #003b41, 999: #001b1e),
+  'azure': (50: #eef9ff, 100: #daf1ff, 200: #bde6ff, 300: #91d6ff, 400: #5ac0f7, 500: #15a4e1, 600: #0082b6, 700: #00668f, 800: #004d6e, 900: #003750, 999: #001927),
+  'blue': (50: #f2f7ff, 100: #e2eeff, 200: #cbdfff, 300: #aaccff, 400: #81b2ff, 500: #4c92ff, 600: #2771e0, 700: #1356b8, 800: #0b4290, 900: #072e68, 999: #001337),
+  'royal': (50: #f4f6ff, 100: #e7ecff, 200: #d4dcff, 300: #bac6ff, 400: #9aaaff, 500: #7787ff, 600: #5963e5, 700: #444abc, 800: #333894, 900: #23276b, 999: #0d0f39),
+  'lavender': (50: #f7f5ff, 100: #edeaff, 200: #dfd8ff, 300: #cdbfff, 400: #b69fff, 500: #9d79f6, 600: #7e5bd0, 700: #6443ab, 800: #4c3285, 900: #362361, 999: #190c33),
+  'purple': (50: #fbf4ff, 100: #f6e6ff, 200: #eed1ff, 300: #e4b4ff, 400: #d78cff, 500: #be68ea, 600: #9d49c5, 700: #7e33a1, 800: #61257d, 900: #46195a, 999: #22062f),
+  'magenta': (50: #fff3fb, 100: #ffe3f7, 200: #ffccf1, 300: #ffa9ea, 400: #f97cde, 500: #e053c6, 600: #bb32a3, 700: #971c83, 800: #761266, 900: #550c49, 999: #2b0124),
+  'pink': (50: #fff3f7, 100: #ffe5ee, 200: #ffcfe0, 300: #ffaecd, 400: #ff81b6, 500: #e75a9a, 600: #c13b7b, 700: #9c2661, 800: #7a1a4a, 900: #581235, 999: #2d0318),
+  'ruby': (50: #fff4f4, 100: #ffe6e8, 200: #ffd0d5, 300: #ffb2ba, 400: #ff8798, 500: #f94b72, 600: #d12655, 700: #aa0b40, 800: #85042f, 900: #600421, 999: #32000b),
+);
+
+// The type system: variant -> (base | breakpoint key) -> (prop: value).
+$typography: (
+  'p1': (
+    'base': (
+    'font-size': "1.125rem",
+    'font-weight': "400",
+    'line-height': "1.6",
+    'letter-spacing': "0",
+  ),
+    'md': (
+    'font-size': "1.25rem",
+  ),
+  ),
+  'p2': (
+    'base': (
+    'font-size': "1rem",
+    'font-weight': "400",
+    'line-height': "1.55",
+    'letter-spacing': "0",
+  ),
+  ),
+  'p3': (
+    'base': (
+    'font-size': "0.875rem",
+    'font-weight': "400",
+    'line-height': "1.5",
+    'letter-spacing': "0",
+  ),
+  ),
+  'h1': (
+    'base': (
+    'font-size': "2.25rem",
+    'font-weight': "700",
+    'line-height': "1.15",
+    'letter-spacing': "-0.02em",
+    'text-wrap': "balance",
+  ),
+    'md': (
+    'font-size': "2.75rem",
+  ),
+    'lg': (
+    'font-size': "3.5rem",
+    'line-height': "1.1",
+  ),
+  ),
+  'h2': (
+    'base': (
+    'font-size': "1.875rem",
+    'font-weight': "700",
+    'line-height': "1.2",
+    'letter-spacing': "-0.015em",
+    'text-wrap': "balance",
+  ),
+    'md': (
+    'font-size': "2.25rem",
+  ),
+    'lg': (
+    'font-size': "2.75rem",
+  ),
+  ),
+  'h3': (
+    'base': (
+    'font-size': "1.5rem",
+    'font-weight': "600",
+    'line-height': "1.25",
+    'letter-spacing': "-0.01em",
+    'text-wrap': "balance",
+  ),
+    'md': (
+    'font-size': "1.75rem",
+  ),
+    'lg': (
+    'font-size': "2rem",
+  ),
+  ),
+  'h4': (
+    'base': (
+    'font-size': "1.25rem",
+    'font-weight': "600",
+    'line-height': "1.3",
+    'letter-spacing': "0",
+    'text-wrap': "balance",
+  ),
+    'md': (
+    'font-size': "1.375rem",
+  ),
+    'lg': (
+    'font-size': "1.5rem",
+  ),
+  ),
+  'h5': (
+    'base': (
+    'font-size': "1.125rem",
+    'font-weight': "600",
+    'line-height': "1.35",
+    'letter-spacing': "0",
+    'text-wrap': "balance",
+  ),
+    'md': (
+    'font-size': "1.25rem",
+  ),
+  ),
+  'h6': (
+    'base': (
+    'font-size': "1rem",
+    'font-weight': "600",
+    'line-height': "1.4",
+    'letter-spacing': "0",
+    'text-wrap': "balance",
+  ),
+    'md': (
+    'font-size': "1.0625rem",
+  ),
+  ),
+  's1': (
+    'base': (
+    'font-size': "1.25rem",
+    'font-weight': "500",
+    'line-height': "1.4",
+    'letter-spacing': "0",
+  ),
+    'md': (
+    'font-size': "1.375rem",
+  ),
+  ),
+  's2': (
+    'base': (
+    'font-size': "1.125rem",
+    'font-weight': "500",
+    'line-height': "1.45",
+    'letter-spacing': "0",
+  ),
+  ),
+  'caption': (
+    'base': (
+    'font-size': "0.75rem",
+    'font-weight': "400",
+    'line-height': "1.4",
+    'letter-spacing': "0.02em",
+  ),
+  ),
+  'button': (
+    'base': (
+    'font-size': "0.9375rem",
+    'font-weight': "600",
+    'line-height': "1.25",
+    'letter-spacing': "0",
+  ),
+  ),
+);
+
+// The type properties, named as the CSS properties they set.
+$type-props: (font-size, font-weight, letter-spacing, line-height, color, font-family, font-style, text-transform, font-feature-settings, font-variation-settings, font-stretch, text-wrap, word-spacing, font-variant-numeric);
+
+// The greese prop effects, from src/effects.ts: name -> (enter: step -> (property:
+// value)) for those that end at rest (Motion.scss writes their @keyframes), or
+// (exit: (property: value), leave: step -> (property: value)) for those that
+// end away from it (the custom properties an overlay's exit sets, and the
+// keyframes a page transition's old snapshot plays). The kit's motion() takes
+// these names.
+$effects: (
+  'fade-in': (enter: (
+    'from': (
+    'opacity': "0",
+  ),
+  )),
+  'fade-out': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "none",
+), leave: (
+    'from': (
+    'opacity': "1",
+  ),
+    'to': (
+    'opacity': "0",
+  ),
+  )),
+  'scale-in': (enter: (
+    'from': (
+    'scale': "0",
+  ),
+  )),
+  'scale-out': (exit: (
+  'translate': "0px 0px",
+  'scale': "0",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "none",
+), leave: (
+    'from': (
+    'scale': "1",
+  ),
+    'to': (
+    'scale': "0",
+  ),
+  )),
+  'blur-in': (enter: (
+    'from': (
+    'filter': "blur(8px)",
+  ),
+  )),
+  'blur-out': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "none",
+), leave: (
+    'from': (
+    'filter': "blur(0px)",
+  ),
+    'to': (
+    'filter': "blur(8px)",
+  ),
+  )),
+  'slide-up': (enter: (
+    'from': (
+    'translate': "0px 100%",
+  ),
+  )),
+  'slide-down': (enter: (
+    'from': (
+    'translate': "0px -100%",
+  ),
+  )),
+  'slide-right': (enter: (
+    'from': (
+    'translate': "-100% 0px",
+  ),
+  )),
+  'slide-left': (enter: (
+    'from': (
+    'translate': "100% 0px",
+  ),
+  )),
+  'pop': (enter: (
+    'from': (
+    'scale': "1",
+  ),
+    '60%': (
+    'scale': "1.075",
+  ),
+  )),
+  'squish': (exit: (
+  'translate': "0px 0px",
+  'scale': "0.96",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "none",
+), leave: (
+    'from': (
+    'scale': "1",
+  ),
+    'to': (
+    'scale': "0.96",
+  ),
+  )),
+  'tilt': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "none",
+), leave: (
+    'from': (
+    'rotate': "0deg",
+  ),
+    'to': (
+    'rotate': "-2deg",
+  ),
+  )),
+  'glow': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "none",
+), leave: (
+    'from': (
+    'filter': "brightness(1)",
+  ),
+    'to': (
+    'filter': "brightness(1.12)",
+  ),
+  )),
+  'wipe-right': (enter: (
+    'from': (
+    'mask-size': "0% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 50%",
+  ),
+    'to': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 50%",
+  ),
+  )),
+  'wipe-out-right': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "0% 100%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "100% 50%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 50%",
+  ),
+    'to': (
+    'mask-size': "0% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 50%",
+  ),
+  )),
+  'wipe-left': (enter: (
+    'from': (
+    'mask-size': "0% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 50%",
+  ),
+    'to': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 50%",
+  ),
+  )),
+  'wipe-out-left': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "0% 100%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "0% 50%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 50%",
+  ),
+    'to': (
+    'mask-size': "0% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 50%",
+  ),
+  )),
+  'wipe-up': (enter: (
+    'from': (
+    'mask-size': "100% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 100%",
+  ),
+    'to': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 100%",
+  ),
+  )),
+  'wipe-out-up': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "100% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "50% 0%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 0%",
+  ),
+    'to': (
+    'mask-size': "100% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 0%",
+  ),
+  )),
+  'wipe-down': (enter: (
+    'from': (
+    'mask-size': "100% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 0%",
+  ),
+    'to': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 0%",
+  ),
+  )),
+  'wipe-out-down': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "100% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "50% 100%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 100%",
+  ),
+    'to': (
+    'mask-size': "100% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 100%",
+  ),
+  )),
+  'wipe-down-right': (enter: (
+    'from': (
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 0%",
+  ),
+    'to': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 0%",
+  ),
+  )),
+  'wipe-out-down-right': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "100% 100%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 100%",
+  ),
+    'to': (
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 100%",
+  ),
+  )),
+  'wipe-down-left': (enter: (
+    'from': (
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 0%",
+  ),
+    'to': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 0%",
+  ),
+  )),
+  'wipe-out-down-left': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "0% 100%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 100%",
+  ),
+    'to': (
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 100%",
+  ),
+  )),
+  'wipe-up-right': (enter: (
+    'from': (
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 100%",
+  ),
+    'to': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 100%",
+  ),
+  )),
+  'wipe-out-up-right': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "100% 0%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 0%",
+  ),
+    'to': (
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 0%",
+  ),
+  )),
+  'wipe-up-left': (enter: (
+    'from': (
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 100%",
+  ),
+    'to': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 100%",
+  ),
+  )),
+  'wipe-out-up-left': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "0% 0%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 0%",
+  ),
+    'to': (
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 0%",
+  ),
+  )),
+  'wipe-open-x': (enter: (
+    'from': (
+    'mask-size': "0% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 50%",
+  ),
+    'to': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 50%",
+  ),
+  )),
+  'wipe-open-y': (enter: (
+    'from': (
+    'mask-size': "100% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 50%",
+  ),
+    'to': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 50%",
+  ),
+  )),
+  'wipe-close-x': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "0% 100%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "50% 50%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 50%",
+  ),
+    'to': (
+    'mask-size': "0% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 50%",
+  ),
+  )),
+  'wipe-close-y': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "100% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "50% 50%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 50%",
+  ),
+    'to': (
+    'mask-size': "100% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 50%",
+  ),
+  )),
+  'iris-in': (enter: (
+    'from': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(closest-side, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 50%",
+  ),
+    'to': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(closest-side, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 50%",
+  ),
+  )),
+  'iris-out': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "radial-gradient(closest-side, black 98%, transparent)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "50% 50%",
+  'transform': "none",
+  'mask-from': "142% 142%",
+), leave: (
+    'from': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(closest-side, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 50%",
+  ),
+    'to': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(closest-side, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 50%",
+  ),
+  )),
+  'iris-right': (enter: (
+    'from': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 100% 50%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 50%",
+  ),
+    'to': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 100% 50%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 50%",
+  ),
+  )),
+  'iris-out-right': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "radial-gradient(farthest-side at 100% 50%, black 98%, transparent)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "100% 50%",
+  'transform': "none",
+  'mask-from': "142% 142%",
+), leave: (
+    'from': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 100% 50%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 50%",
+  ),
+    'to': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 100% 50%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 50%",
+  ),
+  )),
+  'iris-left': (enter: (
+    'from': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 0% 50%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 50%",
+  ),
+    'to': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 0% 50%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 50%",
+  ),
+  )),
+  'iris-out-left': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "radial-gradient(farthest-side at 0% 50%, black 98%, transparent)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "0% 50%",
+  'transform': "none",
+  'mask-from': "142% 142%",
+), leave: (
+    'from': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 0% 50%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 50%",
+  ),
+    'to': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 0% 50%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 50%",
+  ),
+  )),
+  'iris-up': (enter: (
+    'from': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 50% 0%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 0%",
+  ),
+    'to': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 50% 0%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 0%",
+  ),
+  )),
+  'iris-out-up': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "radial-gradient(farthest-side at 50% 0%, black 98%, transparent)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "50% 0%",
+  'transform': "none",
+  'mask-from': "142% 142%",
+), leave: (
+    'from': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 50% 0%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 0%",
+  ),
+    'to': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 50% 0%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 0%",
+  ),
+  )),
+  'iris-down': (enter: (
+    'from': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 50% 100%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 100%",
+  ),
+    'to': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 50% 100%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 100%",
+  ),
+  )),
+  'iris-out-down': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "radial-gradient(farthest-side at 50% 100%, black 98%, transparent)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "50% 100%",
+  'transform': "none",
+  'mask-from': "142% 142%",
+), leave: (
+    'from': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 50% 100%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 100%",
+  ),
+    'to': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 50% 100%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 100%",
+  ),
+  )),
+  'iris-down-right': (enter: (
+    'from': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 100% 100%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 100%",
+  ),
+    'to': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 100% 100%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 100%",
+  ),
+  )),
+  'iris-out-down-right': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "radial-gradient(farthest-side at 100% 100%, black 98%, transparent)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "100% 100%",
+  'transform': "none",
+  'mask-from': "142% 142%",
+), leave: (
+    'from': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 100% 100%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 100%",
+  ),
+    'to': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 100% 100%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 100%",
+  ),
+  )),
+  'iris-down-left': (enter: (
+    'from': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 0% 100%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 100%",
+  ),
+    'to': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 0% 100%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 100%",
+  ),
+  )),
+  'iris-out-down-left': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "radial-gradient(farthest-side at 0% 100%, black 98%, transparent)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "0% 100%",
+  'transform': "none",
+  'mask-from': "142% 142%",
+), leave: (
+    'from': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 0% 100%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 100%",
+  ),
+    'to': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 0% 100%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 100%",
+  ),
+  )),
+  'iris-up-right': (enter: (
+    'from': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 100% 0%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 0%",
+  ),
+    'to': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 100% 0%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 0%",
+  ),
+  )),
+  'iris-out-up-right': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "radial-gradient(farthest-side at 100% 0%, black 98%, transparent)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "100% 0%",
+  'transform': "none",
+  'mask-from': "142% 142%",
+), leave: (
+    'from': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 100% 0%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 0%",
+  ),
+    'to': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 100% 0%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 0%",
+  ),
+  )),
+  'iris-up-left': (enter: (
+    'from': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 0% 0%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 0%",
+  ),
+    'to': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 0% 0%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 0%",
+  ),
+  )),
+  'iris-out-up-left': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "radial-gradient(farthest-side at 0% 0%, black 98%, transparent)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "0% 0%",
+  'transform': "none",
+  'mask-from': "142% 142%",
+), leave: (
+    'from': (
+    'mask-size': "142% 142%",
+    'mask-image': "radial-gradient(farthest-side at 0% 0%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 0%",
+  ),
+    'to': (
+    'mask-size': "0% 0%",
+    'mask-image': "radial-gradient(farthest-side at 0% 0%, black 98%, transparent)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 0%",
+  ),
+  )),
+  'turn-x': (enter: (
+    'from': (
+    'transform': "perspective(800px) rotateX(0deg)",
+  ),
+  )),
+  'turn-y': (enter: (
+    'from': (
+    'transform': "perspective(800px) rotateY(0deg)",
+  ),
+  )),
+  'depth': (enter: (
+    'from': (
+    'transform': "perspective(800px) translateZ(0px)",
+  ),
+  )),
+  'hinge': (enter: (
+    'from': (
+    'transform': "perspective(800px) rotateX(0deg)",
+    'transform-origin': "50% 0%",
+  ),
+  )),
+  'flip-over-up': (enter: (
+    'from': (
+    'transform': "perspective(2000px) rotateX(180deg)",
+    'backface-visibility': "hidden",
+  ),
+  )),
+  'flip-over-out-up': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "perspective(2000px) rotateX(180deg)",
+), leave: (
+    'from': (
+    'transform': "perspective(2000px) rotateX(0deg)",
+    'backface-visibility': "hidden",
+  ),
+    'to': (
+    'transform': "perspective(2000px) rotateX(180deg)",
+    'backface-visibility': "hidden",
+  ),
+  )),
+  'flip-over-down': (enter: (
+    'from': (
+    'transform': "perspective(2000px) rotateX(-180deg)",
+    'backface-visibility': "hidden",
+  ),
+  )),
+  'flip-over-out-down': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "perspective(2000px) rotateX(-180deg)",
+), leave: (
+    'from': (
+    'transform': "perspective(2000px) rotateX(0deg)",
+    'backface-visibility': "hidden",
+  ),
+    'to': (
+    'transform': "perspective(2000px) rotateX(-180deg)",
+    'backface-visibility': "hidden",
+  ),
+  )),
+  'flip-over-left': (enter: (
+    'from': (
+    'transform': "perspective(2000px) rotateY(180deg)",
+    'backface-visibility': "hidden",
+  ),
+  )),
+  'flip-over-out-left': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "perspective(2000px) rotateY(180deg)",
+), leave: (
+    'from': (
+    'transform': "perspective(2000px) rotateY(0deg)",
+    'backface-visibility': "hidden",
+  ),
+    'to': (
+    'transform': "perspective(2000px) rotateY(180deg)",
+    'backface-visibility': "hidden",
+  ),
+  )),
+  'flip-over-right': (enter: (
+    'from': (
+    'transform': "perspective(2000px) rotateY(-180deg)",
+    'backface-visibility': "hidden",
+  ),
+  )),
+  'flip-over-out-right': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "perspective(2000px) rotateY(-180deg)",
+), leave: (
+    'from': (
+    'transform': "perspective(2000px) rotateY(0deg)",
+    'backface-visibility': "hidden",
+  ),
+    'to': (
+    'transform': "perspective(2000px) rotateY(-180deg)",
+    'backface-visibility': "hidden",
+  ),
+  )),
+  'fade-up': (enter: (
+    'from': (
+    'translate': "0px var(--greese-motion-distance, 1rem)",
+    'opacity': "0",
+  ),
+  )),
+  'fade-down': (enter: (
+    'from': (
+    'translate': "0px calc(-1 * var(--greese-motion-distance, 1rem))",
+    'opacity': "0",
+  ),
+  )),
+  'fade-start': (enter: (
+    'from': (
+    'translate': "calc(-1 * var(--greese-motion-dir, 1) * var(--greese-motion-distance, 1rem)) 0px",
+    'opacity': "0",
+  ),
+  )),
+  'fade-end': (enter: (
+    'from': (
+    'translate': "calc(var(--greese-motion-dir, 1) * var(--greese-motion-distance, 1rem)) 0px",
+    'opacity': "0",
+  ),
+  )),
+  'fade-out-up': (exit: (
+  'translate': "0px calc(-1 * var(--greese-motion-distance, 1rem))",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "none",
+), leave: (
+    'from': (
+    'translate': "0px 0px",
+    'opacity': "1",
+  ),
+    'to': (
+    'translate': "0px calc(-1 * var(--greese-motion-distance, 1rem))",
+    'opacity': "0",
+  ),
+  )),
+  'fade-out-down': (exit: (
+  'translate': "0px var(--greese-motion-distance, 1rem)",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "none",
+), leave: (
+    'from': (
+    'translate': "0px 0px",
+    'opacity': "1",
+  ),
+    'to': (
+    'translate': "0px var(--greese-motion-distance, 1rem)",
+    'opacity': "0",
+  ),
+  )),
+  'pop-in': (enter: (
+    'from': (
+    'scale': "0.8",
+    'opacity': "0",
+  ),
+    '60%': (
+    'scale': "1.04",
+    'opacity': "1",
+  ),
+  )),
+  'pop-out': (exit: (
+  'translate': "0px 0px",
+  'scale': "0.8",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "none",
+), leave: (
+    'from': (
+    'scale': "1",
+  ),
+    '40%': (
+    'scale': "1.04",
+    'opacity': "1",
+  ),
+    'to': (
+    'scale': "0.8",
+    'opacity': "0",
+  ),
+  )),
+  'rise': (exit: (
+  'translate': "0px -4px",
+  'scale': "1.02",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "none",
+), leave: (
+    'from': (
+    'translate': "0px 0px",
+    'scale': "1",
+  ),
+    'to': (
+    'translate': "0px -4px",
+    'scale': "1.02",
+  ),
+  )),
+  'fall': (exit: (
+  'translate': "0px 4px",
+  'scale': "0.98",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "none",
+), leave: (
+    'from': (
+    'translate': "0px 0px",
+    'scale': "1",
+  ),
+    'to': (
+    'translate': "0px 4px",
+    'scale': "0.98",
+  ),
+  )),
+  'pocket-right': (enter: (
+    'from': (
+    'translate': "-100% 0px",
+    'mask-size': "0% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 50%",
+  ),
+    'to': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 50%",
+  ),
+  )),
+  'pocket-out-right': (exit: (
+  'translate': "100% 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "0% 100%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "0% 50%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 50%",
+  ),
+    'to': (
+    'translate': "100% 0px",
+    'mask-size': "0% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 50%",
+  ),
+  )),
+  'pocket-left': (enter: (
+    'from': (
+    'translate': "100% 0px",
+    'mask-size': "0% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 50%",
+  ),
+    'to': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 50%",
+  ),
+  )),
+  'pocket-out-left': (exit: (
+  'translate': "-100% 0px",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "0% 100%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "100% 50%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 50%",
+  ),
+    'to': (
+    'translate': "-100% 0px",
+    'mask-size': "0% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 50%",
+  ),
+  )),
+  'pocket-up': (enter: (
+    'from': (
+    'translate': "0px 100%",
+    'mask-size': "100% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 0%",
+  ),
+    'to': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 0%",
+  ),
+  )),
+  'pocket-out-up': (exit: (
+  'translate': "0px -100%",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "100% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "50% 100%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 100%",
+  ),
+    'to': (
+    'translate': "0px -100%",
+    'mask-size': "100% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 100%",
+  ),
+  )),
+  'pocket-down': (enter: (
+    'from': (
+    'translate': "0px -100%",
+    'mask-size': "100% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 100%",
+  ),
+    'to': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 100%",
+  ),
+  )),
+  'pocket-out-down': (exit: (
+  'translate': "0px 100%",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "100% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "50% 0%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 0%",
+  ),
+    'to': (
+    'translate': "0px 100%",
+    'mask-size': "100% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "50% 0%",
+  ),
+  )),
+  'pocket-down-right': (enter: (
+    'from': (
+    'translate': "-100% -100%",
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 100%",
+  ),
+    'to': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 100%",
+  ),
+  )),
+  'pocket-out-down-right': (exit: (
+  'translate': "100% 100%",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "0% 0%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 0%",
+  ),
+    'to': (
+    'translate': "100% 100%",
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 0%",
+  ),
+  )),
+  'pocket-down-left': (enter: (
+    'from': (
+    'translate': "100% -100%",
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 100%",
+  ),
+    'to': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 100%",
+  ),
+  )),
+  'pocket-out-down-left': (exit: (
+  'translate': "-100% 100%",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "100% 0%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 0%",
+  ),
+    'to': (
+    'translate': "-100% 100%",
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 0%",
+  ),
+  )),
+  'pocket-up-right': (enter: (
+    'from': (
+    'translate': "-100% 100%",
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 0%",
+  ),
+    'to': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 0%",
+  ),
+  )),
+  'pocket-out-up-right': (exit: (
+  'translate': "100% -100%",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "0% 100%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 100%",
+  ),
+    'to': (
+    'translate': "100% -100%",
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 100%",
+  ),
+  )),
+  'pocket-up-left': (enter: (
+    'from': (
+    'translate': "100% 100%",
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 0%",
+  ),
+    'to': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "0% 0%",
+  ),
+  )),
+  'pocket-out-up-left': (exit: (
+  'translate': "-100% -100%",
+  'scale': "1",
+  'opacity': "1",
+  'mask-image': "linear-gradient(black, black)",
+  'mask-size': "0% 0%",
+  'mask-repeat': "no-repeat",
+  'mask-position': "100% 100%",
+  'transform': "none",
+  'mask-from': "100% 100%",
+), leave: (
+    'from': (
+    'translate': "0px 0px",
+    'mask-size': "100% 100%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 100%",
+  ),
+    'to': (
+    'translate': "-100% -100%",
+    'mask-size': "0% 0%",
+    'mask-image': "linear-gradient(black, black)",
+    'mask-repeat': "no-repeat",
+    'mask-position': "100% 100%",
+  ),
+  )),
+  'flip-up': (enter: (
+    'from': (
+    'opacity': "0",
+    'transform': "perspective(800px) rotateX(75deg)",
+  ),
+    '50%': (
+    'opacity': "1",
+  ),
+  )),
+  'flip-out-up': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "perspective(800px) rotateX(75deg)",
+), leave: (
+    'from': (
+    'transform': "perspective(800px) rotateX(0deg)",
+  ),
+    '50%': (
+    'opacity': "1",
+  ),
+    'to': (
+    'opacity': "0",
+    'transform': "perspective(800px) rotateX(75deg)",
+  ),
+  )),
+  'flip-down': (enter: (
+    'from': (
+    'opacity': "0",
+    'transform': "perspective(800px) rotateX(-75deg)",
+  ),
+    '50%': (
+    'opacity': "1",
+  ),
+  )),
+  'flip-out-down': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "perspective(800px) rotateX(-75deg)",
+), leave: (
+    'from': (
+    'transform': "perspective(800px) rotateX(0deg)",
+  ),
+    '50%': (
+    'opacity': "1",
+  ),
+    'to': (
+    'opacity': "0",
+    'transform': "perspective(800px) rotateX(-75deg)",
+  ),
+  )),
+  'flip-left': (enter: (
+    'from': (
+    'opacity': "0",
+    'transform': "perspective(800px) rotateY(75deg)",
+  ),
+    '50%': (
+    'opacity': "1",
+  ),
+  )),
+  'flip-out-left': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "perspective(800px) rotateY(75deg)",
+), leave: (
+    'from': (
+    'transform': "perspective(800px) rotateY(0deg)",
+  ),
+    '50%': (
+    'opacity': "1",
+  ),
+    'to': (
+    'opacity': "0",
+    'transform': "perspective(800px) rotateY(75deg)",
+  ),
+  )),
+  'flip-right': (enter: (
+    'from': (
+    'opacity': "0",
+    'transform': "perspective(800px) rotateY(-75deg)",
+  ),
+    '50%': (
+    'opacity': "1",
+  ),
+  )),
+  'flip-out-right': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "perspective(800px) rotateY(-75deg)",
+), leave: (
+    'from': (
+    'transform': "perspective(800px) rotateY(0deg)",
+  ),
+    '50%': (
+    'opacity': "1",
+  ),
+    'to': (
+    'opacity': "0",
+    'transform': "perspective(800px) rotateY(-75deg)",
+  ),
+  )),
+  'depth-in': (enter: (
+    'from': (
+    'opacity': "0",
+    'transform': "perspective(800px) translateZ(-240px)",
+  ),
+    '60%': (
+    'opacity': "1",
+  ),
+  )),
+  'depth-out': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "perspective(800px) translateZ(-240px)",
+), leave: (
+    'from': (
+    'transform': "perspective(800px) translateZ(0px)",
+  ),
+    '40%': (
+    'opacity': "1",
+  ),
+    'to': (
+    'opacity': "0",
+    'transform': "perspective(800px) translateZ(-240px)",
+  ),
+  )),
+  'swing-in': (enter: (
+    'from': (
+    'opacity': "0",
+    'transform': "perspective(800px) rotateX(-80deg)",
+    'transform-origin': "50% 0%",
+  ),
+    '50%': (
+    'opacity': "1",
+  ),
+  )),
+  'swing-out': (exit: (
+  'translate': "0px 0px",
+  'scale': "1",
+  'opacity': "0",
+  'mask-image': "none",
+  'transform': "perspective(800px) rotateX(-80deg)",
+  'transform-origin': "50% 0%",
+), leave: (
+    'from': (
+    'transform': "perspective(800px) rotateX(0deg)",
+    'transform-origin': "50% 0%",
+  ),
+    '50%': (
+    'opacity': "1",
+  ),
+    'to': (
+    'opacity': "0",
+    'transform': "perspective(800px) rotateX(-80deg)",
+    'transform-origin': "50% 0%",
+  ),
+  )),
+);
+
+// The cascade layer order, for stylesheets that emit it themselves.
+$layer-order: 'greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities';