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 9154f65a6..000000000 Binary files a/.yarn/cache/@stackflow-react-npm-1.4.0-b4e46e6d80-a5d01eaa61.zip and /dev/null differ 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"