@seed-design/lynx-css 0.1.1-alpha.0 → 0.2.0-alpha.3

package/recipes/app-screen.css

@@ -1,314 +0,0 @@
-.seed-app-screen__root {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    right: 0;
-    overflow: hidden;
-    --app-bar-offset: calc(var(--app-bar-height) + env(safe-area-inset-top));
-}
-.seed-app-screen__dim {
-    z-index: var(--z-index-dim);
-    position: absolute;
-    width: 100%;
-    top: 0;
-    left: 0;
-    right: 0;
-}
-.seed-app-screen__layer {
-    z-index: var(--z-index-layer);
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    right: 0;
-    overflow-y: scroll;
-}
-.seed-app-screen__layer {
-    background-color: var(--seed-color-bg-layer-default);
-}
-.seed-app-screen__edge {
-    z-index: var(--z-index-edge);
-    position: absolute;
-    width: 20px;
-    height: 100%;
-    left: 0;
-    right: 0;
-}
-.seed-app-screen__root--theme_cupertino {
-    --app-bar-height: 44px;
-}
-.seed-app-screen__root--theme_android {
-    --app-bar-height: 56px;
-}
-.seed-app-screen__edge--theme_android {
-    display: none;
-}
-.seed-app-screen__root--transitionStyle_slideFromRightIOS {
-    --z-index-dim: calc(var(--z-index-base) + 0);
-    --z-index-layer: calc(var(--z-index-base) + 2);
-    --z-index-edge: calc(var(--z-index-base) + 4);
-    --z-index-app-bar: calc(var(--z-index-base) + 7);
-}
-.seed-app-screen__layer--transitionStyle_slideFromRightIOS {
-    transform: translate3d(0, 0, 0);
-}
-[data-global-transition-state=enter-active] .seed-app-screen__layer--transitionStyle_slideFromRightIOS.seed-app-screen__layer--activity-is-top_true {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: 100%;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
-}
-[data-global-transition-state=exit-active] .seed-app-screen__layer--transitionStyle_slideFromRightIOS.seed-app-screen__layer--activity-is-top_true {
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 100%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=enter-done] .seed-app-screen__layer--transitionStyle_slideFromRightIOS.seed-app-screen__layer--activity-is-top_true {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: var(--swipe-back-displacement, 0);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
-}
-[data-swipe-back-state=swiping] .seed-app-screen__layer--transitionStyle_slideFromRightIOS.seed-app-screen__layer--activity-is-top_true:not(#\#) {
-    animation: none;
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-}
-[data-swipe-back-state=canceling] .seed-app-screen__layer--transitionStyle_slideFromRightIOS.seed-app-screen__layer--activity-is-top_true:not(#\#) {
-    animation: none !important;
-    transform: translate3d(0, 0, 0);
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-swipe-back-state=completing] .seed-app-screen__layer--transitionStyle_slideFromRightIOS.seed-app-screen__layer--activity-is-top_true:not(#\#) {
-    animation: none !important;
-    transform: translate3d(100%, 0, 0);
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-global-transition-state=enter-active][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not(.seed-app-screen__layer--activity-is-top_true) {
-    transform: translate3d(0, 0, 0);
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: -30%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=exit-active][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not(.seed-app-screen__layer--activity-is-top_true) {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: calc(-30% + var(--swipe-back-displacement, 0) * 0.3);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(0, 0, 0);
-}
-[data-global-transition-state=enter-done][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not(.seed-app-screen__layer--activity-is-top_true) {
-    transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * 0.3), 0, 0);
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: -30%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-}
-[data-swipe-back-state=swiping] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not(.seed-app-screen__layer--activity-is-top_true):not(#\#) {
-    animation: none;
-    transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * 0.3), 0, 0);
-}
-[data-swipe-back-state=canceling] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not(.seed-app-screen__layer--activity-is-top_true):not(#\#) {
-    animation: none !important;
-    transform: translate3d(-30%, 0, 0);
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-swipe-back-state=completing] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not(.seed-app-screen__layer--activity-is-top_true):not(#\#) {
-    animation: none !important;
-    transform: translate3d(0, 0, 0);
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-.seed-app-screen__dim--transitionStyle_slideFromRightIOS {
-    height: 100%;
-    background: var(--seed-color-bg-overlay);
-}
-[data-global-transition-state=enter-active] .seed-app-screen__dim--transitionStyle_slideFromRightIOS.seed-app-screen__dim--activity-is-top_true {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-}
-[data-global-transition-state=exit-active] .seed-app-screen__dim--transitionStyle_slideFromRightIOS.seed-app-screen__dim--activity-is-top_true {
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    animation: seed-exit;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-[data-global-transition-state=enter-done] .seed-app-screen__dim--transitionStyle_slideFromRightIOS.seed-app-screen__dim--activity-is-top_true {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
-    animation-duration: 350ms;
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    --seed-enter-scale: 1;
-    opacity: 1;
-}
-[data-swipe-back-state=swiping] .seed-app-screen__dim--transitionStyle_slideFromRightIOS.seed-app-screen__dim--activity-is-top_true:not(#\#) {
-    animation: none;
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-}
-[data-swipe-back-state=canceling] .seed-app-screen__dim--transitionStyle_slideFromRightIOS.seed-app-screen__dim--activity-is-top_true:not(#\#) {
-    animation: none !important;
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-[data-swipe-back-state=completing] .seed-app-screen__dim--transitionStyle_slideFromRightIOS.seed-app-screen__dim--activity-is-top_true:not(#\#) {
-    animation: none !important;
-    opacity: 0;
-    transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99);
-}
-.seed-app-screen__root--transitionStyle_fadeFromBottomAndroid {
-    --z-index-dim: calc(var(--z-index-base) + 0);
-    --z-index-layer: calc(var(--z-index-base) + 3);
-    --z-index-edge: calc(var(--z-index-base) + 4);
-    --z-index-app-bar: calc(var(--z-index-base) + 4);
-}
-.seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid {
-    height: 160px;
-    background: linear-gradient(var(--seed-color-bg-overlay), rgba(0, 0, 0, 0));
-}
-[data-global-transition-state=enter-active] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid.seed-app-screen__dim--activity-is-top_true {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.23, 0.1, 0.32, 1);
-    animation-duration: 300ms;
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    transform: translate3d(0, -8vh, 0);
-    opacity: 1;
-}
-[data-global-transition-state=exit-active] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid.seed-app-screen__dim--activity-is-top_true {
-    transform: translate3d(0, -8vh, 0);
-    opacity: 1;
-    animation: seed-exit;
-    animation-timing-function: linear;
-    animation-duration: 150ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-.seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid {
-    transform: translate3d(0, 0, 0);
-}
-[data-global-transition-state=enter-active] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid.seed-app-screen__layer--activity-is-top_true {
-    animation: seed-enter;
-    animation-timing-function: cubic-bezier(0.23, 0.1, 0.32, 1);
-    animation-duration: 300ms;
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 8vh;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-}
-[data-global-transition-state=exit-active] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid.seed-app-screen__layer--activity-is-top_true {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-    animation: seed-exit;
-    animation-timing-function: linear;
-    animation-duration: 150ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 8vh;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-.seed-app-screen__root--transitionStyle_fadeIn {
-    --z-index-dim: calc(var(--z-index-base) + 0);
-    --z-index-layer: calc(var(--z-index-base) + 3);
-    --z-index-edge: calc(var(--z-index-base) + 4);
-    --z-index-app-bar: calc(var(--z-index-base) + 4);
-}
-.seed-app-screen__dim--transitionStyle_fadeIn {
-    display: none;
-}
-[data-global-transition-state=enter-active] .seed-app-screen__layer--transitionStyle_fadeIn.seed-app-screen__layer--activity-is-top_true {
-    animation: seed-enter;
-    animation-timing-function: ease-out;
-    animation-duration: 300ms;
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-}
-[data-global-transition-state=exit-active] .seed-app-screen__layer--transitionStyle_fadeIn.seed-app-screen__layer--activity-is-top_true {
-    opacity: 1;
-    animation: seed-exit;
-    animation-timing-function: ease-in;
-    animation-duration: 150ms;
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-.seed-app-screen__layer--layerOffsetTop_safeArea {
-    padding-top: env(safe-area-inset-top);
-}
-.seed-app-screen__layer--layerOffsetTop_appBar {
-    padding-top: var(--app-bar-offset);
-}
-.seed-app-screen__layer--layerOffsetBottom_safeArea {
-    padding-bottom: env(safe-area-inset-bottom);
-}
-.seed-app-screen__layer--tone_transparent-gradient_true::before {
-    display: block;
-    position: sticky;
-    left: 0;
-    right: 0;
-    top: 0;
-    margin-bottom: calc(-1 * (66px + 400px + env(safe-area-inset-top)));
-    height: calc(66px + 400px + env(safe-area-inset-top));
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.35) 400px, rgba(0, 0, 0, 0.00) 100%);
-    pointer-events: none;
-    z-index: 1;
-}
-.seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetBottom_none::before {
-    transform: translateY(-400px);
-}
-.seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetTop_safeArea::before {
-    transform: translateY(calc(-400px - env(safe-area-inset-top)));
-}
-.seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetTop_appBar::before {
-    transform: translateY(calc(-400px - var(--app-bar-offset)));
-}

package/recipes/app-screen.d.ts

@@ -1,44 +0,0 @@
-declare interface AppScreenVariant {
-  /**
-  * @default "cupertino"
-  */
-  theme: "cupertino" | "android";
-/**
-  * @default "slideFromRightIOS"
-  */
-  transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid" | "fadeIn";
-/**
-  * @default "appBar"
-  */
-  layerOffsetTop: "none" | "safeArea" | "appBar";
-/**
-  * @default "none"
-  */
-  layerOffsetBottom: "none" | "safeArea";
-/**
-  * @default "layer"
-  */
-  tone: "layer" | "transparent";
-/**
-  * @default true
-  */
-  gradient: boolean;
-}
-
-declare type AppScreenVariantMap = {
-  [key in keyof AppScreenVariant]: Array<AppScreenVariant[key]>;
-};
-
-export declare type AppScreenVariantProps = Partial<AppScreenVariant>;
-
-export declare type AppScreenSlotName = "root" | "layer" | "dim" | "edge";
-
-export declare const appScreenVariantMap: AppScreenVariantMap;
-
-export declare const appScreen: ((
-  props?: AppScreenVariantProps,
-) => Record<AppScreenSlotName, string>) & {
-  splitVariantProps: <T extends AppScreenVariantProps>(
-    props: T,
-  ) => [AppScreenVariantProps, Omit<T, keyof AppScreenVariantProps>];
-}

package/recipes/app-screen.layered.css

@@ -1,322 +0,0 @@
-@layer seed-components {
-  .seed-app-screen__root {
-    --app-bar-offset: calc(var(--app-bar-height)  + env(safe-area-inset-top));
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    right: 0;
-    overflow: hidden;
-  }
-
-  .seed-app-screen__dim {
-    z-index: var(--z-index-dim);
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-
-  .seed-app-screen__layer {
-    z-index: var(--z-index-layer);
-    background-color: var(--seed-color-bg-layer-default);
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    right: 0;
-    overflow-y: scroll;
-  }
-
-  .seed-app-screen__edge {
-    z-index: var(--z-index-edge);
-    width: 20px;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    right: 0;
-  }
-
-  .seed-app-screen__root--theme_cupertino {
-    --app-bar-height: 44px;
-  }
-
-  .seed-app-screen__root--theme_android {
-    --app-bar-height: 56px;
-  }
-
-  .seed-app-screen__edge--theme_android {
-    display: none;
-  }
-
-  .seed-app-screen__root--transitionStyle_slideFromRightIOS {
-    --z-index-dim: calc(var(--z-index-base)  + 0);
-    --z-index-layer: calc(var(--z-index-base)  + 2);
-    --z-index-edge: calc(var(--z-index-base)  + 4);
-    --z-index-app-bar: calc(var(--z-index-base)  + 7);
-  }
-
-  .seed-app-screen__layer--transitionStyle_slideFromRightIOS {
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS.seed-app-screen__layer--activity-is-top_true {
-    --seed-enter-translate-x: 100%;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS.seed-app-screen__layer--activity-is-top_true {
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-    --seed-exit-translate-x: 100%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [data-global-transition-state="enter-done"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS.seed-app-screen__layer--activity-is-top_true {
-    --seed-enter-translate-x: var(--swipe-back-displacement, 0);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS.seed-app-screen__layer--activity-is-top_true:not(#\#) {
-    transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS.seed-app-screen__layer--activity-is-top_true:not(#\#) {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(0, 0, 0);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS.seed-app-screen__layer--activity-is-top_true:not(#\#) {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(100%, 0, 0);
-    animation: none !important;
-  }
-
-  [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not(.seed-app-screen__layer--activity-is-top_true) {
-    --seed-exit-translate-x: -30%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not(.seed-app-screen__layer--activity-is-top_true) {
-    --seed-enter-translate-x: calc(-30% + var(--swipe-back-displacement, 0) * .3);
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 1;
-    --seed-enter-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not(.seed-app-screen__layer--activity-is-top_true) {
-    transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * .3), 0, 0);
-    --seed-exit-translate-x: -30%;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 1;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not(.seed-app-screen__layer--activity-is-top_true):not(#\#) {
-    transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * .3), 0, 0);
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not(.seed-app-screen__layer--activity-is-top_true):not(#\#) {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(-30%, 0, 0);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not(.seed-app-screen__layer--activity-is-top_true):not(#\#) {
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    transform: translate3d(0, 0, 0);
-    animation: none !important;
-  }
-
-  .seed-app-screen__dim--transitionStyle_slideFromRightIOS {
-    background: var(--seed-color-bg-overlay);
-    height: 100%;
-  }
-
-  [data-global-transition-state="enter-active"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS.seed-app-screen__dim--activity-is-top_true {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS.seed-app-screen__dim--activity-is-top_true {
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
-  }
-
-  [data-global-transition-state="enter-done"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS.seed-app-screen__dim--activity-is-top_true {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
-  }
-
-  [data-swipe-back-state="swiping"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS.seed-app-screen__dim--activity-is-top_true:not(#\#) {
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    animation: none;
-  }
-
-  [data-swipe-back-state="canceling"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS.seed-app-screen__dim--activity-is-top_true:not(#\#) {
-    opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    animation: none !important;
-  }
-
-  [data-swipe-back-state="completing"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS.seed-app-screen__dim--activity-is-top_true:not(#\#) {
-    opacity: 0;
-    transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
-    animation: none !important;
-  }
-
-  .seed-app-screen__root--transitionStyle_fadeFromBottomAndroid {
-    --z-index-dim: calc(var(--z-index-base)  + 0);
-    --z-index-layer: calc(var(--z-index-base)  + 3);
-    --z-index-edge: calc(var(--z-index-base)  + 4);
-    --z-index-app-bar: calc(var(--z-index-base)  + 4);
-  }
-
-  .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid {
-    background: linear-gradient(var(--seed-color-bg-overlay), #0000);
-    height: 160px;
-  }
-
-  [data-global-transition-state="enter-active"] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid.seed-app-screen__dim--activity-is-top_true {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
-    transform: translate3d(0, -8vh, 0);
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid.seed-app-screen__dim--activity-is-top_true {
-    opacity: 1;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .15s linear forwards seed-exit;
-    transform: translate3d(0, -8vh, 0);
-  }
-
-  .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid {
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid.seed-app-screen__layer--activity-is-top_true {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 8vh;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
-    transform: translate3d(0, 0, 0);
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid.seed-app-screen__layer--activity-is-top_true {
-    opacity: 1;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 8vh;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .15s linear forwards seed-exit;
-    transform: translate3d(0, 0, 0);
-  }
-
-  .seed-app-screen__root--transitionStyle_fadeIn {
-    --z-index-dim: calc(var(--z-index-base)  + 0);
-    --z-index-layer: calc(var(--z-index-base)  + 3);
-    --z-index-edge: calc(var(--z-index-base)  + 4);
-    --z-index-app-bar: calc(var(--z-index-base)  + 4);
-  }
-
-  .seed-app-screen__dim--transitionStyle_fadeIn {
-    display: none;
-  }
-
-  [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_fadeIn.seed-app-screen__layer--activity-is-top_true {
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 1;
-    opacity: 1;
-    animation: .3s ease-out seed-enter;
-  }
-
-  [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_fadeIn.seed-app-screen__layer--activity-is-top_true {
-    opacity: 1;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation: .15s ease-in forwards seed-exit;
-  }
-
-  .seed-app-screen__layer--layerOffsetTop_safeArea {
-    padding-top: env(safe-area-inset-top);
-  }
-
-  .seed-app-screen__layer--layerOffsetTop_appBar {
-    padding-top: var(--app-bar-offset);
-  }
-
-  .seed-app-screen__layer--layerOffsetBottom_safeArea {
-    padding-bottom: env(safe-area-inset-bottom);
-  }
-
-  .seed-app-screen__layer--tone_transparent-gradient_true:before {
-    margin-bottom: calc(-1 * (66px + 400px + env(safe-area-inset-top)));
-    height: calc(66px + 400px + env(safe-area-inset-top));
-    pointer-events: none;
-    z-index: 1;
-    background: linear-gradient(#0003 0%, #00000059 400px, #0000 100%);
-    display: block;
-    position: sticky;
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-
-  .seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetBottom_none:before {
-    transform: translateY(-400px);
-  }
-
-  .seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetTop_safeArea:before {
-    transform: translateY(calc(-400px - env(safe-area-inset-top)));
-  }
-
-  .seed-app-screen__layer--tone_transparent-gradient_true-layerOffsetTop_appBar:before {
-    transform: translateY(calc(-400px - var(--app-bar-offset)));
-  }
-}