From a57795d72d519406631ef4ea42d0c48733241148 Mon Sep 17 00:00:00 2001 From: Asher <102206520+malangcat@users.noreply.github.com> Date: Sun, 2 Feb 2025 09:37:05 +0900 Subject: [PATCH] feat: Stackflow cleanup (#502) --- ...-react-npm-1.4.0-b4e46e6d80-a5d01eaa61.zip | Bin 150861 -> 0 bytes biome.json | 3 +- .../components/example/app-screen-preview.tsx | 52 +- .../example/app-screen-transparent-bar.tsx | 52 +- docs/components/stackflow/Stack.ts | 8 +- .../react/components/stackflow/app-screen.mdx | 6 +- docs/package.json | 2 +- .../components/top-navigation.json | 90 ++- docs/public/rootage-next/font-size.json | 22 + docs/public/rootage-next/parsed.json | 264 +++++-- .../rootage/components/top-navigation.json | 34 +- docs/public/rootage/font-size.json | 10 + docs/public/rootage/parsed.json | 225 ++++-- docs/registry/registry-ui.ts | 4 +- docs/registry/ui/app-bar.tsx | 140 ++++ docs/registry/ui/app-screen.tsx | 154 ++-- .../src/activities/ActivityActionButton.tsx | 38 +- .../src/activities/ActivityActionChip.tsx | 38 +- .../src/activities/ActivityControlChip.tsx | 38 +- .../src/activities/ActivityErrorState.tsx | 49 +- .../src/activities/ActivityHelpBubble.tsx | 22 +- .../src/activities/ActivityHome.tsx | 40 +- .../src/activities/ActivityLayerBar.tsx | 62 +- .../src/activities/ActivityNotFound.tsx | 22 +- .../src/activities/ActivityTransparentBar.tsx | 65 +- .../stackflow-spa/src/components/List.tsx | 8 +- .../src/design-system/stackflow/AppBar.tsx | 81 +- .../src/design-system/stackflow/AppScreen.tsx | 64 +- examples/stackflow-spa/src/global.css | 4 + .../stackflow-spa/src/stackflow/Stack.tsx | 4 + packages/qvism-preset/src/index.ts | 17 +- packages/qvism-preset/src/recipes/screen.ts | 133 ---- .../src/recipes/top-navigation.ts | 231 ------ .../qvism-preset/src/stackflow/animation.ts | 165 ++++ .../qvism-preset/src/stackflow/app-bar.ts | 282 +++++++ .../qvism-preset/src/stackflow/app-screen.ts | 162 ++++ packages/qvism-preset/src/stackflow/pseudo.ts | 14 + packages/qvism-preset/src/utils/animation.ts | 71 ++ .../pull-to-refresh/package.json | 49 ++ .../src/PullToRefresh.namespace.ts | 8 + .../pull-to-refresh/src/PullToRefresh.tsx | 70 ++ .../pull-to-refresh/src/index.ts | 15 + .../pull-to-refresh/src/store.ts | 26 + .../pull-to-refresh/src/usePullToRefresh.ts | 206 +++++ .../src/usePullToRefreshContext.tsx | 21 + .../pull-to-refresh/tsconfig.json | 20 + packages/react/package.json | 1 + packages/react/src/primitive.ts | 1 + packages/recipe/lib/appBar.d.ts | 36 + packages/recipe/lib/appBar.mjs | 68 ++ packages/recipe/lib/appBarMain.d.ts | 36 + packages/recipe/lib/appBarMain.mjs | 61 ++ packages/recipe/lib/appScreen.d.ts | 36 + packages/recipe/lib/appScreen.mjs | 66 ++ packages/recipe/lib/screen.d.ts | 28 - packages/recipe/lib/screen.mjs | 54 -- packages/recipe/lib/topNavigation.d.ts | 32 - packages/recipe/lib/topNavigation.mjs | 87 --- packages/rootage/components/schema.json | 2 + .../rootage/components/top-navigation.yaml | 23 +- packages/rootage/font-size.yaml | 6 + packages/stackflow/package.json | 2 + packages/stackflow/src/AppBar.tsx | 148 ---- packages/stackflow/src/AppScreen.tsx | 111 --- .../AppBar}/AppBar.namespace.ts | 4 + .../src/components/AppBar/AppBar.tsx | 109 +++ .../stackflow/src/components/AppBar/index.tsx | 21 + .../AppScreen}/AppScreen.namespace.ts | 2 +- .../src/components/AppScreen/AppScreen.tsx | 65 ++ .../src/components/AppScreen/index.tsx | 15 + packages/stackflow/src/components/index.tsx | 2 + packages/stackflow/src/index.ts | 34 +- packages/stackflow/src/plugin.tsx | 20 + .../src/primitive/AppBar/AppBar.namespace.ts | 10 + .../stackflow/src/primitive/AppBar/AppBar.tsx | 52 ++ .../stackflow/src/primitive/AppBar/index.ts | 12 + .../src/primitive/AppBar/useAppBar.tsx | 42 + .../src/primitive/AppBar/useAppBarContext.ts | 19 + .../AppScreen/AppScreen.namespace.ts | 10 + .../src/primitive/AppScreen/AppScreen.tsx | 66 ++ .../src/primitive/AppScreen/index.ts | 13 + .../src/primitive/AppScreen/useAppScreen.tsx | 68 ++ .../AppScreen/useAppScreenContext.ts | 19 + .../GlobalInteraction/GlobalInteraction.tsx | 25 + .../src/primitive/GlobalInteraction/index.ts | 6 + .../GlobalInteraction/useGlobalInteraction.ts | 178 +++++ .../useGlobalInteractionContext.tsx | 21 + .../GlobalInteraction/useSwipeBack.ts | 56 ++ packages/stackflow/src/primitive/index.tsx | 3 + .../src/primitive/private/useElementOffset.ts | 37 + .../src/primitive/private/useTopActivity.ts | 31 + .../stackflow/src/primitive/useAppScreen.tsx | 224 ------ .../src/utils/createStyleContext.tsx | 125 +++ .../src/utils/createWithStateProps.tsx | 28 + packages/stackflow/tsconfig.json | 13 +- packages/stylesheet/appBar.css | 214 +++++ packages/stylesheet/appBarMain.css | 141 ++++ packages/stylesheet/appScreen.css | 238 ++++++ packages/stylesheet/base.css | 37 +- packages/stylesheet/component.css | 731 ++++++++++++------ packages/stylesheet/component.min.css | 2 +- packages/stylesheet/screen.css | 101 --- packages/stylesheet/token.css | 4 +- packages/stylesheet/topNavigation.css | 172 ----- .../vars/lib/component/top-navigation.d.ts | 34 +- .../vars/lib/component/top-navigation.mjs | 34 +- packages/vars/lib/font-size.d.ts | 2 + packages/vars/lib/font-size.mjs | 2 + yarn.lock | 35 +- 109 files changed, 4846 insertions(+), 2120 deletions(-) delete mode 100644 .yarn/cache/@stackflow-react-npm-1.4.0-b4e46e6d80-a5d01eaa61.zip create mode 100644 docs/registry/ui/app-bar.tsx delete mode 100644 packages/qvism-preset/src/recipes/screen.ts delete mode 100644 packages/qvism-preset/src/recipes/top-navigation.ts create mode 100644 packages/qvism-preset/src/stackflow/animation.ts create mode 100644 packages/qvism-preset/src/stackflow/app-bar.ts create mode 100644 packages/qvism-preset/src/stackflow/app-screen.ts create mode 100644 packages/qvism-preset/src/stackflow/pseudo.ts create mode 100644 packages/react-headless/pull-to-refresh/package.json create mode 100644 packages/react-headless/pull-to-refresh/src/PullToRefresh.namespace.ts create mode 100644 packages/react-headless/pull-to-refresh/src/PullToRefresh.tsx create mode 100644 packages/react-headless/pull-to-refresh/src/index.ts create mode 100644 packages/react-headless/pull-to-refresh/src/store.ts create mode 100644 packages/react-headless/pull-to-refresh/src/usePullToRefresh.ts create mode 100644 packages/react-headless/pull-to-refresh/src/usePullToRefreshContext.tsx create mode 100644 packages/react-headless/pull-to-refresh/tsconfig.json create mode 100644 packages/recipe/lib/appBar.d.ts create mode 100644 packages/recipe/lib/appBar.mjs create mode 100644 packages/recipe/lib/appBarMain.d.ts create mode 100644 packages/recipe/lib/appBarMain.mjs create mode 100644 packages/recipe/lib/appScreen.d.ts create mode 100644 packages/recipe/lib/appScreen.mjs delete mode 100644 packages/recipe/lib/screen.d.ts delete mode 100644 packages/recipe/lib/screen.mjs delete mode 100644 packages/recipe/lib/topNavigation.d.ts delete mode 100644 packages/recipe/lib/topNavigation.mjs delete mode 100644 packages/stackflow/src/AppBar.tsx delete mode 100644 packages/stackflow/src/AppScreen.tsx rename packages/stackflow/src/{ => components/AppBar}/AppBar.namespace.ts (74%) create mode 100644 packages/stackflow/src/components/AppBar/AppBar.tsx create mode 100644 packages/stackflow/src/components/AppBar/index.tsx rename packages/stackflow/src/{ => components/AppScreen}/AppScreen.namespace.ts (88%) create mode 100644 packages/stackflow/src/components/AppScreen/AppScreen.tsx create mode 100644 packages/stackflow/src/components/AppScreen/index.tsx create mode 100644 packages/stackflow/src/components/index.tsx create mode 100644 packages/stackflow/src/plugin.tsx create mode 100644 packages/stackflow/src/primitive/AppBar/AppBar.namespace.ts create mode 100644 packages/stackflow/src/primitive/AppBar/AppBar.tsx create mode 100644 packages/stackflow/src/primitive/AppBar/index.ts create mode 100644 packages/stackflow/src/primitive/AppBar/useAppBar.tsx create mode 100644 packages/stackflow/src/primitive/AppBar/useAppBarContext.ts create mode 100644 packages/stackflow/src/primitive/AppScreen/AppScreen.namespace.ts create mode 100644 packages/stackflow/src/primitive/AppScreen/AppScreen.tsx create mode 100644 packages/stackflow/src/primitive/AppScreen/index.ts create mode 100644 packages/stackflow/src/primitive/AppScreen/useAppScreen.tsx create mode 100644 packages/stackflow/src/primitive/AppScreen/useAppScreenContext.ts create mode 100644 packages/stackflow/src/primitive/GlobalInteraction/GlobalInteraction.tsx create mode 100644 packages/stackflow/src/primitive/GlobalInteraction/index.ts create mode 100644 packages/stackflow/src/primitive/GlobalInteraction/useGlobalInteraction.ts create mode 100644 packages/stackflow/src/primitive/GlobalInteraction/useGlobalInteractionContext.tsx create mode 100644 packages/stackflow/src/primitive/GlobalInteraction/useSwipeBack.ts create mode 100644 packages/stackflow/src/primitive/index.tsx create mode 100644 packages/stackflow/src/primitive/private/useElementOffset.ts create mode 100644 packages/stackflow/src/primitive/private/useTopActivity.ts delete mode 100644 packages/stackflow/src/primitive/useAppScreen.tsx create mode 100644 packages/stackflow/src/utils/createStyleContext.tsx create mode 100644 packages/stackflow/src/utils/createWithStateProps.tsx create mode 100644 packages/stylesheet/appBar.css create mode 100644 packages/stylesheet/appBarMain.css create mode 100644 packages/stylesheet/appScreen.css delete mode 100644 packages/stylesheet/screen.css delete mode 100644 packages/stylesheet/topNavigation.css diff --git a/.yarn/cache/@stackflow-react-npm-1.4.0-b4e46e6d80-a5d01eaa61.zip b/.yarn/cache/@stackflow-react-npm-1.4.0-b4e46e6d80-a5d01eaa61.zip deleted file mode 100644 index 9154f65a68e58b32ded6bf2abc9e87d8c300da60..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 150861 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%0A^Je5wfU?ICMXrUeVu4On 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
aA`eA3CNHv39EjS73lBQhZ!zW9?u9aCc>Zv z7eg{$iY~v@2X^ZP8yaKmH@=Dp1LGSM5-t%!v7I1T3J$<{=kt~wfcFmE0T|E!0YkXv AhyVZp diff --git a/biome.json b/biome.json index 9347c831c..a2cfc7ef4 100644 --- a/biome.json +++ b/biome.json @@ -41,7 +41,8 @@ }, "complexity": { "useLiteralKeys": "warn", - "noBannedTypes": "off" + "noBannedTypes": "off", + "noForEach": "off" }, "correctness": { "useExhaustiveDependencies": "warn", diff --git a/docs/components/example/app-screen-preview.tsx b/docs/components/example/app-screen-preview.tsx index 0b08b1d43..eb51a3473 100644 --- a/docs/components/example/app-screen-preview.tsx +++ b/docs/components/example/app-screen-preview.tsx @@ -1,17 +1,17 @@ "use client"; -import { Flex } from "seed-design/ui/layout"; import { IconBellFill } from "@daangn/react-monochrome-icon"; import type { ActivityComponentType } from "@stackflow/react/future"; import { AppBar, - AppScreen, - CloseButton, - IconButton, - Left, - Right, - Title, -} from "seed-design/ui/app-screen"; + AppBarCloseButton, + AppBarIconButton, + AppBarLeft, + AppBarMain, + AppBarRight, +} from "seed-design/ui/app-bar"; +import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen"; +import { Flex } from "seed-design/ui/layout"; declare module "@stackflow/config" { interface Register { @@ -21,25 +21,23 @@ declare module "@stackflow/config" { const AppScreenPreviewActivity: ActivityComponentType<"AppScreenPreview"> = () => { return ( - - - - - Preview - - - - - - - } - > - - Preview - + + + + + + Preview + + + + + + + + + Preview + + ); }; diff --git a/docs/components/example/app-screen-transparent-bar.tsx b/docs/components/example/app-screen-transparent-bar.tsx index 65a7c6804..725c50790 100644 --- a/docs/components/example/app-screen-transparent-bar.tsx +++ b/docs/components/example/app-screen-transparent-bar.tsx @@ -1,17 +1,17 @@ "use client"; -import { Flex } from "seed-design/ui/layout"; import { IconBellFill } from "@daangn/react-monochrome-icon"; import type { ActivityComponentType } from "@stackflow/react/future"; import { AppBar, - AppScreen, - CloseButton, - IconButton, - Left, - Right, - Title, -} from "seed-design/ui/app-screen"; + AppBarCloseButton, + AppBarIconButton, + AppBarLeft, + AppBarMain, + AppBarRight, +} from "seed-design/ui/app-bar"; +import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen"; +import { Flex } from "seed-design/ui/layout"; declare module "@stackflow/config" { interface Register { @@ -21,25 +21,23 @@ declare module "@stackflow/config" { const AppScreenTransparentBarActivity: ActivityComponentType<"AppScreenTransparentBar"> = () => { return ( - - - - - Transparent Bar - - - - - - - } - > - - Penguin - + + + + + + Preview + + + + + + + + + Preview + + ); }; diff --git a/docs/components/stackflow/Stack.ts b/docs/components/stackflow/Stack.ts index 938c25cb9..8748fd15f 100644 --- a/docs/components/stackflow/Stack.ts +++ b/docs/components/stackflow/Stack.ts @@ -3,14 +3,13 @@ import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic"; import { type ActivityComponentType, stackflow } from "@stackflow/react/future"; import { getConfig } from "./stackflow.config"; import type { Register } from "@stackflow/config"; +import { seedPlugin } from "@seed-design/stackflow"; interface MakeStackProps { Activity: ActivityComponentType; } -export const makeStack = ( - props: MakeStackProps, -) => { +export const makeStack = (props: MakeStackProps) => { const { Activity } = props; const { Stack, actions, stepActions } = stackflow({ @@ -31,6 +30,9 @@ export const makeStack = ( }, }, }), + seedPlugin({ + theme: "cupertino", + }), ], }); diff --git a/docs/content/docs/react/components/stackflow/app-screen.mdx b/docs/content/docs/react/components/stackflow/app-screen.mdx index 921cce6bb..a185a7acb 100644 --- a/docs/content/docs/react/components/stackflow/app-screen.mdx +++ b/docs/content/docs/react/components/stackflow/app-screen.mdx @@ -17,7 +17,11 @@ description: "이 문서는 정리 중이에요. 문의 내용은 #_design_core ### AppBar - + + +### AppBarMain + + ## 예제 diff --git a/docs/package.json b/docs/package.json index 6ca39248b..7d8b32a1f 100644 --- a/docs/package.json +++ b/docs/package.json @@ -44,7 +44,7 @@ "@stackflow/core": "^1.1.0", "@stackflow/plugin-basic-ui": "^1.10.0", "@stackflow/plugin-renderer-basic": "^1.1.13", - "@stackflow/react": "^1.4.0", + "@stackflow/react": "^1.4.1", "change-case": "^5.4.4", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", diff --git a/docs/public/rootage-next/components/top-navigation.json b/docs/public/rootage-next/components/top-navigation.json index de9713dab..3b9943f69 100644 --- a/docs/public/rootage-next/components/top-navigation.json +++ b/docs/public/rootage-next/components/top-navigation.json @@ -28,16 +28,6 @@ "value": "$dimension.s4" } }, - "title": { - "fontSize": { - "type": "color", - "value": "$font-size.s6-static" - }, - "fontWeight": { - "type": "color", - "value": "$font-weight.bold" - } - }, "icon": { "size": { "type": "dimension", @@ -81,16 +71,6 @@ "value": "$dimension.s4" } }, - "title": { - "fontSize": { - "type": "color", - "value": "$font-size.s6-static" - }, - "fontWeight": { - "type": "color", - "value": "$font-weight.bold" - } - }, "icon": { "size": { "type": "dimension", @@ -133,6 +113,12 @@ "value": "$color.fg.neutral" } }, + "subtitle": { + "color": { + "type": "color", + "value": "$color.fg.neutral-muted" + } + }, "icon": { "color": { "type": "color", @@ -165,6 +151,12 @@ "value": "$color.palette.static-white" } }, + "subtitle": { + "color": { + "type": "color", + "value": "$color.palette.static-white" + } + }, "icon": { "color": { "type": "color", @@ -201,6 +193,64 @@ } } ] + }, + { + "variants": { + "titleLayout": "titleOnly" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "title": { + "fontSize": { + "type": "color", + "value": "$font-size.s6-static" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + } + } + } + ] + }, + { + "variants": { + "titleLayout": "withSubtitle" + }, + "definitions": [ + { + "states": [ + "enabled" + ], + "slots": { + "title": { + "fontSize": { + "type": "color", + "value": "$font-size.s5-static" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.bold" + } + }, + "subtitle": { + "fontSize": { + "type": "color", + "value": "$font-size.s2-static" + }, + "fontWeight": { + "type": "color", + "value": "$font-weight.regular" + } + } + } + } + ] } ] } \ No newline at end of file diff --git a/docs/public/rootage-next/font-size.json b/docs/public/rootage-next/font-size.json index 125bd49f0..61a5b7546 100644 --- a/docs/public/rootage-next/font-size.json +++ b/docs/public/rootage-next/font-size.json @@ -117,6 +117,28 @@ } } }, + "$font-size.s2-static": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 12, + "unit": "px" + } + } + } + }, + "$font-size.s5-static": { + "values": { + "default": { + "type": "dimension", + "value": { + "value": 16, + "unit": "px" + } + } + } + }, "$font-size.s6-static": { "values": { "default": { diff --git a/docs/public/rootage-next/parsed.json b/docs/public/rootage-next/parsed.json index cb01a7da5..28e37a675 100644 --- a/docs/public/rootage-next/parsed.json +++ b/docs/public/rootage-next/parsed.json @@ -23505,34 +23505,6 @@ } ] }, - { - "kind": "SlotDeclaration", - "slot": "title", - "body": [ - { - "kind": "ColorPropertyDeclaration", - "property": "fontSize", - "value": { - "kind": "TokenLit", - "group": [ - "font-size" - ], - "key": "s6-static" - } - }, - { - "kind": "ColorPropertyDeclaration", - "property": "fontWeight", - "value": { - "kind": "TokenLit", - "group": [ - "font-weight" - ], - "key": "bold" - } - } - ] - }, { "kind": "SlotDeclaration", "slot": "icon", @@ -23606,34 +23578,6 @@ } ] }, - { - "kind": "SlotDeclaration", - "slot": "title", - "body": [ - { - "kind": "ColorPropertyDeclaration", - "property": "fontSize", - "value": { - "kind": "TokenLit", - "group": [ - "font-size" - ], - "key": "s6-static" - } - }, - { - "kind": "ColorPropertyDeclaration", - "property": "fontWeight", - "value": { - "kind": "TokenLit", - "group": [ - "font-weight" - ], - "key": "bold" - } - } - ] - }, { "kind": "SlotDeclaration", "slot": "icon", @@ -23717,6 +23661,24 @@ } ] }, + { + "kind": "SlotDeclaration", + "slot": "subtitle", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "fg" + ], + "key": "neutral-muted" + } + } + ] + }, { "kind": "SlotDeclaration", "slot": "icon", @@ -23790,6 +23752,24 @@ } ] }, + { + "kind": "SlotDeclaration", + "slot": "subtitle", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "color", + "value": { + "kind": "TokenLit", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, { "kind": "SlotDeclaration", "slot": "icon", @@ -23861,6 +23841,136 @@ ] } ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "titleLayout", + "value": "titleOnly" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s6-static" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "kind": "VariantDeclaration", + "variants": [ + { + "kind": "VariantExpression", + "name": "titleLayout", + "value": "withSubtitle" + } + ], + "body": [ + { + "kind": "StateDeclaration", + "states": [ + { + "kind": "StateExpression", + "value": "enabled" + } + ], + "body": [ + { + "kind": "SlotDeclaration", + "slot": "title", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5-static" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + }, + { + "kind": "SlotDeclaration", + "slot": "subtitle", + "body": [ + { + "kind": "ColorPropertyDeclaration", + "property": "fontSize", + "value": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2-static" + } + }, + { + "kind": "ColorPropertyDeclaration", + "property": "fontWeight", + "value": { + "kind": "TokenLit", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + } + ] + } + ] } ] }, @@ -30981,6 +31091,48 @@ } ] }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s2-static" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 12, + "unit": "px" + } + } + ] + }, + { + "kind": "DimensionTokenDeclaration", + "collection": "global", + "token": { + "kind": "TokenLit", + "group": [ + "font-size" + ], + "key": "s5-static" + }, + "values": [ + { + "mode": "default", + "value": { + "kind": "DimensionLit", + "value": 16, + "unit": "px" + } + } + ] + }, { "kind": "DimensionTokenDeclaration", "collection": "global", diff --git a/docs/public/rootage/components/top-navigation.json b/docs/public/rootage/components/top-navigation.json index d939c36a9..9a69d1564 100644 --- a/docs/public/rootage/components/top-navigation.json +++ b/docs/public/rootage/components/top-navigation.json @@ -11,10 +11,6 @@ "minHeight": "44px", "paddingX": "$dimension.s4" }, - "title": { - "fontSize": "$font-size.s6-static", - "fontWeight": "$font-weight.bold" - }, "icon": { "size": "24px", "targetSize": "40px" @@ -27,10 +23,6 @@ "minHeight": "56px", "paddingX": "$dimension.s4" }, - "title": { - "fontSize": "$font-size.s6-static", - "fontWeight": "$font-weight.bold" - }, "icon": { "size": "24px", "targetSize": "40px" @@ -45,6 +37,9 @@ "title": { "color": "$color.fg.neutral" }, + "subtitle": { + "color": "$color.fg.neutral-muted" + }, "icon": { "color": "$color.fg.neutral" } @@ -58,6 +53,9 @@ "title": { "color": "$color.palette.static-white" }, + "subtitle": { + "color": "$color.palette.static-white" + }, "icon": { "color": "$color.palette.static-white" } @@ -70,6 +68,26 @@ "strokeWidth": "1px" } } + }, + "titleLayout=titleOnly": { + "enabled": { + "title": { + "fontSize": "$font-size.s6-static", + "fontWeight": "$font-weight.bold" + } + } + }, + "titleLayout=withSubtitle": { + "enabled": { + "title": { + "fontSize": "$font-size.s5-static", + "fontWeight": "$font-weight.bold" + }, + "subtitle": { + "fontSize": "$font-size.s2-static", + "fontWeight": "$font-weight.regular" + } + } } } } \ No newline at end of file diff --git a/docs/public/rootage/font-size.json b/docs/public/rootage/font-size.json index 1aaf5d30e..81c909162 100644 --- a/docs/public/rootage/font-size.json +++ b/docs/public/rootage/font-size.json @@ -57,6 +57,16 @@ "default": "1.625rem" } }, + "$font-size.s2-static": { + "values": { + "default": "12px" + } + }, + "$font-size.s5-static": { + "values": { + "default": "16px" + } + }, "$font-size.s6-static": { "values": { "default": "18px" diff --git a/docs/public/rootage/parsed.json b/docs/public/rootage/parsed.json index 3baa3c771..4efe40685 100644 --- a/docs/public/rootage/parsed.json +++ b/docs/public/rootage/parsed.json @@ -5504,6 +5504,46 @@ } ] }, + { + "collection": "global", + "token": { + "type": "token", + "group": [ + "font-size" + ], + "key": "s2-static" + }, + "values": [ + { + "mode": "default", + "value": { + "type": "dimension", + "value": 12, + "unit": "px" + } + } + ] + }, + { + "collection": "global", + "token": { + "type": "token", + "group": [ + "font-size" + ], + "key": "s5-static" + }, + "values": [ + { + "mode": "default", + "value": { + "type": "dimension", + "value": 16, + "unit": "px" + } + } + ] + }, { "collection": "global", "token": { @@ -25565,31 +25605,6 @@ } ] }, - { - "key": "title", - "property": [ - { - "key": "fontSize", - "value": { - "type": "token", - "group": [ - "font-size" - ], - "key": "s6-static" - } - }, - { - "key": "fontWeight", - "value": { - "type": "token", - "group": [ - "font-weight" - ], - "key": "bold" - } - } - ] - }, { "key": "icon", "property": [ @@ -25648,31 +25663,6 @@ } ] }, - { - "key": "title", - "property": [ - { - "key": "fontSize", - "value": { - "type": "token", - "group": [ - "font-size" - ], - "key": "s6-static" - } - }, - { - "key": "fontWeight", - "value": { - "type": "token", - "group": [ - "font-weight" - ], - "key": "bold" - } - } - ] - }, { "key": "icon", "property": [ @@ -25740,6 +25730,22 @@ } ] }, + { + "key": "subtitle", + "property": [ + { + "key": "color", + "value": { + "type": "token", + "group": [ + "color", + "fg" + ], + "key": "neutral-muted" + } + } + ] + }, { "key": "icon", "property": [ @@ -25798,6 +25804,22 @@ } ] }, + { + "key": "subtitle", + "property": [ + { + "key": "color", + "value": { + "type": "token", + "group": [ + "color", + "palette" + ], + "key": "static-white" + } + } + ] + }, { "key": "icon", "property": [ @@ -25855,6 +25877,109 @@ ] } ] + }, + { + "key": { + "titleLayout": "titleOnly" + }, + "state": [ + { + "key": [ + "enabled" + ], + "slot": [ + { + "key": "title", + "property": [ + { + "key": "fontSize", + "value": { + "type": "token", + "group": [ + "font-size" + ], + "key": "s6-static" + } + }, + { + "key": "fontWeight", + "value": { + "type": "token", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + } + ] + } + ] + }, + { + "key": { + "titleLayout": "withSubtitle" + }, + "state": [ + { + "key": [ + "enabled" + ], + "slot": [ + { + "key": "title", + "property": [ + { + "key": "fontSize", + "value": { + "type": "token", + "group": [ + "font-size" + ], + "key": "s5-static" + } + }, + { + "key": "fontWeight", + "value": { + "type": "token", + "group": [ + "font-weight" + ], + "key": "bold" + } + } + ] + }, + { + "key": "subtitle", + "property": [ + { + "key": "fontSize", + "value": { + "type": "token", + "group": [ + "font-size" + ], + "key": "s2-static" + } + }, + { + "key": "fontWeight", + "value": { + "type": "token", + "group": [ + "font-weight" + ], + "key": "regular" + } + } + ] + } + ] + } + ] } ] }, diff --git a/docs/registry/registry-ui.ts b/docs/registry/registry-ui.ts index 521b34268..6e44b6c50 100644 --- a/docs/registry/registry-ui.ts +++ b/docs/registry/registry-ui.ts @@ -7,8 +7,8 @@ import popoverPkg from "@seed-design/react-popover/package.json"; export const registryUI: RegistryUI = [ { name: "app-screen", - files: ["ui:app-screen.tsx"], - dependencies: ["@seed-design/stackflow"], + files: ["ui:app-screen.tsx", "ui:app-bar.tsx"], + dependencies: ["@seed-design/react", "@seed-design/stackflow"], }, { name: "error-state", diff --git a/docs/registry/ui/app-bar.tsx b/docs/registry/ui/app-bar.tsx new file mode 100644 index 000000000..f4063b425 --- /dev/null +++ b/docs/registry/ui/app-bar.tsx @@ -0,0 +1,140 @@ +"use client"; + +import { + IconChevronLeftLine, + IconXmarkLine, +} from "@daangn/react-monochrome-icon"; +import { Stack } from "@seed-design/react"; +import { + AppBar as SeedAppBar, + type AppBarIconButtonProps, +} from "@seed-design/stackflow"; +import { useActions, useActivity } from "@stackflow/react"; +import * as React from "react"; +import { forwardRef } from "react"; + +export interface AppBarProps extends SeedAppBar.RootProps {} + +export const AppBar = SeedAppBar.Root; + +export interface AppBarLeftProps extends SeedAppBar.LeftProps {} + +export const AppBarLeft = SeedAppBar.Left; + +export interface AppBarRightProps extends SeedAppBar.RightProps {} + +export const AppBarRight = SeedAppBar.Right; + +export interface AppBarMainProps extends Omit { + /** + * The title of the app bar. + * If children is provided as ReactElement, this prop will be ignored. + */ + title?: string; + + /** + * The subtitle of the app bar. + * If children is provided as ReactElement, this prop will be ignored. + */ + subtitle?: string; +} + +export const AppBarMain = forwardRef( + ({ title, subtitle, children, ...otherProps }, ref) => { + if (React.isValidElement(children)) { + return ( + + {children} + + ); + } + + return ( + + + {children ?? title} + {subtitle ? ( + {subtitle} + ) : null} + + + ); + }, +); +AppBarMain.displayName = "AppBarMain"; + +export const AppBarIconButton = SeedAppBar.IconButton; + +export const AppBarBackButton = forwardRef< + HTMLButtonElement, + AppBarIconButtonProps +>(({ children = , onClick, ...otherProps }, ref) => { + const activity = useActivity(); + const actions = useActions(); + + const handleOnClick = (e: React.MouseEvent) => { + onClick?.(e); + + if (!e.defaultPrevented) { + actions.pop(); + } + }; + + if (!activity) { + return null; + } + if (activity.isRoot) { + return null; + } + + return ( + + {children} + + ); +}); +AppBarBackButton.displayName = "AppBarBackButton"; + +export const AppBarCloseButton = forwardRef< + HTMLButtonElement, + AppBarIconButtonProps +>(({ children = , onClick, ...otherProps }, ref) => { + const activity = useActivity(); + + const handleOnClick = (e: React.MouseEvent) => { + onClick?.(e); + + if (!e.defaultPrevented) { + // you can do something here + } + }; + + const isRoot = !activity || activity.isRoot; + + if (!isRoot) { + return null; + } + + return ( + + {children} + + ); +}); +AppBarCloseButton.displayName = "AppBarCloseButton"; diff --git a/docs/registry/ui/app-screen.tsx b/docs/registry/ui/app-screen.tsx index f960bbaa8..e6a3c6c65 100644 --- a/docs/registry/ui/app-screen.tsx +++ b/docs/registry/ui/app-screen.tsx @@ -1,115 +1,69 @@ "use client"; -import { - IconChevronLeftLine, - IconXmarkLine, -} from "@daangn/react-monochrome-icon"; -import { - AppBar as SeedAppBar, - AppScreen as SeedAppScreen, -} from "@seed-design/stackflow"; -import { useActions, useActivity } from "@stackflow/react"; -import { forwardRef, useCallback } from "react"; +import { PullToRefresh } from "@seed-design/react/primitive"; +import { AppScreen as SeedAppScreen } from "@seed-design/stackflow"; +import { useActions } from "@stackflow/react"; +import { forwardRef } from "react"; +import { ProgressCircle } from "../ui/progress-circle"; -export type AppBarProps = SeedAppBar.RootProps; +export interface AppScreenProps extends SeedAppScreen.RootProps {} -export type AppScreenProps = SeedAppScreen.RootProps; - -export const AppBar = SeedAppBar.Root; - -export const Left = SeedAppBar.Left; - -export const Right = SeedAppBar.Right; - -export const Title = SeedAppBar.Title; - -export const IconButton = SeedAppBar.IconButton; - -export const BackButton = forwardRef< - HTMLButtonElement, - SeedAppBar.IconButtonProps ->(({ children = , onClick, ...otherProps }, ref) => { - const activity = useActivity(); - const actions = useActions(); - - const handleOnClick = useCallback( - (e: React.MouseEvent) => { - onClick?.(e); - - if (!e.defaultPrevented) { - actions.pop(); - } - }, - [actions], - ); - - if (!activity) { - return null; - } - if (activity.isRoot) { - return null; - } - - return ( - - {children} - - ); -}); -BackButton.displayName = "BackButton"; +export const AppScreen = forwardRef( + ({ children, onSwipeBackEnd, ...otherProps }, ref) => { + const { pop } = useActions(); -export const CloseButton = forwardRef< - HTMLButtonElement, - SeedAppBar.IconButtonProps ->(({ children = , onClick, ...otherProps }, ref) => { - const activity = useActivity(); + return ( + { + if (swiped) { + pop(); + } + onSwipeBackEnd?.({ swiped }); + }} + {...otherProps} + > + + {children} + + + ); + }, +); +AppScreen.displayName = "AppScreen"; - const handleOnClick = useCallback( - (e: React.MouseEvent) => { - onClick?.(e); +export interface AppScreenContentProps extends SeedAppScreen.LayerProps { + ptr?: boolean; - if (!e.defaultPrevented) { - // you can do something here - } - }, - [], - ); + onPtrReady?: () => void; - const isRoot = !activity || activity.isRoot; + onPtrRefresh?: () => Promise; +} - if (!isRoot) { - return null; +export const AppScreenContent = forwardRef< + HTMLDivElement, + AppScreenContentProps +>(({ children, ptr, onPtrReady, onPtrRefresh, ...otherProps }, ref) => { + if (!ptr) { + return ( + + {children} + + ); } return ( - - {children} - + + + {(props) => } + + {children} + + ); }); -CloseButton.displayName = "CloseButton"; - -export const AppScreen = forwardRef( - ({ children, ...otherProps }, ref) => { - return ( - - - {children} - - - ); - }, -); -AppScreen.displayName = "AppScreen"; diff --git a/examples/stackflow-spa/src/activities/ActivityActionButton.tsx b/examples/stackflow-spa/src/activities/ActivityActionButton.tsx index 0c0c88f72..2aea1d300 100644 --- a/examples/stackflow-spa/src/activities/ActivityActionButton.tsx +++ b/examples/stackflow-spa/src/activities/ActivityActionButton.tsx @@ -1,5 +1,11 @@ -import { AppScreen } from "@stackflow/plugin-basic-ui"; import type { ActivityComponentType } from "@stackflow/react"; +import { + AppBar, + AppBarBackButton, + AppBarLeft, + AppBarMain, +} from "../design-system/stackflow/AppBar"; +import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen"; import { actionButton, actionButtonVariantMap } from "@seed-design/recipe/actionButton"; @@ -15,17 +21,25 @@ const initialVariants = { const ActivityActionButton: ActivityComponentType = () => { return ( - - ( - - {variants.layout === "withText" ? "야옹" : } - - )} - /> + + + + + + Action Button + + + ( + + {variants.layout === "withText" ? "야옹" : } + + )} + /> + ); }; diff --git a/examples/stackflow-spa/src/activities/ActivityActionChip.tsx b/examples/stackflow-spa/src/activities/ActivityActionChip.tsx index e5a33f8a3..add157799 100644 --- a/examples/stackflow-spa/src/activities/ActivityActionChip.tsx +++ b/examples/stackflow-spa/src/activities/ActivityActionChip.tsx @@ -1,5 +1,11 @@ -import { AppScreen } from "@stackflow/plugin-basic-ui"; import type { ActivityComponentType } from "@stackflow/react"; +import { + AppBar, + AppBarBackButton, + AppBarLeft, + AppBarMain, +} from "../design-system/stackflow/AppBar"; +import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen"; import { actionChip, actionChipVariantMap } from "@seed-design/recipe/actionChip"; @@ -14,17 +20,25 @@ const initialVariants = { const ActivityActionChip: ActivityComponentType = () => { return ( - - ( - - {variants.layout === "withText" ? "야옹" : } - - )} - /> + + + + + + Action Chip + + + ( + + {variants.layout === "withText" ? "야옹" : } + + )} + /> + ); }; diff --git a/examples/stackflow-spa/src/activities/ActivityControlChip.tsx b/examples/stackflow-spa/src/activities/ActivityControlChip.tsx index 2d4894efe..04515425f 100644 --- a/examples/stackflow-spa/src/activities/ActivityControlChip.tsx +++ b/examples/stackflow-spa/src/activities/ActivityControlChip.tsx @@ -1,5 +1,11 @@ -import { AppScreen } from "@stackflow/plugin-basic-ui"; import type { ActivityComponentType } from "@stackflow/react"; +import { + AppBar, + AppBarBackButton, + AppBarLeft, + AppBarMain, +} from "../design-system/stackflow/AppBar"; +import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen"; import { controlChip, controlChipVariantMap } from "@seed-design/recipe/controlChip"; @@ -14,17 +20,25 @@ const initialVariants = { const ActivityControlChip: ActivityComponentType = () => { return ( - - ( - - {variants.layout === "withText" ? "야옹" : } - - )} - /> + + + + + + Control Chip + + + ( + + {variants.layout === "withText" ? "야옹" : } + + )} + /> + ); }; diff --git a/examples/stackflow-spa/src/activities/ActivityErrorState.tsx b/examples/stackflow-spa/src/activities/ActivityErrorState.tsx index 501713195..13f0b369d 100644 --- a/examples/stackflow-spa/src/activities/ActivityErrorState.tsx +++ b/examples/stackflow-spa/src/activities/ActivityErrorState.tsx @@ -1,27 +1,46 @@ import type { ActivityComponentType } from "@stackflow/react"; -import { AppScreen } from "@stackflow/plugin-basic-ui"; import React from "react"; +import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen"; import { ErrorState, type ErrorStateProps } from "../design-system/ui/error-state"; +import { + AppBar, + AppBarLeft, + AppBarMain, + AppBarBackButton, +} from "../design-system/stackflow/AppBar"; const ActivityErrorState: ActivityComponentType = () => { const [variant, setVariant] = React.useState("default"); - const [hideTitle, setHideTitle] = React.useState(false); + const [hideAppBarTitle, setHideAppBarTitle] = React.useState(false); return ( - - setHideTitle((prev) => !prev), + + + + + + Error State + + { + await new Promise((resolve) => setTimeout(resolve, 1000)); }} - secondaryActionProps={{ - children: variant === "basement" ? "default로 전환" : "basement로 전환", - onClick: () => setVariant((prev) => (prev === "default" ? "basement" : "default")), - }} - /> + > + setHideAppBarTitle((prev) => !prev), + }} + secondaryActionProps={{ + children: variant === "basement" ? "default로 전환" : "basement로 전환", + onClick: () => setVariant((prev) => (prev === "default" ? "basement" : "default")), + }} + /> + ); }; diff --git a/examples/stackflow-spa/src/activities/ActivityHelpBubble.tsx b/examples/stackflow-spa/src/activities/ActivityHelpBubble.tsx index d56b0627b..e488057b6 100644 --- a/examples/stackflow-spa/src/activities/ActivityHelpBubble.tsx +++ b/examples/stackflow-spa/src/activities/ActivityHelpBubble.tsx @@ -1,15 +1,25 @@ -import "@seed-design/stylesheet/helpBubble.css"; - import type { ActivityComponentType } from "@stackflow/react"; -import { AppScreen } from "@stackflow/plugin-basic-ui"; +import { + AppBar, + AppBarLeft, + AppBarMain, + AppBarBackButton, +} from "../design-system/stackflow/AppBar"; +import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen"; import { ActionButton } from "../design-system/ui/action-button"; import { HelpBubbleTrigger } from "../design-system/ui/help-bubble"; const ActivityHelpBubble: ActivityComponentType = () => { return ( - -
+ + + + + + Help Bubble + +
Flip 테스트 @@ -44,7 +54,7 @@ const ActivityHelpBubble: ActivityComponentType = () => { Placement=bottom 테스트
-
+ ); }; diff --git a/examples/stackflow-spa/src/activities/ActivityHome.tsx b/examples/stackflow-spa/src/activities/ActivityHome.tsx index 17968e238..88691fe78 100644 --- a/examples/stackflow-spa/src/activities/ActivityHome.tsx +++ b/examples/stackflow-spa/src/activities/ActivityHome.tsx @@ -1,10 +1,9 @@ -import type { ActivityComponentType } from "@stackflow/react"; - -import { AppScreen } from "@stackflow/plugin-basic-ui"; - -import { useSnackbarAdapter } from "@seed-design/react"; +import { Stack, useSnackbarAdapter } from "@seed-design/react"; import { receive } from "@stackflow/compat-await-push"; +import type { ActivityComponentType } from "@stackflow/react"; import { List, ListItem } from "../components/List"; +import { AppBar, AppBarMain } from "../design-system/stackflow/AppBar"; +import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen"; import { DialogPushTrigger } from "../design-system/stackflow/DialogPushTrigger"; import { ActionButton } from "../design-system/ui/action-button"; import { @@ -24,18 +23,19 @@ import { extendedActionSheetCallback } from "./ActivityExtendedActionSheet"; const ActivityHome: ActivityComponentType = () => { const { push } = useFlow(); - const { dialogProps } = useStepDialog(); + const { dialogProps, setOpen } = useStepDialog(); const snackbarAdapter = useSnackbarAdapter(); return ( - -
+ + + + { + await new Promise((resolve) => setTimeout(resolve, 1000)); + }} > push("ActivityActionButton", {})} title="ActionButton" /> @@ -57,7 +57,15 @@ const ActivityHome: ActivityComponentType = () => { - push("ActivityActionChip", {})}>확인 + + setOpen(false)}>확인 + push("ActivityActionChip", {})} + > + Push + + @@ -118,7 +126,7 @@ const ActivityHome: ActivityComponentType = () => { title="Snackbar (critical)" /> -
+ ); }; diff --git a/examples/stackflow-spa/src/activities/ActivityLayerBar.tsx b/examples/stackflow-spa/src/activities/ActivityLayerBar.tsx index 6bc5f8bc9..6b6b1564d 100644 --- a/examples/stackflow-spa/src/activities/ActivityLayerBar.tsx +++ b/examples/stackflow-spa/src/activities/ActivityLayerBar.tsx @@ -1,46 +1,40 @@ import type { ActivityComponentType } from "@stackflow/react"; import { AppBar, - BackButton, - IconButton, - Left, - Right, - Title, + AppBarLeft, + AppBarRight, + AppBarMain, + AppBarBackButton, + AppBarIconButton, } from "../design-system/stackflow/AppBar"; -import { AppScreen } from "../design-system/stackflow/AppScreen"; +import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen"; import { IconBellLine } from "@daangn/react-monochrome-icon"; -import img from "../assets/peng.jpeg"; -import { theme } from "../stackflow/theme"; const ActivityLayerBar: ActivityComponentType = () => { return ( - - - - - 야옹 - - - - - - - - - - - - - - - - } - theme={theme} - > -
+ + + + + + Random Long Title Hello World + + + + + + + + + + + + + + + + ); }; diff --git a/examples/stackflow-spa/src/activities/ActivityNotFound.tsx b/examples/stackflow-spa/src/activities/ActivityNotFound.tsx index f8969e5f0..e2a05a53b 100644 --- a/examples/stackflow-spa/src/activities/ActivityNotFound.tsx +++ b/examples/stackflow-spa/src/activities/ActivityNotFound.tsx @@ -1,10 +1,24 @@ import type { ActivityComponentType } from "@stackflow/react"; - -import { AppScreen } from "@stackflow/plugin-basic-ui"; -import React from "react"; +import { + AppBar, + AppBarBackButton, + AppBarLeft, + AppBarMain, +} from "../design-system/stackflow/AppBar"; +import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen"; const ActivityNotFound: ActivityComponentType = () => { - return 404 Not Found; + return ( + + + + + + Error + + 404 Not Found + + ); }; export default ActivityNotFound; diff --git a/examples/stackflow-spa/src/activities/ActivityTransparentBar.tsx b/examples/stackflow-spa/src/activities/ActivityTransparentBar.tsx index 7fd4c7621..883f1a3cc 100644 --- a/examples/stackflow-spa/src/activities/ActivityTransparentBar.tsx +++ b/examples/stackflow-spa/src/activities/ActivityTransparentBar.tsx @@ -1,47 +1,44 @@ import type { ActivityComponentType } from "@stackflow/react"; import { AppBar, - BackButton, - IconButton, - Left, - Right, - Title, + AppBarLeft, + AppBarRight, + AppBarMain, + AppBarBackButton, + AppBarIconButton, } from "../design-system/stackflow/AppBar"; -import { AppScreen } from "../design-system/stackflow/AppScreen"; +import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen"; import { IconBellLine } from "@daangn/react-monochrome-icon"; import img from "../assets/peng.jpeg"; -import { theme } from "../stackflow/theme"; const ActivityTransparentBar: ActivityComponentType = () => { return ( - - - - - 야옹 - - - - - - - - - - - - - - - - } - theme={theme} - > - penguin -
+ + + + + + 야옹 + + + + + + + + + + + + + + + + + penguin +
+ ); }; diff --git a/examples/stackflow-spa/src/components/List.tsx b/examples/stackflow-spa/src/components/List.tsx index 0eba64bcf..de371b847 100644 --- a/examples/stackflow-spa/src/components/List.tsx +++ b/examples/stackflow-spa/src/components/List.tsx @@ -3,8 +3,12 @@ import type React from "react"; import * as styles from "./List.css"; import { forwardRef } from "react"; -export function List({ children }: React.PropsWithChildren<{}>) { - return
{children}
; +export function List({ children, ...otherProps }: React.PropsWithChildren<{}>) { + return ( +
+ {children} +
+ ); } interface ListItemProps { diff --git a/examples/stackflow-spa/src/design-system/stackflow/AppBar.tsx b/examples/stackflow-spa/src/design-system/stackflow/AppBar.tsx index 5ce700ae8..efb5e2bd8 100644 --- a/examples/stackflow-spa/src/design-system/stackflow/AppBar.tsx +++ b/examples/stackflow-spa/src/design-system/stackflow/AppBar.tsx @@ -1,35 +1,66 @@ -import "@seed-design/stylesheet/topNavigation.css"; - import { IconChevronLeftLine, IconXmarkLine } from "@daangn/react-monochrome-icon"; +import { Stack } from "@seed-design/react"; import { AppBar as SeedAppBar, type AppBarIconButtonProps } from "@seed-design/stackflow"; import { useActions, useActivity } from "@stackflow/react"; -import { forwardRef, useCallback } from "react"; +import * as React from "react"; +import { forwardRef } from "react"; export const AppBar = SeedAppBar.Root; -export const Left = SeedAppBar.Left; - -export const Right = SeedAppBar.Right; +export const AppBarLeft = SeedAppBar.Left; + +export const AppBarRight = SeedAppBar.Right; + +export interface AppBarMainProps extends Omit { + /** + * The title of the app bar. + * If children is provided as ReactElement, this prop will be ignored. + */ + title?: string; + + /** + * The subtitle of the app bar. + * If children is provided as ReactElement, this prop will be ignored. + */ + subtitle?: string; +} + +export const AppBarMain = forwardRef( + ({ title, subtitle, children, ...otherProps }, ref) => { + if (React.isValidElement(children)) { + return ( + + {children} + + ); + } -export const Title = SeedAppBar.Title; + return ( + + + {children ?? title} + {subtitle ? {subtitle} : null} + + + ); + }, +); +AppBarMain.displayName = "AppBarMain"; -export const IconButton = SeedAppBar.IconButton; +export const AppBarIconButton = SeedAppBar.IconButton; -export const BackButton = forwardRef( +export const AppBarBackButton = forwardRef( ({ children = , onClick, ...otherProps }, ref) => { const activity = useActivity(); const actions = useActions(); - const handleOnClick = useCallback( - (e: React.MouseEvent) => { - onClick?.(e); + const handleOnClick = (e: React.MouseEvent) => { + onClick?.(e); - if (!e.defaultPrevented) { - actions.pop(); - } - }, - [actions], - ); + if (!e.defaultPrevented) { + actions.pop(); + } + }; if (!activity) { return null; @@ -51,19 +82,19 @@ export const BackButton = forwardRef( ); }, ); -BackButton.displayName = "BackButton"; +AppBarBackButton.displayName = "AppBarBackButton"; -export const CloseButton = forwardRef( +export const AppBarCloseButton = forwardRef( ({ children = , onClick, ...otherProps }, ref) => { const activity = useActivity(); - const handleOnClick = useCallback((e: React.MouseEvent) => { + const handleOnClick = (e: React.MouseEvent) => { onClick?.(e); if (!e.defaultPrevented) { // you can do something here } - }, []); + }; const isRoot = !activity || activity.isRoot; @@ -72,7 +103,7 @@ export const CloseButton = forwardRef( } return ( - ( {...otherProps} > {children} - + ); }, ); -CloseButton.displayName = "CloseButton"; +AppBarCloseButton.displayName = "AppBarCloseButton"; diff --git a/examples/stackflow-spa/src/design-system/stackflow/AppScreen.tsx b/examples/stackflow-spa/src/design-system/stackflow/AppScreen.tsx index e473ff018..5a32b54b1 100644 --- a/examples/stackflow-spa/src/design-system/stackflow/AppScreen.tsx +++ b/examples/stackflow-spa/src/design-system/stackflow/AppScreen.tsx @@ -1,17 +1,69 @@ -import "@seed-design/stylesheet/screen.css"; - -import { AppScreen as SeedAppScreen, type AppScreenProps } from "@seed-design/stackflow"; +import { PullToRefresh, usePullToRefreshContext } from "@seed-design/react/primitive"; +import { AppScreen as SeedAppScreen } from "@seed-design/stackflow"; +import { useActions } from "@stackflow/react"; import { forwardRef } from "react"; +import { ProgressCircle } from "../ui/progress-circle"; + +export interface AppScreenProps extends SeedAppScreen.RootProps {} export const AppScreen = forwardRef( - ({ children, ...otherProps }, ref) => { + ({ children, onSwipeBackEnd, ...otherProps }, ref) => { + const { pop } = useActions(); + return ( - + { + if (swiped) { + pop(); + } + onSwipeBackEnd?.({ swiped }); + }} + {...otherProps} + > - {children} + {children} ); }, ); AppScreen.displayName = "AppScreen"; + +export interface AppScreenContentProps extends SeedAppScreen.LayerProps { + ptr?: boolean; + + onPtrReady?: () => void; + + onPtrRefresh?: () => Promise; +} + +export const AppScreenContent = forwardRef( + ({ children, ptr, onPtrReady, onPtrRefresh, ...otherProps }, ref) => { + if (!ptr) { + return ( + + {children} + + ); + } + + return ( + + + + {(props) => } + + {children} + + + + ); + }, +); + +function Debug() { + const { state } = usePullToRefreshContext(); + console.log(state); + return null; +} diff --git a/examples/stackflow-spa/src/global.css b/examples/stackflow-spa/src/global.css index 22fc4b3cf..079e3f1ed 100644 --- a/examples/stackflow-spa/src/global.css +++ b/examples/stackflow-spa/src/global.css @@ -3,3 +3,7 @@ Cantarell, "Open Sans", "Helvetica Neue", sans-serif; background-color: var(--seed-v3-color-bg-layer-default); } + +body { + overscroll-behavior: none; +} diff --git a/examples/stackflow-spa/src/stackflow/Stack.tsx b/examples/stackflow-spa/src/stackflow/Stack.tsx index 741f7fe3c..715660a0d 100644 --- a/examples/stackflow-spa/src/stackflow/Stack.tsx +++ b/examples/stackflow-spa/src/stackflow/Stack.tsx @@ -6,6 +6,7 @@ import { stackflow, type ActivityComponentType, type UseActionsOutputType } from import React from "react"; import { IconChevronLeftLine } from "@daangn/react-monochrome-icon"; +import { seedPlugin } from "@seed-design/stackflow"; import ActivityNotFound from "../activities/ActivityNotFound"; import { theme } from "./theme"; @@ -49,6 +50,9 @@ const { Stack, useFlow, useStepFlow } = stackflow({ dimBackgroundColor: vars.$color.bg.overlay, theme, }), + seedPlugin({ + theme, + }), historySyncPlugin({ fallbackActivity: () => "ActivityNotFound", routes: { diff --git a/packages/qvism-preset/src/index.ts b/packages/qvism-preset/src/index.ts index 169c131a6..3b07f3a27 100644 --- a/packages/qvism-preset/src/index.ts +++ b/packages/qvism-preset/src/index.ts @@ -3,9 +3,6 @@ import actionChip from "./recipes/action-chip"; import actionSheet from "./recipes/action-sheet"; import actionSheetCloseButton from "./recipes/action-sheet-close-button"; import actionSheetItem from "./recipes/action-sheet-item"; -import extendedActionSheet from "./recipes/extended-action-sheet"; -import extendedActionSheetCloseButton from "./recipes/extended-action-sheet-close-button"; -import extendedActionSheetItem from "./recipes/extended-action-sheet-item"; import avatar from "./recipes/avatar"; import avatarStack from "./recipes/avatar-stack"; import badge from "./recipes/badge"; @@ -16,15 +13,18 @@ import chipTab from "./recipes/chip-tab"; import chipTabs from "./recipes/chip-tabs"; import controlChip from "./recipes/control-chip"; import dialog from "./recipes/dialog"; +import extendedActionSheet from "./recipes/extended-action-sheet"; +import extendedActionSheetCloseButton from "./recipes/extended-action-sheet-close-button"; +import extendedActionSheetItem from "./recipes/extended-action-sheet-item"; import extendedFab from "./recipes/extended-fab"; import fab from "./recipes/fab"; import helpBubble from "./recipes/help-bubble"; import identityPlaceholder from "./recipes/identity-placeholder"; import inlineBanner from "./recipes/inline-banner"; +import mannerTempBadge from "./recipes/manner-temp-badge"; import progressCircle from "./recipes/progress-circle"; import radio from "./recipes/radio"; import reactionButton from "./recipes/reaction-button"; -import screen from "./recipes/screen"; import segmentedControl from "./recipes/segmented-control"; import { selectBox, selectBoxGroup } from "./recipes/select-box"; import skeleton from "./recipes/skeleton"; @@ -36,9 +36,9 @@ import text from "./recipes/text"; import textButton from "./recipes/text-button"; import textField from "./recipes/text-field"; import toggleButton from "./recipes/toggle-button"; -import topNavigation from "./recipes/top-navigation"; import visuallyHidden from "./recipes/visually-hidden"; -import mannerTempBadge from "./recipes/manner-temp-badge"; +import { appBar, appBarMain } from "./stackflow/app-bar"; +import { appScreen } from "./stackflow/app-screen"; const recipes = { avatar, @@ -67,7 +67,6 @@ const recipes = { selectBoxGroup, selectBox, switch: switchRecipe, - screen, helpBubble, identityPlaceholder, inlineBanner, @@ -82,8 +81,10 @@ const recipes = { text, textButton, textField, - topNavigation, visuallyHidden, + appScreen, + appBar, + appBarMain, }; export default recipes; diff --git a/packages/qvism-preset/src/recipes/screen.ts b/packages/qvism-preset/src/recipes/screen.ts deleted file mode 100644 index c074d27ad..000000000 --- a/packages/qvism-preset/src/recipes/screen.ts +++ /dev/null @@ -1,133 +0,0 @@ -import { vars } from "@seed-design/vars"; -import { topNavigation } from "@seed-design/vars/component"; -import { defineRecipe } from "../utils/define-recipe"; - -const MIN_SAFE_AREA_INSET_TOP = "0px"; // TODO: turn into public interface - -const screen = defineRecipe({ - name: "screen", - slots: ["root", "layer", "dim", "edge"], - base: { - root: { - position: "absolute", - width: "100%", - height: "100%", - left: 0, - right: 0, - overflow: "hidden", - - "&[data-transition-state=exit-done]": { - transform: "translate3d(100%, 0, 0)", - }, - }, - dim: { - zIndex: "var(--z-index-dim)", - - position: "absolute", - width: "100%", - left: 0, - right: 0, - opacity: 0, - - transition: `transform ${vars.$duration.s6}, opacity ${vars.$duration.s6}`, - - "&:is([data-transition-state=enter-active], [data-transition-state=enter-done])": { - opacity: 1, - }, - "&:is([data-transition-state=exit-active], [data-transition-state=exit-done])": { - opacity: 0, - }, - }, - layer: { - zIndex: "var(--z-index-layer)", - - position: "absolute", - width: "100%", - height: "100%", - left: 0, - right: 0, - overflowY: "scroll", - WebkitOverflowScrolling: "touch", - "&::-webkit-scrollbar": { - display: "none", - }, - - backgroundColor: vars.$color.bg.layerDefault, - transition: `transform ${vars.$duration.s6}, opacity ${vars.$duration.s6}`, - }, - edge: { - zIndex: "var(--z-index-edge)", - - position: "absolute", - width: "20px", - height: "100%", - left: 0, - right: 0, - }, - }, - variants: { - theme: { - cupertino: { - root: { - "--app-bar-height": topNavigation.themeCupertino.enabled.root.minHeight, - }, - dim: { - height: "100%", - background: vars.$color.bg.overlay, - }, - layer: { - transform: "translate3d(100%, 0, 0)", - "&:is([data-transition-state=enter-active], [data-transition-state=enter-done])": { - transform: "translate3d(0, 0, 0)", - }, - }, - }, - android: { - root: { - "--app-bar-height": topNavigation.themeAndroid.enabled.root.minHeight, - }, - dim: { - height: "10rem", - background: `linear-gradient(${vars.$color.bg.overlay}, rgba(0, 0, 0, 0))`, - }, - layer: { - opacity: 0, - transform: "translate3d(0, 10rem, 0)", - "&:is([data-transition-state=enter-active], [data-transition-state=enter-done])": { - opacity: 1, - transform: "translate3d(0, 0, 0)", - }, - }, - }, - }, - hasAppBar: { - true: { - root: { - "--app-bar-margin": "var(--app-bar-height)", - - "@supports (padding: max(0px)) and (padding: constant(safe-area-inset-top))": { - "--app-bar-margin": `calc(var(--app-bar-height) + max(${MIN_SAFE_AREA_INSET_TOP}, constant(safe-area-inset-top)))`, - }, - "@supports (padding: max(0px)) and (padding: env(safe-area-inset-top))": { - "--app-bar-margin": `calc(var(--app-bar-height) + max(${MIN_SAFE_AREA_INSET_TOP}, env(safe-area-inset-top)))`, - }, - }, - layer: { - boxSizing: "border-box", - transition: `transform ${vars.$duration.s6}, opacity ${vars.$duration.s6}`, // TODO: add heightTransitionDuration - height: "100%", - }, - edge: { - top: "var(--app-bar-height)", - height: "calc(100% - var(--app-bar-height))", - }, - }, - }, - }, - defaultVariants: { - theme: "cupertino", - hasAppBar: false, - }, -}); - -export default screen; diff --git a/packages/qvism-preset/src/recipes/top-navigation.ts b/packages/qvism-preset/src/recipes/top-navigation.ts deleted file mode 100644 index 072bb0d72..000000000 --- a/packages/qvism-preset/src/recipes/top-navigation.ts +++ /dev/null @@ -1,231 +0,0 @@ -import { topNavigation as vars } from "@seed-design/vars/component"; -import { defineRecipe } from "../utils/define-recipe"; - -const MIN_SAFE_AREA_INSET_TOP = "0px"; // TODO: turn into public interface -const COLOR_TRANSITION_DURATION = "0s"; - -const topNavigation = defineRecipe({ - name: "topNavigation", - slots: [ - "root", - "safeArea", - "container", - "left", - "right", - "title", - "titleMain", - "titleEdge", - "titleText", - "iconButton", - "icon", - ], - base: { - root: { - zIndex: "var(--z-index-app-bar)", - - position: "absolute", - boxSizing: "content-box", - width: "100%", - // TODO: do we need to set overflow? - - "&[data-transition-state=exit-active]": { - transform: "translate3d(100%, 0, 0)", - transition: `background-color ${COLOR_TRANSITION_DURATION}, box-shadow ${COLOR_TRANSITION_DURATION}, transform 0s`, - }, - }, - safeArea: { - height: `max(${MIN_SAFE_AREA_INSET_TOP}, env(safe-area-inset-top))`, - }, - container: { - display: "flex", - alignItems: "flex-end", - // TODO: do we need to set overflow? - // TODO: add heightTransitionDuration - }, - left: { - display: "flex", - alignItems: "center", - height: "100%", - }, - right: { - display: "flex", - alignItems: "center", - height: "100%", - marginLeft: "auto", - }, - iconButton: { - display: "flex", - alignItems: "center", - justifyContent: "center", - }, - icon: { - display: "inline-block", - flexShrink: 0, - }, - title: { - display: "flex", - alignItems: "center", - flex: 1, - height: "100%", - }, - titleMain: { - // width is calculated in js - // TODO: add heightTransitionDuration - transition: `color ${COLOR_TRANSITION_DURATION}`, - }, - titleEdge: { - appearance: "none", - border: 0, - padding: 0, - background: "none", - position: "absolute", - top: 0, - cursor: "pointer", - left: "50%", - height: "20px", - transform: "translate(-50%)", - maxWidth: "5rem", - display: "none", - }, - titleText: { - whiteSpace: "nowrap", - overflow: "hidden", - textOverflow: "ellipsis", - width: "100%", - }, - }, - variants: { - theme: { - cupertino: { - container: { - height: vars.themeCupertino.enabled.root.minHeight, - paddingInline: vars.themeCupertino.enabled.root.paddingX, - '[data-stackflow-activity-is-active="false"] &': { - opacity: "calc(pow(var(--stackflow-swipe-back-ratio, 1), 2))", - }, - '[data-stackflow-activity-is-active="true"] &': { - opacity: "calc(1 - pow(var(--stackflow-swipe-back-ratio, 0), 2))", - }, - }, - iconButton: { - width: vars.themeCupertino.enabled.icon.targetSize, - height: vars.themeCupertino.enabled.icon.targetSize, - - "&:first-child": { - marginLeft: `calc(-1 * (${vars.themeCupertino.enabled.icon.targetSize} - ${vars.themeCupertino.enabled.icon.size}) / 2)`, - }, - "&:last-child": { - marginRight: `calc(-1 * (${vars.themeCupertino.enabled.icon.targetSize} - ${vars.themeCupertino.enabled.icon.size}) / 2)`, - }, - }, - icon: { - width: vars.themeCupertino.enabled.icon.size, - height: vars.themeCupertino.enabled.icon.size, - '[data-stackflow-activity-is-active="true"] &[data-transition-state="enter-active"]': { - opacity: 1, - }, - '[data-stackflow-activity-is-active="true"] &[data-transition-state="enter-done"]': { - opacity: 1, - }, - }, - titleMain: { - position: "absolute", - display: "flex", - alignItems: "center", - justifyContent: "center", - textAlign: "center", - height: "100%", - left: "50%", - transform: "translate(-50%)", - top: `max(${MIN_SAFE_AREA_INSET_TOP}, env(safe-area-inset-top))`, - }, - titleText: { - fontSize: vars.themeCupertino.enabled.title.fontSize, - fontWeight: vars.themeCupertino.enabled.title.fontWeight, - }, - titleEdge: { - display: "block", - }, - }, - android: { - root: { - opacity: 0, - transform: "translate3d(0, 160px, 0)", - transition: `background-color ${COLOR_TRANSITION_DURATION}, box-shadow ${COLOR_TRANSITION_DURATION}, transform 300ms`, // TODO: define duration in rootage - - "&:is([data-transition-state=enter-active], [data-transition-state=enter-done])": { - opacity: 1, - transform: "translate3d(0, 0, 0)", - }, - }, - container: { - height: vars.themeAndroid.enabled.root.minHeight, - paddingInline: vars.themeAndroid.enabled.root.paddingX, - }, - iconButton: { - width: vars.themeAndroid.enabled.icon.targetSize, - height: vars.themeAndroid.enabled.icon.targetSize, - - "&:first-child": { - marginLeft: `calc(-1 * (${vars.themeAndroid.enabled.icon.targetSize} - ${vars.themeAndroid.enabled.icon.size}) / 2)`, - }, - "&:last-child": { - marginRight: `calc(-1 * (${vars.themeAndroid.enabled.icon.targetSize} - ${vars.themeAndroid.enabled.icon.size}) / 2)`, - }, - }, - icon: { - width: vars.themeAndroid.enabled.icon.size, - height: vars.themeAndroid.enabled.icon.size, - }, - titleMain: { - width: "100%", - justifyContent: "flex-start", - paddingLeft: "16px", - boxSizing: "border-box", - }, - titleText: { - fontSize: vars.themeAndroid.enabled.title.fontSize, - fontWeight: vars.themeAndroid.enabled.title.fontWeight, - }, - }, - }, - tone: { - layer: { - root: { - backgroundColor: vars.toneLayer.enabled.root.color, - }, - icon: { - color: vars.toneLayer.enabled.icon.color, - }, - titleMain: { - color: vars.toneLayer.enabled.title.color, - }, - }, - transparent: { - root: { - backgroundColor: vars.toneTransparent.enabled.root.color, - }, - icon: { - color: vars.toneTransparent.enabled.icon.color, - }, - titleMain: { - color: vars.toneTransparent.enabled.title.color, - }, - }, - }, - border: { - true: { - root: { - boxShadow: `inset 0px calc(-1 * ${vars.dividerTrue.enabled.root.strokeWidth}) 0 ${vars.dividerTrue.enabled.root.strokeColor}`, - }, - }, - }, - }, - defaultVariants: { - theme: "cupertino", - tone: "layer", - border: false, - }, -}); - -export default topNavigation; diff --git a/packages/qvism-preset/src/stackflow/animation.ts b/packages/qvism-preset/src/stackflow/animation.ts new file mode 100644 index 000000000..8421334a1 --- /dev/null +++ b/packages/qvism-preset/src/stackflow/animation.ts @@ -0,0 +1,165 @@ +import { createPresence } from "../utils/animation"; + +const TransitionIOS = { + duration: "300ms", + timingFunction: "cubic-bezier(0.22, 0.1, 0.3, 0.85)", // approximates iOS spring animation +}; + +const FadeInFromBottomAndroid = { + duration: "300ms", // actually 350ms, but currently stackflow does not allow duration per activity. + timingFunction: "cubic-bezier(0.23, 0.1, 0.32, 1)", // approximates Easing.out(Easing.poly(5)), https://api.flutter.dev/flutter/animation/Curves/easeOutQuint-constant.html +}; + +const FadeOutToBottomAndroid = { + duration: "150ms", // currently stackflow does not allow duration per activity, 150ms may cause bug + timingFunction: "linear", +}; + +const ScaleFromCenterAndroid = { + duration: "300ms", // actually 400ms, but currently stackflow does not allow duration per activity. + timingFunction: "cubic-bezier(0.20833, 0.82, 0.25, 1)", // from https://github.com/react-navigation/react-navigation/blob/bddcc44ab0e0ad5630f7ee0feb69496412a00217/packages/stack/src/TransitionConfigs/TransitionSpecs.tsx#L68 +}; + +const iOSPresence = createPresence(TransitionIOS, TransitionIOS); +const fadeFromBottomAndroidPresence = createPresence( + FadeInFromBottomAndroid, + FadeOutToBottomAndroid, +); +// TODO: implement scaleFromCenter animations +const scaleFromCenterAndroidPresence = createPresence( + ScaleFromCenterAndroid, + ScaleFromCenterAndroid, +); + +export const iOSAnimations = { + layer: iOSPresence.getAnimations({ + in: { + translateX: "0", + }, + interaction: { + translateX: "var(--swipe-back-displacement, 0)", + }, + out: { + translateX: "100%", + }, + }), + layerBehind: iOSPresence.getAnimations({ + in: { + translateX: "0", + }, + interaction: { + translateX: "calc(-30% + var(--swipe-back-displacement, 0) * 0.3)", + }, + out: { + translateX: "-30%", + }, + gravity: "out", + }), + dim: iOSPresence.getAnimations({ + in: { + opacity: "1", + }, + interaction: { + opacity: "calc(1 - var(--swipe-back-displacement-ratio, 0))", + }, + out: { + opacity: "0", + }, + }), + title: iOSPresence.getAnimations({ + in: { + opacity: "1", + translateX: "0", + }, + interaction: { + opacity: "calc(1 - var(--swipe-back-displacement-ratio, 0))", + translateX: "var(--swipe-back-displacement, 0) * 0.25", + }, + out: { + opacity: "0", + translateX: "25%", + }, + }), + titleBehind: iOSPresence.getAnimations({ + in: { + opacity: "1", + translateX: "0", + }, + interaction: { + opacity: "calc(1 - var(--swipe-back-displacement-ratio, 0))", + translateX: "calc(-25% + var(--swipe-back-displacement, 0) * 0.25)", + }, + out: { + opacity: "0", + translateX: "-25%", + }, + gravity: "out", + }), + appBarBackground: iOSPresence.getAnimations({ + in: { + translateX: "0", + }, + interaction: { + translateX: "var(--swipe-back-displacement, 0)", + }, + out: { + translateX: "100%", + }, + }), + icon: iOSPresence.getAnimations({ + in: { + opacity: "1", + }, + interaction: { + opacity: "calc(1 - var(--swipe-back-displacement-ratio, 0))", + }, + out: { + opacity: "0", + }, + }), + iconBehind: iOSPresence.getAnimations({ + in: { + opacity: "1", + }, + interaction: { + opacity: "calc(1 - var(--swipe-back-displacement-ratio, 0))", + }, + out: { + opacity: "0", + }, + gravity: "out", + }), +}; + +export const fadeFromBottomAndroidAnimations = { + layer: fadeFromBottomAndroidPresence.getAnimations({ + in: { + opacity: "1", + translateY: "0", + }, + out: { + opacity: "0", + translateY: "8vh", + }, + }), + dim: fadeFromBottomAndroidPresence.getAnimations({ + in: { + opacity: "1", + translateY: "-8vh", + }, + out: { + opacity: "0", + translateY: "0", + }, + }), + appBar: fadeFromBottomAndroidPresence.getAnimations({ + in: { + opacity: "1", + translateY: "0", + }, + out: { + opacity: "0", + translateY: "8vh", + }, + }), +}; diff --git a/packages/qvism-preset/src/stackflow/app-bar.ts b/packages/qvism-preset/src/stackflow/app-bar.ts new file mode 100644 index 000000000..a742197ae --- /dev/null +++ b/packages/qvism-preset/src/stackflow/app-bar.ts @@ -0,0 +1,282 @@ +import { topNavigation as vars } from "@seed-design/vars/component"; +import { defineRecipe } from "../utils/define-recipe"; +import { fadeFromBottomAndroidAnimations, iOSAnimations } from "./animation"; +import { + idle, + idleBehind, + pop, + popBehind, + push, + pushBehind, + swipeBackSwiping, + swipeBackSwipingBehind, +} from "./pseudo"; + +export const appBarMain = defineRecipe({ + name: "appBarMain", + slots: ["root", "title", "subtitle"], + base: { + root: { + flex: 1, + height: "100%", + }, + title: { + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", + }, + subtitle: { + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", + }, + }, + variants: { + layout: { + titleOnly: { + title: { + fontSize: vars.titleLayoutTitleOnly.enabled.title.fontSize, + fontWeight: vars.titleLayoutTitleOnly.enabled.title.fontWeight, + }, + }, + withSubtitle: { + title: { + fontSize: vars.titleLayoutWithSubtitle.enabled.title.fontSize, + fontWeight: vars.titleLayoutWithSubtitle.enabled.title.fontWeight, + }, + subtitle: { + fontSize: vars.titleLayoutWithSubtitle.enabled.subtitle.fontSize, + fontWeight: vars.titleLayoutWithSubtitle.enabled.subtitle.fontWeight, + }, + }, + }, + theme: { + cupertino: { + root: { + position: "absolute", + display: "flex", + alignItems: "center", + justifyContent: "center", + textAlign: "center", + height: "100%", + left: 0, + right: 0, + paddingInline: "var(--centered-title-padding-x, 0)", + pointerEvents: "none", + }, + }, + android: { + root: { + display: "flex", + alignItems: "center", + justifyContent: "flex-start", + width: "100%", + }, + }, + }, + transitionStyle: { + slideFromRightIOS: { + root: { + // top + [push]: iOSAnimations.title.push, + [pop]: iOSAnimations.title.pop, + [idle]: iOSAnimations.title.idle, + [swipeBackSwiping]: iOSAnimations.title.interaction, + + // behind + [pushBehind]: iOSAnimations.titleBehind.push, + [popBehind]: iOSAnimations.titleBehind.pop, + [idleBehind]: iOSAnimations.titleBehind.idle, + [swipeBackSwipingBehind]: iOSAnimations.titleBehind.interaction, + }, + }, + fadeFromBottomAndroid: {}, + }, + tone: { + layer: { + root: { + color: vars.toneLayer.enabled.title.color, + }, + title: { + color: vars.toneLayer.enabled.title.color, + }, + subtitle: { + color: vars.toneLayer.enabled.subtitle.color, + }, + }, + transparent: { + root: { + color: vars.toneTransparent.enabled.title.color, + }, + title: { + color: vars.toneTransparent.enabled.title.color, + }, + subtitle: { + color: vars.toneTransparent.enabled.subtitle.color, + }, + }, + }, + }, + defaultVariants: { + layout: "titleOnly", + theme: "cupertino", + transitionStyle: "slideFromRightIOS", + tone: "layer", + }, +}); + +export const appBar = defineRecipe({ + name: "appBar", + slots: ["root", "left", "right", "iconButton", "icon"], + base: { + root: { + zIndex: "var(--z-index-app-bar)", + + position: "absolute", + boxSizing: "border-box", + width: "100%", + display: "flex", + alignItems: "flex-end", + + "&:before": { + content: '""', + position: "absolute", + pointerEvents: "none", + inset: 0, + zIndex: -1, + }, + }, + left: { + display: "flex", + alignItems: "center", + height: "100%", + }, + right: { + display: "flex", + alignItems: "center", + height: "100%", + marginLeft: "auto", + }, + iconButton: { + display: "flex", + alignItems: "center", + justifyContent: "center", + }, + icon: { + display: "inline-block", + flexShrink: 0, + }, + }, + variants: { + theme: { + cupertino: { + root: { + height: vars.themeCupertino.enabled.root.minHeight, + paddingInline: vars.themeCupertino.enabled.root.paddingX, + }, + iconButton: { + width: vars.themeCupertino.enabled.icon.targetSize, + height: vars.themeCupertino.enabled.icon.targetSize, + + "&:first-child": { + marginLeft: `calc(-1 * (${vars.themeCupertino.enabled.icon.targetSize} - ${vars.themeCupertino.enabled.icon.size}) / 2)`, + }, + "&:last-child": { + marginRight: `calc(-1 * (${vars.themeCupertino.enabled.icon.targetSize} - ${vars.themeCupertino.enabled.icon.size}) / 2)`, + }, + }, + icon: { + width: vars.themeCupertino.enabled.icon.size, + height: vars.themeCupertino.enabled.icon.size, + }, + }, + android: { + root: { + height: vars.themeAndroid.enabled.root.minHeight, + paddingInline: vars.themeAndroid.enabled.root.paddingX, + }, + iconButton: { + width: vars.themeAndroid.enabled.icon.targetSize, + height: vars.themeAndroid.enabled.icon.targetSize, + + "&:first-child": { + marginLeft: `calc(-1 * (${vars.themeAndroid.enabled.icon.targetSize} - ${vars.themeAndroid.enabled.icon.size}) / 2)`, + }, + "&:last-child": { + marginRight: `calc(-1 * (${vars.themeAndroid.enabled.icon.targetSize} - ${vars.themeAndroid.enabled.icon.size}) / 2)`, + }, + }, + icon: { + width: vars.themeAndroid.enabled.icon.size, + height: vars.themeAndroid.enabled.icon.size, + }, + left: { + paddingRight: "16px", + }, + }, + }, + transitionStyle: { + slideFromRightIOS: { + root: { + [`${push}:before`]: iOSAnimations.appBarBackground.push, + [`${pop}:before`]: iOSAnimations.appBarBackground.pop, + [`${idle}:before`]: iOSAnimations.appBarBackground.idle, + }, + icon: { + // top + [push]: iOSAnimations.icon.push, + [pop]: iOSAnimations.icon.pop, + [idle]: iOSAnimations.icon.idle, + [swipeBackSwiping]: iOSAnimations.icon.interaction, + + // behind + [pushBehind]: iOSAnimations.iconBehind.push, + [popBehind]: iOSAnimations.iconBehind.pop, + [idleBehind]: iOSAnimations.iconBehind.idle, + [swipeBackSwipingBehind]: iOSAnimations.iconBehind.interaction, + }, + }, + fadeFromBottomAndroid: { + root: { + [push]: fadeFromBottomAndroidAnimations.appBar.push, + [pop]: fadeFromBottomAndroidAnimations.appBar.pop, + }, + }, + }, + tone: { + layer: { + root: { + "&:before": { + backgroundColor: vars.toneLayer.enabled.root.color, + }, + }, + icon: { + color: vars.toneLayer.enabled.icon.color, + }, + }, + transparent: { + root: { + "&:before": { + backgroundColor: vars.toneTransparent.enabled.root.color, + }, + }, + icon: { + color: vars.toneTransparent.enabled.icon.color, + }, + }, + }, + divider: { + true: { + root: { + boxShadow: `inset 0px calc(-1 * ${vars.dividerTrue.enabled.root.strokeWidth}) 0 ${vars.dividerTrue.enabled.root.strokeColor}`, + }, + }, + }, + }, + defaultVariants: { + theme: "cupertino", + transitionStyle: "slideFromRightIOS", + tone: "layer", + divider: false, + }, +}); diff --git a/packages/qvism-preset/src/stackflow/app-screen.ts b/packages/qvism-preset/src/stackflow/app-screen.ts new file mode 100644 index 000000000..e7288743e --- /dev/null +++ b/packages/qvism-preset/src/stackflow/app-screen.ts @@ -0,0 +1,162 @@ +import { vars } from "@seed-design/vars"; +import { topNavigation as navVars } from "@seed-design/vars/component"; +import { defineRecipe } from "../utils/define-recipe"; +import { fadeFromBottomAndroidAnimations, iOSAnimations } from "./animation"; +import { + idle, + idleBehind, + pop, + popBehind, + push, + pushBehind, + swipeBackSwiping, + swipeBackSwipingBehind, +} from "./pseudo"; + +export const appScreen = defineRecipe({ + name: "appScreen", + slots: ["root", "layer", "dim", "edge"], + base: { + root: { + position: "absolute", + width: "100%", + height: "100%", + left: 0, + right: 0, + overflow: "hidden", + + "--app-bar-offset": "calc(var(--app-bar-height) + var(--seed-safe-area-top))", + }, + dim: { + zIndex: "var(--z-index-dim)", + position: "absolute", + width: "100%", + top: 0, + left: 0, + right: 0, + }, + layer: { + zIndex: "var(--z-index-layer)", + boxSizing: "border-box", + position: "absolute", + width: "100%", + height: "100%", + left: 0, + right: 0, + overflowY: "scroll", + WebkitOverflowScrolling: "touch", + "&::-webkit-scrollbar": { + display: "none", + }, + + backgroundColor: vars.$color.bg.layerDefault, + }, + edge: { + zIndex: "var(--z-index-edge)", + position: "absolute", + width: "20px", + height: "100%", + left: 0, + right: 0, + }, + }, + variants: { + theme: { + cupertino: { + root: { + "--app-bar-height": navVars.themeCupertino.enabled.root.minHeight, + }, + dim: { + height: "100%", + background: vars.$color.bg.overlay, + }, + }, + android: { + root: { + "--app-bar-height": navVars.themeAndroid.enabled.root.minHeight, + }, + edge: { + display: "none", + }, + }, + }, + transitionStyle: { + slideFromRightIOS: { + root: { + "--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)", + }, + layer: { + transform: "translate3d(0, 0, 0)", + // top + [push]: iOSAnimations.layer.push, + [pop]: iOSAnimations.layer.pop, + [idle]: iOSAnimations.layer.idle, + [swipeBackSwiping]: iOSAnimations.layer.interaction, + + // behind + [pushBehind]: iOSAnimations.layerBehind.push, + [popBehind]: iOSAnimations.layerBehind.pop, + [idleBehind]: iOSAnimations.layerBehind.idle, + [swipeBackSwipingBehind]: iOSAnimations.layerBehind.interaction, + }, + dim: { + [push]: iOSAnimations.dim.push, + [pop]: iOSAnimations.dim.pop, + [idle]: iOSAnimations.dim.idle, + [swipeBackSwiping]: iOSAnimations.dim.interaction, + }, + }, + fadeFromBottomAndroid: { + root: { + "--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)", + }, + dim: { + height: "160px", + background: `linear-gradient(${vars.$color.bg.overlay}, rgba(0, 0, 0, 0))`, + + [push]: fadeFromBottomAndroidAnimations.dim.push, + [pop]: fadeFromBottomAndroidAnimations.dim.pop, + }, + layer: { + transform: "translate3d(0, 0, 0)", + + [push]: fadeFromBottomAndroidAnimations.layer.push, + [pop]: fadeFromBottomAndroidAnimations.layer.pop, + }, + }, + }, + layerOffsetTop: { + none: {}, + safeArea: { + layer: { + paddingTop: "var(--seed-safe-area-top)", + }, + }, + appBar: { + layer: { + paddingTop: "var(--app-bar-offset)", + }, + }, + }, + layerOffsetBottom: { + none: {}, + safeArea: { + layer: { + paddingBottom: "var(--seed-safe-area-bottom)", + }, + }, + }, + }, + defaultVariants: { + theme: "cupertino", + transitionStyle: "slideFromRightIOS", + layerOffsetTop: "appBar", + layerOffsetBottom: "none", + }, +}); diff --git a/packages/qvism-preset/src/stackflow/pseudo.ts b/packages/qvism-preset/src/stackflow/pseudo.ts new file mode 100644 index 000000000..b359a97ea --- /dev/null +++ b/packages/qvism-preset/src/stackflow/pseudo.ts @@ -0,0 +1,14 @@ +export const push = "[data-global-transition-state=enter-active] &[data-activity-is-top]"; +export const pop = "[data-global-transition-state=exit-active] &[data-activity-is-top]"; +export const idle = "[data-global-transition-state=enter-done] &[data-activity-is-top]"; +export const pushBehind = + '[data-global-transition-state=enter-active][data-top-activity-type="full-screen"] &:not([data-activity-is-top])'; +export const popBehind = + '[data-global-transition-state=exit-active][data-top-activity-type="full-screen"] &:not([data-activity-is-top])'; +export const idleBehind = + '[data-global-transition-state=enter-done][data-top-activity-type="full-screen"] &:not([data-activity-is-top])'; + +// :not(#\\#) is used to force increasing specificity +export const swipeBackSwiping = "[data-swipe-back-state=swiping] &[data-activity-is-top]:not(#\\#)"; +export const swipeBackSwipingBehind = + "[data-swipe-back-state=swiping] &:not([data-activity-is-top]):not(#\\#)"; diff --git a/packages/qvism-preset/src/utils/animation.ts b/packages/qvism-preset/src/utils/animation.ts index 9499e22be..2cbc24473 100644 --- a/packages/qvism-preset/src/utils/animation.ts +++ b/packages/qvism-preset/src/utils/animation.ts @@ -49,3 +49,74 @@ export function exitAnimation(props: AnimationProps): StyleObject { "--seed-exit-scale": props.scale?.toString() ?? "1", }; } + +interface TransformProps { + translateX?: string; + translateY?: string; + opacity?: string; + scale?: string; +} + +function translate3d({ translateX = "0", translateY = "0" }: TransformProps) { + return `translate3d(${translateX}, ${translateY}, 0)`; +} + +function transform({ translateX, translateY, opacity, scale }: TransformProps) { + return { + transform: translateX || translateY ? translate3d({ translateX, translateY }) : undefined, + opacity, + scale, + }; +} + +export function createPresence( + enterConfig: { duration: string; timingFunction: string }, + exitConfig: { duration: string; timingFunction: string }, +) { + function enter(from: TransformProps, to: TransformProps) { + return { + ...enterAnimation({ ...enterConfig, ...from }), + ...transform(to), + }; + } + + function exit(from: TransformProps, to: TransformProps) { + return { + ...transform(from), + ...exitAnimation({ ...exitConfig, ...to }), + }; + } + + function getAnimations(props: { + in: TransformProps; + interaction?: TransformProps; + out: TransformProps; + gravity?: "in" | "out"; + }) { + const gravity = props.gravity || "in"; + const animations = + gravity === "in" + ? { + push: enter(props.out, props.in), + idle: props.interaction ? enter(props.interaction, props.in) : undefined, + pop: exit(props.interaction ?? props.in, props.out), + } + : { + push: exit(props.in, props.out), + idle: props.interaction ? exit(props.interaction, props.out) : undefined, + pop: enter(props.interaction ?? props.in, props.in), + }; + + return { + ...animations, + interaction: props.interaction + ? { + animation: "none", // remove animation while swiping, so that animation re-run on idle or pop + ...transform(props.interaction), // while swiping back, set swiping position + } + : (undefined as never), + }; + } + + return { getAnimations }; +} diff --git a/packages/react-headless/pull-to-refresh/package.json b/packages/react-headless/pull-to-refresh/package.json new file mode 100644 index 000000000..d17ac2beb --- /dev/null +++ b/packages/react-headless/pull-to-refresh/package.json @@ -0,0 +1,49 @@ +{ + "name": "@seed-design/react-pull-to-refresh", + "version": "0.0.0", + "repository": { + "type": "git", + "url": "git+https://github.com/daangn/seed-design.git", + "directory": "packages/react-headless/pull-to-refresh" + }, + "sideEffects": false, + "exports": { + ".": { + "types": "./lib/index.d.ts", + "require": "./lib/index.js", + "import": "./lib/index.mjs" + }, + "./package.json": "./package.json" + }, + "main": "./lib/index.js", + "files": [ + "lib", + "src" + ], + "scripts": { + "prepack": "yarn build", + "clean": "rm -rf lib", + "build": "nanobundle build" + }, + "dependencies": { + "@radix-ui/react-compose-refs": "^1.1.1", + "@seed-design/dom-utils": "0.0.0-alpha-20241030023710", + "@seed-design/react-primitive": "0.0.0" + }, + "devDependencies": { + "nanobundle": "^1.6.0" + }, + "peerDependencies": { + "react": ">=18.0.0", + "react-dom": ">=18.0.0" + }, + "publishConfig": { + "access": "public" + }, + "ultra": { + "concurrent": [ + "dev", + "build" + ] + } +} diff --git a/packages/react-headless/pull-to-refresh/src/PullToRefresh.namespace.ts b/packages/react-headless/pull-to-refresh/src/PullToRefresh.namespace.ts new file mode 100644 index 000000000..3cb2a2a3b --- /dev/null +++ b/packages/react-headless/pull-to-refresh/src/PullToRefresh.namespace.ts @@ -0,0 +1,8 @@ +export { + PullToRefreshContent as Content, + PullToRefreshIndicator as Indicator, + PullToRefreshRoot as Root, + type PullToRefreshContentProps as ContentProps, + type PullToRefreshIndicatorProps as IndicatorProps, + type PullToRefreshRootProps as RootProps, +} from "./PullToRefresh"; diff --git a/packages/react-headless/pull-to-refresh/src/PullToRefresh.tsx b/packages/react-headless/pull-to-refresh/src/PullToRefresh.tsx new file mode 100644 index 000000000..36fdce73a --- /dev/null +++ b/packages/react-headless/pull-to-refresh/src/PullToRefresh.tsx @@ -0,0 +1,70 @@ +import { composeRefs } from "@radix-ui/react-compose-refs"; +import { mergeProps } from "@seed-design/dom-utils"; +import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive"; +import { forwardRef } from "react"; +import { + usePullToRefresh, + type PullToRefreshIndicatorRenderProps, + type UsePullToRefreshProps, +} from "./usePullToRefresh"; +import { PullToRefreshProvider, usePullToRefreshContext } from "./usePullToRefreshContext"; + +export interface PullToRefreshRootProps + extends UsePullToRefreshProps, + PrimitiveProps, + React.HTMLAttributes {} + +export const PullToRefreshRoot = forwardRef( + (props, ref) => { + const { + displacementMultiplier, + threshold, + onPtrPullStart, + onPtrPullMove, + onPtrPullEnd, + onPtrReady, + onPtrRefresh, + ...otherProps + } = props; + const api = usePullToRefresh({ + displacementMultiplier, + threshold, + onPtrPullStart, + onPtrPullMove, + onPtrPullEnd, + onPtrReady, + onPtrRefresh, + }); + + return ( + + + + ); + }, +); +PullToRefreshRoot.displayName = "PullToRefreshRoot"; + +export interface PullToRefreshIndicatorProps { + children: (props: PullToRefreshIndicatorRenderProps) => React.ReactNode; +} + +export const PullToRefreshIndicator = ({ children }: PullToRefreshIndicatorProps) => { + const { indicatorProps, getIndicatorRenderProps } = usePullToRefreshContext(); + return
{children(getIndicatorRenderProps())}
; +}; + +export interface PullToRefreshContentProps + extends PrimitiveProps, + React.HTMLAttributes {} + +export const PullToRefreshContent = forwardRef( + (props, ref) => { + const { contentProps } = usePullToRefreshContext(); + return ; + }, +); +PullToRefreshContent.displayName = "PullToRefreshContent"; diff --git a/packages/react-headless/pull-to-refresh/src/index.ts b/packages/react-headless/pull-to-refresh/src/index.ts new file mode 100644 index 000000000..10a26a69a --- /dev/null +++ b/packages/react-headless/pull-to-refresh/src/index.ts @@ -0,0 +1,15 @@ +export { + PullToRefreshContent, + PullToRefreshIndicator, + PullToRefreshRoot, + type PullToRefreshContentProps, + type PullToRefreshIndicatorProps, + type PullToRefreshRootProps, +} from "./PullToRefresh"; + +export { + usePullToRefreshContext, + type UsePullToRefreshContext, +} from "./usePullToRefreshContext"; + +export * as PullToRefresh from "./PullToRefresh.namespace"; diff --git a/packages/react-headless/pull-to-refresh/src/store.ts b/packages/react-headless/pull-to-refresh/src/store.ts new file mode 100644 index 000000000..1293709d2 --- /dev/null +++ b/packages/react-headless/pull-to-refresh/src/store.ts @@ -0,0 +1,26 @@ +export class Store { + private state: T; + private listeners: Set<() => void>; + + constructor(initialState: T) { + this.state = initialState; + this.listeners = new Set(); + } + + // Get the current state + getState() { + return this.state; + } + + // Update the state and notify subscribers + setState(newState: Partial) { + this.state = { ...this.state, ...newState }; + this.listeners.forEach((listener) => listener()); + } + + // Subscribe to changes + subscribe(listener: () => void) { + this.listeners.add(listener); + return () => this.listeners.delete(listener); + } +} diff --git a/packages/react-headless/pull-to-refresh/src/usePullToRefresh.ts b/packages/react-headless/pull-to-refresh/src/usePullToRefresh.ts new file mode 100644 index 000000000..03c7aeadd --- /dev/null +++ b/packages/react-headless/pull-to-refresh/src/usePullToRefresh.ts @@ -0,0 +1,206 @@ +import { dataAttr, elementProps } from "@seed-design/dom-utils"; +import { useRef, useState, useSyncExternalStore } from "react"; +import { Store } from "./store"; + +interface UsePullToRefreshStateProps { + /** + * The threshold value to trigger the refresh. (px) + * @default 44 + */ + threshold?: number; + + /** + * The multiplier to calculate displacement from the touch movement. + * @default 0.5 + */ + displacementMultiplier?: number; + + /** + * Callback when the pull-to-refresh has started to pull. + */ + onPtrPullStart?: (ctx: PullToRefreshContext) => void; + + /** + * Callback when the pull-to-refresh is moving during the pull. + */ + onPtrPullMove?: (ctx: PullToRefreshContext) => void; + + /** + * Callback when the pull-to-refresh is released. + * It does not matter if it is ready or not. If you want to handle the refresh, use `onPtrRefresh`. + */ + onPtrPullEnd?: (ctx: PullToRefreshContext) => void; + + /** + * Callback when the pull-to-refresh is pulled over the threshold. + */ + onPtrReady?: () => void; + + /** + * Callback when the pull-to-refresh is released after ready. + */ + onPtrRefresh?: () => Promise; +} + +interface PullToRefreshContext { + y0: number; + + displacement: number; + + displacementRatio: number; +} + +export type PullToRefreshState = "idle" | "pulling" | "ready" | "loading"; + +// We use useSyncExternalStore to only re-render indicator area on drag +const contextStore = new Store({ + y0: 0, + displacement: 0, + displacementRatio: 0, +}); + +const useContextStore = () => { + return useSyncExternalStore( + (listener) => contextStore.subscribe(listener), + () => contextStore.getState(), + ); +}; + +function usePullToRefreshState(props: UsePullToRefreshStateProps) { + const threshold = props.threshold ?? 44; + const displacementMultiplier = props.displacementMultiplier ?? 0.5; + + const [state, setState] = useState("idle"); + const rootRef = useRef(null); + + function setContext({ y0, displacement }: Omit) { + contextStore.setState({ + y0, + displacement, + displacementRatio: Math.min(displacement / threshold, 1), + }); + rootRef.current?.style.setProperty("--ptr-displacement", `${displacement}px`); + } + + const events = { + move: ({ y, scrollTop }: { y: number; scrollTop: number }) => { + if (state === "idle") { + if (scrollTop <= 0) { + setContext({ y0: y, displacement: 0 }); + props.onPtrPullStart?.(contextStore.getState()); + setState("pulling"); + } + } + if (state === "pulling" || state === "ready") { + const { y0 } = contextStore.getState(); + const displacement = (y - y0) * displacementMultiplier; + setContext({ y0, displacement }); + props.onPtrPullMove?.(contextStore.getState()); + + if (displacement > threshold) { + setState("ready"); + props.onPtrReady?.(); + } else { + setState("pulling"); + } + } + }, + end: () => { + if (state === "pulling" || state === "ready") { + props.onPtrPullEnd?.(contextStore.getState()); + } + if (state === "ready" && props.onPtrRefresh) { + setState("loading"); + setContext({ y0: 0, displacement: threshold }); + props.onPtrRefresh().then(() => { + setState("idle"); + setContext({ y0: 0, displacement: 0 }); + }); + } else { + setState("idle"); + setContext({ y0: 0, displacement: 0 }); + } + }, + }; + + return { + state, + threshold, + refs: { root: rootRef }, + events, + }; +} + +export interface UsePullToRefreshProps extends UsePullToRefreshStateProps {} + +export interface PullToRefreshIndicatorRenderProps { + minValue: number; + maxValue: number; + value: number | undefined; +} + +export type UsePullToRefreshReturn = ReturnType; + +export function usePullToRefresh(props: UsePullToRefreshProps) { + const { state, threshold, refs, events } = usePullToRefreshState(props); + + const isDragging = state === "pulling" || state === "ready"; + const stateProps = elementProps({ + "data-ptr-state": state, + "data-ptr-dragging": dataAttr(isDragging), + }); + + return { + state, + + refs, + stateProps, + rootProps: elementProps({ + ...stateProps, + onTouchMove: (e: React.TouchEvent) => { + events.move({ y: e.touches[0].clientY, scrollTop: e.currentTarget.scrollTop }); + }, + onTouchEnd: () => { + events.end(); + }, + style: { + overscrollBehaviorY: "none", + overflowY: "auto", + }, + }), + indicatorProps: elementProps({ + ...stateProps, + style: { + pointerEvents: "none", + touchAction: "none", + position: "relative", + top: 0, + left: 0, + width: "100%", + height: `var(--ptr-size, ${threshold}px)`, + marginBottom: `calc(var(--ptr-size, ${threshold}px) * -1)`, + display: "flex", + justifyContent: "center", + alignItems: "center", + }, + }), + getIndicatorRenderProps: () => { + const ctx = useContextStore(); + return { + minValue: 0, + maxValue: 100, + value: state === "loading" ? undefined : ctx.displacementRatio * 100, + style: { + opacity: ctx.displacementRatio, + }, + }; + }, + contentProps: elementProps({ + ...stateProps, + style: { + transform: state === "idle" ? undefined : "translateY(var(--ptr-displacement, 0))", + transition: isDragging ? "none" : "transform var(--ptr-transition-duration, 0.3s)", + }, + }), + }; +} diff --git a/packages/react-headless/pull-to-refresh/src/usePullToRefreshContext.tsx b/packages/react-headless/pull-to-refresh/src/usePullToRefreshContext.tsx new file mode 100644 index 000000000..09655d8e1 --- /dev/null +++ b/packages/react-headless/pull-to-refresh/src/usePullToRefreshContext.tsx @@ -0,0 +1,21 @@ +import { createContext, useContext } from "react"; +import type { UsePullToRefreshReturn } from "./usePullToRefresh"; + +export interface UsePullToRefreshContext extends UsePullToRefreshReturn {} + +const PullToRefreshContext = createContext(null); + +export const PullToRefreshProvider = PullToRefreshContext.Provider; + +export function usePullToRefreshContext({ + strict = true, +}: { strict?: T } = {}): T extends false + ? UsePullToRefreshContext | null + : UsePullToRefreshContext { + const context = useContext(PullToRefreshContext); + if (!context && strict) { + throw new Error("usePullToRefreshContext must be used within a PullToRefresh"); + } + + return context as UsePullToRefreshContext; +} diff --git a/packages/react-headless/pull-to-refresh/tsconfig.json b/packages/react-headless/pull-to-refresh/tsconfig.json new file mode 100644 index 000000000..59fbc0a08 --- /dev/null +++ b/packages/react-headless/pull-to-refresh/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "moduleDetection": "force", + "moduleResolution": "Bundler", + "verbatimModuleSyntax": true, + + "strict": true, + "skipLibCheck": true, + "noFallthroughCasesInSwitch": true, + "noPropertyAccessFromIndexSignature": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + + "rootDir": "src", + "outDir": "lib", + "jsx": "react-jsx" + } +} diff --git a/packages/react/package.json b/packages/react/package.json index fb262372a..385f96123 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -46,6 +46,7 @@ "@seed-design/react-popover": "0.0.0-alpha-20241030023710", "@seed-design/react-primitive": "0.0.0", "@seed-design/react-progress": "0.0.0", + "@seed-design/react-pull-to-refresh": "0.0.0", "@seed-design/react-radio-group": "0.0.0-alpha-20241030023710", "@seed-design/react-segmented-control": "0.0.0", "@seed-design/react-snackbar": "0.0.0", diff --git a/packages/react/src/primitive.ts b/packages/react/src/primitive.ts index e926ff40f..5e4ca3f0d 100644 --- a/packages/react/src/primitive.ts +++ b/packages/react/src/primitive.ts @@ -1,2 +1,3 @@ export * from "@seed-design/react-checkbox"; export * from "@seed-design/react-radio-group"; +export * from "@seed-design/react-pull-to-refresh"; diff --git a/packages/recipe/lib/appBar.d.ts b/packages/recipe/lib/appBar.d.ts new file mode 100644 index 000000000..1d8854011 --- /dev/null +++ b/packages/recipe/lib/appBar.d.ts @@ -0,0 +1,36 @@ +declare interface AppBarVariant { + /** + * @default cupertino + */ + theme: "cupertino" | "android"; +/** + * @default slideFromRightIOS + */ + transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid"; +/** + * @default layer + */ + tone: "layer" | "transparent"; +/** + * @default false + */ + divider: boolean; +} + +declare type AppBarVariantMap = { + [key in keyof AppBarVariant]: Array; +}; + +export declare type AppBarVariantProps = Partial; + +export declare type AppBarSlotName = "root" | "left" | "right" | "iconButton" | "icon"; + +export declare const appBarVariantMap: AppBarVariantMap; + +export declare const appBar: (( + props?: AppBarVariantProps, +) => Record) & { + splitVariantProps: ( + props: T, + ) => [AppBarVariantProps, Omit]; +} \ No newline at end of file diff --git a/packages/recipe/lib/appBar.mjs b/packages/recipe/lib/appBar.mjs new file mode 100644 index 000000000..7a63fbc44 --- /dev/null +++ b/packages/recipe/lib/appBar.mjs @@ -0,0 +1,68 @@ +import { createClassName } from "./className.mjs"; +import { mergeVariants } from "./mergeVariants.mjs"; +import { splitVariantProps } from "./splitVariantProps.mjs"; + +const appBarSlotNames = [ + [ + "root", + "appBar__root" + ], + [ + "left", + "appBar__left" + ], + [ + "right", + "appBar__right" + ], + [ + "iconButton", + "appBar__iconButton" + ], + [ + "icon", + "appBar__icon" + ] +]; + +const defaultVariant = { + "theme": "cupertino", + "transitionStyle": "slideFromRightIOS", + "tone": "layer", + "divider": false +}; + +const compoundVariants = []; + +export const appBarVariantMap = { + "theme": [ + "cupertino", + "android" + ], + "transitionStyle": [ + "slideFromRightIOS", + "fadeFromBottomAndroid" + ], + "tone": [ + "layer", + "transparent" + ], + "divider": [ + true + ] +}; + +export const appBarVariantKeys = Object.keys(appBarVariantMap); + +export function appBar(props) { + return Object.fromEntries( + appBarSlotNames.map(([slot, className]) => { + return [ + slot, + createClassName(className, mergeVariants(defaultVariant, props), compoundVariants), + ]; + }), + ); +} + +Object.assign(appBar, { splitVariantProps: (props) => splitVariantProps(props, appBarVariantMap) }); \ No newline at end of file diff --git a/packages/recipe/lib/appBarMain.d.ts b/packages/recipe/lib/appBarMain.d.ts new file mode 100644 index 000000000..77f6d3ca3 --- /dev/null +++ b/packages/recipe/lib/appBarMain.d.ts @@ -0,0 +1,36 @@ +declare interface AppBarMainVariant { + /** + * @default titleOnly + */ + layout: "titleOnly" | "withSubtitle"; +/** + * @default cupertino + */ + theme: "cupertino" | "android"; +/** + * @default slideFromRightIOS + */ + transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid"; +/** + * @default layer + */ + tone: "layer" | "transparent"; +} + +declare type AppBarMainVariantMap = { + [key in keyof AppBarMainVariant]: Array; +}; + +export declare type AppBarMainVariantProps = Partial; + +export declare type AppBarMainSlotName = "root" | "title" | "subtitle"; + +export declare const appBarMainVariantMap: AppBarMainVariantMap; + +export declare const appBarMain: (( + props?: AppBarMainVariantProps, +) => Record) & { + splitVariantProps: ( + props: T, + ) => [AppBarMainVariantProps, Omit]; +} \ No newline at end of file diff --git a/packages/recipe/lib/appBarMain.mjs b/packages/recipe/lib/appBarMain.mjs new file mode 100644 index 000000000..bc82a6393 --- /dev/null +++ b/packages/recipe/lib/appBarMain.mjs @@ -0,0 +1,61 @@ +import { createClassName } from "./className.mjs"; +import { mergeVariants } from "./mergeVariants.mjs"; +import { splitVariantProps } from "./splitVariantProps.mjs"; + +const appBarMainSlotNames = [ + [ + "root", + "appBarMain__root" + ], + [ + "title", + "appBarMain__title" + ], + [ + "subtitle", + "appBarMain__subtitle" + ] +]; + +const defaultVariant = { + "layout": "titleOnly", + "theme": "cupertino", + "transitionStyle": "slideFromRightIOS", + "tone": "layer" +}; + +const compoundVariants = []; + +export const appBarMainVariantMap = { + "layout": [ + "titleOnly", + "withSubtitle" + ], + "theme": [ + "cupertino", + "android" + ], + "transitionStyle": [ + "slideFromRightIOS", + "fadeFromBottomAndroid" + ], + "tone": [ + "layer", + "transparent" + ] +}; + +export const appBarMainVariantKeys = Object.keys(appBarMainVariantMap); + +export function appBarMain(props) { + return Object.fromEntries( + appBarMainSlotNames.map(([slot, className]) => { + return [ + slot, + createClassName(className, mergeVariants(defaultVariant, props), compoundVariants), + ]; + }), + ); +} + +Object.assign(appBarMain, { splitVariantProps: (props) => splitVariantProps(props, appBarMainVariantMap) }); \ No newline at end of file diff --git a/packages/recipe/lib/appScreen.d.ts b/packages/recipe/lib/appScreen.d.ts new file mode 100644 index 000000000..b1425d8f6 --- /dev/null +++ b/packages/recipe/lib/appScreen.d.ts @@ -0,0 +1,36 @@ +declare interface AppScreenVariant { + /** + * @default cupertino + */ + theme: "cupertino" | "android"; +/** + * @default slideFromRightIOS + */ + transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid"; +/** + * @default appBar + */ + layerOffsetTop: "none" | "safeArea" | "appBar"; +/** + * @default none + */ + layerOffsetBottom: "none" | "safeArea"; +} + +declare type AppScreenVariantMap = { + [key in keyof AppScreenVariant]: Array; +}; + +export declare type AppScreenVariantProps = Partial; + +export declare type AppScreenSlotName = "root" | "layer" | "dim" | "edge"; + +export declare const appScreenVariantMap: AppScreenVariantMap; + +export declare const appScreen: (( + props?: AppScreenVariantProps, +) => Record) & { + splitVariantProps: ( + props: T, + ) => [AppScreenVariantProps, Omit]; +} \ No newline at end of file diff --git a/packages/recipe/lib/appScreen.mjs b/packages/recipe/lib/appScreen.mjs new file mode 100644 index 000000000..40d0cf015 --- /dev/null +++ b/packages/recipe/lib/appScreen.mjs @@ -0,0 +1,66 @@ +import { createClassName } from "./className.mjs"; +import { mergeVariants } from "./mergeVariants.mjs"; +import { splitVariantProps } from "./splitVariantProps.mjs"; + +const appScreenSlotNames = [ + [ + "root", + "appScreen__root" + ], + [ + "layer", + "appScreen__layer" + ], + [ + "dim", + "appScreen__dim" + ], + [ + "edge", + "appScreen__edge" + ] +]; + +const defaultVariant = { + "theme": "cupertino", + "transitionStyle": "slideFromRightIOS", + "layerOffsetTop": "appBar", + "layerOffsetBottom": "none" +}; + +const compoundVariants = []; + +export const appScreenVariantMap = { + "theme": [ + "cupertino", + "android" + ], + "transitionStyle": [ + "slideFromRightIOS", + "fadeFromBottomAndroid" + ], + "layerOffsetTop": [ + "none", + "safeArea", + "appBar" + ], + "layerOffsetBottom": [ + "none", + "safeArea" + ] +}; + +export const appScreenVariantKeys = Object.keys(appScreenVariantMap); + +export function appScreen(props) { + return Object.fromEntries( + appScreenSlotNames.map(([slot, className]) => { + return [ + slot, + createClassName(className, mergeVariants(defaultVariant, props), compoundVariants), + ]; + }), + ); +} + +Object.assign(appScreen, { splitVariantProps: (props) => splitVariantProps(props, appScreenVariantMap) }); \ No newline at end of file diff --git a/packages/recipe/lib/screen.d.ts b/packages/recipe/lib/screen.d.ts deleted file mode 100644 index abde57f76..000000000 --- a/packages/recipe/lib/screen.d.ts +++ /dev/null @@ -1,28 +0,0 @@ -declare interface ScreenVariant { - /** - * @default cupertino - */ - theme: "cupertino" | "android"; -/** - * @default false - */ - hasAppBar: boolean; -} - -declare type ScreenVariantMap = { - [key in keyof ScreenVariant]: Array; -}; - -export declare type ScreenVariantProps = Partial; - -export declare type ScreenSlotName = "root" | "layer" | "dim" | "edge"; - -export declare const screenVariantMap: ScreenVariantMap; - -export declare const screen: (( - props?: ScreenVariantProps, -) => Record) & { - splitVariantProps: ( - props: T, - ) => [ScreenVariantProps, Omit]; -} \ No newline at end of file diff --git a/packages/recipe/lib/screen.mjs b/packages/recipe/lib/screen.mjs deleted file mode 100644 index d36c5443a..000000000 --- a/packages/recipe/lib/screen.mjs +++ /dev/null @@ -1,54 +0,0 @@ -import { createClassName } from "./className.mjs"; -import { mergeVariants } from "./mergeVariants.mjs"; -import { splitVariantProps } from "./splitVariantProps.mjs"; - -const screenSlotNames = [ - [ - "root", - "screen__root" - ], - [ - "layer", - "screen__layer" - ], - [ - "dim", - "screen__dim" - ], - [ - "edge", - "screen__edge" - ] -]; - -const defaultVariant = { - "theme": "cupertino", - "hasAppBar": false -}; - -const compoundVariants = []; - -export const screenVariantMap = { - "theme": [ - "cupertino", - "android" - ], - "hasAppBar": [ - true - ] -}; - -export const screenVariantKeys = Object.keys(screenVariantMap); - -export function screen(props) { - return Object.fromEntries( - screenSlotNames.map(([slot, className]) => { - return [ - slot, - createClassName(className, mergeVariants(defaultVariant, props), compoundVariants), - ]; - }), - ); -} - -Object.assign(screen, { splitVariantProps: (props) => splitVariantProps(props, screenVariantMap) }); \ No newline at end of file diff --git a/packages/recipe/lib/topNavigation.d.ts b/packages/recipe/lib/topNavigation.d.ts deleted file mode 100644 index 17589a70e..000000000 --- a/packages/recipe/lib/topNavigation.d.ts +++ /dev/null @@ -1,32 +0,0 @@ -declare interface TopNavigationVariant { - /** - * @default cupertino - */ - theme: "cupertino" | "android"; -/** - * @default layer - */ - tone: "layer" | "transparent"; -/** - * @default false - */ - border: boolean; -} - -declare type TopNavigationVariantMap = { - [key in keyof TopNavigationVariant]: Array; -}; - -export declare type TopNavigationVariantProps = Partial; - -export declare type TopNavigationSlotName = "root" | "safeArea" | "container" | "left" | "right" | "title" | "titleMain" | "titleEdge" | "titleText" | "iconButton" | "icon"; - -export declare const topNavigationVariantMap: TopNavigationVariantMap; - -export declare const topNavigation: (( - props?: TopNavigationVariantProps, -) => Record) & { - splitVariantProps: ( - props: T, - ) => [TopNavigationVariantProps, Omit]; -} \ No newline at end of file diff --git a/packages/recipe/lib/topNavigation.mjs b/packages/recipe/lib/topNavigation.mjs deleted file mode 100644 index 812598bff..000000000 --- a/packages/recipe/lib/topNavigation.mjs +++ /dev/null @@ -1,87 +0,0 @@ -import { createClassName } from "./className.mjs"; -import { mergeVariants } from "./mergeVariants.mjs"; -import { splitVariantProps } from "./splitVariantProps.mjs"; - -const topNavigationSlotNames = [ - [ - "root", - "topNavigation__root" - ], - [ - "safeArea", - "topNavigation__safeArea" - ], - [ - "container", - "topNavigation__container" - ], - [ - "left", - "topNavigation__left" - ], - [ - "right", - "topNavigation__right" - ], - [ - "title", - "topNavigation__title" - ], - [ - "titleMain", - "topNavigation__titleMain" - ], - [ - "titleEdge", - "topNavigation__titleEdge" - ], - [ - "titleText", - "topNavigation__titleText" - ], - [ - "iconButton", - "topNavigation__iconButton" - ], - [ - "icon", - "topNavigation__icon" - ] -]; - -const defaultVariant = { - "theme": "cupertino", - "tone": "layer", - "border": false -}; - -const compoundVariants = []; - -export const topNavigationVariantMap = { - "theme": [ - "cupertino", - "android" - ], - "tone": [ - "layer", - "transparent" - ], - "border": [ - true - ] -}; - -export const topNavigationVariantKeys = Object.keys(topNavigationVariantMap); - -export function topNavigation(props) { - return Object.fromEntries( - topNavigationSlotNames.map(([slot, className]) => { - return [ - slot, - createClassName(className, mergeVariants(defaultVariant, props), compoundVariants), - ]; - }), - ); -} - -Object.assign(topNavigation, { splitVariantProps: (props) => splitVariantProps(props, topNavigationVariantMap) }); \ No newline at end of file diff --git a/packages/rootage/components/schema.json b/packages/rootage/components/schema.json index b977c26a6..133f2ca45 100644 --- a/packages/rootage/components/schema.json +++ b/packages/rootage/components/schema.json @@ -377,6 +377,8 @@ { "const": "$font-size.s8", "title": "$font-size.s8", "description": "default: 1.375rem", "markdownDescription": "- default: `1.375rem`" }, { "const": "$font-size.s9", "title": "$font-size.s9", "description": "default: 1.5rem", "markdownDescription": "- default: `1.5rem`" }, { "const": "$font-size.s10", "title": "$font-size.s10", "description": "default: 1.625rem", "markdownDescription": "- default: `1.625rem`" }, + { "const": "$font-size.s2-static", "title": "$font-size.s2-static", "description": "default: 12px", "markdownDescription": "- default: `12px`" }, + { "const": "$font-size.s5-static", "title": "$font-size.s5-static", "description": "default: 16px", "markdownDescription": "- default: `16px`" }, { "const": "$font-size.s6-static", "title": "$font-size.s6-static", "description": "default: 18px", "markdownDescription": "- default: `18px`" }, { "const": "$font-weight.regular", "title": "$font-weight.regular", "description": "default: 400", "markdownDescription": "- default: `400`" }, { "const": "$font-weight.medium", "title": "$font-weight.medium", "description": "default: 500", "markdownDescription": "- default: `500`" }, diff --git a/packages/rootage/components/top-navigation.yaml b/packages/rootage/components/top-navigation.yaml index 868b7fc3b..d8266d79e 100644 --- a/packages/rootage/components/top-navigation.yaml +++ b/packages/rootage/components/top-navigation.yaml @@ -10,9 +10,6 @@ data: root: minHeight: 44px paddingX: $dimension.s4 - title: - fontSize: $font-size.s6-static - fontWeight: $font-weight.bold icon: size: 24px targetSize: 40px @@ -21,9 +18,6 @@ data: root: minHeight: 56px paddingX: $dimension.s4 - title: - fontSize: $font-size.s6-static - fontWeight: $font-weight.bold icon: size: 24px targetSize: 40px @@ -33,6 +27,8 @@ data: color: $color.bg.layer-default title: color: $color.fg.neutral + subtitle: + color: $color.fg.neutral-muted icon: color: $color.fg.neutral tone=transparent: @@ -41,6 +37,8 @@ data: color: "#00000000" title: color: $color.palette.static-white + subtitle: + color: $color.palette.static-white icon: color: $color.palette.static-white divider=true: @@ -48,3 +46,16 @@ data: root: strokeColor: $color.stroke.neutral-muted strokeWidth: 1px + titleLayout=titleOnly: + enabled: + title: + fontSize: $font-size.s6-static + fontWeight: $font-weight.bold + titleLayout=withSubtitle: + enabled: + title: + fontSize: $font-size.s5-static + fontWeight: $font-weight.bold + subtitle: + fontSize: $font-size.s2-static + fontWeight: $font-weight.regular diff --git a/packages/rootage/font-size.yaml b/packages/rootage/font-size.yaml index 96039da0a..a930a99a1 100644 --- a/packages/rootage/font-size.yaml +++ b/packages/rootage/font-size.yaml @@ -35,6 +35,12 @@ data: $font-size.s10: values: default: 1.625rem # 26px ÷ 16 + $font-size.s2-static: + values: + default: 12px + $font-size.s5-static: + values: + default: 16px $font-size.s6-static: values: default: 18px diff --git a/packages/stackflow/package.json b/packages/stackflow/package.json index afc72e41d..94d58db9d 100644 --- a/packages/stackflow/package.json +++ b/packages/stackflow/package.json @@ -28,7 +28,9 @@ "dependencies": { "@radix-ui/react-compose-refs": "^1.1.1", "@radix-ui/react-slot": "^1.1.1", + "@radix-ui/react-use-callback-ref": "^1.1.0", "@seed-design/dom-utils": "0.0.0-alpha-20241030023710", + "@seed-design/react-primitive": "0.0.0", "clsx": "^2.1.1" }, "devDependencies": { diff --git a/packages/stackflow/src/AppBar.tsx b/packages/stackflow/src/AppBar.tsx deleted file mode 100644 index a9bc9f320..000000000 --- a/packages/stackflow/src/AppBar.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import { composeRefs } from "@radix-ui/react-compose-refs"; -import { Slot } from "@radix-ui/react-slot"; -import { type TopNavigationVariantProps, topNavigation } from "@seed-design/recipe/topNavigation"; -import { useAppBarTitleMaxWidth } from "@stackflow/react-ui-core"; -import clsx from "clsx"; -import { createContext, forwardRef, useContext, useMemo, useRef } from "react"; -import { useAppScreenContext } from "./primitive/useAppScreen"; - -const StyleContext = createContext | null>(null); - -function useStyleContext() { - const context = useContext(StyleContext); - if (!context) { - throw new Error("useStyleContext must be used within a AppBar"); - } - - return context; -} - -export interface AppBarIconButtonProps extends React.ButtonHTMLAttributes {} - -export const AppBarIconButton = forwardRef( - ({ children, className, ...props }, ref) => { - const { stateProps } = useAppScreenContext(); - const classNames = useStyleContext(); - - return ( - - ); - }, -); -AppBarIconButton.displayName = "IconButton"; - -export interface AppBarLeftProps extends React.HTMLAttributes {} - -export const AppBarLeft = forwardRef( - ({ children, className, ...otherProps }, ref) => { - const classNames = useStyleContext(); - const { stateProps } = useAppScreenContext(); - - return ( -
- {children} -
- ); - }, -); -AppBarLeft.displayName = "AppBarLeft"; - -export interface AppBarRightProps extends React.HTMLAttributes {} - -export const AppBarRight = forwardRef( - ({ children, className, ...otherProps }, ref) => { - const classNames = useStyleContext(); - const { stateProps } = useAppScreenContext(); - - return ( -
- {children} -
- ); - }, -); -AppBarRight.displayName = "AppBarRight"; - -export interface AppBarTitleProps extends React.HTMLAttributes {} - -export const AppBarTitle = forwardRef( - ({ children, className, ...otherProps }, ref) => { - const { theme, stateProps, appBarEdgeProps, refs } = useAppScreenContext(); - const innerRef = useRef(null); - const { maxWidth } = useAppBarTitleMaxWidth({ - outerRef: refs.appBar, - innerRef: innerRef, - enable: theme === "cupertino", - }); - const classNames = useStyleContext(); - - return ( -
-
- {typeof children === "string" ? ( -
- {children} -
- ) : ( - - {children} - - )} -
-
- ); - }, -); -AppBarTitle.displayName = "AppBarTitle"; - -export interface AppBarProps - extends React.HTMLAttributes, - Omit {} - -export const AppBarRoot = forwardRef( - ({ border = true, tone = "layer", children, ...otherProps }, ref) => { - const { theme, refs, stateProps } = useAppScreenContext(); - - const classNames = useMemo(() => topNavigation({ theme, border, tone }), [theme, border, tone]); - - return ( -
-
-
- {children} -
-
- ); - }, -); -AppBarRoot.displayName = "AppBarRoot"; diff --git a/packages/stackflow/src/AppScreen.tsx b/packages/stackflow/src/AppScreen.tsx deleted file mode 100644 index 84a821224..000000000 --- a/packages/stackflow/src/AppScreen.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { composeRefs } from "@radix-ui/react-compose-refs"; -import { type ScreenVariantProps, screen } from "@seed-design/recipe/screen"; -import { createContext, forwardRef, useContext, useMemo } from "react"; -import { AppScreenProvider, useAppScreen, useAppScreenContext } from "./primitive/useAppScreen"; - -const StyleContext = createContext | null>(null); - -function useStyleContext() { - const context = useContext(StyleContext); - if (!context) { - throw new Error("useStyleContext must be used within a AppScreen"); - } - - return context; -} - -export interface AppScreenDimProps extends React.HTMLAttributes {} - -export const AppScreenDim = forwardRef( - ({ className, ...otherProps }, ref) => { - const { refs, dimProps } = useAppScreenContext(); - const classNames = useStyleContext(); - - return ( -
- ); - }, -); -AppScreenDim.displayName = "AppScreenDim"; - -export interface AppScreenEdgeProps extends React.HTMLAttributes {} - -export const AppScreenEdge = forwardRef( - ({ className, ...otherProps }, ref) => { - const { refs, edgeProps } = useAppScreenContext(); - const classNames = useStyleContext(); - - return ( -
- ); - }, -); -AppScreenEdge.displayName = "AppScreenEdge"; - -export interface AppScreenLayerProps extends React.HTMLAttributes {} - -export const AppScreenLayer = forwardRef( - ({ className, ...otherProps }, ref) => { - const { refs, layerProps } = useAppScreenContext(); - const classNames = useStyleContext(); - - return ( -
- ); - }, -); -AppScreenLayer.displayName = "AppScreenLayer"; - -export interface AppScreenProps - extends React.HTMLAttributes, - Omit { - preventSwipeBack?: boolean; - appBar?: React.ReactNode; -} - -export const AppScreenRoot = forwardRef( - ({ preventSwipeBack, appBar, theme, children }, ref) => { - const hasAppBar = !!appBar; - const api = useAppScreen({ - theme, - preventSwipeBack, - activityEnterStyle: undefined, // TODO: Implement activityEnterStyle - modalPresentationStyle: undefined, // TODO: Implement modalPresentationStyle - hasAppBar, - }); - const { refs, rootProps } = api; - const classNames = useMemo(() => screen({ theme, hasAppBar }), [theme, hasAppBar]); - - return ( -
- - - {appBar} - {children} - - -
- ); - }, -); -AppScreenRoot.displayName = "AppScreenRoot"; diff --git a/packages/stackflow/src/AppBar.namespace.ts b/packages/stackflow/src/components/AppBar/AppBar.namespace.ts similarity index 74% rename from packages/stackflow/src/AppBar.namespace.ts rename to packages/stackflow/src/components/AppBar/AppBar.namespace.ts index 0f233ca96..bb27e6822 100644 --- a/packages/stackflow/src/AppBar.namespace.ts +++ b/packages/stackflow/src/components/AppBar/AppBar.namespace.ts @@ -1,15 +1,19 @@ export { AppBarIconButton as IconButton, AppBarLeft as Left, + AppBarMain as Main, AppBarRight as Right, AppBarRoot as Root, + AppBarSubtitle as Subtitle, AppBarTitle as Title, } from "./AppBar"; export type { AppBarIconButtonProps as IconButtonProps, AppBarLeftProps as LeftProps, + AppBarMainProps as MainProps, AppBarRightProps as RightProps, AppBarProps as RootProps, + AppBarSubtitleProps as SubtitleProps, AppBarTitleProps as TitleProps, } from "./AppBar"; diff --git a/packages/stackflow/src/components/AppBar/AppBar.tsx b/packages/stackflow/src/components/AppBar/AppBar.tsx new file mode 100644 index 000000000..70c56ef4b --- /dev/null +++ b/packages/stackflow/src/components/AppBar/AppBar.tsx @@ -0,0 +1,109 @@ +import { Slot } from "@radix-ui/react-slot"; +import { mergeProps } from "@seed-design/dom-utils"; +import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive"; +import { type AppBarVariantProps, appBar } from "@seed-design/recipe/appBar"; +import clsx from "clsx"; +import { forwardRef } from "react"; +import { AppBar as AppBarPrimitive } from "../../primitive"; +import { useAppBarContext } from "../../primitive/AppBar/useAppBarContext"; +import { createStyleContext } from "../../utils/createStyleContext"; +import { appBarMain, type AppBarMainVariantProps } from "@seed-design/recipe/appBarMain"; + +const { PropsProvider, ClassNamesProvider, useProps, withContext, useClassNames } = + createStyleContext(appBar); +const { + PropsProvider: MainPropsProvider, + withProvider: withMainProvider, + withContext: withMainContext, +} = createStyleContext(appBarMain); + +export const AppBarPropsProvider = PropsProvider; + +export interface AppBarProps extends AppBarVariantProps, AppBarPrimitive.RootProps {} + +export const AppBarRoot = forwardRef((props, ref) => { + const contextProps = useProps(); + const [variantProps, otherProps] = appBar.splitVariantProps({ ...contextProps, ...props }); + + const classNames = appBar(variantProps); + + return ( + + + + + + ); +}); +AppBarRoot.displayName = "AppBarRoot"; + +export interface AppBarLeftProps extends AppBarPrimitive.LeftProps {} + +export const AppBarLeft = withContext( + AppBarPrimitive.Left, + "left", +); + +export interface AppBarRightProps extends AppBarPrimitive.RightProps {} + +export const AppBarRight = withContext( + AppBarPrimitive.Right, + "right", +); + +export interface AppBarMainProps extends AppBarMainVariantProps, AppBarPrimitive.MainProps {} + +export const AppBarMain = withMainProvider( + AppBarPrimitive.Main, + "root", +); + +export interface AppBarTitleProps extends PrimitiveProps, React.HTMLAttributes {} + +export const AppBarTitle = withMainContext( + Primitive.span, + "title", +); + +export interface AppBarSubtitleProps + extends PrimitiveProps, + React.HTMLAttributes {} + +export const AppBarSubtitle = withMainContext( + Primitive.span, + "subtitle", +); + +export interface AppBarIconButtonProps + extends PrimitiveProps, + React.ButtonHTMLAttributes {} + +export const AppBarIconButton = forwardRef( + ({ children, className, ...otherProps }, ref) => { + const { stateProps } = useAppBarContext(); + const classNames = useClassNames(); + + return ( + + + {children} + + + ); + }, +); +AppBarIconButton.displayName = "IconButton"; diff --git a/packages/stackflow/src/components/AppBar/index.tsx b/packages/stackflow/src/components/AppBar/index.tsx new file mode 100644 index 000000000..2c9a2cedb --- /dev/null +++ b/packages/stackflow/src/components/AppBar/index.tsx @@ -0,0 +1,21 @@ +export { + AppBarIconButton, + AppBarLeft, + AppBarMain, + AppBarRight, + AppBarRoot, + AppBarSubtitle, + AppBarTitle, +} from "./AppBar"; + +export type { + AppBarIconButtonProps, + AppBarLeftProps, + AppBarMainProps, + AppBarProps, + AppBarRightProps, + AppBarSubtitleProps, + AppBarTitleProps, +} from "./AppBar"; + +export * as AppBar from "./AppBar.namespace"; diff --git a/packages/stackflow/src/AppScreen.namespace.ts b/packages/stackflow/src/components/AppScreen/AppScreen.namespace.ts similarity index 88% rename from packages/stackflow/src/AppScreen.namespace.ts rename to packages/stackflow/src/components/AppScreen/AppScreen.namespace.ts index 22c30dd54..0243b1a83 100644 --- a/packages/stackflow/src/AppScreen.namespace.ts +++ b/packages/stackflow/src/components/AppScreen/AppScreen.namespace.ts @@ -9,5 +9,5 @@ export type { AppScreenDimProps as DimProps, AppScreenEdgeProps as EdgeProps, AppScreenLayerProps as LayerProps, - AppScreenProps as RootProps, + AppScreenRootProps as RootProps, } from "./AppScreen"; diff --git a/packages/stackflow/src/components/AppScreen/AppScreen.tsx b/packages/stackflow/src/components/AppScreen/AppScreen.tsx new file mode 100644 index 000000000..40225b02e --- /dev/null +++ b/packages/stackflow/src/components/AppScreen/AppScreen.tsx @@ -0,0 +1,65 @@ +import { appScreen, type AppScreenVariantProps } from "@seed-design/recipe/appScreen"; +import { forwardRef, useMemo } from "react"; +import { AppScreen as AppScreenPrimitive } from "../../primitive"; +import { createStyleContext } from "../../utils/createStyleContext"; +import { AppBarPropsProvider } from "../AppBar/AppBar"; +import { mergeProps } from "@seed-design/dom-utils"; + +const { ClassNamesProvider, PropsProvider, withContext, useProps } = createStyleContext(appScreen); + +export const AppScreenPropsProvider = PropsProvider; + +export interface AppScreenRootProps extends AppScreenVariantProps, AppScreenPrimitive.RootProps {} + +export const AppScreenRoot = forwardRef((props, ref) => { + const contextProps = useProps(); + const [variantProps, otherProps] = appScreen.splitVariantProps({ ...contextProps, ...props }); + + // TODO: we have to implement conditional default in recipe; this is temporal workaround. + const transitionStyle = + variantProps.transitionStyle ?? + (variantProps.theme === "cupertino" ? "slideFromRightIOS" : "fadeFromBottomAndroid"); + + const classNames = appScreen({ + ...variantProps, + transitionStyle, + }); + + return ( + + ({ theme: variantProps.theme, transitionStyle }), + [variantProps.theme, transitionStyle], + )} + > + + + + ); +}); +AppScreenRoot.displayName = "AppScreenRoot"; + +export interface AppScreenDimProps extends AppScreenPrimitive.DimProps {} + +export const AppScreenDim = withContext( + AppScreenPrimitive.Dim, + "dim", +); + +export interface AppScreenEdgeProps extends AppScreenPrimitive.EdgeProps {} + +export const AppScreenEdge = withContext( + AppScreenPrimitive.Edge, + "edge", +); + +export interface AppScreenLayerProps extends AppScreenPrimitive.LayerProps {} + +export const AppScreenLayer = withContext( + AppScreenPrimitive.Layer, + "layer", +); diff --git a/packages/stackflow/src/components/AppScreen/index.tsx b/packages/stackflow/src/components/AppScreen/index.tsx new file mode 100644 index 000000000..e2d85dd65 --- /dev/null +++ b/packages/stackflow/src/components/AppScreen/index.tsx @@ -0,0 +1,15 @@ +export { + AppScreenDim, + AppScreenEdge, + AppScreenLayer, + AppScreenRoot, +} from "./AppScreen"; + +export type { + AppScreenDimProps, + AppScreenEdgeProps, + AppScreenLayerProps, + AppScreenRootProps, +} from "./AppScreen"; + +export * as AppScreen from "./AppScreen.namespace"; diff --git a/packages/stackflow/src/components/index.tsx b/packages/stackflow/src/components/index.tsx new file mode 100644 index 000000000..388916351 --- /dev/null +++ b/packages/stackflow/src/components/index.tsx @@ -0,0 +1,2 @@ +export * from "./AppBar"; +export * from "./AppScreen"; diff --git a/packages/stackflow/src/index.ts b/packages/stackflow/src/index.ts index b40a09d6d..9dd8afcbb 100644 --- a/packages/stackflow/src/index.ts +++ b/packages/stackflow/src/index.ts @@ -1,32 +1,4 @@ -export { - AppBarIconButton, - AppBarLeft, - AppBarRight, - AppBarRoot, - AppBarTitle, -} from "./AppBar"; +export { seedPlugin, type SeedPluginOptions } from "./plugin"; -export type { - AppBarIconButtonProps, - AppBarLeftProps, - AppBarProps, - AppBarRightProps, - AppBarTitleProps, -} from "./AppBar"; - -export { - AppScreenDim, - AppScreenEdge, - AppScreenLayer, - AppScreenRoot, -} from "./AppScreen"; - -export type { - AppScreenDimProps, - AppScreenEdgeProps, - AppScreenLayerProps, - AppScreenProps, -} from "./AppScreen"; - -export * as AppBar from "./AppBar.namespace"; -export * as AppScreen from "./AppScreen.namespace"; \ No newline at end of file +export * from "./components"; +export * as Primitive from "./primitive"; diff --git a/packages/stackflow/src/plugin.tsx b/packages/stackflow/src/plugin.tsx new file mode 100644 index 000000000..05b434bfb --- /dev/null +++ b/packages/stackflow/src/plugin.tsx @@ -0,0 +1,20 @@ +import type { StackflowReactPlugin } from "@stackflow/react"; +import { AppScreenPropsProvider } from "./components/AppScreen/AppScreen"; +import { GlobalInteraction } from "./primitive"; + +export interface SeedPluginOptions { + theme: "android" | "cupertino"; +} + +export const seedPlugin = + (options: SeedPluginOptions): StackflowReactPlugin => + () => ({ + key: "seed-design", + wrapStack({ stack }) { + return ( + + {stack.render()} + + ); + }, + }); diff --git a/packages/stackflow/src/primitive/AppBar/AppBar.namespace.ts b/packages/stackflow/src/primitive/AppBar/AppBar.namespace.ts new file mode 100644 index 000000000..445c57d93 --- /dev/null +++ b/packages/stackflow/src/primitive/AppBar/AppBar.namespace.ts @@ -0,0 +1,10 @@ +export { + AppBarRoot as Root, + AppBarMain as Main, + AppBarLeft as Left, + AppBarRight as Right, + type AppBarRootProps as RootProps, + type AppBarMainProps as MainProps, + type AppBarLeftProps as LeftProps, + type AppBarRightProps as RightProps, +} from "./AppBar"; diff --git a/packages/stackflow/src/primitive/AppBar/AppBar.tsx b/packages/stackflow/src/primitive/AppBar/AppBar.tsx new file mode 100644 index 000000000..5169d1505 --- /dev/null +++ b/packages/stackflow/src/primitive/AppBar/AppBar.tsx @@ -0,0 +1,52 @@ +import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive"; +import { forwardRef } from "react"; +import { useAppBar, type UseAppBarProps } from "./useAppBar"; +import { AppBarProvider, useAppBarContext } from "./useAppBarContext"; +import { mergeProps } from "@seed-design/dom-utils"; +import { composeRefs } from "@radix-ui/react-compose-refs"; + +export interface AppBarRootProps + extends PrimitiveProps, + UseAppBarProps, + React.HTMLAttributes {} + +export const AppBarRoot = forwardRef((props, ref) => { + const { ...otherProps } = props; + const api = useAppBar({}); + + return ( + + + + ); +}); +AppBarRoot.displayName = "AppBarRoot"; + +export interface AppBarLeftProps extends PrimitiveProps, React.HTMLAttributes {} + +export const AppBarLeft = forwardRef((props, ref) => { + const { refs, stateProps } = useAppBarContext(); + + return ; +}); +AppBarLeft.displayName = "AppBarLeft"; + +export interface AppBarRightProps extends PrimitiveProps, React.HTMLAttributes {} + +export const AppBarRight = forwardRef((props, ref) => { + const { refs, stateProps } = useAppBarContext(); + + return ; +}); +AppBarRight.displayName = "AppBarRight"; + +export interface AppBarMainProps extends PrimitiveProps, React.HTMLAttributes {} + +export const AppBarMain = forwardRef((props, ref) => { + const { stateProps } = useAppBarContext(); + + return ; +}); diff --git a/packages/stackflow/src/primitive/AppBar/index.ts b/packages/stackflow/src/primitive/AppBar/index.ts new file mode 100644 index 000000000..699efddc5 --- /dev/null +++ b/packages/stackflow/src/primitive/AppBar/index.ts @@ -0,0 +1,12 @@ +export { + AppBarLeft, + AppBarRight, + AppBarRoot, + AppBarMain, + type AppBarLeftProps, + type AppBarRightProps, + type AppBarRootProps, + type AppBarMainProps, +} from "./AppBar"; + +export * as AppBar from "./AppBar.namespace"; diff --git a/packages/stackflow/src/primitive/AppBar/useAppBar.tsx b/packages/stackflow/src/primitive/AppBar/useAppBar.tsx new file mode 100644 index 000000000..995bd6ba9 --- /dev/null +++ b/packages/stackflow/src/primitive/AppBar/useAppBar.tsx @@ -0,0 +1,42 @@ +import { elementProps } from "@seed-design/dom-utils"; +import { useMemo, useState } from "react"; +import { useAppScreenContext } from "../AppScreen"; +import { useElementOffset } from "../private/useElementOffset"; + +// biome-ignore lint/suspicious/noEmptyInterface: intentionally empty for future extension +export interface UseAppBarProps {} + +export type UseAppBarReturn = ReturnType; + +export function useAppBar(_props: UseAppBarProps) { + const { stateProps } = useAppScreenContext(); + + const [root, rootRef] = useState(null); + const [left, leftRef] = useState(null); + const [right, rightRef] = useState(null); + + const leftOffset = useElementOffset(left); + const rightOffset = useElementOffset(right); + const centeredTitlePaddingX = root + ? `${Math.max(leftOffset?.fromLeft ?? 0, rightOffset?.fromRight ?? 0)}px` + : "initial"; + + return useMemo( + () => ({ + refs: { + root: rootRef, + left: leftRef, + right: rightRef, + }, + stateProps, + rootProps: elementProps({ + "data-part": "appBar", + ...stateProps, + style: { + "--centered-title-padding-x": centeredTitlePaddingX, + } as React.CSSProperties, + }), + }), + [stateProps, centeredTitlePaddingX], + ); +} diff --git a/packages/stackflow/src/primitive/AppBar/useAppBarContext.ts b/packages/stackflow/src/primitive/AppBar/useAppBarContext.ts new file mode 100644 index 000000000..1c8e102d3 --- /dev/null +++ b/packages/stackflow/src/primitive/AppBar/useAppBarContext.ts @@ -0,0 +1,19 @@ +import { createContext, useContext } from "react"; +import type { UseAppBarReturn } from "./useAppBar"; + +export interface UseAppBarContext extends UseAppBarReturn {} + +const AppBarContext = createContext(null); + +export const AppBarProvider = AppBarContext.Provider; + +export function useAppBarContext({ + strict = true, +}: { strict?: T } = {}): T extends false ? UseAppBarContext | null : UseAppBarContext { + const context = useContext(AppBarContext); + if (!context && strict) { + throw new Error("useAppBarContext must be used within a AppBar"); + } + + return context as UseAppBarContext; +} diff --git a/packages/stackflow/src/primitive/AppScreen/AppScreen.namespace.ts b/packages/stackflow/src/primitive/AppScreen/AppScreen.namespace.ts new file mode 100644 index 000000000..08b94fc25 --- /dev/null +++ b/packages/stackflow/src/primitive/AppScreen/AppScreen.namespace.ts @@ -0,0 +1,10 @@ +export { + AppScreenDim as Dim, + AppScreenEdge as Edge, + AppScreenLayer as Layer, + AppScreenRoot as Root, + type AppScreenDimProps as DimProps, + type AppScreenEdgeProps as EdgeProps, + type AppScreenLayerProps as LayerProps, + type AppScreenRootProps as RootProps, +} from "./AppScreen"; diff --git a/packages/stackflow/src/primitive/AppScreen/AppScreen.tsx b/packages/stackflow/src/primitive/AppScreen/AppScreen.tsx new file mode 100644 index 000000000..d2e5d7cf5 --- /dev/null +++ b/packages/stackflow/src/primitive/AppScreen/AppScreen.tsx @@ -0,0 +1,66 @@ +import { mergeProps } from "@seed-design/dom-utils"; +import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive"; +import { forwardRef } from "react"; +import { useAppScreen, type UseAppScreenProps } from "./useAppScreen"; +import { AppScreenProvider, useAppScreenContext } from "./useAppScreenContext"; + +export interface AppScreenRootProps + extends PrimitiveProps, + UseAppScreenProps, + React.HTMLAttributes {} + +export const AppScreenRoot = forwardRef((props, ref) => { + const { + swipeBackDisplacementRatioThreshold, + swipeBackVelocityThreshold, + onSwipeBackEnd, + onSwipeBackMove, + onSwipeBackStart, + ...otherProps + } = props; + const api = useAppScreen({ + swipeBackDisplacementRatioThreshold, + swipeBackVelocityThreshold, + onSwipeBackEnd, + onSwipeBackMove, + onSwipeBackStart, + }); + + return ( + + + + ); +}); +AppScreenRoot.displayName = "AppScreenRoot"; + +export interface AppScreenDimProps extends PrimitiveProps, React.HTMLAttributes {} + +export const AppScreenDim = forwardRef((props, ref) => { + const { dimProps } = useAppScreenContext(); + + return ; +}); +AppScreenDim.displayName = "AppScreenDim"; + +export interface AppScreenEdgeProps extends PrimitiveProps, React.HTMLAttributes {} + +export const AppScreenEdge = forwardRef((props, ref) => { + const { edgeProps } = useAppScreenContext(); + + return ; +}); +AppScreenEdge.displayName = "AppScreenEdge"; + +export interface AppScreenLayerProps extends PrimitiveProps, React.HTMLAttributes {} + +export const AppScreenLayer = forwardRef((props, ref) => { + const { layerProps } = useAppScreenContext(); + + return ; +}); +AppScreenLayer.displayName = "AppScreenLayer"; diff --git a/packages/stackflow/src/primitive/AppScreen/index.ts b/packages/stackflow/src/primitive/AppScreen/index.ts new file mode 100644 index 000000000..13b1925f2 --- /dev/null +++ b/packages/stackflow/src/primitive/AppScreen/index.ts @@ -0,0 +1,13 @@ +export { + AppScreenDim, + AppScreenEdge, + AppScreenLayer, + AppScreenRoot, + type AppScreenDimProps, + type AppScreenEdgeProps, + type AppScreenLayerProps, + type AppScreenRootProps, +} from "./AppScreen"; + +export * as AppScreen from "./AppScreen.namespace"; +export { useAppScreenContext, type UseAppScreenContext } from "./useAppScreenContext"; diff --git a/packages/stackflow/src/primitive/AppScreen/useAppScreen.tsx b/packages/stackflow/src/primitive/AppScreen/useAppScreen.tsx new file mode 100644 index 000000000..268a2a2da --- /dev/null +++ b/packages/stackflow/src/primitive/AppScreen/useAppScreen.tsx @@ -0,0 +1,68 @@ +import { dataAttr, elementProps } from "@seed-design/dom-utils"; +import { useNullableActivity, useZIndexBase } from "@stackflow/react-ui-core"; +import { useMemo } from "react"; +import { type UseSwipeBackProps, useSwipeBack } from "../GlobalInteraction/useSwipeBack"; + +export interface UseAppScreenProps extends UseSwipeBackProps {} + +export type UseAppScreenReturn = ReturnType; + +export function useAppScreen(props: UseAppScreenProps) { + const activity = useNullableActivity(); + + const transitionState = activity?.transitionState ?? "enter-done"; + + const { activityProps, layerProps, edgeProps } = useSwipeBack(props); + + const zIndexBase = useZIndexBase(); + const zIndexStyle = useMemo( + () => + ({ + "--z-index-base": zIndexBase.toString(), + }) as React.CSSProperties, + [zIndexBase], + ); + + const stateProps = useMemo( + () => ({ + "data-activity-is-top": dataAttr(activity?.isTop), + "data-activity-is-active": dataAttr(activity?.isActive), + "data-transition-state": transitionState, + }), + [transitionState, activity?.isActive, activity?.isTop], + ) as React.HTMLAttributes; + + return useMemo( + () => ({ + activity, + stateProps, + activityProps: elementProps({ + "data-part": "activity", + "data-activity-type": "full-screen", + ...activityProps, + ...stateProps, + "data-activity-id": activity?.id, + style: zIndexStyle, + // FIXME: @stackflow/react should prevent activity.id hydration mismatch; this is temporal fix. + suppressHydrationWarning: true, + }), + dimProps: elementProps({ + "data-part": "dim", + ...stateProps, + }), + layerProps: elementProps({ + "data-part": "layer", + ...stateProps, + ...layerProps, + }), + edgeProps: elementProps({ + "data-part": "edge", + "aria-hidden": true, + tabIndex: -1, + ...edgeProps, + ...stateProps, + }), + }), + [activity, zIndexStyle, stateProps, activityProps, edgeProps, layerProps], + ); +} diff --git a/packages/stackflow/src/primitive/AppScreen/useAppScreenContext.ts b/packages/stackflow/src/primitive/AppScreen/useAppScreenContext.ts new file mode 100644 index 000000000..5d41ecb13 --- /dev/null +++ b/packages/stackflow/src/primitive/AppScreen/useAppScreenContext.ts @@ -0,0 +1,19 @@ +import { createContext, useContext } from "react"; +import type { UseAppScreenReturn } from "./useAppScreen"; + +export interface UseAppScreenContext extends UseAppScreenReturn {} + +const AppScreenContext = createContext(null); + +export const AppScreenProvider = AppScreenContext.Provider; + +export function useAppScreenContext({ + strict = true, +}: { strict?: T } = {}): T extends false ? UseAppScreenContext | null : UseAppScreenContext { + const context = useContext(AppScreenContext); + if (!context && strict) { + throw new Error("useAppScreenContext must be used within a AppScreen"); + } + + return context as UseAppScreenContext; +} diff --git a/packages/stackflow/src/primitive/GlobalInteraction/GlobalInteraction.tsx b/packages/stackflow/src/primitive/GlobalInteraction/GlobalInteraction.tsx new file mode 100644 index 000000000..d45387b19 --- /dev/null +++ b/packages/stackflow/src/primitive/GlobalInteraction/GlobalInteraction.tsx @@ -0,0 +1,25 @@ +import { composeRefs } from "@radix-ui/react-compose-refs"; +import { mergeProps } from "@seed-design/dom-utils"; +import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive"; +import { forwardRef } from "react"; +import { useGlobalInteraction } from "./useGlobalInteraction"; +import { GlobalInteractionProvider } from "./useGlobalInteractionContext"; + +export interface GlobalInteractionProps + extends PrimitiveProps, + React.HTMLAttributes {} + +export const GlobalInteraction = forwardRef( + (props, ref) => { + const api = useGlobalInteraction(); + return ( + + + + ); + }, +); +GlobalInteraction.displayName = "GlobalInteraction"; diff --git a/packages/stackflow/src/primitive/GlobalInteraction/index.ts b/packages/stackflow/src/primitive/GlobalInteraction/index.ts new file mode 100644 index 000000000..c2b835632 --- /dev/null +++ b/packages/stackflow/src/primitive/GlobalInteraction/index.ts @@ -0,0 +1,6 @@ +export { GlobalInteraction, type GlobalInteractionProps } from "./GlobalInteraction"; + +export { + useGlobalInteractionContext, + type UseGlobalInteractionContext, +} from "./useGlobalInteractionContext"; diff --git a/packages/stackflow/src/primitive/GlobalInteraction/useGlobalInteraction.ts b/packages/stackflow/src/primitive/GlobalInteraction/useGlobalInteraction.ts new file mode 100644 index 000000000..96a405cd8 --- /dev/null +++ b/packages/stackflow/src/primitive/GlobalInteraction/useGlobalInteraction.ts @@ -0,0 +1,178 @@ +import { useCallbackRef } from "@radix-ui/react-use-callback-ref"; +import { useCallback, useMemo, useRef, useState } from "react"; +import { useTopActivity } from "../private/useTopActivity"; + +export type SwipeBackState = "idle" | "swiping" | "transitioning"; + +export type UseGlobalInteractionReturn = ReturnType; + +export interface SwipeBackContext { + x0: number; + t0: number; + displacement: number; + displacementRatio: number; + velocity: number; +} + +export interface SwipeBackProps { + /** + * The threshold to determine whether the swipe back is intentional. + * @default 0.4 + */ + swipeBackDisplacementRatioThreshold?: number; + + /** + * The threshold to determine whether the swipe back is intentional. + * @default 1 + */ + swipeBackVelocityThreshold?: number; + + onSwipeBackStart?: () => void; + onSwipeBackMove?: (props: { displacement: number; displacementRatio: number }) => void; + onSwipeBackEnd?: (props: { swiped: boolean }) => void; +} + +export interface StartSwipeBackProps { + x0: number; + t0: number; +} + +export interface MoveSwipeBackProps { + x: number; + t: number; +} + +// biome-ignore lint/suspicious/noEmptyInterface: intentionally empty for future extension +export interface EndSwipeBackProps {} + +export function useGlobalInteraction() { + const [swipeBackState, setSwipeBackState] = useState("idle"); + + const swipeBackContextRef = useRef({ + x0: 0, + t0: 0, + displacement: 0, + displacementRatio: 0, + velocity: 0, + }); + const stackRef = useRef(null); + + const setSwipeBackContext = useCallback((ctx: SwipeBackContext) => { + swipeBackContextRef.current = ctx; + stackRef.current?.style.setProperty( + "--swipe-back-displacement", + `${ctx.displacement.toString()}px`, + ); + stackRef.current?.style.setProperty( + "--swipe-back-displacement-ratio", + ctx.displacementRatio.toString(), + ); + }, []); + + const getSwipeBackEvents = useCallback( + (props: SwipeBackProps) => { + const { + swipeBackDisplacementRatioThreshold: displacementRatioThreshold = 0.4, + swipeBackVelocityThreshold: velocityThreshold = 1, + } = props; + const onSwipeStart = useCallbackRef(props.onSwipeBackStart); + const onSwipeMove = useCallbackRef(props.onSwipeBackMove); + const onSwipeEnd = useCallbackRef(props.onSwipeBackEnd); + + const startSwipeBack = useCallback( + ({ x0, t0 }: StartSwipeBackProps) => { + setSwipeBackContext({ + x0, + t0, + displacement: 0, + displacementRatio: 0, + velocity: 0, + }); + setSwipeBackState("swiping"); + + onSwipeStart?.(); + }, + [onSwipeStart], + ); + + const moveSwipeBack = useCallback( + ({ x, t }: MoveSwipeBackProps) => { + const displacement = x - swipeBackContextRef.current.x0; + const displacementRatio = displacement / window.innerWidth; + const velocity = displacement / (t - swipeBackContextRef.current.t0); + setSwipeBackContext({ + ...swipeBackContextRef.current, + displacement, + displacementRatio, + velocity, + }); + setSwipeBackState("swiping"); + + onSwipeMove?.({ displacement, displacementRatio }); + }, + [onSwipeMove], + ); + + const endSwipeBack = useCallback( + (_: EndSwipeBackProps) => { + const swiped = + swipeBackContextRef.current.displacementRatio > displacementRatioThreshold || + swipeBackContextRef.current.velocity > velocityThreshold; + + // we intentionally do not reset context here, so that the displacement can be used for exit animation + setSwipeBackState("transitioning"); + + onSwipeEnd?.({ swiped }); + }, + [onSwipeEnd, displacementRatioThreshold, velocityThreshold], + ); + + const reset = useCallback(() => { + setSwipeBackContext({ + x0: 0, + t0: 0, + displacement: 0, + displacementRatio: 0, + velocity: 0, + }); + setSwipeBackState("idle"); + }, []); + + return useMemo( + () => ({ + startSwipeBack, + moveSwipeBack, + endSwipeBack, + reset, + }), + [startSwipeBack, moveSwipeBack, endSwipeBack, reset], + ); + }, + [setSwipeBackContext], + ); + + const topActivity = useTopActivity(); + + const stackProps = useMemo( + () => ({ + "data-swipe-back-state": swipeBackState, + "data-global-transition-state": topActivity.transitionState, + "data-top-activity-type": topActivity.activityType, + }), + [swipeBackState, topActivity.transitionState, topActivity.activityType], + ) as React.HTMLAttributes; + + return useMemo( + () => ({ + stackRef, + swipeBackContextRef, + swipeBackState, + setSwipeBackState, + setSwipeBackContext, + getSwipeBackEvents, + + stackProps, + }), + [swipeBackState, setSwipeBackContext, getSwipeBackEvents, stackProps], + ); +} diff --git a/packages/stackflow/src/primitive/GlobalInteraction/useGlobalInteractionContext.tsx b/packages/stackflow/src/primitive/GlobalInteraction/useGlobalInteractionContext.tsx new file mode 100644 index 000000000..67216beeb --- /dev/null +++ b/packages/stackflow/src/primitive/GlobalInteraction/useGlobalInteractionContext.tsx @@ -0,0 +1,21 @@ +import { createContext, useContext } from "react"; +import type { UseGlobalInteractionReturn } from "./useGlobalInteraction"; + +export interface UseGlobalInteractionContext extends UseGlobalInteractionReturn {} + +const GlobalInteractionContext = createContext(null); + +export const GlobalInteractionProvider = GlobalInteractionContext.Provider; + +export function useGlobalInteractionContext({ + strict = true, +}: { strict?: T } = {}): T extends false + ? UseGlobalInteractionContext | null + : UseGlobalInteractionContext { + const context = useContext(GlobalInteractionContext); + if (!context && strict) { + throw new Error("useGlobalInteractionContext must be used within a GlobalInteractionProvider"); + } + + return context as UseGlobalInteractionContext; +} diff --git a/packages/stackflow/src/primitive/GlobalInteraction/useSwipeBack.ts b/packages/stackflow/src/primitive/GlobalInteraction/useSwipeBack.ts new file mode 100644 index 000000000..2ca087755 --- /dev/null +++ b/packages/stackflow/src/primitive/GlobalInteraction/useSwipeBack.ts @@ -0,0 +1,56 @@ +import { useEffect, useMemo } from "react"; +import type { SwipeBackProps } from "./useGlobalInteraction"; +import { useGlobalInteractionContext } from "./useGlobalInteractionContext"; + +export interface UseSwipeBackProps extends SwipeBackProps {} + +export function useSwipeBack(props: UseSwipeBackProps) { + const globalInteraction = useGlobalInteractionContext(); + const events = globalInteraction.getSwipeBackEvents(props); + + useEffect(() => { + return () => { + events.reset(); + }; + }, [events]); + + return useMemo( + () => ({ + activityProps: { + "data-swipe-back": "", + } as React.HTMLAttributes, + layerProps: { + onTransitionEnd: (e) => { + if (e.target === e.currentTarget) { + events.reset(); + } + }, + onAnimationEnd: (e) => { + if (e.target === e.currentTarget) { + events.reset(); + } + }, + } as React.HTMLAttributes, + edgeProps: { + tabIndex: -1, + onTouchStart: (e) => { + const x0 = e.touches[0].clientX; + const t0 = Date.now(); + events.startSwipeBack({ x0, t0 }); + }, + onTouchMove: (e) => { + const x = e.touches[0].clientX; + const t = Date.now(); + events.moveSwipeBack({ x, t }); + }, + onTouchEnd: () => { + events.endSwipeBack({}); + }, + onTouchCancel: () => { + events.endSwipeBack({}); + }, + } as React.HTMLAttributes, + }), + [events], + ); +} diff --git a/packages/stackflow/src/primitive/index.tsx b/packages/stackflow/src/primitive/index.tsx new file mode 100644 index 000000000..ee5487af9 --- /dev/null +++ b/packages/stackflow/src/primitive/index.tsx @@ -0,0 +1,3 @@ +export * from "./AppScreen"; +export * from "./AppBar"; +export * from "./GlobalInteraction"; diff --git a/packages/stackflow/src/primitive/private/useElementOffset.ts b/packages/stackflow/src/primitive/private/useElementOffset.ts new file mode 100644 index 000000000..4c2004c02 --- /dev/null +++ b/packages/stackflow/src/primitive/private/useElementOffset.ts @@ -0,0 +1,37 @@ +import * as React from "react"; + +const useLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect; + +export function useElementOffset(element: HTMLElement | null) { + const [offset, setOffset] = React.useState<{ fromLeft: number; fromRight: number } | undefined>( + undefined, + ); + + useLayoutEffect(() => { + if (!element) { + setOffset(undefined); + return; + } + + if (element) { + // provide as early as possible + setOffset({ + fromLeft: element.offsetLeft + element.offsetWidth, + fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft, + }); + + const resizeObserver = new ResizeObserver(() => { + const fromLeft = element.offsetLeft + element.offsetWidth; + const fromRight = (element.offsetParent ?? document.body).clientWidth - element.offsetLeft; + + setOffset({ fromLeft, fromRight }); + }); + + resizeObserver.observe(element); + + return () => resizeObserver.unobserve(element); + } + }, [element]); + + return offset; +} diff --git a/packages/stackflow/src/primitive/private/useTopActivity.ts b/packages/stackflow/src/primitive/private/useTopActivity.ts new file mode 100644 index 000000000..f54311ba6 --- /dev/null +++ b/packages/stackflow/src/primitive/private/useTopActivity.ts @@ -0,0 +1,31 @@ +import { useStack } from "@stackflow/react"; +import { useEffect, useState } from "react"; + +export function useTopActivity() { + const stack = useStack(); + if (!stack) { + throw new Error( + "useStack is not available in the context. Make sure you are using @stackflow/react >= 1.4.1. (https://github.com/daangn/stackflow/blob/main/integrations/react/CHANGELOG.md#141)", + ); + } + + const topId = stack.activities.find((activity) => activity.isTop)?.id; + const topActivity = stack.activities.find((activity) => activity.isTop); + const transitionState = topActivity?.transitionState ?? "enter-done"; + + // TODO: There should be a better way to handle this. We should not rely on the DOM element to get the activity type. + const [topEl, setTopEl] = useState(null); + const activityType = topEl?.dataset["activityType"]; + + useEffect(() => { + if (!topId) return; + + const el = document.querySelector(`[data-activity-id="${topId}"]`); + setTopEl(el); + }, [topId]); + + return { + transitionState, + activityType, + }; +} diff --git a/packages/stackflow/src/primitive/useAppScreen.tsx b/packages/stackflow/src/primitive/useAppScreen.tsx deleted file mode 100644 index 4450a64e9..000000000 --- a/packages/stackflow/src/primitive/useAppScreen.tsx +++ /dev/null @@ -1,224 +0,0 @@ -import { useActions, useStack } from "@stackflow/react"; -import { createContext, useContext, useMemo, useRef } from "react"; - -import type { ActivityTransitionState } from "@stackflow/core"; -import { - useLazy, - useMounted, - useNullableActivity, - useStyleEffectHide, - useStyleEffectOffset, - useStyleEffectSwipeBack, - useZIndexBase, -} from "@stackflow/react-ui-core"; - -const OFFSET_PX_ANDROID = 32; -const OFFSET_PX_CUPERTINO = 80; - -function getZIndexStyle(props: { - base: number; - theme?: "android" | "cupertino"; - hasAppBar: boolean; - modalPresentationStyle?: "fullScreen" | undefined; - activityEnterStyle?: "slideInLeft" | undefined; -}) { - const { base, theme, hasAppBar, modalPresentationStyle, activityEnterStyle } = props; - - if (theme === "cupertino") { - return { - "--z-index-dim": base + (modalPresentationStyle === "fullScreen" ? 2 : 0), - "--z-index-layer": base + (hasAppBar && modalPresentationStyle !== "fullScreen" ? 2 : 3), // FIXME: transparent backswipe에서 appBar 순서로 인해 2로 설정. 1로 되돌려야 함. - "--z-index-edge": base + 4, - "--z-index-app-bar": base + 7, - } as React.CSSProperties; - } - - return { - "--z-index-dim": base, - "--z-index-layer": base + (activityEnterStyle === "slideInLeft" ? 1 : 3), - "--z-index-edge": base + 4, - "--z-index-app-bar": base + (activityEnterStyle === "slideInLeft" ? 7 : 4), - } as React.CSSProperties; -} - -export function useAppScreen(props: { - theme?: "android" | "cupertino"; - modalPresentationStyle?: "fullScreen" | undefined; - activityEnterStyle?: "slideInLeft" | undefined; - preventSwipeBack?: boolean; - hasAppBar: boolean; -}) { - const { theme, preventSwipeBack, hasAppBar } = props; - - const stack = useStack(); - const activity = useNullableActivity(); - const mounted = useMounted(); - - const { pop } = useActions(); - - const appScreenRef = useRef(null); - const dimRef = useRef(null); - const layerRef = useRef(null); - const edgeRef = useRef(null); - const appBarRef = useRef(null); - - const modalPresentationStyle = theme === "cupertino" ? props.modalPresentationStyle : undefined; - const activityEnterStyle = theme === "android" ? props.activityEnterStyle : undefined; - const isSwipeBackPrevented = preventSwipeBack || modalPresentationStyle === "fullScreen"; - - const transitionState = activity?.transitionState ?? "enter-done"; - const lazyTransitionState = useLazy(transitionState); - const transitionDuration = stack ? `${stack.transitionDuration}ms` : "0ms"; - const computedTransitionDuration = - stack?.globalTransitionState === "loading" ? transitionDuration : "0ms"; - - useStyleEffectHide({ - refs: [appScreenRef], - }); - useStyleEffectOffset({ - refs: - theme === "cupertino" || activityEnterStyle === "slideInLeft" - ? [layerRef] - : [layerRef, appBarRef], - offsetStyles: - theme === "cupertino" - ? { - transform: `translate3d(-${OFFSET_PX_CUPERTINO}px, 0, 0)`, - opacity: "1", - } - : activityEnterStyle === "slideInLeft" - ? { - transform: "translate3d(-50%, 0, 0)", - opacity: "0", - } - : { - transform: `translate3d(0, -${OFFSET_PX_ANDROID}px, 0)`, - opacity: "1", - }, - transitionDuration: computedTransitionDuration, - hasEffect: modalPresentationStyle !== "fullScreen", - }); - useStyleEffectSwipeBack({ - dimRef, - edgeRef, - paperRef: layerRef, - appBarRef, - offset: OFFSET_PX_CUPERTINO, - transitionDuration: transitionDuration, - preventSwipeBack: isSwipeBackPrevented || theme !== "cupertino", - getActivityTransitionState() { - const $layer = layerRef.current; - const $appScreen = $layer?.parentElement; - - if (!$appScreen) { - return null; - } - - const transitionState = $appScreen.dataset["transition-state"]; - - if (transitionState) { - return transitionState as ActivityTransitionState; - } - - return null; - }, - onSwipeEnd({ swiped }) { - if (swiped) { - pop(); - } - }, - }); - - const zIndexBase = useZIndexBase(); - const zIndexStyle = useMemo( - () => - getZIndexStyle({ - base: zIndexBase, - theme, - hasAppBar, - modalPresentationStyle, - activityEnterStyle, - }), - [zIndexBase, theme, hasAppBar, modalPresentationStyle, activityEnterStyle], - ); - - const stateProps = useMemo( - () => ({ - "data-transition-state": - transitionState === "enter-done" || transitionState === "exit-done" - ? transitionState - : lazyTransitionState, - "data-stackflow-activity-is-active": mounted ? activity?.isActive : undefined, - }), - [transitionState, lazyTransitionState, mounted, activity?.isActive], - ); - - return useMemo( - () => ({ - theme, - activity, - scroll: ({ top }: { top: number }) => { - layerRef.current?.scroll({ - top, - behavior: "smooth", - }); - }, - refs: { - appScreen: appScreenRef, - dim: dimRef, - layer: layerRef, - edge: edgeRef, - appBar: appBarRef, - }, - stateProps, - rootProps: { - ...stateProps, - "data-stackflow-activity-id": mounted ? activity?.id : undefined, - style: zIndexStyle, - } as React.HTMLAttributes, - dimProps: { - ...stateProps, - style: { - display: activityEnterStyle !== "slideInLeft" ? undefined : "none", - }, - } as React.HTMLAttributes, - layerProps: { - ...stateProps, - } as React.HTMLAttributes, - edgeProps: { - ...stateProps, - style: { - display: - !activity?.isRoot && theme === "cupertino" && !isSwipeBackPrevented - ? undefined - : "none", - }, - } as React.HTMLAttributes, - appBarEdgeProps: { - ...stateProps, - onClick: (e) => { - if (!e.defaultPrevented) { - layerRef.current?.scroll({ - top: 0, - behavior: "smooth", - }); - } - }, - } as React.HTMLAttributes, - }), - [theme, activity, zIndexStyle, isSwipeBackPrevented, activityEnterStyle, stateProps, mounted], - ); -} - -const AppScreenContext = createContext | null>(null); - -export const AppScreenProvider = AppScreenContext.Provider; - -export function useAppScreenContext() { - const context = useContext(AppScreenContext); - if (!context) { - throw new Error("useAppScreen must be used within a AppScreen"); - } - - return context; -} diff --git a/packages/stackflow/src/utils/createStyleContext.tsx b/packages/stackflow/src/utils/createStyleContext.tsx new file mode 100644 index 000000000..813525561 --- /dev/null +++ b/packages/stackflow/src/utils/createStyleContext.tsx @@ -0,0 +1,125 @@ +import clsx from "clsx"; +import { createContext, forwardRef, useContext } from "react"; + +type Recipe< + Props extends Record, + Classnames extends Record, +> = ((props?: Props) => Classnames) & { + splitVariantProps: (props: T) => [Props, Omit]; +}; + +export function createStyleContext< + Props extends Record, + Classnames extends Record, +>(recipe: Recipe) { + const ClassNamesContext = createContext(null); + const PropsContext = createContext(null); + + const ClassNamesProvider = ({ + children, + value, + }: { children: React.ReactNode; value: Classnames }) => { + return {children}; + }; + + const PropsProvider = ({ children, value }: { children: React.ReactNode; value: Props }) => { + return {children}; + }; + + function useClassNames() { + const context = useContext(ClassNamesContext); + if (context === null) { + throw new Error( + "useClassNames must be used within a ClassNamesProvider. Did you forget to wrap your component in a ClassNamesProvider?", + ); + } + + return context; + } + + function useProps() { + return useContext(PropsContext); + } + + const withRootProvider = ( + Component: React.ElementType, + options?: { + defaultProps?: Partial

; + }, + ): React.ForwardRefExoticComponent> => { + const { defaultProps } = options ?? {}; + + const StyledComponent = (innerProps: any) => { + const props = { ...(defaultProps ?? {}), ...useProps(), ...innerProps } as Props & + React.HTMLAttributes; + const [variantProps, otherProps] = recipe.splitVariantProps(props); + const classNames = recipe(variantProps); // TODO: should we memoize this? + + return ( + + + + ); + }; + + // @ts-ignore + StyledComponent.displayName = Component.displayName || Component.name; + + return StyledComponent as any; + }; + + const withProvider = ( + Component: React.ElementType, + slot: keyof Classnames, + options?: { + defaultProps?: Partial

; + }, + ): React.ForwardRefExoticComponent & React.RefAttributes> => { + const { defaultProps } = options ?? {}; + + const StyledComponent = forwardRef((innerProps, ref) => { + const props = { ...(defaultProps ?? {}), ...useProps(), ...innerProps } as Props & + React.HTMLAttributes; + const [variantProps, otherProps] = recipe.splitVariantProps(props); + const classNames = recipe(variantProps); // TODO: should we memoize this? + const className = classNames[slot as keyof typeof classNames]; + + return ( + + + + ); + }); + + // @ts-ignore + StyledComponent.displayName = Component.displayName || Component.name; + + return StyledComponent as any; + }; + + const withContext = ( + Component: React.ElementType, + slot?: keyof Classnames, + ): React.ForwardRefExoticComponent & React.RefAttributes> => { + const StyledComponent = forwardRef>((props, ref) => { + const classNames = useClassNames(); + const className = classNames?.[slot as keyof typeof classNames]; + + return ; + }); + + // @ts-ignore + StyledComponent.displayName = Component.displayName || Component.name; + return StyledComponent as any; + }; + + return { + ClassNamesProvider, + PropsProvider, + useClassNames, + useProps, + withRootProvider, + withProvider, + withContext, + }; +} diff --git a/packages/stackflow/src/utils/createWithStateProps.tsx b/packages/stackflow/src/utils/createWithStateProps.tsx new file mode 100644 index 000000000..a147f2052 --- /dev/null +++ b/packages/stackflow/src/utils/createWithStateProps.tsx @@ -0,0 +1,28 @@ +import { forwardRef } from "react"; + +type AtLeastOne = [T, ...T[]]; + +export function createWithStateProps( + useContexts: AtLeastOne< + (prop?: { strict?: boolean }) => { stateProps: React.HTMLAttributes } | null + >, + options?: { strict?: boolean }, +) { + const strict = options?.strict ?? true; + + return function withStateProps(Component: React.ComponentType

>) { + const Node = forwardRef((props, ref) => { + const stateProps = {}; + for (const useContext of useContexts) { + Object.assign(stateProps, useContext({ strict })?.stateProps); + } + + // @ts-ignore + return ; + }); + + Node.displayName = Component.displayName || Component.name; + + return Node; + }; +} diff --git a/packages/stackflow/tsconfig.json b/packages/stackflow/tsconfig.json index 20bc8e032..59fbc0a08 100644 --- a/packages/stackflow/tsconfig.json +++ b/packages/stackflow/tsconfig.json @@ -2,10 +2,19 @@ "compilerOptions": { "target": "ESNext", "module": "ESNext", + "moduleDetection": "force", "moduleResolution": "Bundler", + "verbatimModuleSyntax": true, + + "strict": true, + "skipLibCheck": true, + "noFallthroughCasesInSwitch": true, + "noPropertyAccessFromIndexSignature": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "rootDir": "src", "outDir": "lib", "jsx": "react-jsx" - }, - "include": ["src"] + } } diff --git a/packages/stylesheet/appBar.css b/packages/stylesheet/appBar.css new file mode 100644 index 000000000..735180aca --- /dev/null +++ b/packages/stylesheet/appBar.css @@ -0,0 +1,214 @@ +.appBar__root { + z-index: var(--z-index-app-bar); + position: absolute; + box-sizing: border-box; + width: 100%; + display: flex; + align-items: flex-end; +} +.appBar__root:before { + content: ""; + position: absolute; + pointer-events: none; + inset: 0; + z-index: -1; +} +.appBar__left { + display: flex; + align-items: center; + height: 100%; +} +.appBar__right { + display: flex; + align-items: center; + height: 100%; + margin-left: auto; +} +.appBar__iconButton { + display: flex; + align-items: center; + justify-content: center; +} +.appBar__icon { + display: inline-block; + flex-shrink: 0; +} +.appBar__root--theme_cupertino { + height: 44px; + padding-inline: var(--seed-v3-dimension-s4); +} +.appBar__iconButton--theme_cupertino { + width: 40px; + height: 40px; +} +.appBar__iconButton--theme_cupertino:first-child { + margin-left: calc(-1 * (40px - 24px) / 2); +} +.appBar__iconButton--theme_cupertino:last-child { + margin-right: calc(-1 * (40px - 24px) / 2); +} +.appBar__icon--theme_cupertino { + width: 24px; + height: 24px; +} +.appBar__root--theme_android { + height: 56px; + padding-inline: var(--seed-v3-dimension-s4); +} +.appBar__iconButton--theme_android { + width: 40px; + height: 40px; +} +.appBar__iconButton--theme_android:first-child { + margin-left: calc(-1 * (40px - 24px) / 2); +} +.appBar__iconButton--theme_android:last-child { + margin-right: calc(-1 * (40px - 24px) / 2); +} +.appBar__icon--theme_android { + width: 24px; + height: 24px; +} +.appBar__left--theme_android { + padding-right: 16px; +} +[data-global-transition-state=enter-active] .appBar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before { + animation: seed-enter; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + --seed-enter-translate-x: 100%; + --seed-enter-translate-y: 0; + --seed-enter-opacity: 1; + --seed-enter-scale: 1; + transform: translate3d(0, 0, 0); +} +[data-global-transition-state=exit-active] .appBar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before { + transform: translate3d(var(--swipe-back-displacement, 0), 0, 0); + animation: seed-exit; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + 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] .appBar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before { + animation: seed-enter; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + --seed-enter-translate-x: var(--swipe-back-displacement, 0); + --seed-enter-translate-y: 0; + --seed-enter-opacity: 1; + --seed-enter-scale: 1; + transform: translate3d(0, 0, 0); +} +[data-global-transition-state=enter-active] .appBar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] { + animation: seed-enter; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + 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] .appBar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] { + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + animation: seed-exit; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + 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] .appBar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] { + animation: seed-enter; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + --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] .appBar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) { + animation: none; + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); +} +[data-global-transition-state=enter-active][data-top-activity-type="full-screen"] .appBar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + opacity: 1; + animation: seed-exit; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + 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=exit-active][data-top-activity-type="full-screen"] .appBar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + animation: seed-enter; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + --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-global-transition-state=enter-done][data-top-activity-type="full-screen"] .appBar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + animation: seed-exit; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + animation-fill-mode: forwards; + --seed-exit-translate-x: 0; + --seed-exit-translate-y: 0; + --seed-exit-opacity: 0; + --seed-exit-scale: 1; +} +[data-swipe-back-state=swiping] .appBar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) { + animation: none; + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); +} +[data-global-transition-state=enter-active] .appBar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] { + 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] .appBar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] { + 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; +} +.appBar__root--tone_layer:before { + background-color: var(--seed-v3-color-bg-layer-default); +} +.appBar__icon--tone_layer { + color: var(--seed-v3-color-fg-neutral); +} +.appBar__root--tone_transparent:before { + background-color: #00000000; +} +.appBar__icon--tone_transparent { + color: var(--seed-v3-color-palette-static-white); +} +.appBar__root--divider_true { + box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-v3-color-stroke-neutral-muted); +} \ No newline at end of file diff --git a/packages/stylesheet/appBarMain.css b/packages/stylesheet/appBarMain.css new file mode 100644 index 000000000..bcb203597 --- /dev/null +++ b/packages/stylesheet/appBarMain.css @@ -0,0 +1,141 @@ +.appBarMain__root { + flex: 1; + height: 100% +} +.appBarMain__title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis +} +.appBarMain__subtitle { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis +} +.appBarMain__title--layout_titleOnly { + font-size: var(--seed-v3-font-size-s6-static); + font-weight: var(--seed-v3-font-weight-bold) +} +.appBarMain__title--layout_withSubtitle { + font-size: var(--seed-v3-font-size-s5-static); + font-weight: var(--seed-v3-font-weight-bold) +} +.appBarMain__subtitle--layout_withSubtitle { + font-size: var(--seed-v3-font-size-s2-static); + font-weight: var(--seed-v3-font-weight-regular) +} +.appBarMain__root--theme_cupertino { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + height: 100%; + left: 0; + right: 0; + padding-inline: var(--centered-title-padding-x, 0); + pointer-events: none +} +.appBarMain__root--theme_android { + display: flex; + align-items: center; + justify-content: flex-start; + width: 100% +} +[data-global-transition-state=enter-active] .appBarMain__root--transitionStyle_slideFromRightIOS[data-activity-is-top] { + animation: seed-enter; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + --seed-enter-translate-x: 25%; + --seed-enter-translate-y: 0; + --seed-enter-opacity: 0; + --seed-enter-scale: 1; + transform: translate3d(0, 0, 0); + opacity: 1 +} +[data-global-transition-state=exit-active] .appBarMain__root--transitionStyle_slideFromRightIOS[data-activity-is-top] { + transform: translate3d(var(--swipe-back-displacement, 0) * 0.25, 0, 0); + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + animation: seed-exit; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + animation-fill-mode: forwards; + --seed-exit-translate-x: 25%; + --seed-exit-translate-y: 0; + --seed-exit-opacity: 0; + --seed-exit-scale: 1 +} +[data-global-transition-state=enter-done] .appBarMain__root--transitionStyle_slideFromRightIOS[data-activity-is-top] { + animation: seed-enter; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + --seed-enter-translate-x: var(--swipe-back-displacement, 0) * 0.25; + --seed-enter-translate-y: 0; + --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + --seed-enter-scale: 1; + transform: translate3d(0, 0, 0); + opacity: 1 +} +[data-swipe-back-state=swiping] .appBarMain__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) { + animation: none; + transform: translate3d(var(--swipe-back-displacement, 0) * 0.25, 0, 0); + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)) +} +[data-global-transition-state=enter-active][data-top-activity-type="full-screen"] .appBarMain__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + transform: translate3d(0, 0, 0); + opacity: 1; + animation: seed-exit; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + animation-fill-mode: forwards; + --seed-exit-translate-x: -25%; + --seed-exit-translate-y: 0; + --seed-exit-opacity: 0; + --seed-exit-scale: 1 +} +[data-global-transition-state=exit-active][data-top-activity-type="full-screen"] .appBarMain__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + animation: seed-enter; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + --seed-enter-translate-x: calc(-25% + var(--swipe-back-displacement, 0) * 0.25); + --seed-enter-translate-y: 0; + --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + --seed-enter-scale: 1; + transform: translate3d(0, 0, 0); + opacity: 1 +} +[data-global-transition-state=enter-done][data-top-activity-type="full-screen"] .appBarMain__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * 0.25), 0, 0); + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + animation: seed-exit; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + animation-fill-mode: forwards; + --seed-exit-translate-x: -25%; + --seed-exit-translate-y: 0; + --seed-exit-opacity: 0; + --seed-exit-scale: 1 +} +[data-swipe-back-state=swiping] .appBarMain__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) { + animation: none; + transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * 0.25), 0, 0); + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)) +} +.appBarMain__root--tone_layer { + color: var(--seed-v3-color-fg-neutral) +} +.appBarMain__title--tone_layer { + color: var(--seed-v3-color-fg-neutral) +} +.appBarMain__subtitle--tone_layer { + color: var(--seed-v3-color-fg-neutral-muted) +} +.appBarMain__root--tone_transparent { + color: var(--seed-v3-color-palette-static-white) +} +.appBarMain__title--tone_transparent { + color: var(--seed-v3-color-palette-static-white) +} +.appBarMain__subtitle--tone_transparent { + color: var(--seed-v3-color-palette-static-white) +} \ No newline at end of file diff --git a/packages/stylesheet/appScreen.css b/packages/stylesheet/appScreen.css new file mode 100644 index 000000000..110e93de7 --- /dev/null +++ b/packages/stylesheet/appScreen.css @@ -0,0 +1,238 @@ +.appScreen__root { + position: absolute; + width: 100%; + height: 100%; + left: 0; + right: 0; + overflow: hidden; + --app-bar-offset: calc(var(--app-bar-height) + var(--seed-safe-area-top)); +} +.appScreen__dim { + z-index: var(--z-index-dim); + position: absolute; + width: 100%; + top: 0; + left: 0; + right: 0; +} +.appScreen__layer { + z-index: var(--z-index-layer); + box-sizing: border-box; + position: absolute; + width: 100%; + height: 100%; + left: 0; + right: 0; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; +} +.appScreen__layer::-webkit-scrollbar { + display: none; +} +.appScreen__layer { + background-color: var(--seed-v3-color-bg-layer-default); +} +.appScreen__edge { + z-index: var(--z-index-edge); + position: absolute; + width: 20px; + height: 100%; + left: 0; + right: 0; +} +.appScreen__root--theme_cupertino { + --app-bar-height: 44px; +} +.appScreen__dim--theme_cupertino { + height: 100%; + background: var(--seed-v3-color-bg-overlay); +} +.appScreen__root--theme_android { + --app-bar-height: 56px; +} +.appScreen__edge--theme_android { + display: none; +} +.appScreen__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); +} +.appScreen__layer--transitionStyle_slideFromRightIOS { + transform: translate3d(0, 0, 0); +} +[data-global-transition-state=enter-active] .appScreen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] { + animation: seed-enter; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + --seed-enter-translate-x: 100%; + --seed-enter-translate-y: 0; + --seed-enter-opacity: 1; + --seed-enter-scale: 1; + transform: translate3d(0, 0, 0); +} +[data-global-transition-state=exit-active] .appScreen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] { + transform: translate3d(var(--swipe-back-displacement, 0), 0, 0); + animation: seed-exit; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + 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] .appScreen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] { + animation: seed-enter; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + --seed-enter-translate-x: var(--swipe-back-displacement, 0); + --seed-enter-translate-y: 0; + --seed-enter-opacity: 1; + --seed-enter-scale: 1; + transform: translate3d(0, 0, 0); +} +[data-swipe-back-state=swiping] .appScreen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) { + animation: none; + transform: translate3d(var(--swipe-back-displacement, 0), 0, 0); +} +[data-global-transition-state=enter-active][data-top-activity-type="full-screen"] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + transform: translate3d(0, 0, 0); + animation: seed-exit; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + 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"] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + animation: seed-enter; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + --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"] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * 0.3), 0, 0); + animation: seed-exit; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + 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] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) { + animation: none; + transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * 0.3), 0, 0); +} +[data-global-transition-state=enter-active] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] { + animation: seed-enter; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + 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] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] { + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + animation: seed-exit; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + 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] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] { + animation: seed-enter; + animation-timing-function: cubic-bezier(0.22, 0.1, 0.3, 0.85); + animation-duration: 300ms; + --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] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) { + animation: none; + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); +} +.appScreen__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); +} +.appScreen__dim--transitionStyle_fadeFromBottomAndroid { + height: 160px; + background: linear-gradient(var(--seed-v3-color-bg-overlay), rgba(0, 0, 0, 0)); +} +[data-global-transition-state=enter-active] .appScreen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] { + 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] .appScreen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] { + 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; +} +.appScreen__layer--transitionStyle_fadeFromBottomAndroid { + transform: translate3d(0, 0, 0); +} +[data-global-transition-state=enter-active] .appScreen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] { + 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] .appScreen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] { + 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; +} +.appScreen__layer--layerOffsetTop_safeArea { + padding-top: var(--seed-safe-area-top); +} +.appScreen__layer--layerOffsetTop_appBar { + padding-top: var(--app-bar-offset); +} +.appScreen__layer--layerOffsetBottom_safeArea { + padding-bottom: var(--seed-safe-area-bottom); +} \ No newline at end of file diff --git a/packages/stylesheet/base.css b/packages/stylesheet/base.css index 094020ca7..5225409b7 100644 --- a/packages/stylesheet/base.css +++ b/packages/stylesheet/base.css @@ -97,21 +97,36 @@ @keyframes seed-enter { from { opacity: var(--seed-enter-opacity, 1); - transform: translate3d(var(--seed-enter-translate-x, 0), - var(--seed-enter-translate-y, 0), - 0) scale3d(var(--seed-enter-scale, 1), - var(--seed-enter-scale, 1), - var(--seed-enter-scale, 1)) rotate(var(--seed-enter-rotate, 0)); + transform: translate3d(var(--seed-enter-translate-x, 0), var(--seed-enter-translate-y, 0), 0) + scale3d(var(--seed-enter-scale, 1), var(--seed-enter-scale, 1), var(--seed-enter-scale, 1)) + rotate(var(--seed-enter-rotate, 0)); } } @keyframes seed-exit { to { opacity: var(--seed-exit-opacity, 1); - transform: translate3d(var(--seed-exit-translate-x, 0), - var(--seed-exit-translate-y, 0), - 0) scale3d(var(--seed-exit-scale, 1), - var(--seed-exit-scale, 1), - var(--seed-exit-scale, 1)) rotate(var(--seed-exit-rotate, 0)); + transform: translate3d(var(--seed-exit-translate-x, 0), var(--seed-exit-translate-y, 0), 0) + scale3d(var(--seed-exit-scale, 1), var(--seed-exit-scale, 1), var(--seed-exit-scale, 1)) + rotate(var(--seed-exit-rotate, 0)); } -} \ No newline at end of file +} + +:root { + --seed-safe-area-top: 0px; + --seed-safe-area-bottom: 0px; +} + +@supports (left: constant(safe-area-inset-left)) { + :root { + --seed-safe-area-top: constant(safe-area-inset-top); + --seed-safe-area-bottom: constant(safe-area-inset-bottom); + } +} + +@supports (left: env(safe-area-inset-left)) { + :root { + --seed-safe-area-top: env(safe-area-inset-top); + --seed-safe-area-bottom: env(safe-area-inset-bottom); + } +} diff --git a/packages/stylesheet/component.css b/packages/stylesheet/component.css index 43214fb60..eddce1e19 100644 --- a/packages/stylesheet/component.css +++ b/packages/stylesheet/component.css @@ -3132,129 +3132,6 @@ margin-top: calc(12px - .59375rem); } -.screen__root { - width: 100%; - height: 100%; - position: absolute; - left: 0; - right: 0; - overflow: hidden; -} - -.screen__root[data-transition-state="exit-done"] { - transform: translate3d(100%, 0, 0); -} - -.screen__dim { - z-index: var(--z-index-dim); - opacity: 0; - width: 100%; - transition: transform var(--seed-v3-duration-s6), opacity var(--seed-v3-duration-s6); - position: absolute; - left: 0; - right: 0; -} - -.screen__dim:is([data-transition-state="enter-active"], [data-transition-state="enter-done"]) { - opacity: 1; -} - -.screen__dim:is([data-transition-state="exit-active"], [data-transition-state="exit-done"]) { - opacity: 0; -} - -.screen__layer { - z-index: var(--z-index-layer); - -webkit-overflow-scrolling: touch; - width: 100%; - height: 100%; - position: absolute; - left: 0; - right: 0; - overflow-y: scroll; -} - -.screen__layer::-webkit-scrollbar { - display: none; -} - -.screen__layer { - background-color: var(--seed-v3-color-bg-layer-default); - transition: transform var(--seed-v3-duration-s6), opacity var(--seed-v3-duration-s6); -} - -.screen__edge { - z-index: var(--z-index-edge); - width: 20px; - height: 100%; - position: absolute; - left: 0; - right: 0; -} - -.screen__root--theme_cupertino { - --app-bar-height: 44px; -} - -.screen__dim--theme_cupertino { - background: var(--seed-v3-color-bg-overlay); - height: 100%; -} - -.screen__layer--theme_cupertino { - transform: translate3d(100%, 0, 0); -} - -.screen__layer--theme_cupertino:is([data-transition-state="enter-active"], [data-transition-state="enter-done"]) { - transform: translate3d(0, 0, 0); -} - -.screen__root--theme_android { - --app-bar-height: 56px; -} - -.screen__dim--theme_android { - background: linear-gradient(var(--seed-v3-color-bg-overlay), #0000); - height: 10rem; -} - -.screen__layer--theme_android { - opacity: 0; - transform: translate3d(0, 10rem, 0); -} - -.screen__layer--theme_android:is([data-transition-state="enter-active"], [data-transition-state="enter-done"]) { - opacity: 1; - transform: translate3d(0, 0, 0); -} - -.screen__root--hasAppBar_true { - --app-bar-margin: var(--app-bar-height); -} - -@supports (padding: max(0px)) and (padding: constant(safe-area-inset-top)) { - .screen__root--hasAppBar_true { - --app-bar-margin: calc(var(--app-bar-height) + max(0px, constant(safe-area-inset-top))); - } -} - -@supports (padding: max(0px)) and (padding: env(safe-area-inset-top)) { - .screen__root--hasAppBar_true { - --app-bar-margin: calc(var(--app-bar-height) + max(0px, env(safe-area-inset-top))); - } -} - -.screen__layer--hasAppBar_true { - box-sizing: border-box; - transition: transform var(--seed-v3-duration-s6), opacity var(--seed-v3-duration-s6); - height: 100%; -} - -.screen__edge--hasAppBar_true { - top: var(--app-bar-height); - height: calc(100% - var(--app-bar-height)); -} - .helpBubble__backdrop { z-index: 1000; background: var(--seed-v3-color-bg-overlay); @@ -4647,214 +4524,606 @@ line-height: var(--seed-v3-line-height-s2); } -.topNavigation__root { - z-index: var(--z-index-app-bar); - box-sizing: content-box; +.visuallyHidden__root { + clip: rect(0 0 0 0); + white-space: nowrap; + border: 0; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + position: absolute; + overflow: hidden; +} + +.appScreen__root { + --app-bar-offset: calc(var(--app-bar-height) + var(--seed-safe-area-top)); width: 100%; + height: 100%; position: absolute; + left: 0; + right: 0; + overflow: hidden; } -.topNavigation__root[data-transition-state="exit-active"] { - transition: background-color, box-shadow, transform; - transform: translate3d(100%, 0, 0); +.appScreen__dim { + z-index: var(--z-index-dim); + width: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; } -.topNavigation__safeArea { - height: max(0px, env(safe-area-inset-top)); +.appScreen__layer { + z-index: var(--z-index-layer); + box-sizing: border-box; + -webkit-overflow-scrolling: touch; + width: 100%; + height: 100%; + position: absolute; + left: 0; + right: 0; + overflow-y: scroll; +} + +.appScreen__layer::-webkit-scrollbar { + display: none; +} + +.appScreen__layer { + background-color: var(--seed-v3-color-bg-layer-default); +} + +.appScreen__edge { + z-index: var(--z-index-edge); + width: 20px; + height: 100%; + position: absolute; + left: 0; + right: 0; +} + +.appScreen__root--theme_cupertino { + --app-bar-height: 44px; +} + +.appScreen__dim--theme_cupertino { + background: var(--seed-v3-color-bg-overlay); + height: 100%; +} + +.appScreen__root--theme_android { + --app-bar-height: 56px; } -.topNavigation__container { +.appScreen__edge--theme_android { + display: none; +} + +.appScreen__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); +} + +.appScreen__layer--transitionStyle_slideFromRightIOS { + transform: translate3d(0, 0, 0); +} + +[data-global-transition-state="enter-active"] .appScreen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] { + --seed-enter-translate-x: 100%; + --seed-enter-translate-y: 0; + --seed-enter-opacity: 1; + --seed-enter-scale: 1; + animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter; + transform: translate3d(0, 0, 0); +} + +[data-global-transition-state="exit-active"] .appScreen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] { + 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: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit; +} + +[data-global-transition-state="enter-done"] .appScreen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] { + --seed-enter-translate-x: var(--swipe-back-displacement, 0); + --seed-enter-translate-y: 0; + --seed-enter-opacity: 1; + --seed-enter-scale: 1; + animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter; + transform: translate3d(0, 0, 0); +} + +[data-swipe-back-state="swiping"] .appScreen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) { + transform: translate3d(var(--swipe-back-displacement, 0), 0, 0); + animation: none; +} + +[data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + --seed-exit-translate-x: -30%; + --seed-exit-translate-y: 0; + --seed-exit-opacity: 1; + --seed-exit-scale: 1; + animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit; + transform: translate3d(0, 0, 0); +} + +[data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + --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: .3s cubic-bezier(.22, .1, .3, .85) seed-enter; + transform: translate3d(0, 0, 0); +} + +[data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + 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: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit; +} + +[data-swipe-back-state="swiping"] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) { + transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * .3), 0, 0); + animation: none; +} + +[data-global-transition-state="enter-active"] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] { + --seed-enter-translate-x: 0; + --seed-enter-translate-y: 0; + --seed-enter-opacity: 0; + --seed-enter-scale: 1; + opacity: 1; + animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter; +} + +[data-global-transition-state="exit-active"] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] { + 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: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit; +} + +[data-global-transition-state="enter-done"] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] { + --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: .3s cubic-bezier(.22, .1, .3, .85) seed-enter; +} + +[data-swipe-back-state="swiping"] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) { + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + animation: none; +} + +.appScreen__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); +} + +.appScreen__dim--transitionStyle_fadeFromBottomAndroid { + background: linear-gradient(var(--seed-v3-color-bg-overlay), #0000); + height: 160px; +} + +[data-global-transition-state="enter-active"] .appScreen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] { + --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"] .appScreen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] { + 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); +} + +.appScreen__layer--transitionStyle_fadeFromBottomAndroid { + transform: translate3d(0, 0, 0); +} + +[data-global-transition-state="enter-active"] .appScreen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] { + --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"] .appScreen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] { + 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); +} + +.appScreen__layer--layerOffsetTop_safeArea { + padding-top: var(--seed-safe-area-top); +} + +.appScreen__layer--layerOffsetTop_appBar { + padding-top: var(--app-bar-offset); +} + +.appScreen__layer--layerOffsetBottom_safeArea { + padding-bottom: var(--seed-safe-area-bottom); +} + +.appBar__root { + z-index: var(--z-index-app-bar); + box-sizing: border-box; align-items: flex-end; + width: 100%; display: flex; + position: absolute; } -.topNavigation__left { +.appBar__root:before { + content: ""; + pointer-events: none; + z-index: -1; + position: absolute; + inset: 0; +} + +.appBar__left { align-items: center; height: 100%; display: flex; } -.topNavigation__right { +.appBar__right { align-items: center; height: 100%; margin-left: auto; display: flex; } -.topNavigation__iconButton { +.appBar__iconButton { justify-content: center; align-items: center; display: flex; } -.topNavigation__icon { +.appBar__icon { flex-shrink: 0; display: inline-block; } -.topNavigation__title { - flex: 1; - align-items: center; - height: 100%; - display: flex; -} - -.topNavigation__titleMain { - transition: color; +.appBar__root--theme_cupertino { + height: 44px; + padding-inline: var(--seed-v3-dimension-s4); } -.topNavigation__titleEdge { - appearance: none; - cursor: pointer; - background: none; - border: 0; - max-width: 5rem; - height: 20px; - padding: 0; - display: none; - position: absolute; - top: 0; - left: 50%; - transform: translate(-50%); +.appBar__iconButton--theme_cupertino { + width: 40px; + height: 40px; } -.topNavigation__titleText { - white-space: nowrap; - text-overflow: ellipsis; - width: 100%; - overflow: hidden; +.appBar__iconButton--theme_cupertino:first-child { + margin-left: -8px; } -.topNavigation__container--theme_cupertino { - height: 44px; - padding-inline: var(--seed-v3-dimension-s4); +.appBar__iconButton--theme_cupertino:last-child { + margin-right: -8px; } -[data-stackflow-activity-is-active="false"] .topNavigation__container--theme_cupertino { - opacity: calc(pow(var(--stackflow-swipe-back-ratio, 1), 2)); +.appBar__icon--theme_cupertino { + width: 24px; + height: 24px; } -[data-stackflow-activity-is-active="true"] .topNavigation__container--theme_cupertino { - opacity: calc(1 - pow(var(--stackflow-swipe-back-ratio, 0), 2)); +.appBar__root--theme_android { + height: 56px; + padding-inline: var(--seed-v3-dimension-s4); } -.topNavigation__iconButton--theme_cupertino { +.appBar__iconButton--theme_android { width: 40px; height: 40px; } -.topNavigation__iconButton--theme_cupertino:first-child { +.appBar__iconButton--theme_android:first-child { margin-left: -8px; } -.topNavigation__iconButton--theme_cupertino:last-child { +.appBar__iconButton--theme_android:last-child { margin-right: -8px; } -.topNavigation__icon--theme_cupertino { +.appBar__icon--theme_android { width: 24px; height: 24px; } -[data-stackflow-activity-is-active="true"] .topNavigation__icon--theme_cupertino[data-transition-state="enter-active"], [data-stackflow-activity-is-active="true"] .topNavigation__icon--theme_cupertino[data-transition-state="enter-done"] { - opacity: 1; +.appBar__left--theme_android { + padding-right: 16px; } -.topNavigation__titleMain--theme_cupertino { - text-align: center; - height: 100%; - left: 50%; - top: max(0px, env(safe-area-inset-top)); - justify-content: center; - align-items: center; - display: flex; - position: absolute; - transform: translate(-50%); +[data-global-transition-state="enter-active"] .appBar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before { + --seed-enter-translate-x: 100%; + --seed-enter-translate-y: 0; + --seed-enter-opacity: 1; + --seed-enter-scale: 1; + animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter; + transform: translate3d(0, 0, 0); } -.topNavigation__titleText--theme_cupertino { - font-size: var(--seed-v3-font-size-s6-static); - font-weight: var(--seed-v3-font-weight-bold); +[data-global-transition-state="exit-active"] .appBar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before { + 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: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit; } -.topNavigation__titleEdge--theme_cupertino { - display: block; +[data-global-transition-state="enter-done"] .appBar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before { + --seed-enter-translate-x: var(--swipe-back-displacement, 0); + --seed-enter-translate-y: 0; + --seed-enter-opacity: 1; + --seed-enter-scale: 1; + animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter; + transform: translate3d(0, 0, 0); } -.topNavigation__root--theme_android { - opacity: 0; - transition: background-color, box-shadow, transform .3s; - transform: translate3d(0, 160px, 0); +[data-global-transition-state="enter-active"] .appBar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] { + --seed-enter-translate-x: 0; + --seed-enter-translate-y: 0; + --seed-enter-opacity: 0; + --seed-enter-scale: 1; + opacity: 1; + animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter; } -.topNavigation__root--theme_android:is([data-transition-state="enter-active"], [data-transition-state="enter-done"]) { +[data-global-transition-state="exit-active"] .appBar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] { + 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: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit; +} + +[data-global-transition-state="enter-done"] .appBar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] { + --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; - transform: translate3d(0, 0, 0); + animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter; } -.topNavigation__container--theme_android { - height: 56px; - padding-inline: var(--seed-v3-dimension-s4); +[data-swipe-back-state="swiping"] .appBar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) { + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + animation: none; } -.topNavigation__iconButton--theme_android { - width: 40px; - height: 40px; +[data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .appBar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + opacity: 1; + --seed-exit-translate-x: 0; + --seed-exit-translate-y: 0; + --seed-exit-opacity: 0; + --seed-exit-scale: 1; + animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit; } -.topNavigation__iconButton--theme_android:first-child { - margin-left: -8px; +[data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .appBar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + --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: .3s cubic-bezier(.22, .1, .3, .85) seed-enter; } -.topNavigation__iconButton--theme_android:last-child { - margin-right: -8px; +[data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .appBar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + 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: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit; } -.topNavigation__icon--theme_android { - width: 24px; - height: 24px; +[data-swipe-back-state="swiping"] .appBar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) { + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + animation: none; } -.topNavigation__titleMain--theme_android { - box-sizing: border-box; - justify-content: flex-start; - width: 100%; - padding-left: 16px; +[data-global-transition-state="enter-active"] .appBar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] { + --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); } -.topNavigation__titleText--theme_android { - font-size: var(--seed-v3-font-size-s6-static); - font-weight: var(--seed-v3-font-weight-bold); +[data-global-transition-state="exit-active"] .appBar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] { + 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); } -.topNavigation__root--tone_layer { +.appBar__root--tone_layer:before { background-color: var(--seed-v3-color-bg-layer-default); } -.topNavigation__icon--tone_layer, .topNavigation__titleMain--tone_layer { +.appBar__icon--tone_layer { color: var(--seed-v3-color-fg-neutral); } -.topNavigation__root--tone_transparent { +.appBar__root--tone_transparent:before { background-color: #0000; } -.topNavigation__icon--tone_transparent, .topNavigation__titleMain--tone_transparent { +.appBar__icon--tone_transparent { color: var(--seed-v3-color-palette-static-white); } -.topNavigation__root--border_true { +.appBar__root--divider_true { box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-v3-color-stroke-neutral-muted); } -.visuallyHidden__root { - clip: rect(0 0 0 0); +.appBarMain__root { + flex: 1; + height: 100%; +} + +.appBarMain__title, .appBarMain__subtitle { white-space: nowrap; - border: 0; - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - position: absolute; + text-overflow: ellipsis; overflow: hidden; } + +.appBarMain__title--layout_titleOnly { + font-size: var(--seed-v3-font-size-s6-static); + font-weight: var(--seed-v3-font-weight-bold); +} + +.appBarMain__title--layout_withSubtitle { + font-size: var(--seed-v3-font-size-s5-static); + font-weight: var(--seed-v3-font-weight-bold); +} + +.appBarMain__subtitle--layout_withSubtitle { + font-size: var(--seed-v3-font-size-s2-static); + font-weight: var(--seed-v3-font-weight-regular); +} + +.appBarMain__root--theme_cupertino { + text-align: center; + height: 100%; + padding-inline: var(--centered-title-padding-x, 0); + pointer-events: none; + justify-content: center; + align-items: center; + display: flex; + position: absolute; + left: 0; + right: 0; +} + +.appBarMain__root--theme_android { + justify-content: flex-start; + align-items: center; + width: 100%; + display: flex; +} + +[data-global-transition-state="enter-active"] .appBarMain__root--transitionStyle_slideFromRightIOS[data-activity-is-top] { + --seed-enter-translate-x: 25%; + --seed-enter-translate-y: 0; + --seed-enter-opacity: 0; + --seed-enter-scale: 1; + opacity: 1; + animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter; + transform: translate3d(0, 0, 0); +} + +[data-global-transition-state="exit-active"] .appBarMain__root--transitionStyle_slideFromRightIOS[data-activity-is-top] { + transform: translate3d(var(--swipe-back-displacement, 0) * .25, 0, 0); + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + --seed-exit-translate-x: 25%; + --seed-exit-translate-y: 0; + --seed-exit-opacity: 0; + --seed-exit-scale: 1; + animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit; +} + +[data-global-transition-state="enter-done"] .appBarMain__root--transitionStyle_slideFromRightIOS[data-activity-is-top] { + --seed-enter-translate-x: var(--swipe-back-displacement, 0) * .25; + --seed-enter-translate-y: 0; + --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + --seed-enter-scale: 1; + opacity: 1; + animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter; + transform: translate3d(0, 0, 0); +} + +[data-swipe-back-state="swiping"] .appBarMain__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) { + transform: translate3d(var(--swipe-back-displacement, 0) * .25, 0, 0); + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + animation: none; +} + +[data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .appBarMain__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + opacity: 1; + --seed-exit-translate-x: -25%; + --seed-exit-translate-y: 0; + --seed-exit-opacity: 0; + --seed-exit-scale: 1; + animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit; + transform: translate3d(0, 0, 0); +} + +[data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .appBarMain__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + --seed-enter-translate-x: calc(-25% + var(--swipe-back-displacement, 0) * .25); + --seed-enter-translate-y: 0; + --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + --seed-enter-scale: 1; + opacity: 1; + animation: .3s cubic-bezier(.22, .1, .3, .85) seed-enter; + transform: translate3d(0, 0, 0); +} + +[data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .appBarMain__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) { + transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * .25), 0, 0); + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + --seed-exit-translate-x: -25%; + --seed-exit-translate-y: 0; + --seed-exit-opacity: 0; + --seed-exit-scale: 1; + animation: .3s cubic-bezier(.22, .1, .3, .85) forwards seed-exit; +} + +[data-swipe-back-state="swiping"] .appBarMain__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) { + transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * .25), 0, 0); + opacity: calc(1 - var(--swipe-back-displacement-ratio, 0)); + animation: none; +} + +.appBarMain__root--tone_layer, .appBarMain__title--tone_layer { + color: var(--seed-v3-color-fg-neutral); +} + +.appBarMain__subtitle--tone_layer { + color: var(--seed-v3-color-fg-neutral-muted); +} + +.appBarMain__root--tone_transparent, .appBarMain__title--tone_transparent, .appBarMain__subtitle--tone_transparent { + color: var(--seed-v3-color-palette-static-white); +} diff --git a/packages/stylesheet/component.min.css b/packages/stylesheet/component.min.css index 8250d8318..4cab6b2c6 100644 --- a/packages/stylesheet/component.min.css +++ b/packages/stylesheet/component.min.css @@ -1 +1 @@ -.avatar__root{box-sizing:border-box;vertical-align:top;border-radius:var(--seed-v3-radius-full);justify-content:center;align-items:center;display:inline-flex;position:relative}.avatar__image{object-fit:cover;border-radius:var(--seed-v3-radius-full);width:100%;height:100%;display:block;overflow:hidden}.avatar__image:not([data-loading-status=loaded]){display:none}.avatar__fallback{object-fit:cover;border-radius:var(--seed-v3-radius-full);justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}.avatar__fallback[data-loading-status=loaded]{display:none}.avatar__badge{box-sizing:border-box;z-index:1;background:var(--seed-v3-color-bg-layer-default);border-radius:var(--seed-v3-radius-full);justify-content:center;align-items:center;display:flex;position:absolute}.avatar__root--size_20{width:20px;height:20px}.avatar__badge--size_20{width:10px;height:10px;top:12.0721px;left:12.0721px}.avatar__root--size_24{width:24px;height:24px}.avatar__badge--size_24{width:12px;height:12px;top:14.4866px;left:14.4866px}.avatar__root--size_36{width:36px;height:36px}.avatar__badge--size_36{width:16px;height:16px;top:22.7298px;left:22.7298px}.avatar__root--size_48{width:48px;height:48px}.avatar__badge--size_48{width:24px;height:24px;top:28.9731px;left:28.9731px}.avatar__root--size_64{width:64px;height:64px}.avatar__badge--size_64{width:24px;height:24px;top:42.6308px;left:42.6308px}.avatar__root--size_80{width:80px;height:80px}.avatar__badge--size_80{width:24px;height:24px;top:56.2885px;left:56.2885px}.avatar__root--size_96{width:96px;height:96px}.avatar__badge--size_96{width:32px;height:32px;top:65.9463px;left:65.9463px}.avatarStack__root{box-sizing:border-box;align-items:center;display:inline-flex}.avatarStack__item{border-radius:var(--seed-v3-radius-full);background-clip:padding-box;display:block}.avatarStack__item--size_20:not(:first-child){margin-left:-5px}.avatarStack__item--size_20{clip-path:inset(-2px);box-shadow:0 0 0 2px var(--seed-v3-color-bg-layer-default)}.avatarStack__item--size_24:not(:first-child){margin-left:-6px}.avatarStack__item--size_24{clip-path:inset(-2px);box-shadow:0 0 0 2px var(--seed-v3-color-bg-layer-default)}.avatarStack__item--size_36:not(:first-child){margin-left:-8px}.avatarStack__item--size_36{clip-path:inset(-3px);box-shadow:0 0 0 3px var(--seed-v3-color-bg-layer-default)}.avatarStack__item--size_48:not(:first-child){margin-left:-10px}.avatarStack__item--size_48{clip-path:inset(-4px);box-shadow:0 0 0 4px var(--seed-v3-color-bg-layer-default)}.avatarStack__item--size_64:not(:first-child){margin-left:-10px}.avatarStack__item--size_64{clip-path:inset(-4px);box-shadow:0 0 0 4px var(--seed-v3-color-bg-layer-default)}.actionButton__root{box-sizing:border-box;cursor:pointer;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border:none;flex-shrink:0;justify-content:center;align-items:center;font-family:inherit;text-decoration:none;display:inline-flex}.actionButton__root:is(:focus,[data-focus]){outline:none}.actionButton__root:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.actionButton__root{transition:background-color var(--seed-v3-duration-s4)var(--seed-v3-timing-function-easing);font-weight:var(--seed-v3-font-weight-bold)}.actionButton__label[data-loading]{opacity:0}.actionButton__icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.actionButton__icon[data-loading]{opacity:0}.actionButton__prefixIcon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.actionButton__prefixIcon[data-loading]{opacity:0}.actionButton__suffixIcon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.actionButton__suffixIcon[data-loading]{opacity:0}.actionButton__progressIndicator{display:none;position:absolute}.actionButton__progressIndicator[data-loading]{display:flex}.actionButton__root--variant_brandSolid{background:var(--seed-v3-color-bg-brand-solid)}.actionButton__root--variant_brandSolid:is(:active,[data-active]){background:var(--seed-v3-color-bg-brand-solid-pressed)}.actionButton__root--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled)}.actionButton__root--variant_brandSolid[data-loading]{background:var(--seed-v3-color-bg-brand-solid-pressed)}.actionButton__label--variant_brandSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__label--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__icon--variant_brandSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__icon--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__prefixIcon--variant_brandSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__prefixIcon--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__suffixIcon--variant_brandSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__suffixIcon--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__progressIndicator--variant_brandSolid{--track-color:var(--seed-v3-color-palette-static-white-alpha-200);--range-color:var(--seed-v3-color-palette-static-white)}.actionButton__root--variant_neutralSolid{background:var(--seed-v3-color-bg-neutral-inverted)}.actionButton__root--variant_neutralSolid:is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-inverted-pressed)}.actionButton__root--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled)}.actionButton__root--variant_neutralSolid[data-loading]{background:var(--seed-v3-color-bg-neutral-inverted-pressed)}.actionButton__label--variant_neutralSolid{color:var(--seed-v3-color-fg-neutral-inverted)}.actionButton__label--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__icon--variant_neutralSolid{color:var(--seed-v3-color-fg-neutral-inverted)}.actionButton__icon--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__prefixIcon--variant_neutralSolid{color:var(--seed-v3-color-fg-neutral-inverted)}.actionButton__prefixIcon--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__suffixIcon--variant_neutralSolid{color:var(--seed-v3-color-fg-neutral-inverted)}.actionButton__suffixIcon--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__progressIndicator--variant_neutralSolid{--track-color:var(--seed-v3-color-palette-static-white-alpha-200);--range-color:var(--seed-v3-color-palette-static-white)}.actionButton__root--variant_neutralWeak{background:var(--seed-v3-color-bg-neutral-weak)}.actionButton__root--variant_neutralWeak:is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-weak-pressed)}.actionButton__root--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled)}.actionButton__root--variant_neutralWeak[data-loading]{background:var(--seed-v3-color-bg-neutral-weak-pressed)}.actionButton__label--variant_neutralWeak{color:var(--seed-v3-color-fg-neutral)}.actionButton__label--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__icon--variant_neutralWeak{color:var(--seed-v3-color-fg-neutral)}.actionButton__icon--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__prefixIcon--variant_neutralWeak{color:var(--seed-v3-color-fg-neutral)}.actionButton__prefixIcon--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__suffixIcon--variant_neutralWeak{color:var(--seed-v3-color-fg-neutral)}.actionButton__suffixIcon--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__progressIndicator--variant_neutralWeak{--track-color:var(--seed-v3-color-palette-gray-500);--range-color:var(--seed-v3-color-fg-neutral)}.actionButton__root--variant_criticalSolid{background:var(--seed-v3-color-bg-critical-solid)}.actionButton__root--variant_criticalSolid:is(:active,[data-active]){background:var(--seed-v3-color-bg-critical-solid-pressed)}.actionButton__root--variant_criticalSolid:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled)}.actionButton__root--variant_criticalSolid[data-loading]{background:var(--seed-v3-color-bg-critical-solid-pressed)}.actionButton__label--variant_criticalSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__label--variant_criticalSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__icon--variant_criticalSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__icon--variant_criticalSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__prefixIcon--variant_criticalSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__prefixIcon--variant_criticalSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__suffixIcon--variant_criticalSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__suffixIcon--variant_criticalSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__progressIndicator--variant_criticalSolid{--track-color:var(--seed-v3-color-palette-static-white-alpha-200);--range-color:var(--seed-v3-color-palette-static-white)}.actionButton__root--variant_brandOutline{background:var(--seed-v3-color-bg-layer-default);border-style:solid;border-width:1px;border-color:var(--seed-v3-color-stroke-neutral)}.actionButton__root--variant_brandOutline:is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-default-pressed)}.actionButton__root--variant_brandOutline:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-layer-default);border-color:var(--seed-v3-color-stroke-neutral)}.actionButton__root--variant_brandOutline[data-loading]{background:var(--seed-v3-color-bg-layer-default)}.actionButton__label--variant_brandOutline{color:var(--seed-v3-color-fg-brand)}.actionButton__label--variant_brandOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__icon--variant_brandOutline{color:var(--seed-v3-color-fg-brand)}.actionButton__icon--variant_brandOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__prefixIcon--variant_brandOutline{color:var(--seed-v3-color-fg-brand)}.actionButton__prefixIcon--variant_brandOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__suffixIcon--variant_brandOutline{color:var(--seed-v3-color-fg-brand)}.actionButton__suffixIcon--variant_brandOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__progressIndicator--variant_brandOutline{--track-color:var(--seed-v3-color-palette-carrot-200);--range-color:var(--seed-v3-color-bg-brand-solid)}.actionButton__root--variant_neutralOutline{background:var(--seed-v3-color-bg-layer-default);border-style:solid;border-width:1px;border-color:var(--seed-v3-color-stroke-neutral)}.actionButton__root--variant_neutralOutline:is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-default-pressed)}.actionButton__root--variant_neutralOutline:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-layer-default);border-color:var(--seed-v3-color-stroke-neutral)}.actionButton__root--variant_neutralOutline[data-loading]{background:var(--seed-v3-color-bg-layer-default)}.actionButton__label--variant_neutralOutline{color:var(--seed-v3-color-fg-neutral)}.actionButton__label--variant_neutralOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__icon--variant_neutralOutline{color:var(--seed-v3-color-fg-neutral)}.actionButton__icon--variant_neutralOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__prefixIcon--variant_neutralOutline{color:var(--seed-v3-color-fg-neutral)}.actionButton__prefixIcon--variant_neutralOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__suffixIcon--variant_neutralOutline{color:var(--seed-v3-color-fg-neutral)}.actionButton__suffixIcon--variant_neutralOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__progressIndicator--variant_neutralOutline{--track-color:var(--seed-v3-color-palette-gray-500);--range-color:var(--seed-v3-color-fg-neutral)}.actionButton__root--size_xsmall{height:var(--seed-v3-dimension-s8);border-radius:var(--seed-v3-radius-full)}.actionButton__progressIndicator--size_xsmall{--size:14px;--thickness:2px}.actionButton__root--size_small{height:var(--seed-v3-dimension-s9);border-radius:var(--seed-v3-radius-s2)}.actionButton__progressIndicator--size_small{--size:14px;--thickness:2px}.actionButton__root--size_medium{height:var(--seed-v3-dimension-s10);border-radius:var(--seed-v3-radius-s2)}.actionButton__progressIndicator--size_medium{--size:16px;--thickness:2px}.actionButton__root--size_large{height:var(--seed-v3-dimension-s13);border-radius:var(--seed-v3-radius-s3)}.actionButton__progressIndicator--size_large{--size:18px;--thickness:2px}.actionButton__root--size_xsmall-layout_withText{gap:var(--seed-v3-dimension-s1);padding-inline:var(--seed-v3-dimension-s3_5);padding-block:var(--seed-v3-dimension-s1_5)}.actionButton__label--size_xsmall-layout_withText{font-size:var(--seed-v3-font-size-s4)}.actionButton__prefixIcon--size_xsmall-layout_withText,.actionButton__suffixIcon--size_xsmall-layout_withText{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.actionButton__root--size_xsmall-layout_iconOnly{min-width:var(--seed-v3-dimension-s8);padding-inline:var(--seed-v3-dimension-s1_5);padding-block:var(--seed-v3-dimension-s1_5)}.actionButton__icon--size_xsmall-layout_iconOnly{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.actionButton__root--size_small-layout_withText{gap:var(--seed-v3-dimension-s1);padding-inline:var(--seed-v3-dimension-s3_5);padding-block:var(--seed-v3-dimension-s2)}.actionButton__label--size_small-layout_withText{font-size:var(--seed-v3-font-size-s4)}.actionButton__prefixIcon--size_small-layout_withText,.actionButton__suffixIcon--size_small-layout_withText{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.actionButton__root--size_small-layout_iconOnly{min-width:var(--seed-v3-dimension-s9);padding-inline:var(--seed-v3-dimension-s2);padding-block:var(--seed-v3-dimension-s2)}.actionButton__icon--size_small-layout_iconOnly{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.actionButton__root--size_medium-layout_withText{gap:var(--seed-v3-dimension-s1);padding-inline:var(--seed-v3-dimension-s4);padding-block:var(--seed-v3-dimension-s2_5)}.actionButton__label--size_medium-layout_withText{font-size:var(--seed-v3-font-size-s4)}.actionButton__prefixIcon--size_medium-layout_withText,.actionButton__suffixIcon--size_medium-layout_withText{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.actionButton__root--size_medium-layout_iconOnly{min-width:var(--seed-v3-dimension-s10);padding-inline:var(--seed-v3-dimension-s2_5);padding-block:var(--seed-v3-dimension-s2_5)}.actionButton__icon--size_medium-layout_iconOnly{width:18px;height:18px}.actionButton__root--size_large-layout_withText{gap:var(--seed-v3-dimension-s2);padding-inline:var(--seed-v3-dimension-s5);padding-block:var(--seed-v3-dimension-s3_5)}.actionButton__label--size_large-layout_withText{font-size:var(--seed-v3-font-size-s6)}.actionButton__prefixIcon--size_large-layout_withText,.actionButton__suffixIcon--size_large-layout_withText{width:22px;height:22px}.actionButton__root--size_large-layout_iconOnly{min-width:var(--seed-v3-dimension-s13);padding-inline:var(--seed-v3-dimension-s3_5);padding-block:var(--seed-v3-dimension-s3_5)}.actionButton__icon--size_large-layout_iconOnly{width:22px;height:22px}.toggleButton__root{box-sizing:border-box;cursor:pointer;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border:none;flex-shrink:0;justify-content:center;align-items:center;font-family:inherit;text-decoration:none;display:inline-flex}.toggleButton__root:is(:focus,[data-focus]){outline:none}.toggleButton__root:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.toggleButton__root{transition:background-color var(--seed-v3-duration-s4)var(--seed-v3-timing-function-easing)}.toggleButton__label{font-weight:var(--seed-v3-font-weight-bold)}.toggleButton__label[data-loading]{opacity:0}.toggleButton__prefixIcon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.toggleButton__prefixIcon[data-loading]{opacity:0}.toggleButton__suffixIcon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.toggleButton__suffixIcon[data-loading]{opacity:0}.toggleButton__progressIndicator{display:none;position:absolute}.toggleButton__progressIndicator[data-loading]{display:flex}.toggleButton__root--variant_brandSolid{background:var(--seed-v3-color-bg-brand-solid)}.toggleButton__root--variant_brandSolid:is(:active,[data-active]){background:var(--seed-v3-color-bg-brand-solid-pressed)}.toggleButton__root--variant_brandSolid:is([aria-pressed=true],[data-pressed]){background:var(--seed-v3-color-bg-neutral-weak)}.toggleButton__root--variant_brandSolid:is([aria-pressed=true],[data-pressed]):is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-weak-pressed)}.toggleButton__root--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled)}.toggleButton__root--variant_brandSolid[data-loading]{background:var(--seed-v3-color-bg-brand-solid-pressed)}.toggleButton__root--variant_brandSolid:is([aria-pressed=true],[data-pressed])[data-loading]{background:var(--seed-v3-color-bg-neutral-weak-pressed)}.toggleButton__label--variant_brandSolid{color:var(--seed-v3-color-palette-static-white)}.toggleButton__label--variant_brandSolid:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-neutral)}.toggleButton__label--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.toggleButton__prefixIcon--variant_brandSolid{color:var(--seed-v3-color-palette-static-white)}.toggleButton__prefixIcon--variant_brandSolid:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-neutral)}.toggleButton__prefixIcon--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.toggleButton__suffixIcon--variant_brandSolid{color:var(--seed-v3-color-palette-static-white)}.toggleButton__suffixIcon--variant_brandSolid:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-neutral)}.toggleButton__suffixIcon--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.toggleButton__progressIndicator--variant_brandSolid{--track-color:var(--seed-v3-color-palette-static-white-alpha-200);--range-color:var(--seed-v3-color-palette-static-white)}.toggleButton__progressIndicator--variant_brandSolid:is([aria-pressed=true],[data-pressed]){--track-color:var(--seed-v3-color-palette-gray-500);--range-color:var(--seed-v3-color-fg-neutral)}.toggleButton__root--variant_neutralWeak{background:var(--seed-v3-color-bg-neutral-weak)}.toggleButton__root--variant_neutralWeak:is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-weak-pressed)}.toggleButton__root--variant_neutralWeak:is([aria-pressed=true],[data-pressed]){background:var(--seed-v3-color-bg-neutral-weak)}.toggleButton__root--variant_neutralWeak:is([aria-pressed=true],[data-pressed]):is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-weak-pressed)}.toggleButton__root--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled)}.toggleButton__root--variant_neutralWeak[data-loading],.toggleButton__root--variant_neutralWeak:is([aria-pressed=true],[data-pressed])[data-loading]{background:var(--seed-v3-color-bg-neutral-weak-pressed)}.toggleButton__label--variant_neutralWeak,.toggleButton__label--variant_neutralWeak:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-neutral)}.toggleButton__label--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.toggleButton__prefixIcon--variant_neutralWeak,.toggleButton__prefixIcon--variant_neutralWeak:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-neutral)}.toggleButton__prefixIcon--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.toggleButton__suffixIcon--variant_neutralWeak,.toggleButton__suffixIcon--variant_neutralWeak:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-neutral)}.toggleButton__suffixIcon--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.toggleButton__progressIndicator--variant_neutralWeak,.toggleButton__progressIndicator--variant_neutralWeak:is([aria-pressed=true],[data-pressed]){--track-color:var(--seed-v3-color-palette-gray-500);--range-color:var(--seed-v3-color-fg-neutral)}.toggleButton__root--size_xsmall{height:var(--seed-v3-dimension-s8);border-radius:var(--seed-v3-radius-full);gap:var(--seed-v3-dimension-s1);padding-inline:var(--seed-v3-dimension-s3_5);padding-block:var(--seed-v3-dimension-s1_5)}.toggleButton__label--size_xsmall{font-size:var(--seed-v3-font-size-s4)}.toggleButton__prefixIcon--size_xsmall,.toggleButton__suffixIcon--size_xsmall{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.toggleButton__progressIndicator--size_xsmall{--size:14px;--thickness:2px}.toggleButton__root--size_small{height:var(--seed-v3-dimension-s9);border-radius:var(--seed-v3-radius-full);gap:var(--seed-v3-dimension-s1);padding-inline:var(--seed-v3-dimension-s4);padding-block:var(--seed-v3-dimension-s2)}.toggleButton__label--size_small{font-size:var(--seed-v3-font-size-s4)}.toggleButton__prefixIcon--size_small,.toggleButton__suffixIcon--size_small{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.toggleButton__progressIndicator--size_small{--size:14px;--thickness:2px}.reactionButton__root{box-sizing:border-box;cursor:pointer;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border:none;flex-shrink:0;justify-content:center;align-items:center;font-family:inherit;text-decoration:none;display:inline-flex}.reactionButton__root:is(:focus,[data-focus]){outline:none}.reactionButton__root{transition:background-color var(--seed-v3-duration-s4)var(--seed-v3-timing-function-easing);background:var(--seed-v3-color-bg-neutral-weak)}.reactionButton__root:is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-weak-pressed)}.reactionButton__root:is([aria-pressed=true],[data-pressed]){background:var(--seed-v3-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-brand)}.reactionButton__root:is([aria-pressed=true],[data-pressed]):is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-default-pressed)}.reactionButton__root:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed;background:var(--seed-v3-color-bg-disabled);box-shadow:inset 0 0 0 0px var(--seed-v3-color-stroke-brand)}.reactionButton__root[data-loading]{background:var(--seed-v3-color-bg-neutral-weak-pressed)}.reactionButton__root:is([aria-pressed=true],[data-pressed])[data-loading]{background:var(--seed-v3-color-bg-layer-default-pressed);box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-brand)}.reactionButton__label{font-weight:var(--seed-v3-font-weight-medium);color:var(--seed-v3-color-fg-neutral)}.reactionButton__label:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-brand)}.reactionButton__label:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.reactionButton__label[data-loading]{opacity:0}.reactionButton__count{font-weight:var(--seed-v3-font-weight-bold);color:var(--seed-v3-color-fg-neutral)}.reactionButton__count:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-brand)}.reactionButton__count:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.reactionButton__count[data-loading]{opacity:0}.reactionButton__prefixIcon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.reactionButton__prefixIcon:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-brand)}.reactionButton__prefixIcon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.reactionButton__prefixIcon[data-loading]{opacity:0}.reactionButton__progressIndicator{--track-color:var(--seed-v3-color-palette-gray-500);--range-color:var(--seed-v3-color-fg-neutral);display:none;position:absolute}.reactionButton__progressIndicator:is([aria-pressed=true],[data-pressed]){--track-color:var(--seed-v3-color-palette-carrot-200);--range-color:var(--seed-v3-color-fg-brand)}.reactionButton__progressIndicator[data-loading]{display:flex}.reactionButton__root--size_xsmall{height:var(--seed-v3-dimension-s8);border-radius:var(--seed-v3-radius-full);gap:var(--seed-v3-dimension-s1);padding-inline:var(--seed-v3-dimension-s3);padding-block:var(--seed-v3-dimension-s1_5)}.reactionButton__label--size_xsmall,.reactionButton__count--size_xsmall{font-size:var(--seed-v3-font-size-s3);line-height:var(--seed-v3-line-height-s3)}.reactionButton__prefixIcon--size_xsmall{width:18px;height:18px}.reactionButton__progressIndicator--size_xsmall{--size:14px;--thickness:2px}.reactionButton__root--size_small{height:var(--seed-v3-dimension-s9);border-radius:var(--seed-v3-radius-full);gap:var(--seed-v3-dimension-s1);padding-inline:var(--seed-v3-dimension-s3_5);padding-block:var(--seed-v3-dimension-s2)}.reactionButton__label--size_small,.reactionButton__count--size_small{font-size:var(--seed-v3-font-size-s3);line-height:var(--seed-v3-line-height-s3)}.reactionButton__prefixIcon--size_small{width:18px;height:18px}.reactionButton__progressIndicator--size_small{--size:14px;--thickness:2px}.bottomSheet__positioner{overscroll-behavior-y:none;--sheet-z-index:2;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.bottomSheet__backdrop{background:var(--seed-v3-color-bg-overlay);z-index:calc(var(--sheet-z-index) + var(--layer-index,0));position:fixed;inset:0}.bottomSheet__backdrop:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s2);--seed-exit-translate-x:0;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1;animation-fill-mode:forwards}.bottomSheet__backdrop:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter);animation-duration:var(--seed-v3-duration-s2);--seed-enter-translate-x:0;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}.bottomSheet__content{box-sizing:border-box;word-break:break-all;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));background:var(--seed-v3-color-bg-layer-default);border-top-left-radius:var(--seed-v3-radius-s6);border-top-right-radius:var(--seed-v3-radius-s6);flex-direction:column;flex:1;display:flex;position:relative}.bottomSheet__content:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s4);--seed-exit-translate-x:0;--seed-exit-translate-y:100%;--seed-exit-opacity:1;--seed-exit-scale:1;animation-fill-mode:forwards}.bottomSheet__content:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter-expressive);animation-duration:var(--seed-v3-duration-s6);--seed-enter-translate-x:0;--seed-enter-translate-y:100%;--seed-enter-opacity:1;--seed-enter-scale:1}.bottomSheet__header{gap:var(--seed-v3-dimension-s2);padding-inline:var(--seed-v3-dimension-spacing-x-global-gutter);padding-top:var(--seed-v3-dimension-s6);padding-bottom:var(--seed-v3-dimension-s4);flex-direction:column;display:flex}.bottomSheet__title{color:var(--seed-v3-color-fg-neutral);font-size:var(--seed-v3-font-size-s8);line-height:var(--seed-v3-line-height-s8);font-weight:var(--seed-v3-font-weight-bold);margin:0}.bottomSheet__description{color:var(--seed-v3-color-fg-neutral-muted);font-size:var(--seed-v3-font-size-s6);line-height:var(--seed-v3-line-height-s6);font-weight:var(--seed-v3-font-weight-regular);white-space:pre-wrap;margin:0}.bottomSheet__body{padding-inline:var(--seed-v3-dimension-spacing-x-global-gutter);flex-direction:column;display:flex}.bottomSheet__footer{padding-inline:var(--seed-v3-dimension-spacing-x-global-gutter);padding-top:var(--seed-v3-dimension-s3);padding-bottom:var(--seed-v3-dimension-s4);flex-direction:column;display:flex}.bottomSheet__closeButton{top:var(--seed-v3-dimension-s5);right:var(--seed-v3-dimension-s5);border-radius:var(--seed-v3-radius-full);background:var(--seed-v3-color-palette-gray-300);justify-content:center;align-items:center;width:28px;height:28px;display:flex;position:absolute}.bottomSheet__closeButton:after{content:"";position:absolute;inset:-8px}.bottomSheet__closeIcon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0;width:14px;height:14px}.actionSheet__positioner{overscroll-behavior-y:none;--sheet-z-index:2;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.actionSheet__backdrop{background:var(--seed-v3-color-bg-overlay);z-index:calc(var(--sheet-z-index) + var(--layer-index,0));position:fixed;inset:0}.actionSheet__backdrop:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s2);--seed-exit-translate-x:0;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1;animation-fill-mode:forwards}.actionSheet__backdrop:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter);animation-duration:var(--seed-v3-duration-s2);--seed-enter-translate-x:0;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}.actionSheet__content{box-sizing:border-box;word-break:break-all;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));background:var(--seed-v3-color-bg-layer-floating);border-top-left-radius:var(--seed-v3-radius-s5);border-top-right-radius:var(--seed-v3-radius-s5);flex-direction:column;flex:1;display:flex;position:relative}.actionSheet__content:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s4);--seed-exit-translate-x:0;--seed-exit-translate-y:100%;--seed-exit-opacity:1;--seed-exit-scale:1;animation-fill-mode:forwards}.actionSheet__content:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter-expressive);animation-duration:var(--seed-v3-duration-s6);--seed-enter-translate-x:0;--seed-enter-translate-y:100%;--seed-enter-opacity:1;--seed-enter-scale:1}.actionSheet__header{padding-inline:var(--seed-v3-dimension-spacing-x-global-gutter);padding-block:var(--seed-v3-dimension-s3_5);align-items:center;gap:var(--seed-v3-dimension-s1);flex-direction:column;display:flex;position:relative}.actionSheet__header:after{content:"";left:var(--seed-v3-dimension-spacing-x-global-gutter);right:var(--seed-v3-dimension-spacing-x-global-gutter);background:var(--seed-v3-color-stroke-neutral);height:1px;display:block;position:absolute;bottom:0}.actionSheet__title{color:var(--seed-v3-color-fg-neutral-muted);font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4);font-weight:var(--seed-v3-font-weight-bold)}.actionSheet__description{color:var(--seed-v3-color-fg-neutral-muted);font-size:var(--seed-v3-font-size-s3);line-height:var(--seed-v3-line-height-s3);font-weight:var(--seed-v3-font-weight-regular)}.actionSheet__list{flex-direction:column;align-items:stretch;display:flex}.actionSheetItem__root{background-color:var(--seed-v3-color-bg-layer-floating);min-height:50px;padding-inline:var(--seed-v3-dimension-spacing-x-global-gutter);padding-block:var(--seed-v3-dimension-s3_5);justify-content:center;align-items:center;display:flex;position:relative}.actionSheetItem__root:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-floating-pressed)}.actionSheetItem__root:after{content:"";left:var(--seed-v3-dimension-spacing-x-global-gutter);right:var(--seed-v3-dimension-spacing-x-global-gutter);background:var(--seed-v3-color-stroke-neutral);height:1px;display:block;position:absolute;bottom:0}.actionSheetItem__label{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5);font-weight:var(--seed-v3-font-weight-regular)}.actionSheetItem__label--tone_neutral{color:var(--seed-v3-color-fg-neutral)}.actionSheetItem__label--tone_critical{color:var(--seed-v3-color-fg-critical)}.actionSheetCloseButton__root{background-color:var(--seed-v3-color-bg-layer-floating);min-height:50px;padding-inline:var(--seed-v3-dimension-spacing-x-global-gutter);padding-block:var(--seed-v3-dimension-s3_5);justify-content:center;align-items:center;display:flex}.actionSheetCloseButton__root:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-floating-pressed)}.actionSheetCloseButton__label{color:var(--seed-v3-color-fg-neutral);font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5);font-weight:var(--seed-v3-font-weight-bold)}.extendedActionSheet__positioner{overscroll-behavior-y:none;--sheet-z-index:2;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.extendedActionSheet__backdrop{background:var(--seed-v3-color-bg-overlay);z-index:calc(var(--sheet-z-index) + var(--layer-index,0));position:fixed;inset:0}.extendedActionSheet__backdrop:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s2);--seed-exit-translate-x:0;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1;animation-fill-mode:forwards}.extendedActionSheet__backdrop:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter);animation-duration:var(--seed-v3-duration-s2);--seed-enter-translate-x:0;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}.extendedActionSheet__content{box-sizing:border-box;word-break:break-all;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));background:var(--seed-v3-color-bg-layer-floating);padding-inline:var(--seed-v3-dimension-spacing-x-global-gutter);padding-block:var(--seed-v3-dimension-s4);border-top-left-radius:var(--seed-v3-radius-s5);border-top-right-radius:var(--seed-v3-radius-s5);flex-direction:column;flex:1;display:flex;position:relative}.extendedActionSheet__content:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s4);--seed-exit-translate-x:0;--seed-exit-translate-y:100%;--seed-exit-opacity:1;--seed-exit-scale:1;animation-fill-mode:forwards}.extendedActionSheet__content:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter-expressive);animation-duration:var(--seed-v3-duration-s6);--seed-enter-translate-x:0;--seed-enter-translate-y:100%;--seed-enter-opacity:1;--seed-enter-scale:1}.extendedActionSheet__header{align-items:center;gap:var(--seed-v3-dimension-s1);padding-bottom:var(--seed-v3-dimension-s4);flex-direction:column;display:flex}.extendedActionSheet__title{color:var(--seed-v3-color-fg-neutral);font-size:var(--seed-v3-font-size-s6);line-height:var(--seed-v3-line-height-s6);font-weight:var(--seed-v3-font-weight-bold)}.extendedActionSheet__list{align-items:stretch;gap:var(--seed-v3-dimension-s2_5);flex-direction:column;display:flex}.extendedActionSheet__group{border-radius:var(--seed-v3-radius-s4);flex-direction:column;align-items:stretch;display:flex;overflow:hidden}.extendedActionSheet__footer{padding-top:var(--seed-v3-dimension-s2_5);flex-direction:column;align-items:stretch;display:flex}.extendedActionSheetItem__root{background-color:var(--seed-v3-color-bg-neutral-weak);min-height:52px;padding-inline:var(--seed-v3-dimension-s4);padding-block:var(--seed-v3-dimension-s3_5);justify-content:flex-start;align-items:center;gap:var(--seed-v3-dimension-s3_5);box-shadow:inset 0 calc(-1*1px)0 var(--seed-v3-color-stroke-neutral);display:flex}.extendedActionSheetItem__root:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-neutral-weak-pressed)}.extendedActionSheetItem__root:last-child{box-shadow:none}.extendedActionSheetItem__label{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5);font-weight:var(--seed-v3-font-weight-regular)}.extendedActionSheetItem__prefixIcon{flex-shrink:0;width:22px;height:22px;display:inline-flex}.extendedActionSheetItem__label--tone_neutral,.extendedActionSheetItem__prefixIcon--tone_neutral{color:var(--seed-v3-color-fg-neutral)}.extendedActionSheetItem__label--tone_critical,.extendedActionSheetItem__prefixIcon--tone_critical{color:var(--seed-v3-color-fg-critical)}.extendedActionSheetCloseButton__root{background-color:var(--seed-v3-color-bg-neutral-weak);min-height:52px;padding-inline:var(--seed-v3-dimension-s5);padding-block:var(--seed-v3-dimension-s3_5);border-radius:var(--seed-v3-radius-s3);justify-content:center;align-items:center;display:flex}.extendedActionSheetCloseButton__root:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-neutral-weak-pressed)}.extendedActionSheetCloseButton__label{color:var(--seed-v3-color-fg-neutral);font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5);font-weight:var(--seed-v3-font-weight-medium)}.fab__root{box-sizing:border-box;cursor:pointer;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border:none;justify-content:center;align-items:center;font-family:inherit;text-decoration:none;display:inline-flex}.fab__root:is(:focus,[data-focus]){outline:none}.fab__root:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.fab__root{background:var(--seed-v3-color-bg-layer-floating);border-radius:var(--seed-v3-radius-full);width:44px;height:44px;box-shadow:0 2px 6px #00000026}.fab__root:is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-floating-pressed)}.fab__icon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;display:inline-flex}.extendedFab__root{box-sizing:border-box;cursor:pointer;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border:none;flex-shrink:0;justify-content:center;align-items:center;font-family:inherit;text-decoration:none;display:inline-flex}.extendedFab__root:is(:focus,[data-focus]){outline:none}.extendedFab__root:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.extendedFab__root{border-radius:var(--seed-v3-radius-full);box-shadow:0 2px 6px #00000026}.extendedFab__prefixIcon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.extendedFab__root--variant_neutralSolid{background:var(--seed-v3-color-bg-neutral-inverted)}.extendedFab__root--variant_neutralSolid:is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-inverted-pressed)}.extendedFab__label--variant_neutralSolid,.extendedFab__prefixIcon--variant_neutralSolid{color:var(--seed-v3-color-fg-neutral-inverted)}.extendedFab__root--variant_layerFloating{background:var(--seed-v3-color-bg-layer-floating)}.extendedFab__root--variant_layerFloating:is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-floating-pressed)}.extendedFab__label--variant_layerFloating,.extendedFab__prefixIcon--variant_layerFloating{color:var(--seed-v3-color-fg-neutral)}.extendedFab__root--size_small{padding-inline:var(--seed-v3-dimension-s3_5);padding-block:var(--seed-v3-dimension-s2_5);gap:var(--seed-v3-dimension-s1);min-height:40px}.extendedFab__label--size_small{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4);font-weight:var(--seed-v3-font-weight-medium)}.extendedFab__prefixIcon--size_small{width:16px;height:16px}.extendedFab__root--size_medium{padding-inline:var(--seed-v3-dimension-s4);padding-block:var(--seed-v3-dimension-s3);gap:var(--seed-v3-dimension-s1);min-height:48px}.extendedFab__label--size_medium{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5);font-weight:var(--seed-v3-font-weight-bold)}.extendedFab__prefixIcon--size_medium{width:16px;height:16px}.badge__root{box-sizing:border-box;text-transform:none;text-align:start;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.badge__root--size_medium{min-height:var(--seed-v3-dimension-s5);padding-inline:var(--seed-v3-dimension-s1_5);padding-block:var(--seed-v3-dimension-s0_5)}.badge__label--size_medium{font-size:var(--seed-v3-font-size-s1);line-height:var(--seed-v3-line-height-s1)}.badge__root--size_large{min-height:var(--seed-v3-dimension-s6);padding-inline:var(--seed-v3-dimension-s2);padding-block:var(--seed-v3-dimension-s1)}.badge__label--size_large{font-size:var(--seed-v3-font-size-s2);line-height:var(--seed-v3-line-height-s2)}.badge__root--shape_pill{border-radius:var(--seed-v3-radius-full)}.badge__label--variant_weak{font-weight:var(--seed-v3-font-weight-medium)}.badge__label--variant_solid,.badge__label--variant_outline{font-weight:var(--seed-v3-font-weight-bold)}.badge__root--shape_rectangle-size_medium{border-radius:var(--seed-v3-radius-s1)}.badge__root--shape_rectangle-size_large{border-radius:var(--seed-v3-radius-s1_5)}.badge__root--tone_neutral-variant_weak{background-color:var(--seed-v3-color-bg-neutral-weak)}.badge__label--tone_neutral-variant_weak{color:var(--seed-v3-color-fg-neutral)}.badge__root--tone_neutral-variant_solid{background-color:var(--seed-v3-color-bg-neutral-inverted)}.badge__label--tone_neutral-variant_solid{color:var(--seed-v3-color-fg-neutral-inverted)}.badge__root--tone_neutral-variant_outline{box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-neutral)}.badge__label--tone_neutral-variant_outline{color:var(--seed-v3-color-fg-neutral)}.badge__root--tone_brand-variant_weak{background-color:var(--seed-v3-color-bg-brand-weak)}.badge__label--tone_brand-variant_weak{color:var(--seed-v3-color-fg-brand-contrast)}.badge__root--tone_brand-variant_solid{background-color:var(--seed-v3-color-bg-brand-solid)}.badge__label--tone_brand-variant_solid{color:var(--seed-v3-color-palette-static-white)}.badge__root--tone_brand-variant_outline{box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-brand)}.badge__label--tone_brand-variant_outline{color:var(--seed-v3-color-fg-brand)}.badge__root--tone_informative-variant_weak{background-color:var(--seed-v3-color-bg-informative-weak)}.badge__label--tone_informative-variant_weak{color:var(--seed-v3-color-fg-informative-contrast)}.badge__root--tone_informative-variant_solid{background-color:var(--seed-v3-color-bg-informative-solid)}.badge__label--tone_informative-variant_solid{color:var(--seed-v3-color-palette-static-white)}.badge__root--tone_informative-variant_outline{box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-informative)}.badge__label--tone_informative-variant_outline{color:var(--seed-v3-color-fg-informative)}.badge__root--tone_positive-variant_weak{background-color:var(--seed-v3-color-bg-positive-weak)}.badge__label--tone_positive-variant_weak{color:var(--seed-v3-color-fg-positive-contrast)}.badge__root--tone_positive-variant_solid{background-color:var(--seed-v3-color-bg-positive-solid)}.badge__label--tone_positive-variant_solid{color:var(--seed-v3-color-palette-static-white)}.badge__root--tone_positive-variant_outline{box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-positive)}.badge__label--tone_positive-variant_outline{color:var(--seed-v3-color-fg-positive)}.badge__root--tone_critical-variant_weak{background-color:var(--seed-v3-color-bg-critical-weak)}.badge__label--tone_critical-variant_weak{color:var(--seed-v3-color-fg-critical-contrast)}.badge__root--tone_critical-variant_solid{background-color:var(--seed-v3-color-bg-critical-solid)}.badge__label--tone_critical-variant_solid{color:var(--seed-v3-color-palette-static-white)}.badge__root--tone_critical-variant_outline{box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-critical)}.badge__label--tone_critical-variant_outline{color:var(--seed-v3-color-fg-critical)}.radio__root{box-sizing:border-box;background-color:var(--seed-v3-color-bg-layer-default);border-style:solid;border-width:1px;border-color:var(--seed-v3-color-stroke-control);border-radius:var(--seed-v3-radius-full);flex:none;justify-content:center;align-items:center;display:flex}.radio__root:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-default-pressed)}.radio__root:is(:checked,[data-checked]){background-color:var(--seed-v3-color-bg-brand-solid);border-width:0}.radio__root:is(:active,[data-active]):is(:checked,[data-checked]){background-color:var(--seed-v3-color-bg-brand-solid-pressed)}.radio__root:is(:disabled,[disabled],[data-disabled]){background-color:var(--seed-v3-color-palette-gray-300)}.radio__root:is(:disabled,[disabled],[data-disabled]):is(:checked,[data-checked]){background-color:none;border-color:var(--seed-v3-color-palette-gray-300)}.radio__icon{border-radius:var(--seed-v3-radius-full);display:none}.radio__icon:is(:checked,[data-checked]){background-color:var(--seed-v3-color-palette-static-white);display:block}.radio__icon:is(:disabled,[disabled],[data-disabled]):is(:checked,[data-checked]){background-color:var(--seed-v3-color-palette-gray-300)}.radio__root--size_large{width:var(--seed-v3-dimension-s6);height:var(--seed-v3-dimension-s6)}.radio__icon--size_large{width:var(--seed-v3-dimension-s2_5);height:var(--seed-v3-dimension-s2_5)}.radio__icon--size_large:is(:disabled,[disabled],[data-disabled]){width:var(--seed-v3-dimension-s3);height:var(--seed-v3-dimension-s3)}.radio__root--size_medium{width:var(--seed-v3-dimension-s5);height:var(--seed-v3-dimension-s5)}.radio__icon--size_medium{width:var(--seed-v3-dimension-s2);height:var(--seed-v3-dimension-s2)}.radio__icon--size_medium:is(:disabled,[disabled],[data-disabled]){width:var(--seed-v3-dimension-s2_5);height:var(--seed-v3-dimension-s2_5)}.dialog__positioner{overscroll-behavior-y:none;--dialog-z-index:2;z-index:calc(var(--dialog-z-index) + var(--layer-index,0));justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.dialog__backdrop{background:var(--seed-v3-color-bg-overlay);z-index:calc(var(--dialog-z-index) + var(--layer-index,0));position:fixed;inset:0}.dialog__backdrop:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter);animation-duration:var(--seed-v3-duration-s2);--seed-enter-translate-x:0;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}.dialog__backdrop:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s2);--seed-exit-translate-x:0;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1;animation-fill-mode:forwards}.dialog__content{box-sizing:border-box;word-break:break-all;z-index:calc(var(--dialog-z-index) + var(--layer-index,0));background:var(--seed-v3-color-bg-layer-default);max-width:272px;margin:auto var(--seed-v3-dimension-s8);padding:var(--seed-v3-dimension-s5)var(--seed-v3-dimension-s5);border-radius:var(--seed-v3-radius-s5);flex-direction:column;flex:1;display:flex;position:relative}.dialog__content:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter-expressive);animation-duration:var(--seed-v3-duration-s4);--seed-enter-translate-x:0;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1.3}.dialog__content:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s2);--seed-exit-translate-x:0;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1;animation-fill-mode:forwards}.dialog__header{gap:var(--seed-v3-dimension-s1_5);flex-direction:column;display:flex}.dialog__title{color:var(--seed-v3-color-fg-neutral);font-size:var(--seed-v3-font-size-s7);line-height:var(--seed-v3-line-height-s7);font-weight:var(--seed-v3-font-weight-bold);margin:0}.dialog__description{color:var(--seed-v3-color-fg-neutral);font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5);font-weight:var(--seed-v3-font-weight-regular);white-space:pre-wrap;margin:0}.dialog__footer{padding-top:var(--seed-v3-dimension-s4);flex-direction:column;align-items:stretch;display:flex}.checkbox__root{vertical-align:top;isolation:isolate;cursor:pointer;align-items:flex-start;gap:var(--seed-v3-dimension-s2);max-inline-size:100%;display:inline-flex;position:relative}.checkbox__root:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.checkbox__control{box-sizing:border-box;flex-shrink:0;position:relative}.checkbox__icon{content:"";text-align:center;overflow:initial;margin:auto;display:none;position:absolute;inset:0}.checkbox__label{color:var(--seed-v3-color-fg-neutral)}.checkbox__label--weight_default{font-weight:var(--seed-v3-font-weight-regular)}.checkbox__label--weight_stronger{font-weight:var(--seed-v3-font-weight-bold)}.checkbox__control--variant_square{border-style:solid;border-width:1px;border-color:var(--seed-v3-color-stroke-control)}.checkbox__control--variant_square:is(:checked,:indeterminate,[data-checked],[data-indeterminate]){background:var(--seed-v3-color-bg-brand-solid);border-width:0}.checkbox__control--variant_square:is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-default-pressed)}.checkbox__control--variant_square:is(:active,[data-active]):is(:checked,:indeterminate,[data-checked],[data-indeterminate]){background:var(--seed-v3-color-bg-brand-solid-pressed)}.checkbox__control--variant_square:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled);border-color:var(--seed-v3-color-stroke-neutral)}.checkbox__control--variant_square:is(:disabled,[disabled],[data-disabled]):is(:active,[data-active]){background:var(--seed-v3-color-bg-disabled)}.checkbox__icon--variant_square:is(:checked,:indeterminate,[data-checked],[data-indeterminate]){color:var(--seed-v3-color-palette-static-white);display:block}.checkbox__icon--variant_square:is(:disabled,[disabled],[data-disabled]):is(:checked,:indeterminate,[data-checked],[data-indeterminate]){color:var(--seed-v3-color-fg-disabled);display:block}.checkbox__label--variant_square:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.checkbox__control--variant_ghost,.checkbox__control--variant_ghost:is(:checked,:indeterminate,[data-checked],[data-indeterminate]){background:0 0}.checkbox__control--variant_ghost:is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-default-pressed)}.checkbox__control--variant_ghost:is(:active,[data-active]):is(:checked,:indeterminate,[data-checked],[data-indeterminate]){background:var(--seed-v3-color-bg-brand-weak-pressed)}.checkbox__control--variant_ghost:is(:disabled,[disabled],[data-disabled]):is(:checked,:indeterminate,[data-checked],[data-indeterminate]),.checkbox__control--variant_ghost:is(:disabled,[disabled],[data-disabled]):is(:active,[data-active]){background:0 0}.checkbox__icon--variant_ghost{color:var(--seed-v3-color-fg-placeholder);display:block}.checkbox__icon--variant_ghost:is(:checked,:indeterminate,[data-checked],[data-indeterminate]){color:var(--seed-v3-color-fg-brand)}.checkbox__icon--variant_ghost:is(:disabled,[disabled],[data-disabled]):is(:checked,:indeterminate,[data-checked],[data-indeterminate]),.checkbox__icon--variant_ghost:is(:disabled,[disabled],[data-disabled]),.checkbox__label--variant_ghost:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.checkbox__root--size_large{min-height:var(--seed-v3-dimension-s9)}.checkbox__control--size_large{border-radius:var(--seed-v3-radius-s1);width:var(--seed-v3-dimension-s6);height:var(--seed-v3-dimension-s6);margin:calc((var(--seed-v3-dimension-s9) - var(--seed-v3-dimension-s6))/2)0}.checkbox__label--size_large{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5);margin-block-start:calc(18px - .65625rem)}.checkbox__root--size_medium{min-height:var(--seed-v3-dimension-s8)}.checkbox__control--size_medium{border-radius:var(--seed-v3-radius-s1);width:var(--seed-v3-dimension-s5);height:var(--seed-v3-dimension-s5);margin:calc((var(--seed-v3-dimension-s8) - var(--seed-v3-dimension-s5))/2)0}.checkbox__label--size_medium{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4);margin-block-start:calc(16px - .59375rem)}.checkbox__icon--size_medium-variant_ghost{width:14px;height:14px}.checkbox__icon--size_large-variant_ghost{width:18px;height:18px}.checkbox__icon--size_medium-variant_square{width:12px;height:12px}.checkbox__icon--size_large-variant_square{width:14px;height:14px}.actionChip__root{box-sizing:border-box;cursor:pointer;text-transform:none;text-align:start;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--seed-v3-radius-full);border:none;flex-shrink:0;justify-content:center;align-items:center;font-family:inherit;display:inline-flex}.actionChip__root:is(:focus,[data-focus]){outline:none}.actionChip__root{background:var(--seed-v3-color-bg-neutral-weak)}.actionChip__root:is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-weak-pressed)}.actionChip__root:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled);cursor:not-allowed}.actionChip__label{color:var(--seed-v3-color-fg-neutral);line-height:1;font-weight:var(--seed-v3-font-weight-medium)}.actionChip__label:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionChip__prefixIcon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0;display:inline-flex}.actionChip__prefixIcon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionChip__suffixIcon{color:var(--seed-v3-color-fg-neutral-subtle);flex-shrink:0;display:inline-flex}.actionChip__suffixIcon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionChip__icon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0;display:inline-flex}.actionChip__icon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionChip__count{color:var(--seed-v3-color-fg-neutral-muted);line-height:1;font-weight:var(--seed-v3-font-weight-medium)}.actionChip__root--size_medium{min-height:var(--seed-v3-dimension-s9);padding-block:var(--seed-v3-dimension-s2);gap:var(--seed-v3-dimension-s1)}.actionChip__label--size_medium{font-size:var(--seed-v3-font-size-s4)}.actionChip__prefixIcon--size_medium{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.actionChip__suffixIcon--size_medium{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.actionChip__count--size_medium{font-size:var(--seed-v3-font-size-s4)}.actionChip__root--size_small{min-height:var(--seed-v3-dimension-s8);padding-block:var(--seed-v3-dimension-s1_5);gap:var(--seed-v3-dimension-s1)}.actionChip__label--size_small{font-size:var(--seed-v3-font-size-s4)}.actionChip__prefixIcon--size_small{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.actionChip__suffixIcon--size_small{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.actionChip__count--size_small{font-size:var(--seed-v3-font-size-s4)}.actionChip__root--size_medium-layout_withText{padding-inline:var(--seed-v3-dimension-s3_5)}.actionChip__root--size_medium-layout_iconOnly{min-width:var(--seed-v3-dimension-s9)}.actionChip__icon--size_medium-layout_iconOnly{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.actionChip__root--size_small-layout_withText{padding-inline:var(--seed-v3-dimension-s3)}.actionChip__root--size_small-layout_iconOnly{min-width:var(--seed-v3-dimension-s8)}.actionChip__icon--size_small-layout_iconOnly{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.controlChip__root{box-sizing:border-box;cursor:pointer;text-transform:none;text-align:start;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--seed-v3-radius-full);box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-neutral);border:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.controlChip__root:is(:focus,[data-focus]){outline:none}.controlChip__root:is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-default-pressed)}.controlChip__root:is(:checked,[data-checked]){background:var(--seed-v3-color-bg-neutral-solid-muted);box-shadow:none}.controlChip__root:is(:checked,[data-checked]):is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-solid-muted-pressed)}.controlChip__root:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled);cursor:not-allowed}.controlChip__label{color:var(--seed-v3-color-fg-neutral);line-height:1;font-weight:var(--seed-v3-font-weight-medium)}.controlChip__label:is(:checked,[data-checked]){color:var(--seed-v3-color-palette-static-white);font-weight:var(--seed-v3-font-weight-bold)}.controlChip__label:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.controlChip__prefixIcon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0;display:inline-flex}.controlChip__prefixIcon:is(:checked,[data-checked]){color:var(--seed-v3-color-palette-static-white)}.controlChip__prefixIcon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.controlChip__suffixIcon{color:var(--seed-v3-color-fg-neutral-subtle);flex-shrink:0;display:inline-flex}.controlChip__suffixIcon:is(:checked,[data-checked]){color:var(--seed-v3-color-palette-static-white)}.controlChip__suffixIcon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.controlChip__icon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0;display:inline-flex}.controlChip__icon:is(:checked,[data-checked]){color:var(--seed-v3-color-palette-static-white)}.controlChip__icon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.controlChip__count{color:var(--seed-v3-color-fg-neutral-muted);line-height:1;font-weight:var(--seed-v3-font-weight-medium)}.controlChip__count:is(:checked,[data-checked]){color:var(--seed-v3-color-palette-static-white-alpha-800)}.controlChip__root--size_medium{min-height:var(--seed-v3-dimension-s9);padding-block:var(--seed-v3-dimension-s2);gap:var(--seed-v3-dimension-s1)}.controlChip__label--size_medium{font-size:var(--seed-v3-font-size-s4)}.controlChip__prefixIcon--size_medium{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.controlChip__suffixIcon--size_medium{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.controlChip__count--size_medium{font-size:var(--seed-v3-font-size-s4)}.controlChip__root--size_small{min-height:var(--seed-v3-dimension-s8);padding-block:var(--seed-v3-dimension-s1_5);gap:var(--seed-v3-dimension-s1)}.controlChip__label--size_small{font-size:var(--seed-v3-font-size-s4)}.controlChip__prefixIcon--size_small{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.controlChip__suffixIcon--size_small{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.controlChip__count--size_small{font-size:var(--seed-v3-font-size-s4)}.controlChip__root--size_medium-layout_withText{padding-inline:var(--seed-v3-dimension-s3_5)}.controlChip__root--size_medium-layout_iconOnly{min-width:var(--seed-v3-dimension-s9)}.controlChip__icon--size_medium-layout_iconOnly{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.controlChip__root--size_small-layout_withText{padding-inline:var(--seed-v3-dimension-s3)}.controlChip__root--size_small-layout_iconOnly{min-width:var(--seed-v3-dimension-s8)}.controlChip__icon--size_small-layout_iconOnly{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.callout__root{box-sizing:border-box;width:100%;min-height:50px;padding:var(--seed-v3-dimension-s3_5);align-items:center;gap:var(--seed-v3-dimension-s3);border-radius:var(--seed-v3-radius-s2_5);text-align:start;font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s5);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border:none;font-family:inherit;display:flex}.callout__root:is(button){cursor:pointer}.callout__icon{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4);flex:none}.callout__textContent{margin-inline-end:auto}.callout__title{font-weight:var(--seed-v3-font-weight-bold)}.callout__spacer{letter-spacing:.25em}.callout__description{font-weight:var(--seed-v3-font-weight-regular)}.callout__linkLabel{text-underline-offset:2px;cursor:pointer;background-color:#0000;border:none;padding:0;font-family:inherit;text-decoration:underline;display:inline-block}.callout__actionableIcon{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4);flex:none}.callout__dismissButton{width:var(--seed-v3-dimension-s10);height:var(--seed-v3-dimension-s10);margin:calc((var(--seed-v3-dimension-s10) - var(--seed-v3-dimension-s4))*-.5);cursor:pointer;background-color:#0000;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:flex}.callout__dismissIcon{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.callout__root--tone_neutral{background-color:var(--seed-v3-color-bg-neutral-weak)}.callout__root--tone_neutral:is(button):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-neutral-weak-pressed)}.callout__icon--tone_neutral,.callout__title--tone_neutral,.callout__description--tone_neutral,.callout__linkLabel--tone_neutral,.callout__actionableIcon--tone_neutral,.callout__dismissIcon--tone_neutral{color:var(--seed-v3-color-fg-neutral)}.callout__root--tone_informative{background-color:var(--seed-v3-color-bg-informative-weak)}.callout__root--tone_informative:is(button):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-informative-weak-pressed)}.callout__icon--tone_informative,.callout__title--tone_informative,.callout__description--tone_informative,.callout__linkLabel--tone_informative,.callout__actionableIcon--tone_informative,.callout__dismissIcon--tone_informative{color:var(--seed-v3-color-fg-informative-contrast)}.callout__root--tone_warning{background-color:var(--seed-v3-color-bg-warning-weak)}.callout__root--tone_warning:is(button):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-warning-weak-pressed)}.callout__icon--tone_warning,.callout__title--tone_warning,.callout__description--tone_warning,.callout__linkLabel--tone_warning,.callout__actionableIcon--tone_warning,.callout__dismissIcon--tone_warning{color:var(--seed-v3-color-fg-warning-contrast)}.callout__root--tone_critical{background-color:var(--seed-v3-color-bg-critical-weak)}.callout__root--tone_critical:is(button):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-critical-weak-pressed)}.callout__icon--tone_critical,.callout__title--tone_critical,.callout__description--tone_critical,.callout__linkLabel--tone_critical,.callout__actionableIcon--tone_critical,.callout__dismissIcon--tone_critical{color:var(--seed-v3-color-fg-critical-contrast)}.callout__root--tone_magic{background-color:var(--seed-v3-color-bg-magic-weak)}.callout__root--tone_magic:is(button):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-magic-weak-pressed)}.callout__icon--tone_magic,.callout__title--tone_magic,.callout__description--tone_magic,.callout__linkLabel--tone_magic,.callout__actionableIcon--tone_magic,.callout__dismissIcon--tone_magic{color:var(--seed-v3-color-fg-magic-contrast)}.mannerTempBadge__root{box-sizing:border-box;text-transform:none;text-align:start;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--seed-v3-radius-full);padding-inline:var(--seed-v3-dimension-s1_5);padding-block:var(--seed-v3-dimension-s0_5);justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.mannerTempBadge__label{font-size:var(--seed-v3-font-size-s1);line-height:var(--seed-v3-line-height-s1);font-weight:var(--seed-v3-font-weight-bold)}.mannerTempBadge__root--level_l1{background-color:var(--seed-v3-color-manner-temp-l1-bg)}.mannerTempBadge__label--level_l1{color:var(--seed-v3-color-manner-temp-l1-text)}.mannerTempBadge__root--level_l2{background-color:var(--seed-v3-color-manner-temp-l2-bg)}.mannerTempBadge__label--level_l2{color:var(--seed-v3-color-manner-temp-l2-text)}.mannerTempBadge__root--level_l3{background-color:var(--seed-v3-color-manner-temp-l3-bg)}.mannerTempBadge__label--level_l3{color:var(--seed-v3-color-manner-temp-l3-text)}.mannerTempBadge__root--level_l4{background-color:var(--seed-v3-color-manner-temp-l4-bg)}.mannerTempBadge__label--level_l4{color:var(--seed-v3-color-manner-temp-l4-text)}.mannerTempBadge__root--level_l5{background-color:var(--seed-v3-color-manner-temp-l5-bg)}.mannerTempBadge__label--level_l5{color:var(--seed-v3-color-manner-temp-l5-text)}.mannerTempBadge__root--level_l6{background-color:var(--seed-v3-color-manner-temp-l6-bg)}.mannerTempBadge__label--level_l6{color:var(--seed-v3-color-manner-temp-l6-text)}.segmentedControl__root{box-sizing:border-box;min-width:fit-content;max-width:100%;padding:var(--seed-v3-dimension-s1);border-radius:var(--seed-v3-radius-full);background-color:var(--seed-v3-color-bg-neutral-weak);isolation:isolate;grid-auto-columns:1fr;grid-auto-flow:column;align-items:center;display:grid;position:relative}.segmentedControl__segment{min-width:86px;height:var(--seed-v3-dimension-s8);border-radius:var(--seed-v3-radius-full);user-select:none;line-height:var(--seed-v3-line-height-s5);display:grid;overflow:hidden}.segmentedControl__segment:not(:is(:disabled,[disabled],[data-disabled])){cursor:pointer}.segmentedControl__segment:not(:is(:disabled,[disabled],[data-disabled])):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-neutral-weak-pressed)}.segmentedControl__segment:not(:is(:disabled,[disabled],[data-disabled])):is(:checked,[data-checked]):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-default-pressed)}.segmentedControl__segmentLabel{padding-inline:calc(var(--seed-v3-dimension-s4) - 1px);text-align:center;font-weight:var(--seed-v3-font-weight-medium);font-size:var(--seed-v3-font-size-s5);white-space:nowrap;text-overflow:ellipsis;color:var(--seed-v3-color-fg-neutral-muted);grid-area:1/1/1/1;margin-block:auto;overflow:hidden}.segmentedControl__segmentLabel:is(:checked,[data-checked]){color:var(--seed-v3-color-fg-neutral);font-weight:var(--seed-v3-font-weight-bold)}.segmentedControl__segmentLabel:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.segmentedControl__segmentLabelPlaceholder{padding-inline:var(--seed-v3-dimension-s4);text-align:center;font-weight:var(--seed-v3-font-weight-bold);font-size:var(--seed-v3-font-size-s5);text-overflow:ellipsis;white-space:nowrap;opacity:0;grid-area:1/1/1/1;overflow:hidden}.segmentedControl__indicator{inset-block:var(--seed-v3-dimension-s1);width:calc((100% - var(--seed-v3-dimension-s1)*2)/var(--seed-design-segmented-control-segment-count));transform:translateX(calc(var(--seed-design-segmented-control-current-segment-index)*100%));z-index:-1;border-radius:var(--seed-v3-radius-full);background-color:var(--seed-v3-color-bg-layer-default);will-change:transform;transition:transform var(--seed-v3-duration-s4)var(--seed-v3-timing-function-easing);position:absolute;inset-inline-start:var(--seed-v3-dimension-s1);box-shadow:0 1px 6px #0000000d}.selectBoxGroup__root{flex-direction:column;width:100%;display:flex}.selectBox__root{cursor:pointer;justify-content:space-between;align-items:center;gap:var(--seed-v3-dimension-s2_5);padding-inline:var(--seed-v3-dimension-s4);padding-block:var(--seed-v3-dimension-s5);border-radius:var(--seed-v3-radius-s3);box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-neutral);display:flex}.selectBox__root:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-default-pressed)}.selectBox__root:is(:checked,[data-checked]){background-color:var(--seed-v3-color-bg-neutral-weak);box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-control)}.selectBox__root:is(:checked,[data-checked]):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-neutral-weak-pressed)}.selectBox__content{gap:var(--seed-v3-dimension-s0_5);flex-direction:column;display:flex}.selectBox__checkboxControl{box-sizing:border-box;width:var(--seed-v3-dimension-s6);height:var(--seed-v3-dimension-s6);background-color:var(--seed-v3-color-bg-layer-default);border-style:solid;border-width:1px;border-color:var(--seed-v3-color-stroke-control);border-radius:var(--seed-v3-radius-s1);flex:none;justify-content:center;align-items:center;display:flex}.selectBox__checkboxControl:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-default-pressed)}.selectBox__checkboxControl:is(:checked,[data-checked]){background-color:var(--seed-v3-color-bg-brand-solid);border-width:0}.selectBox__checkboxControl:is(:checked,[data-checked]):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-brand-solid-pressed)}.selectBox__checkboxIcon{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5);display:none}.selectBox__checkboxIcon:is(:checked,[data-checked]){color:var(--seed-v3-color-palette-static-white);display:block}.selectBox__radioControl{box-sizing:border-box;width:var(--seed-v3-dimension-s6);height:var(--seed-v3-dimension-s6);background-color:var(--seed-v3-color-bg-layer-default);border-style:solid;border-width:1px;border-color:var(--seed-v3-color-stroke-control);border-radius:var(--seed-v3-radius-full);flex:none;justify-content:center;align-items:center;display:flex}.selectBox__radioControl:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-default-pressed)}.selectBox__radioControl:is(:checked,[data-checked]){background-color:var(--seed-v3-color-bg-brand-solid);border-width:0}.selectBox__radioControl:is(:checked,[data-checked]):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-brand-solid-pressed)}.selectBox__radioIcon{width:var(--seed-v3-dimension-s2_5);height:var(--seed-v3-dimension-s2_5);border-radius:var(--seed-v3-radius-full);display:none}.selectBox__radioIcon:is(:checked,[data-checked]){background-color:var(--seed-v3-color-palette-static-white);color:var(--seed-v3-color-palette-static-white);display:block}.selectBox__label{color:var(--seed-v3-color-fg-neutral);font-weight:var(--seed-v3-font-weight-bold);font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5)}.selectBox__description{color:var(--seed-v3-color-fg-neutral-muted);font-weight:var(--seed-v3-font-weight-regular);font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.switch__root{box-sizing:border-box;vertical-align:top;isolation:isolate;opacity:1;cursor:pointer;justify-content:space-between;align-items:flex-start;display:inline-flex;position:relative}.switch__root:is(:disabled,[disabled],[data-disabled]){opacity:.38;cursor:not-allowed}.switch__control{box-sizing:border-box;border-radius:var(--seed-v3-radius-full);background:var(--seed-v3-color-palette-gray-600);transition:background-color 50ms cubic-bezier(.35,0,.35,1) 20ms;display:block;position:relative}.switch__control:is(:checked,[data-checked]){background:var(--seed-v3-color-bg-brand-solid)}.switch__thumb{border-radius:var(--seed-v3-radius-full);background:var(--seed-v3-color-palette-static-white);transition:transform .15s cubic-bezier(.35,0,.35,1)}.switch__root--size_medium{min-height:32px}.switch__control--size_medium{min-block-size:32px;min-inline-size:52px;padding:2px}.switch__thumb--size_medium{width:28px;height:28px;box-shadow:0 3px 8px #00000026,0 1px 3px #0000000f}.switch__thumb--size_medium:is(:checked,[data-checked]){transform:translate(20px)}.switch__root--size_small{gap:var(--seed-v3-dimension-s2);min-height:24px}.switch__control--size_small{min-block-size:16px;min-inline-size:26px;margin:4px 0;padding:2px}.switch__thumb--size_small{width:12px;height:12px}.switch__thumb--size_small:is(:checked,[data-checked]){transform:translate(10px)}.switch__label--size_small{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4);font-weight:var(--seed-v3-font-weight-regular);margin-top:calc(12px - .59375rem)}.screen__root{width:100%;height:100%;position:absolute;left:0;right:0;overflow:hidden}.screen__root[data-transition-state=exit-done]{transform:translate(100%)}.screen__dim{z-index:var(--z-index-dim);opacity:0;width:100%;transition:transform var(--seed-v3-duration-s6),opacity var(--seed-v3-duration-s6);position:absolute;left:0;right:0}.screen__dim:is([data-transition-state=enter-active],[data-transition-state=enter-done]){opacity:1}.screen__dim:is([data-transition-state=exit-active],[data-transition-state=exit-done]){opacity:0}.screen__layer{z-index:var(--z-index-layer);-webkit-overflow-scrolling:touch;width:100%;height:100%;position:absolute;left:0;right:0;overflow-y:scroll}.screen__layer::-webkit-scrollbar{display:none}.screen__layer{background-color:var(--seed-v3-color-bg-layer-default);transition:transform var(--seed-v3-duration-s6),opacity var(--seed-v3-duration-s6)}.screen__edge{z-index:var(--z-index-edge);width:20px;height:100%;position:absolute;left:0;right:0}.screen__root--theme_cupertino{--app-bar-height:44px}.screen__dim--theme_cupertino{background:var(--seed-v3-color-bg-overlay);height:100%}.screen__layer--theme_cupertino{transform:translate(100%)}.screen__layer--theme_cupertino:is([data-transition-state=enter-active],[data-transition-state=enter-done]){transform:translate(0,0)}.screen__root--theme_android{--app-bar-height:56px}.screen__dim--theme_android{background:linear-gradient(var(--seed-v3-color-bg-overlay),#0000);height:10rem}.screen__layer--theme_android{opacity:0;transform:translateY(10rem)}.screen__layer--theme_android:is([data-transition-state=enter-active],[data-transition-state=enter-done]){opacity:1;transform:translate(0,0)}.screen__root--hasAppBar_true{--app-bar-margin:var(--app-bar-height)}@supports (padding:max(0px)) and (padding:constant(safe-area-inset-top)){.screen__root--hasAppBar_true{--app-bar-margin:calc(var(--app-bar-height) + max(0px,constant(safe-area-inset-top)))}}@supports (padding:max(0px)) and (padding:env(safe-area-inset-top)){.screen__root--hasAppBar_true{--app-bar-margin:calc(var(--app-bar-height) + max(0px,env(safe-area-inset-top)))}}.screen__layer--hasAppBar_true{box-sizing:border-box;transition:transform var(--seed-v3-duration-s6),opacity var(--seed-v3-duration-s6);height:100%}.screen__edge--hasAppBar_true{top:var(--app-bar-height);height:calc(100% - var(--app-bar-height))}.helpBubble__backdrop{z-index:1000;background:var(--seed-v3-color-bg-overlay);width:100vw;height:100vh;position:fixed;inset:0}.helpBubble__backdrop:is(:hidden,[hidden],[data-hidden]){display:none!important}.helpBubble__content{background:var(--seed-v3-color-bg-neutral-solid);padding-inline:var(--seed-v3-dimension-s3);padding-block:var(--seed-v3-dimension-s3);border-radius:var(--seed-v3-radius-s3);word-break:keep-all;flex-direction:column;display:flex}.helpBubble__content:is(:hidden,[hidden],[data-hidden]){display:none!important}.helpBubble__arrow{fill:var(--seed-v3-color-bg-neutral-solid);width:10px;height:6px}.helpBubble__title{color:var(--seed-v3-color-palette-static-white);font-size:var(--seed-v3-font-size-s3);font-weight:var(--seed-v3-font-weight-bold)}.helpBubble__description{color:var(--seed-v3-color-palette-static-white);font-size:var(--seed-v3-font-size-s3);font-weight:var(--seed-v3-font-weight-regular)}.helpBubble__closeButton{color:var(--seed-v3-color-palette-static-white);justify-content:center;align-items:center;width:32px;height:32px;display:flex;position:absolute;top:4px;right:4px}.helpBubble__closeIcon{width:14px;height:14px}.identityPlaceholder__root{box-sizing:border-box;vertical-align:top;background-color:var(--seed-v3-color-palette-gray-400);justify-content:center;align-items:center;width:100%;height:100%;display:inline-flex;position:relative}.identityPlaceholder__image{object-fit:cover;fill:#f7f8fa;width:100%;height:100%;display:block;overflow:hidden}.inlineBanner__root{justify-content:space-between;align-items:center;gap:var(--seed-v3-dimension-s4);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;padding-inline:var(--seed-v3-dimension-s4);border:none;padding-block:0;font-family:inherit;display:flex}.inlineBanner__root:is(button){cursor:pointer}.inlineBanner__content{align-items:flex-start;gap:var(--seed-v3-dimension-s2);box-sizing:border-box;padding-block:var(--seed-v3-dimension-s2_5);font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4);min-height:var(--seed-v3-dimension-s10);text-align:start;display:flex}.inlineBanner__icon{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4);flex:none;margin-block:1.5px}.inlineBanner__title{font-weight:var(--seed-v3-font-weight-bold)}.inlineBanner__spacer{letter-spacing:.25em}.inlineBanner__description{font-weight:var(--seed-v3-font-weight-medium)}.inlineBanner__linkLabel{height:var(--seed-v3-dimension-s10);font-weight:var(--seed-v3-font-weight-regular);font-size:var(--seed-v3-font-size-s2);line-height:var(--seed-v3-line-height-s2);text-underline-offset:2px;cursor:pointer;background-color:#0000;border:none;flex:none;align-items:center;padding:0;font-family:inherit;text-decoration:underline;display:flex}.inlineBanner__actionableIcon{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4);flex:none}.inlineBanner__dismissButton{width:var(--seed-v3-dimension-s10);height:var(--seed-v3-dimension-s10);margin:calc((var(--seed-v3-dimension-s10) - var(--seed-v3-dimension-s4))*-.5);cursor:pointer;background-color:#0000;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:flex}.inlineBanner__dismissIcon{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.inlineBanner__root--variant_neutralWeak{background-color:var(--seed-v3-color-bg-neutral-weak)}.inlineBanner__icon--variant_neutralWeak,.inlineBanner__title--variant_neutralWeak,.inlineBanner__description--variant_neutralWeak,.inlineBanner__linkLabel--variant_neutralWeak,.inlineBanner__actionableIcon--variant_neutralWeak,.inlineBanner__dismissIcon--variant_neutralWeak{color:var(--seed-v3-color-fg-neutral)}.inlineBanner__root--variant_positiveWeak{background-color:var(--seed-v3-color-bg-positive-weak)}.inlineBanner__icon--variant_positiveWeak,.inlineBanner__title--variant_positiveWeak,.inlineBanner__description--variant_positiveWeak,.inlineBanner__linkLabel--variant_positiveWeak,.inlineBanner__actionableIcon--variant_positiveWeak,.inlineBanner__dismissIcon--variant_positiveWeak{color:var(--seed-v3-color-fg-positive-contrast)}.inlineBanner__root--variant_informativeWeak{background-color:var(--seed-v3-color-bg-informative-weak)}.inlineBanner__icon--variant_informativeWeak,.inlineBanner__title--variant_informativeWeak,.inlineBanner__description--variant_informativeWeak,.inlineBanner__linkLabel--variant_informativeWeak,.inlineBanner__actionableIcon--variant_informativeWeak,.inlineBanner__dismissIcon--variant_informativeWeak{color:var(--seed-v3-color-fg-informative-contrast)}.inlineBanner__root--variant_warningWeak{background-color:var(--seed-v3-color-bg-warning-weak)}.inlineBanner__icon--variant_warningWeak,.inlineBanner__title--variant_warningWeak,.inlineBanner__description--variant_warningWeak,.inlineBanner__linkLabel--variant_warningWeak,.inlineBanner__actionableIcon--variant_warningWeak,.inlineBanner__dismissIcon--variant_warningWeak{color:var(--seed-v3-color-fg-warning-contrast)}.inlineBanner__root--variant_warningSolid{background-color:var(--seed-v3-color-bg-warning-solid)}.inlineBanner__icon--variant_warningSolid,.inlineBanner__title--variant_warningSolid,.inlineBanner__description--variant_warningSolid,.inlineBanner__linkLabel--variant_warningSolid,.inlineBanner__actionableIcon--variant_warningSolid,.inlineBanner__dismissIcon--variant_warningSolid{color:var(--seed-v3-color-fg-neutral)}.inlineBanner__root--variant_criticalWeak{background-color:var(--seed-v3-color-bg-critical-weak)}.inlineBanner__icon--variant_criticalWeak,.inlineBanner__title--variant_criticalWeak,.inlineBanner__description--variant_criticalWeak,.inlineBanner__linkLabel--variant_criticalWeak,.inlineBanner__actionableIcon--variant_criticalWeak{color:var(--seed-v3-color-fg-critical-contrast)}.inlineBanner__root--variant_criticalSolid{background-color:var(--seed-v3-color-bg-critical-solid)}.inlineBanner__icon--variant_criticalSolid,.inlineBanner__title--variant_criticalSolid,.inlineBanner__description--variant_criticalSolid,.inlineBanner__linkLabel--variant_criticalSolid,.inlineBanner__actionableIcon--variant_criticalSolid{color:var(--seed-v3-color-palette-static-white)}.progressCircle__root{box-sizing:border-box;display:inline-flex;position:relative}.progressCircle__root[data-progress-state=indeterminate]{animation:1.2s cubic-bezier(.35,.25,.65,.75) infinite rotate}.progressCircle__track{stroke:var(--track-color)}.progressCircle__range{stroke:var(--range-color);stroke-linecap:round;transition-property:stroke-dasharray;transition-duration:.3s;transition-timing-function:cubic-bezier(0,0,.15,1)}.progressCircle__range[data-progress-state=indeterminate]{animation:1.2s cubic-bezier(.35,0,.65,1) infinite headDash,1.2s cubic-bezier(.35,0,.65,.6) infinite tailDash}.progressCircle__root--tone_neutral{--track-color:var(--seed-v3-color-palette-gray-200);--range-color:var(--seed-v3-color-palette-gray-500)}.progressCircle__root--tone_brand{--track-color:var(--seed-v3-color-palette-carrot-200);--range-color:var(--seed-v3-color-bg-brand-solid)}.progressCircle__root--tone_staticWhite{--track-color:var(--seed-v3-color-palette-static-white-alpha-200);--range-color:var(--seed-v3-color-palette-static-white)}.progressCircle__root--size_24{--size:var(--seed-v3-dimension-s6);--thickness:3px}.progressCircle__root--size_40{--size:var(--seed-v3-dimension-s10);--thickness:5px}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes headDash{0%{stroke-dasharray:0 1000%}75%{stroke-dasharray:var(--circumference),1000%}to{stroke-dasharray:var(--circumference),1000%}}@keyframes tailDash{0%{stroke-dashoffset:0}33.33%{stroke-dashoffset:0}to{stroke-dashoffset:calc(var(--circumference)*-1)}}.tab__root{cursor:pointer;box-sizing:border-box;white-space:nowrap;background-color:#0000;border:none;justify-content:center;align-items:flex-end;display:flex}.tab__root:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.tab__label{color:var(--seed-v3-color-fg-neutral-subtle);position:relative}.tab__label:is(:selected,[data-selected]){color:var(--seed-v3-color-fg-neutral)}.tab__label:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.tab__notification{top:0;right:calc(-1*var(--seed-v3-dimension-s1) - var(--seed-v3-dimension-s0_5));background-color:var(--seed-v3-color-bg-brand-solid);width:var(--seed-v3-dimension-s1);height:var(--seed-v3-dimension-s1);border-radius:var(--seed-v3-radius-full);align-self:flex-start;position:absolute}.tab__root--layout_fill{flex:1}.tab__root--size_medium{min-height:44px;padding-inline:var(--seed-v3-dimension-s2_5);padding-block:var(--seed-v3-dimension-s2_5)}.tab__label--size_medium{font-size:var(--seed-v3-font-size-s5);font-weight:var(--seed-v3-font-weight-bold)}.tab__root--size_small{min-height:40px;padding-inline:var(--seed-v3-dimension-s2_5);padding-block:var(--seed-v3-dimension-s2_5)}.tab__label--size_small{font-size:var(--seed-v3-font-size-s4);font-weight:var(--seed-v3-font-weight-bold)}.tabs__root{overflow:hidden}.tabs__triggerList{-ms-overflow-style:none;scrollbar-width:none;background:var(--seed-v3-color-bg-layer-default);border-bottom:1px solid var(--seed-v3-color-stroke-neutral);flex-flow:row;align-content:stretch;align-items:stretch;display:flex;position:relative;overflow-x:auto}.tabs__triggerList::-webkit-scrollbar{display:none}.tabs__contentList{width:100%}.tabs__contentCamera{width:100%;height:100%;display:flex}.tabs__content{flex-shrink:0;width:100%;height:100%;overflow:hidden auto}.tabs__indicator{will-change:left,width;left:var(--seed-design-tabs-indicator-left,0px);width:var(--seed-design-tabs-indicator-width,0px);color:var(--seed-v3-color-fg-neutral);border-bottom:2px solid var(--seed-v3-color-fg-neutral);transition:left .2s cubic-bezier(.15,.3,.25,1),width .2s cubic-bezier(.15,.3,.25,1);position:absolute;bottom:0}.tabs__triggerList--layout_fill{justify-content:space-around;padding:0}.tabs__indicator--layout_fill{left:calc(var(--seed-design-tabs-indicator-left,0px) + 16px);width:calc(var(--seed-design-tabs-indicator-width,0px) - 32px)}.tabs__triggerList--layout_hug{padding:0px var(--seed-v3-dimension-s4);justify-content:flex-start}.tabs__indicator--layout_hug{left:calc(var(--seed-design-tabs-indicator-left,0px));width:calc(var(--seed-design-tabs-indicator-width,0px))}.tabs__root--size_small{--seed-design-tabs-trigger-list-height:40px}.tabs__triggerList--size_small{height:40px}.tabs__root--size_medium{--seed-design-tabs-trigger-list-height:44px}.tabs__triggerList--size_medium{height:44px}.tabs__root--fixTriggerList_true{position:relative}.tabs__triggerList--fixTriggerList_true{position:sticky;top:0}.tabs__contentList--fixTriggerList_true{height:calc(100% - var(--seed-design-tabs-trigger-list-height))}.chipTab__root{padding:var(--seed-v3-dimension-s2)var(--seed-v3-dimension-s3_5);cursor:pointer;border-radius:var(--seed-v3-radius-full);box-sizing:border-box;white-space:nowrap;border:none;justify-content:center;align-items:center;min-height:36px;font-family:inherit;display:flex}.chipTab__label{font-size:var(--seed-v3-font-size-s4);font-weight:var(--seed-v3-font-weight-bold)}.chipTab__root--variant_neutralSolid:is(:selected,[data-selected]){background-color:var(--seed-v3-color-bg-neutral-inverted)}.chipTab__root--variant_neutralSolid:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-default-pressed)}.chipTab__root--variant_neutralSolid:is(:selected,[data-selected]):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-neutral-inverted-pressed)}.chipTab__root--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.chipTab__root--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]):is(:selected,[data-selected]){background-color:var(--seed-v3-color-bg-disabled)}.chipTab__label--variant_neutralSolid{color:var(--seed-v3-color-fg-neutral);font-weight:var(--seed-v3-font-weight-bold)}.chipTab__label--variant_neutralSolid:is(:selected,[data-selected]){color:var(--seed-v3-color-fg-neutral-inverted)}.chipTab__label--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]),.chipTab__label--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]):is(:selected,[data-selected]){color:var(--seed-v3-color-fg-disabled)}.chipTab__root--variant_brandSolid{font-weight:var(--seed-v3-font-weight-medium);background-color:var(--seed-v3-color-bg-neutral-weak)}.chipTab__root--variant_brandSolid:is(:selected,[data-selected]){background-color:var(--seed-v3-color-bg-brand-solid)}.chipTab__root--variant_brandSolid:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-neutral-weak-pressed)}.chipTab__root--variant_brandSolid:is(:selected,[data-selected]):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-brand-solid-pressed)}.chipTab__root--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed;background-color:var(--seed-v3-color-bg-disabled)}.chipTab__root--variant_brandSolid:is(:disabled,[disabled],[data-disabled]):is(:selected,[data-selected]){background-color:var(--seed-v3-color-bg-disabled)}.chipTab__label--variant_brandSolid{color:var(--seed-v3-color-fg-neutral-muted);font-weight:var(--seed-v3-font-weight-medium)}.chipTab__label--variant_brandSolid:is(:selected,[data-selected]){color:var(--seed-v3-color-palette-static-white);font-weight:var(--seed-v3-font-weight-bold)}.chipTab__label--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.chipTabs__root{overflow-x:hidden}.chipTabs__triggerList{-ms-overflow-style:none;scrollbar-width:none;padding:0px var(--seed-v3-dimension-s4);flex-flow:row;align-content:stretch;align-items:stretch;display:flex;position:relative;overflow-x:auto}.chipTabs__triggerList::-webkit-scrollbar{display:none}.chipTabs__contentCamera{width:100%;height:100%;display:flex}.chipTabs__content{flex-shrink:0;width:100%;height:100%;overflow:auto}.chipTabs__triggerList--variant_neutralSolid{gap:0}.chipTabs__triggerList--variant_brandSolid{gap:8px}.skeleton__root{box-sizing:border-box;background:var(--seed-v3-color-palette-gray-200);display:inline-block;overflow:hidden}.skeleton__root:after{content:"";background-image:linear-gradient(90deg,var(--seed-v3-gradient-shimmer));width:100%;height:100%;animation-name:shimmer;animation-duration:1.5s;animation-fill-mode:forwards;animation-timing-function:var(--seed-v3-timing-function-easing);background-repeat:no-repeat;animation-iteration-count:infinite;display:block}.skeleton__root--radius_0{border-radius:0}.skeleton__root--radius_8{border-radius:8px}.skeleton__root--radius_16{border-radius:16px}.skeleton__root--radius_full{border-radius:var(--seed-v3-radius-full)}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.snackbar__root{box-sizing:border-box;background:var(--seed-v3-color-bg-neutral-solid);border-radius:var(--seed-v3-radius-s2);width:100%;padding-inline:var(--seed-v3-dimension-s4);padding-block:var(--seed-v3-dimension-s2_5);justify-content:space-between;align-items:center;gap:var(--seed-v3-dimension-s2);min-height:44px;animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter);animation-duration:var(--seed-v3-duration-s4);--seed-enter-translate-x:0;--seed-enter-translate-y:100%;--seed-enter-opacity:0;--seed-enter-scale:1;display:flex}.snackbar__root:not([data-open]){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s4);--seed-exit-translate-x:0;--seed-exit-translate-y:100%;--seed-exit-opacity:0;--seed-exit-scale:1;animation-fill-mode:forwards}.snackbar__message{color:var(--seed-v3-color-palette-static-white);font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4);font-weight:var(--seed-v3-font-weight-regular);flex-grow:1;margin:0}.snackbar__prefixIcon{flex-shrink:0;width:24px;height:24px}.snackbar__actionButton{box-sizing:border-box;cursor:pointer;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:unset;color:var(--seed-v3-color-fg-brand);font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4);font-weight:var(--seed-v3-font-weight-bold);border:none;outline:none;flex-shrink:0;justify-content:center;align-items:center;text-decoration:none;display:inline-flex;position:relative}.snackbar__actionButton:after{content:"";top:50%;left:calc(-1*var(--seed-v3-dimension-s2));right:calc(-1*var(--seed-v3-dimension-s2));background:0 0;min-height:44px;position:absolute;transform:translateY(-50%)}.snackbar__prefixIcon--variant_default{display:none}.snackbar__prefixIcon--variant_positive{color:var(--seed-v3-color-fg-positive)}.snackbar__prefixIcon--variant_critical{color:var(--seed-v3-color-fg-critical)}.snackbarRegion__root{z-index:2147483647;left:calc(env(safe-area-inset-left,0px));right:calc(env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + var(--snackbar-region-offset,0px));padding-inline:var(--seed-v3-dimension-s2);padding-block:var(--seed-v3-dimension-s2);transition-property:bottom;transition-duration:var(--seed-v3-duration-s4);transition-timing-function:var(--seed-v3-timing-function-easing);flex-direction:column;align-items:center;display:flex}.text__root{text-align:var(--seed-text-align);color:var(--seed-text-color);font-size:var(--seed-font-size);line-height:var(--seed-line-height);font-weight:var(--seed-font-weight);--seed-text-color:inherit;--seed-font-size:inherit;--seed-line-height:inherit;--seed-font-weight:inherit;--seed-text-align:inherit;--seed-max-lines:initial;margin:0}.text__root--textStyle_labelSmallDefault{--seed-font-size:var(--seed-v3-font-size-s1);--seed-line-height:var(--seed-v3-line-height-s1);--seed-font-weight:var(--seed-v3-font-weight-regular)}.text__root--textStyle_labelSmallStrong{--seed-font-size:var(--seed-v3-font-size-s1);--seed-line-height:var(--seed-v3-line-height-s1);--seed-font-weight:var(--seed-v3-font-weight-medium)}.text__root--textStyle_labelSmallStronger{--seed-font-size:var(--seed-v3-font-size-s1);--seed-line-height:var(--seed-v3-line-height-s1);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_labelMediumDefault{--seed-font-size:var(--seed-v3-font-size-s2);--seed-line-height:var(--seed-v3-line-height-s2);--seed-font-weight:var(--seed-v3-font-weight-regular)}.text__root--textStyle_labelMediumStrong{--seed-font-size:var(--seed-v3-font-size-s2);--seed-line-height:var(--seed-v3-line-height-s2);--seed-font-weight:var(--seed-v3-font-weight-medium)}.text__root--textStyle_labelMediumStronger{--seed-font-size:var(--seed-v3-font-size-s2);--seed-line-height:var(--seed-v3-line-height-s2);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_labelLargeDefault{--seed-font-size:var(--seed-v3-font-size-s3);--seed-line-height:var(--seed-v3-line-height-s3);--seed-font-weight:var(--seed-v3-font-weight-regular)}.text__root--textStyle_labelLargeStrong{--seed-font-size:var(--seed-v3-font-size-s3);--seed-line-height:var(--seed-v3-line-height-s3);--seed-font-weight:var(--seed-v3-font-weight-medium)}.text__root--textStyle_labelLargeStronger{--seed-font-size:var(--seed-v3-font-size-s3);--seed-line-height:var(--seed-v3-line-height-s3);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_bodySmallDefault{--seed-font-size:var(--seed-v3-font-size-s4);--seed-line-height:var(--seed-v3-line-height-s4);--seed-font-weight:var(--seed-v3-font-weight-regular)}.text__root--textStyle_bodySmallReadingDefault{--seed-font-size:var(--seed-v3-font-size-s4);--seed-line-height:var(--seed-v3-line-height-s5);--seed-font-weight:var(--seed-v3-font-weight-regular)}.text__root--textStyle_bodySmallStrong{--seed-font-size:var(--seed-v3-font-size-s4);--seed-line-height:var(--seed-v3-line-height-s4);--seed-font-weight:var(--seed-v3-font-weight-medium)}.text__root--textStyle_bodySmallStronger{--seed-font-size:var(--seed-v3-font-size-s4);--seed-line-height:var(--seed-v3-line-height-s4);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_bodyMediumDefault{--seed-font-size:var(--seed-v3-font-size-s5);--seed-line-height:var(--seed-v3-line-height-s5);--seed-font-weight:var(--seed-v3-font-weight-regular)}.text__root--textStyle_bodyMediumReadingDefault{--seed-font-size:var(--seed-v3-font-size-s5);--seed-line-height:var(--seed-v3-line-height-s6);--seed-font-weight:var(--seed-v3-font-weight-regular)}.text__root--textStyle_bodyMediumStrong{--seed-font-size:var(--seed-v3-font-size-s5);--seed-line-height:var(--seed-v3-line-height-s5);--seed-font-weight:var(--seed-v3-font-weight-medium)}.text__root--textStyle_bodyMediumStronger,.text__root--textStyle_titleSmallDefault{--seed-font-size:var(--seed-v3-font-size-s5);--seed-line-height:var(--seed-v3-line-height-s5);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_titleMediumDefault{--seed-font-size:var(--seed-v3-font-size-s6);--seed-line-height:var(--seed-v3-line-height-s6);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_titleLargeDefault{--seed-font-size:var(--seed-v3-font-size-s7);--seed-line-height:var(--seed-v3-line-height-s7);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_headingSmallDefault{--seed-font-size:var(--seed-v3-font-size-s8);--seed-line-height:var(--seed-v3-line-height-s8);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_headingMediumDefault{--seed-font-size:var(--seed-v3-font-size-s9);--seed-line-height:var(--seed-v3-line-height-s9);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_headingLargeDefault{--seed-font-size:var(--seed-v3-font-size-s10);--seed-line-height:var(--seed-v3-line-height-s10);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--maxLines_none{display:unset;overflow:unset;min-width:unset;text-overflow:unset;white-space:unset;-webkit-line-clamp:unset}.text__root--maxLines_single{text-overflow:ellipsis;white-space:nowrap;-webkit-line-clamp:var(--seed-max-lines);min-width:0;display:block;overflow:hidden}.text__root--maxLines_multi{text-overflow:ellipsis;min-width:0;white-space:initial;-webkit-line-clamp:var(--seed-max-lines);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.textButton__root{cursor:pointer;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-inline:0;padding-block:var(--seed-v3-dimension-s0_5);background-color:#0000;border:none;outline:none;align-items:center;font-family:inherit;display:inline-flex}.textButton__root:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled);cursor:not-allowed}.textButton__root:is(:active,[data-active]){background-color:var(--seed-v3-color-palette-gray-200);box-shadow:0 0 0 2px var(--seed-v3-color-palette-gray-200)}.textButton__root:is(:disabled,[disabled],[data-disabled]):is(:active,[data-active]){background-color:#0000;border-color:#0000}.textButton__label{text-align:center;font-weight:var(--seed-v3-font-weight-regular)}.textButton__prefixIcon{margin-inline-end:var(--seed-v3-dimension-s1)}.textButton__suffixIcon{margin-inline-start:var(--seed-v3-dimension-s0_5)}.textButton__root--tone_brand{color:var(--seed-v3-color-fg-brand)}.textButton__root--tone_neutral{color:var(--seed-v3-color-fg-neutral)}.textButton__root--tone_neutralSubtle{color:var(--seed-v3-color-fg-neutral-subtle)}.textButton__root--tone_critical{color:var(--seed-v3-color-fg-critical)}.textButton__root--size_large{border-radius:var(--seed-v3-radius-s1_5);min-height:2rem}.textButton__prefixIcon--size_large,.textButton__suffixIcon--size_large{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.textButton__label--size_large{font-size:var(--seed-v3-font-size-s6);line-height:var(--seed-v3-line-height-s6)}.textButton__root--size_medium{border-radius:var(--seed-v3-radius-s1_5);min-height:1.875rem}.textButton__prefixIcon--size_medium,.textButton__suffixIcon--size_medium{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.textButton__label--size_medium{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5)}.textButton__root--size_small{border-radius:var(--seed-v3-radius-s1);min-height:1.75rem}.textButton__prefixIcon--size_small,.textButton__suffixIcon--size_small{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.textButton__label--size_small{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.textField__root{flex-direction:column;width:100%;display:flex}.textField__label{color:var(--seed-v3-color-fg-neutral);font-weight:var(--seed-v3-font-weight-bold)}.textField__indicator{color:var(--seed-v3-color-fg-neutral);font-weight:var(--seed-v3-font-weight-regular)}.textField__field{background-color:var(--seed-v3-color-bg-layer-default);border-style:solid;border-width:1px;border-color:var(--seed-v3-color-stroke-field);align-items:center;display:flex}.textField__field:not([data-readonly]):is(:focus,[data-focus]){border-color:var(--seed-v3-color-stroke-field-focused)}.textField__field:is(:invalid,[data-invalid]){background-color:var(--seed-v3-color-bg-critical-weak);border-color:var(--seed-v3-color-stroke-critical)}.textField__field:is(:invalid,[data-invalid]):is(:focus,[data-focus]){background-color:var(--seed-v3-color-bg-layer-default)}.textField__field:is(:disabled,[disabled],[data-disabled]),.textField__field[data-readonly]{background-color:var(--seed-v3-color-bg-disabled)}.textField__prefixText{color:var(--seed-v3-color-fg-neutral)}.textField__prefixText:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.textField__prefixIcon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0}.textField__prefixIcon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.textField__suffixText{color:var(--seed-v3-color-fg-neutral)}.textField__suffixText:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.textField__suffixIcon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0}.textField__suffixIcon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.textField__value{box-sizing:border-box;font:inherit}.textField__value:is(input){padding-inline:0}.textField__value:is(textarea){width:100%;min-height:90px;padding-inline:0}.textField__value{resize:none;height:100%;color:var(--seed-v3-color-fg-neutral);background:0 0;border:none;outline:none;flex-grow:1}.textField__value::placeholder{color:var(--seed-v3-color-fg-placeholder)}.textField__value:is(:disabled,[disabled],[data-disabled]),.textField__value:is(:disabled,[disabled],[data-disabled])::placeholder{color:var(--seed-v3-color-fg-disabled)}.textField__footer{justify-content:space-between;align-items:flex-start;display:flex}.textField__description{font-weight:var(--seed-v3-font-weight-regular);color:var(--seed-v3-color-fg-neutral-subtle)}.textField__errorMessage{color:var(--seed-v3-color-fg-critical);flex-direction:row;align-items:center;display:flex}.textField__errorIcon{flex:none}.textField__characterCountArea{flex:none;margin-inline-start:auto;display:flex}.textField__characterCount{color:var(--seed-v3-color-fg-neutral);font-weight:var(--seed-v3-font-weight-regular)}.textField__characterCount[data-empty]{color:var(--seed-v3-color-fg-neutral-subtle)}.textField__maxCharacterCount{color:var(--seed-v3-color-fg-neutral-subtle);font-weight:var(--seed-v3-font-weight-regular)}.textField__header--size_xlarge{padding-bottom:var(--seed-v3-dimension-s3);gap:var(--seed-v3-dimension-s1_5)}.textField__label--size_xlarge,.textField__indicator--size_xlarge{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5)}.textField__field--size_xlarge{border-radius:var(--seed-v3-radius-s2_5);gap:var(--seed-v3-dimension-s2);min-height:56px;padding-inline:var(--seed-v3-dimension-s4)}.textField__value--size_xlarge{padding-block:var(--seed-v3-dimension-s3);font-size:var(--seed-v3-font-size-s6);line-height:var(--seed-v3-line-height-s6)}.textField__prefixText--size_xlarge{font-size:var(--seed-v3-font-size-s6);line-height:var(--seed-v3-line-height-s6)}.textField__prefixIcon--size_xlarge{width:var(--seed-v3-dimension-s5);height:var(--seed-v3-dimension-s5)}.textField__suffixText--size_xlarge{font-size:var(--seed-v3-font-size-s6);line-height:var(--seed-v3-line-height-s6)}.textField__suffixIcon--size_xlarge{width:var(--seed-v3-dimension-s5);height:var(--seed-v3-dimension-s5)}.textField__footer--size_xlarge{gap:var(--seed-v3-dimension-s3_5);padding-top:var(--seed-v3-dimension-s2);min-height:20px}.textField__description--size_xlarge,.textField__errorMessage--size_xlarge{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.textField__errorIcon--size_xlarge{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4);margin-right:var(--seed-v3-dimension-s1)}.textField__characterCount--size_xlarge,.textField__maxCharacterCount--size_xlarge{font-size:var(--seed-v3-font-size-s2);line-height:var(--seed-v3-line-height-s2)}.textField__header--size_large{padding-bottom:var(--seed-v3-dimension-s3);gap:var(--seed-v3-dimension-s1_5)}.textField__label--size_large,.textField__indicator--size_large{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5)}.textField__field--size_large{border-radius:var(--seed-v3-radius-s2_5);gap:var(--seed-v3-dimension-s2);min-height:52px;padding-inline:var(--seed-v3-dimension-s4)}.textField__value--size_large{padding-block:var(--seed-v3-dimension-s3);font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5)}.textField__prefixText--size_large{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5)}.textField__prefixIcon--size_large{width:var(--seed-v3-dimension-s5);height:var(--seed-v3-dimension-s5)}.textField__suffixText--size_large{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5)}.textField__suffixIcon--size_large{width:var(--seed-v3-dimension-s5);height:var(--seed-v3-dimension-s5)}.textField__footer--size_large{gap:var(--seed-v3-dimension-s3_5);padding-top:var(--seed-v3-dimension-s2);min-height:20px}.textField__description--size_large,.textField__errorMessage--size_large{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.textField__errorIcon--size_large{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4);margin-right:var(--seed-v3-dimension-s1)}.textField__characterCount--size_large,.textField__maxCharacterCount--size_large{font-size:var(--seed-v3-font-size-s2);line-height:var(--seed-v3-line-height-s2)}.textField__header--size_medium{padding-bottom:var(--seed-v3-dimension-s3)}.textField__label--size_medium,.textField__indicator--size_medium{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.textField__field--size_medium{border-radius:var(--seed-v3-radius-s2);gap:var(--seed-v3-dimension-s1_5);min-height:40px;padding-inline:var(--seed-v3-dimension-s3_5)}.textField__value--size_medium{padding-block:var(--seed-v3-dimension-s2_5);font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.textField__prefixText--size_medium{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.textField__prefixIcon--size_medium{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.textField__suffixText--size_medium{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.textField__suffixIcon--size_medium{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.textField__footer--size_medium{gap:var(--seed-v3-dimension-s3_5);padding-top:var(--seed-v3-dimension-s2);min-height:var(--seed-v3-dimension-s4)}.textField__description--size_medium,.textField__errorMessage--size_medium{font-size:var(--seed-v3-font-size-s2);line-height:var(--seed-v3-line-height-s2)}.textField__errorIcon--size_medium{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5);margin-right:var(--seed-v3-dimension-s1)}.textField__characterCount--size_medium,.textField__maxCharacterCount--size_medium{font-size:var(--seed-v3-font-size-s2);line-height:var(--seed-v3-line-height-s2)}.topNavigation__root{z-index:var(--z-index-app-bar);box-sizing:content-box;width:100%;position:absolute}.topNavigation__root[data-transition-state=exit-active]{transition:background-color,box-shadow,transform;transform:translate(100%)}.topNavigation__safeArea{height:max(0px,env(safe-area-inset-top))}.topNavigation__container{align-items:flex-end;display:flex}.topNavigation__left{align-items:center;height:100%;display:flex}.topNavigation__right{align-items:center;height:100%;margin-left:auto;display:flex}.topNavigation__iconButton{justify-content:center;align-items:center;display:flex}.topNavigation__icon{flex-shrink:0;display:inline-block}.topNavigation__title{flex:1;align-items:center;height:100%;display:flex}.topNavigation__titleMain{transition:color}.topNavigation__titleEdge{appearance:none;cursor:pointer;background:0 0;border:0;max-width:5rem;height:20px;padding:0;display:none;position:absolute;top:0;left:50%;transform:translate(-50%)}.topNavigation__titleText{white-space:nowrap;text-overflow:ellipsis;width:100%;overflow:hidden}.topNavigation__container--theme_cupertino{height:44px;padding-inline:var(--seed-v3-dimension-s4)}[data-stackflow-activity-is-active=false] .topNavigation__container--theme_cupertino{opacity:calc(pow(var(--stackflow-swipe-back-ratio,1),2))}[data-stackflow-activity-is-active=true] .topNavigation__container--theme_cupertino{opacity:calc(1 - pow(var(--stackflow-swipe-back-ratio,0),2))}.topNavigation__iconButton--theme_cupertino{width:40px;height:40px}.topNavigation__iconButton--theme_cupertino:first-child{margin-left:-8px}.topNavigation__iconButton--theme_cupertino:last-child{margin-right:-8px}.topNavigation__icon--theme_cupertino{width:24px;height:24px}[data-stackflow-activity-is-active=true] .topNavigation__icon--theme_cupertino[data-transition-state=enter-active],[data-stackflow-activity-is-active=true] .topNavigation__icon--theme_cupertino[data-transition-state=enter-done]{opacity:1}.topNavigation__titleMain--theme_cupertino{text-align:center;height:100%;left:50%;top:max(0px,env(safe-area-inset-top));justify-content:center;align-items:center;display:flex;position:absolute;transform:translate(-50%)}.topNavigation__titleText--theme_cupertino{font-size:var(--seed-v3-font-size-s6-static);font-weight:var(--seed-v3-font-weight-bold)}.topNavigation__titleEdge--theme_cupertino{display:block}.topNavigation__root--theme_android{opacity:0;transition:background-color,box-shadow,transform .3s;transform:translateY(160px)}.topNavigation__root--theme_android:is([data-transition-state=enter-active],[data-transition-state=enter-done]){opacity:1;transform:translate(0,0)}.topNavigation__container--theme_android{height:56px;padding-inline:var(--seed-v3-dimension-s4)}.topNavigation__iconButton--theme_android{width:40px;height:40px}.topNavigation__iconButton--theme_android:first-child{margin-left:-8px}.topNavigation__iconButton--theme_android:last-child{margin-right:-8px}.topNavigation__icon--theme_android{width:24px;height:24px}.topNavigation__titleMain--theme_android{box-sizing:border-box;justify-content:flex-start;width:100%;padding-left:16px}.topNavigation__titleText--theme_android{font-size:var(--seed-v3-font-size-s6-static);font-weight:var(--seed-v3-font-weight-bold)}.topNavigation__root--tone_layer{background-color:var(--seed-v3-color-bg-layer-default)}.topNavigation__icon--tone_layer,.topNavigation__titleMain--tone_layer{color:var(--seed-v3-color-fg-neutral)}.topNavigation__root--tone_transparent{background-color:#0000}.topNavigation__icon--tone_transparent,.topNavigation__titleMain--tone_transparent{color:var(--seed-v3-color-palette-static-white)}.topNavigation__root--border_true{box-shadow:inset 0px calc(-1*1px)0 var(--seed-v3-color-stroke-neutral-muted)}.visuallyHidden__root{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden} \ No newline at end of file +.avatar__root{box-sizing:border-box;vertical-align:top;border-radius:var(--seed-v3-radius-full);justify-content:center;align-items:center;display:inline-flex;position:relative}.avatar__image{object-fit:cover;border-radius:var(--seed-v3-radius-full);width:100%;height:100%;display:block;overflow:hidden}.avatar__image:not([data-loading-status=loaded]){display:none}.avatar__fallback{object-fit:cover;border-radius:var(--seed-v3-radius-full);justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}.avatar__fallback[data-loading-status=loaded]{display:none}.avatar__badge{box-sizing:border-box;z-index:1;background:var(--seed-v3-color-bg-layer-default);border-radius:var(--seed-v3-radius-full);justify-content:center;align-items:center;display:flex;position:absolute}.avatar__root--size_20{width:20px;height:20px}.avatar__badge--size_20{width:10px;height:10px;top:12.0721px;left:12.0721px}.avatar__root--size_24{width:24px;height:24px}.avatar__badge--size_24{width:12px;height:12px;top:14.4866px;left:14.4866px}.avatar__root--size_36{width:36px;height:36px}.avatar__badge--size_36{width:16px;height:16px;top:22.7298px;left:22.7298px}.avatar__root--size_48{width:48px;height:48px}.avatar__badge--size_48{width:24px;height:24px;top:28.9731px;left:28.9731px}.avatar__root--size_64{width:64px;height:64px}.avatar__badge--size_64{width:24px;height:24px;top:42.6308px;left:42.6308px}.avatar__root--size_80{width:80px;height:80px}.avatar__badge--size_80{width:24px;height:24px;top:56.2885px;left:56.2885px}.avatar__root--size_96{width:96px;height:96px}.avatar__badge--size_96{width:32px;height:32px;top:65.9463px;left:65.9463px}.avatarStack__root{box-sizing:border-box;align-items:center;display:inline-flex}.avatarStack__item{border-radius:var(--seed-v3-radius-full);background-clip:padding-box;display:block}.avatarStack__item--size_20:not(:first-child){margin-left:-5px}.avatarStack__item--size_20{clip-path:inset(-2px);box-shadow:0 0 0 2px var(--seed-v3-color-bg-layer-default)}.avatarStack__item--size_24:not(:first-child){margin-left:-6px}.avatarStack__item--size_24{clip-path:inset(-2px);box-shadow:0 0 0 2px var(--seed-v3-color-bg-layer-default)}.avatarStack__item--size_36:not(:first-child){margin-left:-8px}.avatarStack__item--size_36{clip-path:inset(-3px);box-shadow:0 0 0 3px var(--seed-v3-color-bg-layer-default)}.avatarStack__item--size_48:not(:first-child){margin-left:-10px}.avatarStack__item--size_48{clip-path:inset(-4px);box-shadow:0 0 0 4px var(--seed-v3-color-bg-layer-default)}.avatarStack__item--size_64:not(:first-child){margin-left:-10px}.avatarStack__item--size_64{clip-path:inset(-4px);box-shadow:0 0 0 4px var(--seed-v3-color-bg-layer-default)}.actionButton__root{box-sizing:border-box;cursor:pointer;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border:none;flex-shrink:0;justify-content:center;align-items:center;font-family:inherit;text-decoration:none;display:inline-flex}.actionButton__root:is(:focus,[data-focus]){outline:none}.actionButton__root:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.actionButton__root{transition:background-color var(--seed-v3-duration-s4)var(--seed-v3-timing-function-easing);font-weight:var(--seed-v3-font-weight-bold)}.actionButton__label[data-loading]{opacity:0}.actionButton__icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.actionButton__icon[data-loading]{opacity:0}.actionButton__prefixIcon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.actionButton__prefixIcon[data-loading]{opacity:0}.actionButton__suffixIcon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.actionButton__suffixIcon[data-loading]{opacity:0}.actionButton__progressIndicator{display:none;position:absolute}.actionButton__progressIndicator[data-loading]{display:flex}.actionButton__root--variant_brandSolid{background:var(--seed-v3-color-bg-brand-solid)}.actionButton__root--variant_brandSolid:is(:active,[data-active]){background:var(--seed-v3-color-bg-brand-solid-pressed)}.actionButton__root--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled)}.actionButton__root--variant_brandSolid[data-loading]{background:var(--seed-v3-color-bg-brand-solid-pressed)}.actionButton__label--variant_brandSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__label--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__icon--variant_brandSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__icon--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__prefixIcon--variant_brandSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__prefixIcon--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__suffixIcon--variant_brandSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__suffixIcon--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__progressIndicator--variant_brandSolid{--track-color:var(--seed-v3-color-palette-static-white-alpha-200);--range-color:var(--seed-v3-color-palette-static-white)}.actionButton__root--variant_neutralSolid{background:var(--seed-v3-color-bg-neutral-inverted)}.actionButton__root--variant_neutralSolid:is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-inverted-pressed)}.actionButton__root--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled)}.actionButton__root--variant_neutralSolid[data-loading]{background:var(--seed-v3-color-bg-neutral-inverted-pressed)}.actionButton__label--variant_neutralSolid{color:var(--seed-v3-color-fg-neutral-inverted)}.actionButton__label--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__icon--variant_neutralSolid{color:var(--seed-v3-color-fg-neutral-inverted)}.actionButton__icon--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__prefixIcon--variant_neutralSolid{color:var(--seed-v3-color-fg-neutral-inverted)}.actionButton__prefixIcon--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__suffixIcon--variant_neutralSolid{color:var(--seed-v3-color-fg-neutral-inverted)}.actionButton__suffixIcon--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__progressIndicator--variant_neutralSolid{--track-color:var(--seed-v3-color-palette-static-white-alpha-200);--range-color:var(--seed-v3-color-palette-static-white)}.actionButton__root--variant_neutralWeak{background:var(--seed-v3-color-bg-neutral-weak)}.actionButton__root--variant_neutralWeak:is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-weak-pressed)}.actionButton__root--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled)}.actionButton__root--variant_neutralWeak[data-loading]{background:var(--seed-v3-color-bg-neutral-weak-pressed)}.actionButton__label--variant_neutralWeak{color:var(--seed-v3-color-fg-neutral)}.actionButton__label--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__icon--variant_neutralWeak{color:var(--seed-v3-color-fg-neutral)}.actionButton__icon--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__prefixIcon--variant_neutralWeak{color:var(--seed-v3-color-fg-neutral)}.actionButton__prefixIcon--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__suffixIcon--variant_neutralWeak{color:var(--seed-v3-color-fg-neutral)}.actionButton__suffixIcon--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__progressIndicator--variant_neutralWeak{--track-color:var(--seed-v3-color-palette-gray-500);--range-color:var(--seed-v3-color-fg-neutral)}.actionButton__root--variant_criticalSolid{background:var(--seed-v3-color-bg-critical-solid)}.actionButton__root--variant_criticalSolid:is(:active,[data-active]){background:var(--seed-v3-color-bg-critical-solid-pressed)}.actionButton__root--variant_criticalSolid:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled)}.actionButton__root--variant_criticalSolid[data-loading]{background:var(--seed-v3-color-bg-critical-solid-pressed)}.actionButton__label--variant_criticalSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__label--variant_criticalSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__icon--variant_criticalSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__icon--variant_criticalSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__prefixIcon--variant_criticalSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__prefixIcon--variant_criticalSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__suffixIcon--variant_criticalSolid{color:var(--seed-v3-color-palette-static-white)}.actionButton__suffixIcon--variant_criticalSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__progressIndicator--variant_criticalSolid{--track-color:var(--seed-v3-color-palette-static-white-alpha-200);--range-color:var(--seed-v3-color-palette-static-white)}.actionButton__root--variant_brandOutline{background:var(--seed-v3-color-bg-layer-default);border-style:solid;border-width:1px;border-color:var(--seed-v3-color-stroke-neutral)}.actionButton__root--variant_brandOutline:is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-default-pressed)}.actionButton__root--variant_brandOutline:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-layer-default);border-color:var(--seed-v3-color-stroke-neutral)}.actionButton__root--variant_brandOutline[data-loading]{background:var(--seed-v3-color-bg-layer-default)}.actionButton__label--variant_brandOutline{color:var(--seed-v3-color-fg-brand)}.actionButton__label--variant_brandOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__icon--variant_brandOutline{color:var(--seed-v3-color-fg-brand)}.actionButton__icon--variant_brandOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__prefixIcon--variant_brandOutline{color:var(--seed-v3-color-fg-brand)}.actionButton__prefixIcon--variant_brandOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__suffixIcon--variant_brandOutline{color:var(--seed-v3-color-fg-brand)}.actionButton__suffixIcon--variant_brandOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__progressIndicator--variant_brandOutline{--track-color:var(--seed-v3-color-palette-carrot-200);--range-color:var(--seed-v3-color-bg-brand-solid)}.actionButton__root--variant_neutralOutline{background:var(--seed-v3-color-bg-layer-default);border-style:solid;border-width:1px;border-color:var(--seed-v3-color-stroke-neutral)}.actionButton__root--variant_neutralOutline:is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-default-pressed)}.actionButton__root--variant_neutralOutline:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-layer-default);border-color:var(--seed-v3-color-stroke-neutral)}.actionButton__root--variant_neutralOutline[data-loading]{background:var(--seed-v3-color-bg-layer-default)}.actionButton__label--variant_neutralOutline{color:var(--seed-v3-color-fg-neutral)}.actionButton__label--variant_neutralOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__icon--variant_neutralOutline{color:var(--seed-v3-color-fg-neutral)}.actionButton__icon--variant_neutralOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__prefixIcon--variant_neutralOutline{color:var(--seed-v3-color-fg-neutral)}.actionButton__prefixIcon--variant_neutralOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__suffixIcon--variant_neutralOutline{color:var(--seed-v3-color-fg-neutral)}.actionButton__suffixIcon--variant_neutralOutline:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionButton__progressIndicator--variant_neutralOutline{--track-color:var(--seed-v3-color-palette-gray-500);--range-color:var(--seed-v3-color-fg-neutral)}.actionButton__root--size_xsmall{height:var(--seed-v3-dimension-s8);border-radius:var(--seed-v3-radius-full)}.actionButton__progressIndicator--size_xsmall{--size:14px;--thickness:2px}.actionButton__root--size_small{height:var(--seed-v3-dimension-s9);border-radius:var(--seed-v3-radius-s2)}.actionButton__progressIndicator--size_small{--size:14px;--thickness:2px}.actionButton__root--size_medium{height:var(--seed-v3-dimension-s10);border-radius:var(--seed-v3-radius-s2)}.actionButton__progressIndicator--size_medium{--size:16px;--thickness:2px}.actionButton__root--size_large{height:var(--seed-v3-dimension-s13);border-radius:var(--seed-v3-radius-s3)}.actionButton__progressIndicator--size_large{--size:18px;--thickness:2px}.actionButton__root--size_xsmall-layout_withText{gap:var(--seed-v3-dimension-s1);padding-inline:var(--seed-v3-dimension-s3_5);padding-block:var(--seed-v3-dimension-s1_5)}.actionButton__label--size_xsmall-layout_withText{font-size:var(--seed-v3-font-size-s4)}.actionButton__prefixIcon--size_xsmall-layout_withText,.actionButton__suffixIcon--size_xsmall-layout_withText{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.actionButton__root--size_xsmall-layout_iconOnly{min-width:var(--seed-v3-dimension-s8);padding-inline:var(--seed-v3-dimension-s1_5);padding-block:var(--seed-v3-dimension-s1_5)}.actionButton__icon--size_xsmall-layout_iconOnly{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.actionButton__root--size_small-layout_withText{gap:var(--seed-v3-dimension-s1);padding-inline:var(--seed-v3-dimension-s3_5);padding-block:var(--seed-v3-dimension-s2)}.actionButton__label--size_small-layout_withText{font-size:var(--seed-v3-font-size-s4)}.actionButton__prefixIcon--size_small-layout_withText,.actionButton__suffixIcon--size_small-layout_withText{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.actionButton__root--size_small-layout_iconOnly{min-width:var(--seed-v3-dimension-s9);padding-inline:var(--seed-v3-dimension-s2);padding-block:var(--seed-v3-dimension-s2)}.actionButton__icon--size_small-layout_iconOnly{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.actionButton__root--size_medium-layout_withText{gap:var(--seed-v3-dimension-s1);padding-inline:var(--seed-v3-dimension-s4);padding-block:var(--seed-v3-dimension-s2_5)}.actionButton__label--size_medium-layout_withText{font-size:var(--seed-v3-font-size-s4)}.actionButton__prefixIcon--size_medium-layout_withText,.actionButton__suffixIcon--size_medium-layout_withText{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.actionButton__root--size_medium-layout_iconOnly{min-width:var(--seed-v3-dimension-s10);padding-inline:var(--seed-v3-dimension-s2_5);padding-block:var(--seed-v3-dimension-s2_5)}.actionButton__icon--size_medium-layout_iconOnly{width:18px;height:18px}.actionButton__root--size_large-layout_withText{gap:var(--seed-v3-dimension-s2);padding-inline:var(--seed-v3-dimension-s5);padding-block:var(--seed-v3-dimension-s3_5)}.actionButton__label--size_large-layout_withText{font-size:var(--seed-v3-font-size-s6)}.actionButton__prefixIcon--size_large-layout_withText,.actionButton__suffixIcon--size_large-layout_withText{width:22px;height:22px}.actionButton__root--size_large-layout_iconOnly{min-width:var(--seed-v3-dimension-s13);padding-inline:var(--seed-v3-dimension-s3_5);padding-block:var(--seed-v3-dimension-s3_5)}.actionButton__icon--size_large-layout_iconOnly{width:22px;height:22px}.toggleButton__root{box-sizing:border-box;cursor:pointer;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border:none;flex-shrink:0;justify-content:center;align-items:center;font-family:inherit;text-decoration:none;display:inline-flex}.toggleButton__root:is(:focus,[data-focus]){outline:none}.toggleButton__root:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.toggleButton__root{transition:background-color var(--seed-v3-duration-s4)var(--seed-v3-timing-function-easing)}.toggleButton__label{font-weight:var(--seed-v3-font-weight-bold)}.toggleButton__label[data-loading]{opacity:0}.toggleButton__prefixIcon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.toggleButton__prefixIcon[data-loading]{opacity:0}.toggleButton__suffixIcon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.toggleButton__suffixIcon[data-loading]{opacity:0}.toggleButton__progressIndicator{display:none;position:absolute}.toggleButton__progressIndicator[data-loading]{display:flex}.toggleButton__root--variant_brandSolid{background:var(--seed-v3-color-bg-brand-solid)}.toggleButton__root--variant_brandSolid:is(:active,[data-active]){background:var(--seed-v3-color-bg-brand-solid-pressed)}.toggleButton__root--variant_brandSolid:is([aria-pressed=true],[data-pressed]){background:var(--seed-v3-color-bg-neutral-weak)}.toggleButton__root--variant_brandSolid:is([aria-pressed=true],[data-pressed]):is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-weak-pressed)}.toggleButton__root--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled)}.toggleButton__root--variant_brandSolid[data-loading]{background:var(--seed-v3-color-bg-brand-solid-pressed)}.toggleButton__root--variant_brandSolid:is([aria-pressed=true],[data-pressed])[data-loading]{background:var(--seed-v3-color-bg-neutral-weak-pressed)}.toggleButton__label--variant_brandSolid{color:var(--seed-v3-color-palette-static-white)}.toggleButton__label--variant_brandSolid:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-neutral)}.toggleButton__label--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.toggleButton__prefixIcon--variant_brandSolid{color:var(--seed-v3-color-palette-static-white)}.toggleButton__prefixIcon--variant_brandSolid:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-neutral)}.toggleButton__prefixIcon--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.toggleButton__suffixIcon--variant_brandSolid{color:var(--seed-v3-color-palette-static-white)}.toggleButton__suffixIcon--variant_brandSolid:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-neutral)}.toggleButton__suffixIcon--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.toggleButton__progressIndicator--variant_brandSolid{--track-color:var(--seed-v3-color-palette-static-white-alpha-200);--range-color:var(--seed-v3-color-palette-static-white)}.toggleButton__progressIndicator--variant_brandSolid:is([aria-pressed=true],[data-pressed]){--track-color:var(--seed-v3-color-palette-gray-500);--range-color:var(--seed-v3-color-fg-neutral)}.toggleButton__root--variant_neutralWeak{background:var(--seed-v3-color-bg-neutral-weak)}.toggleButton__root--variant_neutralWeak:is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-weak-pressed)}.toggleButton__root--variant_neutralWeak:is([aria-pressed=true],[data-pressed]){background:var(--seed-v3-color-bg-neutral-weak)}.toggleButton__root--variant_neutralWeak:is([aria-pressed=true],[data-pressed]):is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-weak-pressed)}.toggleButton__root--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled)}.toggleButton__root--variant_neutralWeak[data-loading],.toggleButton__root--variant_neutralWeak:is([aria-pressed=true],[data-pressed])[data-loading]{background:var(--seed-v3-color-bg-neutral-weak-pressed)}.toggleButton__label--variant_neutralWeak,.toggleButton__label--variant_neutralWeak:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-neutral)}.toggleButton__label--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.toggleButton__prefixIcon--variant_neutralWeak,.toggleButton__prefixIcon--variant_neutralWeak:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-neutral)}.toggleButton__prefixIcon--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.toggleButton__suffixIcon--variant_neutralWeak,.toggleButton__suffixIcon--variant_neutralWeak:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-neutral)}.toggleButton__suffixIcon--variant_neutralWeak:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.toggleButton__progressIndicator--variant_neutralWeak,.toggleButton__progressIndicator--variant_neutralWeak:is([aria-pressed=true],[data-pressed]){--track-color:var(--seed-v3-color-palette-gray-500);--range-color:var(--seed-v3-color-fg-neutral)}.toggleButton__root--size_xsmall{height:var(--seed-v3-dimension-s8);border-radius:var(--seed-v3-radius-full);gap:var(--seed-v3-dimension-s1);padding-inline:var(--seed-v3-dimension-s3_5);padding-block:var(--seed-v3-dimension-s1_5)}.toggleButton__label--size_xsmall{font-size:var(--seed-v3-font-size-s4)}.toggleButton__prefixIcon--size_xsmall,.toggleButton__suffixIcon--size_xsmall{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.toggleButton__progressIndicator--size_xsmall{--size:14px;--thickness:2px}.toggleButton__root--size_small{height:var(--seed-v3-dimension-s9);border-radius:var(--seed-v3-radius-full);gap:var(--seed-v3-dimension-s1);padding-inline:var(--seed-v3-dimension-s4);padding-block:var(--seed-v3-dimension-s2)}.toggleButton__label--size_small{font-size:var(--seed-v3-font-size-s4)}.toggleButton__prefixIcon--size_small,.toggleButton__suffixIcon--size_small{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.toggleButton__progressIndicator--size_small{--size:14px;--thickness:2px}.reactionButton__root{box-sizing:border-box;cursor:pointer;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border:none;flex-shrink:0;justify-content:center;align-items:center;font-family:inherit;text-decoration:none;display:inline-flex}.reactionButton__root:is(:focus,[data-focus]){outline:none}.reactionButton__root{transition:background-color var(--seed-v3-duration-s4)var(--seed-v3-timing-function-easing);background:var(--seed-v3-color-bg-neutral-weak)}.reactionButton__root:is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-weak-pressed)}.reactionButton__root:is([aria-pressed=true],[data-pressed]){background:var(--seed-v3-color-bg-layer-default);box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-brand)}.reactionButton__root:is([aria-pressed=true],[data-pressed]):is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-default-pressed)}.reactionButton__root:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed;background:var(--seed-v3-color-bg-disabled);box-shadow:inset 0 0 0 0px var(--seed-v3-color-stroke-brand)}.reactionButton__root[data-loading]{background:var(--seed-v3-color-bg-neutral-weak-pressed)}.reactionButton__root:is([aria-pressed=true],[data-pressed])[data-loading]{background:var(--seed-v3-color-bg-layer-default-pressed);box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-brand)}.reactionButton__label{font-weight:var(--seed-v3-font-weight-medium);color:var(--seed-v3-color-fg-neutral)}.reactionButton__label:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-brand)}.reactionButton__label:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.reactionButton__label[data-loading]{opacity:0}.reactionButton__count{font-weight:var(--seed-v3-font-weight-bold);color:var(--seed-v3-color-fg-neutral)}.reactionButton__count:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-brand)}.reactionButton__count:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.reactionButton__count[data-loading]{opacity:0}.reactionButton__prefixIcon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.reactionButton__prefixIcon:is([aria-pressed=true],[data-pressed]){color:var(--seed-v3-color-fg-brand)}.reactionButton__prefixIcon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.reactionButton__prefixIcon[data-loading]{opacity:0}.reactionButton__progressIndicator{--track-color:var(--seed-v3-color-palette-gray-500);--range-color:var(--seed-v3-color-fg-neutral);display:none;position:absolute}.reactionButton__progressIndicator:is([aria-pressed=true],[data-pressed]){--track-color:var(--seed-v3-color-palette-carrot-200);--range-color:var(--seed-v3-color-fg-brand)}.reactionButton__progressIndicator[data-loading]{display:flex}.reactionButton__root--size_xsmall{height:var(--seed-v3-dimension-s8);border-radius:var(--seed-v3-radius-full);gap:var(--seed-v3-dimension-s1);padding-inline:var(--seed-v3-dimension-s3);padding-block:var(--seed-v3-dimension-s1_5)}.reactionButton__label--size_xsmall,.reactionButton__count--size_xsmall{font-size:var(--seed-v3-font-size-s3);line-height:var(--seed-v3-line-height-s3)}.reactionButton__prefixIcon--size_xsmall{width:18px;height:18px}.reactionButton__progressIndicator--size_xsmall{--size:14px;--thickness:2px}.reactionButton__root--size_small{height:var(--seed-v3-dimension-s9);border-radius:var(--seed-v3-radius-full);gap:var(--seed-v3-dimension-s1);padding-inline:var(--seed-v3-dimension-s3_5);padding-block:var(--seed-v3-dimension-s2)}.reactionButton__label--size_small,.reactionButton__count--size_small{font-size:var(--seed-v3-font-size-s3);line-height:var(--seed-v3-line-height-s3)}.reactionButton__prefixIcon--size_small{width:18px;height:18px}.reactionButton__progressIndicator--size_small{--size:14px;--thickness:2px}.bottomSheet__positioner{overscroll-behavior-y:none;--sheet-z-index:2;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.bottomSheet__backdrop{background:var(--seed-v3-color-bg-overlay);z-index:calc(var(--sheet-z-index) + var(--layer-index,0));position:fixed;inset:0}.bottomSheet__backdrop:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s2);--seed-exit-translate-x:0;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1;animation-fill-mode:forwards}.bottomSheet__backdrop:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter);animation-duration:var(--seed-v3-duration-s2);--seed-enter-translate-x:0;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}.bottomSheet__content{box-sizing:border-box;word-break:break-all;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));background:var(--seed-v3-color-bg-layer-default);border-top-left-radius:var(--seed-v3-radius-s6);border-top-right-radius:var(--seed-v3-radius-s6);flex-direction:column;flex:1;display:flex;position:relative}.bottomSheet__content:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s4);--seed-exit-translate-x:0;--seed-exit-translate-y:100%;--seed-exit-opacity:1;--seed-exit-scale:1;animation-fill-mode:forwards}.bottomSheet__content:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter-expressive);animation-duration:var(--seed-v3-duration-s6);--seed-enter-translate-x:0;--seed-enter-translate-y:100%;--seed-enter-opacity:1;--seed-enter-scale:1}.bottomSheet__header{gap:var(--seed-v3-dimension-s2);padding-inline:var(--seed-v3-dimension-spacing-x-global-gutter);padding-top:var(--seed-v3-dimension-s6);padding-bottom:var(--seed-v3-dimension-s4);flex-direction:column;display:flex}.bottomSheet__title{color:var(--seed-v3-color-fg-neutral);font-size:var(--seed-v3-font-size-s8);line-height:var(--seed-v3-line-height-s8);font-weight:var(--seed-v3-font-weight-bold);margin:0}.bottomSheet__description{color:var(--seed-v3-color-fg-neutral-muted);font-size:var(--seed-v3-font-size-s6);line-height:var(--seed-v3-line-height-s6);font-weight:var(--seed-v3-font-weight-regular);white-space:pre-wrap;margin:0}.bottomSheet__body{padding-inline:var(--seed-v3-dimension-spacing-x-global-gutter);flex-direction:column;display:flex}.bottomSheet__footer{padding-inline:var(--seed-v3-dimension-spacing-x-global-gutter);padding-top:var(--seed-v3-dimension-s3);padding-bottom:var(--seed-v3-dimension-s4);flex-direction:column;display:flex}.bottomSheet__closeButton{top:var(--seed-v3-dimension-s5);right:var(--seed-v3-dimension-s5);border-radius:var(--seed-v3-radius-full);background:var(--seed-v3-color-palette-gray-300);justify-content:center;align-items:center;width:28px;height:28px;display:flex;position:absolute}.bottomSheet__closeButton:after{content:"";position:absolute;inset:-8px}.bottomSheet__closeIcon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0;width:14px;height:14px}.actionSheet__positioner{overscroll-behavior-y:none;--sheet-z-index:2;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.actionSheet__backdrop{background:var(--seed-v3-color-bg-overlay);z-index:calc(var(--sheet-z-index) + var(--layer-index,0));position:fixed;inset:0}.actionSheet__backdrop:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s2);--seed-exit-translate-x:0;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1;animation-fill-mode:forwards}.actionSheet__backdrop:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter);animation-duration:var(--seed-v3-duration-s2);--seed-enter-translate-x:0;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}.actionSheet__content{box-sizing:border-box;word-break:break-all;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));background:var(--seed-v3-color-bg-layer-floating);border-top-left-radius:var(--seed-v3-radius-s5);border-top-right-radius:var(--seed-v3-radius-s5);flex-direction:column;flex:1;display:flex;position:relative}.actionSheet__content:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s4);--seed-exit-translate-x:0;--seed-exit-translate-y:100%;--seed-exit-opacity:1;--seed-exit-scale:1;animation-fill-mode:forwards}.actionSheet__content:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter-expressive);animation-duration:var(--seed-v3-duration-s6);--seed-enter-translate-x:0;--seed-enter-translate-y:100%;--seed-enter-opacity:1;--seed-enter-scale:1}.actionSheet__header{padding-inline:var(--seed-v3-dimension-spacing-x-global-gutter);padding-block:var(--seed-v3-dimension-s3_5);align-items:center;gap:var(--seed-v3-dimension-s1);flex-direction:column;display:flex;position:relative}.actionSheet__header:after{content:"";left:var(--seed-v3-dimension-spacing-x-global-gutter);right:var(--seed-v3-dimension-spacing-x-global-gutter);background:var(--seed-v3-color-stroke-neutral);height:1px;display:block;position:absolute;bottom:0}.actionSheet__title{color:var(--seed-v3-color-fg-neutral-muted);font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4);font-weight:var(--seed-v3-font-weight-bold)}.actionSheet__description{color:var(--seed-v3-color-fg-neutral-muted);font-size:var(--seed-v3-font-size-s3);line-height:var(--seed-v3-line-height-s3);font-weight:var(--seed-v3-font-weight-regular)}.actionSheet__list{flex-direction:column;align-items:stretch;display:flex}.actionSheetItem__root{background-color:var(--seed-v3-color-bg-layer-floating);min-height:50px;padding-inline:var(--seed-v3-dimension-spacing-x-global-gutter);padding-block:var(--seed-v3-dimension-s3_5);justify-content:center;align-items:center;display:flex;position:relative}.actionSheetItem__root:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-floating-pressed)}.actionSheetItem__root:after{content:"";left:var(--seed-v3-dimension-spacing-x-global-gutter);right:var(--seed-v3-dimension-spacing-x-global-gutter);background:var(--seed-v3-color-stroke-neutral);height:1px;display:block;position:absolute;bottom:0}.actionSheetItem__label{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5);font-weight:var(--seed-v3-font-weight-regular)}.actionSheetItem__label--tone_neutral{color:var(--seed-v3-color-fg-neutral)}.actionSheetItem__label--tone_critical{color:var(--seed-v3-color-fg-critical)}.actionSheetCloseButton__root{background-color:var(--seed-v3-color-bg-layer-floating);min-height:50px;padding-inline:var(--seed-v3-dimension-spacing-x-global-gutter);padding-block:var(--seed-v3-dimension-s3_5);justify-content:center;align-items:center;display:flex}.actionSheetCloseButton__root:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-floating-pressed)}.actionSheetCloseButton__label{color:var(--seed-v3-color-fg-neutral);font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5);font-weight:var(--seed-v3-font-weight-bold)}.extendedActionSheet__positioner{overscroll-behavior-y:none;--sheet-z-index:2;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.extendedActionSheet__backdrop{background:var(--seed-v3-color-bg-overlay);z-index:calc(var(--sheet-z-index) + var(--layer-index,0));position:fixed;inset:0}.extendedActionSheet__backdrop:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s2);--seed-exit-translate-x:0;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1;animation-fill-mode:forwards}.extendedActionSheet__backdrop:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter);animation-duration:var(--seed-v3-duration-s2);--seed-enter-translate-x:0;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}.extendedActionSheet__content{box-sizing:border-box;word-break:break-all;z-index:calc(var(--sheet-z-index) + var(--layer-index,0));background:var(--seed-v3-color-bg-layer-floating);padding-inline:var(--seed-v3-dimension-spacing-x-global-gutter);padding-block:var(--seed-v3-dimension-s4);border-top-left-radius:var(--seed-v3-radius-s5);border-top-right-radius:var(--seed-v3-radius-s5);flex-direction:column;flex:1;display:flex;position:relative}.extendedActionSheet__content:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s4);--seed-exit-translate-x:0;--seed-exit-translate-y:100%;--seed-exit-opacity:1;--seed-exit-scale:1;animation-fill-mode:forwards}.extendedActionSheet__content:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter-expressive);animation-duration:var(--seed-v3-duration-s6);--seed-enter-translate-x:0;--seed-enter-translate-y:100%;--seed-enter-opacity:1;--seed-enter-scale:1}.extendedActionSheet__header{align-items:center;gap:var(--seed-v3-dimension-s1);padding-bottom:var(--seed-v3-dimension-s4);flex-direction:column;display:flex}.extendedActionSheet__title{color:var(--seed-v3-color-fg-neutral);font-size:var(--seed-v3-font-size-s6);line-height:var(--seed-v3-line-height-s6);font-weight:var(--seed-v3-font-weight-bold)}.extendedActionSheet__list{align-items:stretch;gap:var(--seed-v3-dimension-s2_5);flex-direction:column;display:flex}.extendedActionSheet__group{border-radius:var(--seed-v3-radius-s4);flex-direction:column;align-items:stretch;display:flex;overflow:hidden}.extendedActionSheet__footer{padding-top:var(--seed-v3-dimension-s2_5);flex-direction:column;align-items:stretch;display:flex}.extendedActionSheetItem__root{background-color:var(--seed-v3-color-bg-neutral-weak);min-height:52px;padding-inline:var(--seed-v3-dimension-s4);padding-block:var(--seed-v3-dimension-s3_5);justify-content:flex-start;align-items:center;gap:var(--seed-v3-dimension-s3_5);box-shadow:inset 0 calc(-1*1px)0 var(--seed-v3-color-stroke-neutral);display:flex}.extendedActionSheetItem__root:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-neutral-weak-pressed)}.extendedActionSheetItem__root:last-child{box-shadow:none}.extendedActionSheetItem__label{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5);font-weight:var(--seed-v3-font-weight-regular)}.extendedActionSheetItem__prefixIcon{flex-shrink:0;width:22px;height:22px;display:inline-flex}.extendedActionSheetItem__label--tone_neutral,.extendedActionSheetItem__prefixIcon--tone_neutral{color:var(--seed-v3-color-fg-neutral)}.extendedActionSheetItem__label--tone_critical,.extendedActionSheetItem__prefixIcon--tone_critical{color:var(--seed-v3-color-fg-critical)}.extendedActionSheetCloseButton__root{background-color:var(--seed-v3-color-bg-neutral-weak);min-height:52px;padding-inline:var(--seed-v3-dimension-s5);padding-block:var(--seed-v3-dimension-s3_5);border-radius:var(--seed-v3-radius-s3);justify-content:center;align-items:center;display:flex}.extendedActionSheetCloseButton__root:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-neutral-weak-pressed)}.extendedActionSheetCloseButton__label{color:var(--seed-v3-color-fg-neutral);font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5);font-weight:var(--seed-v3-font-weight-medium)}.fab__root{box-sizing:border-box;cursor:pointer;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border:none;justify-content:center;align-items:center;font-family:inherit;text-decoration:none;display:inline-flex}.fab__root:is(:focus,[data-focus]){outline:none}.fab__root:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.fab__root{background:var(--seed-v3-color-bg-layer-floating);border-radius:var(--seed-v3-radius-full);width:44px;height:44px;box-shadow:0 2px 6px #00000026}.fab__root:is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-floating-pressed)}.fab__icon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;display:inline-flex}.extendedFab__root{box-sizing:border-box;cursor:pointer;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border:none;flex-shrink:0;justify-content:center;align-items:center;font-family:inherit;text-decoration:none;display:inline-flex}.extendedFab__root:is(:focus,[data-focus]){outline:none}.extendedFab__root:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.extendedFab__root{border-radius:var(--seed-v3-radius-full);box-shadow:0 2px 6px #00000026}.extendedFab__prefixIcon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.extendedFab__root--variant_neutralSolid{background:var(--seed-v3-color-bg-neutral-inverted)}.extendedFab__root--variant_neutralSolid:is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-inverted-pressed)}.extendedFab__label--variant_neutralSolid,.extendedFab__prefixIcon--variant_neutralSolid{color:var(--seed-v3-color-fg-neutral-inverted)}.extendedFab__root--variant_layerFloating{background:var(--seed-v3-color-bg-layer-floating)}.extendedFab__root--variant_layerFloating:is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-floating-pressed)}.extendedFab__label--variant_layerFloating,.extendedFab__prefixIcon--variant_layerFloating{color:var(--seed-v3-color-fg-neutral)}.extendedFab__root--size_small{padding-inline:var(--seed-v3-dimension-s3_5);padding-block:var(--seed-v3-dimension-s2_5);gap:var(--seed-v3-dimension-s1);min-height:40px}.extendedFab__label--size_small{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4);font-weight:var(--seed-v3-font-weight-medium)}.extendedFab__prefixIcon--size_small{width:16px;height:16px}.extendedFab__root--size_medium{padding-inline:var(--seed-v3-dimension-s4);padding-block:var(--seed-v3-dimension-s3);gap:var(--seed-v3-dimension-s1);min-height:48px}.extendedFab__label--size_medium{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5);font-weight:var(--seed-v3-font-weight-bold)}.extendedFab__prefixIcon--size_medium{width:16px;height:16px}.badge__root{box-sizing:border-box;text-transform:none;text-align:start;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.badge__root--size_medium{min-height:var(--seed-v3-dimension-s5);padding-inline:var(--seed-v3-dimension-s1_5);padding-block:var(--seed-v3-dimension-s0_5)}.badge__label--size_medium{font-size:var(--seed-v3-font-size-s1);line-height:var(--seed-v3-line-height-s1)}.badge__root--size_large{min-height:var(--seed-v3-dimension-s6);padding-inline:var(--seed-v3-dimension-s2);padding-block:var(--seed-v3-dimension-s1)}.badge__label--size_large{font-size:var(--seed-v3-font-size-s2);line-height:var(--seed-v3-line-height-s2)}.badge__root--shape_pill{border-radius:var(--seed-v3-radius-full)}.badge__label--variant_weak{font-weight:var(--seed-v3-font-weight-medium)}.badge__label--variant_solid,.badge__label--variant_outline{font-weight:var(--seed-v3-font-weight-bold)}.badge__root--shape_rectangle-size_medium{border-radius:var(--seed-v3-radius-s1)}.badge__root--shape_rectangle-size_large{border-radius:var(--seed-v3-radius-s1_5)}.badge__root--tone_neutral-variant_weak{background-color:var(--seed-v3-color-bg-neutral-weak)}.badge__label--tone_neutral-variant_weak{color:var(--seed-v3-color-fg-neutral)}.badge__root--tone_neutral-variant_solid{background-color:var(--seed-v3-color-bg-neutral-inverted)}.badge__label--tone_neutral-variant_solid{color:var(--seed-v3-color-fg-neutral-inverted)}.badge__root--tone_neutral-variant_outline{box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-neutral)}.badge__label--tone_neutral-variant_outline{color:var(--seed-v3-color-fg-neutral)}.badge__root--tone_brand-variant_weak{background-color:var(--seed-v3-color-bg-brand-weak)}.badge__label--tone_brand-variant_weak{color:var(--seed-v3-color-fg-brand-contrast)}.badge__root--tone_brand-variant_solid{background-color:var(--seed-v3-color-bg-brand-solid)}.badge__label--tone_brand-variant_solid{color:var(--seed-v3-color-palette-static-white)}.badge__root--tone_brand-variant_outline{box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-brand)}.badge__label--tone_brand-variant_outline{color:var(--seed-v3-color-fg-brand)}.badge__root--tone_informative-variant_weak{background-color:var(--seed-v3-color-bg-informative-weak)}.badge__label--tone_informative-variant_weak{color:var(--seed-v3-color-fg-informative-contrast)}.badge__root--tone_informative-variant_solid{background-color:var(--seed-v3-color-bg-informative-solid)}.badge__label--tone_informative-variant_solid{color:var(--seed-v3-color-palette-static-white)}.badge__root--tone_informative-variant_outline{box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-informative)}.badge__label--tone_informative-variant_outline{color:var(--seed-v3-color-fg-informative)}.badge__root--tone_positive-variant_weak{background-color:var(--seed-v3-color-bg-positive-weak)}.badge__label--tone_positive-variant_weak{color:var(--seed-v3-color-fg-positive-contrast)}.badge__root--tone_positive-variant_solid{background-color:var(--seed-v3-color-bg-positive-solid)}.badge__label--tone_positive-variant_solid{color:var(--seed-v3-color-palette-static-white)}.badge__root--tone_positive-variant_outline{box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-positive)}.badge__label--tone_positive-variant_outline{color:var(--seed-v3-color-fg-positive)}.badge__root--tone_critical-variant_weak{background-color:var(--seed-v3-color-bg-critical-weak)}.badge__label--tone_critical-variant_weak{color:var(--seed-v3-color-fg-critical-contrast)}.badge__root--tone_critical-variant_solid{background-color:var(--seed-v3-color-bg-critical-solid)}.badge__label--tone_critical-variant_solid{color:var(--seed-v3-color-palette-static-white)}.badge__root--tone_critical-variant_outline{box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-critical)}.badge__label--tone_critical-variant_outline{color:var(--seed-v3-color-fg-critical)}.radio__root{box-sizing:border-box;background-color:var(--seed-v3-color-bg-layer-default);border-style:solid;border-width:1px;border-color:var(--seed-v3-color-stroke-control);border-radius:var(--seed-v3-radius-full);flex:none;justify-content:center;align-items:center;display:flex}.radio__root:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-default-pressed)}.radio__root:is(:checked,[data-checked]){background-color:var(--seed-v3-color-bg-brand-solid);border-width:0}.radio__root:is(:active,[data-active]):is(:checked,[data-checked]){background-color:var(--seed-v3-color-bg-brand-solid-pressed)}.radio__root:is(:disabled,[disabled],[data-disabled]){background-color:var(--seed-v3-color-palette-gray-300)}.radio__root:is(:disabled,[disabled],[data-disabled]):is(:checked,[data-checked]){background-color:none;border-color:var(--seed-v3-color-palette-gray-300)}.radio__icon{border-radius:var(--seed-v3-radius-full);display:none}.radio__icon:is(:checked,[data-checked]){background-color:var(--seed-v3-color-palette-static-white);display:block}.radio__icon:is(:disabled,[disabled],[data-disabled]):is(:checked,[data-checked]){background-color:var(--seed-v3-color-palette-gray-300)}.radio__root--size_large{width:var(--seed-v3-dimension-s6);height:var(--seed-v3-dimension-s6)}.radio__icon--size_large{width:var(--seed-v3-dimension-s2_5);height:var(--seed-v3-dimension-s2_5)}.radio__icon--size_large:is(:disabled,[disabled],[data-disabled]){width:var(--seed-v3-dimension-s3);height:var(--seed-v3-dimension-s3)}.radio__root--size_medium{width:var(--seed-v3-dimension-s5);height:var(--seed-v3-dimension-s5)}.radio__icon--size_medium{width:var(--seed-v3-dimension-s2);height:var(--seed-v3-dimension-s2)}.radio__icon--size_medium:is(:disabled,[disabled],[data-disabled]){width:var(--seed-v3-dimension-s2_5);height:var(--seed-v3-dimension-s2_5)}.dialog__positioner{overscroll-behavior-y:none;--dialog-z-index:2;z-index:calc(var(--dialog-z-index) + var(--layer-index,0));justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.dialog__backdrop{background:var(--seed-v3-color-bg-overlay);z-index:calc(var(--dialog-z-index) + var(--layer-index,0));position:fixed;inset:0}.dialog__backdrop:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter);animation-duration:var(--seed-v3-duration-s2);--seed-enter-translate-x:0;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1}.dialog__backdrop:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s2);--seed-exit-translate-x:0;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1;animation-fill-mode:forwards}.dialog__content{box-sizing:border-box;word-break:break-all;z-index:calc(var(--dialog-z-index) + var(--layer-index,0));background:var(--seed-v3-color-bg-layer-default);max-width:272px;margin:auto var(--seed-v3-dimension-s8);padding:var(--seed-v3-dimension-s5)var(--seed-v3-dimension-s5);border-radius:var(--seed-v3-radius-s5);flex-direction:column;flex:1;display:flex;position:relative}.dialog__content:is([data-state=open],[data-open]){animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter-expressive);animation-duration:var(--seed-v3-duration-s4);--seed-enter-translate-x:0;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1.3}.dialog__content:not(:is([data-state=open],[data-open])){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s2);--seed-exit-translate-x:0;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1;animation-fill-mode:forwards}.dialog__header{gap:var(--seed-v3-dimension-s1_5);flex-direction:column;display:flex}.dialog__title{color:var(--seed-v3-color-fg-neutral);font-size:var(--seed-v3-font-size-s7);line-height:var(--seed-v3-line-height-s7);font-weight:var(--seed-v3-font-weight-bold);margin:0}.dialog__description{color:var(--seed-v3-color-fg-neutral);font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5);font-weight:var(--seed-v3-font-weight-regular);white-space:pre-wrap;margin:0}.dialog__footer{padding-top:var(--seed-v3-dimension-s4);flex-direction:column;align-items:stretch;display:flex}.checkbox__root{vertical-align:top;isolation:isolate;cursor:pointer;align-items:flex-start;gap:var(--seed-v3-dimension-s2);max-inline-size:100%;display:inline-flex;position:relative}.checkbox__root:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.checkbox__control{box-sizing:border-box;flex-shrink:0;position:relative}.checkbox__icon{content:"";text-align:center;overflow:initial;margin:auto;display:none;position:absolute;inset:0}.checkbox__label{color:var(--seed-v3-color-fg-neutral)}.checkbox__label--weight_default{font-weight:var(--seed-v3-font-weight-regular)}.checkbox__label--weight_stronger{font-weight:var(--seed-v3-font-weight-bold)}.checkbox__control--variant_square{border-style:solid;border-width:1px;border-color:var(--seed-v3-color-stroke-control)}.checkbox__control--variant_square:is(:checked,:indeterminate,[data-checked],[data-indeterminate]){background:var(--seed-v3-color-bg-brand-solid);border-width:0}.checkbox__control--variant_square:is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-default-pressed)}.checkbox__control--variant_square:is(:active,[data-active]):is(:checked,:indeterminate,[data-checked],[data-indeterminate]){background:var(--seed-v3-color-bg-brand-solid-pressed)}.checkbox__control--variant_square:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled);border-color:var(--seed-v3-color-stroke-neutral)}.checkbox__control--variant_square:is(:disabled,[disabled],[data-disabled]):is(:active,[data-active]){background:var(--seed-v3-color-bg-disabled)}.checkbox__icon--variant_square:is(:checked,:indeterminate,[data-checked],[data-indeterminate]){color:var(--seed-v3-color-palette-static-white);display:block}.checkbox__icon--variant_square:is(:disabled,[disabled],[data-disabled]):is(:checked,:indeterminate,[data-checked],[data-indeterminate]){color:var(--seed-v3-color-fg-disabled);display:block}.checkbox__label--variant_square:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.checkbox__control--variant_ghost,.checkbox__control--variant_ghost:is(:checked,:indeterminate,[data-checked],[data-indeterminate]){background:0 0}.checkbox__control--variant_ghost:is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-default-pressed)}.checkbox__control--variant_ghost:is(:active,[data-active]):is(:checked,:indeterminate,[data-checked],[data-indeterminate]){background:var(--seed-v3-color-bg-brand-weak-pressed)}.checkbox__control--variant_ghost:is(:disabled,[disabled],[data-disabled]):is(:checked,:indeterminate,[data-checked],[data-indeterminate]),.checkbox__control--variant_ghost:is(:disabled,[disabled],[data-disabled]):is(:active,[data-active]){background:0 0}.checkbox__icon--variant_ghost{color:var(--seed-v3-color-fg-placeholder);display:block}.checkbox__icon--variant_ghost:is(:checked,:indeterminate,[data-checked],[data-indeterminate]){color:var(--seed-v3-color-fg-brand)}.checkbox__icon--variant_ghost:is(:disabled,[disabled],[data-disabled]):is(:checked,:indeterminate,[data-checked],[data-indeterminate]),.checkbox__icon--variant_ghost:is(:disabled,[disabled],[data-disabled]),.checkbox__label--variant_ghost:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.checkbox__root--size_large{min-height:var(--seed-v3-dimension-s9)}.checkbox__control--size_large{border-radius:var(--seed-v3-radius-s1);width:var(--seed-v3-dimension-s6);height:var(--seed-v3-dimension-s6);margin:calc((var(--seed-v3-dimension-s9) - var(--seed-v3-dimension-s6))/2)0}.checkbox__label--size_large{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5);margin-block-start:calc(18px - .65625rem)}.checkbox__root--size_medium{min-height:var(--seed-v3-dimension-s8)}.checkbox__control--size_medium{border-radius:var(--seed-v3-radius-s1);width:var(--seed-v3-dimension-s5);height:var(--seed-v3-dimension-s5);margin:calc((var(--seed-v3-dimension-s8) - var(--seed-v3-dimension-s5))/2)0}.checkbox__label--size_medium{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4);margin-block-start:calc(16px - .59375rem)}.checkbox__icon--size_medium-variant_ghost{width:14px;height:14px}.checkbox__icon--size_large-variant_ghost{width:18px;height:18px}.checkbox__icon--size_medium-variant_square{width:12px;height:12px}.checkbox__icon--size_large-variant_square{width:14px;height:14px}.actionChip__root{box-sizing:border-box;cursor:pointer;text-transform:none;text-align:start;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--seed-v3-radius-full);border:none;flex-shrink:0;justify-content:center;align-items:center;font-family:inherit;display:inline-flex}.actionChip__root:is(:focus,[data-focus]){outline:none}.actionChip__root{background:var(--seed-v3-color-bg-neutral-weak)}.actionChip__root:is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-weak-pressed)}.actionChip__root:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled);cursor:not-allowed}.actionChip__label{color:var(--seed-v3-color-fg-neutral);line-height:1;font-weight:var(--seed-v3-font-weight-medium)}.actionChip__label:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionChip__prefixIcon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0;display:inline-flex}.actionChip__prefixIcon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionChip__suffixIcon{color:var(--seed-v3-color-fg-neutral-subtle);flex-shrink:0;display:inline-flex}.actionChip__suffixIcon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionChip__icon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0;display:inline-flex}.actionChip__icon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.actionChip__count{color:var(--seed-v3-color-fg-neutral-muted);line-height:1;font-weight:var(--seed-v3-font-weight-medium)}.actionChip__root--size_medium{min-height:var(--seed-v3-dimension-s9);padding-block:var(--seed-v3-dimension-s2);gap:var(--seed-v3-dimension-s1)}.actionChip__label--size_medium{font-size:var(--seed-v3-font-size-s4)}.actionChip__prefixIcon--size_medium{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.actionChip__suffixIcon--size_medium{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.actionChip__count--size_medium{font-size:var(--seed-v3-font-size-s4)}.actionChip__root--size_small{min-height:var(--seed-v3-dimension-s8);padding-block:var(--seed-v3-dimension-s1_5);gap:var(--seed-v3-dimension-s1)}.actionChip__label--size_small{font-size:var(--seed-v3-font-size-s4)}.actionChip__prefixIcon--size_small{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.actionChip__suffixIcon--size_small{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.actionChip__count--size_small{font-size:var(--seed-v3-font-size-s4)}.actionChip__root--size_medium-layout_withText{padding-inline:var(--seed-v3-dimension-s3_5)}.actionChip__root--size_medium-layout_iconOnly{min-width:var(--seed-v3-dimension-s9)}.actionChip__icon--size_medium-layout_iconOnly{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.actionChip__root--size_small-layout_withText{padding-inline:var(--seed-v3-dimension-s3)}.actionChip__root--size_small-layout_iconOnly{min-width:var(--seed-v3-dimension-s8)}.actionChip__icon--size_small-layout_iconOnly{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.controlChip__root{box-sizing:border-box;cursor:pointer;text-transform:none;text-align:start;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--seed-v3-radius-full);box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-neutral);border:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.controlChip__root:is(:focus,[data-focus]){outline:none}.controlChip__root:is(:active,[data-active]){background:var(--seed-v3-color-bg-layer-default-pressed)}.controlChip__root:is(:checked,[data-checked]){background:var(--seed-v3-color-bg-neutral-solid-muted);box-shadow:none}.controlChip__root:is(:checked,[data-checked]):is(:active,[data-active]){background:var(--seed-v3-color-bg-neutral-solid-muted-pressed)}.controlChip__root:is(:disabled,[disabled],[data-disabled]){background:var(--seed-v3-color-bg-disabled);cursor:not-allowed}.controlChip__label{color:var(--seed-v3-color-fg-neutral);line-height:1;font-weight:var(--seed-v3-font-weight-medium)}.controlChip__label:is(:checked,[data-checked]){color:var(--seed-v3-color-palette-static-white);font-weight:var(--seed-v3-font-weight-bold)}.controlChip__label:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.controlChip__prefixIcon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0;display:inline-flex}.controlChip__prefixIcon:is(:checked,[data-checked]){color:var(--seed-v3-color-palette-static-white)}.controlChip__prefixIcon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.controlChip__suffixIcon{color:var(--seed-v3-color-fg-neutral-subtle);flex-shrink:0;display:inline-flex}.controlChip__suffixIcon:is(:checked,[data-checked]){color:var(--seed-v3-color-palette-static-white)}.controlChip__suffixIcon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.controlChip__icon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0;display:inline-flex}.controlChip__icon:is(:checked,[data-checked]){color:var(--seed-v3-color-palette-static-white)}.controlChip__icon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.controlChip__count{color:var(--seed-v3-color-fg-neutral-muted);line-height:1;font-weight:var(--seed-v3-font-weight-medium)}.controlChip__count:is(:checked,[data-checked]){color:var(--seed-v3-color-palette-static-white-alpha-800)}.controlChip__root--size_medium{min-height:var(--seed-v3-dimension-s9);padding-block:var(--seed-v3-dimension-s2);gap:var(--seed-v3-dimension-s1)}.controlChip__label--size_medium{font-size:var(--seed-v3-font-size-s4)}.controlChip__prefixIcon--size_medium{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.controlChip__suffixIcon--size_medium{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.controlChip__count--size_medium{font-size:var(--seed-v3-font-size-s4)}.controlChip__root--size_small{min-height:var(--seed-v3-dimension-s8);padding-block:var(--seed-v3-dimension-s1_5);gap:var(--seed-v3-dimension-s1)}.controlChip__label--size_small{font-size:var(--seed-v3-font-size-s4)}.controlChip__prefixIcon--size_small{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.controlChip__suffixIcon--size_small{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.controlChip__count--size_small{font-size:var(--seed-v3-font-size-s4)}.controlChip__root--size_medium-layout_withText{padding-inline:var(--seed-v3-dimension-s3_5)}.controlChip__root--size_medium-layout_iconOnly{min-width:var(--seed-v3-dimension-s9)}.controlChip__icon--size_medium-layout_iconOnly{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.controlChip__root--size_small-layout_withText{padding-inline:var(--seed-v3-dimension-s3)}.controlChip__root--size_small-layout_iconOnly{min-width:var(--seed-v3-dimension-s8)}.controlChip__icon--size_small-layout_iconOnly{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.callout__root{box-sizing:border-box;width:100%;min-height:50px;padding:var(--seed-v3-dimension-s3_5);align-items:center;gap:var(--seed-v3-dimension-s3);border-radius:var(--seed-v3-radius-s2_5);text-align:start;font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s5);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border:none;font-family:inherit;display:flex}.callout__root:is(button){cursor:pointer}.callout__icon{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4);flex:none}.callout__textContent{margin-inline-end:auto}.callout__title{font-weight:var(--seed-v3-font-weight-bold)}.callout__spacer{letter-spacing:.25em}.callout__description{font-weight:var(--seed-v3-font-weight-regular)}.callout__linkLabel{text-underline-offset:2px;cursor:pointer;background-color:#0000;border:none;padding:0;font-family:inherit;text-decoration:underline;display:inline-block}.callout__actionableIcon{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4);flex:none}.callout__dismissButton{width:var(--seed-v3-dimension-s10);height:var(--seed-v3-dimension-s10);margin:calc((var(--seed-v3-dimension-s10) - var(--seed-v3-dimension-s4))*-.5);cursor:pointer;background-color:#0000;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:flex}.callout__dismissIcon{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.callout__root--tone_neutral{background-color:var(--seed-v3-color-bg-neutral-weak)}.callout__root--tone_neutral:is(button):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-neutral-weak-pressed)}.callout__icon--tone_neutral,.callout__title--tone_neutral,.callout__description--tone_neutral,.callout__linkLabel--tone_neutral,.callout__actionableIcon--tone_neutral,.callout__dismissIcon--tone_neutral{color:var(--seed-v3-color-fg-neutral)}.callout__root--tone_informative{background-color:var(--seed-v3-color-bg-informative-weak)}.callout__root--tone_informative:is(button):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-informative-weak-pressed)}.callout__icon--tone_informative,.callout__title--tone_informative,.callout__description--tone_informative,.callout__linkLabel--tone_informative,.callout__actionableIcon--tone_informative,.callout__dismissIcon--tone_informative{color:var(--seed-v3-color-fg-informative-contrast)}.callout__root--tone_warning{background-color:var(--seed-v3-color-bg-warning-weak)}.callout__root--tone_warning:is(button):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-warning-weak-pressed)}.callout__icon--tone_warning,.callout__title--tone_warning,.callout__description--tone_warning,.callout__linkLabel--tone_warning,.callout__actionableIcon--tone_warning,.callout__dismissIcon--tone_warning{color:var(--seed-v3-color-fg-warning-contrast)}.callout__root--tone_critical{background-color:var(--seed-v3-color-bg-critical-weak)}.callout__root--tone_critical:is(button):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-critical-weak-pressed)}.callout__icon--tone_critical,.callout__title--tone_critical,.callout__description--tone_critical,.callout__linkLabel--tone_critical,.callout__actionableIcon--tone_critical,.callout__dismissIcon--tone_critical{color:var(--seed-v3-color-fg-critical-contrast)}.callout__root--tone_magic{background-color:var(--seed-v3-color-bg-magic-weak)}.callout__root--tone_magic:is(button):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-magic-weak-pressed)}.callout__icon--tone_magic,.callout__title--tone_magic,.callout__description--tone_magic,.callout__linkLabel--tone_magic,.callout__actionableIcon--tone_magic,.callout__dismissIcon--tone_magic{color:var(--seed-v3-color-fg-magic-contrast)}.mannerTempBadge__root{box-sizing:border-box;text-transform:none;text-align:start;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--seed-v3-radius-full);padding-inline:var(--seed-v3-dimension-s1_5);padding-block:var(--seed-v3-dimension-s0_5);justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.mannerTempBadge__label{font-size:var(--seed-v3-font-size-s1);line-height:var(--seed-v3-line-height-s1);font-weight:var(--seed-v3-font-weight-bold)}.mannerTempBadge__root--level_l1{background-color:var(--seed-v3-color-manner-temp-l1-bg)}.mannerTempBadge__label--level_l1{color:var(--seed-v3-color-manner-temp-l1-text)}.mannerTempBadge__root--level_l2{background-color:var(--seed-v3-color-manner-temp-l2-bg)}.mannerTempBadge__label--level_l2{color:var(--seed-v3-color-manner-temp-l2-text)}.mannerTempBadge__root--level_l3{background-color:var(--seed-v3-color-manner-temp-l3-bg)}.mannerTempBadge__label--level_l3{color:var(--seed-v3-color-manner-temp-l3-text)}.mannerTempBadge__root--level_l4{background-color:var(--seed-v3-color-manner-temp-l4-bg)}.mannerTempBadge__label--level_l4{color:var(--seed-v3-color-manner-temp-l4-text)}.mannerTempBadge__root--level_l5{background-color:var(--seed-v3-color-manner-temp-l5-bg)}.mannerTempBadge__label--level_l5{color:var(--seed-v3-color-manner-temp-l5-text)}.mannerTempBadge__root--level_l6{background-color:var(--seed-v3-color-manner-temp-l6-bg)}.mannerTempBadge__label--level_l6{color:var(--seed-v3-color-manner-temp-l6-text)}.segmentedControl__root{box-sizing:border-box;min-width:fit-content;max-width:100%;padding:var(--seed-v3-dimension-s1);border-radius:var(--seed-v3-radius-full);background-color:var(--seed-v3-color-bg-neutral-weak);isolation:isolate;grid-auto-columns:1fr;grid-auto-flow:column;align-items:center;display:grid;position:relative}.segmentedControl__segment{min-width:86px;height:var(--seed-v3-dimension-s8);border-radius:var(--seed-v3-radius-full);user-select:none;line-height:var(--seed-v3-line-height-s5);display:grid;overflow:hidden}.segmentedControl__segment:not(:is(:disabled,[disabled],[data-disabled])){cursor:pointer}.segmentedControl__segment:not(:is(:disabled,[disabled],[data-disabled])):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-neutral-weak-pressed)}.segmentedControl__segment:not(:is(:disabled,[disabled],[data-disabled])):is(:checked,[data-checked]):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-default-pressed)}.segmentedControl__segmentLabel{padding-inline:calc(var(--seed-v3-dimension-s4) - 1px);text-align:center;font-weight:var(--seed-v3-font-weight-medium);font-size:var(--seed-v3-font-size-s5);white-space:nowrap;text-overflow:ellipsis;color:var(--seed-v3-color-fg-neutral-muted);grid-area:1/1/1/1;margin-block:auto;overflow:hidden}.segmentedControl__segmentLabel:is(:checked,[data-checked]){color:var(--seed-v3-color-fg-neutral);font-weight:var(--seed-v3-font-weight-bold)}.segmentedControl__segmentLabel:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.segmentedControl__segmentLabelPlaceholder{padding-inline:var(--seed-v3-dimension-s4);text-align:center;font-weight:var(--seed-v3-font-weight-bold);font-size:var(--seed-v3-font-size-s5);text-overflow:ellipsis;white-space:nowrap;opacity:0;grid-area:1/1/1/1;overflow:hidden}.segmentedControl__indicator{inset-block:var(--seed-v3-dimension-s1);width:calc((100% - var(--seed-v3-dimension-s1)*2)/var(--seed-design-segmented-control-segment-count));transform:translateX(calc(var(--seed-design-segmented-control-current-segment-index)*100%));z-index:-1;border-radius:var(--seed-v3-radius-full);background-color:var(--seed-v3-color-bg-layer-default);will-change:transform;transition:transform var(--seed-v3-duration-s4)var(--seed-v3-timing-function-easing);position:absolute;inset-inline-start:var(--seed-v3-dimension-s1);box-shadow:0 1px 6px #0000000d}.selectBoxGroup__root{flex-direction:column;width:100%;display:flex}.selectBox__root{cursor:pointer;justify-content:space-between;align-items:center;gap:var(--seed-v3-dimension-s2_5);padding-inline:var(--seed-v3-dimension-s4);padding-block:var(--seed-v3-dimension-s5);border-radius:var(--seed-v3-radius-s3);box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-neutral);display:flex}.selectBox__root:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-default-pressed)}.selectBox__root:is(:checked,[data-checked]){background-color:var(--seed-v3-color-bg-neutral-weak);box-shadow:inset 0 0 0 1px var(--seed-v3-color-stroke-control)}.selectBox__root:is(:checked,[data-checked]):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-neutral-weak-pressed)}.selectBox__content{gap:var(--seed-v3-dimension-s0_5);flex-direction:column;display:flex}.selectBox__checkboxControl{box-sizing:border-box;width:var(--seed-v3-dimension-s6);height:var(--seed-v3-dimension-s6);background-color:var(--seed-v3-color-bg-layer-default);border-style:solid;border-width:1px;border-color:var(--seed-v3-color-stroke-control);border-radius:var(--seed-v3-radius-s1);flex:none;justify-content:center;align-items:center;display:flex}.selectBox__checkboxControl:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-default-pressed)}.selectBox__checkboxControl:is(:checked,[data-checked]){background-color:var(--seed-v3-color-bg-brand-solid);border-width:0}.selectBox__checkboxControl:is(:checked,[data-checked]):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-brand-solid-pressed)}.selectBox__checkboxIcon{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5);display:none}.selectBox__checkboxIcon:is(:checked,[data-checked]){color:var(--seed-v3-color-palette-static-white);display:block}.selectBox__radioControl{box-sizing:border-box;width:var(--seed-v3-dimension-s6);height:var(--seed-v3-dimension-s6);background-color:var(--seed-v3-color-bg-layer-default);border-style:solid;border-width:1px;border-color:var(--seed-v3-color-stroke-control);border-radius:var(--seed-v3-radius-full);flex:none;justify-content:center;align-items:center;display:flex}.selectBox__radioControl:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-default-pressed)}.selectBox__radioControl:is(:checked,[data-checked]){background-color:var(--seed-v3-color-bg-brand-solid);border-width:0}.selectBox__radioControl:is(:checked,[data-checked]):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-brand-solid-pressed)}.selectBox__radioIcon{width:var(--seed-v3-dimension-s2_5);height:var(--seed-v3-dimension-s2_5);border-radius:var(--seed-v3-radius-full);display:none}.selectBox__radioIcon:is(:checked,[data-checked]){background-color:var(--seed-v3-color-palette-static-white);color:var(--seed-v3-color-palette-static-white);display:block}.selectBox__label{color:var(--seed-v3-color-fg-neutral);font-weight:var(--seed-v3-font-weight-bold);font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5)}.selectBox__description{color:var(--seed-v3-color-fg-neutral-muted);font-weight:var(--seed-v3-font-weight-regular);font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.switch__root{box-sizing:border-box;vertical-align:top;isolation:isolate;opacity:1;cursor:pointer;justify-content:space-between;align-items:flex-start;display:inline-flex;position:relative}.switch__root:is(:disabled,[disabled],[data-disabled]){opacity:.38;cursor:not-allowed}.switch__control{box-sizing:border-box;border-radius:var(--seed-v3-radius-full);background:var(--seed-v3-color-palette-gray-600);transition:background-color 50ms cubic-bezier(.35,0,.35,1) 20ms;display:block;position:relative}.switch__control:is(:checked,[data-checked]){background:var(--seed-v3-color-bg-brand-solid)}.switch__thumb{border-radius:var(--seed-v3-radius-full);background:var(--seed-v3-color-palette-static-white);transition:transform .15s cubic-bezier(.35,0,.35,1)}.switch__root--size_medium{min-height:32px}.switch__control--size_medium{min-block-size:32px;min-inline-size:52px;padding:2px}.switch__thumb--size_medium{width:28px;height:28px;box-shadow:0 3px 8px #00000026,0 1px 3px #0000000f}.switch__thumb--size_medium:is(:checked,[data-checked]){transform:translate(20px)}.switch__root--size_small{gap:var(--seed-v3-dimension-s2);min-height:24px}.switch__control--size_small{min-block-size:16px;min-inline-size:26px;margin:4px 0;padding:2px}.switch__thumb--size_small{width:12px;height:12px}.switch__thumb--size_small:is(:checked,[data-checked]){transform:translate(10px)}.switch__label--size_small{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4);font-weight:var(--seed-v3-font-weight-regular);margin-top:calc(12px - .59375rem)}.helpBubble__backdrop{z-index:1000;background:var(--seed-v3-color-bg-overlay);width:100vw;height:100vh;position:fixed;inset:0}.helpBubble__backdrop:is(:hidden,[hidden],[data-hidden]){display:none!important}.helpBubble__content{background:var(--seed-v3-color-bg-neutral-solid);padding-inline:var(--seed-v3-dimension-s3);padding-block:var(--seed-v3-dimension-s3);border-radius:var(--seed-v3-radius-s3);word-break:keep-all;flex-direction:column;display:flex}.helpBubble__content:is(:hidden,[hidden],[data-hidden]){display:none!important}.helpBubble__arrow{fill:var(--seed-v3-color-bg-neutral-solid);width:10px;height:6px}.helpBubble__title{color:var(--seed-v3-color-palette-static-white);font-size:var(--seed-v3-font-size-s3);font-weight:var(--seed-v3-font-weight-bold)}.helpBubble__description{color:var(--seed-v3-color-palette-static-white);font-size:var(--seed-v3-font-size-s3);font-weight:var(--seed-v3-font-weight-regular)}.helpBubble__closeButton{color:var(--seed-v3-color-palette-static-white);justify-content:center;align-items:center;width:32px;height:32px;display:flex;position:absolute;top:4px;right:4px}.helpBubble__closeIcon{width:14px;height:14px}.identityPlaceholder__root{box-sizing:border-box;vertical-align:top;background-color:var(--seed-v3-color-palette-gray-400);justify-content:center;align-items:center;width:100%;height:100%;display:inline-flex;position:relative}.identityPlaceholder__image{object-fit:cover;fill:#f7f8fa;width:100%;height:100%;display:block;overflow:hidden}.inlineBanner__root{justify-content:space-between;align-items:center;gap:var(--seed-v3-dimension-s4);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;padding-inline:var(--seed-v3-dimension-s4);border:none;padding-block:0;font-family:inherit;display:flex}.inlineBanner__root:is(button){cursor:pointer}.inlineBanner__content{align-items:flex-start;gap:var(--seed-v3-dimension-s2);box-sizing:border-box;padding-block:var(--seed-v3-dimension-s2_5);font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4);min-height:var(--seed-v3-dimension-s10);text-align:start;display:flex}.inlineBanner__icon{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4);flex:none;margin-block:1.5px}.inlineBanner__title{font-weight:var(--seed-v3-font-weight-bold)}.inlineBanner__spacer{letter-spacing:.25em}.inlineBanner__description{font-weight:var(--seed-v3-font-weight-medium)}.inlineBanner__linkLabel{height:var(--seed-v3-dimension-s10);font-weight:var(--seed-v3-font-weight-regular);font-size:var(--seed-v3-font-size-s2);line-height:var(--seed-v3-line-height-s2);text-underline-offset:2px;cursor:pointer;background-color:#0000;border:none;flex:none;align-items:center;padding:0;font-family:inherit;text-decoration:underline;display:flex}.inlineBanner__actionableIcon{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4);flex:none}.inlineBanner__dismissButton{width:var(--seed-v3-dimension-s10);height:var(--seed-v3-dimension-s10);margin:calc((var(--seed-v3-dimension-s10) - var(--seed-v3-dimension-s4))*-.5);cursor:pointer;background-color:#0000;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:flex}.inlineBanner__dismissIcon{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.inlineBanner__root--variant_neutralWeak{background-color:var(--seed-v3-color-bg-neutral-weak)}.inlineBanner__icon--variant_neutralWeak,.inlineBanner__title--variant_neutralWeak,.inlineBanner__description--variant_neutralWeak,.inlineBanner__linkLabel--variant_neutralWeak,.inlineBanner__actionableIcon--variant_neutralWeak,.inlineBanner__dismissIcon--variant_neutralWeak{color:var(--seed-v3-color-fg-neutral)}.inlineBanner__root--variant_positiveWeak{background-color:var(--seed-v3-color-bg-positive-weak)}.inlineBanner__icon--variant_positiveWeak,.inlineBanner__title--variant_positiveWeak,.inlineBanner__description--variant_positiveWeak,.inlineBanner__linkLabel--variant_positiveWeak,.inlineBanner__actionableIcon--variant_positiveWeak,.inlineBanner__dismissIcon--variant_positiveWeak{color:var(--seed-v3-color-fg-positive-contrast)}.inlineBanner__root--variant_informativeWeak{background-color:var(--seed-v3-color-bg-informative-weak)}.inlineBanner__icon--variant_informativeWeak,.inlineBanner__title--variant_informativeWeak,.inlineBanner__description--variant_informativeWeak,.inlineBanner__linkLabel--variant_informativeWeak,.inlineBanner__actionableIcon--variant_informativeWeak,.inlineBanner__dismissIcon--variant_informativeWeak{color:var(--seed-v3-color-fg-informative-contrast)}.inlineBanner__root--variant_warningWeak{background-color:var(--seed-v3-color-bg-warning-weak)}.inlineBanner__icon--variant_warningWeak,.inlineBanner__title--variant_warningWeak,.inlineBanner__description--variant_warningWeak,.inlineBanner__linkLabel--variant_warningWeak,.inlineBanner__actionableIcon--variant_warningWeak,.inlineBanner__dismissIcon--variant_warningWeak{color:var(--seed-v3-color-fg-warning-contrast)}.inlineBanner__root--variant_warningSolid{background-color:var(--seed-v3-color-bg-warning-solid)}.inlineBanner__icon--variant_warningSolid,.inlineBanner__title--variant_warningSolid,.inlineBanner__description--variant_warningSolid,.inlineBanner__linkLabel--variant_warningSolid,.inlineBanner__actionableIcon--variant_warningSolid,.inlineBanner__dismissIcon--variant_warningSolid{color:var(--seed-v3-color-fg-neutral)}.inlineBanner__root--variant_criticalWeak{background-color:var(--seed-v3-color-bg-critical-weak)}.inlineBanner__icon--variant_criticalWeak,.inlineBanner__title--variant_criticalWeak,.inlineBanner__description--variant_criticalWeak,.inlineBanner__linkLabel--variant_criticalWeak,.inlineBanner__actionableIcon--variant_criticalWeak{color:var(--seed-v3-color-fg-critical-contrast)}.inlineBanner__root--variant_criticalSolid{background-color:var(--seed-v3-color-bg-critical-solid)}.inlineBanner__icon--variant_criticalSolid,.inlineBanner__title--variant_criticalSolid,.inlineBanner__description--variant_criticalSolid,.inlineBanner__linkLabel--variant_criticalSolid,.inlineBanner__actionableIcon--variant_criticalSolid{color:var(--seed-v3-color-palette-static-white)}.progressCircle__root{box-sizing:border-box;display:inline-flex;position:relative}.progressCircle__root[data-progress-state=indeterminate]{animation:1.2s cubic-bezier(.35,.25,.65,.75) infinite rotate}.progressCircle__track{stroke:var(--track-color)}.progressCircle__range{stroke:var(--range-color);stroke-linecap:round;transition-property:stroke-dasharray;transition-duration:.3s;transition-timing-function:cubic-bezier(0,0,.15,1)}.progressCircle__range[data-progress-state=indeterminate]{animation:1.2s cubic-bezier(.35,0,.65,1) infinite headDash,1.2s cubic-bezier(.35,0,.65,.6) infinite tailDash}.progressCircle__root--tone_neutral{--track-color:var(--seed-v3-color-palette-gray-200);--range-color:var(--seed-v3-color-palette-gray-500)}.progressCircle__root--tone_brand{--track-color:var(--seed-v3-color-palette-carrot-200);--range-color:var(--seed-v3-color-bg-brand-solid)}.progressCircle__root--tone_staticWhite{--track-color:var(--seed-v3-color-palette-static-white-alpha-200);--range-color:var(--seed-v3-color-palette-static-white)}.progressCircle__root--size_24{--size:var(--seed-v3-dimension-s6);--thickness:3px}.progressCircle__root--size_40{--size:var(--seed-v3-dimension-s10);--thickness:5px}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes headDash{0%{stroke-dasharray:0 1000%}75%{stroke-dasharray:var(--circumference),1000%}to{stroke-dasharray:var(--circumference),1000%}}@keyframes tailDash{0%{stroke-dashoffset:0}33.33%{stroke-dashoffset:0}to{stroke-dashoffset:calc(var(--circumference)*-1)}}.tab__root{cursor:pointer;box-sizing:border-box;white-space:nowrap;background-color:#0000;border:none;justify-content:center;align-items:flex-end;display:flex}.tab__root:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.tab__label{color:var(--seed-v3-color-fg-neutral-subtle);position:relative}.tab__label:is(:selected,[data-selected]){color:var(--seed-v3-color-fg-neutral)}.tab__label:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.tab__notification{top:0;right:calc(-1*var(--seed-v3-dimension-s1) - var(--seed-v3-dimension-s0_5));background-color:var(--seed-v3-color-bg-brand-solid);width:var(--seed-v3-dimension-s1);height:var(--seed-v3-dimension-s1);border-radius:var(--seed-v3-radius-full);align-self:flex-start;position:absolute}.tab__root--layout_fill{flex:1}.tab__root--size_medium{min-height:44px;padding-inline:var(--seed-v3-dimension-s2_5);padding-block:var(--seed-v3-dimension-s2_5)}.tab__label--size_medium{font-size:var(--seed-v3-font-size-s5);font-weight:var(--seed-v3-font-weight-bold)}.tab__root--size_small{min-height:40px;padding-inline:var(--seed-v3-dimension-s2_5);padding-block:var(--seed-v3-dimension-s2_5)}.tab__label--size_small{font-size:var(--seed-v3-font-size-s4);font-weight:var(--seed-v3-font-weight-bold)}.tabs__root{overflow:hidden}.tabs__triggerList{-ms-overflow-style:none;scrollbar-width:none;background:var(--seed-v3-color-bg-layer-default);border-bottom:1px solid var(--seed-v3-color-stroke-neutral);flex-flow:row;align-content:stretch;align-items:stretch;display:flex;position:relative;overflow-x:auto}.tabs__triggerList::-webkit-scrollbar{display:none}.tabs__contentList{width:100%}.tabs__contentCamera{width:100%;height:100%;display:flex}.tabs__content{flex-shrink:0;width:100%;height:100%;overflow:hidden auto}.tabs__indicator{will-change:left,width;left:var(--seed-design-tabs-indicator-left,0px);width:var(--seed-design-tabs-indicator-width,0px);color:var(--seed-v3-color-fg-neutral);border-bottom:2px solid var(--seed-v3-color-fg-neutral);transition:left .2s cubic-bezier(.15,.3,.25,1),width .2s cubic-bezier(.15,.3,.25,1);position:absolute;bottom:0}.tabs__triggerList--layout_fill{justify-content:space-around;padding:0}.tabs__indicator--layout_fill{left:calc(var(--seed-design-tabs-indicator-left,0px) + 16px);width:calc(var(--seed-design-tabs-indicator-width,0px) - 32px)}.tabs__triggerList--layout_hug{padding:0px var(--seed-v3-dimension-s4);justify-content:flex-start}.tabs__indicator--layout_hug{left:calc(var(--seed-design-tabs-indicator-left,0px));width:calc(var(--seed-design-tabs-indicator-width,0px))}.tabs__root--size_small{--seed-design-tabs-trigger-list-height:40px}.tabs__triggerList--size_small{height:40px}.tabs__root--size_medium{--seed-design-tabs-trigger-list-height:44px}.tabs__triggerList--size_medium{height:44px}.tabs__root--fixTriggerList_true{position:relative}.tabs__triggerList--fixTriggerList_true{position:sticky;top:0}.tabs__contentList--fixTriggerList_true{height:calc(100% - var(--seed-design-tabs-trigger-list-height))}.chipTab__root{padding:var(--seed-v3-dimension-s2)var(--seed-v3-dimension-s3_5);cursor:pointer;border-radius:var(--seed-v3-radius-full);box-sizing:border-box;white-space:nowrap;border:none;justify-content:center;align-items:center;min-height:36px;font-family:inherit;display:flex}.chipTab__label{font-size:var(--seed-v3-font-size-s4);font-weight:var(--seed-v3-font-weight-bold)}.chipTab__root--variant_neutralSolid:is(:selected,[data-selected]){background-color:var(--seed-v3-color-bg-neutral-inverted)}.chipTab__root--variant_neutralSolid:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-layer-default-pressed)}.chipTab__root--variant_neutralSolid:is(:selected,[data-selected]):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-neutral-inverted-pressed)}.chipTab__root--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed}.chipTab__root--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]):is(:selected,[data-selected]){background-color:var(--seed-v3-color-bg-disabled)}.chipTab__label--variant_neutralSolid{color:var(--seed-v3-color-fg-neutral);font-weight:var(--seed-v3-font-weight-bold)}.chipTab__label--variant_neutralSolid:is(:selected,[data-selected]){color:var(--seed-v3-color-fg-neutral-inverted)}.chipTab__label--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]),.chipTab__label--variant_neutralSolid:is(:disabled,[disabled],[data-disabled]):is(:selected,[data-selected]){color:var(--seed-v3-color-fg-disabled)}.chipTab__root--variant_brandSolid{font-weight:var(--seed-v3-font-weight-medium);background-color:var(--seed-v3-color-bg-neutral-weak)}.chipTab__root--variant_brandSolid:is(:selected,[data-selected]){background-color:var(--seed-v3-color-bg-brand-solid)}.chipTab__root--variant_brandSolid:is(:active,[data-active]){background-color:var(--seed-v3-color-bg-neutral-weak-pressed)}.chipTab__root--variant_brandSolid:is(:selected,[data-selected]):is(:active,[data-active]){background-color:var(--seed-v3-color-bg-brand-solid-pressed)}.chipTab__root--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){cursor:not-allowed;background-color:var(--seed-v3-color-bg-disabled)}.chipTab__root--variant_brandSolid:is(:disabled,[disabled],[data-disabled]):is(:selected,[data-selected]){background-color:var(--seed-v3-color-bg-disabled)}.chipTab__label--variant_brandSolid{color:var(--seed-v3-color-fg-neutral-muted);font-weight:var(--seed-v3-font-weight-medium)}.chipTab__label--variant_brandSolid:is(:selected,[data-selected]){color:var(--seed-v3-color-palette-static-white);font-weight:var(--seed-v3-font-weight-bold)}.chipTab__label--variant_brandSolid:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.chipTabs__root{overflow-x:hidden}.chipTabs__triggerList{-ms-overflow-style:none;scrollbar-width:none;padding:0px var(--seed-v3-dimension-s4);flex-flow:row;align-content:stretch;align-items:stretch;display:flex;position:relative;overflow-x:auto}.chipTabs__triggerList::-webkit-scrollbar{display:none}.chipTabs__contentCamera{width:100%;height:100%;display:flex}.chipTabs__content{flex-shrink:0;width:100%;height:100%;overflow:auto}.chipTabs__triggerList--variant_neutralSolid{gap:0}.chipTabs__triggerList--variant_brandSolid{gap:8px}.skeleton__root{box-sizing:border-box;background:var(--seed-v3-color-palette-gray-200);display:inline-block;overflow:hidden}.skeleton__root:after{content:"";background-image:linear-gradient(90deg,var(--seed-v3-gradient-shimmer));width:100%;height:100%;animation-name:shimmer;animation-duration:1.5s;animation-fill-mode:forwards;animation-timing-function:var(--seed-v3-timing-function-easing);background-repeat:no-repeat;animation-iteration-count:infinite;display:block}.skeleton__root--radius_0{border-radius:0}.skeleton__root--radius_8{border-radius:8px}.skeleton__root--radius_16{border-radius:16px}.skeleton__root--radius_full{border-radius:var(--seed-v3-radius-full)}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.snackbar__root{box-sizing:border-box;background:var(--seed-v3-color-bg-neutral-solid);border-radius:var(--seed-v3-radius-s2);width:100%;padding-inline:var(--seed-v3-dimension-s4);padding-block:var(--seed-v3-dimension-s2_5);justify-content:space-between;align-items:center;gap:var(--seed-v3-dimension-s2);min-height:44px;animation:seed-enter;animation-timing-function:var(--seed-v3-timing-function-enter);animation-duration:var(--seed-v3-duration-s4);--seed-enter-translate-x:0;--seed-enter-translate-y:100%;--seed-enter-opacity:0;--seed-enter-scale:1;display:flex}.snackbar__root:not([data-open]){animation:seed-exit;animation-timing-function:var(--seed-v3-timing-function-exit);animation-duration:var(--seed-v3-duration-s4);--seed-exit-translate-x:0;--seed-exit-translate-y:100%;--seed-exit-opacity:0;--seed-exit-scale:1;animation-fill-mode:forwards}.snackbar__message{color:var(--seed-v3-color-palette-static-white);font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4);font-weight:var(--seed-v3-font-weight-regular);flex-grow:1;margin:0}.snackbar__prefixIcon{flex-shrink:0;width:24px;height:24px}.snackbar__actionButton{box-sizing:border-box;cursor:pointer;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:unset;color:var(--seed-v3-color-fg-brand);font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4);font-weight:var(--seed-v3-font-weight-bold);border:none;outline:none;flex-shrink:0;justify-content:center;align-items:center;text-decoration:none;display:inline-flex;position:relative}.snackbar__actionButton:after{content:"";top:50%;left:calc(-1*var(--seed-v3-dimension-s2));right:calc(-1*var(--seed-v3-dimension-s2));background:0 0;min-height:44px;position:absolute;transform:translateY(-50%)}.snackbar__prefixIcon--variant_default{display:none}.snackbar__prefixIcon--variant_positive{color:var(--seed-v3-color-fg-positive)}.snackbar__prefixIcon--variant_critical{color:var(--seed-v3-color-fg-critical)}.snackbarRegion__root{z-index:2147483647;left:calc(env(safe-area-inset-left,0px));right:calc(env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + var(--snackbar-region-offset,0px));padding-inline:var(--seed-v3-dimension-s2);padding-block:var(--seed-v3-dimension-s2);transition-property:bottom;transition-duration:var(--seed-v3-duration-s4);transition-timing-function:var(--seed-v3-timing-function-easing);flex-direction:column;align-items:center;display:flex}.text__root{text-align:var(--seed-text-align);color:var(--seed-text-color);font-size:var(--seed-font-size);line-height:var(--seed-line-height);font-weight:var(--seed-font-weight);--seed-text-color:inherit;--seed-font-size:inherit;--seed-line-height:inherit;--seed-font-weight:inherit;--seed-text-align:inherit;--seed-max-lines:initial;margin:0}.text__root--textStyle_labelSmallDefault{--seed-font-size:var(--seed-v3-font-size-s1);--seed-line-height:var(--seed-v3-line-height-s1);--seed-font-weight:var(--seed-v3-font-weight-regular)}.text__root--textStyle_labelSmallStrong{--seed-font-size:var(--seed-v3-font-size-s1);--seed-line-height:var(--seed-v3-line-height-s1);--seed-font-weight:var(--seed-v3-font-weight-medium)}.text__root--textStyle_labelSmallStronger{--seed-font-size:var(--seed-v3-font-size-s1);--seed-line-height:var(--seed-v3-line-height-s1);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_labelMediumDefault{--seed-font-size:var(--seed-v3-font-size-s2);--seed-line-height:var(--seed-v3-line-height-s2);--seed-font-weight:var(--seed-v3-font-weight-regular)}.text__root--textStyle_labelMediumStrong{--seed-font-size:var(--seed-v3-font-size-s2);--seed-line-height:var(--seed-v3-line-height-s2);--seed-font-weight:var(--seed-v3-font-weight-medium)}.text__root--textStyle_labelMediumStronger{--seed-font-size:var(--seed-v3-font-size-s2);--seed-line-height:var(--seed-v3-line-height-s2);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_labelLargeDefault{--seed-font-size:var(--seed-v3-font-size-s3);--seed-line-height:var(--seed-v3-line-height-s3);--seed-font-weight:var(--seed-v3-font-weight-regular)}.text__root--textStyle_labelLargeStrong{--seed-font-size:var(--seed-v3-font-size-s3);--seed-line-height:var(--seed-v3-line-height-s3);--seed-font-weight:var(--seed-v3-font-weight-medium)}.text__root--textStyle_labelLargeStronger{--seed-font-size:var(--seed-v3-font-size-s3);--seed-line-height:var(--seed-v3-line-height-s3);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_bodySmallDefault{--seed-font-size:var(--seed-v3-font-size-s4);--seed-line-height:var(--seed-v3-line-height-s4);--seed-font-weight:var(--seed-v3-font-weight-regular)}.text__root--textStyle_bodySmallReadingDefault{--seed-font-size:var(--seed-v3-font-size-s4);--seed-line-height:var(--seed-v3-line-height-s5);--seed-font-weight:var(--seed-v3-font-weight-regular)}.text__root--textStyle_bodySmallStrong{--seed-font-size:var(--seed-v3-font-size-s4);--seed-line-height:var(--seed-v3-line-height-s4);--seed-font-weight:var(--seed-v3-font-weight-medium)}.text__root--textStyle_bodySmallStronger{--seed-font-size:var(--seed-v3-font-size-s4);--seed-line-height:var(--seed-v3-line-height-s4);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_bodyMediumDefault{--seed-font-size:var(--seed-v3-font-size-s5);--seed-line-height:var(--seed-v3-line-height-s5);--seed-font-weight:var(--seed-v3-font-weight-regular)}.text__root--textStyle_bodyMediumReadingDefault{--seed-font-size:var(--seed-v3-font-size-s5);--seed-line-height:var(--seed-v3-line-height-s6);--seed-font-weight:var(--seed-v3-font-weight-regular)}.text__root--textStyle_bodyMediumStrong{--seed-font-size:var(--seed-v3-font-size-s5);--seed-line-height:var(--seed-v3-line-height-s5);--seed-font-weight:var(--seed-v3-font-weight-medium)}.text__root--textStyle_bodyMediumStronger,.text__root--textStyle_titleSmallDefault{--seed-font-size:var(--seed-v3-font-size-s5);--seed-line-height:var(--seed-v3-line-height-s5);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_titleMediumDefault{--seed-font-size:var(--seed-v3-font-size-s6);--seed-line-height:var(--seed-v3-line-height-s6);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_titleLargeDefault{--seed-font-size:var(--seed-v3-font-size-s7);--seed-line-height:var(--seed-v3-line-height-s7);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_headingSmallDefault{--seed-font-size:var(--seed-v3-font-size-s8);--seed-line-height:var(--seed-v3-line-height-s8);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_headingMediumDefault{--seed-font-size:var(--seed-v3-font-size-s9);--seed-line-height:var(--seed-v3-line-height-s9);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--textStyle_headingLargeDefault{--seed-font-size:var(--seed-v3-font-size-s10);--seed-line-height:var(--seed-v3-line-height-s10);--seed-font-weight:var(--seed-v3-font-weight-bold)}.text__root--maxLines_none{display:unset;overflow:unset;min-width:unset;text-overflow:unset;white-space:unset;-webkit-line-clamp:unset}.text__root--maxLines_single{text-overflow:ellipsis;white-space:nowrap;-webkit-line-clamp:var(--seed-max-lines);min-width:0;display:block;overflow:hidden}.text__root--maxLines_multi{text-overflow:ellipsis;min-width:0;white-space:initial;-webkit-line-clamp:var(--seed-max-lines);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.textButton__root{cursor:pointer;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-inline:0;padding-block:var(--seed-v3-dimension-s0_5);background-color:#0000;border:none;outline:none;align-items:center;font-family:inherit;display:inline-flex}.textButton__root:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled);cursor:not-allowed}.textButton__root:is(:active,[data-active]){background-color:var(--seed-v3-color-palette-gray-200);box-shadow:0 0 0 2px var(--seed-v3-color-palette-gray-200)}.textButton__root:is(:disabled,[disabled],[data-disabled]):is(:active,[data-active]){background-color:#0000;border-color:#0000}.textButton__label{text-align:center;font-weight:var(--seed-v3-font-weight-regular)}.textButton__prefixIcon{margin-inline-end:var(--seed-v3-dimension-s1)}.textButton__suffixIcon{margin-inline-start:var(--seed-v3-dimension-s0_5)}.textButton__root--tone_brand{color:var(--seed-v3-color-fg-brand)}.textButton__root--tone_neutral{color:var(--seed-v3-color-fg-neutral)}.textButton__root--tone_neutralSubtle{color:var(--seed-v3-color-fg-neutral-subtle)}.textButton__root--tone_critical{color:var(--seed-v3-color-fg-critical)}.textButton__root--size_large{border-radius:var(--seed-v3-radius-s1_5);min-height:2rem}.textButton__prefixIcon--size_large,.textButton__suffixIcon--size_large{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.textButton__label--size_large{font-size:var(--seed-v3-font-size-s6);line-height:var(--seed-v3-line-height-s6)}.textButton__root--size_medium{border-radius:var(--seed-v3-radius-s1_5);min-height:1.875rem}.textButton__prefixIcon--size_medium,.textButton__suffixIcon--size_medium{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.textButton__label--size_medium{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5)}.textButton__root--size_small{border-radius:var(--seed-v3-radius-s1);min-height:1.75rem}.textButton__prefixIcon--size_small,.textButton__suffixIcon--size_small{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5)}.textButton__label--size_small{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.textField__root{flex-direction:column;width:100%;display:flex}.textField__label{color:var(--seed-v3-color-fg-neutral);font-weight:var(--seed-v3-font-weight-bold)}.textField__indicator{color:var(--seed-v3-color-fg-neutral);font-weight:var(--seed-v3-font-weight-regular)}.textField__field{background-color:var(--seed-v3-color-bg-layer-default);border-style:solid;border-width:1px;border-color:var(--seed-v3-color-stroke-field);align-items:center;display:flex}.textField__field:not([data-readonly]):is(:focus,[data-focus]){border-color:var(--seed-v3-color-stroke-field-focused)}.textField__field:is(:invalid,[data-invalid]){background-color:var(--seed-v3-color-bg-critical-weak);border-color:var(--seed-v3-color-stroke-critical)}.textField__field:is(:invalid,[data-invalid]):is(:focus,[data-focus]){background-color:var(--seed-v3-color-bg-layer-default)}.textField__field:is(:disabled,[disabled],[data-disabled]),.textField__field[data-readonly]{background-color:var(--seed-v3-color-bg-disabled)}.textField__prefixText{color:var(--seed-v3-color-fg-neutral)}.textField__prefixText:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.textField__prefixIcon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0}.textField__prefixIcon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.textField__suffixText{color:var(--seed-v3-color-fg-neutral)}.textField__suffixText:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.textField__suffixIcon{color:var(--seed-v3-color-fg-neutral);flex-shrink:0}.textField__suffixIcon:is(:disabled,[disabled],[data-disabled]){color:var(--seed-v3-color-fg-disabled)}.textField__value{box-sizing:border-box;font:inherit}.textField__value:is(input){padding-inline:0}.textField__value:is(textarea){width:100%;min-height:90px;padding-inline:0}.textField__value{resize:none;height:100%;color:var(--seed-v3-color-fg-neutral);background:0 0;border:none;outline:none;flex-grow:1}.textField__value::placeholder{color:var(--seed-v3-color-fg-placeholder)}.textField__value:is(:disabled,[disabled],[data-disabled]),.textField__value:is(:disabled,[disabled],[data-disabled])::placeholder{color:var(--seed-v3-color-fg-disabled)}.textField__footer{justify-content:space-between;align-items:flex-start;display:flex}.textField__description{font-weight:var(--seed-v3-font-weight-regular);color:var(--seed-v3-color-fg-neutral-subtle)}.textField__errorMessage{color:var(--seed-v3-color-fg-critical);flex-direction:row;align-items:center;display:flex}.textField__errorIcon{flex:none}.textField__characterCountArea{flex:none;margin-inline-start:auto;display:flex}.textField__characterCount{color:var(--seed-v3-color-fg-neutral);font-weight:var(--seed-v3-font-weight-regular)}.textField__characterCount[data-empty]{color:var(--seed-v3-color-fg-neutral-subtle)}.textField__maxCharacterCount{color:var(--seed-v3-color-fg-neutral-subtle);font-weight:var(--seed-v3-font-weight-regular)}.textField__header--size_xlarge{padding-bottom:var(--seed-v3-dimension-s3);gap:var(--seed-v3-dimension-s1_5)}.textField__label--size_xlarge,.textField__indicator--size_xlarge{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5)}.textField__field--size_xlarge{border-radius:var(--seed-v3-radius-s2_5);gap:var(--seed-v3-dimension-s2);min-height:56px;padding-inline:var(--seed-v3-dimension-s4)}.textField__value--size_xlarge{padding-block:var(--seed-v3-dimension-s3);font-size:var(--seed-v3-font-size-s6);line-height:var(--seed-v3-line-height-s6)}.textField__prefixText--size_xlarge{font-size:var(--seed-v3-font-size-s6);line-height:var(--seed-v3-line-height-s6)}.textField__prefixIcon--size_xlarge{width:var(--seed-v3-dimension-s5);height:var(--seed-v3-dimension-s5)}.textField__suffixText--size_xlarge{font-size:var(--seed-v3-font-size-s6);line-height:var(--seed-v3-line-height-s6)}.textField__suffixIcon--size_xlarge{width:var(--seed-v3-dimension-s5);height:var(--seed-v3-dimension-s5)}.textField__footer--size_xlarge{gap:var(--seed-v3-dimension-s3_5);padding-top:var(--seed-v3-dimension-s2);min-height:20px}.textField__description--size_xlarge,.textField__errorMessage--size_xlarge{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.textField__errorIcon--size_xlarge{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4);margin-right:var(--seed-v3-dimension-s1)}.textField__characterCount--size_xlarge,.textField__maxCharacterCount--size_xlarge{font-size:var(--seed-v3-font-size-s2);line-height:var(--seed-v3-line-height-s2)}.textField__header--size_large{padding-bottom:var(--seed-v3-dimension-s3);gap:var(--seed-v3-dimension-s1_5)}.textField__label--size_large,.textField__indicator--size_large{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5)}.textField__field--size_large{border-radius:var(--seed-v3-radius-s2_5);gap:var(--seed-v3-dimension-s2);min-height:52px;padding-inline:var(--seed-v3-dimension-s4)}.textField__value--size_large{padding-block:var(--seed-v3-dimension-s3);font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5)}.textField__prefixText--size_large{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5)}.textField__prefixIcon--size_large{width:var(--seed-v3-dimension-s5);height:var(--seed-v3-dimension-s5)}.textField__suffixText--size_large{font-size:var(--seed-v3-font-size-s5);line-height:var(--seed-v3-line-height-s5)}.textField__suffixIcon--size_large{width:var(--seed-v3-dimension-s5);height:var(--seed-v3-dimension-s5)}.textField__footer--size_large{gap:var(--seed-v3-dimension-s3_5);padding-top:var(--seed-v3-dimension-s2);min-height:20px}.textField__description--size_large,.textField__errorMessage--size_large{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.textField__errorIcon--size_large{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4);margin-right:var(--seed-v3-dimension-s1)}.textField__characterCount--size_large,.textField__maxCharacterCount--size_large{font-size:var(--seed-v3-font-size-s2);line-height:var(--seed-v3-line-height-s2)}.textField__header--size_medium{padding-bottom:var(--seed-v3-dimension-s3)}.textField__label--size_medium,.textField__indicator--size_medium{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.textField__field--size_medium{border-radius:var(--seed-v3-radius-s2);gap:var(--seed-v3-dimension-s1_5);min-height:40px;padding-inline:var(--seed-v3-dimension-s3_5)}.textField__value--size_medium{padding-block:var(--seed-v3-dimension-s2_5);font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.textField__prefixText--size_medium{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.textField__prefixIcon--size_medium{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.textField__suffixText--size_medium{font-size:var(--seed-v3-font-size-s4);line-height:var(--seed-v3-line-height-s4)}.textField__suffixIcon--size_medium{width:var(--seed-v3-dimension-s4);height:var(--seed-v3-dimension-s4)}.textField__footer--size_medium{gap:var(--seed-v3-dimension-s3_5);padding-top:var(--seed-v3-dimension-s2);min-height:var(--seed-v3-dimension-s4)}.textField__description--size_medium,.textField__errorMessage--size_medium{font-size:var(--seed-v3-font-size-s2);line-height:var(--seed-v3-line-height-s2)}.textField__errorIcon--size_medium{width:var(--seed-v3-dimension-s3_5);height:var(--seed-v3-dimension-s3_5);margin-right:var(--seed-v3-dimension-s1)}.textField__characterCount--size_medium,.textField__maxCharacterCount--size_medium{font-size:var(--seed-v3-font-size-s2);line-height:var(--seed-v3-line-height-s2)}.visuallyHidden__root{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.appScreen__root{--app-bar-offset:calc(var(--app-bar-height) + var(--seed-safe-area-top));width:100%;height:100%;position:absolute;left:0;right:0;overflow:hidden}.appScreen__dim{z-index:var(--z-index-dim);width:100%;position:absolute;top:0;left:0;right:0}.appScreen__layer{z-index:var(--z-index-layer);box-sizing:border-box;-webkit-overflow-scrolling:touch;width:100%;height:100%;position:absolute;left:0;right:0;overflow-y:scroll}.appScreen__layer::-webkit-scrollbar{display:none}.appScreen__layer{background-color:var(--seed-v3-color-bg-layer-default)}.appScreen__edge{z-index:var(--z-index-edge);width:20px;height:100%;position:absolute;left:0;right:0}.appScreen__root--theme_cupertino{--app-bar-height:44px}.appScreen__dim--theme_cupertino{background:var(--seed-v3-color-bg-overlay);height:100%}.appScreen__root--theme_android{--app-bar-height:56px}.appScreen__edge--theme_android{display:none}.appScreen__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)}.appScreen__layer--transitionStyle_slideFromRightIOS{transform:translate(0,0)}[data-global-transition-state=enter-active] .appScreen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]{--seed-enter-translate-x:100%;--seed-enter-translate-y:0;--seed-enter-opacity:1;--seed-enter-scale:1;animation:.3s cubic-bezier(.22,.1,.3,.85) seed-enter;transform:translate(0,0)}[data-global-transition-state=exit-active] .appScreen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]{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:.3s cubic-bezier(.22,.1,.3,.85) forwards seed-exit}[data-global-transition-state=enter-done] .appScreen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]{--seed-enter-translate-x:var(--swipe-back-displacement,0);--seed-enter-translate-y:0;--seed-enter-opacity:1;--seed-enter-scale:1;animation:.3s cubic-bezier(.22,.1,.3,.85) seed-enter;transform:translate(0,0)}[data-swipe-back-state=swiping] .appScreen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#){transform:translate3d(var(--swipe-back-displacement,0),0,0);animation:none}[data-global-transition-state=enter-active][data-top-activity-type=full-screen] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]){--seed-exit-translate-x:-30%;--seed-exit-translate-y:0;--seed-exit-opacity:1;--seed-exit-scale:1;animation:.3s cubic-bezier(.22,.1,.3,.85) forwards seed-exit;transform:translate(0,0)}[data-global-transition-state=exit-active][data-top-activity-type=full-screen] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]){--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:.3s cubic-bezier(.22,.1,.3,.85) seed-enter;transform:translate(0,0)}[data-global-transition-state=enter-done][data-top-activity-type=full-screen] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]){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:.3s cubic-bezier(.22,.1,.3,.85) forwards seed-exit}[data-swipe-back-state=swiping] .appScreen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#){transform:translate3d(calc(-30% + var(--swipe-back-displacement,0)*.3),0,0);animation:none}[data-global-transition-state=enter-active] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]{--seed-enter-translate-x:0;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1;opacity:1;animation:.3s cubic-bezier(.22,.1,.3,.85) seed-enter}[data-global-transition-state=exit-active] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]{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:.3s cubic-bezier(.22,.1,.3,.85) forwards seed-exit}[data-global-transition-state=enter-done] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]{--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:.3s cubic-bezier(.22,.1,.3,.85) seed-enter}[data-swipe-back-state=swiping] .appScreen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#){opacity:calc(1 - var(--swipe-back-displacement-ratio,0));animation:none}.appScreen__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)}.appScreen__dim--transitionStyle_fadeFromBottomAndroid{background:linear-gradient(var(--seed-v3-color-bg-overlay),#0000);height:160px}[data-global-transition-state=enter-active] .appScreen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top]{--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:translateY(-8vh)}[data-global-transition-state=exit-active] .appScreen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top]{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:translateY(-8vh)}.appScreen__layer--transitionStyle_fadeFromBottomAndroid{transform:translate(0,0)}[data-global-transition-state=enter-active] .appScreen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top]{--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:translate(0,0)}[data-global-transition-state=exit-active] .appScreen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top]{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:translate(0,0)}.appScreen__layer--layerOffsetTop_safeArea{padding-top:var(--seed-safe-area-top)}.appScreen__layer--layerOffsetTop_appBar{padding-top:var(--app-bar-offset)}.appScreen__layer--layerOffsetBottom_safeArea{padding-bottom:var(--seed-safe-area-bottom)}.appBar__root{z-index:var(--z-index-app-bar);box-sizing:border-box;align-items:flex-end;width:100%;display:flex;position:absolute}.appBar__root:before{content:"";pointer-events:none;z-index:-1;position:absolute;inset:0}.appBar__left{align-items:center;height:100%;display:flex}.appBar__right{align-items:center;height:100%;margin-left:auto;display:flex}.appBar__iconButton{justify-content:center;align-items:center;display:flex}.appBar__icon{flex-shrink:0;display:inline-block}.appBar__root--theme_cupertino{height:44px;padding-inline:var(--seed-v3-dimension-s4)}.appBar__iconButton--theme_cupertino{width:40px;height:40px}.appBar__iconButton--theme_cupertino:first-child{margin-left:-8px}.appBar__iconButton--theme_cupertino:last-child{margin-right:-8px}.appBar__icon--theme_cupertino{width:24px;height:24px}.appBar__root--theme_android{height:56px;padding-inline:var(--seed-v3-dimension-s4)}.appBar__iconButton--theme_android{width:40px;height:40px}.appBar__iconButton--theme_android:first-child{margin-left:-8px}.appBar__iconButton--theme_android:last-child{margin-right:-8px}.appBar__icon--theme_android{width:24px;height:24px}.appBar__left--theme_android{padding-right:16px}[data-global-transition-state=enter-active] .appBar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before{--seed-enter-translate-x:100%;--seed-enter-translate-y:0;--seed-enter-opacity:1;--seed-enter-scale:1;animation:.3s cubic-bezier(.22,.1,.3,.85) seed-enter;transform:translate(0,0)}[data-global-transition-state=exit-active] .appBar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before{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:.3s cubic-bezier(.22,.1,.3,.85) forwards seed-exit}[data-global-transition-state=enter-done] .appBar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before{--seed-enter-translate-x:var(--swipe-back-displacement,0);--seed-enter-translate-y:0;--seed-enter-opacity:1;--seed-enter-scale:1;animation:.3s cubic-bezier(.22,.1,.3,.85) seed-enter;transform:translate(0,0)}[data-global-transition-state=enter-active] .appBar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]{--seed-enter-translate-x:0;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1;opacity:1;animation:.3s cubic-bezier(.22,.1,.3,.85) seed-enter}[data-global-transition-state=exit-active] .appBar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]{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:.3s cubic-bezier(.22,.1,.3,.85) forwards seed-exit}[data-global-transition-state=enter-done] .appBar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]{--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:.3s cubic-bezier(.22,.1,.3,.85) seed-enter}[data-swipe-back-state=swiping] .appBar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#){opacity:calc(1 - var(--swipe-back-displacement-ratio,0));animation:none}[data-global-transition-state=enter-active][data-top-activity-type=full-screen] .appBar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]){opacity:1;--seed-exit-translate-x:0;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1;animation:.3s cubic-bezier(.22,.1,.3,.85) forwards seed-exit}[data-global-transition-state=exit-active][data-top-activity-type=full-screen] .appBar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]){--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:.3s cubic-bezier(.22,.1,.3,.85) seed-enter}[data-global-transition-state=enter-done][data-top-activity-type=full-screen] .appBar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]){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:.3s cubic-bezier(.22,.1,.3,.85) forwards seed-exit}[data-swipe-back-state=swiping] .appBar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#){opacity:calc(1 - var(--swipe-back-displacement-ratio,0));animation:none}[data-global-transition-state=enter-active] .appBar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top]{--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:translate(0,0)}[data-global-transition-state=exit-active] .appBar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top]{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:translate(0,0)}.appBar__root--tone_layer:before{background-color:var(--seed-v3-color-bg-layer-default)}.appBar__icon--tone_layer{color:var(--seed-v3-color-fg-neutral)}.appBar__root--tone_transparent:before{background-color:#0000}.appBar__icon--tone_transparent{color:var(--seed-v3-color-palette-static-white)}.appBar__root--divider_true{box-shadow:inset 0px calc(-1*1px)0 var(--seed-v3-color-stroke-neutral-muted)}.appBarMain__root{flex:1;height:100%}.appBarMain__title,.appBarMain__subtitle{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.appBarMain__title--layout_titleOnly{font-size:var(--seed-v3-font-size-s6-static);font-weight:var(--seed-v3-font-weight-bold)}.appBarMain__title--layout_withSubtitle{font-size:var(--seed-v3-font-size-s5-static);font-weight:var(--seed-v3-font-weight-bold)}.appBarMain__subtitle--layout_withSubtitle{font-size:var(--seed-v3-font-size-s2-static);font-weight:var(--seed-v3-font-weight-regular)}.appBarMain__root--theme_cupertino{text-align:center;height:100%;padding-inline:var(--centered-title-padding-x,0);pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;left:0;right:0}.appBarMain__root--theme_android{justify-content:flex-start;align-items:center;width:100%;display:flex}[data-global-transition-state=enter-active] .appBarMain__root--transitionStyle_slideFromRightIOS[data-activity-is-top]{--seed-enter-translate-x:25%;--seed-enter-translate-y:0;--seed-enter-opacity:0;--seed-enter-scale:1;opacity:1;animation:.3s cubic-bezier(.22,.1,.3,.85) seed-enter;transform:translate(0,0)}[data-global-transition-state=exit-active] .appBarMain__root--transitionStyle_slideFromRightIOS[data-activity-is-top]{transform:translate3d(var(--swipe-back-displacement,0)*.25,0,0);opacity:calc(1 - var(--swipe-back-displacement-ratio,0));--seed-exit-translate-x:25%;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1;animation:.3s cubic-bezier(.22,.1,.3,.85) forwards seed-exit}[data-global-transition-state=enter-done] .appBarMain__root--transitionStyle_slideFromRightIOS[data-activity-is-top]{--seed-enter-translate-x:var(--swipe-back-displacement,0)*.25;--seed-enter-translate-y:0;--seed-enter-opacity:calc(1 - var(--swipe-back-displacement-ratio,0));--seed-enter-scale:1;opacity:1;animation:.3s cubic-bezier(.22,.1,.3,.85) seed-enter;transform:translate(0,0)}[data-swipe-back-state=swiping] .appBarMain__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#){transform:translate3d(var(--swipe-back-displacement,0)*.25,0,0);opacity:calc(1 - var(--swipe-back-displacement-ratio,0));animation:none}[data-global-transition-state=enter-active][data-top-activity-type=full-screen] .appBarMain__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]){opacity:1;--seed-exit-translate-x:-25%;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1;animation:.3s cubic-bezier(.22,.1,.3,.85) forwards seed-exit;transform:translate(0,0)}[data-global-transition-state=exit-active][data-top-activity-type=full-screen] .appBarMain__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]){--seed-enter-translate-x:calc(-25% + var(--swipe-back-displacement,0)*.25);--seed-enter-translate-y:0;--seed-enter-opacity:calc(1 - var(--swipe-back-displacement-ratio,0));--seed-enter-scale:1;opacity:1;animation:.3s cubic-bezier(.22,.1,.3,.85) seed-enter;transform:translate(0,0)}[data-global-transition-state=enter-done][data-top-activity-type=full-screen] .appBarMain__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]){transform:translate3d(calc(-25% + var(--swipe-back-displacement,0)*.25),0,0);opacity:calc(1 - var(--swipe-back-displacement-ratio,0));--seed-exit-translate-x:-25%;--seed-exit-translate-y:0;--seed-exit-opacity:0;--seed-exit-scale:1;animation:.3s cubic-bezier(.22,.1,.3,.85) forwards seed-exit}[data-swipe-back-state=swiping] .appBarMain__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#){transform:translate3d(calc(-25% + var(--swipe-back-displacement,0)*.25),0,0);opacity:calc(1 - var(--swipe-back-displacement-ratio,0));animation:none}.appBarMain__root--tone_layer,.appBarMain__title--tone_layer{color:var(--seed-v3-color-fg-neutral)}.appBarMain__subtitle--tone_layer{color:var(--seed-v3-color-fg-neutral-muted)}.appBarMain__root--tone_transparent,.appBarMain__title--tone_transparent,.appBarMain__subtitle--tone_transparent{color:var(--seed-v3-color-palette-static-white)} \ No newline at end of file diff --git a/packages/stylesheet/screen.css b/packages/stylesheet/screen.css deleted file mode 100644 index c337a8d7b..000000000 --- a/packages/stylesheet/screen.css +++ /dev/null @@ -1,101 +0,0 @@ -.screen__root { - position: absolute; - width: 100%; - height: 100%; - left: 0; - right: 0; - overflow: hidden; -} -.screen__root[data-transition-state=exit-done] { - transform: translate3d(100%, 0, 0); -} -.screen__dim { - z-index: var(--z-index-dim); - position: absolute; - width: 100%; - left: 0; - right: 0; - opacity: 0; - transition: transform var(--seed-v3-duration-s6), opacity var(--seed-v3-duration-s6); -} -.screen__dim:is([data-transition-state=enter-active], [data-transition-state=enter-done]) { - opacity: 1; -} -.screen__dim:is([data-transition-state=exit-active], [data-transition-state=exit-done]) { - opacity: 0; -} -.screen__layer { - z-index: var(--z-index-layer); - position: absolute; - width: 100%; - height: 100%; - left: 0; - right: 0; - overflow-y: scroll; - -webkit-overflow-scrolling: touch; -} -.screen__layer::-webkit-scrollbar { - display: none; -} -.screen__layer { - background-color: var(--seed-v3-color-bg-layer-default); - transition: transform var(--seed-v3-duration-s6), opacity var(--seed-v3-duration-s6); -} -.screen__edge { - z-index: var(--z-index-edge); - position: absolute; - width: 20px; - height: 100%; - left: 0; - right: 0; -} -.screen__root--theme_cupertino { - --app-bar-height: 44px; -} -.screen__dim--theme_cupertino { - height: 100%; - background: var(--seed-v3-color-bg-overlay); -} -.screen__layer--theme_cupertino { - transform: translate3d(100%, 0, 0); -} -.screen__layer--theme_cupertino:is([data-transition-state=enter-active], [data-transition-state=enter-done]) { - transform: translate3d(0, 0, 0); -} -.screen__root--theme_android { - --app-bar-height: 56px; -} -.screen__dim--theme_android { - height: 10rem; - background: linear-gradient(var(--seed-v3-color-bg-overlay), rgba(0, 0, 0, 0)); -} -.screen__layer--theme_android { - opacity: 0; - transform: translate3d(0, 10rem, 0); -} -.screen__layer--theme_android:is([data-transition-state=enter-active], [data-transition-state=enter-done]) { - opacity: 1; - transform: translate3d(0, 0, 0); -} -.screen__root--hasAppBar_true { - --app-bar-margin: var(--app-bar-height); -} -@supports (padding: max(0px)) and (padding: constant(safe-area-inset-top)) { - .screen__root--hasAppBar_true { - --app-bar-margin: calc(var(--app-bar-height) + max(0px, constant(safe-area-inset-top))); - } -} -@supports (padding: max(0px)) and (padding: env(safe-area-inset-top)) { - .screen__root--hasAppBar_true { - --app-bar-margin: calc(var(--app-bar-height) + max(0px, env(safe-area-inset-top))); - } -} -.screen__layer--hasAppBar_true { - box-sizing: border-box; - transition: transform var(--seed-v3-duration-s6), opacity var(--seed-v3-duration-s6); - height: 100%; -} -.screen__edge--hasAppBar_true { - top: var(--app-bar-height); - height: calc(100% - var(--app-bar-height)); -} \ No newline at end of file diff --git a/packages/stylesheet/token.css b/packages/stylesheet/token.css index f61ebe22f..3715d434e 100644 --- a/packages/stylesheet/token.css +++ b/packages/stylesheet/token.css @@ -10,7 +10,7 @@ color-scheme: dark; } - :root[data-seed] { +:root[data-seed] { --seed-v3-dimension-s0_5: 2px; --seed-v3-dimension-s1: 4px; --seed-v3-dimension-s1_5: 6px; @@ -49,6 +49,8 @@ --seed-v3-font-size-s8: 1.375rem; --seed-v3-font-size-s9: 1.5rem; --seed-v3-font-size-s10: 1.625rem; + --seed-v3-font-size-s2-static: 12px; + --seed-v3-font-size-s5-static: 16px; --seed-v3-font-size-s6-static: 18px; --seed-v3-font-weight-regular: 400; --seed-v3-font-weight-medium: 500; diff --git a/packages/stylesheet/topNavigation.css b/packages/stylesheet/topNavigation.css deleted file mode 100644 index 5da32caab..000000000 --- a/packages/stylesheet/topNavigation.css +++ /dev/null @@ -1,172 +0,0 @@ -.topNavigation__root { - z-index: var(--z-index-app-bar); - position: absolute; - box-sizing: content-box; - width: 100%; -} -.topNavigation__root[data-transition-state=exit-active] { - transform: translate3d(100%, 0, 0); - transition: background-color 0s, box-shadow 0s, transform 0s; -} -.topNavigation__safeArea { - height: max(0px, env(safe-area-inset-top)); -} -.topNavigation__container { - display: flex; - align-items: flex-end; -} -.topNavigation__left { - display: flex; - align-items: center; - height: 100%; -} -.topNavigation__right { - display: flex; - align-items: center; - height: 100%; - margin-left: auto; -} -.topNavigation__iconButton { - display: flex; - align-items: center; - justify-content: center; -} -.topNavigation__icon { - display: inline-block; - flex-shrink: 0; -} -.topNavigation__title { - display: flex; - align-items: center; - flex: 1; - height: 100%; -} -.topNavigation__titleMain { - transition: color 0s; -} -.topNavigation__titleEdge { - appearance: none; - border: 0; - padding: 0; - background: none; - position: absolute; - top: 0; - cursor: pointer; - left: 50%; - height: 20px; - transform: translate(-50%); - max-width: 5rem; - display: none; -} -.topNavigation__titleText { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - width: 100%; -} -.topNavigation__container--theme_cupertino { - height: 44px; - padding-inline: var(--seed-v3-dimension-s4); -} -[data-stackflow-activity-is-active="false"] .topNavigation__container--theme_cupertino { - opacity: calc(pow(var(--stackflow-swipe-back-ratio, 1), 2)); -} -[data-stackflow-activity-is-active="true"] .topNavigation__container--theme_cupertino { - opacity: calc(1 - pow(var(--stackflow-swipe-back-ratio, 0), 2)); -} -.topNavigation__iconButton--theme_cupertino { - width: 40px; - height: 40px; -} -.topNavigation__iconButton--theme_cupertino:first-child { - margin-left: calc(-1 * (40px - 24px) / 2); -} -.topNavigation__iconButton--theme_cupertino:last-child { - margin-right: calc(-1 * (40px - 24px) / 2); -} -.topNavigation__icon--theme_cupertino { - width: 24px; - height: 24px; -} -[data-stackflow-activity-is-active="true"] .topNavigation__icon--theme_cupertino[data-transition-state="enter-active"] { - opacity: 1; -} -[data-stackflow-activity-is-active="true"] .topNavigation__icon--theme_cupertino[data-transition-state="enter-done"] { - opacity: 1; -} -.topNavigation__titleMain--theme_cupertino { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - height: 100%; - left: 50%; - transform: translate(-50%); - top: max(0px, env(safe-area-inset-top)); -} -.topNavigation__titleText--theme_cupertino { - font-size: var(--seed-v3-font-size-s6-static); - font-weight: var(--seed-v3-font-weight-bold); -} -.topNavigation__titleEdge--theme_cupertino { - display: block; -} -.topNavigation__root--theme_android { - opacity: 0; - transform: translate3d(0, 160px, 0); - transition: background-color 0s, box-shadow 0s, transform 300ms; -} -.topNavigation__root--theme_android:is([data-transition-state=enter-active], [data-transition-state=enter-done]) { - opacity: 1; - transform: translate3d(0, 0, 0); -} -.topNavigation__container--theme_android { - height: 56px; - padding-inline: var(--seed-v3-dimension-s4); -} -.topNavigation__iconButton--theme_android { - width: 40px; - height: 40px; -} -.topNavigation__iconButton--theme_android:first-child { - margin-left: calc(-1 * (40px - 24px) / 2); -} -.topNavigation__iconButton--theme_android:last-child { - margin-right: calc(-1 * (40px - 24px) / 2); -} -.topNavigation__icon--theme_android { - width: 24px; - height: 24px; -} -.topNavigation__titleMain--theme_android { - width: 100%; - justify-content: flex-start; - padding-left: 16px; - box-sizing: border-box; -} -.topNavigation__titleText--theme_android { - font-size: var(--seed-v3-font-size-s6-static); - font-weight: var(--seed-v3-font-weight-bold); -} -.topNavigation__root--tone_layer { - background-color: var(--seed-v3-color-bg-layer-default); -} -.topNavigation__icon--tone_layer { - color: var(--seed-v3-color-fg-neutral); -} -.topNavigation__titleMain--tone_layer { - color: var(--seed-v3-color-fg-neutral); -} -.topNavigation__root--tone_transparent { - background-color: #00000000; -} -.topNavigation__icon--tone_transparent { - color: var(--seed-v3-color-palette-static-white); -} -.topNavigation__titleMain--tone_transparent { - color: var(--seed-v3-color-palette-static-white); -} -.topNavigation__root--border_true { - box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-v3-color-stroke-neutral-muted); -} \ No newline at end of file diff --git a/packages/vars/lib/component/top-navigation.d.ts b/packages/vars/lib/component/top-navigation.d.ts index e46bbc677..d56c20b76 100644 --- a/packages/vars/lib/component/top-navigation.d.ts +++ b/packages/vars/lib/component/top-navigation.d.ts @@ -5,10 +5,6 @@ export declare const vars: { "minHeight": "44px", "paddingX": "var(--seed-v3-dimension-s4)" }, - "title": { - "fontSize": "var(--seed-v3-font-size-s6-static)", - "fontWeight": "var(--seed-v3-font-weight-bold)" - }, "icon": { "size": "24px", "targetSize": "40px" @@ -21,10 +17,6 @@ export declare const vars: { "minHeight": "56px", "paddingX": "var(--seed-v3-dimension-s4)" }, - "title": { - "fontSize": "var(--seed-v3-font-size-s6-static)", - "fontWeight": "var(--seed-v3-font-weight-bold)" - }, "icon": { "size": "24px", "targetSize": "40px" @@ -39,6 +31,9 @@ export declare const vars: { "title": { "color": "var(--seed-v3-color-fg-neutral)" }, + "subtitle": { + "color": "var(--seed-v3-color-fg-neutral-muted)" + }, "icon": { "color": "var(--seed-v3-color-fg-neutral)" } @@ -52,6 +47,9 @@ export declare const vars: { "title": { "color": "var(--seed-v3-color-palette-static-white)" }, + "subtitle": { + "color": "var(--seed-v3-color-palette-static-white)" + }, "icon": { "color": "var(--seed-v3-color-palette-static-white)" } @@ -64,5 +62,25 @@ export declare const vars: { "strokeWidth": "1px" } } + }, + "titleLayoutTitleOnly": { + "enabled": { + "title": { + "fontSize": "var(--seed-v3-font-size-s6-static)", + "fontWeight": "var(--seed-v3-font-weight-bold)" + } + } + }, + "titleLayoutWithSubtitle": { + "enabled": { + "title": { + "fontSize": "var(--seed-v3-font-size-s5-static)", + "fontWeight": "var(--seed-v3-font-weight-bold)" + }, + "subtitle": { + "fontSize": "var(--seed-v3-font-size-s2-static)", + "fontWeight": "var(--seed-v3-font-weight-regular)" + } + } } } \ No newline at end of file diff --git a/packages/vars/lib/component/top-navigation.mjs b/packages/vars/lib/component/top-navigation.mjs index 3e02e5254..fb62c69c9 100644 --- a/packages/vars/lib/component/top-navigation.mjs +++ b/packages/vars/lib/component/top-navigation.mjs @@ -5,10 +5,6 @@ export const vars = { "minHeight": "44px", "paddingX": "var(--seed-v3-dimension-s4)" }, - "title": { - "fontSize": "var(--seed-v3-font-size-s6-static)", - "fontWeight": "var(--seed-v3-font-weight-bold)" - }, "icon": { "size": "24px", "targetSize": "40px" @@ -21,10 +17,6 @@ export const vars = { "minHeight": "56px", "paddingX": "var(--seed-v3-dimension-s4)" }, - "title": { - "fontSize": "var(--seed-v3-font-size-s6-static)", - "fontWeight": "var(--seed-v3-font-weight-bold)" - }, "icon": { "size": "24px", "targetSize": "40px" @@ -39,6 +31,9 @@ export const vars = { "title": { "color": "var(--seed-v3-color-fg-neutral)" }, + "subtitle": { + "color": "var(--seed-v3-color-fg-neutral-muted)" + }, "icon": { "color": "var(--seed-v3-color-fg-neutral)" } @@ -52,6 +47,9 @@ export const vars = { "title": { "color": "var(--seed-v3-color-palette-static-white)" }, + "subtitle": { + "color": "var(--seed-v3-color-palette-static-white)" + }, "icon": { "color": "var(--seed-v3-color-palette-static-white)" } @@ -64,5 +62,25 @@ export const vars = { "strokeWidth": "1px" } } + }, + "titleLayoutTitleOnly": { + "enabled": { + "title": { + "fontSize": "var(--seed-v3-font-size-s6-static)", + "fontWeight": "var(--seed-v3-font-weight-bold)" + } + } + }, + "titleLayoutWithSubtitle": { + "enabled": { + "title": { + "fontSize": "var(--seed-v3-font-size-s5-static)", + "fontWeight": "var(--seed-v3-font-weight-bold)" + }, + "subtitle": { + "fontSize": "var(--seed-v3-font-size-s2-static)", + "fontWeight": "var(--seed-v3-font-weight-regular)" + } + } } } \ No newline at end of file diff --git a/packages/vars/lib/font-size.d.ts b/packages/vars/lib/font-size.d.ts index 8cb4911b4..e6edae7c2 100644 --- a/packages/vars/lib/font-size.d.ts +++ b/packages/vars/lib/font-size.d.ts @@ -8,4 +8,6 @@ export declare const s7 = "var(--seed-v3-font-size-s7)"; export declare const s8 = "var(--seed-v3-font-size-s8)"; export declare const s9 = "var(--seed-v3-font-size-s9)"; export declare const s10 = "var(--seed-v3-font-size-s10)"; +export declare const s2Static = "var(--seed-v3-font-size-s2-static)"; +export declare const s5Static = "var(--seed-v3-font-size-s5-static)"; export declare const s6Static = "var(--seed-v3-font-size-s6-static)"; \ No newline at end of file diff --git a/packages/vars/lib/font-size.mjs b/packages/vars/lib/font-size.mjs index 31af9bd07..b03b3be1c 100644 --- a/packages/vars/lib/font-size.mjs +++ b/packages/vars/lib/font-size.mjs @@ -8,4 +8,6 @@ export const s7 = "var(--seed-v3-font-size-s7)"; export const s8 = "var(--seed-v3-font-size-s8)"; export const s9 = "var(--seed-v3-font-size-s9)"; export const s10 = "var(--seed-v3-font-size-s10)"; +export const s2Static = "var(--seed-v3-font-size-s2-static)"; +export const s5Static = "var(--seed-v3-font-size-s5-static)"; export const s6Static = "var(--seed-v3-font-size-s6-static)"; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 19f43f8da..59c98b7f7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7980,6 +7980,20 @@ __metadata: languageName: unknown linkType: soft +"@seed-design/react-pull-to-refresh@npm:0.0.0, @seed-design/react-pull-to-refresh@workspace:packages/react-headless/pull-to-refresh": + version: 0.0.0-use.local + resolution: "@seed-design/react-pull-to-refresh@workspace:packages/react-headless/pull-to-refresh" + dependencies: + "@radix-ui/react-compose-refs": "npm:^1.1.1" + "@seed-design/dom-utils": "npm:0.0.0-alpha-20241030023710" + "@seed-design/react-primitive": "npm:0.0.0" + nanobundle: "npm:^1.6.0" + peerDependencies: + react: ">=18.0.0" + react-dom: ">=18.0.0" + languageName: unknown + linkType: soft + "@seed-design/react-radio-group@npm:0.0.0-alpha-20241030023710, @seed-design/react-radio-group@workspace:packages/react-headless/radio-group": version: 0.0.0-use.local resolution: "@seed-design/react-radio-group@workspace:packages/react-headless/radio-group" @@ -8112,6 +8126,7 @@ __metadata: "@seed-design/react-popover": "npm:0.0.0-alpha-20241030023710" "@seed-design/react-primitive": "npm:0.0.0" "@seed-design/react-progress": "npm:0.0.0" + "@seed-design/react-pull-to-refresh": "npm:0.0.0" "@seed-design/react-radio-group": "npm:0.0.0-alpha-20241030023710" "@seed-design/react-segmented-control": "npm:0.0.0" "@seed-design/react-snackbar": "npm:0.0.0" @@ -8216,7 +8231,9 @@ __metadata: dependencies: "@radix-ui/react-compose-refs": "npm:^1.1.1" "@radix-ui/react-slot": "npm:^1.1.1" + "@radix-ui/react-use-callback-ref": "npm:^1.1.0" "@seed-design/dom-utils": "npm:0.0.0-alpha-20241030023710" + "@seed-design/react-primitive": "npm:0.0.0" "@stackflow/core": "npm:^1.1.0" clsx: "npm:^2.1.1" nanobundle: "npm:^1.6.0" @@ -8633,22 +8650,6 @@ __metadata: languageName: node linkType: hard -"@stackflow/react@npm:^1.4.0": - version: 1.4.0 - resolution: "@stackflow/react@npm:1.4.0" - dependencies: - history: "npm:^5.3.0" - react-fast-compare: "npm:^3.2.2" - url-pattern: "npm:^1.0.3" - peerDependencies: - "@stackflow/config": ^1.0.1-canary.0 - "@stackflow/core": ^1.1.0-canary.0 - "@types/react": ">=16.8.0" - react: ">=16.8.0" - checksum: 10/a5d01eaa61654a5f52acd7b7c5569cf667513649fa61c201791c8f1db9438b6615ad928bc08ef3a682db8751d622d7a9b99d7fe5a999b72b28711262e3fec112 - languageName: node - linkType: hard - "@stackflow/react@npm:^1.4.1": version: 1.4.1 resolution: "@stackflow/react@npm:1.4.1" @@ -13427,7 +13428,7 @@ __metadata: "@stackflow/core": "npm:^1.1.0" "@stackflow/plugin-basic-ui": "npm:^1.10.0" "@stackflow/plugin-renderer-basic": "npm:^1.1.13" - "@stackflow/react": "npm:^1.4.0" + "@stackflow/react": "npm:^1.4.1" "@storybook/addon-essentials": "npm:^8.4.4" "@storybook/addon-interactions": "npm:^8.4.4" "@storybook/addon-onboarding": "npm:^8.4.4"