@stackflow/plugin-basic-ui 1.3.3 → 1.3.4-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/AppBar.d.ts +2 -2
  2. package/dist/index.js +5 -5
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +5 -5
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +2 -2
  7. package/src/components/AppBar.tsx +7 -7
package/dist/components/AppBar.d.ts CHANGED
@@ -16,8 +16,8 @@ declare const AppBar: import("react").ForwardRefExoticComponent<Partial<Pick<{
16
16
  minSafeAreaInsetTop: string;
17
17
  }, "height" | "backgroundColor" | "borderColor" | "overflow" | "borderColorTransitionDuration" | "borderSize" | "heightTransitionDuration" | "iconColor" | "iconColorTransitionDuration" | "textColor" | "textColorTransitionDuration" | "backgroundColorTransitionDuration">> & {
18
18
  title?: React.ReactNode;
19
- appendLeft?: (() => React.ReactNode) | undefined;
20
- appendRight?: (() => React.ReactNode) | undefined;
19
+ renderLeft?: (() => React.ReactNode) | undefined;
20
+ renderRight?: (() => React.ReactNode) | undefined;
21
21
  backButton?: {
22
22
  renderIcon?: (() => React.ReactNode) | undefined;
23
23
  ariaLabel?: string | undefined;
package/dist/index.js CHANGED
@@ -628,8 +628,8 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
628
628
  var AppBar = (0, import_react7.forwardRef)(
629
629
  ({
630
630
  title,
631
- appendLeft,
632
- appendRight,
631
+ renderLeft,
632
+ renderRight,
633
633
  backButton: backButton2,
634
634
  closeButton: closeButton2,
635
635
  closeButtonLocation = "left",
@@ -758,7 +758,7 @@ var AppBar = (0, import_react7.forwardRef)(
758
758
  }
759
759
  );
760
760
  };
761
- const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || appendLeft);
761
+ const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || renderLeft);
762
762
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
763
763
  "div",
764
764
  {
@@ -790,7 +790,7 @@ var AppBar = (0, import_react7.forwardRef)(
790
790
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: left, children: [
791
791
  closeButtonLocation === "left" && renderCloseButton(),
792
792
  renderBackButton(),
793
- appendLeft == null ? void 0 : appendLeft()
793
+ renderLeft == null ? void 0 : renderLeft()
794
794
  ] }),
795
795
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: centerRef, className: center, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
796
796
  "div",
@@ -813,7 +813,7 @@ var AppBar = (0, import_react7.forwardRef)(
813
813
  }
814
814
  ) }),
815
815
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: right, children: [
816
- appendRight == null ? void 0 : appendRight(),
816
+ renderRight == null ? void 0 : renderRight(),
817
817
  closeButtonLocation === "right" && renderCloseButton()
818
818
  ] })
819
819
  ] })
package/dist/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/index.ts", "../src/assets/IconBack.tsx", "../src/assets/IconClose.tsx", "../src/basicUIPlugin.tsx", "../src/basicUIPlugin.css.ts", "../src/utils/compact.ts", "../src/utils/compactMap.ts", "../src/utils/listenOnce.ts", "../src/utils/listenResize.ts", "../src/utils/noop.ts", "../src/utils/requestNextFrame.tsx", "../src/components/AppScreen.tsx", "../src/hooks/useLazy.tsx", "../src/hooks/useMaxWidth.ts", "../src/hooks/useNullableActivity.ts", "../src/hooks/useStyleEffect.ts", "../src/hooks/useStyleEffectHide.ts", "../src/hooks/useStyleEffectOffset.ts", "../src/components/AppScreen.css.ts", "../src/hooks/useStyleEffectSwipeBack.ts", "../src/components/AppBar.tsx", "../src/components/AppBar.css.ts", "../src/components/BottomSheet.tsx", "../src/components/BottomSheet.css.ts", "../src/components/Modal.tsx", "../src/components/Modal.css.ts"],
4
- "sourcesContent": ["export { IconBack, IconClose } from \"./assets\";\nexport { basicUIPlugin } from \"./basicUIPlugin\";\nexport { globalVars as cssVars } from \"./basicUIPlugin.css\";\nexport {\n default as AppScreen,\n AppScreenContext,\n AppScreenProps,\n useAppScreen,\n} from \"./components/AppScreen\";\nexport {\n default as BottomSheet,\n BottomSheetProps,\n} from \"./components/BottomSheet\";\nexport { default as Modal, ModalProps } from \"./components/Modal\";\n", "const IconBack: React.FC<{\n className?: string;\n}> = (props) => (\n <svg\n className={props.className}\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11.5659 5.56564C11.8783 5.25322 11.8783 4.74669 11.5659 4.43427C11.2535 4.12185 10.7469 4.12185 10.4345 4.43427L3.43451 11.4343C3.12209 11.7467 3.12209 12.2532 3.43451 12.5656L10.4345 19.5656C10.7469 19.8781 11.2535 19.8781 11.5659 19.5656C11.8783 19.2532 11.8783 18.7467 11.5659 18.4343L5.93157 12.8H20.0002C20.442 12.8 20.8002 12.4418 20.8002 12C20.8002 11.5581 20.442 11.2 20.0002 11.2H5.93157L11.5659 5.56564Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nexport default IconBack;\n", "const IconClose: React.FC<{\n className?: string;\n}> = (props) => (\n <svg\n className={props.className}\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nexport default IconClose;\n", "import type { StackflowReactPlugin } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { createContext, useContext } from \"react\";\n\nimport * as css from \"./basicUIPlugin.css\";\nimport type { RecursivePartial } from \"./utils\";\nimport { compact, compactMap, isBrowser } from \"./utils\";\n\ntype BasicUIPluginOptions = RecursivePartial<css.GlobalVars> & {\n theme: \"android\" | \"cupertino\";\n rootClassName?: string;\n appBar?: {\n backButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n }\n | {\n render?: () => React.ReactNode;\n };\n closeButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n }\n | {\n render?: () => React.ReactNode;\n };\n };\n};\n\nconst GlobalOptionsContext = createContext<BasicUIPluginOptions>({\n theme: \"android\",\n});\n\nexport const GlobalOptionsProvider = GlobalOptionsContext.Provider;\n\nexport function useGlobalOptions() {\n return useContext(GlobalOptionsContext);\n}\n\nexport const basicUIPlugin: (\n options:\n | BasicUIPluginOptions\n | ((args: { initialContext?: any }) => BasicUIPluginOptions),\n) => StackflowReactPlugin = (options) => () => ({\n key: \"basic-ui\",\n wrapStack({ stack, initialContext }) {\n const _options =\n typeof options === \"function\" ? options({ initialContext }) : options;\n\n return (\n <GlobalOptionsProvider\n value={{\n ...options,\n theme: initialContext?.theme ?? _options.theme,\n }}\n >\n <div\n className={compact([\n css.stackWrapper({\n theme: initialContext?.theme ?? _options.theme,\n loading: stack.globalTransitionState === \"loading\",\n }),\n _options.rootClassName,\n ]).join(\" \")}\n style={assignInlineVars(\n compactMap({\n [css.globalVars.backgroundColor]: _options.backgroundColor,\n [css.globalVars.dimBackgroundColor]: _options.dimBackgroundColor,\n [css.globalVars\n .transitionDuration]: `${stack.transitionDuration}ms`,\n [css.globalVars.computedTransitionDuration]:\n stack.globalTransitionState === \"loading\"\n ? `${stack.transitionDuration}ms`\n : \"0ms\",\n [css.globalVars.appBar.borderColor]: _options.appBar?.borderColor,\n [css.globalVars.appBar.borderSize]: _options.appBar?.borderSize,\n [css.globalVars.appBar.height]: _options.appBar?.height,\n [css.globalVars.appBar.iconColor]: _options.appBar?.iconColor,\n [css.globalVars.appBar.textColor]: _options.appBar?.textColor,\n [css.globalVars.appBar.minSafeAreaInsetTop]:\n _options.appBar?.minSafeAreaInsetTop,\n [css.globalVars.bottomSheet.borderRadius]:\n _options.bottomSheet?.borderRadius,\n [css.globalVars.modal.borderRadius]: _options.modal?.borderRadius,\n }),\n )}\n >\n {stack.render()}\n </div>\n </GlobalOptionsProvider>\n );\n },\n});\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var android = '_1q6dj2j0';\nexport var cupertino = '_1q6dj2j1';\nexport var globalVars = {backgroundColor:'var(--stackflow-plugin-basic-ui-background-color)',dimBackgroundColor:'var(--stackflow-plugin-basic-ui-dim-background-color)',transitionDuration:'var(--stackflow-plugin-basic-ui-transition-duration)',computedTransitionDuration:'var(--stackflow-plugin-basic-ui-computed-transition-duration)',appBar:{borderColor:'var(--stackflow-plugin-basic-ui-app-bar-border-color)',borderColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration)',borderSize:'var(--stackflow-plugin-basic-ui-app-bar-border-size)',height:'var(--stackflow-plugin-basic-ui-app-bar-height)',heightTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)',minHeight:'var(--stackflow-plugin-basic-ui-app-bar-min-height)',iconColor:'var(--stackflow-plugin-basic-ui-app-bar-icon-color)',iconColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration)',textColor:'var(--stackflow-plugin-basic-ui-app-bar-text-color)',textColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-text-color-transition-duration)',backgroundColor:'var(--stackflow-plugin-basic-ui-app-bar-background-color)',backgroundColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration)',overflow:'var(--stackflow-plugin-basic-ui-app-bar-overflow)',minSafeAreaInsetTop:'var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top)'},bottomSheet:{borderRadius:'var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)'},modal:{borderRadius:'var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)'}};\nexport var stackWrapper = _7a468({defaultClassName:'_1q6dj2j2',variantClassNames:{theme:{android:'_1q6dj2j0',cupertino:'_1q6dj2j1'},loading:{true:'_1q6dj2j5'}},defaultVariants:{},compoundVariants:[]});", "export function compact<T>(arr: Array<T>): Array<NonNullable<T>> {\n return arr.filter(\n (item): item is NonNullable<typeof item> =>\n item !== undefined && item !== null,\n );\n}\n", "export function compactMap<T extends {}>(\n obj: T,\n): {\n [key in keyof T]: NonNullable<T[key]>;\n} {\n return Object.entries(obj).reduce<any>((acc, [key, value]) => {\n if (value !== null && value !== undefined) {\n acc[key] = value;\n }\n\n return acc;\n }, {});\n}\n", "export function listenOnce<T extends HTMLElement>(\n el: T,\n type: keyof HTMLElementEventMap,\n cb: () => void,\n) {\n const listener = () => {\n el.removeEventListener(type, listener);\n cb();\n };\n\n el.addEventListener(type, listener);\n}\n", "export const listenResize = (cb: () => void) => {\n cb();\n window.addEventListener(\"resize\", cb);\n\n return () => {\n window.removeEventListener(\"resize\", cb);\n };\n};\n", "export const noop = () => {};\n", "// https://github.com/MingruiZhang/react-animate-mount/blob/32300c04a4fdfa97724b70aaaf0c0f403d6da247/src/Animate.js#L171-L179\nexport function requestNextFrame(cb: () => void) {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n cb();\n });\n });\n}\n", "/* eslint-disable no-param-reassign */\n\nimport { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { createContext, useContext, useMemo, useRef } from \"react\";\n\nimport { useGlobalOptions } from \"../basicUIPlugin\";\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport {\n useLazy,\n useNullableActivity,\n useStyleEffectHide,\n useStyleEffectOffset,\n useStyleEffectSwipeBack,\n} from \"../hooks\";\nimport type { PropOf } from \"../utils\";\nimport { compactMap } from \"../utils\";\nimport AppBar from \"./AppBar\";\nimport * as css from \"./AppScreen.css\";\n\nexport type AppScreenContext = {\n scroll: (args: { top: number }) => void;\n};\nconst Context = createContext<AppScreenContext>(null as any);\n\nexport function useAppScreen() {\n return useContext(Context);\n}\n\nexport type AppScreenProps = Partial<\n Pick<GlobalVars, \"backgroundColor\" | \"dimBackgroundColor\">\n> & {\n appBar?: Omit<\n PropOf<typeof AppBar>,\n \"theme\" | \"modalPresentationStyle\" | \"ref\" | \"key\"\n >;\n preventSwipeBack?: boolean;\n modalPresentationStyle?: \"fullScreen\";\n children: React.ReactNode;\n};\nconst AppScreen: React.FC<AppScreenProps> = ({\n backgroundColor,\n dimBackgroundColor,\n appBar,\n preventSwipeBack,\n modalPresentationStyle,\n children,\n}) => {\n const globalOptions = useGlobalOptions();\n const activity = useNullableActivity();\n\n const { pop } = useActions();\n\n const appScreenRef = useRef<HTMLDivElement>(null);\n const dimRef = useRef<HTMLDivElement>(null);\n const paperRef = useRef<HTMLDivElement>(null);\n const edgeRef = useRef<HTMLDivElement>(null);\n const appBarRef = useRef<HTMLDivElement>(null);\n\n const presentModalFullScreen = modalPresentationStyle === \"fullScreen\";\n const swipeBackPrevented = preventSwipeBack || presentModalFullScreen;\n\n useStyleEffectHide({\n refs: [appScreenRef],\n hasEffect: true,\n });\n useStyleEffectOffset({\n theme: globalOptions.theme,\n refs:\n globalOptions.theme === \"cupertino\" ? [paperRef] : [paperRef, appBarRef],\n hasEffect: !presentModalFullScreen,\n });\n useStyleEffectSwipeBack({\n theme: globalOptions.theme,\n dimRef,\n edgeRef,\n paperRef,\n hasEffect: true,\n prevented: swipeBackPrevented,\n onSwiped() {\n pop();\n },\n });\n\n const hasAppBar = !!appBar;\n\n const zIndexBase = (activity?.zIndex ?? 0) * 5;\n const zIndexDim = zIndexBase;\n const zIndexPaper =\n zIndexBase + (globalOptions.theme === \"cupertino\" && hasAppBar ? 1 : 3);\n const zIndexEdge = zIndexBase + 4;\n const zIndexAppBar =\n globalOptions.theme === \"cupertino\" ? zIndexBase + 7 : zIndexBase + 4;\n\n const transitionState = activity?.transitionState ?? \"enter-done\";\n const lazyTransitionState = useLazy(transitionState);\n\n const onAppBarTopClick: React.MouseEventHandler = (e) => {\n appBar?.onTopClick?.(e);\n\n if (!e.defaultPrevented) {\n paperRef.current?.scroll({\n top: 0,\n behavior: \"smooth\",\n });\n }\n };\n\n return (\n <Context.Provider\n value={useMemo(\n () => ({\n scroll({ top }) {\n paperRef?.current?.scroll({\n top,\n behavior: \"smooth\",\n });\n },\n }),\n [paperRef],\n )}\n >\n <div\n ref={appScreenRef}\n className={css.appScreen({\n transitionState:\n transitionState === \"enter-done\" || transitionState === \"exit-done\"\n ? transitionState\n : lazyTransitionState,\n })}\n style={assignInlineVars(\n compactMap({\n [globalVars.backgroundColor]: backgroundColor,\n [globalVars.dimBackgroundColor]: dimBackgroundColor,\n [globalVars.appBar.height]: appBar?.height,\n [globalVars.appBar.heightTransitionDuration]:\n appBar?.heightTransitionDuration,\n [css.vars.zIndexes.dim]: `${zIndexDim}`,\n [css.vars.zIndexes.paper]: `${zIndexPaper}`,\n [css.vars.zIndexes.edge]: `${zIndexEdge}`,\n [css.vars.zIndexes.appBar]: `${zIndexAppBar}`,\n [css.vars.transitionDuration]:\n transitionState === \"enter-active\" ||\n transitionState === \"exit-active\"\n ? globalVars.computedTransitionDuration\n : \"0ms\",\n }),\n )}\n >\n <div className={css.dim} ref={dimRef} />\n {appBar && (\n <AppBar\n {...appBar}\n ref={appBarRef}\n modalPresentationStyle={modalPresentationStyle}\n onTopClick={onAppBarTopClick}\n />\n )}\n <div\n key={activity?.id}\n className={css.paper({\n hasAppBar,\n presentModalFullScreen,\n })}\n ref={paperRef}\n >\n {children}\n </div>\n {!activity?.isRoot &&\n globalOptions.theme === \"cupertino\" &&\n !swipeBackPrevented && (\n <div className={css.edge({ hasAppBar })} ref={edgeRef} />\n )}\n </div>\n </Context.Provider>\n );\n};\n\nAppScreen.displayName = \"AppScreen\";\n\nexport default AppScreen;\n", "import { useEffect, useState } from \"react\";\n\nimport { requestNextFrame } from \"../utils\";\n\nexport function useLazy<T>(value: T) {\n const [state, setState] = useState<T | undefined>(undefined);\n\n useEffect(() => {\n requestNextFrame(() => {\n setState(value);\n });\n }, [value]);\n\n return state;\n}\n", "import { useEffect, useState } from \"react\";\n\nimport { listenResize, noop } from \"../utils\";\n\nexport function useMaxWidth({\n outerRef,\n innerRef,\n enable,\n}: {\n outerRef: React.ForwardedRef<any>;\n innerRef: React.MutableRefObject<any>;\n enable: boolean;\n}) {\n const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n\n useEffect(() => {\n const $outer = outerRef && \"current\" in outerRef && outerRef.current;\n const $inner = innerRef.current;\n\n if (!enable || !$outer || !$inner) {\n return noop;\n }\n\n const dispose = listenResize(() => {\n const screenWidth = $outer.clientWidth;\n\n const leftWidth = $inner.offsetLeft;\n const centerWidth = $inner.clientWidth;\n const rightWidth = screenWidth - leftWidth - centerWidth;\n\n const sideMargin = Math.max(leftWidth, rightWidth);\n\n setMaxWidth(screenWidth - 2 * sideMargin);\n });\n\n return dispose;\n }, []);\n\n return {\n maxWidth,\n };\n}\n", "import type { Activity } from \"@stackflow/core\";\nimport { useActivity } from \"@stackflow/react\";\n\nexport function useNullableActivity() {\n return useActivity() as Activity | null;\n}\n", "import type { ActivityTransitionState } from \"@stackflow/core\";\nimport { useEffect } from \"react\";\n\nimport { noop } from \"../utils\";\nimport { useNullableActivity } from \"./useNullableActivity\";\n\nconst connections: {\n [styleName: string]: Map<\n number,\n {\n refs: Array<React.RefObject<any>>;\n hasEffect: boolean;\n }\n >;\n} = {};\n\nexport function useStyleEffect<T extends HTMLElement>({\n styleName,\n refs,\n effect,\n effectDeps,\n}: {\n styleName: string;\n refs: Array<React.RefObject<T>>;\n effect?: (params: {\n activityTransitionState: ActivityTransitionState;\n refs: Array<React.RefObject<T>>;\n }) => (() => void) | void;\n effectDeps?: any[];\n}) {\n const activity = useNullableActivity();\n\n useEffect(() => {\n if (!activity) {\n return noop;\n }\n if (!connections[styleName]) {\n connections[styleName] = new Map();\n }\n\n connections[styleName].set(activity.zIndex, {\n refs,\n hasEffect: !!effect,\n });\n\n return () => {\n connections[styleName].delete(activity.zIndex);\n };\n }, [activity?.id, refs, effect]);\n\n useEffect(() => {\n if (!activity) {\n return noop;\n }\n if (!effect) {\n return noop;\n }\n\n const refs = (() => {\n let arr: Array<React.RefObject<T>> = [];\n\n for (let i = 1; i <= activity.zIndex; i += 1) {\n const connection = connections[styleName].get(activity.zIndex - i);\n\n if (connection?.refs) {\n arr = [...arr, ...connection.refs];\n }\n if (connection?.hasEffect) {\n break;\n }\n }\n\n return arr;\n })();\n\n const cleanup = effect({\n activityTransitionState: activity.transitionState,\n refs,\n });\n\n return () => {\n cleanup?.();\n };\n }, [activity?.transitionState, ...(effectDeps ?? [])]);\n}\n", "/* eslint-disable no-param-reassign */\n\nimport { noop } from \"../utils\";\nimport { useStyleEffect } from \"./useStyleEffect\";\n\nexport function useStyleEffectHide({\n refs,\n hasEffect,\n}: {\n refs: Array<React.RefObject<any>>;\n hasEffect?: boolean;\n}) {\n useStyleEffect({\n styleName: \"hide\",\n refs,\n effect: hasEffect\n ? ({ activityTransitionState, refs }) => {\n const cleanup = () => {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n const $ref = ref.current;\n\n $ref.style.display = \"\";\n });\n };\n\n switch (activityTransitionState) {\n case \"enter-done\": {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n const $ref = ref.current;\n\n $ref.style.display = \"none\";\n });\n\n return () => {\n cleanup();\n };\n }\n default: {\n cleanup();\n\n return noop;\n }\n }\n }\n : undefined,\n });\n}\n", "/* eslint-disable no-param-reassign */\n\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { listenOnce, noop, requestNextFrame } from \"../utils\";\nimport { useStyleEffect } from \"./useStyleEffect\";\n\nexport const OFFSET_PX_ANDROID = 32;\nexport const OFFSET_PX_CUPERTINO = 80;\n\nexport function useStyleEffectOffset({\n refs,\n theme,\n hasEffect,\n}: {\n refs: Array<React.RefObject<any>>;\n theme: \"android\" | \"cupertino\";\n hasEffect?: boolean;\n}) {\n useStyleEffect({\n styleName: \"offset\",\n refs,\n effect: hasEffect\n ? ({ activityTransitionState, refs }) => {\n const transform =\n theme === \"cupertino\"\n ? `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`\n : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;\n\n const cleanup = () => {\n requestNextFrame(() => {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n const $el = ref.current;\n\n $el.style.transform = \"\";\n\n listenOnce($el, \"transitionend\", () => {\n $el.style.transition = \"\";\n });\n });\n });\n };\n\n switch (activityTransitionState) {\n case \"enter-active\":\n case \"enter-done\": {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n ref.current.style.transition =\n globalVars.computedTransitionDuration;\n ref.current.style.transform = transform;\n });\n\n switch (activityTransitionState) {\n case \"enter-done\":\n return () => {\n cleanup();\n };\n case \"enter-active\":\n default:\n return noop;\n }\n }\n case \"exit-active\":\n case \"exit-done\": {\n requestNextFrame(() => {\n cleanup();\n });\n\n return noop;\n }\n default: {\n return noop;\n }\n }\n }\n : undefined,\n });\n}\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE9WU0bKaMBCG732K3HRGpsQJenpOizd9k05IIgZDQkPQ03bOuzcEUAIK6vSmjhfisl/+f3ezqx8RFbuXzcsr+LMAIMHkkGpVSQqJEkrH4Ij1EsLS2MBOqBMsRJVyCRNccgIrDinP4TAr2C4+FquO/PYkeZr61VGNxrLkhisZN793SuctuXsTBSFQBSbc/BpFPCS5IGtMSxTYsA1dRgh9CgGyXz+Ju6SWHwO0tU+/IZeUvceD46KgDp64EJDssUxZ3OW1xJ+vNFtnCAzge8bTvYlBhDTLt14tYyC4ZFjDVGPKmTTLp/oVAp0meIkag7VHZ9Ie1XzOgr71tIXjMO6Fu6hXnug6NpnGkjks8lqSNcEj064CNl4SrYSoSwdPLDlwA8/RJsRlatutKrKf6N963L/zsPgC4rg7p8EnWDtNlJeFwFaQVJJ5TY/AQP59Y3iulavWCNVrVxbOvNvrXXZ5dUIK8q/DaHizKzfjNsoN95Qt9IAtdI+t/lDea7IBHf7J7glBgSm1kweNKma3IS4K+6Bhswzg5XBIK43rH246e8j5Deszg1sDKWamoJ1Jv0a5Szpxava2wqv1l3Z33bhbGz9bNkc+ZeKyMAkWxN0YAB/FODnfy6oolDYlWHp1JUpakF22Jd4xiDXD1lTJTB0NAid9MCuDxjhhDyoCn0GO3+/Oyu2f1+SFM+pdAT8mzDN5/D993xTeWf4LpNp3kwwJAAA=';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var allTransitions = '_1dlf4348';\nexport var appScreen = _7a468({defaultClassName:'dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc',variantClassNames:{transitionState:{'enter-active':'_1dlf4349','enter-done':'_1dlf434a','exit-active':'_1dlf434b','exit-done':'_1dlf434c'}},defaultVariants:{},compoundVariants:[]});\nexport var background = '_1dlf4347';\nexport var dim = '_1dlf434i dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4346 _1dlf4348';\nexport var edge = _7a468({defaultClassName:'_1dlf434m dhthxq4 dhthxq2 dhthxq3 dhthxq1',variantClassNames:{hasAppBar:{true:'_1dlf434n'}},defaultVariants:{},compoundVariants:[]});\nexport var enterActive = '_1dlf4349';\nexport var enterDone = '_1dlf434a';\nexport var exitActive = '_1dlf434b';\nexport var exitDone = '_1dlf434c';\nexport var paper = _7a468({defaultClassName:'_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4348',variantClassNames:{hasAppBar:{true:'_1dlf434k dhthxqg'},presentModalFullScreen:{true:'_1dlf434l'}},defaultVariants:{},compoundVariants:[]});\nexport var vars = {transitionDuration:'var(--_1dlf4340)',zIndexes:{dim:'var(--_1dlf4341)',paper:'var(--_1dlf4342)',edge:'var(--_1dlf4343)',appBar:'var(--_1dlf4344)'},appBar:{center:{mainWidth:'var(--_1dlf4345)'}}};", "/* eslint-disable no-param-reassign */\n\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport * as appScreenCss from \"../components/AppScreen.css\";\nimport { listenOnce, noop } from \"../utils\";\nimport { useStyleEffect } from \"./useStyleEffect\";\nimport { OFFSET_PX_CUPERTINO } from \"./useStyleEffectOffset\";\n\nexport function useStyleEffectSwipeBack({\n theme,\n dimRef,\n edgeRef,\n paperRef,\n hasEffect,\n prevented,\n onSwiped,\n}: {\n theme: \"android\" | \"cupertino\";\n dimRef: React.RefObject<HTMLDivElement>;\n edgeRef: React.RefObject<HTMLDivElement>;\n paperRef: React.RefObject<HTMLDivElement>;\n hasEffect?: boolean;\n prevented?: boolean;\n onSwiped?: () => void;\n}) {\n useStyleEffect({\n styleName: \"swipe-back\",\n refs: [paperRef],\n effect: hasEffect\n ? ({ refs }) => {\n if (theme !== \"cupertino\") {\n return noop;\n }\n\n if (!dimRef.current || !edgeRef.current || !paperRef.current) {\n return noop;\n }\n\n const $dim = dimRef.current;\n const $edge = edgeRef.current;\n const $paper = paperRef.current;\n\n let x0: number | null = null;\n let t0: number | null = null;\n let x: number | null = null;\n\n let cachedRefs: Array<{\n style: {\n transform: string;\n transition: string;\n };\n parentElement?: {\n style: {\n display: string;\n };\n };\n }> = [];\n\n const resetState = () => {\n x0 = null;\n t0 = null;\n x = null;\n cachedRefs = [];\n };\n\n let _rAFLock = false;\n\n function movePaper(dx: number) {\n if (!_rAFLock) {\n _rAFLock = true;\n\n requestAnimationFrame(() => {\n const p = dx / $paper.clientWidth;\n\n $dim.style.opacity = `${1 - p}`;\n $dim.style.transition = \"0s\";\n\n $paper.style.overflowY = \"hidden\";\n $paper.style.transform = `translate3d(${dx}px, 0, 0)`;\n $paper.style.transition = \"0s\";\n\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n ref.current.style.transform = `translate3d(${\n -1 * (1 - p) * OFFSET_PX_CUPERTINO\n }px, 0, 0)`;\n ref.current.style.transition = \"0s\";\n\n if (ref.current.parentElement?.style.display === \"none\") {\n ref.current.parentElement.style.display = \"block\";\n }\n });\n\n _rAFLock = false;\n });\n }\n }\n\n function resetPaper({ swiped }: { swiped: boolean }): Promise<void> {\n return new Promise((resolve) => {\n requestAnimationFrame(() => {\n $dim.style.opacity = `${swiped ? 0 : 1}`;\n $dim.style.transition = globalVars.transitionDuration;\n\n $paper.style.overflowY = \"hidden\";\n $paper.style.transform = `translateX(${swiped ? \"100%\" : \"0\"})`;\n $paper.style.transition = globalVars.transitionDuration;\n\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n ref.current.style.transition = globalVars.transitionDuration;\n ref.current.style.transform = `translate3d(${\n swiped ? \"0\" : `-${OFFSET_PX_CUPERTINO / 16}rem`\n }, 0, 0)`;\n });\n\n const _cachedRefs = [...cachedRefs];\n\n resolve();\n\n listenOnce($paper, \"transitionend\", () => {\n const _swiped =\n swiped ||\n $paper.parentElement?.classList.contains(\n appScreenCss.exitActive,\n ) ||\n $paper.parentElement?.classList.contains(\n appScreenCss.exitDone,\n );\n\n $dim.style.opacity = \"\";\n $paper.style.overflowY = \"\";\n $paper.style.transform = \"\";\n\n refs.forEach((ref, i) => {\n if (!ref.current) {\n return;\n }\n\n const _cachedRef = _cachedRefs[i];\n\n if (_swiped) {\n ref.current.style.transition = \"\";\n ref.current.style.transform = \"\";\n\n if (ref.current.parentElement) {\n ref.current.parentElement.style.display = \"\";\n }\n } else if (_cachedRef) {\n ref.current.style.transition =\n _cachedRef.style.transition;\n ref.current.style.transform = _cachedRef.style.transform;\n\n if (\n ref.current.parentElement &&\n _cachedRef.parentElement\n ) {\n ref.current.parentElement.style.display =\n _cachedRef.parentElement.style.display;\n }\n }\n });\n });\n });\n });\n }\n\n const onTouchStart = (e: TouchEvent) => {\n const { activeElement } = document as any;\n\n activeElement?.blur?.();\n // eslint-disable-next-line no-multi-assign\n x0 = x = e.touches[0].clientX;\n t0 = Date.now();\n\n cachedRefs = refs.map((ref) => {\n if (!ref.current) {\n return {\n style: {\n transform: \"\",\n transition: \"\",\n },\n };\n }\n\n return {\n style: {\n transform: ref.current.style.transform,\n transition: ref.current.style.transition,\n },\n parentElement: ref.current.parentElement\n ? {\n style: {\n display: ref.current.parentElement.style.display,\n },\n }\n : undefined,\n };\n });\n };\n\n const onTouchMove = (e: TouchEvent) => {\n if (!x0) {\n resetState();\n return;\n }\n\n x = e.touches[0].clientX;\n\n movePaper(x - x0);\n };\n\n const onTouchEnd = () => {\n if (!x0 || !t0 || !x) {\n resetState();\n return;\n }\n\n const t = Date.now();\n const v = (x - x0) / (t - t0);\n const swiped = v > 1 || x / $paper.clientWidth > 0.4;\n\n if (swiped) {\n onSwiped?.();\n }\n\n Promise.resolve()\n .then(() => resetPaper({ swiped }))\n .then(() => resetState());\n };\n\n $edge.addEventListener(\"touchstart\", onTouchStart, { passive: true });\n $edge.addEventListener(\"touchmove\", onTouchMove, { passive: true });\n $edge.addEventListener(\"touchend\", onTouchEnd, { passive: true });\n $edge.addEventListener(\"touchcancel\", onTouchEnd, { passive: true });\n\n return () => {\n $edge.removeEventListener(\"touchstart\", onTouchStart);\n $edge.removeEventListener(\"touchmove\", onTouchMove);\n $edge.removeEventListener(\"touchend\", onTouchEnd);\n $edge.removeEventListener(\"touchcancel\", onTouchEnd);\n };\n }\n : undefined,\n effectDeps: [prevented],\n });\n}\n", "import { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { IconBack, IconClose } from \"../assets\";\nimport { useGlobalOptions } from \"../basicUIPlugin\";\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { useMaxWidth, useNullableActivity } from \"../hooks\";\nimport { compactMap } from \"../utils\";\nimport * as css from \"./AppBar.css\";\nimport * as appScreenCss from \"./AppScreen.css\";\n\ntype AppBarProps = Partial<\n Pick<\n GlobalVars[\"appBar\"],\n | \"borderColor\"\n | \"borderColorTransitionDuration\"\n | \"borderSize\"\n | \"height\"\n | \"heightTransitionDuration\"\n | \"overflow\"\n | \"iconColor\"\n | \"iconColorTransitionDuration\"\n | \"textColor\"\n | \"textColorTransitionDuration\"\n | \"backgroundColor\"\n | \"backgroundColorTransitionDuration\"\n >\n> & {\n title?: React.ReactNode;\n appendLeft?: () => React.ReactNode;\n appendRight?: () => React.ReactNode;\n backButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n }\n | {\n render?: () => React.ReactNode;\n };\n closeButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n }\n | {\n render?: () => React.ReactNode;\n };\n closeButtonLocation?: \"left\" | \"right\";\n border?: boolean;\n modalPresentationStyle?: \"fullScreen\";\n onTopClick?: (e: React.MouseEvent) => void;\n};\nconst AppBar = forwardRef<HTMLDivElement, AppBarProps>(\n (\n {\n title,\n appendLeft,\n appendRight,\n backButton,\n closeButton,\n closeButtonLocation = \"left\",\n border = true,\n modalPresentationStyle,\n iconColor,\n iconColorTransitionDuration,\n textColor,\n textColorTransitionDuration,\n borderColor,\n borderColorTransitionDuration,\n borderSize,\n height,\n heightTransitionDuration,\n overflow,\n backgroundColor,\n backgroundColorTransitionDuration,\n onTopClick,\n },\n ref,\n ) => {\n const actions = useActions();\n const activity = useNullableActivity();\n\n const globalOptions = useGlobalOptions();\n const globalCloseButton = globalOptions.appBar?.closeButton;\n const globalBackButton = globalOptions.appBar?.backButton;\n\n const centerRef = useRef<any>(null);\n\n const { maxWidth } = useMaxWidth({\n outerRef: ref,\n innerRef: centerRef,\n enable: globalOptions.theme === \"cupertino\",\n });\n\n const presentModalFullScreen = modalPresentationStyle === \"fullScreen\";\n\n const onBackClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (backButton && \"onClick\" in backButton && backButton.onClick) {\n backButton.onClick(e);\n }\n\n if (!e.defaultPrevented) {\n actions.pop();\n }\n };\n\n const renderBackButton = () => {\n if (!activity) {\n return null;\n }\n if (activity.isRoot) {\n return null;\n }\n\n if (!backButton && !globalBackButton) {\n return (\n <button\n type=\"button\"\n className={css.backButton}\n onClick={onBackClick}\n >\n <IconBack />\n </button>\n );\n }\n\n if (backButton && \"render\" in backButton && backButton.render) {\n return backButton.render?.();\n }\n if (\n globalBackButton &&\n \"render\" in globalBackButton &&\n globalBackButton.render\n ) {\n return globalBackButton.render?.();\n }\n\n return (\n <button\n type=\"button\"\n className={css.backButton}\n aria-label={\n backButton && \"ariaLabel\" in backButton\n ? backButton.ariaLabel\n : globalBackButton && \"ariaLabel\" in globalBackButton\n ? globalBackButton.ariaLabel\n : undefined\n }\n onClick={onBackClick}\n >\n {(() => {\n if (\n backButton &&\n \"renderIcon\" in backButton &&\n backButton.renderIcon\n ) {\n return backButton.renderIcon();\n }\n if (\n globalBackButton &&\n \"renderIcon\" in globalBackButton &&\n globalBackButton.renderIcon\n ) {\n return globalBackButton.renderIcon();\n }\n\n if (presentModalFullScreen) {\n return <IconClose />;\n }\n\n return <IconBack />;\n })()}\n </button>\n );\n };\n\n const onCloseClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (closeButton && \"onClick\" in closeButton && closeButton.onClick) {\n closeButton.onClick(e);\n }\n\n if (\n !e.defaultPrevented &&\n globalCloseButton &&\n \"onClick\" in globalCloseButton\n ) {\n globalCloseButton.onClick?.(e);\n }\n };\n\n const renderCloseButton = () => {\n const isRoot = !activity || activity.isRoot;\n\n const showCloseButton = (closeButton: AppBarProps[\"closeButton\"]) =>\n (closeButton && \"render\" in closeButton && closeButton.render) ||\n (closeButton &&\n \"renderIcon\" in closeButton &&\n closeButton.renderIcon) ||\n (closeButton && \"onClick\" in closeButton && closeButton.onClick);\n\n if (\n !(\n showCloseButton(closeButton) ||\n showCloseButton(globalOptions.appBar?.closeButton)\n ) ||\n !isRoot\n ) {\n return null;\n }\n if (closeButton && \"render\" in closeButton && closeButton.render) {\n return closeButton.render();\n }\n if (\n globalCloseButton &&\n \"render\" in globalCloseButton &&\n globalCloseButton.render\n ) {\n return globalCloseButton.render();\n }\n\n return (\n <button\n type=\"button\"\n className={css.closeButton}\n aria-label={\n closeButton && \"ariaLabel\" in closeButton\n ? closeButton.ariaLabel\n : globalCloseButton && \"ariaLabel\" in globalCloseButton\n ? globalCloseButton.ariaLabel\n : undefined\n }\n onClick={onCloseClick}\n >\n {(() => {\n if (\n closeButton &&\n \"renderIcon\" in closeButton &&\n closeButton.renderIcon\n ) {\n return closeButton.renderIcon();\n }\n if (\n globalCloseButton &&\n \"renderIcon\" in globalCloseButton &&\n globalCloseButton.renderIcon\n ) {\n return globalCloseButton.renderIcon();\n }\n\n return <IconClose />;\n })()}\n </button>\n );\n };\n\n const hasLeft = !!(\n (closeButtonLocation === \"left\" && closeButton) ||\n backButton ||\n appendLeft\n );\n\n return (\n <div\n ref={ref}\n className={css.appBar({\n border,\n presentModalFullScreen,\n })}\n style={assignInlineVars(\n compactMap({\n [globalVars.appBar.iconColor]: iconColor,\n [globalVars.appBar.iconColorTransitionDuration]:\n iconColorTransitionDuration,\n [globalVars.appBar.textColor]: textColor,\n [globalVars.appBar.textColorTransitionDuration]:\n textColorTransitionDuration,\n [globalVars.appBar.borderColor]: borderColor,\n [globalVars.appBar.borderColorTransitionDuration]:\n borderColorTransitionDuration,\n [globalVars.appBar.borderSize]: borderSize,\n [globalVars.appBar.height]: height,\n [globalVars.appBar.heightTransitionDuration]:\n heightTransitionDuration,\n [globalVars.appBar.overflow]: overflow,\n [globalVars.appBar.backgroundColor]:\n backgroundColor || globalVars.backgroundColor,\n [globalVars.appBar.backgroundColorTransitionDuration]:\n backgroundColorTransitionDuration,\n [appScreenCss.vars.appBar.center.mainWidth]: `${maxWidth}px`,\n }),\n )}\n >\n <div className={css.safeArea} />\n <div className={css.container}>\n <div className={css.left}>\n {closeButtonLocation === \"left\" && renderCloseButton()}\n {renderBackButton()}\n {appendLeft?.()}\n </div>\n <div ref={centerRef} className={css.center}>\n <div\n className={css.centerMain({\n hasLeft,\n })}\n >\n {typeof title === \"string\" ? (\n <div className={css.centerText}>{title}</div>\n ) : (\n title\n )}\n <button\n className={css.centerMainEdge}\n type=\"button\"\n aria-hidden=\"true\"\n onClick={onTopClick}\n />\n </div>\n </div>\n <div className={css.right}>\n {appendRight?.()}\n {closeButtonLocation === \"right\" && renderCloseButton()}\n </div>\n </div>\n </div>\n );\n },\n);\n\nAppBar.displayName = \"AppBar\";\n\nexport default AppBar;\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE9WU0bKaMBCG732K3HRGpsQJenpOizd9k05IIgZDQkPQ03bOuzcEUAIK6vSmjhfisl/+f3ezqx8RFbuXzcsr+LMAIMHkkGpVSQqJEkrH4Ij1EsLS2MBOqBMsRJVyCRNccgIrDinP4TAr2C4+FquO/PYkeZr61VGNxrLkhisZN793SuctuXsTBSFQBSbc/BpFPCS5IGtMSxTYsA1dRgh9CgGyXz+Ju6SWHwO0tU+/IZeUvceD46KgDp64EJDssUxZ3OW1xJ+vNFtnCAzge8bTvYlBhDTLt14tYyC4ZFjDVGPKmTTLp/oVAp0meIkag7VHZ9Ie1XzOgr71tIXjMO6Fu6hXnug6NpnGkjks8lqSNcEj064CNl4SrYSoSwdPLDlwA8/RJsRlatutKrKf6N963L/zsPgC4rg7p8EnWDtNlJeFwFaQVJJ5TY/AQP59Y3iulavWCNVrVxbOvNvrXXZ5dUIK8q/DaHizKzfjNsoN95Qt9IAtdI+t/lDea7IBHf7J7glBgSm1kweNKma3IS4K+6Bhswzg5XBIK43rH246e8j5Deszg1sDKWamoJ1Jv0a5Szpxava2wqv1l3Z33bhbGz9bNkc+ZeKyMAkWxN0YAB/FODnfy6oolDYlWHp1JUpakF22Jd4xiDXD1lTJTB0NAid9MCuDxjhhDyoCn0GO3+/Oyu2f1+SFM+pdAT8mzDN5/D993xTeWf4LpNp3kwwJAAA=';\nimport 'src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+1YS2/bMAy+91foMiAZIkPOo+2c2w677bQfUMi2nKhRJM9SXh323yfJL9mOnaQIdiga5GBLJEV+/Egx8V7802aG5wsE/jwAsKUcrgldrVUA9jgbQSgVjjYJEweYst1Kb4dY0gjuKMRpql8yWOuMlw9/H7zSom8tij3JjPr19kqNprWptRZq5VUmdjyGkWAiu95qW1NbB+ANUh6TY2nlxY9ZMp/N53bzQBmD0RrzFQmAyjCXici2EyBSHFF1MiJ2lSoqeNBx7d2ewdoqjHcZNg/jCQjFEco1jsXhessii0k2YLVA+Pdj/Dp99UEL7FSUseFQCrZTpCufAxa2VSu4CuQYVmQWj3yEvkwA0t/xR4BvUscJkGyAg9qIFKwJAFr246OR8VFGth8RoGaJoXFVSJ0dA6QOvvw0Mc2FvjnwTi7IYke2Fm3kxB/OSUFYpxvN8m5UQRYAyiVRAKVHEGEWjaAPvt6Ko6RvZDwG6F3499byfKggLeHQfv1JOIdEDo38s5SbTy5KO6Sbu8LDuXCJNtRkP3N6VU4rvBYWr3Kw2eLj6JbhRuKEQJwRDG2RQyVSfXAkuFbnanRu2wJ/3/MI3/cd5UT62Ij02lOr8a3Jlnz5RitDg0bu41M+XeA4pnylL0SAvIW+9JoyAdmmOq1GMqYyZVi3aS44aUg92/0bJ0GqM+fMgG7AJZlmCG3lBNxWIrXdHgjMSBmrdQCm3jQPuM7U1HvqYPAc4EjRPWnND960z210f58dd0LrRxFCs9wWNrob86DIUfXk4X7EuxWQ2qnLA7Mz4zWwMVOuieh1JxVNTtocV4TrJCeMHI0PmVrWBQAZSfSeXxAi0cJ2EtBLnv/8VBKFUU6qn2a+t6hkD8VaKFi8LIcS+mZLq+iteqlvOgh7J32n7ozfZgEzuuKQKrKVAYh0SCQ7G2e9ZeG0au6q9TvBW8q0cQM9I1CepDKD73cd6OYnjn7Z9x9ashPpI0JtpEqQLJSLHP5z1+MI6s1Gc35PixTp/7tE7njYpRukw+rIbdQFT5E363aq2Ao20K+pWvW64YToGGFRQKVCq/EPNJ/z5I6b10fIRLRp+J23VkvS+n8KwhhNJZUtjlG+JhntsrFad+wmfTecCTMzacuxwjslmooXrr1OinpOMg9a5R/4yDzf3hEAAA==';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var appBar = _7a468({defaultClassName:'_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4347 _1yk3a451',variantClassNames:{border:{true:'_1yk3a453'},presentModalFullScreen:{true:'_1yk3a454'}},defaultVariants:{},compoundVariants:[]});\nexport var backButton = '_1yk3a458 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi';\nexport var center = 'dhthxq9 dhthxq7 dhthxq8 _1yk3a450';\nexport var centerMain = _7a468({defaultClassName:'_1yk3a45b',variantClassNames:{hasLeft:{true:'_1yk3a45c'}},defaultVariants:{},compoundVariants:[]});\nexport var centerMainEdge = '_1yk3a45d dhthxqi dhthxq4 dhthxq2 dhthxqf';\nexport var centerText = '_1yk3a45e dhthxqc dhthxqd dhthxq0';\nexport var closeButton = '_1yk3a458 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi';\nexport var container = '_1yk3a456 dhthxqa dhthxq7 _1yk3a451';\nexport var left = '_1yk3a457 dhthxq9 dhthxq7 dhthxq1 _1yk3a450';\nexport var right = '_1yk3a45f dhthxq9 dhthxq7 dhthxq1 dhthxq5 _1yk3a450';\nexport var safeArea = '_1yk3a455';", "/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n\nimport { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { useRef } from \"react\";\n\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { useLazy, useNullableActivity, useStyleEffect } from \"../hooks\";\nimport { compactMap } from \"../utils\";\nimport * as css from \"./BottomSheet.css\";\n\nexport type BottomSheetProps = Partial<\n Pick<GlobalVars, \"backgroundColor\" | \"dimBackgroundColor\">\n> &\n Partial<GlobalVars[\"bottomSheet\"]> & {\n onOutsideClick?: React.MouseEventHandler;\n children: React.ReactNode;\n };\nconst BottomSheet: React.FC<BottomSheetProps> = ({\n borderRadius = \"1rem\",\n backgroundColor,\n dimBackgroundColor,\n onOutsideClick,\n children,\n}) => {\n const activity = useNullableActivity();\n const { pop } = useActions();\n\n const containerRef = useRef<HTMLDivElement>(null);\n const paperRef = useRef<HTMLDivElement>(null);\n\n useStyleEffect({\n styleName: \"hide\",\n refs: [containerRef],\n });\n useStyleEffect({\n styleName: \"offset\",\n refs: [paperRef],\n });\n useStyleEffect({\n styleName: \"swipe-back\",\n refs: [paperRef],\n });\n\n const popLock = useRef(false);\n\n const onDimClick: React.MouseEventHandler = (e) => {\n onOutsideClick?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n if (popLock.current) {\n return;\n }\n popLock.current = true;\n\n pop();\n };\n const onPaperClick: React.MouseEventHandler = (e) => {\n e.stopPropagation();\n };\n\n const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;\n const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;\n const transitionState = activity?.transitionState ?? \"enter-done\";\n\n return (\n <div\n className={css.container({\n transitionState: useLazy(transitionState),\n })}\n ref={containerRef}\n style={assignInlineVars(\n compactMap({\n [globalVars.bottomSheet.borderRadius]: borderRadius,\n [globalVars.backgroundColor]: backgroundColor,\n [globalVars.dimBackgroundColor]: dimBackgroundColor,\n [css.vars.zIndexes.dim]: `${zIndexBase}`,\n [css.vars.zIndexes.paper]: `${zIndexPaper}`,\n [css.vars.transitionDuration]:\n transitionState === \"enter-active\" ||\n transitionState === \"exit-active\"\n ? globalVars.computedTransitionDuration\n : \"0ms\",\n }),\n )}\n >\n <div className={css.dim} ref={paperRef} onClick={onDimClick}>\n <div className={css.paper} onClick={onPaperClick}>\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nBottomSheet.displayName = \"BottomSheet\";\n\nexport default BottomSheet;\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/BottomSheet.css.ts.vanilla.css?source=Ll8xaHQzOGgwMyB7CiAgdHJhbnNpdGlvbjogdmFyKC0tXzFodDM4aDAwKTsKfQouXzFodDM4aDA3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fMWh0MzhoMGQgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktZGltLWJhY2tncm91bmQtY29sb3IpOwogIHotaW5kZXg6IHZhcigtLV8xaHQzOGgwMSk7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDA0IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDUgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMTsKfQouXzFodDM4aDA2IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDcgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDBlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJhY2tncm91bmQtY29sb3IpOwogIHdpZHRoOiAxMDAlOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIDAgMDsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtLCBvcGFjaXR5OwogIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgMTAwJSwgMCk7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDA0IC5fMWh0MzhoMGUsIC5fMWh0MzhoMDUgLl8xaHQzOGgwZSB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTsKICBvcGFjaXR5OiAxOwp9Ci5fMWh0MzhoMDYgLl8xaHQzOGgwZSwgLl8xaHQzOGgwNyAuXzFodDM4aDBlIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDEwMCUsIDApOwogIG9wYWNpdHk6IDA7Cn0=';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc',variantClassNames:{transitionState:{'enter-active':'_1ht38h04','enter-done':'_1ht38h05','exit-active':'_1ht38h06','exit-done':'_1ht38h07'}},defaultVariants:{},compoundVariants:[]});\nexport var dim = '_1ht38h0d dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc dhthxqa dhthxq7 _1ht38h03';\nexport var enterActive = '_1ht38h04';\nexport var enterDone = '_1ht38h05';\nexport var exitActive = '_1ht38h06';\nexport var exitDone = '_1ht38h07';\nexport var paper = '_1ht38h0e dhthxqc _1ht38h03';\nexport var vars = {transitionDuration:'var(--_1ht38h00)',zIndexes:{dim:'var(--_1ht38h01)',paper:'var(--_1ht38h02)'}};", "/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n\nimport { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { useRef } from \"react\";\n\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { useLazy, useNullableActivity, useStyleEffect } from \"../hooks\";\nimport { compactMap } from \"../utils\";\nimport * as css from \"./Modal.css\";\n\nexport type ModalProps = Partial<\n Pick<GlobalVars, \"backgroundColor\" | \"dimBackgroundColor\">\n> &\n Partial<GlobalVars[\"modal\"]> & {\n onOutsideClick?: React.MouseEventHandler;\n children: React.ReactNode;\n };\nconst Modal: React.FC<ModalProps> = ({\n backgroundColor,\n dimBackgroundColor,\n borderRadius = \"1rem\",\n onOutsideClick,\n children,\n}) => {\n const activity = useNullableActivity();\n const { pop } = useActions();\n\n const containerRef = useRef<HTMLDivElement>(null);\n const paperRef = useRef<HTMLDivElement>(null);\n\n useStyleEffect({\n styleName: \"hide\",\n refs: [containerRef],\n });\n useStyleEffect({\n styleName: \"offset\",\n refs: [paperRef],\n });\n useStyleEffect({\n styleName: \"swipe-back\",\n refs: [paperRef],\n });\n\n const popLock = useRef(false);\n\n const onDimClick: React.MouseEventHandler = (e) => {\n onOutsideClick?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n if (popLock.current) {\n return;\n }\n popLock.current = true;\n\n pop();\n };\n const onPaperClick: React.MouseEventHandler = (e) => {\n e.stopPropagation();\n };\n\n const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;\n const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;\n const transitionState = activity?.transitionState ?? \"enter-done\";\n\n return (\n <div\n className={css.container({\n transitionState: useLazy(transitionState),\n })}\n ref={containerRef}\n style={assignInlineVars(\n compactMap({\n [globalVars.bottomSheet.borderRadius]: borderRadius,\n [globalVars.backgroundColor]: backgroundColor,\n [globalVars.dimBackgroundColor]: dimBackgroundColor,\n [css.vars.zIndexes.dim]: `${zIndexBase}`,\n [css.vars.zIndexes.paper]: `${zIndexPaper}`,\n [css.vars.transitionDuration]:\n transitionState === \"enter-active\" ||\n transitionState === \"exit-active\"\n ? globalVars.computedTransitionDuration\n : \"0ms\",\n }),\n )}\n >\n <div className={css.dim} ref={paperRef} onClick={onDimClick}>\n <div className={css.paper} onClick={onPaperClick}>\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nModal.displayName = \"Modal\";\n\nexport default Modal;\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/Modal.css.ts.vanilla.css?source=Ll81b3pnOGMzIHsKICB0cmFuc2l0aW9uOiB2YXIoLS1fNW96ZzhjMCk7Cn0KLl81b3pnOGM3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fNW96ZzhjZCB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1kaW0tYmFja2dyb3VuZC1jb2xvcik7CiAgei1pbmRleDogdmFyKC0tXzVvemc4YzEpOwogIG9wYWNpdHk6IDA7Cn0KLl81b3pnOGM0IC5fNW96ZzhjZCwgLl81b3pnOGM1IC5fNW96ZzhjZCB7CiAgb3BhY2l0eTogMTsKfQouXzVvemc4YzYgLl81b3pnOGNkLCAuXzVvemc4YzcgLl81b3pnOGNkIHsKICBvcGFjaXR5OiAwOwp9Ci5fNW96ZzhjZSB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1iYWNrZ3JvdW5kLWNvbG9yKTsKICB3aWR0aDogMTAwJTsKICBtYXJnaW46IDAgMi41cmVtOwogIGJveC1zaGFkb3c6IDBweCAwLjYyNXJlbSAyLjM3NXJlbSByZ2JhKDAsIDAsIDAsIDAuMTUpLCAwcHggLjU2MjVyZW0gMi44NzVyZW0gcmdiYSgwLCAwLCAwLCAwLjEyKSwgMHB4IC4zMTI1cmVtIC45Mzc1cmVtIHJnYmEoMCwgMCwgMCwgMC4xKTsKICBib3JkZXItcmFkaXVzOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJvdHRvbS1zaGVldC1ib3JkZXItcmFkaXVzKTsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtLCBvcGFjaXR5OwogIHRyYW5zZm9ybTogc2NhbGUoMS4xKTsKICBvcGFjaXR5OiAwOwp9Ci5fNW96ZzhjNCAuXzVvemc4Y2UsIC5fNW96ZzhjNSAuXzVvemc4Y2UgewogIHRyYW5zZm9ybTogc2NhbGUoMSk7CiAgb3BhY2l0eTogMTsKfQouXzVvemc4YzYgLl81b3pnOGNlLCAuXzVvemc4YzcgLl81b3pnOGNlIHsKICB0cmFuc2Zvcm06IHNjYWxlKDEuMSk7CiAgb3BhY2l0eTogMDsKfQ==';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc',variantClassNames:{transitionState:{'enter-active':'_5ozg8c4','enter-done':'_5ozg8c5','exit-active':'_5ozg8c6','exit-done':'_5ozg8c7'}},defaultVariants:{},compoundVariants:[]});\nexport var dim = '_5ozg8cd dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc dhthxq9 dhthxq7 dhthxqb _5ozg8c3';\nexport var enterActive = '_5ozg8c4';\nexport var enterDone = '_5ozg8c5';\nexport var exitActive = '_5ozg8c6';\nexport var exitDone = '_5ozg8c7';\nexport var paper = '_5ozg8ce dhthxqc _5ozg8c3';\nexport var vars = {transitionDuration:'var(--_5ozg8c0)',zIndexes:{dim:'var(--_5ozg8c1)',paper:'var(--_5ozg8c2)'}};"],
4
+ "sourcesContent": ["export { IconBack, IconClose } from \"./assets\";\nexport { basicUIPlugin } from \"./basicUIPlugin\";\nexport { globalVars as cssVars } from \"./basicUIPlugin.css\";\nexport {\n default as AppScreen,\n AppScreenContext,\n AppScreenProps,\n useAppScreen,\n} from \"./components/AppScreen\";\nexport {\n default as BottomSheet,\n BottomSheetProps,\n} from \"./components/BottomSheet\";\nexport { default as Modal, ModalProps } from \"./components/Modal\";\n", "const IconBack: React.FC<{\n className?: string;\n}> = (props) => (\n <svg\n className={props.className}\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11.5659 5.56564C11.8783 5.25322 11.8783 4.74669 11.5659 4.43427C11.2535 4.12185 10.7469 4.12185 10.4345 4.43427L3.43451 11.4343C3.12209 11.7467 3.12209 12.2532 3.43451 12.5656L10.4345 19.5656C10.7469 19.8781 11.2535 19.8781 11.5659 19.5656C11.8783 19.2532 11.8783 18.7467 11.5659 18.4343L5.93157 12.8H20.0002C20.442 12.8 20.8002 12.4418 20.8002 12C20.8002 11.5581 20.442 11.2 20.0002 11.2H5.93157L11.5659 5.56564Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nexport default IconBack;\n", "const IconClose: React.FC<{\n className?: string;\n}> = (props) => (\n <svg\n className={props.className}\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nexport default IconClose;\n", "import type { StackflowReactPlugin } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { createContext, useContext } from \"react\";\n\nimport * as css from \"./basicUIPlugin.css\";\nimport type { RecursivePartial } from \"./utils\";\nimport { compact, compactMap, isBrowser } from \"./utils\";\n\ntype BasicUIPluginOptions = RecursivePartial<css.GlobalVars> & {\n theme: \"android\" | \"cupertino\";\n rootClassName?: string;\n appBar?: {\n backButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n }\n | {\n render?: () => React.ReactNode;\n };\n closeButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n }\n | {\n render?: () => React.ReactNode;\n };\n };\n};\n\nconst GlobalOptionsContext = createContext<BasicUIPluginOptions>({\n theme: \"android\",\n});\n\nexport const GlobalOptionsProvider = GlobalOptionsContext.Provider;\n\nexport function useGlobalOptions() {\n return useContext(GlobalOptionsContext);\n}\n\nexport const basicUIPlugin: (\n options:\n | BasicUIPluginOptions\n | ((args: { initialContext?: any }) => BasicUIPluginOptions),\n) => StackflowReactPlugin = (options) => () => ({\n key: \"basic-ui\",\n wrapStack({ stack, initialContext }) {\n const _options =\n typeof options === \"function\" ? options({ initialContext }) : options;\n\n return (\n <GlobalOptionsProvider\n value={{\n ...options,\n theme: initialContext?.theme ?? _options.theme,\n }}\n >\n <div\n className={compact([\n css.stackWrapper({\n theme: initialContext?.theme ?? _options.theme,\n loading: stack.globalTransitionState === \"loading\",\n }),\n _options.rootClassName,\n ]).join(\" \")}\n style={assignInlineVars(\n compactMap({\n [css.globalVars.backgroundColor]: _options.backgroundColor,\n [css.globalVars.dimBackgroundColor]: _options.dimBackgroundColor,\n [css.globalVars\n .transitionDuration]: `${stack.transitionDuration}ms`,\n [css.globalVars.computedTransitionDuration]:\n stack.globalTransitionState === \"loading\"\n ? `${stack.transitionDuration}ms`\n : \"0ms\",\n [css.globalVars.appBar.borderColor]: _options.appBar?.borderColor,\n [css.globalVars.appBar.borderSize]: _options.appBar?.borderSize,\n [css.globalVars.appBar.height]: _options.appBar?.height,\n [css.globalVars.appBar.iconColor]: _options.appBar?.iconColor,\n [css.globalVars.appBar.textColor]: _options.appBar?.textColor,\n [css.globalVars.appBar.minSafeAreaInsetTop]:\n _options.appBar?.minSafeAreaInsetTop,\n [css.globalVars.bottomSheet.borderRadius]:\n _options.bottomSheet?.borderRadius,\n [css.globalVars.modal.borderRadius]: _options.modal?.borderRadius,\n }),\n )}\n >\n {stack.render()}\n </div>\n </GlobalOptionsProvider>\n );\n },\n});\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var android = '_1q6dj2j0';\nexport var cupertino = '_1q6dj2j1';\nexport var globalVars = {backgroundColor:'var(--stackflow-plugin-basic-ui-background-color)',dimBackgroundColor:'var(--stackflow-plugin-basic-ui-dim-background-color)',transitionDuration:'var(--stackflow-plugin-basic-ui-transition-duration)',computedTransitionDuration:'var(--stackflow-plugin-basic-ui-computed-transition-duration)',appBar:{borderColor:'var(--stackflow-plugin-basic-ui-app-bar-border-color)',borderColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration)',borderSize:'var(--stackflow-plugin-basic-ui-app-bar-border-size)',height:'var(--stackflow-plugin-basic-ui-app-bar-height)',heightTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)',minHeight:'var(--stackflow-plugin-basic-ui-app-bar-min-height)',iconColor:'var(--stackflow-plugin-basic-ui-app-bar-icon-color)',iconColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration)',textColor:'var(--stackflow-plugin-basic-ui-app-bar-text-color)',textColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-text-color-transition-duration)',backgroundColor:'var(--stackflow-plugin-basic-ui-app-bar-background-color)',backgroundColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration)',overflow:'var(--stackflow-plugin-basic-ui-app-bar-overflow)',minSafeAreaInsetTop:'var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top)'},bottomSheet:{borderRadius:'var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)'},modal:{borderRadius:'var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)'}};\nexport var stackWrapper = _7a468({defaultClassName:'_1q6dj2j2',variantClassNames:{theme:{android:'_1q6dj2j0',cupertino:'_1q6dj2j1'},loading:{true:'_1q6dj2j5'}},defaultVariants:{},compoundVariants:[]});", "export function compact<T>(arr: Array<T>): Array<NonNullable<T>> {\n return arr.filter(\n (item): item is NonNullable<typeof item> =>\n item !== undefined && item !== null,\n );\n}\n", "export function compactMap<T extends {}>(\n obj: T,\n): {\n [key in keyof T]: NonNullable<T[key]>;\n} {\n return Object.entries(obj).reduce<any>((acc, [key, value]) => {\n if (value !== null && value !== undefined) {\n acc[key] = value;\n }\n\n return acc;\n }, {});\n}\n", "export function listenOnce<T extends HTMLElement>(\n el: T,\n type: keyof HTMLElementEventMap,\n cb: () => void,\n) {\n const listener = () => {\n el.removeEventListener(type, listener);\n cb();\n };\n\n el.addEventListener(type, listener);\n}\n", "export const listenResize = (cb: () => void) => {\n cb();\n window.addEventListener(\"resize\", cb);\n\n return () => {\n window.removeEventListener(\"resize\", cb);\n };\n};\n", "export const noop = () => {};\n", "// https://github.com/MingruiZhang/react-animate-mount/blob/32300c04a4fdfa97724b70aaaf0c0f403d6da247/src/Animate.js#L171-L179\nexport function requestNextFrame(cb: () => void) {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n cb();\n });\n });\n}\n", "/* eslint-disable no-param-reassign */\n\nimport { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { createContext, useContext, useMemo, useRef } from \"react\";\n\nimport { useGlobalOptions } from \"../basicUIPlugin\";\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport {\n useLazy,\n useNullableActivity,\n useStyleEffectHide,\n useStyleEffectOffset,\n useStyleEffectSwipeBack,\n} from \"../hooks\";\nimport type { PropOf } from \"../utils\";\nimport { compactMap } from \"../utils\";\nimport AppBar from \"./AppBar\";\nimport * as css from \"./AppScreen.css\";\n\nexport type AppScreenContext = {\n scroll: (args: { top: number }) => void;\n};\nconst Context = createContext<AppScreenContext>(null as any);\n\nexport function useAppScreen() {\n return useContext(Context);\n}\n\nexport type AppScreenProps = Partial<\n Pick<GlobalVars, \"backgroundColor\" | \"dimBackgroundColor\">\n> & {\n appBar?: Omit<\n PropOf<typeof AppBar>,\n \"theme\" | \"modalPresentationStyle\" | \"ref\" | \"key\"\n >;\n preventSwipeBack?: boolean;\n modalPresentationStyle?: \"fullScreen\";\n children: React.ReactNode;\n};\nconst AppScreen: React.FC<AppScreenProps> = ({\n backgroundColor,\n dimBackgroundColor,\n appBar,\n preventSwipeBack,\n modalPresentationStyle,\n children,\n}) => {\n const globalOptions = useGlobalOptions();\n const activity = useNullableActivity();\n\n const { pop } = useActions();\n\n const appScreenRef = useRef<HTMLDivElement>(null);\n const dimRef = useRef<HTMLDivElement>(null);\n const paperRef = useRef<HTMLDivElement>(null);\n const edgeRef = useRef<HTMLDivElement>(null);\n const appBarRef = useRef<HTMLDivElement>(null);\n\n const presentModalFullScreen = modalPresentationStyle === \"fullScreen\";\n const swipeBackPrevented = preventSwipeBack || presentModalFullScreen;\n\n useStyleEffectHide({\n refs: [appScreenRef],\n hasEffect: true,\n });\n useStyleEffectOffset({\n theme: globalOptions.theme,\n refs:\n globalOptions.theme === \"cupertino\" ? [paperRef] : [paperRef, appBarRef],\n hasEffect: !presentModalFullScreen,\n });\n useStyleEffectSwipeBack({\n theme: globalOptions.theme,\n dimRef,\n edgeRef,\n paperRef,\n hasEffect: true,\n prevented: swipeBackPrevented,\n onSwiped() {\n pop();\n },\n });\n\n const hasAppBar = !!appBar;\n\n const zIndexBase = (activity?.zIndex ?? 0) * 5;\n const zIndexDim = zIndexBase;\n const zIndexPaper =\n zIndexBase + (globalOptions.theme === \"cupertino\" && hasAppBar ? 1 : 3);\n const zIndexEdge = zIndexBase + 4;\n const zIndexAppBar =\n globalOptions.theme === \"cupertino\" ? zIndexBase + 7 : zIndexBase + 4;\n\n const transitionState = activity?.transitionState ?? \"enter-done\";\n const lazyTransitionState = useLazy(transitionState);\n\n const onAppBarTopClick: React.MouseEventHandler = (e) => {\n appBar?.onTopClick?.(e);\n\n if (!e.defaultPrevented) {\n paperRef.current?.scroll({\n top: 0,\n behavior: \"smooth\",\n });\n }\n };\n\n return (\n <Context.Provider\n value={useMemo(\n () => ({\n scroll({ top }) {\n paperRef?.current?.scroll({\n top,\n behavior: \"smooth\",\n });\n },\n }),\n [paperRef],\n )}\n >\n <div\n ref={appScreenRef}\n className={css.appScreen({\n transitionState:\n transitionState === \"enter-done\" || transitionState === \"exit-done\"\n ? transitionState\n : lazyTransitionState,\n })}\n style={assignInlineVars(\n compactMap({\n [globalVars.backgroundColor]: backgroundColor,\n [globalVars.dimBackgroundColor]: dimBackgroundColor,\n [globalVars.appBar.height]: appBar?.height,\n [globalVars.appBar.heightTransitionDuration]:\n appBar?.heightTransitionDuration,\n [css.vars.zIndexes.dim]: `${zIndexDim}`,\n [css.vars.zIndexes.paper]: `${zIndexPaper}`,\n [css.vars.zIndexes.edge]: `${zIndexEdge}`,\n [css.vars.zIndexes.appBar]: `${zIndexAppBar}`,\n [css.vars.transitionDuration]:\n transitionState === \"enter-active\" ||\n transitionState === \"exit-active\"\n ? globalVars.computedTransitionDuration\n : \"0ms\",\n }),\n )}\n >\n <div className={css.dim} ref={dimRef} />\n {appBar && (\n <AppBar\n {...appBar}\n ref={appBarRef}\n modalPresentationStyle={modalPresentationStyle}\n onTopClick={onAppBarTopClick}\n />\n )}\n <div\n key={activity?.id}\n className={css.paper({\n hasAppBar,\n presentModalFullScreen,\n })}\n ref={paperRef}\n >\n {children}\n </div>\n {!activity?.isRoot &&\n globalOptions.theme === \"cupertino\" &&\n !swipeBackPrevented && (\n <div className={css.edge({ hasAppBar })} ref={edgeRef} />\n )}\n </div>\n </Context.Provider>\n );\n};\n\nAppScreen.displayName = \"AppScreen\";\n\nexport default AppScreen;\n", "import { useEffect, useState } from \"react\";\n\nimport { requestNextFrame } from \"../utils\";\n\nexport function useLazy<T>(value: T) {\n const [state, setState] = useState<T | undefined>(undefined);\n\n useEffect(() => {\n requestNextFrame(() => {\n setState(value);\n });\n }, [value]);\n\n return state;\n}\n", "import { useEffect, useState } from \"react\";\n\nimport { listenResize, noop } from \"../utils\";\n\nexport function useMaxWidth({\n outerRef,\n innerRef,\n enable,\n}: {\n outerRef: React.ForwardedRef<any>;\n innerRef: React.MutableRefObject<any>;\n enable: boolean;\n}) {\n const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n\n useEffect(() => {\n const $outer = outerRef && \"current\" in outerRef && outerRef.current;\n const $inner = innerRef.current;\n\n if (!enable || !$outer || !$inner) {\n return noop;\n }\n\n const dispose = listenResize(() => {\n const screenWidth = $outer.clientWidth;\n\n const leftWidth = $inner.offsetLeft;\n const centerWidth = $inner.clientWidth;\n const rightWidth = screenWidth - leftWidth - centerWidth;\n\n const sideMargin = Math.max(leftWidth, rightWidth);\n\n setMaxWidth(screenWidth - 2 * sideMargin);\n });\n\n return dispose;\n }, []);\n\n return {\n maxWidth,\n };\n}\n", "import type { Activity } from \"@stackflow/core\";\nimport { useActivity } from \"@stackflow/react\";\n\nexport function useNullableActivity() {\n return useActivity() as Activity | null;\n}\n", "import type { ActivityTransitionState } from \"@stackflow/core\";\nimport { useEffect } from \"react\";\n\nimport { noop } from \"../utils\";\nimport { useNullableActivity } from \"./useNullableActivity\";\n\nconst connections: {\n [styleName: string]: Map<\n number,\n {\n refs: Array<React.RefObject<any>>;\n hasEffect: boolean;\n }\n >;\n} = {};\n\nexport function useStyleEffect<T extends HTMLElement>({\n styleName,\n refs,\n effect,\n effectDeps,\n}: {\n styleName: string;\n refs: Array<React.RefObject<T>>;\n effect?: (params: {\n activityTransitionState: ActivityTransitionState;\n refs: Array<React.RefObject<T>>;\n }) => (() => void) | void;\n effectDeps?: any[];\n}) {\n const activity = useNullableActivity();\n\n useEffect(() => {\n if (!activity) {\n return noop;\n }\n if (!connections[styleName]) {\n connections[styleName] = new Map();\n }\n\n connections[styleName].set(activity.zIndex, {\n refs,\n hasEffect: !!effect,\n });\n\n return () => {\n connections[styleName].delete(activity.zIndex);\n };\n }, [activity?.id, refs, effect]);\n\n useEffect(() => {\n if (!activity) {\n return noop;\n }\n if (!effect) {\n return noop;\n }\n\n const refs = (() => {\n let arr: Array<React.RefObject<T>> = [];\n\n for (let i = 1; i <= activity.zIndex; i += 1) {\n const connection = connections[styleName].get(activity.zIndex - i);\n\n if (connection?.refs) {\n arr = [...arr, ...connection.refs];\n }\n if (connection?.hasEffect) {\n break;\n }\n }\n\n return arr;\n })();\n\n const cleanup = effect({\n activityTransitionState: activity.transitionState,\n refs,\n });\n\n return () => {\n cleanup?.();\n };\n }, [activity?.transitionState, ...(effectDeps ?? [])]);\n}\n", "/* eslint-disable no-param-reassign */\n\nimport { noop } from \"../utils\";\nimport { useStyleEffect } from \"./useStyleEffect\";\n\nexport function useStyleEffectHide({\n refs,\n hasEffect,\n}: {\n refs: Array<React.RefObject<any>>;\n hasEffect?: boolean;\n}) {\n useStyleEffect({\n styleName: \"hide\",\n refs,\n effect: hasEffect\n ? ({ activityTransitionState, refs }) => {\n const cleanup = () => {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n const $ref = ref.current;\n\n $ref.style.display = \"\";\n });\n };\n\n switch (activityTransitionState) {\n case \"enter-done\": {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n const $ref = ref.current;\n\n $ref.style.display = \"none\";\n });\n\n return () => {\n cleanup();\n };\n }\n default: {\n cleanup();\n\n return noop;\n }\n }\n }\n : undefined,\n });\n}\n", "/* eslint-disable no-param-reassign */\n\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { listenOnce, noop, requestNextFrame } from \"../utils\";\nimport { useStyleEffect } from \"./useStyleEffect\";\n\nexport const OFFSET_PX_ANDROID = 32;\nexport const OFFSET_PX_CUPERTINO = 80;\n\nexport function useStyleEffectOffset({\n refs,\n theme,\n hasEffect,\n}: {\n refs: Array<React.RefObject<any>>;\n theme: \"android\" | \"cupertino\";\n hasEffect?: boolean;\n}) {\n useStyleEffect({\n styleName: \"offset\",\n refs,\n effect: hasEffect\n ? ({ activityTransitionState, refs }) => {\n const transform =\n theme === \"cupertino\"\n ? `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`\n : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;\n\n const cleanup = () => {\n requestNextFrame(() => {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n const $el = ref.current;\n\n $el.style.transform = \"\";\n\n listenOnce($el, \"transitionend\", () => {\n $el.style.transition = \"\";\n });\n });\n });\n };\n\n switch (activityTransitionState) {\n case \"enter-active\":\n case \"enter-done\": {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n ref.current.style.transition =\n globalVars.computedTransitionDuration;\n ref.current.style.transform = transform;\n });\n\n switch (activityTransitionState) {\n case \"enter-done\":\n return () => {\n cleanup();\n };\n case \"enter-active\":\n default:\n return noop;\n }\n }\n case \"exit-active\":\n case \"exit-done\": {\n requestNextFrame(() => {\n cleanup();\n });\n\n return noop;\n }\n default: {\n return noop;\n }\n }\n }\n : undefined,\n });\n}\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE9WU0bKaMBCG732K3HRGpsQJenpOizd9k05IIgZDQkPQ03bOuzcEUAIK6vSmjhfisl/+f3ezqx8RFbuXzcsr+LMAIMHkkGpVSQqJEkrH4Ij1EsLS2MBOqBMsRJVyCRNccgIrDinP4TAr2C4+FquO/PYkeZr61VGNxrLkhisZN793SuctuXsTBSFQBSbc/BpFPCS5IGtMSxTYsA1dRgh9CgGyXz+Ju6SWHwO0tU+/IZeUvceD46KgDp64EJDssUxZ3OW1xJ+vNFtnCAzge8bTvYlBhDTLt14tYyC4ZFjDVGPKmTTLp/oVAp0meIkag7VHZ9Ie1XzOgr71tIXjMO6Fu6hXnug6NpnGkjks8lqSNcEj064CNl4SrYSoSwdPLDlwA8/RJsRlatutKrKf6N963L/zsPgC4rg7p8EnWDtNlJeFwFaQVJJ5TY/AQP59Y3iulavWCNVrVxbOvNvrXXZ5dUIK8q/DaHizKzfjNsoN95Qt9IAtdI+t/lDea7IBHf7J7glBgSm1kweNKma3IS4K+6Bhswzg5XBIK43rH246e8j5Deszg1sDKWamoJ1Jv0a5Szpxava2wqv1l3Z33bhbGz9bNkc+ZeKyMAkWxN0YAB/FODnfy6oolDYlWHp1JUpakF22Jd4xiDXD1lTJTB0NAid9MCuDxjhhDyoCn0GO3+/Oyu2f1+SFM+pdAT8mzDN5/D993xTeWf4LpNp3kwwJAAA=';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var allTransitions = '_1dlf4348';\nexport var appScreen = _7a468({defaultClassName:'dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc',variantClassNames:{transitionState:{'enter-active':'_1dlf4349','enter-done':'_1dlf434a','exit-active':'_1dlf434b','exit-done':'_1dlf434c'}},defaultVariants:{},compoundVariants:[]});\nexport var background = '_1dlf4347';\nexport var dim = '_1dlf434i dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4346 _1dlf4348';\nexport var edge = _7a468({defaultClassName:'_1dlf434m dhthxq4 dhthxq2 dhthxq3 dhthxq1',variantClassNames:{hasAppBar:{true:'_1dlf434n'}},defaultVariants:{},compoundVariants:[]});\nexport var enterActive = '_1dlf4349';\nexport var enterDone = '_1dlf434a';\nexport var exitActive = '_1dlf434b';\nexport var exitDone = '_1dlf434c';\nexport var paper = _7a468({defaultClassName:'_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4348',variantClassNames:{hasAppBar:{true:'_1dlf434k dhthxqg'},presentModalFullScreen:{true:'_1dlf434l'}},defaultVariants:{},compoundVariants:[]});\nexport var vars = {transitionDuration:'var(--_1dlf4340)',zIndexes:{dim:'var(--_1dlf4341)',paper:'var(--_1dlf4342)',edge:'var(--_1dlf4343)',appBar:'var(--_1dlf4344)'},appBar:{center:{mainWidth:'var(--_1dlf4345)'}}};", "/* eslint-disable no-param-reassign */\n\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport * as appScreenCss from \"../components/AppScreen.css\";\nimport { listenOnce, noop } from \"../utils\";\nimport { useStyleEffect } from \"./useStyleEffect\";\nimport { OFFSET_PX_CUPERTINO } from \"./useStyleEffectOffset\";\n\nexport function useStyleEffectSwipeBack({\n theme,\n dimRef,\n edgeRef,\n paperRef,\n hasEffect,\n prevented,\n onSwiped,\n}: {\n theme: \"android\" | \"cupertino\";\n dimRef: React.RefObject<HTMLDivElement>;\n edgeRef: React.RefObject<HTMLDivElement>;\n paperRef: React.RefObject<HTMLDivElement>;\n hasEffect?: boolean;\n prevented?: boolean;\n onSwiped?: () => void;\n}) {\n useStyleEffect({\n styleName: \"swipe-back\",\n refs: [paperRef],\n effect: hasEffect\n ? ({ refs }) => {\n if (theme !== \"cupertino\") {\n return noop;\n }\n\n if (!dimRef.current || !edgeRef.current || !paperRef.current) {\n return noop;\n }\n\n const $dim = dimRef.current;\n const $edge = edgeRef.current;\n const $paper = paperRef.current;\n\n let x0: number | null = null;\n let t0: number | null = null;\n let x: number | null = null;\n\n let cachedRefs: Array<{\n style: {\n transform: string;\n transition: string;\n };\n parentElement?: {\n style: {\n display: string;\n };\n };\n }> = [];\n\n const resetState = () => {\n x0 = null;\n t0 = null;\n x = null;\n cachedRefs = [];\n };\n\n let _rAFLock = false;\n\n function movePaper(dx: number) {\n if (!_rAFLock) {\n _rAFLock = true;\n\n requestAnimationFrame(() => {\n const p = dx / $paper.clientWidth;\n\n $dim.style.opacity = `${1 - p}`;\n $dim.style.transition = \"0s\";\n\n $paper.style.overflowY = \"hidden\";\n $paper.style.transform = `translate3d(${dx}px, 0, 0)`;\n $paper.style.transition = \"0s\";\n\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n ref.current.style.transform = `translate3d(${\n -1 * (1 - p) * OFFSET_PX_CUPERTINO\n }px, 0, 0)`;\n ref.current.style.transition = \"0s\";\n\n if (ref.current.parentElement?.style.display === \"none\") {\n ref.current.parentElement.style.display = \"block\";\n }\n });\n\n _rAFLock = false;\n });\n }\n }\n\n function resetPaper({ swiped }: { swiped: boolean }): Promise<void> {\n return new Promise((resolve) => {\n requestAnimationFrame(() => {\n $dim.style.opacity = `${swiped ? 0 : 1}`;\n $dim.style.transition = globalVars.transitionDuration;\n\n $paper.style.overflowY = \"hidden\";\n $paper.style.transform = `translateX(${swiped ? \"100%\" : \"0\"})`;\n $paper.style.transition = globalVars.transitionDuration;\n\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n ref.current.style.transition = globalVars.transitionDuration;\n ref.current.style.transform = `translate3d(${\n swiped ? \"0\" : `-${OFFSET_PX_CUPERTINO / 16}rem`\n }, 0, 0)`;\n });\n\n const _cachedRefs = [...cachedRefs];\n\n resolve();\n\n listenOnce($paper, \"transitionend\", () => {\n const _swiped =\n swiped ||\n $paper.parentElement?.classList.contains(\n appScreenCss.exitActive,\n ) ||\n $paper.parentElement?.classList.contains(\n appScreenCss.exitDone,\n );\n\n $dim.style.opacity = \"\";\n $paper.style.overflowY = \"\";\n $paper.style.transform = \"\";\n\n refs.forEach((ref, i) => {\n if (!ref.current) {\n return;\n }\n\n const _cachedRef = _cachedRefs[i];\n\n if (_swiped) {\n ref.current.style.transition = \"\";\n ref.current.style.transform = \"\";\n\n if (ref.current.parentElement) {\n ref.current.parentElement.style.display = \"\";\n }\n } else if (_cachedRef) {\n ref.current.style.transition =\n _cachedRef.style.transition;\n ref.current.style.transform = _cachedRef.style.transform;\n\n if (\n ref.current.parentElement &&\n _cachedRef.parentElement\n ) {\n ref.current.parentElement.style.display =\n _cachedRef.parentElement.style.display;\n }\n }\n });\n });\n });\n });\n }\n\n const onTouchStart = (e: TouchEvent) => {\n const { activeElement } = document as any;\n\n activeElement?.blur?.();\n // eslint-disable-next-line no-multi-assign\n x0 = x = e.touches[0].clientX;\n t0 = Date.now();\n\n cachedRefs = refs.map((ref) => {\n if (!ref.current) {\n return {\n style: {\n transform: \"\",\n transition: \"\",\n },\n };\n }\n\n return {\n style: {\n transform: ref.current.style.transform,\n transition: ref.current.style.transition,\n },\n parentElement: ref.current.parentElement\n ? {\n style: {\n display: ref.current.parentElement.style.display,\n },\n }\n : undefined,\n };\n });\n };\n\n const onTouchMove = (e: TouchEvent) => {\n if (!x0) {\n resetState();\n return;\n }\n\n x = e.touches[0].clientX;\n\n movePaper(x - x0);\n };\n\n const onTouchEnd = () => {\n if (!x0 || !t0 || !x) {\n resetState();\n return;\n }\n\n const t = Date.now();\n const v = (x - x0) / (t - t0);\n const swiped = v > 1 || x / $paper.clientWidth > 0.4;\n\n if (swiped) {\n onSwiped?.();\n }\n\n Promise.resolve()\n .then(() => resetPaper({ swiped }))\n .then(() => resetState());\n };\n\n $edge.addEventListener(\"touchstart\", onTouchStart, { passive: true });\n $edge.addEventListener(\"touchmove\", onTouchMove, { passive: true });\n $edge.addEventListener(\"touchend\", onTouchEnd, { passive: true });\n $edge.addEventListener(\"touchcancel\", onTouchEnd, { passive: true });\n\n return () => {\n $edge.removeEventListener(\"touchstart\", onTouchStart);\n $edge.removeEventListener(\"touchmove\", onTouchMove);\n $edge.removeEventListener(\"touchend\", onTouchEnd);\n $edge.removeEventListener(\"touchcancel\", onTouchEnd);\n };\n }\n : undefined,\n effectDeps: [prevented],\n });\n}\n", "import { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { IconBack, IconClose } from \"../assets\";\nimport { useGlobalOptions } from \"../basicUIPlugin\";\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { useMaxWidth, useNullableActivity } from \"../hooks\";\nimport { compactMap } from \"../utils\";\nimport * as css from \"./AppBar.css\";\nimport * as appScreenCss from \"./AppScreen.css\";\n\ntype AppBarProps = Partial<\n Pick<\n GlobalVars[\"appBar\"],\n | \"borderColor\"\n | \"borderColorTransitionDuration\"\n | \"borderSize\"\n | \"height\"\n | \"heightTransitionDuration\"\n | \"overflow\"\n | \"iconColor\"\n | \"iconColorTransitionDuration\"\n | \"textColor\"\n | \"textColorTransitionDuration\"\n | \"backgroundColor\"\n | \"backgroundColorTransitionDuration\"\n >\n> & {\n title?: React.ReactNode;\n renderLeft?: () => React.ReactNode;\n renderRight?: () => React.ReactNode;\n backButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n }\n | {\n render?: () => React.ReactNode;\n };\n closeButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n }\n | {\n render?: () => React.ReactNode;\n };\n closeButtonLocation?: \"left\" | \"right\";\n border?: boolean;\n modalPresentationStyle?: \"fullScreen\";\n onTopClick?: (e: React.MouseEvent) => void;\n};\nconst AppBar = forwardRef<HTMLDivElement, AppBarProps>(\n (\n {\n title,\n renderLeft,\n renderRight,\n backButton,\n closeButton,\n closeButtonLocation = \"left\",\n border = true,\n modalPresentationStyle,\n iconColor,\n iconColorTransitionDuration,\n textColor,\n textColorTransitionDuration,\n borderColor,\n borderColorTransitionDuration,\n borderSize,\n height,\n heightTransitionDuration,\n overflow,\n backgroundColor,\n backgroundColorTransitionDuration,\n onTopClick,\n },\n ref,\n ) => {\n const actions = useActions();\n const activity = useNullableActivity();\n\n const globalOptions = useGlobalOptions();\n const globalCloseButton = globalOptions.appBar?.closeButton;\n const globalBackButton = globalOptions.appBar?.backButton;\n\n const centerRef = useRef<any>(null);\n\n const { maxWidth } = useMaxWidth({\n outerRef: ref,\n innerRef: centerRef,\n enable: globalOptions.theme === \"cupertino\",\n });\n\n const presentModalFullScreen = modalPresentationStyle === \"fullScreen\";\n\n const onBackClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (backButton && \"onClick\" in backButton && backButton.onClick) {\n backButton.onClick(e);\n }\n\n if (!e.defaultPrevented) {\n actions.pop();\n }\n };\n\n const renderBackButton = () => {\n if (!activity) {\n return null;\n }\n if (activity.isRoot) {\n return null;\n }\n\n if (!backButton && !globalBackButton) {\n return (\n <button\n type=\"button\"\n className={css.backButton}\n onClick={onBackClick}\n >\n <IconBack />\n </button>\n );\n }\n\n if (backButton && \"render\" in backButton && backButton.render) {\n return backButton.render?.();\n }\n if (\n globalBackButton &&\n \"render\" in globalBackButton &&\n globalBackButton.render\n ) {\n return globalBackButton.render?.();\n }\n\n return (\n <button\n type=\"button\"\n className={css.backButton}\n aria-label={\n backButton && \"ariaLabel\" in backButton\n ? backButton.ariaLabel\n : globalBackButton && \"ariaLabel\" in globalBackButton\n ? globalBackButton.ariaLabel\n : undefined\n }\n onClick={onBackClick}\n >\n {(() => {\n if (\n backButton &&\n \"renderIcon\" in backButton &&\n backButton.renderIcon\n ) {\n return backButton.renderIcon();\n }\n if (\n globalBackButton &&\n \"renderIcon\" in globalBackButton &&\n globalBackButton.renderIcon\n ) {\n return globalBackButton.renderIcon();\n }\n\n if (presentModalFullScreen) {\n return <IconClose />;\n }\n\n return <IconBack />;\n })()}\n </button>\n );\n };\n\n const onCloseClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (closeButton && \"onClick\" in closeButton && closeButton.onClick) {\n closeButton.onClick(e);\n }\n\n if (\n !e.defaultPrevented &&\n globalCloseButton &&\n \"onClick\" in globalCloseButton\n ) {\n globalCloseButton.onClick?.(e);\n }\n };\n\n const renderCloseButton = () => {\n const isRoot = !activity || activity.isRoot;\n\n const showCloseButton = (closeButton: AppBarProps[\"closeButton\"]) =>\n (closeButton && \"render\" in closeButton && closeButton.render) ||\n (closeButton &&\n \"renderIcon\" in closeButton &&\n closeButton.renderIcon) ||\n (closeButton && \"onClick\" in closeButton && closeButton.onClick);\n\n if (\n !(\n showCloseButton(closeButton) ||\n showCloseButton(globalOptions.appBar?.closeButton)\n ) ||\n !isRoot\n ) {\n return null;\n }\n if (closeButton && \"render\" in closeButton && closeButton.render) {\n return closeButton.render();\n }\n if (\n globalCloseButton &&\n \"render\" in globalCloseButton &&\n globalCloseButton.render\n ) {\n return globalCloseButton.render();\n }\n\n return (\n <button\n type=\"button\"\n className={css.closeButton}\n aria-label={\n closeButton && \"ariaLabel\" in closeButton\n ? closeButton.ariaLabel\n : globalCloseButton && \"ariaLabel\" in globalCloseButton\n ? globalCloseButton.ariaLabel\n : undefined\n }\n onClick={onCloseClick}\n >\n {(() => {\n if (\n closeButton &&\n \"renderIcon\" in closeButton &&\n closeButton.renderIcon\n ) {\n return closeButton.renderIcon();\n }\n if (\n globalCloseButton &&\n \"renderIcon\" in globalCloseButton &&\n globalCloseButton.renderIcon\n ) {\n return globalCloseButton.renderIcon();\n }\n\n return <IconClose />;\n })()}\n </button>\n );\n };\n\n const hasLeft = !!(\n (closeButtonLocation === \"left\" && closeButton) ||\n backButton ||\n renderLeft\n );\n\n return (\n <div\n ref={ref}\n className={css.appBar({\n border,\n presentModalFullScreen,\n })}\n style={assignInlineVars(\n compactMap({\n [globalVars.appBar.iconColor]: iconColor,\n [globalVars.appBar.iconColorTransitionDuration]:\n iconColorTransitionDuration,\n [globalVars.appBar.textColor]: textColor,\n [globalVars.appBar.textColorTransitionDuration]:\n textColorTransitionDuration,\n [globalVars.appBar.borderColor]: borderColor,\n [globalVars.appBar.borderColorTransitionDuration]:\n borderColorTransitionDuration,\n [globalVars.appBar.borderSize]: borderSize,\n [globalVars.appBar.height]: height,\n [globalVars.appBar.heightTransitionDuration]:\n heightTransitionDuration,\n [globalVars.appBar.overflow]: overflow,\n [globalVars.appBar.backgroundColor]:\n backgroundColor || globalVars.backgroundColor,\n [globalVars.appBar.backgroundColorTransitionDuration]:\n backgroundColorTransitionDuration,\n [appScreenCss.vars.appBar.center.mainWidth]: `${maxWidth}px`,\n }),\n )}\n >\n <div className={css.safeArea} />\n <div className={css.container}>\n <div className={css.left}>\n {closeButtonLocation === \"left\" && renderCloseButton()}\n {renderBackButton()}\n {renderLeft?.()}\n </div>\n <div ref={centerRef} className={css.center}>\n <div\n className={css.centerMain({\n hasLeft,\n })}\n >\n {typeof title === \"string\" ? (\n <div className={css.centerText}>{title}</div>\n ) : (\n title\n )}\n <button\n className={css.centerMainEdge}\n type=\"button\"\n aria-hidden=\"true\"\n onClick={onTopClick}\n />\n </div>\n </div>\n <div className={css.right}>\n {renderRight?.()}\n {closeButtonLocation === \"right\" && renderCloseButton()}\n </div>\n </div>\n </div>\n );\n },\n);\n\nAppBar.displayName = \"AppBar\";\n\nexport default AppBar;\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE9WU0bKaMBCG732K3HRGpsQJenpOizd9k05IIgZDQkPQ03bOuzcEUAIK6vSmjhfisl/+f3ezqx8RFbuXzcsr+LMAIMHkkGpVSQqJEkrH4Ij1EsLS2MBOqBMsRJVyCRNccgIrDinP4TAr2C4+FquO/PYkeZr61VGNxrLkhisZN793SuctuXsTBSFQBSbc/BpFPCS5IGtMSxTYsA1dRgh9CgGyXz+Ju6SWHwO0tU+/IZeUvceD46KgDp64EJDssUxZ3OW1xJ+vNFtnCAzge8bTvYlBhDTLt14tYyC4ZFjDVGPKmTTLp/oVAp0meIkag7VHZ9Ie1XzOgr71tIXjMO6Fu6hXnug6NpnGkjks8lqSNcEj064CNl4SrYSoSwdPLDlwA8/RJsRlatutKrKf6N963L/zsPgC4rg7p8EnWDtNlJeFwFaQVJJ5TY/AQP59Y3iulavWCNVrVxbOvNvrXXZ5dUIK8q/DaHizKzfjNsoN95Qt9IAtdI+t/lDea7IBHf7J7glBgSm1kweNKma3IS4K+6Bhswzg5XBIK43rH246e8j5Deszg1sDKWamoJ1Jv0a5Szpxava2wqv1l3Z33bhbGz9bNkc+ZeKyMAkWxN0YAB/FODnfy6oolDYlWHp1JUpakF22Jd4xiDXD1lTJTB0NAid9MCuDxjhhDyoCn0GO3+/Oyu2f1+SFM+pdAT8mzDN5/D993xTeWf4LpNp3kwwJAAA=';\nimport 'src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+1YS2/bMAy+91foMiAZIkPOo+2c2w677bQfUMi2nKhRJM9SXh323yfJL9mOnaQIdiga5GBLJEV+/Egx8V7802aG5wsE/jwAsKUcrgldrVUA9jgbQSgVjjYJEweYst1Kb4dY0gjuKMRpql8yWOuMlw9/H7zSom8tij3JjPr19kqNprWptRZq5VUmdjyGkWAiu95qW1NbB+ANUh6TY2nlxY9ZMp/N53bzQBmD0RrzFQmAyjCXici2EyBSHFF1MiJ2lSoqeNBx7d2ewdoqjHcZNg/jCQjFEco1jsXhessii0k2YLVA+Pdj/Dp99UEL7FSUseFQCrZTpCufAxa2VSu4CuQYVmQWj3yEvkwA0t/xR4BvUscJkGyAg9qIFKwJAFr246OR8VFGth8RoGaJoXFVSJ0dA6QOvvw0Mc2FvjnwTi7IYke2Fm3kxB/OSUFYpxvN8m5UQRYAyiVRAKVHEGEWjaAPvt6Ko6RvZDwG6F3499byfKggLeHQfv1JOIdEDo38s5SbTy5KO6Sbu8LDuXCJNtRkP3N6VU4rvBYWr3Kw2eLj6JbhRuKEQJwRDG2RQyVSfXAkuFbnanRu2wJ/3/MI3/cd5UT62Ij02lOr8a3Jlnz5RitDg0bu41M+XeA4pnylL0SAvIW+9JoyAdmmOq1GMqYyZVi3aS44aUg92/0bJ0GqM+fMgG7AJZlmCG3lBNxWIrXdHgjMSBmrdQCm3jQPuM7U1HvqYPAc4EjRPWnND960z210f58dd0LrRxFCs9wWNrob86DIUfXk4X7EuxWQ2qnLA7Mz4zWwMVOuieh1JxVNTtocV4TrJCeMHI0PmVrWBQAZSfSeXxAi0cJ2EtBLnv/8VBKFUU6qn2a+t6hkD8VaKFi8LIcS+mZLq+iteqlvOgh7J32n7ozfZgEzuuKQKrKVAYh0SCQ7G2e9ZeG0au6q9TvBW8q0cQM9I1CepDKD73cd6OYnjn7Z9x9ashPpI0JtpEqQLJSLHP5z1+MI6s1Gc35PixTp/7tE7njYpRukw+rIbdQFT5E363aq2Ao20K+pWvW64YToGGFRQKVCq/EPNJ/z5I6b10fIRLRp+J23VkvS+n8KwhhNJZUtjlG+JhntsrFad+wmfTecCTMzacuxwjslmooXrr1OinpOMg9a5R/4yDzf3hEAAA==';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var appBar = _7a468({defaultClassName:'_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4347 _1yk3a451',variantClassNames:{border:{true:'_1yk3a453'},presentModalFullScreen:{true:'_1yk3a454'}},defaultVariants:{},compoundVariants:[]});\nexport var backButton = '_1yk3a458 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi';\nexport var center = 'dhthxq9 dhthxq7 dhthxq8 _1yk3a450';\nexport var centerMain = _7a468({defaultClassName:'_1yk3a45b',variantClassNames:{hasLeft:{true:'_1yk3a45c'}},defaultVariants:{},compoundVariants:[]});\nexport var centerMainEdge = '_1yk3a45d dhthxqi dhthxq4 dhthxq2 dhthxqf';\nexport var centerText = '_1yk3a45e dhthxqc dhthxqd dhthxq0';\nexport var closeButton = '_1yk3a458 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi';\nexport var container = '_1yk3a456 dhthxqa dhthxq7 _1yk3a451';\nexport var left = '_1yk3a457 dhthxq9 dhthxq7 dhthxq1 _1yk3a450';\nexport var right = '_1yk3a45f dhthxq9 dhthxq7 dhthxq1 dhthxq5 _1yk3a450';\nexport var safeArea = '_1yk3a455';", "/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n\nimport { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { useRef } from \"react\";\n\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { useLazy, useNullableActivity, useStyleEffect } from \"../hooks\";\nimport { compactMap } from \"../utils\";\nimport * as css from \"./BottomSheet.css\";\n\nexport type BottomSheetProps = Partial<\n Pick<GlobalVars, \"backgroundColor\" | \"dimBackgroundColor\">\n> &\n Partial<GlobalVars[\"bottomSheet\"]> & {\n onOutsideClick?: React.MouseEventHandler;\n children: React.ReactNode;\n };\nconst BottomSheet: React.FC<BottomSheetProps> = ({\n borderRadius = \"1rem\",\n backgroundColor,\n dimBackgroundColor,\n onOutsideClick,\n children,\n}) => {\n const activity = useNullableActivity();\n const { pop } = useActions();\n\n const containerRef = useRef<HTMLDivElement>(null);\n const paperRef = useRef<HTMLDivElement>(null);\n\n useStyleEffect({\n styleName: \"hide\",\n refs: [containerRef],\n });\n useStyleEffect({\n styleName: \"offset\",\n refs: [paperRef],\n });\n useStyleEffect({\n styleName: \"swipe-back\",\n refs: [paperRef],\n });\n\n const popLock = useRef(false);\n\n const onDimClick: React.MouseEventHandler = (e) => {\n onOutsideClick?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n if (popLock.current) {\n return;\n }\n popLock.current = true;\n\n pop();\n };\n const onPaperClick: React.MouseEventHandler = (e) => {\n e.stopPropagation();\n };\n\n const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;\n const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;\n const transitionState = activity?.transitionState ?? \"enter-done\";\n\n return (\n <div\n className={css.container({\n transitionState: useLazy(transitionState),\n })}\n ref={containerRef}\n style={assignInlineVars(\n compactMap({\n [globalVars.bottomSheet.borderRadius]: borderRadius,\n [globalVars.backgroundColor]: backgroundColor,\n [globalVars.dimBackgroundColor]: dimBackgroundColor,\n [css.vars.zIndexes.dim]: `${zIndexBase}`,\n [css.vars.zIndexes.paper]: `${zIndexPaper}`,\n [css.vars.transitionDuration]:\n transitionState === \"enter-active\" ||\n transitionState === \"exit-active\"\n ? globalVars.computedTransitionDuration\n : \"0ms\",\n }),\n )}\n >\n <div className={css.dim} ref={paperRef} onClick={onDimClick}>\n <div className={css.paper} onClick={onPaperClick}>\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nBottomSheet.displayName = \"BottomSheet\";\n\nexport default BottomSheet;\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/BottomSheet.css.ts.vanilla.css?source=Ll8xaHQzOGgwMyB7CiAgdHJhbnNpdGlvbjogdmFyKC0tXzFodDM4aDAwKTsKfQouXzFodDM4aDA3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fMWh0MzhoMGQgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktZGltLWJhY2tncm91bmQtY29sb3IpOwogIHotaW5kZXg6IHZhcigtLV8xaHQzOGgwMSk7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDA0IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDUgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMTsKfQouXzFodDM4aDA2IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDcgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDBlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJhY2tncm91bmQtY29sb3IpOwogIHdpZHRoOiAxMDAlOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIDAgMDsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtLCBvcGFjaXR5OwogIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgMTAwJSwgMCk7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDA0IC5fMWh0MzhoMGUsIC5fMWh0MzhoMDUgLl8xaHQzOGgwZSB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTsKICBvcGFjaXR5OiAxOwp9Ci5fMWh0MzhoMDYgLl8xaHQzOGgwZSwgLl8xaHQzOGgwNyAuXzFodDM4aDBlIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDEwMCUsIDApOwogIG9wYWNpdHk6IDA7Cn0=';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc',variantClassNames:{transitionState:{'enter-active':'_1ht38h04','enter-done':'_1ht38h05','exit-active':'_1ht38h06','exit-done':'_1ht38h07'}},defaultVariants:{},compoundVariants:[]});\nexport var dim = '_1ht38h0d dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc dhthxqa dhthxq7 _1ht38h03';\nexport var enterActive = '_1ht38h04';\nexport var enterDone = '_1ht38h05';\nexport var exitActive = '_1ht38h06';\nexport var exitDone = '_1ht38h07';\nexport var paper = '_1ht38h0e dhthxqc _1ht38h03';\nexport var vars = {transitionDuration:'var(--_1ht38h00)',zIndexes:{dim:'var(--_1ht38h01)',paper:'var(--_1ht38h02)'}};", "/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n\nimport { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { useRef } from \"react\";\n\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { useLazy, useNullableActivity, useStyleEffect } from \"../hooks\";\nimport { compactMap } from \"../utils\";\nimport * as css from \"./Modal.css\";\n\nexport type ModalProps = Partial<\n Pick<GlobalVars, \"backgroundColor\" | \"dimBackgroundColor\">\n> &\n Partial<GlobalVars[\"modal\"]> & {\n onOutsideClick?: React.MouseEventHandler;\n children: React.ReactNode;\n };\nconst Modal: React.FC<ModalProps> = ({\n backgroundColor,\n dimBackgroundColor,\n borderRadius = \"1rem\",\n onOutsideClick,\n children,\n}) => {\n const activity = useNullableActivity();\n const { pop } = useActions();\n\n const containerRef = useRef<HTMLDivElement>(null);\n const paperRef = useRef<HTMLDivElement>(null);\n\n useStyleEffect({\n styleName: \"hide\",\n refs: [containerRef],\n });\n useStyleEffect({\n styleName: \"offset\",\n refs: [paperRef],\n });\n useStyleEffect({\n styleName: \"swipe-back\",\n refs: [paperRef],\n });\n\n const popLock = useRef(false);\n\n const onDimClick: React.MouseEventHandler = (e) => {\n onOutsideClick?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n if (popLock.current) {\n return;\n }\n popLock.current = true;\n\n pop();\n };\n const onPaperClick: React.MouseEventHandler = (e) => {\n e.stopPropagation();\n };\n\n const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;\n const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;\n const transitionState = activity?.transitionState ?? \"enter-done\";\n\n return (\n <div\n className={css.container({\n transitionState: useLazy(transitionState),\n })}\n ref={containerRef}\n style={assignInlineVars(\n compactMap({\n [globalVars.bottomSheet.borderRadius]: borderRadius,\n [globalVars.backgroundColor]: backgroundColor,\n [globalVars.dimBackgroundColor]: dimBackgroundColor,\n [css.vars.zIndexes.dim]: `${zIndexBase}`,\n [css.vars.zIndexes.paper]: `${zIndexPaper}`,\n [css.vars.transitionDuration]:\n transitionState === \"enter-active\" ||\n transitionState === \"exit-active\"\n ? globalVars.computedTransitionDuration\n : \"0ms\",\n }),\n )}\n >\n <div className={css.dim} ref={paperRef} onClick={onDimClick}>\n <div className={css.paper} onClick={onPaperClick}>\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nModal.displayName = \"Modal\";\n\nexport default Modal;\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/Modal.css.ts.vanilla.css?source=Ll81b3pnOGMzIHsKICB0cmFuc2l0aW9uOiB2YXIoLS1fNW96ZzhjMCk7Cn0KLl81b3pnOGM3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fNW96ZzhjZCB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1kaW0tYmFja2dyb3VuZC1jb2xvcik7CiAgei1pbmRleDogdmFyKC0tXzVvemc4YzEpOwogIG9wYWNpdHk6IDA7Cn0KLl81b3pnOGM0IC5fNW96ZzhjZCwgLl81b3pnOGM1IC5fNW96ZzhjZCB7CiAgb3BhY2l0eTogMTsKfQouXzVvemc4YzYgLl81b3pnOGNkLCAuXzVvemc4YzcgLl81b3pnOGNkIHsKICBvcGFjaXR5OiAwOwp9Ci5fNW96ZzhjZSB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1iYWNrZ3JvdW5kLWNvbG9yKTsKICB3aWR0aDogMTAwJTsKICBtYXJnaW46IDAgMi41cmVtOwogIGJveC1zaGFkb3c6IDBweCAwLjYyNXJlbSAyLjM3NXJlbSByZ2JhKDAsIDAsIDAsIDAuMTUpLCAwcHggLjU2MjVyZW0gMi44NzVyZW0gcmdiYSgwLCAwLCAwLCAwLjEyKSwgMHB4IC4zMTI1cmVtIC45Mzc1cmVtIHJnYmEoMCwgMCwgMCwgMC4xKTsKICBib3JkZXItcmFkaXVzOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJvdHRvbS1zaGVldC1ib3JkZXItcmFkaXVzKTsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtLCBvcGFjaXR5OwogIHRyYW5zZm9ybTogc2NhbGUoMS4xKTsKICBvcGFjaXR5OiAwOwp9Ci5fNW96ZzhjNCAuXzVvemc4Y2UsIC5fNW96ZzhjNSAuXzVvemc4Y2UgewogIHRyYW5zZm9ybTogc2NhbGUoMSk7CiAgb3BhY2l0eTogMTsKfQouXzVvemc4YzYgLl81b3pnOGNlLCAuXzVvemc4YzcgLl81b3pnOGNlIHsKICB0cmFuc2Zvcm06IHNjYWxlKDEuMSk7CiAgb3BhY2l0eTogMDsKfQ==';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc',variantClassNames:{transitionState:{'enter-active':'_5ozg8c4','enter-done':'_5ozg8c5','exit-active':'_5ozg8c6','exit-done':'_5ozg8c7'}},defaultVariants:{},compoundVariants:[]});\nexport var dim = '_5ozg8cd dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc dhthxq9 dhthxq7 dhthxqb _5ozg8c3';\nexport var enterActive = '_5ozg8c4';\nexport var enterDone = '_5ozg8c5';\nexport var exitActive = '_5ozg8c6';\nexport var exitDone = '_5ozg8c7';\nexport var paper = '_5ozg8ce dhthxqc _5ozg8c3';\nexport var vars = {transitionDuration:'var(--_5ozg8c0)',zIndexes:{dim:'var(--_5ozg8c1)',paper:'var(--_5ozg8c2)'}};"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACWI;AAXJ,IAAM,WAED,CAAC,UACJ;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,MAAM;AAAA,IACjB,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA;AACF;AAGF,IAAO,mBAAQ;;;ACfb,IAAAA,sBAAA;AAHF,IAAM,YAED,CAAC,UACJ;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,MAAM;AAAA,IACjB,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACP;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACP;AAAA;AAAA;AACF;AAGF,IAAO,oBAAQ;;;ACrBf,qBAAiC;AACjC,mBAA0C;;;ACD1C,6BAA0C;AAGnC,IAAI,aAAa,EAAC,iBAAgB,qDAAoD,oBAAmB,yDAAwD,oBAAmB,wDAAuD,4BAA2B,iEAAgE,QAAO,EAAC,aAAY,yDAAwD,+BAA8B,6EAA4E,YAAW,wDAAuD,QAAO,mDAAkD,0BAAyB,uEAAsE,WAAU,uDAAsD,WAAU,uDAAsD,6BAA4B,2EAA0E,WAAU,uDAAsD,6BAA4B,2EAA0E,iBAAgB,6DAA4D,mCAAkC,iFAAgF,UAAS,qDAAoD,qBAAoB,mEAAkE,GAAE,aAAY,EAAC,cAAa,8DAA6D,GAAE,OAAM,EAAC,cAAa,8DAA6D,EAAC;AAChmD,IAAI,mBAAe,uBAAAC,iBAAO,EAAC,kBAAiB,aAAY,mBAAkB,EAAC,OAAM,EAAC,SAAQ,aAAY,WAAU,YAAW,GAAE,SAAQ,EAAC,MAAK,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;;;ACLhM,SAAS,QAAW,KAAsC;AAC/D,SAAO,IAAI;AAAA,IACT,CAAC,SACC,SAAS,UAAa,SAAS;AAAA,EACnC;AACF;;;ACLO,SAAS,WACd,KAGA;AACA,SAAO,OAAO,QAAQ,GAAG,EAAE,OAAY,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AAC5D,QAAI,UAAU,QAAQ,UAAU,QAAW;AACzC,UAAI,GAAG,IAAI;AAAA,IACb;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AACP;;;ACZO,SAAS,WACd,IACA,MACA,IACA;AACA,QAAM,WAAW,MAAM;AACrB,OAAG,oBAAoB,MAAM,QAAQ;AACrC,OAAG;AAAA,EACL;AAEA,KAAG,iBAAiB,MAAM,QAAQ;AACpC;;;ACXO,IAAM,eAAe,CAAC,OAAmB;AAC9C,KAAG;AACH,SAAO,iBAAiB,UAAU,EAAE;AAEpC,SAAO,MAAM;AACX,WAAO,oBAAoB,UAAU,EAAE;AAAA,EACzC;AACF;;;ACPO,IAAM,OAAO,MAAM;AAAC;;;ACCpB,SAAS,iBAAiB,IAAgB;AAC/C,wBAAsB,MAAM;AAC1B,0BAAsB,MAAM;AAC1B,SAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;;;APoDQ,IAAAC,sBAAA;AA3BR,IAAM,2BAAuB,4BAAoC;AAAA,EAC/D,OAAO;AACT,CAAC;AAEM,IAAM,wBAAwB,qBAAqB;AAEnD,SAAS,mBAAmB;AACjC,aAAO,yBAAW,oBAAoB;AACxC;AAEO,IAAM,gBAIe,CAAC,YAAY,OAAO;AAAA,EAC9C,KAAK;AAAA,EACL,UAAU,EAAE,OAAO,eAAe,GAAG;AAhDvC;AAiDI,UAAM,WACJ,OAAO,YAAY,aAAa,QAAQ,EAAE,eAAe,CAAC,IAAI;AAEhE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,iCACF,UADE;AAAA,UAEL,QAAO,sDAAgB,UAAhB,YAAyB,SAAS;AAAA,QAC3C;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,QAAQ;AAAA,cACb,aAAa;AAAA,gBACf,QAAO,sDAAgB,UAAhB,YAAyB,SAAS;AAAA,gBACzC,SAAS,MAAM,0BAA0B;AAAA,cAC3C,CAAC;AAAA,cACD,SAAS;AAAA,YACX,CAAC,EAAE,KAAK,GAAG;AAAA,YACX,WAAO;AAAA,cACL,WAAW;AAAA,gBACT,CAAK,WAAW,eAAe,GAAG,SAAS;AAAA,gBAC3C,CAAK,WAAW,kBAAkB,GAAG,SAAS;AAAA,gBAC9C,CAAK,WACF,kBAAkB,GAAG,GAAG,MAAM;AAAA,gBACjC,CAAK,WAAW,0BAA0B,GACxC,MAAM,0BAA0B,YAC5B,GAAG,MAAM,yBACT;AAAA,gBACN,CAAK,WAAW,OAAO,WAAW,IAAG,cAAS,WAAT,mBAAiB;AAAA,gBACtD,CAAK,WAAW,OAAO,UAAU,IAAG,cAAS,WAAT,mBAAiB;AAAA,gBACrD,CAAK,WAAW,OAAO,MAAM,IAAG,cAAS,WAAT,mBAAiB;AAAA,gBACjD,CAAK,WAAW,OAAO,SAAS,IAAG,cAAS,WAAT,mBAAiB;AAAA,gBACpD,CAAK,WAAW,OAAO,SAAS,IAAG,cAAS,WAAT,mBAAiB;AAAA,gBACpD,CAAK,WAAW,OAAO,mBAAmB,IACxC,cAAS,WAAT,mBAAiB;AAAA,gBACnB,CAAK,WAAW,YAAY,YAAY,IACtC,cAAS,gBAAT,mBAAsB;AAAA,gBACxB,CAAK,WAAW,MAAM,YAAY,IAAG,cAAS,UAAT,mBAAgB;AAAA,cACvD,CAAC;AAAA,YACH;AAAA,YAEC,gBAAM,OAAO;AAAA;AAAA,QAChB;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;;;AQ7FA,IAAAC,gBAA2B;AAC3B,IAAAC,kBAAiC;AACjC,IAAAD,gBAA2D;;;ACJ3D,IAAAE,gBAAoC;AAI7B,SAAS,QAAW,OAAU;AACnC,QAAM,CAAC,OAAO,QAAQ,QAAI,wBAAwB,MAAS;AAE3D,+BAAU,MAAM;AACd,qBAAiB,MAAM;AACrB,eAAS,KAAK;AAAA,IAChB,CAAC;AAAA,EACH,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;;;ACdA,IAAAC,gBAAoC;AAI7B,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,CAAC,UAAU,WAAW,QAAI,wBAA6B,MAAS;AAEtE,+BAAU,MAAM;AACd,UAAM,SAAS,YAAY,aAAa,YAAY,SAAS;AAC7D,UAAM,SAAS,SAAS;AAExB,QAAI,CAAC,UAAU,CAAC,UAAU,CAAC,QAAQ;AACjC,aAAO;AAAA,IACT;AAEA,UAAM,UAAU,aAAa,MAAM;AACjC,YAAM,cAAc,OAAO;AAE3B,YAAM,YAAY,OAAO;AACzB,YAAM,cAAc,OAAO;AAC3B,YAAM,aAAa,cAAc,YAAY;AAE7C,YAAM,aAAa,KAAK,IAAI,WAAW,UAAU;AAEjD,kBAAY,cAAc,IAAI,UAAU;AAAA,IAC1C,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,EACF;AACF;;;ACxCA,IAAAC,gBAA4B;AAErB,SAAS,sBAAsB;AACpC,aAAO,2BAAY;AACrB;;;ACJA,IAAAC,gBAA0B;AAK1B,IAAM,cAQF,CAAC;AAEE,SAAS,eAAsC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,WAAW,oBAAoB;AAErC,+BAAU,MAAM;AACd,QAAI,CAAC,UAAU;AACb,aAAO;AAAA,IACT;AACA,QAAI,CAAC,YAAY,SAAS,GAAG;AAC3B,kBAAY,SAAS,IAAI,oBAAI,IAAI;AAAA,IACnC;AAEA,gBAAY,SAAS,EAAE,IAAI,SAAS,QAAQ;AAAA,MAC1C;AAAA,MACA,WAAW,CAAC,CAAC;AAAA,IACf,CAAC;AAED,WAAO,MAAM;AACX,kBAAY,SAAS,EAAE,OAAO,SAAS,MAAM;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,qCAAU,IAAI,MAAM,MAAM,CAAC;AAE/B,+BAAU,MAAM;AACd,QAAI,CAAC,UAAU;AACb,aAAO;AAAA,IACT;AACA,QAAI,CAAC,QAAQ;AACX,aAAO;AAAA,IACT;AAEA,UAAMC,SAAQ,MAAM;AAClB,UAAI,MAAiC,CAAC;AAEtC,eAAS,IAAI,GAAG,KAAK,SAAS,QAAQ,KAAK,GAAG;AAC5C,cAAM,aAAa,YAAY,SAAS,EAAE,IAAI,SAAS,SAAS,CAAC;AAEjE,YAAI,yCAAY,MAAM;AACpB,gBAAM,CAAC,GAAG,KAAK,GAAG,WAAW,IAAI;AAAA,QACnC;AACA,YAAI,yCAAY,WAAW;AACzB;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT,GAAG;AAEH,UAAM,UAAU,OAAO;AAAA,MACrB,yBAAyB,SAAS;AAAA,MAClC,MAAAA;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX;AAAA,IACF;AAAA,EACF,GAAG,CAAC,qCAAU,iBAAiB,GAAI,kCAAc,CAAC,CAAE,CAAC;AACvD;;;AC/EO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAGG;AACD,iBAAe;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,QAAQ,YACJ,CAAC,EAAE,yBAAyB,MAAAC,MAAK,MAAM;AACrC,YAAM,UAAU,MAAM;AACpB,QAAAA,MAAK,QAAQ,CAAC,QAAQ;AACpB,cAAI,CAAC,IAAI,SAAS;AAChB;AAAA,UACF;AACA,gBAAM,OAAO,IAAI;AAEjB,eAAK,MAAM,UAAU;AAAA,QACvB,CAAC;AAAA,MACH;AAEA,cAAQ,yBAAyB;AAAA,QAC/B,KAAK,cAAc;AACjB,UAAAA,MAAK,QAAQ,CAAC,QAAQ;AACpB,gBAAI,CAAC,IAAI,SAAS;AAChB;AAAA,YACF;AACA,kBAAM,OAAO,IAAI;AAEjB,iBAAK,MAAM,UAAU;AAAA,UACvB,CAAC;AAED,iBAAO,MAAM;AACX,oBAAQ;AAAA,UACV;AAAA,QACF;AAAA,QACA,SAAS;AACP,kBAAQ;AAER,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF,IACA;AAAA,EACN,CAAC;AACH;;;AC9CO,IAAM,oBAAoB;AAC1B,IAAM,sBAAsB;AAE5B,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,iBAAe;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,QAAQ,YACJ,CAAC,EAAE,yBAAyB,MAAAC,MAAK,MAAM;AACrC,YAAM,YACJ,UAAU,cACN,gBAAgB,sBAAsB,iBACtC,mBAAmB,oBAAoB;AAE7C,YAAM,UAAU,MAAM;AACpB,yBAAiB,MAAM;AACrB,UAAAA,MAAK,QAAQ,CAAC,QAAQ;AACpB,gBAAI,CAAC,IAAI,SAAS;AAChB;AAAA,YACF;AAEA,kBAAM,MAAM,IAAI;AAEhB,gBAAI,MAAM,YAAY;AAEtB,uBAAW,KAAK,iBAAiB,MAAM;AACrC,kBAAI,MAAM,aAAa;AAAA,YACzB,CAAC;AAAA,UACH,CAAC;AAAA,QACH,CAAC;AAAA,MACH;AAEA,cAAQ,yBAAyB;AAAA,QAC/B,KAAK;AAAA,QACL,KAAK,cAAc;AACjB,UAAAA,MAAK,QAAQ,CAAC,QAAQ;AACpB,gBAAI,CAAC,IAAI,SAAS;AAChB;AAAA,YACF;AAEA,gBAAI,QAAQ,MAAM,aAChB,WAAW;AACb,gBAAI,QAAQ,MAAM,YAAY;AAAA,UAChC,CAAC;AAED,kBAAQ,yBAAyB;AAAA,YAC/B,KAAK;AACH,qBAAO,MAAM;AACX,wBAAQ;AAAA,cACV;AAAA,YACF,KAAK;AAAA,YACL;AACE,qBAAO;AAAA,UACX;AAAA,QACF;AAAA,QACA,KAAK;AAAA,QACL,KAAK,aAAa;AAChB,2BAAiB,MAAM;AACrB,oBAAQ;AAAA,UACV,CAAC;AAED,iBAAO;AAAA,QACT;AAAA,QACA,SAAS;AACP,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF,IACA;AAAA,EACN,CAAC;AACH;;;ACjFA,IAAAC,0BAA0C;AAEnC,IAAI,gBAAY,wBAAAC,iBAAO,EAAC,kBAAiB,mDAAkD,mBAAkB,EAAC,iBAAgB,EAAC,gBAAe,aAAY,cAAa,aAAY,eAAc,aAAY,aAAY,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAE9Q,IAAI,MAAM;AACV,IAAI,WAAO,wBAAAC,iBAAO,EAAC,kBAAiB,6CAA4C,mBAAkB,EAAC,WAAU,EAAC,MAAK,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAGxK,IAAI,aAAa;AACjB,IAAI,WAAW;AACf,IAAI,YAAQ,wBAAAC,iBAAO,EAAC,kBAAiB,yEAAwE,mBAAkB,EAAC,WAAU,EAAC,MAAK,oBAAmB,GAAE,wBAAuB,EAAC,MAAK,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvP,IAAI,OAAO,EAAC,oBAAmB,oBAAmB,UAAS,EAAC,KAAI,oBAAmB,OAAM,oBAAmB,MAAK,oBAAmB,QAAO,mBAAkB,GAAE,QAAO,EAAC,QAAO,EAAC,WAAU,mBAAkB,EAAC,EAAC;;;ACN7M,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,iBAAe;AAAA,IACb,WAAW;AAAA,IACX,MAAM,CAAC,QAAQ;AAAA,IACf,QAAQ,YACJ,CAAC,EAAE,KAAK,MAAM;AACZ,UAAI,UAAU,aAAa;AACzB,eAAO;AAAA,MACT;AAEA,UAAI,CAAC,OAAO,WAAW,CAAC,QAAQ,WAAW,CAAC,SAAS,SAAS;AAC5D,eAAO;AAAA,MACT;AAEA,YAAM,OAAO,OAAO;AACpB,YAAM,QAAQ,QAAQ;AACtB,YAAM,SAAS,SAAS;AAExB,UAAI,KAAoB;AACxB,UAAI,KAAoB;AACxB,UAAI,IAAmB;AAEvB,UAAI,aAUC,CAAC;AAEN,YAAM,aAAa,MAAM;AACvB,aAAK;AACL,aAAK;AACL,YAAI;AACJ,qBAAa,CAAC;AAAA,MAChB;AAEA,UAAI,WAAW;AAEf,eAAS,UAAU,IAAY;AAC7B,YAAI,CAAC,UAAU;AACb,qBAAW;AAEX,gCAAsB,MAAM;AAC1B,kBAAM,IAAI,KAAK,OAAO;AAEtB,iBAAK,MAAM,UAAU,GAAG,IAAI;AAC5B,iBAAK,MAAM,aAAa;AAExB,mBAAO,MAAM,YAAY;AACzB,mBAAO,MAAM,YAAY,eAAe;AACxC,mBAAO,MAAM,aAAa;AAE1B,iBAAK,QAAQ,CAAC,QAAQ;AAjFtC;AAkFkB,kBAAI,CAAC,IAAI,SAAS;AAChB;AAAA,cACF;AAEA,kBAAI,QAAQ,MAAM,YAAY,eAC5B,MAAM,IAAI,KAAK;AAEjB,kBAAI,QAAQ,MAAM,aAAa;AAE/B,oBAAI,SAAI,QAAQ,kBAAZ,mBAA2B,MAAM,aAAY,QAAQ;AACvD,oBAAI,QAAQ,cAAc,MAAM,UAAU;AAAA,cAC5C;AAAA,YACF,CAAC;AAED,uBAAW;AAAA,UACb,CAAC;AAAA,QACH;AAAA,MACF;AAEA,eAAS,WAAW,EAAE,OAAO,GAAuC;AAClE,eAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,gCAAsB,MAAM;AAC1B,iBAAK,MAAM,UAAU,GAAG,SAAS,IAAI;AACrC,iBAAK,MAAM,aAAa,WAAW;AAEnC,mBAAO,MAAM,YAAY;AACzB,mBAAO,MAAM,YAAY,cAAc,SAAS,SAAS;AACzD,mBAAO,MAAM,aAAa,WAAW;AAErC,iBAAK,QAAQ,CAAC,QAAQ;AACpB,kBAAI,CAAC,IAAI,SAAS;AAChB;AAAA,cACF;AAEA,kBAAI,QAAQ,MAAM,aAAa,WAAW;AAC1C,kBAAI,QAAQ,MAAM,YAAY,eAC5B,SAAS,MAAM,IAAI,sBAAsB;AAAA,YAE7C,CAAC;AAED,kBAAM,cAAc,CAAC,GAAG,UAAU;AAElC,oBAAQ;AAER,uBAAW,QAAQ,iBAAiB,MAAM;AA9H1D;AA+HkB,oBAAM,UACJ,YACA,YAAO,kBAAP,mBAAsB,UAAU;AAAA,gBACjB;AAAA,sBAEf,YAAO,kBAAP,mBAAsB,UAAU;AAAA,gBACjB;AAAA;AAGjB,mBAAK,MAAM,UAAU;AACrB,qBAAO,MAAM,YAAY;AACzB,qBAAO,MAAM,YAAY;AAEzB,mBAAK,QAAQ,CAAC,KAAK,MAAM;AACvB,oBAAI,CAAC,IAAI,SAAS;AAChB;AAAA,gBACF;AAEA,sBAAM,aAAa,YAAY,CAAC;AAEhC,oBAAI,SAAS;AACX,sBAAI,QAAQ,MAAM,aAAa;AAC/B,sBAAI,QAAQ,MAAM,YAAY;AAE9B,sBAAI,IAAI,QAAQ,eAAe;AAC7B,wBAAI,QAAQ,cAAc,MAAM,UAAU;AAAA,kBAC5C;AAAA,gBACF,WAAW,YAAY;AACrB,sBAAI,QAAQ,MAAM,aAChB,WAAW,MAAM;AACnB,sBAAI,QAAQ,MAAM,YAAY,WAAW,MAAM;AAE/C,sBACE,IAAI,QAAQ,iBACZ,WAAW,eACX;AACA,wBAAI,QAAQ,cAAc,MAAM,UAC9B,WAAW,cAAc,MAAM;AAAA,kBACnC;AAAA,gBACF;AAAA,cACF,CAAC;AAAA,YACH,CAAC;AAAA,UACH,CAAC;AAAA,QACH,CAAC;AAAA,MACH;AAEA,YAAM,eAAe,CAAC,MAAkB;AA7KlD;AA8KY,cAAM,EAAE,cAAc,IAAI;AAE1B,6DAAe,SAAf;AAEA,aAAK,IAAI,EAAE,QAAQ,CAAC,EAAE;AACtB,aAAK,KAAK,IAAI;AAEd,qBAAa,KAAK,IAAI,CAAC,QAAQ;AAC7B,cAAI,CAAC,IAAI,SAAS;AAChB,mBAAO;AAAA,cACL,OAAO;AAAA,gBACL,WAAW;AAAA,gBACX,YAAY;AAAA,cACd;AAAA,YACF;AAAA,UACF;AAEA,iBAAO;AAAA,YACL,OAAO;AAAA,cACL,WAAW,IAAI,QAAQ,MAAM;AAAA,cAC7B,YAAY,IAAI,QAAQ,MAAM;AAAA,YAChC;AAAA,YACA,eAAe,IAAI,QAAQ,gBACvB;AAAA,cACE,OAAO;AAAA,gBACL,SAAS,IAAI,QAAQ,cAAc,MAAM;AAAA,cAC3C;AAAA,YACF,IACA;AAAA,UACN;AAAA,QACF,CAAC;AAAA,MACH;AAEA,YAAM,cAAc,CAAC,MAAkB;AACrC,YAAI,CAAC,IAAI;AACP,qBAAW;AACX;AAAA,QACF;AAEA,YAAI,EAAE,QAAQ,CAAC,EAAE;AAEjB,kBAAU,IAAI,EAAE;AAAA,MAClB;AAEA,YAAM,aAAa,MAAM;AACvB,YAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG;AACpB,qBAAW;AACX;AAAA,QACF;AAEA,cAAM,IAAI,KAAK,IAAI;AACnB,cAAM,KAAK,IAAI,OAAO,IAAI;AAC1B,cAAM,SAAS,IAAI,KAAK,IAAI,OAAO,cAAc;AAEjD,YAAI,QAAQ;AACV;AAAA,QACF;AAEA,gBAAQ,QAAQ,EACb,KAAK,MAAM,WAAW,EAAE,OAAO,CAAC,CAAC,EACjC,KAAK,MAAM,WAAW,CAAC;AAAA,MAC5B;AAEA,YAAM,iBAAiB,cAAc,cAAc,EAAE,SAAS,KAAK,CAAC;AACpE,YAAM,iBAAiB,aAAa,aAAa,EAAE,SAAS,KAAK,CAAC;AAClE,YAAM,iBAAiB,YAAY,YAAY,EAAE,SAAS,KAAK,CAAC;AAChE,YAAM,iBAAiB,eAAe,YAAY,EAAE,SAAS,KAAK,CAAC;AAEnE,aAAO,MAAM;AACX,cAAM,oBAAoB,cAAc,YAAY;AACpD,cAAM,oBAAoB,aAAa,WAAW;AAClD,cAAM,oBAAoB,YAAY,UAAU;AAChD,cAAM,oBAAoB,eAAe,UAAU;AAAA,MACrD;AAAA,IACF,IACA;AAAA,IACJ,YAAY,CAAC,SAAS;AAAA,EACxB,CAAC;AACH;;;AC5PA,IAAAC,gBAA2B;AAC3B,IAAAC,kBAAiC;AACjC,IAAAD,gBAAmC;;;ACEnC,IAAAE,0BAA0C;AACnC,IAAI,aAAS,wBAAAC,iBAAO,EAAC,kBAAiB,yDAAwD,mBAAkB,EAAC,QAAO,EAAC,MAAK,YAAW,GAAE,wBAAuB,EAAC,MAAK,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7N,IAAI,aAAa;AACjB,IAAI,SAAS;AACb,IAAI,iBAAa,wBAAAA,iBAAO,EAAC,kBAAiB,aAAY,mBAAkB,EAAC,SAAQ,EAAC,MAAK,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5I,IAAI,iBAAiB;AACrB,IAAI,aAAa;AACjB,IAAI,cAAc;AAClB,IAAI,YAAY;AAChB,IAAI,OAAO;AACX,IAAI,QAAQ;AACZ,IAAI,WAAW;;;AD8GV,IAAAC,sBAAA;AArEZ,IAAM,aAAS;AAAA,EACb,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,sBAAsB;AAAA,IACtB,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AAlFP;AAmFI,UAAM,cAAU,0BAAW;AAC3B,UAAM,WAAW,oBAAoB;AAErC,UAAM,gBAAgB,iBAAiB;AACvC,UAAM,qBAAoB,mBAAc,WAAd,mBAAsB;AAChD,UAAM,oBAAmB,mBAAc,WAAd,mBAAsB;AAE/C,UAAM,gBAAY,sBAAY,IAAI;AAElC,UAAM,EAAE,SAAS,IAAI,YAAY;AAAA,MAC/B,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ,cAAc,UAAU;AAAA,IAClC,CAAC;AAED,UAAM,yBAAyB,2BAA2B;AAE1D,UAAM,cAAc,CAAC,MAA2C;AAC9D,UAAID,eAAc,aAAaA,eAAcA,YAAW,SAAS;AAC/D,QAAAA,YAAW,QAAQ,CAAC;AAAA,MACtB;AAEA,UAAI,CAAC,EAAE,kBAAkB;AACvB,gBAAQ,IAAI;AAAA,MACd;AAAA,IACF;AAEA,UAAM,mBAAmB,MAAM;AA9GnC,UAAAE,KAAAC;AA+GM,UAAI,CAAC,UAAU;AACb,eAAO;AAAA,MACT;AACA,UAAI,SAAS,QAAQ;AACnB,eAAO;AAAA,MACT;AAEA,UAAI,CAACH,eAAc,CAAC,kBAAkB;AACpC,eACE;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAe;AAAA,YACf,SAAS;AAAA,YAET,uDAAC,oBAAS;AAAA;AAAA,QACZ;AAAA,MAEJ;AAEA,UAAIA,eAAc,YAAYA,eAAcA,YAAW,QAAQ;AAC7D,gBAAOE,MAAAF,YAAW,WAAX,gBAAAE,IAAA,KAAAF;AAAA,MACT;AACA,UACE,oBACA,YAAY,oBACZ,iBAAiB,QACjB;AACA,gBAAOG,MAAA,iBAAiB,WAAjB,gBAAAA,IAAA;AAAA,MACT;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAe;AAAA,UACf,cACEH,eAAc,eAAeA,cACzBA,YAAW,YACX,oBAAoB,eAAe,mBACnC,iBAAiB,YACjB;AAAA,UAEN,SAAS;AAAA,UAEP,iBAAM;AACN,gBACEA,eACA,gBAAgBA,eAChBA,YAAW,YACX;AACA,qBAAOA,YAAW,WAAW;AAAA,YAC/B;AACA,gBACE,oBACA,gBAAgB,oBAChB,iBAAiB,YACjB;AACA,qBAAO,iBAAiB,WAAW;AAAA,YACrC;AAEA,gBAAI,wBAAwB;AAC1B,qBAAO,6CAAC,qBAAU;AAAA,YACpB;AAEA,mBAAO,6CAAC,oBAAS;AAAA,UACnB,GAAG;AAAA;AAAA,MACL;AAAA,IAEJ;AAEA,UAAM,eAAe,CAAC,MAA2C;AApLrE,UAAAE;AAqLM,UAAID,gBAAe,aAAaA,gBAAeA,aAAY,SAAS;AAClE,QAAAA,aAAY,QAAQ,CAAC;AAAA,MACvB;AAEA,UACE,CAAC,EAAE,oBACH,qBACA,aAAa,mBACb;AACA,SAAAC,MAAA,kBAAkB,YAAlB,gBAAAA,IAAA,wBAA4B;AAAA,MAC9B;AAAA,IACF;AAEA,UAAM,oBAAoB,MAAM;AAlMpC,UAAAA;AAmMM,YAAM,SAAS,CAAC,YAAY,SAAS;AAErC,YAAM,kBAAkB,CAACD,iBACtBA,gBAAe,YAAYA,gBAAeA,aAAY,UACtDA,gBACC,gBAAgBA,gBAChBA,aAAY,cACbA,gBAAe,aAAaA,gBAAeA,aAAY;AAE1D,UACE,EACE,gBAAgBA,YAAW,KAC3B,iBAAgBC,MAAA,cAAc,WAAd,gBAAAA,IAAsB,WAAW,MAEnD,CAAC,QACD;AACA,eAAO;AAAA,MACT;AACA,UAAID,gBAAe,YAAYA,gBAAeA,aAAY,QAAQ;AAChE,eAAOA,aAAY,OAAO;AAAA,MAC5B;AACA,UACE,qBACA,YAAY,qBACZ,kBAAkB,QAClB;AACA,eAAO,kBAAkB,OAAO;AAAA,MAClC;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAe;AAAA,UACf,cACEA,gBAAe,eAAeA,eAC1BA,aAAY,YACZ,qBAAqB,eAAe,oBACpC,kBAAkB,YAClB;AAAA,UAEN,SAAS;AAAA,UAEP,iBAAM;AACN,gBACEA,gBACA,gBAAgBA,gBAChBA,aAAY,YACZ;AACA,qBAAOA,aAAY,WAAW;AAAA,YAChC;AACA,gBACE,qBACA,gBAAgB,qBAChB,kBAAkB,YAClB;AACA,qBAAO,kBAAkB,WAAW;AAAA,YACtC;AAEA,mBAAO,6CAAC,qBAAU;AAAA,UACpB,GAAG;AAAA;AAAA,MACL;AAAA,IAEJ;AAEA,UAAM,UAAU,CAAC,EACd,wBAAwB,UAAUA,gBACnCD,eACA;AAGF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAe,OAAO;AAAA,UACpB;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD,WAAO;AAAA,UACL,WAAW;AAAA,YACT,CAAC,WAAW,OAAO,SAAS,GAAG;AAAA,YAC/B,CAAC,WAAW,OAAO,2BAA2B,GAC5C;AAAA,YACF,CAAC,WAAW,OAAO,SAAS,GAAG;AAAA,YAC/B,CAAC,WAAW,OAAO,2BAA2B,GAC5C;AAAA,YACF,CAAC,WAAW,OAAO,WAAW,GAAG;AAAA,YACjC,CAAC,WAAW,OAAO,6BAA6B,GAC9C;AAAA,YACF,CAAC,WAAW,OAAO,UAAU,GAAG;AAAA,YAChC,CAAC,WAAW,OAAO,MAAM,GAAG;AAAA,YAC5B,CAAC,WAAW,OAAO,wBAAwB,GACzC;AAAA,YACF,CAAC,WAAW,OAAO,QAAQ,GAAG;AAAA,YAC9B,CAAC,WAAW,OAAO,eAAe,GAChC,mBAAmB,WAAW;AAAA,YAChC,CAAC,WAAW,OAAO,iCAAiC,GAClD;AAAA,YACF,CAAc,KAAK,OAAO,OAAO,SAAS,GAAG,GAAG;AAAA,UAClD,CAAC;AAAA,QACH;AAAA,QAEA;AAAA,uDAAC,SAAI,WAAe,UAAU;AAAA,UAC9B,8CAAC,SAAI,WAAe,WAClB;AAAA,0DAAC,SAAI,WAAe,MACjB;AAAA,sCAAwB,UAAU,kBAAkB;AAAA,cACpD,iBAAiB;AAAA,cACjB;AAAA,eACH;AAAA,YACA,6CAAC,SAAI,KAAK,WAAW,WAAe,QAClC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAe,WAAW;AAAA,kBACxB;AAAA,gBACF,CAAC;AAAA,gBAEA;AAAA,yBAAO,UAAU,WAChB,6CAAC,SAAI,WAAe,YAAa,iBAAM,IAEvC;AAAA,kBAEF;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAe;AAAA,sBACf,MAAK;AAAA,sBACL,eAAY;AAAA,sBACZ,SAAS;AAAA;AAAA,kBACX;AAAA;AAAA;AAAA,YACF,GACF;AAAA,YACA,8CAAC,SAAI,WAAe,OACjB;AAAA;AAAA,cACA,wBAAwB,WAAW,kBAAkB;AAAA,eACxD;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AAErB,IAAO,iBAAQ;;;ATnNT,IAAAI,sBAAA;AAnGN,IAAM,cAAU,6BAAgC,IAAW;AAEpD,SAAS,eAAe;AAC7B,aAAO,0BAAW,OAAO;AAC3B;AAaA,IAAM,YAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,QAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAhDN;AAiDE,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,WAAW,oBAAoB;AAErC,QAAM,EAAE,IAAI,QAAI,0BAAW;AAE3B,QAAM,mBAAe,sBAAuB,IAAI;AAChD,QAAM,aAAS,sBAAuB,IAAI;AAC1C,QAAM,eAAW,sBAAuB,IAAI;AAC5C,QAAM,cAAU,sBAAuB,IAAI;AAC3C,QAAM,gBAAY,sBAAuB,IAAI;AAE7C,QAAM,yBAAyB,2BAA2B;AAC1D,QAAM,qBAAqB,oBAAoB;AAE/C,qBAAmB;AAAA,IACjB,MAAM,CAAC,YAAY;AAAA,IACnB,WAAW;AAAA,EACb,CAAC;AACD,uBAAqB;AAAA,IACnB,OAAO,cAAc;AAAA,IACrB,MACE,cAAc,UAAU,cAAc,CAAC,QAAQ,IAAI,CAAC,UAAU,SAAS;AAAA,IACzE,WAAW,CAAC;AAAA,EACd,CAAC;AACD,0BAAwB;AAAA,IACtB,OAAO,cAAc;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AACT,UAAI;AAAA,IACN;AAAA,EACF,CAAC;AAED,QAAM,YAAY,CAAC,CAACA;AAEpB,QAAM,eAAc,0CAAU,WAAV,YAAoB,KAAK;AAC7C,QAAM,YAAY;AAClB,QAAM,cACJ,cAAc,cAAc,UAAU,eAAe,YAAY,IAAI;AACvE,QAAM,aAAa,aAAa;AAChC,QAAM,eACJ,cAAc,UAAU,cAAc,aAAa,IAAI,aAAa;AAEtE,QAAM,mBAAkB,0CAAU,oBAAV,YAA6B;AACrD,QAAM,sBAAsB,QAAQ,eAAe;AAEnD,QAAM,mBAA4C,CAAC,MAAM;AAlG3D,QAAAC,KAAAC;AAmGI,KAAAD,MAAAD,WAAA,gBAAAA,QAAQ,eAAR,gBAAAC,IAAA,KAAAD,SAAqB;AAErB,QAAI,CAAC,EAAE,kBAAkB;AACvB,OAAAE,MAAA,SAAS,YAAT,gBAAAA,IAAkB,OAAO;AAAA,QACvB,KAAK;AAAA,QACL,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACC,WAAO;AAAA,QACL,OAAO;AAAA,UACL,OAAO,EAAE,IAAI,GAAG;AAjH1B,gBAAAD;AAkHY,aAAAA,MAAA,qCAAU,YAAV,gBAAAA,IAAmB,OAAO;AAAA,cACxB;AAAA,cACA,UAAU;AAAA,YACZ;AAAA,UACF;AAAA,QACF;AAAA,QACA,CAAC,QAAQ;AAAA,MACX;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAe,UAAU;AAAA,YACvB,iBACE,oBAAoB,gBAAgB,oBAAoB,cACpD,kBACA;AAAA,UACR,CAAC;AAAA,UACD,WAAO;AAAA,YACL,WAAW;AAAA,cACT,CAAC,WAAW,eAAe,GAAG;AAAA,cAC9B,CAAC,WAAW,kBAAkB,GAAG;AAAA,cACjC,CAAC,WAAW,OAAO,MAAM,GAAGD,WAAA,gBAAAA,QAAQ;AAAA,cACpC,CAAC,WAAW,OAAO,wBAAwB,GACzCA,WAAA,gBAAAA,QAAQ;AAAA,cACV,CAAK,KAAK,SAAS,GAAG,GAAG,GAAG;AAAA,cAC5B,CAAK,KAAK,SAAS,KAAK,GAAG,GAAG;AAAA,cAC9B,CAAK,KAAK,SAAS,IAAI,GAAG,GAAG;AAAA,cAC7B,CAAK,KAAK,SAAS,MAAM,GAAG,GAAG;AAAA,cAC/B,CAAK,KAAK,kBAAkB,GAC1B,oBAAoB,kBACpB,oBAAoB,gBAChB,WAAW,6BACX;AAAA,YACR,CAAC;AAAA,UACH;AAAA,UAEA;AAAA,yDAAC,SAAI,WAAe,KAAK,KAAK,QAAQ;AAAA,YACrCA,WACC;AAAA,cAAC;AAAA,+CACKA,UADL;AAAA,gBAEC,KAAK;AAAA,gBACL;AAAA,gBACA,YAAY;AAAA;AAAA,YACd;AAAA,YAEF;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAe,MAAM;AAAA,kBACnB;AAAA,kBACA;AAAA,gBACF,CAAC;AAAA,gBACD,KAAK;AAAA,gBAEJ;AAAA;AAAA,cAPI,qCAAU;AAAA,YAQjB;AAAA,YACC,EAAC,qCAAU,WACV,cAAc,UAAU,eACxB,CAAC,sBACC,6CAAC,SAAI,WAAe,KAAK,EAAE,UAAU,CAAC,GAAG,KAAK,SAAS;AAAA;AAAA;AAAA,MAE7D;AAAA;AAAA,EACF;AAEJ;AAEA,UAAU,cAAc;AAExB,IAAO,oBAAQ;;;AWnLf,IAAAG,iBAA2B;AAC3B,IAAAC,kBAAiC;AACjC,IAAAD,iBAAuB;;;ACDvB,IAAAE,0BAA0C;AACnC,IAAIC,iBAAY,wBAAAC,iBAAO,EAAC,kBAAiB,mDAAkD,mBAAkB,EAAC,iBAAgB,EAAC,gBAAe,aAAY,cAAa,aAAY,eAAc,aAAY,aAAY,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC9Q,IAAIC,OAAM;AAKV,IAAIC,SAAQ;AACZ,IAAIC,QAAO,EAAC,oBAAmB,oBAAmB,UAAS,EAAC,KAAI,oBAAmB,OAAM,mBAAkB,EAAC;;;ADgF3G,IAAAC,sBAAA;AAxER,IAAM,cAA0C,CAAC;AAAA,EAC/C,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAzBN;AA0BE,QAAM,WAAW,oBAAoB;AACrC,QAAM,EAAE,IAAI,QAAI,2BAAW;AAE3B,QAAM,mBAAe,uBAAuB,IAAI;AAChD,QAAM,eAAW,uBAAuB,IAAI;AAE5C,iBAAe;AAAA,IACb,WAAW;AAAA,IACX,MAAM,CAAC,YAAY;AAAA,EACrB,CAAC;AACD,iBAAe;AAAA,IACb,WAAW;AAAA,IACX,MAAM,CAAC,QAAQ;AAAA,EACjB,CAAC;AACD,iBAAe;AAAA,IACb,WAAW;AAAA,IACX,MAAM,CAAC,QAAQ;AAAA,EACjB,CAAC;AAED,QAAM,cAAU,uBAAO,KAAK;AAE5B,QAAM,aAAsC,CAAC,MAAM;AACjD,qDAAiB;AAEjB,QAAI,EAAE,kBAAkB;AACtB;AAAA,IACF;AAEA,QAAI,QAAQ,SAAS;AACnB;AAAA,IACF;AACA,YAAQ,UAAU;AAElB,QAAI;AAAA,EACN;AACA,QAAM,eAAwC,CAAC,MAAM;AACnD,MAAE,gBAAgB;AAAA,EACpB;AAEA,QAAM,eAAc,0CAAU,WAAV,YAAoB,KAAK,IAAI;AACjD,QAAM,gBAAe,0CAAU,WAAV,YAAoB,KAAK,IAAI;AAClD,QAAM,mBAAkB,0CAAU,oBAAV,YAA6B;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAeC,WAAU;AAAA,QACvB,iBAAiB,QAAQ,eAAe;AAAA,MAC1C,CAAC;AAAA,MACD,KAAK;AAAA,MACL,WAAO;AAAA,QACL,WAAW;AAAA,UACT,CAAC,WAAW,YAAY,YAAY,GAAG;AAAA,UACvC,CAAC,WAAW,eAAe,GAAG;AAAA,UAC9B,CAAC,WAAW,kBAAkB,GAAG;AAAA,UACjC,CAAKC,MAAK,SAAS,GAAG,GAAG,GAAG;AAAA,UAC5B,CAAKA,MAAK,SAAS,KAAK,GAAG,GAAG;AAAA,UAC9B,CAAKA,MAAK,kBAAkB,GAC1B,oBAAoB,kBACpB,oBAAoB,gBAChB,WAAW,6BACX;AAAA,QACR,CAAC;AAAA,MACH;AAAA,MAEA,uDAAC,SAAI,WAAeC,MAAK,KAAK,UAAU,SAAS,YAC/C,uDAAC,SAAI,WAAeC,QAAO,SAAS,cACjC,UACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,YAAY,cAAc;AAE1B,IAAO,sBAAQ;;;AEnGf,IAAAC,iBAA2B;AAC3B,IAAAC,kBAAiC;AACjC,IAAAD,iBAAuB;;;ACDvB,IAAAE,0BAA0C;AACnC,IAAIC,iBAAY,wBAAAC,iBAAO,EAAC,kBAAiB,mDAAkD,mBAAkB,EAAC,iBAAgB,EAAC,gBAAe,YAAW,cAAa,YAAW,eAAc,YAAW,aAAY,WAAU,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1Q,IAAIC,OAAM;AAKV,IAAIC,SAAQ;AACZ,IAAIC,QAAO,EAAC,oBAAmB,mBAAkB,UAAS,EAAC,KAAI,mBAAkB,OAAM,kBAAiB,EAAC;;;ADgFxG,IAAAC,sBAAA;AAxER,IAAM,QAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AACF,MAAM;AAzBN;AA0BE,QAAM,WAAW,oBAAoB;AACrC,QAAM,EAAE,IAAI,QAAI,2BAAW;AAE3B,QAAM,mBAAe,uBAAuB,IAAI;AAChD,QAAM,eAAW,uBAAuB,IAAI;AAE5C,iBAAe;AAAA,IACb,WAAW;AAAA,IACX,MAAM,CAAC,YAAY;AAAA,EACrB,CAAC;AACD,iBAAe;AAAA,IACb,WAAW;AAAA,IACX,MAAM,CAAC,QAAQ;AAAA,EACjB,CAAC;AACD,iBAAe;AAAA,IACb,WAAW;AAAA,IACX,MAAM,CAAC,QAAQ;AAAA,EACjB,CAAC;AAED,QAAM,cAAU,uBAAO,KAAK;AAE5B,QAAM,aAAsC,CAAC,MAAM;AACjD,qDAAiB;AAEjB,QAAI,EAAE,kBAAkB;AACtB;AAAA,IACF;AAEA,QAAI,QAAQ,SAAS;AACnB;AAAA,IACF;AACA,YAAQ,UAAU;AAElB,QAAI;AAAA,EACN;AACA,QAAM,eAAwC,CAAC,MAAM;AACnD,MAAE,gBAAgB;AAAA,EACpB;AAEA,QAAM,eAAc,0CAAU,WAAV,YAAoB,KAAK,IAAI;AACjD,QAAM,gBAAe,0CAAU,WAAV,YAAoB,KAAK,IAAI;AAClD,QAAM,mBAAkB,0CAAU,oBAAV,YAA6B;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAeC,WAAU;AAAA,QACvB,iBAAiB,QAAQ,eAAe;AAAA,MAC1C,CAAC;AAAA,MACD,KAAK;AAAA,MACL,WAAO;AAAA,QACL,WAAW;AAAA,UACT,CAAC,WAAW,YAAY,YAAY,GAAG;AAAA,UACvC,CAAC,WAAW,eAAe,GAAG;AAAA,UAC9B,CAAC,WAAW,kBAAkB,GAAG;AAAA,UACjC,CAAKC,MAAK,SAAS,GAAG,GAAG,GAAG;AAAA,UAC5B,CAAKA,MAAK,SAAS,KAAK,GAAG,GAAG;AAAA,UAC9B,CAAKA,MAAK,kBAAkB,GAC1B,oBAAoB,kBACpB,oBAAoB,gBAChB,WAAW,6BACX;AAAA,QACR,CAAC;AAAA,MACH;AAAA,MAEA,uDAAC,SAAI,WAAeC,MAAK,KAAK,UAAU,SAAS,YAC/C,uDAAC,SAAI,WAAeC,QAAO,SAAS,cACjC,UACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,cAAc;AAEpB,IAAO,gBAAQ;",
6
6
  "names": ["import_jsx_runtime", "_7a468", "import_jsx_runtime", "import_react", "import_dynamic", "import_react", "import_react", "import_react", "import_react", "refs", "refs", "refs", "import_createRuntimeFn", "_7a468", "_7a468", "_7a468", "import_react", "import_dynamic", "import_createRuntimeFn", "_7a468", "import_jsx_runtime", "backButton", "closeButton", "_a", "_b", "import_jsx_runtime", "appBar", "_a", "_b", "import_react", "import_dynamic", "import_createRuntimeFn", "container", "_7a468", "dim", "paper", "vars", "import_jsx_runtime", "container", "vars", "dim", "paper", "import_react", "import_dynamic", "import_createRuntimeFn", "container", "_7a468", "dim", "paper", "vars", "import_jsx_runtime", "container", "vars", "dim", "paper"]
7
7
  }
package/dist/index.mjs CHANGED
@@ -598,8 +598,8 @@ import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
598
598
  var AppBar = forwardRef(
599
599
  ({
600
600
  title,
601
- appendLeft,
602
- appendRight,
601
+ renderLeft,
602
+ renderRight,
603
603
  backButton: backButton2,
604
604
  closeButton: closeButton2,
605
605
  closeButtonLocation = "left",
@@ -728,7 +728,7 @@ var AppBar = forwardRef(
728
728
  }
729
729
  );
730
730
  };
731
- const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || appendLeft);
731
+ const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || renderLeft);
732
732
  return /* @__PURE__ */ jsxs2(
733
733
  "div",
734
734
  {
@@ -760,7 +760,7 @@ var AppBar = forwardRef(
760
760
  /* @__PURE__ */ jsxs2("div", { className: left, children: [
761
761
  closeButtonLocation === "left" && renderCloseButton(),
762
762
  renderBackButton(),
763
- appendLeft == null ? void 0 : appendLeft()
763
+ renderLeft == null ? void 0 : renderLeft()
764
764
  ] }),
765
765
  /* @__PURE__ */ jsx4("div", { ref: centerRef, className: center, children: /* @__PURE__ */ jsxs2(
766
766
  "div",
@@ -783,7 +783,7 @@ var AppBar = forwardRef(
783
783
  }
784
784
  ) }),
785
785
  /* @__PURE__ */ jsxs2("div", { className: right, children: [
786
- appendRight == null ? void 0 : appendRight(),
786
+ renderRight == null ? void 0 : renderRight(),
787
787
  closeButtonLocation === "right" && renderCloseButton()
788
788
  ] })
789
789
  ] })
package/dist/index.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/assets/IconBack.tsx", "../src/assets/IconClose.tsx", "../src/basicUIPlugin.tsx", "../src/basicUIPlugin.css.ts", "../src/utils/compact.ts", "../src/utils/compactMap.ts", "../src/utils/listenOnce.ts", "../src/utils/listenResize.ts", "../src/utils/noop.ts", "../src/utils/requestNextFrame.tsx", "../src/components/AppScreen.tsx", "../src/hooks/useLazy.tsx", "../src/hooks/useMaxWidth.ts", "../src/hooks/useNullableActivity.ts", "../src/hooks/useStyleEffect.ts", "../src/hooks/useStyleEffectHide.ts", "../src/hooks/useStyleEffectOffset.ts", "../src/components/AppScreen.css.ts", "../src/hooks/useStyleEffectSwipeBack.ts", "../src/components/AppBar.tsx", "../src/components/AppBar.css.ts", "../src/components/BottomSheet.tsx", "../src/components/BottomSheet.css.ts", "../src/components/Modal.tsx", "../src/components/Modal.css.ts"],
4
- "sourcesContent": ["const IconBack: React.FC<{\n className?: string;\n}> = (props) => (\n <svg\n className={props.className}\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11.5659 5.56564C11.8783 5.25322 11.8783 4.74669 11.5659 4.43427C11.2535 4.12185 10.7469 4.12185 10.4345 4.43427L3.43451 11.4343C3.12209 11.7467 3.12209 12.2532 3.43451 12.5656L10.4345 19.5656C10.7469 19.8781 11.2535 19.8781 11.5659 19.5656C11.8783 19.2532 11.8783 18.7467 11.5659 18.4343L5.93157 12.8H20.0002C20.442 12.8 20.8002 12.4418 20.8002 12C20.8002 11.5581 20.442 11.2 20.0002 11.2H5.93157L11.5659 5.56564Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nexport default IconBack;\n", "const IconClose: React.FC<{\n className?: string;\n}> = (props) => (\n <svg\n className={props.className}\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nexport default IconClose;\n", "import type { StackflowReactPlugin } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { createContext, useContext } from \"react\";\n\nimport * as css from \"./basicUIPlugin.css\";\nimport type { RecursivePartial } from \"./utils\";\nimport { compact, compactMap, isBrowser } from \"./utils\";\n\ntype BasicUIPluginOptions = RecursivePartial<css.GlobalVars> & {\n theme: \"android\" | \"cupertino\";\n rootClassName?: string;\n appBar?: {\n backButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n }\n | {\n render?: () => React.ReactNode;\n };\n closeButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n }\n | {\n render?: () => React.ReactNode;\n };\n };\n};\n\nconst GlobalOptionsContext = createContext<BasicUIPluginOptions>({\n theme: \"android\",\n});\n\nexport const GlobalOptionsProvider = GlobalOptionsContext.Provider;\n\nexport function useGlobalOptions() {\n return useContext(GlobalOptionsContext);\n}\n\nexport const basicUIPlugin: (\n options:\n | BasicUIPluginOptions\n | ((args: { initialContext?: any }) => BasicUIPluginOptions),\n) => StackflowReactPlugin = (options) => () => ({\n key: \"basic-ui\",\n wrapStack({ stack, initialContext }) {\n const _options =\n typeof options === \"function\" ? options({ initialContext }) : options;\n\n return (\n <GlobalOptionsProvider\n value={{\n ...options,\n theme: initialContext?.theme ?? _options.theme,\n }}\n >\n <div\n className={compact([\n css.stackWrapper({\n theme: initialContext?.theme ?? _options.theme,\n loading: stack.globalTransitionState === \"loading\",\n }),\n _options.rootClassName,\n ]).join(\" \")}\n style={assignInlineVars(\n compactMap({\n [css.globalVars.backgroundColor]: _options.backgroundColor,\n [css.globalVars.dimBackgroundColor]: _options.dimBackgroundColor,\n [css.globalVars\n .transitionDuration]: `${stack.transitionDuration}ms`,\n [css.globalVars.computedTransitionDuration]:\n stack.globalTransitionState === \"loading\"\n ? `${stack.transitionDuration}ms`\n : \"0ms\",\n [css.globalVars.appBar.borderColor]: _options.appBar?.borderColor,\n [css.globalVars.appBar.borderSize]: _options.appBar?.borderSize,\n [css.globalVars.appBar.height]: _options.appBar?.height,\n [css.globalVars.appBar.iconColor]: _options.appBar?.iconColor,\n [css.globalVars.appBar.textColor]: _options.appBar?.textColor,\n [css.globalVars.appBar.minSafeAreaInsetTop]:\n _options.appBar?.minSafeAreaInsetTop,\n [css.globalVars.bottomSheet.borderRadius]:\n _options.bottomSheet?.borderRadius,\n [css.globalVars.modal.borderRadius]: _options.modal?.borderRadius,\n }),\n )}\n >\n {stack.render()}\n </div>\n </GlobalOptionsProvider>\n );\n },\n});\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var android = '_1q6dj2j0';\nexport var cupertino = '_1q6dj2j1';\nexport var globalVars = {backgroundColor:'var(--stackflow-plugin-basic-ui-background-color)',dimBackgroundColor:'var(--stackflow-plugin-basic-ui-dim-background-color)',transitionDuration:'var(--stackflow-plugin-basic-ui-transition-duration)',computedTransitionDuration:'var(--stackflow-plugin-basic-ui-computed-transition-duration)',appBar:{borderColor:'var(--stackflow-plugin-basic-ui-app-bar-border-color)',borderColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration)',borderSize:'var(--stackflow-plugin-basic-ui-app-bar-border-size)',height:'var(--stackflow-plugin-basic-ui-app-bar-height)',heightTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)',minHeight:'var(--stackflow-plugin-basic-ui-app-bar-min-height)',iconColor:'var(--stackflow-plugin-basic-ui-app-bar-icon-color)',iconColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration)',textColor:'var(--stackflow-plugin-basic-ui-app-bar-text-color)',textColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-text-color-transition-duration)',backgroundColor:'var(--stackflow-plugin-basic-ui-app-bar-background-color)',backgroundColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration)',overflow:'var(--stackflow-plugin-basic-ui-app-bar-overflow)',minSafeAreaInsetTop:'var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top)'},bottomSheet:{borderRadius:'var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)'},modal:{borderRadius:'var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)'}};\nexport var stackWrapper = _7a468({defaultClassName:'_1q6dj2j2',variantClassNames:{theme:{android:'_1q6dj2j0',cupertino:'_1q6dj2j1'},loading:{true:'_1q6dj2j5'}},defaultVariants:{},compoundVariants:[]});", "export function compact<T>(arr: Array<T>): Array<NonNullable<T>> {\n return arr.filter(\n (item): item is NonNullable<typeof item> =>\n item !== undefined && item !== null,\n );\n}\n", "export function compactMap<T extends {}>(\n obj: T,\n): {\n [key in keyof T]: NonNullable<T[key]>;\n} {\n return Object.entries(obj).reduce<any>((acc, [key, value]) => {\n if (value !== null && value !== undefined) {\n acc[key] = value;\n }\n\n return acc;\n }, {});\n}\n", "export function listenOnce<T extends HTMLElement>(\n el: T,\n type: keyof HTMLElementEventMap,\n cb: () => void,\n) {\n const listener = () => {\n el.removeEventListener(type, listener);\n cb();\n };\n\n el.addEventListener(type, listener);\n}\n", "export const listenResize = (cb: () => void) => {\n cb();\n window.addEventListener(\"resize\", cb);\n\n return () => {\n window.removeEventListener(\"resize\", cb);\n };\n};\n", "export const noop = () => {};\n", "// https://github.com/MingruiZhang/react-animate-mount/blob/32300c04a4fdfa97724b70aaaf0c0f403d6da247/src/Animate.js#L171-L179\nexport function requestNextFrame(cb: () => void) {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n cb();\n });\n });\n}\n", "/* eslint-disable no-param-reassign */\n\nimport { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { createContext, useContext, useMemo, useRef } from \"react\";\n\nimport { useGlobalOptions } from \"../basicUIPlugin\";\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport {\n useLazy,\n useNullableActivity,\n useStyleEffectHide,\n useStyleEffectOffset,\n useStyleEffectSwipeBack,\n} from \"../hooks\";\nimport type { PropOf } from \"../utils\";\nimport { compactMap } from \"../utils\";\nimport AppBar from \"./AppBar\";\nimport * as css from \"./AppScreen.css\";\n\nexport type AppScreenContext = {\n scroll: (args: { top: number }) => void;\n};\nconst Context = createContext<AppScreenContext>(null as any);\n\nexport function useAppScreen() {\n return useContext(Context);\n}\n\nexport type AppScreenProps = Partial<\n Pick<GlobalVars, \"backgroundColor\" | \"dimBackgroundColor\">\n> & {\n appBar?: Omit<\n PropOf<typeof AppBar>,\n \"theme\" | \"modalPresentationStyle\" | \"ref\" | \"key\"\n >;\n preventSwipeBack?: boolean;\n modalPresentationStyle?: \"fullScreen\";\n children: React.ReactNode;\n};\nconst AppScreen: React.FC<AppScreenProps> = ({\n backgroundColor,\n dimBackgroundColor,\n appBar,\n preventSwipeBack,\n modalPresentationStyle,\n children,\n}) => {\n const globalOptions = useGlobalOptions();\n const activity = useNullableActivity();\n\n const { pop } = useActions();\n\n const appScreenRef = useRef<HTMLDivElement>(null);\n const dimRef = useRef<HTMLDivElement>(null);\n const paperRef = useRef<HTMLDivElement>(null);\n const edgeRef = useRef<HTMLDivElement>(null);\n const appBarRef = useRef<HTMLDivElement>(null);\n\n const presentModalFullScreen = modalPresentationStyle === \"fullScreen\";\n const swipeBackPrevented = preventSwipeBack || presentModalFullScreen;\n\n useStyleEffectHide({\n refs: [appScreenRef],\n hasEffect: true,\n });\n useStyleEffectOffset({\n theme: globalOptions.theme,\n refs:\n globalOptions.theme === \"cupertino\" ? [paperRef] : [paperRef, appBarRef],\n hasEffect: !presentModalFullScreen,\n });\n useStyleEffectSwipeBack({\n theme: globalOptions.theme,\n dimRef,\n edgeRef,\n paperRef,\n hasEffect: true,\n prevented: swipeBackPrevented,\n onSwiped() {\n pop();\n },\n });\n\n const hasAppBar = !!appBar;\n\n const zIndexBase = (activity?.zIndex ?? 0) * 5;\n const zIndexDim = zIndexBase;\n const zIndexPaper =\n zIndexBase + (globalOptions.theme === \"cupertino\" && hasAppBar ? 1 : 3);\n const zIndexEdge = zIndexBase + 4;\n const zIndexAppBar =\n globalOptions.theme === \"cupertino\" ? zIndexBase + 7 : zIndexBase + 4;\n\n const transitionState = activity?.transitionState ?? \"enter-done\";\n const lazyTransitionState = useLazy(transitionState);\n\n const onAppBarTopClick: React.MouseEventHandler = (e) => {\n appBar?.onTopClick?.(e);\n\n if (!e.defaultPrevented) {\n paperRef.current?.scroll({\n top: 0,\n behavior: \"smooth\",\n });\n }\n };\n\n return (\n <Context.Provider\n value={useMemo(\n () => ({\n scroll({ top }) {\n paperRef?.current?.scroll({\n top,\n behavior: \"smooth\",\n });\n },\n }),\n [paperRef],\n )}\n >\n <div\n ref={appScreenRef}\n className={css.appScreen({\n transitionState:\n transitionState === \"enter-done\" || transitionState === \"exit-done\"\n ? transitionState\n : lazyTransitionState,\n })}\n style={assignInlineVars(\n compactMap({\n [globalVars.backgroundColor]: backgroundColor,\n [globalVars.dimBackgroundColor]: dimBackgroundColor,\n [globalVars.appBar.height]: appBar?.height,\n [globalVars.appBar.heightTransitionDuration]:\n appBar?.heightTransitionDuration,\n [css.vars.zIndexes.dim]: `${zIndexDim}`,\n [css.vars.zIndexes.paper]: `${zIndexPaper}`,\n [css.vars.zIndexes.edge]: `${zIndexEdge}`,\n [css.vars.zIndexes.appBar]: `${zIndexAppBar}`,\n [css.vars.transitionDuration]:\n transitionState === \"enter-active\" ||\n transitionState === \"exit-active\"\n ? globalVars.computedTransitionDuration\n : \"0ms\",\n }),\n )}\n >\n <div className={css.dim} ref={dimRef} />\n {appBar && (\n <AppBar\n {...appBar}\n ref={appBarRef}\n modalPresentationStyle={modalPresentationStyle}\n onTopClick={onAppBarTopClick}\n />\n )}\n <div\n key={activity?.id}\n className={css.paper({\n hasAppBar,\n presentModalFullScreen,\n })}\n ref={paperRef}\n >\n {children}\n </div>\n {!activity?.isRoot &&\n globalOptions.theme === \"cupertino\" &&\n !swipeBackPrevented && (\n <div className={css.edge({ hasAppBar })} ref={edgeRef} />\n )}\n </div>\n </Context.Provider>\n );\n};\n\nAppScreen.displayName = \"AppScreen\";\n\nexport default AppScreen;\n", "import { useEffect, useState } from \"react\";\n\nimport { requestNextFrame } from \"../utils\";\n\nexport function useLazy<T>(value: T) {\n const [state, setState] = useState<T | undefined>(undefined);\n\n useEffect(() => {\n requestNextFrame(() => {\n setState(value);\n });\n }, [value]);\n\n return state;\n}\n", "import { useEffect, useState } from \"react\";\n\nimport { listenResize, noop } from \"../utils\";\n\nexport function useMaxWidth({\n outerRef,\n innerRef,\n enable,\n}: {\n outerRef: React.ForwardedRef<any>;\n innerRef: React.MutableRefObject<any>;\n enable: boolean;\n}) {\n const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n\n useEffect(() => {\n const $outer = outerRef && \"current\" in outerRef && outerRef.current;\n const $inner = innerRef.current;\n\n if (!enable || !$outer || !$inner) {\n return noop;\n }\n\n const dispose = listenResize(() => {\n const screenWidth = $outer.clientWidth;\n\n const leftWidth = $inner.offsetLeft;\n const centerWidth = $inner.clientWidth;\n const rightWidth = screenWidth - leftWidth - centerWidth;\n\n const sideMargin = Math.max(leftWidth, rightWidth);\n\n setMaxWidth(screenWidth - 2 * sideMargin);\n });\n\n return dispose;\n }, []);\n\n return {\n maxWidth,\n };\n}\n", "import type { Activity } from \"@stackflow/core\";\nimport { useActivity } from \"@stackflow/react\";\n\nexport function useNullableActivity() {\n return useActivity() as Activity | null;\n}\n", "import type { ActivityTransitionState } from \"@stackflow/core\";\nimport { useEffect } from \"react\";\n\nimport { noop } from \"../utils\";\nimport { useNullableActivity } from \"./useNullableActivity\";\n\nconst connections: {\n [styleName: string]: Map<\n number,\n {\n refs: Array<React.RefObject<any>>;\n hasEffect: boolean;\n }\n >;\n} = {};\n\nexport function useStyleEffect<T extends HTMLElement>({\n styleName,\n refs,\n effect,\n effectDeps,\n}: {\n styleName: string;\n refs: Array<React.RefObject<T>>;\n effect?: (params: {\n activityTransitionState: ActivityTransitionState;\n refs: Array<React.RefObject<T>>;\n }) => (() => void) | void;\n effectDeps?: any[];\n}) {\n const activity = useNullableActivity();\n\n useEffect(() => {\n if (!activity) {\n return noop;\n }\n if (!connections[styleName]) {\n connections[styleName] = new Map();\n }\n\n connections[styleName].set(activity.zIndex, {\n refs,\n hasEffect: !!effect,\n });\n\n return () => {\n connections[styleName].delete(activity.zIndex);\n };\n }, [activity?.id, refs, effect]);\n\n useEffect(() => {\n if (!activity) {\n return noop;\n }\n if (!effect) {\n return noop;\n }\n\n const refs = (() => {\n let arr: Array<React.RefObject<T>> = [];\n\n for (let i = 1; i <= activity.zIndex; i += 1) {\n const connection = connections[styleName].get(activity.zIndex - i);\n\n if (connection?.refs) {\n arr = [...arr, ...connection.refs];\n }\n if (connection?.hasEffect) {\n break;\n }\n }\n\n return arr;\n })();\n\n const cleanup = effect({\n activityTransitionState: activity.transitionState,\n refs,\n });\n\n return () => {\n cleanup?.();\n };\n }, [activity?.transitionState, ...(effectDeps ?? [])]);\n}\n", "/* eslint-disable no-param-reassign */\n\nimport { noop } from \"../utils\";\nimport { useStyleEffect } from \"./useStyleEffect\";\n\nexport function useStyleEffectHide({\n refs,\n hasEffect,\n}: {\n refs: Array<React.RefObject<any>>;\n hasEffect?: boolean;\n}) {\n useStyleEffect({\n styleName: \"hide\",\n refs,\n effect: hasEffect\n ? ({ activityTransitionState, refs }) => {\n const cleanup = () => {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n const $ref = ref.current;\n\n $ref.style.display = \"\";\n });\n };\n\n switch (activityTransitionState) {\n case \"enter-done\": {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n const $ref = ref.current;\n\n $ref.style.display = \"none\";\n });\n\n return () => {\n cleanup();\n };\n }\n default: {\n cleanup();\n\n return noop;\n }\n }\n }\n : undefined,\n });\n}\n", "/* eslint-disable no-param-reassign */\n\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { listenOnce, noop, requestNextFrame } from \"../utils\";\nimport { useStyleEffect } from \"./useStyleEffect\";\n\nexport const OFFSET_PX_ANDROID = 32;\nexport const OFFSET_PX_CUPERTINO = 80;\n\nexport function useStyleEffectOffset({\n refs,\n theme,\n hasEffect,\n}: {\n refs: Array<React.RefObject<any>>;\n theme: \"android\" | \"cupertino\";\n hasEffect?: boolean;\n}) {\n useStyleEffect({\n styleName: \"offset\",\n refs,\n effect: hasEffect\n ? ({ activityTransitionState, refs }) => {\n const transform =\n theme === \"cupertino\"\n ? `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`\n : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;\n\n const cleanup = () => {\n requestNextFrame(() => {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n const $el = ref.current;\n\n $el.style.transform = \"\";\n\n listenOnce($el, \"transitionend\", () => {\n $el.style.transition = \"\";\n });\n });\n });\n };\n\n switch (activityTransitionState) {\n case \"enter-active\":\n case \"enter-done\": {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n ref.current.style.transition =\n globalVars.computedTransitionDuration;\n ref.current.style.transform = transform;\n });\n\n switch (activityTransitionState) {\n case \"enter-done\":\n return () => {\n cleanup();\n };\n case \"enter-active\":\n default:\n return noop;\n }\n }\n case \"exit-active\":\n case \"exit-done\": {\n requestNextFrame(() => {\n cleanup();\n });\n\n return noop;\n }\n default: {\n return noop;\n }\n }\n }\n : undefined,\n });\n}\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE9WU0bKaMBCG732K3HRGpsQJenpOizd9k05IIgZDQkPQ03bOuzcEUAIK6vSmjhfisl/+f3ezqx8RFbuXzcsr+LMAIMHkkGpVSQqJEkrH4Ij1EsLS2MBOqBMsRJVyCRNccgIrDinP4TAr2C4+FquO/PYkeZr61VGNxrLkhisZN793SuctuXsTBSFQBSbc/BpFPCS5IGtMSxTYsA1dRgh9CgGyXz+Ju6SWHwO0tU+/IZeUvceD46KgDp64EJDssUxZ3OW1xJ+vNFtnCAzge8bTvYlBhDTLt14tYyC4ZFjDVGPKmTTLp/oVAp0meIkag7VHZ9Ie1XzOgr71tIXjMO6Fu6hXnug6NpnGkjks8lqSNcEj064CNl4SrYSoSwdPLDlwA8/RJsRlatutKrKf6N963L/zsPgC4rg7p8EnWDtNlJeFwFaQVJJ5TY/AQP59Y3iulavWCNVrVxbOvNvrXXZ5dUIK8q/DaHizKzfjNsoN95Qt9IAtdI+t/lDea7IBHf7J7glBgSm1kweNKma3IS4K+6Bhswzg5XBIK43rH246e8j5Deszg1sDKWamoJ1Jv0a5Szpxava2wqv1l3Z33bhbGz9bNkc+ZeKyMAkWxN0YAB/FODnfy6oolDYlWHp1JUpakF22Jd4xiDXD1lTJTB0NAid9MCuDxjhhDyoCn0GO3+/Oyu2f1+SFM+pdAT8mzDN5/D993xTeWf4LpNp3kwwJAAA=';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var allTransitions = '_1dlf4348';\nexport var appScreen = _7a468({defaultClassName:'dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc',variantClassNames:{transitionState:{'enter-active':'_1dlf4349','enter-done':'_1dlf434a','exit-active':'_1dlf434b','exit-done':'_1dlf434c'}},defaultVariants:{},compoundVariants:[]});\nexport var background = '_1dlf4347';\nexport var dim = '_1dlf434i dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4346 _1dlf4348';\nexport var edge = _7a468({defaultClassName:'_1dlf434m dhthxq4 dhthxq2 dhthxq3 dhthxq1',variantClassNames:{hasAppBar:{true:'_1dlf434n'}},defaultVariants:{},compoundVariants:[]});\nexport var enterActive = '_1dlf4349';\nexport var enterDone = '_1dlf434a';\nexport var exitActive = '_1dlf434b';\nexport var exitDone = '_1dlf434c';\nexport var paper = _7a468({defaultClassName:'_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4348',variantClassNames:{hasAppBar:{true:'_1dlf434k dhthxqg'},presentModalFullScreen:{true:'_1dlf434l'}},defaultVariants:{},compoundVariants:[]});\nexport var vars = {transitionDuration:'var(--_1dlf4340)',zIndexes:{dim:'var(--_1dlf4341)',paper:'var(--_1dlf4342)',edge:'var(--_1dlf4343)',appBar:'var(--_1dlf4344)'},appBar:{center:{mainWidth:'var(--_1dlf4345)'}}};", "/* eslint-disable no-param-reassign */\n\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport * as appScreenCss from \"../components/AppScreen.css\";\nimport { listenOnce, noop } from \"../utils\";\nimport { useStyleEffect } from \"./useStyleEffect\";\nimport { OFFSET_PX_CUPERTINO } from \"./useStyleEffectOffset\";\n\nexport function useStyleEffectSwipeBack({\n theme,\n dimRef,\n edgeRef,\n paperRef,\n hasEffect,\n prevented,\n onSwiped,\n}: {\n theme: \"android\" | \"cupertino\";\n dimRef: React.RefObject<HTMLDivElement>;\n edgeRef: React.RefObject<HTMLDivElement>;\n paperRef: React.RefObject<HTMLDivElement>;\n hasEffect?: boolean;\n prevented?: boolean;\n onSwiped?: () => void;\n}) {\n useStyleEffect({\n styleName: \"swipe-back\",\n refs: [paperRef],\n effect: hasEffect\n ? ({ refs }) => {\n if (theme !== \"cupertino\") {\n return noop;\n }\n\n if (!dimRef.current || !edgeRef.current || !paperRef.current) {\n return noop;\n }\n\n const $dim = dimRef.current;\n const $edge = edgeRef.current;\n const $paper = paperRef.current;\n\n let x0: number | null = null;\n let t0: number | null = null;\n let x: number | null = null;\n\n let cachedRefs: Array<{\n style: {\n transform: string;\n transition: string;\n };\n parentElement?: {\n style: {\n display: string;\n };\n };\n }> = [];\n\n const resetState = () => {\n x0 = null;\n t0 = null;\n x = null;\n cachedRefs = [];\n };\n\n let _rAFLock = false;\n\n function movePaper(dx: number) {\n if (!_rAFLock) {\n _rAFLock = true;\n\n requestAnimationFrame(() => {\n const p = dx / $paper.clientWidth;\n\n $dim.style.opacity = `${1 - p}`;\n $dim.style.transition = \"0s\";\n\n $paper.style.overflowY = \"hidden\";\n $paper.style.transform = `translate3d(${dx}px, 0, 0)`;\n $paper.style.transition = \"0s\";\n\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n ref.current.style.transform = `translate3d(${\n -1 * (1 - p) * OFFSET_PX_CUPERTINO\n }px, 0, 0)`;\n ref.current.style.transition = \"0s\";\n\n if (ref.current.parentElement?.style.display === \"none\") {\n ref.current.parentElement.style.display = \"block\";\n }\n });\n\n _rAFLock = false;\n });\n }\n }\n\n function resetPaper({ swiped }: { swiped: boolean }): Promise<void> {\n return new Promise((resolve) => {\n requestAnimationFrame(() => {\n $dim.style.opacity = `${swiped ? 0 : 1}`;\n $dim.style.transition = globalVars.transitionDuration;\n\n $paper.style.overflowY = \"hidden\";\n $paper.style.transform = `translateX(${swiped ? \"100%\" : \"0\"})`;\n $paper.style.transition = globalVars.transitionDuration;\n\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n ref.current.style.transition = globalVars.transitionDuration;\n ref.current.style.transform = `translate3d(${\n swiped ? \"0\" : `-${OFFSET_PX_CUPERTINO / 16}rem`\n }, 0, 0)`;\n });\n\n const _cachedRefs = [...cachedRefs];\n\n resolve();\n\n listenOnce($paper, \"transitionend\", () => {\n const _swiped =\n swiped ||\n $paper.parentElement?.classList.contains(\n appScreenCss.exitActive,\n ) ||\n $paper.parentElement?.classList.contains(\n appScreenCss.exitDone,\n );\n\n $dim.style.opacity = \"\";\n $paper.style.overflowY = \"\";\n $paper.style.transform = \"\";\n\n refs.forEach((ref, i) => {\n if (!ref.current) {\n return;\n }\n\n const _cachedRef = _cachedRefs[i];\n\n if (_swiped) {\n ref.current.style.transition = \"\";\n ref.current.style.transform = \"\";\n\n if (ref.current.parentElement) {\n ref.current.parentElement.style.display = \"\";\n }\n } else if (_cachedRef) {\n ref.current.style.transition =\n _cachedRef.style.transition;\n ref.current.style.transform = _cachedRef.style.transform;\n\n if (\n ref.current.parentElement &&\n _cachedRef.parentElement\n ) {\n ref.current.parentElement.style.display =\n _cachedRef.parentElement.style.display;\n }\n }\n });\n });\n });\n });\n }\n\n const onTouchStart = (e: TouchEvent) => {\n const { activeElement } = document as any;\n\n activeElement?.blur?.();\n // eslint-disable-next-line no-multi-assign\n x0 = x = e.touches[0].clientX;\n t0 = Date.now();\n\n cachedRefs = refs.map((ref) => {\n if (!ref.current) {\n return {\n style: {\n transform: \"\",\n transition: \"\",\n },\n };\n }\n\n return {\n style: {\n transform: ref.current.style.transform,\n transition: ref.current.style.transition,\n },\n parentElement: ref.current.parentElement\n ? {\n style: {\n display: ref.current.parentElement.style.display,\n },\n }\n : undefined,\n };\n });\n };\n\n const onTouchMove = (e: TouchEvent) => {\n if (!x0) {\n resetState();\n return;\n }\n\n x = e.touches[0].clientX;\n\n movePaper(x - x0);\n };\n\n const onTouchEnd = () => {\n if (!x0 || !t0 || !x) {\n resetState();\n return;\n }\n\n const t = Date.now();\n const v = (x - x0) / (t - t0);\n const swiped = v > 1 || x / $paper.clientWidth > 0.4;\n\n if (swiped) {\n onSwiped?.();\n }\n\n Promise.resolve()\n .then(() => resetPaper({ swiped }))\n .then(() => resetState());\n };\n\n $edge.addEventListener(\"touchstart\", onTouchStart, { passive: true });\n $edge.addEventListener(\"touchmove\", onTouchMove, { passive: true });\n $edge.addEventListener(\"touchend\", onTouchEnd, { passive: true });\n $edge.addEventListener(\"touchcancel\", onTouchEnd, { passive: true });\n\n return () => {\n $edge.removeEventListener(\"touchstart\", onTouchStart);\n $edge.removeEventListener(\"touchmove\", onTouchMove);\n $edge.removeEventListener(\"touchend\", onTouchEnd);\n $edge.removeEventListener(\"touchcancel\", onTouchEnd);\n };\n }\n : undefined,\n effectDeps: [prevented],\n });\n}\n", "import { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { IconBack, IconClose } from \"../assets\";\nimport { useGlobalOptions } from \"../basicUIPlugin\";\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { useMaxWidth, useNullableActivity } from \"../hooks\";\nimport { compactMap } from \"../utils\";\nimport * as css from \"./AppBar.css\";\nimport * as appScreenCss from \"./AppScreen.css\";\n\ntype AppBarProps = Partial<\n Pick<\n GlobalVars[\"appBar\"],\n | \"borderColor\"\n | \"borderColorTransitionDuration\"\n | \"borderSize\"\n | \"height\"\n | \"heightTransitionDuration\"\n | \"overflow\"\n | \"iconColor\"\n | \"iconColorTransitionDuration\"\n | \"textColor\"\n | \"textColorTransitionDuration\"\n | \"backgroundColor\"\n | \"backgroundColorTransitionDuration\"\n >\n> & {\n title?: React.ReactNode;\n appendLeft?: () => React.ReactNode;\n appendRight?: () => React.ReactNode;\n backButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n }\n | {\n render?: () => React.ReactNode;\n };\n closeButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n }\n | {\n render?: () => React.ReactNode;\n };\n closeButtonLocation?: \"left\" | \"right\";\n border?: boolean;\n modalPresentationStyle?: \"fullScreen\";\n onTopClick?: (e: React.MouseEvent) => void;\n};\nconst AppBar = forwardRef<HTMLDivElement, AppBarProps>(\n (\n {\n title,\n appendLeft,\n appendRight,\n backButton,\n closeButton,\n closeButtonLocation = \"left\",\n border = true,\n modalPresentationStyle,\n iconColor,\n iconColorTransitionDuration,\n textColor,\n textColorTransitionDuration,\n borderColor,\n borderColorTransitionDuration,\n borderSize,\n height,\n heightTransitionDuration,\n overflow,\n backgroundColor,\n backgroundColorTransitionDuration,\n onTopClick,\n },\n ref,\n ) => {\n const actions = useActions();\n const activity = useNullableActivity();\n\n const globalOptions = useGlobalOptions();\n const globalCloseButton = globalOptions.appBar?.closeButton;\n const globalBackButton = globalOptions.appBar?.backButton;\n\n const centerRef = useRef<any>(null);\n\n const { maxWidth } = useMaxWidth({\n outerRef: ref,\n innerRef: centerRef,\n enable: globalOptions.theme === \"cupertino\",\n });\n\n const presentModalFullScreen = modalPresentationStyle === \"fullScreen\";\n\n const onBackClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (backButton && \"onClick\" in backButton && backButton.onClick) {\n backButton.onClick(e);\n }\n\n if (!e.defaultPrevented) {\n actions.pop();\n }\n };\n\n const renderBackButton = () => {\n if (!activity) {\n return null;\n }\n if (activity.isRoot) {\n return null;\n }\n\n if (!backButton && !globalBackButton) {\n return (\n <button\n type=\"button\"\n className={css.backButton}\n onClick={onBackClick}\n >\n <IconBack />\n </button>\n );\n }\n\n if (backButton && \"render\" in backButton && backButton.render) {\n return backButton.render?.();\n }\n if (\n globalBackButton &&\n \"render\" in globalBackButton &&\n globalBackButton.render\n ) {\n return globalBackButton.render?.();\n }\n\n return (\n <button\n type=\"button\"\n className={css.backButton}\n aria-label={\n backButton && \"ariaLabel\" in backButton\n ? backButton.ariaLabel\n : globalBackButton && \"ariaLabel\" in globalBackButton\n ? globalBackButton.ariaLabel\n : undefined\n }\n onClick={onBackClick}\n >\n {(() => {\n if (\n backButton &&\n \"renderIcon\" in backButton &&\n backButton.renderIcon\n ) {\n return backButton.renderIcon();\n }\n if (\n globalBackButton &&\n \"renderIcon\" in globalBackButton &&\n globalBackButton.renderIcon\n ) {\n return globalBackButton.renderIcon();\n }\n\n if (presentModalFullScreen) {\n return <IconClose />;\n }\n\n return <IconBack />;\n })()}\n </button>\n );\n };\n\n const onCloseClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (closeButton && \"onClick\" in closeButton && closeButton.onClick) {\n closeButton.onClick(e);\n }\n\n if (\n !e.defaultPrevented &&\n globalCloseButton &&\n \"onClick\" in globalCloseButton\n ) {\n globalCloseButton.onClick?.(e);\n }\n };\n\n const renderCloseButton = () => {\n const isRoot = !activity || activity.isRoot;\n\n const showCloseButton = (closeButton: AppBarProps[\"closeButton\"]) =>\n (closeButton && \"render\" in closeButton && closeButton.render) ||\n (closeButton &&\n \"renderIcon\" in closeButton &&\n closeButton.renderIcon) ||\n (closeButton && \"onClick\" in closeButton && closeButton.onClick);\n\n if (\n !(\n showCloseButton(closeButton) ||\n showCloseButton(globalOptions.appBar?.closeButton)\n ) ||\n !isRoot\n ) {\n return null;\n }\n if (closeButton && \"render\" in closeButton && closeButton.render) {\n return closeButton.render();\n }\n if (\n globalCloseButton &&\n \"render\" in globalCloseButton &&\n globalCloseButton.render\n ) {\n return globalCloseButton.render();\n }\n\n return (\n <button\n type=\"button\"\n className={css.closeButton}\n aria-label={\n closeButton && \"ariaLabel\" in closeButton\n ? closeButton.ariaLabel\n : globalCloseButton && \"ariaLabel\" in globalCloseButton\n ? globalCloseButton.ariaLabel\n : undefined\n }\n onClick={onCloseClick}\n >\n {(() => {\n if (\n closeButton &&\n \"renderIcon\" in closeButton &&\n closeButton.renderIcon\n ) {\n return closeButton.renderIcon();\n }\n if (\n globalCloseButton &&\n \"renderIcon\" in globalCloseButton &&\n globalCloseButton.renderIcon\n ) {\n return globalCloseButton.renderIcon();\n }\n\n return <IconClose />;\n })()}\n </button>\n );\n };\n\n const hasLeft = !!(\n (closeButtonLocation === \"left\" && closeButton) ||\n backButton ||\n appendLeft\n );\n\n return (\n <div\n ref={ref}\n className={css.appBar({\n border,\n presentModalFullScreen,\n })}\n style={assignInlineVars(\n compactMap({\n [globalVars.appBar.iconColor]: iconColor,\n [globalVars.appBar.iconColorTransitionDuration]:\n iconColorTransitionDuration,\n [globalVars.appBar.textColor]: textColor,\n [globalVars.appBar.textColorTransitionDuration]:\n textColorTransitionDuration,\n [globalVars.appBar.borderColor]: borderColor,\n [globalVars.appBar.borderColorTransitionDuration]:\n borderColorTransitionDuration,\n [globalVars.appBar.borderSize]: borderSize,\n [globalVars.appBar.height]: height,\n [globalVars.appBar.heightTransitionDuration]:\n heightTransitionDuration,\n [globalVars.appBar.overflow]: overflow,\n [globalVars.appBar.backgroundColor]:\n backgroundColor || globalVars.backgroundColor,\n [globalVars.appBar.backgroundColorTransitionDuration]:\n backgroundColorTransitionDuration,\n [appScreenCss.vars.appBar.center.mainWidth]: `${maxWidth}px`,\n }),\n )}\n >\n <div className={css.safeArea} />\n <div className={css.container}>\n <div className={css.left}>\n {closeButtonLocation === \"left\" && renderCloseButton()}\n {renderBackButton()}\n {appendLeft?.()}\n </div>\n <div ref={centerRef} className={css.center}>\n <div\n className={css.centerMain({\n hasLeft,\n })}\n >\n {typeof title === \"string\" ? (\n <div className={css.centerText}>{title}</div>\n ) : (\n title\n )}\n <button\n className={css.centerMainEdge}\n type=\"button\"\n aria-hidden=\"true\"\n onClick={onTopClick}\n />\n </div>\n </div>\n <div className={css.right}>\n {appendRight?.()}\n {closeButtonLocation === \"right\" && renderCloseButton()}\n </div>\n </div>\n </div>\n );\n },\n);\n\nAppBar.displayName = \"AppBar\";\n\nexport default AppBar;\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE9WU0bKaMBCG732K3HRGpsQJenpOizd9k05IIgZDQkPQ03bOuzcEUAIK6vSmjhfisl/+f3ezqx8RFbuXzcsr+LMAIMHkkGpVSQqJEkrH4Ij1EsLS2MBOqBMsRJVyCRNccgIrDinP4TAr2C4+FquO/PYkeZr61VGNxrLkhisZN793SuctuXsTBSFQBSbc/BpFPCS5IGtMSxTYsA1dRgh9CgGyXz+Ju6SWHwO0tU+/IZeUvceD46KgDp64EJDssUxZ3OW1xJ+vNFtnCAzge8bTvYlBhDTLt14tYyC4ZFjDVGPKmTTLp/oVAp0meIkag7VHZ9Ie1XzOgr71tIXjMO6Fu6hXnug6NpnGkjks8lqSNcEj064CNl4SrYSoSwdPLDlwA8/RJsRlatutKrKf6N963L/zsPgC4rg7p8EnWDtNlJeFwFaQVJJ5TY/AQP59Y3iulavWCNVrVxbOvNvrXXZ5dUIK8q/DaHizKzfjNsoN95Qt9IAtdI+t/lDea7IBHf7J7glBgSm1kweNKma3IS4K+6Bhswzg5XBIK43rH246e8j5Deszg1sDKWamoJ1Jv0a5Szpxava2wqv1l3Z33bhbGz9bNkc+ZeKyMAkWxN0YAB/FODnfy6oolDYlWHp1JUpakF22Jd4xiDXD1lTJTB0NAid9MCuDxjhhDyoCn0GO3+/Oyu2f1+SFM+pdAT8mzDN5/D993xTeWf4LpNp3kwwJAAA=';\nimport 'src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+1YS2/bMAy+91foMiAZIkPOo+2c2w677bQfUMi2nKhRJM9SXh323yfJL9mOnaQIdiga5GBLJEV+/Egx8V7802aG5wsE/jwAsKUcrgldrVUA9jgbQSgVjjYJEweYst1Kb4dY0gjuKMRpql8yWOuMlw9/H7zSom8tij3JjPr19kqNprWptRZq5VUmdjyGkWAiu95qW1NbB+ANUh6TY2nlxY9ZMp/N53bzQBmD0RrzFQmAyjCXici2EyBSHFF1MiJ2lSoqeNBx7d2ewdoqjHcZNg/jCQjFEco1jsXhessii0k2YLVA+Pdj/Dp99UEL7FSUseFQCrZTpCufAxa2VSu4CuQYVmQWj3yEvkwA0t/xR4BvUscJkGyAg9qIFKwJAFr246OR8VFGth8RoGaJoXFVSJ0dA6QOvvw0Mc2FvjnwTi7IYke2Fm3kxB/OSUFYpxvN8m5UQRYAyiVRAKVHEGEWjaAPvt6Ko6RvZDwG6F3499byfKggLeHQfv1JOIdEDo38s5SbTy5KO6Sbu8LDuXCJNtRkP3N6VU4rvBYWr3Kw2eLj6JbhRuKEQJwRDG2RQyVSfXAkuFbnanRu2wJ/3/MI3/cd5UT62Ij02lOr8a3Jlnz5RitDg0bu41M+XeA4pnylL0SAvIW+9JoyAdmmOq1GMqYyZVi3aS44aUg92/0bJ0GqM+fMgG7AJZlmCG3lBNxWIrXdHgjMSBmrdQCm3jQPuM7U1HvqYPAc4EjRPWnND960z210f58dd0LrRxFCs9wWNrob86DIUfXk4X7EuxWQ2qnLA7Mz4zWwMVOuieh1JxVNTtocV4TrJCeMHI0PmVrWBQAZSfSeXxAi0cJ2EtBLnv/8VBKFUU6qn2a+t6hkD8VaKFi8LIcS+mZLq+iteqlvOgh7J32n7ozfZgEzuuKQKrKVAYh0SCQ7G2e9ZeG0au6q9TvBW8q0cQM9I1CepDKD73cd6OYnjn7Z9x9ashPpI0JtpEqQLJSLHP5z1+MI6s1Gc35PixTp/7tE7njYpRukw+rIbdQFT5E363aq2Ao20K+pWvW64YToGGFRQKVCq/EPNJ/z5I6b10fIRLRp+J23VkvS+n8KwhhNJZUtjlG+JhntsrFad+wmfTecCTMzacuxwjslmooXrr1OinpOMg9a5R/4yDzf3hEAAA==';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var appBar = _7a468({defaultClassName:'_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4347 _1yk3a451',variantClassNames:{border:{true:'_1yk3a453'},presentModalFullScreen:{true:'_1yk3a454'}},defaultVariants:{},compoundVariants:[]});\nexport var backButton = '_1yk3a458 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi';\nexport var center = 'dhthxq9 dhthxq7 dhthxq8 _1yk3a450';\nexport var centerMain = _7a468({defaultClassName:'_1yk3a45b',variantClassNames:{hasLeft:{true:'_1yk3a45c'}},defaultVariants:{},compoundVariants:[]});\nexport var centerMainEdge = '_1yk3a45d dhthxqi dhthxq4 dhthxq2 dhthxqf';\nexport var centerText = '_1yk3a45e dhthxqc dhthxqd dhthxq0';\nexport var closeButton = '_1yk3a458 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi';\nexport var container = '_1yk3a456 dhthxqa dhthxq7 _1yk3a451';\nexport var left = '_1yk3a457 dhthxq9 dhthxq7 dhthxq1 _1yk3a450';\nexport var right = '_1yk3a45f dhthxq9 dhthxq7 dhthxq1 dhthxq5 _1yk3a450';\nexport var safeArea = '_1yk3a455';", "/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n\nimport { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { useRef } from \"react\";\n\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { useLazy, useNullableActivity, useStyleEffect } from \"../hooks\";\nimport { compactMap } from \"../utils\";\nimport * as css from \"./BottomSheet.css\";\n\nexport type BottomSheetProps = Partial<\n Pick<GlobalVars, \"backgroundColor\" | \"dimBackgroundColor\">\n> &\n Partial<GlobalVars[\"bottomSheet\"]> & {\n onOutsideClick?: React.MouseEventHandler;\n children: React.ReactNode;\n };\nconst BottomSheet: React.FC<BottomSheetProps> = ({\n borderRadius = \"1rem\",\n backgroundColor,\n dimBackgroundColor,\n onOutsideClick,\n children,\n}) => {\n const activity = useNullableActivity();\n const { pop } = useActions();\n\n const containerRef = useRef<HTMLDivElement>(null);\n const paperRef = useRef<HTMLDivElement>(null);\n\n useStyleEffect({\n styleName: \"hide\",\n refs: [containerRef],\n });\n useStyleEffect({\n styleName: \"offset\",\n refs: [paperRef],\n });\n useStyleEffect({\n styleName: \"swipe-back\",\n refs: [paperRef],\n });\n\n const popLock = useRef(false);\n\n const onDimClick: React.MouseEventHandler = (e) => {\n onOutsideClick?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n if (popLock.current) {\n return;\n }\n popLock.current = true;\n\n pop();\n };\n const onPaperClick: React.MouseEventHandler = (e) => {\n e.stopPropagation();\n };\n\n const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;\n const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;\n const transitionState = activity?.transitionState ?? \"enter-done\";\n\n return (\n <div\n className={css.container({\n transitionState: useLazy(transitionState),\n })}\n ref={containerRef}\n style={assignInlineVars(\n compactMap({\n [globalVars.bottomSheet.borderRadius]: borderRadius,\n [globalVars.backgroundColor]: backgroundColor,\n [globalVars.dimBackgroundColor]: dimBackgroundColor,\n [css.vars.zIndexes.dim]: `${zIndexBase}`,\n [css.vars.zIndexes.paper]: `${zIndexPaper}`,\n [css.vars.transitionDuration]:\n transitionState === \"enter-active\" ||\n transitionState === \"exit-active\"\n ? globalVars.computedTransitionDuration\n : \"0ms\",\n }),\n )}\n >\n <div className={css.dim} ref={paperRef} onClick={onDimClick}>\n <div className={css.paper} onClick={onPaperClick}>\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nBottomSheet.displayName = \"BottomSheet\";\n\nexport default BottomSheet;\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/BottomSheet.css.ts.vanilla.css?source=Ll8xaHQzOGgwMyB7CiAgdHJhbnNpdGlvbjogdmFyKC0tXzFodDM4aDAwKTsKfQouXzFodDM4aDA3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fMWh0MzhoMGQgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktZGltLWJhY2tncm91bmQtY29sb3IpOwogIHotaW5kZXg6IHZhcigtLV8xaHQzOGgwMSk7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDA0IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDUgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMTsKfQouXzFodDM4aDA2IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDcgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDBlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJhY2tncm91bmQtY29sb3IpOwogIHdpZHRoOiAxMDAlOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIDAgMDsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtLCBvcGFjaXR5OwogIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgMTAwJSwgMCk7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDA0IC5fMWh0MzhoMGUsIC5fMWh0MzhoMDUgLl8xaHQzOGgwZSB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTsKICBvcGFjaXR5OiAxOwp9Ci5fMWh0MzhoMDYgLl8xaHQzOGgwZSwgLl8xaHQzOGgwNyAuXzFodDM4aDBlIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDEwMCUsIDApOwogIG9wYWNpdHk6IDA7Cn0=';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc',variantClassNames:{transitionState:{'enter-active':'_1ht38h04','enter-done':'_1ht38h05','exit-active':'_1ht38h06','exit-done':'_1ht38h07'}},defaultVariants:{},compoundVariants:[]});\nexport var dim = '_1ht38h0d dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc dhthxqa dhthxq7 _1ht38h03';\nexport var enterActive = '_1ht38h04';\nexport var enterDone = '_1ht38h05';\nexport var exitActive = '_1ht38h06';\nexport var exitDone = '_1ht38h07';\nexport var paper = '_1ht38h0e dhthxqc _1ht38h03';\nexport var vars = {transitionDuration:'var(--_1ht38h00)',zIndexes:{dim:'var(--_1ht38h01)',paper:'var(--_1ht38h02)'}};", "/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n\nimport { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { useRef } from \"react\";\n\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { useLazy, useNullableActivity, useStyleEffect } from \"../hooks\";\nimport { compactMap } from \"../utils\";\nimport * as css from \"./Modal.css\";\n\nexport type ModalProps = Partial<\n Pick<GlobalVars, \"backgroundColor\" | \"dimBackgroundColor\">\n> &\n Partial<GlobalVars[\"modal\"]> & {\n onOutsideClick?: React.MouseEventHandler;\n children: React.ReactNode;\n };\nconst Modal: React.FC<ModalProps> = ({\n backgroundColor,\n dimBackgroundColor,\n borderRadius = \"1rem\",\n onOutsideClick,\n children,\n}) => {\n const activity = useNullableActivity();\n const { pop } = useActions();\n\n const containerRef = useRef<HTMLDivElement>(null);\n const paperRef = useRef<HTMLDivElement>(null);\n\n useStyleEffect({\n styleName: \"hide\",\n refs: [containerRef],\n });\n useStyleEffect({\n styleName: \"offset\",\n refs: [paperRef],\n });\n useStyleEffect({\n styleName: \"swipe-back\",\n refs: [paperRef],\n });\n\n const popLock = useRef(false);\n\n const onDimClick: React.MouseEventHandler = (e) => {\n onOutsideClick?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n if (popLock.current) {\n return;\n }\n popLock.current = true;\n\n pop();\n };\n const onPaperClick: React.MouseEventHandler = (e) => {\n e.stopPropagation();\n };\n\n const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;\n const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;\n const transitionState = activity?.transitionState ?? \"enter-done\";\n\n return (\n <div\n className={css.container({\n transitionState: useLazy(transitionState),\n })}\n ref={containerRef}\n style={assignInlineVars(\n compactMap({\n [globalVars.bottomSheet.borderRadius]: borderRadius,\n [globalVars.backgroundColor]: backgroundColor,\n [globalVars.dimBackgroundColor]: dimBackgroundColor,\n [css.vars.zIndexes.dim]: `${zIndexBase}`,\n [css.vars.zIndexes.paper]: `${zIndexPaper}`,\n [css.vars.transitionDuration]:\n transitionState === \"enter-active\" ||\n transitionState === \"exit-active\"\n ? globalVars.computedTransitionDuration\n : \"0ms\",\n }),\n )}\n >\n <div className={css.dim} ref={paperRef} onClick={onDimClick}>\n <div className={css.paper} onClick={onPaperClick}>\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nModal.displayName = \"Modal\";\n\nexport default Modal;\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/Modal.css.ts.vanilla.css?source=Ll81b3pnOGMzIHsKICB0cmFuc2l0aW9uOiB2YXIoLS1fNW96ZzhjMCk7Cn0KLl81b3pnOGM3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fNW96ZzhjZCB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1kaW0tYmFja2dyb3VuZC1jb2xvcik7CiAgei1pbmRleDogdmFyKC0tXzVvemc4YzEpOwogIG9wYWNpdHk6IDA7Cn0KLl81b3pnOGM0IC5fNW96ZzhjZCwgLl81b3pnOGM1IC5fNW96ZzhjZCB7CiAgb3BhY2l0eTogMTsKfQouXzVvemc4YzYgLl81b3pnOGNkLCAuXzVvemc4YzcgLl81b3pnOGNkIHsKICBvcGFjaXR5OiAwOwp9Ci5fNW96ZzhjZSB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1iYWNrZ3JvdW5kLWNvbG9yKTsKICB3aWR0aDogMTAwJTsKICBtYXJnaW46IDAgMi41cmVtOwogIGJveC1zaGFkb3c6IDBweCAwLjYyNXJlbSAyLjM3NXJlbSByZ2JhKDAsIDAsIDAsIDAuMTUpLCAwcHggLjU2MjVyZW0gMi44NzVyZW0gcmdiYSgwLCAwLCAwLCAwLjEyKSwgMHB4IC4zMTI1cmVtIC45Mzc1cmVtIHJnYmEoMCwgMCwgMCwgMC4xKTsKICBib3JkZXItcmFkaXVzOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJvdHRvbS1zaGVldC1ib3JkZXItcmFkaXVzKTsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtLCBvcGFjaXR5OwogIHRyYW5zZm9ybTogc2NhbGUoMS4xKTsKICBvcGFjaXR5OiAwOwp9Ci5fNW96ZzhjNCAuXzVvemc4Y2UsIC5fNW96ZzhjNSAuXzVvemc4Y2UgewogIHRyYW5zZm9ybTogc2NhbGUoMSk7CiAgb3BhY2l0eTogMTsKfQouXzVvemc4YzYgLl81b3pnOGNlLCAuXzVvemc4YzcgLl81b3pnOGNlIHsKICB0cmFuc2Zvcm06IHNjYWxlKDEuMSk7CiAgb3BhY2l0eTogMDsKfQ==';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc',variantClassNames:{transitionState:{'enter-active':'_5ozg8c4','enter-done':'_5ozg8c5','exit-active':'_5ozg8c6','exit-done':'_5ozg8c7'}},defaultVariants:{},compoundVariants:[]});\nexport var dim = '_5ozg8cd dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc dhthxq9 dhthxq7 dhthxqb _5ozg8c3';\nexport var enterActive = '_5ozg8c4';\nexport var enterDone = '_5ozg8c5';\nexport var exitActive = '_5ozg8c6';\nexport var exitDone = '_5ozg8c7';\nexport var paper = '_5ozg8ce dhthxqc _5ozg8c3';\nexport var vars = {transitionDuration:'var(--_5ozg8c0)',zIndexes:{dim:'var(--_5ozg8c1)',paper:'var(--_5ozg8c2)'}};"],
4
+ "sourcesContent": ["const IconBack: React.FC<{\n className?: string;\n}> = (props) => (\n <svg\n className={props.className}\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M11.5659 5.56564C11.8783 5.25322 11.8783 4.74669 11.5659 4.43427C11.2535 4.12185 10.7469 4.12185 10.4345 4.43427L3.43451 11.4343C3.12209 11.7467 3.12209 12.2532 3.43451 12.5656L10.4345 19.5656C10.7469 19.8781 11.2535 19.8781 11.5659 19.5656C11.8783 19.2532 11.8783 18.7467 11.5659 18.4343L5.93157 12.8H20.0002C20.442 12.8 20.8002 12.4418 20.8002 12C20.8002 11.5581 20.442 11.2 20.0002 11.2H5.93157L11.5659 5.56564Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nexport default IconBack;\n", "const IconClose: React.FC<{\n className?: string;\n}> = (props) => (\n <svg\n className={props.className}\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nexport default IconClose;\n", "import type { StackflowReactPlugin } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { createContext, useContext } from \"react\";\n\nimport * as css from \"./basicUIPlugin.css\";\nimport type { RecursivePartial } from \"./utils\";\nimport { compact, compactMap, isBrowser } from \"./utils\";\n\ntype BasicUIPluginOptions = RecursivePartial<css.GlobalVars> & {\n theme: \"android\" | \"cupertino\";\n rootClassName?: string;\n appBar?: {\n backButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n }\n | {\n render?: () => React.ReactNode;\n };\n closeButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n }\n | {\n render?: () => React.ReactNode;\n };\n };\n};\n\nconst GlobalOptionsContext = createContext<BasicUIPluginOptions>({\n theme: \"android\",\n});\n\nexport const GlobalOptionsProvider = GlobalOptionsContext.Provider;\n\nexport function useGlobalOptions() {\n return useContext(GlobalOptionsContext);\n}\n\nexport const basicUIPlugin: (\n options:\n | BasicUIPluginOptions\n | ((args: { initialContext?: any }) => BasicUIPluginOptions),\n) => StackflowReactPlugin = (options) => () => ({\n key: \"basic-ui\",\n wrapStack({ stack, initialContext }) {\n const _options =\n typeof options === \"function\" ? options({ initialContext }) : options;\n\n return (\n <GlobalOptionsProvider\n value={{\n ...options,\n theme: initialContext?.theme ?? _options.theme,\n }}\n >\n <div\n className={compact([\n css.stackWrapper({\n theme: initialContext?.theme ?? _options.theme,\n loading: stack.globalTransitionState === \"loading\",\n }),\n _options.rootClassName,\n ]).join(\" \")}\n style={assignInlineVars(\n compactMap({\n [css.globalVars.backgroundColor]: _options.backgroundColor,\n [css.globalVars.dimBackgroundColor]: _options.dimBackgroundColor,\n [css.globalVars\n .transitionDuration]: `${stack.transitionDuration}ms`,\n [css.globalVars.computedTransitionDuration]:\n stack.globalTransitionState === \"loading\"\n ? `${stack.transitionDuration}ms`\n : \"0ms\",\n [css.globalVars.appBar.borderColor]: _options.appBar?.borderColor,\n [css.globalVars.appBar.borderSize]: _options.appBar?.borderSize,\n [css.globalVars.appBar.height]: _options.appBar?.height,\n [css.globalVars.appBar.iconColor]: _options.appBar?.iconColor,\n [css.globalVars.appBar.textColor]: _options.appBar?.textColor,\n [css.globalVars.appBar.minSafeAreaInsetTop]:\n _options.appBar?.minSafeAreaInsetTop,\n [css.globalVars.bottomSheet.borderRadius]:\n _options.bottomSheet?.borderRadius,\n [css.globalVars.modal.borderRadius]: _options.modal?.borderRadius,\n }),\n )}\n >\n {stack.render()}\n </div>\n </GlobalOptionsProvider>\n );\n },\n});\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var android = '_1q6dj2j0';\nexport var cupertino = '_1q6dj2j1';\nexport var globalVars = {backgroundColor:'var(--stackflow-plugin-basic-ui-background-color)',dimBackgroundColor:'var(--stackflow-plugin-basic-ui-dim-background-color)',transitionDuration:'var(--stackflow-plugin-basic-ui-transition-duration)',computedTransitionDuration:'var(--stackflow-plugin-basic-ui-computed-transition-duration)',appBar:{borderColor:'var(--stackflow-plugin-basic-ui-app-bar-border-color)',borderColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration)',borderSize:'var(--stackflow-plugin-basic-ui-app-bar-border-size)',height:'var(--stackflow-plugin-basic-ui-app-bar-height)',heightTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)',minHeight:'var(--stackflow-plugin-basic-ui-app-bar-min-height)',iconColor:'var(--stackflow-plugin-basic-ui-app-bar-icon-color)',iconColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration)',textColor:'var(--stackflow-plugin-basic-ui-app-bar-text-color)',textColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-text-color-transition-duration)',backgroundColor:'var(--stackflow-plugin-basic-ui-app-bar-background-color)',backgroundColorTransitionDuration:'var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration)',overflow:'var(--stackflow-plugin-basic-ui-app-bar-overflow)',minSafeAreaInsetTop:'var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top)'},bottomSheet:{borderRadius:'var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)'},modal:{borderRadius:'var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)'}};\nexport var stackWrapper = _7a468({defaultClassName:'_1q6dj2j2',variantClassNames:{theme:{android:'_1q6dj2j0',cupertino:'_1q6dj2j1'},loading:{true:'_1q6dj2j5'}},defaultVariants:{},compoundVariants:[]});", "export function compact<T>(arr: Array<T>): Array<NonNullable<T>> {\n return arr.filter(\n (item): item is NonNullable<typeof item> =>\n item !== undefined && item !== null,\n );\n}\n", "export function compactMap<T extends {}>(\n obj: T,\n): {\n [key in keyof T]: NonNullable<T[key]>;\n} {\n return Object.entries(obj).reduce<any>((acc, [key, value]) => {\n if (value !== null && value !== undefined) {\n acc[key] = value;\n }\n\n return acc;\n }, {});\n}\n", "export function listenOnce<T extends HTMLElement>(\n el: T,\n type: keyof HTMLElementEventMap,\n cb: () => void,\n) {\n const listener = () => {\n el.removeEventListener(type, listener);\n cb();\n };\n\n el.addEventListener(type, listener);\n}\n", "export const listenResize = (cb: () => void) => {\n cb();\n window.addEventListener(\"resize\", cb);\n\n return () => {\n window.removeEventListener(\"resize\", cb);\n };\n};\n", "export const noop = () => {};\n", "// https://github.com/MingruiZhang/react-animate-mount/blob/32300c04a4fdfa97724b70aaaf0c0f403d6da247/src/Animate.js#L171-L179\nexport function requestNextFrame(cb: () => void) {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n cb();\n });\n });\n}\n", "/* eslint-disable no-param-reassign */\n\nimport { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { createContext, useContext, useMemo, useRef } from \"react\";\n\nimport { useGlobalOptions } from \"../basicUIPlugin\";\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport {\n useLazy,\n useNullableActivity,\n useStyleEffectHide,\n useStyleEffectOffset,\n useStyleEffectSwipeBack,\n} from \"../hooks\";\nimport type { PropOf } from \"../utils\";\nimport { compactMap } from \"../utils\";\nimport AppBar from \"./AppBar\";\nimport * as css from \"./AppScreen.css\";\n\nexport type AppScreenContext = {\n scroll: (args: { top: number }) => void;\n};\nconst Context = createContext<AppScreenContext>(null as any);\n\nexport function useAppScreen() {\n return useContext(Context);\n}\n\nexport type AppScreenProps = Partial<\n Pick<GlobalVars, \"backgroundColor\" | \"dimBackgroundColor\">\n> & {\n appBar?: Omit<\n PropOf<typeof AppBar>,\n \"theme\" | \"modalPresentationStyle\" | \"ref\" | \"key\"\n >;\n preventSwipeBack?: boolean;\n modalPresentationStyle?: \"fullScreen\";\n children: React.ReactNode;\n};\nconst AppScreen: React.FC<AppScreenProps> = ({\n backgroundColor,\n dimBackgroundColor,\n appBar,\n preventSwipeBack,\n modalPresentationStyle,\n children,\n}) => {\n const globalOptions = useGlobalOptions();\n const activity = useNullableActivity();\n\n const { pop } = useActions();\n\n const appScreenRef = useRef<HTMLDivElement>(null);\n const dimRef = useRef<HTMLDivElement>(null);\n const paperRef = useRef<HTMLDivElement>(null);\n const edgeRef = useRef<HTMLDivElement>(null);\n const appBarRef = useRef<HTMLDivElement>(null);\n\n const presentModalFullScreen = modalPresentationStyle === \"fullScreen\";\n const swipeBackPrevented = preventSwipeBack || presentModalFullScreen;\n\n useStyleEffectHide({\n refs: [appScreenRef],\n hasEffect: true,\n });\n useStyleEffectOffset({\n theme: globalOptions.theme,\n refs:\n globalOptions.theme === \"cupertino\" ? [paperRef] : [paperRef, appBarRef],\n hasEffect: !presentModalFullScreen,\n });\n useStyleEffectSwipeBack({\n theme: globalOptions.theme,\n dimRef,\n edgeRef,\n paperRef,\n hasEffect: true,\n prevented: swipeBackPrevented,\n onSwiped() {\n pop();\n },\n });\n\n const hasAppBar = !!appBar;\n\n const zIndexBase = (activity?.zIndex ?? 0) * 5;\n const zIndexDim = zIndexBase;\n const zIndexPaper =\n zIndexBase + (globalOptions.theme === \"cupertino\" && hasAppBar ? 1 : 3);\n const zIndexEdge = zIndexBase + 4;\n const zIndexAppBar =\n globalOptions.theme === \"cupertino\" ? zIndexBase + 7 : zIndexBase + 4;\n\n const transitionState = activity?.transitionState ?? \"enter-done\";\n const lazyTransitionState = useLazy(transitionState);\n\n const onAppBarTopClick: React.MouseEventHandler = (e) => {\n appBar?.onTopClick?.(e);\n\n if (!e.defaultPrevented) {\n paperRef.current?.scroll({\n top: 0,\n behavior: \"smooth\",\n });\n }\n };\n\n return (\n <Context.Provider\n value={useMemo(\n () => ({\n scroll({ top }) {\n paperRef?.current?.scroll({\n top,\n behavior: \"smooth\",\n });\n },\n }),\n [paperRef],\n )}\n >\n <div\n ref={appScreenRef}\n className={css.appScreen({\n transitionState:\n transitionState === \"enter-done\" || transitionState === \"exit-done\"\n ? transitionState\n : lazyTransitionState,\n })}\n style={assignInlineVars(\n compactMap({\n [globalVars.backgroundColor]: backgroundColor,\n [globalVars.dimBackgroundColor]: dimBackgroundColor,\n [globalVars.appBar.height]: appBar?.height,\n [globalVars.appBar.heightTransitionDuration]:\n appBar?.heightTransitionDuration,\n [css.vars.zIndexes.dim]: `${zIndexDim}`,\n [css.vars.zIndexes.paper]: `${zIndexPaper}`,\n [css.vars.zIndexes.edge]: `${zIndexEdge}`,\n [css.vars.zIndexes.appBar]: `${zIndexAppBar}`,\n [css.vars.transitionDuration]:\n transitionState === \"enter-active\" ||\n transitionState === \"exit-active\"\n ? globalVars.computedTransitionDuration\n : \"0ms\",\n }),\n )}\n >\n <div className={css.dim} ref={dimRef} />\n {appBar && (\n <AppBar\n {...appBar}\n ref={appBarRef}\n modalPresentationStyle={modalPresentationStyle}\n onTopClick={onAppBarTopClick}\n />\n )}\n <div\n key={activity?.id}\n className={css.paper({\n hasAppBar,\n presentModalFullScreen,\n })}\n ref={paperRef}\n >\n {children}\n </div>\n {!activity?.isRoot &&\n globalOptions.theme === \"cupertino\" &&\n !swipeBackPrevented && (\n <div className={css.edge({ hasAppBar })} ref={edgeRef} />\n )}\n </div>\n </Context.Provider>\n );\n};\n\nAppScreen.displayName = \"AppScreen\";\n\nexport default AppScreen;\n", "import { useEffect, useState } from \"react\";\n\nimport { requestNextFrame } from \"../utils\";\n\nexport function useLazy<T>(value: T) {\n const [state, setState] = useState<T | undefined>(undefined);\n\n useEffect(() => {\n requestNextFrame(() => {\n setState(value);\n });\n }, [value]);\n\n return state;\n}\n", "import { useEffect, useState } from \"react\";\n\nimport { listenResize, noop } from \"../utils\";\n\nexport function useMaxWidth({\n outerRef,\n innerRef,\n enable,\n}: {\n outerRef: React.ForwardedRef<any>;\n innerRef: React.MutableRefObject<any>;\n enable: boolean;\n}) {\n const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);\n\n useEffect(() => {\n const $outer = outerRef && \"current\" in outerRef && outerRef.current;\n const $inner = innerRef.current;\n\n if (!enable || !$outer || !$inner) {\n return noop;\n }\n\n const dispose = listenResize(() => {\n const screenWidth = $outer.clientWidth;\n\n const leftWidth = $inner.offsetLeft;\n const centerWidth = $inner.clientWidth;\n const rightWidth = screenWidth - leftWidth - centerWidth;\n\n const sideMargin = Math.max(leftWidth, rightWidth);\n\n setMaxWidth(screenWidth - 2 * sideMargin);\n });\n\n return dispose;\n }, []);\n\n return {\n maxWidth,\n };\n}\n", "import type { Activity } from \"@stackflow/core\";\nimport { useActivity } from \"@stackflow/react\";\n\nexport function useNullableActivity() {\n return useActivity() as Activity | null;\n}\n", "import type { ActivityTransitionState } from \"@stackflow/core\";\nimport { useEffect } from \"react\";\n\nimport { noop } from \"../utils\";\nimport { useNullableActivity } from \"./useNullableActivity\";\n\nconst connections: {\n [styleName: string]: Map<\n number,\n {\n refs: Array<React.RefObject<any>>;\n hasEffect: boolean;\n }\n >;\n} = {};\n\nexport function useStyleEffect<T extends HTMLElement>({\n styleName,\n refs,\n effect,\n effectDeps,\n}: {\n styleName: string;\n refs: Array<React.RefObject<T>>;\n effect?: (params: {\n activityTransitionState: ActivityTransitionState;\n refs: Array<React.RefObject<T>>;\n }) => (() => void) | void;\n effectDeps?: any[];\n}) {\n const activity = useNullableActivity();\n\n useEffect(() => {\n if (!activity) {\n return noop;\n }\n if (!connections[styleName]) {\n connections[styleName] = new Map();\n }\n\n connections[styleName].set(activity.zIndex, {\n refs,\n hasEffect: !!effect,\n });\n\n return () => {\n connections[styleName].delete(activity.zIndex);\n };\n }, [activity?.id, refs, effect]);\n\n useEffect(() => {\n if (!activity) {\n return noop;\n }\n if (!effect) {\n return noop;\n }\n\n const refs = (() => {\n let arr: Array<React.RefObject<T>> = [];\n\n for (let i = 1; i <= activity.zIndex; i += 1) {\n const connection = connections[styleName].get(activity.zIndex - i);\n\n if (connection?.refs) {\n arr = [...arr, ...connection.refs];\n }\n if (connection?.hasEffect) {\n break;\n }\n }\n\n return arr;\n })();\n\n const cleanup = effect({\n activityTransitionState: activity.transitionState,\n refs,\n });\n\n return () => {\n cleanup?.();\n };\n }, [activity?.transitionState, ...(effectDeps ?? [])]);\n}\n", "/* eslint-disable no-param-reassign */\n\nimport { noop } from \"../utils\";\nimport { useStyleEffect } from \"./useStyleEffect\";\n\nexport function useStyleEffectHide({\n refs,\n hasEffect,\n}: {\n refs: Array<React.RefObject<any>>;\n hasEffect?: boolean;\n}) {\n useStyleEffect({\n styleName: \"hide\",\n refs,\n effect: hasEffect\n ? ({ activityTransitionState, refs }) => {\n const cleanup = () => {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n const $ref = ref.current;\n\n $ref.style.display = \"\";\n });\n };\n\n switch (activityTransitionState) {\n case \"enter-done\": {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n const $ref = ref.current;\n\n $ref.style.display = \"none\";\n });\n\n return () => {\n cleanup();\n };\n }\n default: {\n cleanup();\n\n return noop;\n }\n }\n }\n : undefined,\n });\n}\n", "/* eslint-disable no-param-reassign */\n\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { listenOnce, noop, requestNextFrame } from \"../utils\";\nimport { useStyleEffect } from \"./useStyleEffect\";\n\nexport const OFFSET_PX_ANDROID = 32;\nexport const OFFSET_PX_CUPERTINO = 80;\n\nexport function useStyleEffectOffset({\n refs,\n theme,\n hasEffect,\n}: {\n refs: Array<React.RefObject<any>>;\n theme: \"android\" | \"cupertino\";\n hasEffect?: boolean;\n}) {\n useStyleEffect({\n styleName: \"offset\",\n refs,\n effect: hasEffect\n ? ({ activityTransitionState, refs }) => {\n const transform =\n theme === \"cupertino\"\n ? `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`\n : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;\n\n const cleanup = () => {\n requestNextFrame(() => {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n const $el = ref.current;\n\n $el.style.transform = \"\";\n\n listenOnce($el, \"transitionend\", () => {\n $el.style.transition = \"\";\n });\n });\n });\n };\n\n switch (activityTransitionState) {\n case \"enter-active\":\n case \"enter-done\": {\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n ref.current.style.transition =\n globalVars.computedTransitionDuration;\n ref.current.style.transform = transform;\n });\n\n switch (activityTransitionState) {\n case \"enter-done\":\n return () => {\n cleanup();\n };\n case \"enter-active\":\n default:\n return noop;\n }\n }\n case \"exit-active\":\n case \"exit-done\": {\n requestNextFrame(() => {\n cleanup();\n });\n\n return noop;\n }\n default: {\n return noop;\n }\n }\n }\n : undefined,\n });\n}\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE9WU0bKaMBCG732K3HRGpsQJenpOizd9k05IIgZDQkPQ03bOuzcEUAIK6vSmjhfisl/+f3ezqx8RFbuXzcsr+LMAIMHkkGpVSQqJEkrH4Ij1EsLS2MBOqBMsRJVyCRNccgIrDinP4TAr2C4+FquO/PYkeZr61VGNxrLkhisZN793SuctuXsTBSFQBSbc/BpFPCS5IGtMSxTYsA1dRgh9CgGyXz+Ju6SWHwO0tU+/IZeUvceD46KgDp64EJDssUxZ3OW1xJ+vNFtnCAzge8bTvYlBhDTLt14tYyC4ZFjDVGPKmTTLp/oVAp0meIkag7VHZ9Ie1XzOgr71tIXjMO6Fu6hXnug6NpnGkjks8lqSNcEj064CNl4SrYSoSwdPLDlwA8/RJsRlatutKrKf6N963L/zsPgC4rg7p8EnWDtNlJeFwFaQVJJ5TY/AQP59Y3iulavWCNVrVxbOvNvrXXZ5dUIK8q/DaHizKzfjNsoN95Qt9IAtdI+t/lDea7IBHf7J7glBgSm1kweNKma3IS4K+6Bhswzg5XBIK43rH246e8j5Deszg1sDKWamoJ1Jv0a5Szpxava2wqv1l3Z33bhbGz9bNkc+ZeKyMAkWxN0YAB/FODnfy6oolDYlWHp1JUpakF22Jd4xiDXD1lTJTB0NAid9MCuDxjhhDyoCn0GO3+/Oyu2f1+SFM+pdAT8mzDN5/D993xTeWf4LpNp3kwwJAAA=';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var allTransitions = '_1dlf4348';\nexport var appScreen = _7a468({defaultClassName:'dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc',variantClassNames:{transitionState:{'enter-active':'_1dlf4349','enter-done':'_1dlf434a','exit-active':'_1dlf434b','exit-done':'_1dlf434c'}},defaultVariants:{},compoundVariants:[]});\nexport var background = '_1dlf4347';\nexport var dim = '_1dlf434i dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4346 _1dlf4348';\nexport var edge = _7a468({defaultClassName:'_1dlf434m dhthxq4 dhthxq2 dhthxq3 dhthxq1',variantClassNames:{hasAppBar:{true:'_1dlf434n'}},defaultVariants:{},compoundVariants:[]});\nexport var enterActive = '_1dlf4349';\nexport var enterDone = '_1dlf434a';\nexport var exitActive = '_1dlf434b';\nexport var exitDone = '_1dlf434c';\nexport var paper = _7a468({defaultClassName:'_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4348',variantClassNames:{hasAppBar:{true:'_1dlf434k dhthxqg'},presentModalFullScreen:{true:'_1dlf434l'}},defaultVariants:{},compoundVariants:[]});\nexport var vars = {transitionDuration:'var(--_1dlf4340)',zIndexes:{dim:'var(--_1dlf4341)',paper:'var(--_1dlf4342)',edge:'var(--_1dlf4343)',appBar:'var(--_1dlf4344)'},appBar:{center:{mainWidth:'var(--_1dlf4345)'}}};", "/* eslint-disable no-param-reassign */\n\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport * as appScreenCss from \"../components/AppScreen.css\";\nimport { listenOnce, noop } from \"../utils\";\nimport { useStyleEffect } from \"./useStyleEffect\";\nimport { OFFSET_PX_CUPERTINO } from \"./useStyleEffectOffset\";\n\nexport function useStyleEffectSwipeBack({\n theme,\n dimRef,\n edgeRef,\n paperRef,\n hasEffect,\n prevented,\n onSwiped,\n}: {\n theme: \"android\" | \"cupertino\";\n dimRef: React.RefObject<HTMLDivElement>;\n edgeRef: React.RefObject<HTMLDivElement>;\n paperRef: React.RefObject<HTMLDivElement>;\n hasEffect?: boolean;\n prevented?: boolean;\n onSwiped?: () => void;\n}) {\n useStyleEffect({\n styleName: \"swipe-back\",\n refs: [paperRef],\n effect: hasEffect\n ? ({ refs }) => {\n if (theme !== \"cupertino\") {\n return noop;\n }\n\n if (!dimRef.current || !edgeRef.current || !paperRef.current) {\n return noop;\n }\n\n const $dim = dimRef.current;\n const $edge = edgeRef.current;\n const $paper = paperRef.current;\n\n let x0: number | null = null;\n let t0: number | null = null;\n let x: number | null = null;\n\n let cachedRefs: Array<{\n style: {\n transform: string;\n transition: string;\n };\n parentElement?: {\n style: {\n display: string;\n };\n };\n }> = [];\n\n const resetState = () => {\n x0 = null;\n t0 = null;\n x = null;\n cachedRefs = [];\n };\n\n let _rAFLock = false;\n\n function movePaper(dx: number) {\n if (!_rAFLock) {\n _rAFLock = true;\n\n requestAnimationFrame(() => {\n const p = dx / $paper.clientWidth;\n\n $dim.style.opacity = `${1 - p}`;\n $dim.style.transition = \"0s\";\n\n $paper.style.overflowY = \"hidden\";\n $paper.style.transform = `translate3d(${dx}px, 0, 0)`;\n $paper.style.transition = \"0s\";\n\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n ref.current.style.transform = `translate3d(${\n -1 * (1 - p) * OFFSET_PX_CUPERTINO\n }px, 0, 0)`;\n ref.current.style.transition = \"0s\";\n\n if (ref.current.parentElement?.style.display === \"none\") {\n ref.current.parentElement.style.display = \"block\";\n }\n });\n\n _rAFLock = false;\n });\n }\n }\n\n function resetPaper({ swiped }: { swiped: boolean }): Promise<void> {\n return new Promise((resolve) => {\n requestAnimationFrame(() => {\n $dim.style.opacity = `${swiped ? 0 : 1}`;\n $dim.style.transition = globalVars.transitionDuration;\n\n $paper.style.overflowY = \"hidden\";\n $paper.style.transform = `translateX(${swiped ? \"100%\" : \"0\"})`;\n $paper.style.transition = globalVars.transitionDuration;\n\n refs.forEach((ref) => {\n if (!ref.current) {\n return;\n }\n\n ref.current.style.transition = globalVars.transitionDuration;\n ref.current.style.transform = `translate3d(${\n swiped ? \"0\" : `-${OFFSET_PX_CUPERTINO / 16}rem`\n }, 0, 0)`;\n });\n\n const _cachedRefs = [...cachedRefs];\n\n resolve();\n\n listenOnce($paper, \"transitionend\", () => {\n const _swiped =\n swiped ||\n $paper.parentElement?.classList.contains(\n appScreenCss.exitActive,\n ) ||\n $paper.parentElement?.classList.contains(\n appScreenCss.exitDone,\n );\n\n $dim.style.opacity = \"\";\n $paper.style.overflowY = \"\";\n $paper.style.transform = \"\";\n\n refs.forEach((ref, i) => {\n if (!ref.current) {\n return;\n }\n\n const _cachedRef = _cachedRefs[i];\n\n if (_swiped) {\n ref.current.style.transition = \"\";\n ref.current.style.transform = \"\";\n\n if (ref.current.parentElement) {\n ref.current.parentElement.style.display = \"\";\n }\n } else if (_cachedRef) {\n ref.current.style.transition =\n _cachedRef.style.transition;\n ref.current.style.transform = _cachedRef.style.transform;\n\n if (\n ref.current.parentElement &&\n _cachedRef.parentElement\n ) {\n ref.current.parentElement.style.display =\n _cachedRef.parentElement.style.display;\n }\n }\n });\n });\n });\n });\n }\n\n const onTouchStart = (e: TouchEvent) => {\n const { activeElement } = document as any;\n\n activeElement?.blur?.();\n // eslint-disable-next-line no-multi-assign\n x0 = x = e.touches[0].clientX;\n t0 = Date.now();\n\n cachedRefs = refs.map((ref) => {\n if (!ref.current) {\n return {\n style: {\n transform: \"\",\n transition: \"\",\n },\n };\n }\n\n return {\n style: {\n transform: ref.current.style.transform,\n transition: ref.current.style.transition,\n },\n parentElement: ref.current.parentElement\n ? {\n style: {\n display: ref.current.parentElement.style.display,\n },\n }\n : undefined,\n };\n });\n };\n\n const onTouchMove = (e: TouchEvent) => {\n if (!x0) {\n resetState();\n return;\n }\n\n x = e.touches[0].clientX;\n\n movePaper(x - x0);\n };\n\n const onTouchEnd = () => {\n if (!x0 || !t0 || !x) {\n resetState();\n return;\n }\n\n const t = Date.now();\n const v = (x - x0) / (t - t0);\n const swiped = v > 1 || x / $paper.clientWidth > 0.4;\n\n if (swiped) {\n onSwiped?.();\n }\n\n Promise.resolve()\n .then(() => resetPaper({ swiped }))\n .then(() => resetState());\n };\n\n $edge.addEventListener(\"touchstart\", onTouchStart, { passive: true });\n $edge.addEventListener(\"touchmove\", onTouchMove, { passive: true });\n $edge.addEventListener(\"touchend\", onTouchEnd, { passive: true });\n $edge.addEventListener(\"touchcancel\", onTouchEnd, { passive: true });\n\n return () => {\n $edge.removeEventListener(\"touchstart\", onTouchStart);\n $edge.removeEventListener(\"touchmove\", onTouchMove);\n $edge.removeEventListener(\"touchend\", onTouchEnd);\n $edge.removeEventListener(\"touchcancel\", onTouchEnd);\n };\n }\n : undefined,\n effectDeps: [prevented],\n });\n}\n", "import { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { IconBack, IconClose } from \"../assets\";\nimport { useGlobalOptions } from \"../basicUIPlugin\";\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { useMaxWidth, useNullableActivity } from \"../hooks\";\nimport { compactMap } from \"../utils\";\nimport * as css from \"./AppBar.css\";\nimport * as appScreenCss from \"./AppScreen.css\";\n\ntype AppBarProps = Partial<\n Pick<\n GlobalVars[\"appBar\"],\n | \"borderColor\"\n | \"borderColorTransitionDuration\"\n | \"borderSize\"\n | \"height\"\n | \"heightTransitionDuration\"\n | \"overflow\"\n | \"iconColor\"\n | \"iconColorTransitionDuration\"\n | \"textColor\"\n | \"textColorTransitionDuration\"\n | \"backgroundColor\"\n | \"backgroundColorTransitionDuration\"\n >\n> & {\n title?: React.ReactNode;\n renderLeft?: () => React.ReactNode;\n renderRight?: () => React.ReactNode;\n backButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n }\n | {\n render?: () => React.ReactNode;\n };\n closeButton?:\n | {\n renderIcon?: () => React.ReactNode;\n ariaLabel?: string;\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n }\n | {\n render?: () => React.ReactNode;\n };\n closeButtonLocation?: \"left\" | \"right\";\n border?: boolean;\n modalPresentationStyle?: \"fullScreen\";\n onTopClick?: (e: React.MouseEvent) => void;\n};\nconst AppBar = forwardRef<HTMLDivElement, AppBarProps>(\n (\n {\n title,\n renderLeft,\n renderRight,\n backButton,\n closeButton,\n closeButtonLocation = \"left\",\n border = true,\n modalPresentationStyle,\n iconColor,\n iconColorTransitionDuration,\n textColor,\n textColorTransitionDuration,\n borderColor,\n borderColorTransitionDuration,\n borderSize,\n height,\n heightTransitionDuration,\n overflow,\n backgroundColor,\n backgroundColorTransitionDuration,\n onTopClick,\n },\n ref,\n ) => {\n const actions = useActions();\n const activity = useNullableActivity();\n\n const globalOptions = useGlobalOptions();\n const globalCloseButton = globalOptions.appBar?.closeButton;\n const globalBackButton = globalOptions.appBar?.backButton;\n\n const centerRef = useRef<any>(null);\n\n const { maxWidth } = useMaxWidth({\n outerRef: ref,\n innerRef: centerRef,\n enable: globalOptions.theme === \"cupertino\",\n });\n\n const presentModalFullScreen = modalPresentationStyle === \"fullScreen\";\n\n const onBackClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (backButton && \"onClick\" in backButton && backButton.onClick) {\n backButton.onClick(e);\n }\n\n if (!e.defaultPrevented) {\n actions.pop();\n }\n };\n\n const renderBackButton = () => {\n if (!activity) {\n return null;\n }\n if (activity.isRoot) {\n return null;\n }\n\n if (!backButton && !globalBackButton) {\n return (\n <button\n type=\"button\"\n className={css.backButton}\n onClick={onBackClick}\n >\n <IconBack />\n </button>\n );\n }\n\n if (backButton && \"render\" in backButton && backButton.render) {\n return backButton.render?.();\n }\n if (\n globalBackButton &&\n \"render\" in globalBackButton &&\n globalBackButton.render\n ) {\n return globalBackButton.render?.();\n }\n\n return (\n <button\n type=\"button\"\n className={css.backButton}\n aria-label={\n backButton && \"ariaLabel\" in backButton\n ? backButton.ariaLabel\n : globalBackButton && \"ariaLabel\" in globalBackButton\n ? globalBackButton.ariaLabel\n : undefined\n }\n onClick={onBackClick}\n >\n {(() => {\n if (\n backButton &&\n \"renderIcon\" in backButton &&\n backButton.renderIcon\n ) {\n return backButton.renderIcon();\n }\n if (\n globalBackButton &&\n \"renderIcon\" in globalBackButton &&\n globalBackButton.renderIcon\n ) {\n return globalBackButton.renderIcon();\n }\n\n if (presentModalFullScreen) {\n return <IconClose />;\n }\n\n return <IconBack />;\n })()}\n </button>\n );\n };\n\n const onCloseClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n if (closeButton && \"onClick\" in closeButton && closeButton.onClick) {\n closeButton.onClick(e);\n }\n\n if (\n !e.defaultPrevented &&\n globalCloseButton &&\n \"onClick\" in globalCloseButton\n ) {\n globalCloseButton.onClick?.(e);\n }\n };\n\n const renderCloseButton = () => {\n const isRoot = !activity || activity.isRoot;\n\n const showCloseButton = (closeButton: AppBarProps[\"closeButton\"]) =>\n (closeButton && \"render\" in closeButton && closeButton.render) ||\n (closeButton &&\n \"renderIcon\" in closeButton &&\n closeButton.renderIcon) ||\n (closeButton && \"onClick\" in closeButton && closeButton.onClick);\n\n if (\n !(\n showCloseButton(closeButton) ||\n showCloseButton(globalOptions.appBar?.closeButton)\n ) ||\n !isRoot\n ) {\n return null;\n }\n if (closeButton && \"render\" in closeButton && closeButton.render) {\n return closeButton.render();\n }\n if (\n globalCloseButton &&\n \"render\" in globalCloseButton &&\n globalCloseButton.render\n ) {\n return globalCloseButton.render();\n }\n\n return (\n <button\n type=\"button\"\n className={css.closeButton}\n aria-label={\n closeButton && \"ariaLabel\" in closeButton\n ? closeButton.ariaLabel\n : globalCloseButton && \"ariaLabel\" in globalCloseButton\n ? globalCloseButton.ariaLabel\n : undefined\n }\n onClick={onCloseClick}\n >\n {(() => {\n if (\n closeButton &&\n \"renderIcon\" in closeButton &&\n closeButton.renderIcon\n ) {\n return closeButton.renderIcon();\n }\n if (\n globalCloseButton &&\n \"renderIcon\" in globalCloseButton &&\n globalCloseButton.renderIcon\n ) {\n return globalCloseButton.renderIcon();\n }\n\n return <IconClose />;\n })()}\n </button>\n );\n };\n\n const hasLeft = !!(\n (closeButtonLocation === \"left\" && closeButton) ||\n backButton ||\n renderLeft\n );\n\n return (\n <div\n ref={ref}\n className={css.appBar({\n border,\n presentModalFullScreen,\n })}\n style={assignInlineVars(\n compactMap({\n [globalVars.appBar.iconColor]: iconColor,\n [globalVars.appBar.iconColorTransitionDuration]:\n iconColorTransitionDuration,\n [globalVars.appBar.textColor]: textColor,\n [globalVars.appBar.textColorTransitionDuration]:\n textColorTransitionDuration,\n [globalVars.appBar.borderColor]: borderColor,\n [globalVars.appBar.borderColorTransitionDuration]:\n borderColorTransitionDuration,\n [globalVars.appBar.borderSize]: borderSize,\n [globalVars.appBar.height]: height,\n [globalVars.appBar.heightTransitionDuration]:\n heightTransitionDuration,\n [globalVars.appBar.overflow]: overflow,\n [globalVars.appBar.backgroundColor]:\n backgroundColor || globalVars.backgroundColor,\n [globalVars.appBar.backgroundColorTransitionDuration]:\n backgroundColorTransitionDuration,\n [appScreenCss.vars.appBar.center.mainWidth]: `${maxWidth}px`,\n }),\n )}\n >\n <div className={css.safeArea} />\n <div className={css.container}>\n <div className={css.left}>\n {closeButtonLocation === \"left\" && renderCloseButton()}\n {renderBackButton()}\n {renderLeft?.()}\n </div>\n <div ref={centerRef} className={css.center}>\n <div\n className={css.centerMain({\n hasLeft,\n })}\n >\n {typeof title === \"string\" ? (\n <div className={css.centerText}>{title}</div>\n ) : (\n title\n )}\n <button\n className={css.centerMainEdge}\n type=\"button\"\n aria-hidden=\"true\"\n onClick={onTopClick}\n />\n </div>\n </div>\n <div className={css.right}>\n {renderRight?.()}\n {closeButtonLocation === \"right\" && renderCloseButton()}\n </div>\n </div>\n </div>\n );\n },\n);\n\nAppBar.displayName = \"AppBar\";\n\nexport default AppBar;\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE9WU0bKaMBCG732K3HRGpsQJenpOizd9k05IIgZDQkPQ03bOuzcEUAIK6vSmjhfisl/+f3ezqx8RFbuXzcsr+LMAIMHkkGpVSQqJEkrH4Ij1EsLS2MBOqBMsRJVyCRNccgIrDinP4TAr2C4+FquO/PYkeZr61VGNxrLkhisZN793SuctuXsTBSFQBSbc/BpFPCS5IGtMSxTYsA1dRgh9CgGyXz+Ju6SWHwO0tU+/IZeUvceD46KgDp64EJDssUxZ3OW1xJ+vNFtnCAzge8bTvYlBhDTLt14tYyC4ZFjDVGPKmTTLp/oVAp0meIkag7VHZ9Ie1XzOgr71tIXjMO6Fu6hXnug6NpnGkjks8lqSNcEj064CNl4SrYSoSwdPLDlwA8/RJsRlatutKrKf6N963L/zsPgC4rg7p8EnWDtNlJeFwFaQVJJ5TY/AQP59Y3iulavWCNVrVxbOvNvrXXZ5dUIK8q/DaHizKzfjNsoN95Qt9IAtdI+t/lDea7IBHf7J7glBgSm1kweNKma3IS4K+6Bhswzg5XBIK43rH246e8j5Deszg1sDKWamoJ1Jv0a5Szpxava2wqv1l3Z33bhbGz9bNkc+ZeKyMAkWxN0YAB/FODnfy6oolDYlWHp1JUpakF22Jd4xiDXD1lTJTB0NAid9MCuDxjhhDyoCn0GO3+/Oyu2f1+SFM+pdAT8mzDN5/D993xTeWf4LpNp3kwwJAAA=';\nimport 'src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+1YS2/bMAy+91foMiAZIkPOo+2c2w677bQfUMi2nKhRJM9SXh323yfJL9mOnaQIdiga5GBLJEV+/Egx8V7802aG5wsE/jwAsKUcrgldrVUA9jgbQSgVjjYJEweYst1Kb4dY0gjuKMRpql8yWOuMlw9/H7zSom8tij3JjPr19kqNprWptRZq5VUmdjyGkWAiu95qW1NbB+ANUh6TY2nlxY9ZMp/N53bzQBmD0RrzFQmAyjCXici2EyBSHFF1MiJ2lSoqeNBx7d2ewdoqjHcZNg/jCQjFEco1jsXhessii0k2YLVA+Pdj/Dp99UEL7FSUseFQCrZTpCufAxa2VSu4CuQYVmQWj3yEvkwA0t/xR4BvUscJkGyAg9qIFKwJAFr246OR8VFGth8RoGaJoXFVSJ0dA6QOvvw0Mc2FvjnwTi7IYke2Fm3kxB/OSUFYpxvN8m5UQRYAyiVRAKVHEGEWjaAPvt6Ko6RvZDwG6F3499byfKggLeHQfv1JOIdEDo38s5SbTy5KO6Sbu8LDuXCJNtRkP3N6VU4rvBYWr3Kw2eLj6JbhRuKEQJwRDG2RQyVSfXAkuFbnanRu2wJ/3/MI3/cd5UT62Ij02lOr8a3Jlnz5RitDg0bu41M+XeA4pnylL0SAvIW+9JoyAdmmOq1GMqYyZVi3aS44aUg92/0bJ0GqM+fMgG7AJZlmCG3lBNxWIrXdHgjMSBmrdQCm3jQPuM7U1HvqYPAc4EjRPWnND960z210f58dd0LrRxFCs9wWNrob86DIUfXk4X7EuxWQ2qnLA7Mz4zWwMVOuieh1JxVNTtocV4TrJCeMHI0PmVrWBQAZSfSeXxAi0cJ2EtBLnv/8VBKFUU6qn2a+t6hkD8VaKFi8LIcS+mZLq+iteqlvOgh7J32n7ozfZgEzuuKQKrKVAYh0SCQ7G2e9ZeG0au6q9TvBW8q0cQM9I1CepDKD73cd6OYnjn7Z9x9ashPpI0JtpEqQLJSLHP5z1+MI6s1Gc35PixTp/7tE7njYpRukw+rIbdQFT5E363aq2Ao20K+pWvW64YToGGFRQKVCq/EPNJ/z5I6b10fIRLRp+J23VkvS+n8KwhhNJZUtjlG+JhntsrFad+wmfTecCTMzacuxwjslmooXrr1OinpOMg9a5R/4yDzf3hEAAA==';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var appBar = _7a468({defaultClassName:'_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4347 _1yk3a451',variantClassNames:{border:{true:'_1yk3a453'},presentModalFullScreen:{true:'_1yk3a454'}},defaultVariants:{},compoundVariants:[]});\nexport var backButton = '_1yk3a458 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi';\nexport var center = 'dhthxq9 dhthxq7 dhthxq8 _1yk3a450';\nexport var centerMain = _7a468({defaultClassName:'_1yk3a45b',variantClassNames:{hasLeft:{true:'_1yk3a45c'}},defaultVariants:{},compoundVariants:[]});\nexport var centerMainEdge = '_1yk3a45d dhthxqi dhthxq4 dhthxq2 dhthxqf';\nexport var centerText = '_1yk3a45e dhthxqc dhthxqd dhthxq0';\nexport var closeButton = '_1yk3a458 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi';\nexport var container = '_1yk3a456 dhthxqa dhthxq7 _1yk3a451';\nexport var left = '_1yk3a457 dhthxq9 dhthxq7 dhthxq1 _1yk3a450';\nexport var right = '_1yk3a45f dhthxq9 dhthxq7 dhthxq1 dhthxq5 _1yk3a450';\nexport var safeArea = '_1yk3a455';", "/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n\nimport { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { useRef } from \"react\";\n\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { useLazy, useNullableActivity, useStyleEffect } from \"../hooks\";\nimport { compactMap } from \"../utils\";\nimport * as css from \"./BottomSheet.css\";\n\nexport type BottomSheetProps = Partial<\n Pick<GlobalVars, \"backgroundColor\" | \"dimBackgroundColor\">\n> &\n Partial<GlobalVars[\"bottomSheet\"]> & {\n onOutsideClick?: React.MouseEventHandler;\n children: React.ReactNode;\n };\nconst BottomSheet: React.FC<BottomSheetProps> = ({\n borderRadius = \"1rem\",\n backgroundColor,\n dimBackgroundColor,\n onOutsideClick,\n children,\n}) => {\n const activity = useNullableActivity();\n const { pop } = useActions();\n\n const containerRef = useRef<HTMLDivElement>(null);\n const paperRef = useRef<HTMLDivElement>(null);\n\n useStyleEffect({\n styleName: \"hide\",\n refs: [containerRef],\n });\n useStyleEffect({\n styleName: \"offset\",\n refs: [paperRef],\n });\n useStyleEffect({\n styleName: \"swipe-back\",\n refs: [paperRef],\n });\n\n const popLock = useRef(false);\n\n const onDimClick: React.MouseEventHandler = (e) => {\n onOutsideClick?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n if (popLock.current) {\n return;\n }\n popLock.current = true;\n\n pop();\n };\n const onPaperClick: React.MouseEventHandler = (e) => {\n e.stopPropagation();\n };\n\n const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;\n const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;\n const transitionState = activity?.transitionState ?? \"enter-done\";\n\n return (\n <div\n className={css.container({\n transitionState: useLazy(transitionState),\n })}\n ref={containerRef}\n style={assignInlineVars(\n compactMap({\n [globalVars.bottomSheet.borderRadius]: borderRadius,\n [globalVars.backgroundColor]: backgroundColor,\n [globalVars.dimBackgroundColor]: dimBackgroundColor,\n [css.vars.zIndexes.dim]: `${zIndexBase}`,\n [css.vars.zIndexes.paper]: `${zIndexPaper}`,\n [css.vars.transitionDuration]:\n transitionState === \"enter-active\" ||\n transitionState === \"exit-active\"\n ? globalVars.computedTransitionDuration\n : \"0ms\",\n }),\n )}\n >\n <div className={css.dim} ref={paperRef} onClick={onDimClick}>\n <div className={css.paper} onClick={onPaperClick}>\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nBottomSheet.displayName = \"BottomSheet\";\n\nexport default BottomSheet;\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/BottomSheet.css.ts.vanilla.css?source=Ll8xaHQzOGgwMyB7CiAgdHJhbnNpdGlvbjogdmFyKC0tXzFodDM4aDAwKTsKfQouXzFodDM4aDA3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fMWh0MzhoMGQgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktZGltLWJhY2tncm91bmQtY29sb3IpOwogIHotaW5kZXg6IHZhcigtLV8xaHQzOGgwMSk7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDA0IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDUgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMTsKfQouXzFodDM4aDA2IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDcgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDBlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJhY2tncm91bmQtY29sb3IpOwogIHdpZHRoOiAxMDAlOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIDAgMDsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtLCBvcGFjaXR5OwogIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgMTAwJSwgMCk7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDA0IC5fMWh0MzhoMGUsIC5fMWh0MzhoMDUgLl8xaHQzOGgwZSB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTsKICBvcGFjaXR5OiAxOwp9Ci5fMWh0MzhoMDYgLl8xaHQzOGgwZSwgLl8xaHQzOGgwNyAuXzFodDM4aDBlIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDEwMCUsIDApOwogIG9wYWNpdHk6IDA7Cn0=';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc',variantClassNames:{transitionState:{'enter-active':'_1ht38h04','enter-done':'_1ht38h05','exit-active':'_1ht38h06','exit-done':'_1ht38h07'}},defaultVariants:{},compoundVariants:[]});\nexport var dim = '_1ht38h0d dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc dhthxqa dhthxq7 _1ht38h03';\nexport var enterActive = '_1ht38h04';\nexport var enterDone = '_1ht38h05';\nexport var exitActive = '_1ht38h06';\nexport var exitDone = '_1ht38h07';\nexport var paper = '_1ht38h0e dhthxqc _1ht38h03';\nexport var vars = {transitionDuration:'var(--_1ht38h00)',zIndexes:{dim:'var(--_1ht38h01)',paper:'var(--_1ht38h02)'}};", "/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n\nimport { useActions } from \"@stackflow/react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { useRef } from \"react\";\n\nimport type { GlobalVars } from \"../basicUIPlugin.css\";\nimport { globalVars } from \"../basicUIPlugin.css\";\nimport { useLazy, useNullableActivity, useStyleEffect } from \"../hooks\";\nimport { compactMap } from \"../utils\";\nimport * as css from \"./Modal.css\";\n\nexport type ModalProps = Partial<\n Pick<GlobalVars, \"backgroundColor\" | \"dimBackgroundColor\">\n> &\n Partial<GlobalVars[\"modal\"]> & {\n onOutsideClick?: React.MouseEventHandler;\n children: React.ReactNode;\n };\nconst Modal: React.FC<ModalProps> = ({\n backgroundColor,\n dimBackgroundColor,\n borderRadius = \"1rem\",\n onOutsideClick,\n children,\n}) => {\n const activity = useNullableActivity();\n const { pop } = useActions();\n\n const containerRef = useRef<HTMLDivElement>(null);\n const paperRef = useRef<HTMLDivElement>(null);\n\n useStyleEffect({\n styleName: \"hide\",\n refs: [containerRef],\n });\n useStyleEffect({\n styleName: \"offset\",\n refs: [paperRef],\n });\n useStyleEffect({\n styleName: \"swipe-back\",\n refs: [paperRef],\n });\n\n const popLock = useRef(false);\n\n const onDimClick: React.MouseEventHandler = (e) => {\n onOutsideClick?.(e);\n\n if (e.defaultPrevented) {\n return;\n }\n\n if (popLock.current) {\n return;\n }\n popLock.current = true;\n\n pop();\n };\n const onPaperClick: React.MouseEventHandler = (e) => {\n e.stopPropagation();\n };\n\n const zIndexBase = (activity?.zIndex ?? 0) * 5 + 3;\n const zIndexPaper = (activity?.zIndex ?? 0) * 5 + 4;\n const transitionState = activity?.transitionState ?? \"enter-done\";\n\n return (\n <div\n className={css.container({\n transitionState: useLazy(transitionState),\n })}\n ref={containerRef}\n style={assignInlineVars(\n compactMap({\n [globalVars.bottomSheet.borderRadius]: borderRadius,\n [globalVars.backgroundColor]: backgroundColor,\n [globalVars.dimBackgroundColor]: dimBackgroundColor,\n [css.vars.zIndexes.dim]: `${zIndexBase}`,\n [css.vars.zIndexes.paper]: `${zIndexPaper}`,\n [css.vars.transitionDuration]:\n transitionState === \"enter-active\" ||\n transitionState === \"exit-active\"\n ? globalVars.computedTransitionDuration\n : \"0ms\",\n }),\n )}\n >\n <div className={css.dim} ref={paperRef} onClick={onDimClick}>\n <div className={css.paper} onClick={onPaperClick}>\n {children}\n </div>\n </div>\n </div>\n );\n};\n\nModal.displayName = \"Modal\";\n\nexport default Modal;\n", "import 'src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=';\nimport 'src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=';\nimport 'src/components/Modal.css.ts.vanilla.css?source=Ll81b3pnOGMzIHsKICB0cmFuc2l0aW9uOiB2YXIoLS1fNW96ZzhjMCk7Cn0KLl81b3pnOGM3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fNW96ZzhjZCB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1kaW0tYmFja2dyb3VuZC1jb2xvcik7CiAgei1pbmRleDogdmFyKC0tXzVvemc4YzEpOwogIG9wYWNpdHk6IDA7Cn0KLl81b3pnOGM0IC5fNW96ZzhjZCwgLl81b3pnOGM1IC5fNW96ZzhjZCB7CiAgb3BhY2l0eTogMTsKfQouXzVvemc4YzYgLl81b3pnOGNkLCAuXzVvemc4YzcgLl81b3pnOGNkIHsKICBvcGFjaXR5OiAwOwp9Ci5fNW96ZzhjZSB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1iYWNrZ3JvdW5kLWNvbG9yKTsKICB3aWR0aDogMTAwJTsKICBtYXJnaW46IDAgMi41cmVtOwogIGJveC1zaGFkb3c6IDBweCAwLjYyNXJlbSAyLjM3NXJlbSByZ2JhKDAsIDAsIDAsIDAuMTUpLCAwcHggLjU2MjVyZW0gMi44NzVyZW0gcmdiYSgwLCAwLCAwLCAwLjEyKSwgMHB4IC4zMTI1cmVtIC45Mzc1cmVtIHJnYmEoMCwgMCwgMCwgMC4xKTsKICBib3JkZXItcmFkaXVzOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJvdHRvbS1zaGVldC1ib3JkZXItcmFkaXVzKTsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtLCBvcGFjaXR5OwogIHRyYW5zZm9ybTogc2NhbGUoMS4xKTsKICBvcGFjaXR5OiAwOwp9Ci5fNW96ZzhjNCAuXzVvemc4Y2UsIC5fNW96ZzhjNSAuXzVvemc4Y2UgewogIHRyYW5zZm9ybTogc2NhbGUoMSk7CiAgb3BhY2l0eTogMTsKfQouXzVvemc4YzYgLl81b3pnOGNlLCAuXzVvemc4YzcgLl81b3pnOGNlIHsKICB0cmFuc2Zvcm06IHNjYWxlKDEuMSk7CiAgb3BhY2l0eTogMDsKfQ==';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var container = _7a468({defaultClassName:'dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc',variantClassNames:{transitionState:{'enter-active':'_5ozg8c4','enter-done':'_5ozg8c5','exit-active':'_5ozg8c6','exit-done':'_5ozg8c7'}},defaultVariants:{},compoundVariants:[]});\nexport var dim = '_5ozg8cd dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc dhthxq9 dhthxq7 dhthxqb _5ozg8c3';\nexport var enterActive = '_5ozg8c4';\nexport var enterDone = '_5ozg8c5';\nexport var exitActive = '_5ozg8c6';\nexport var exitDone = '_5ozg8c7';\nexport var paper = '_5ozg8ce dhthxqc _5ozg8c3';\nexport var vars = {transitionDuration:'var(--_5ozg8c0)',zIndexes:{dim:'var(--_5ozg8c1)',paper:'var(--_5ozg8c2)'}};"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAWI;AAXJ,IAAM,WAED,CAAC,UACJ;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,MAAM;AAAA,IACjB,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA;AACF;AAGF,IAAO,mBAAQ;;;ACfb,SAQE,OAAAA,MARF;AAHF,IAAM,YAED,CAAC,UACJ;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,MAAM;AAAA,IACjB,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN;AAAA,sBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACP;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACP;AAAA;AAAA;AACF;AAGF,IAAO,oBAAQ;;;ACrBf,SAAS,wBAAwB;AACjC,SAAS,eAAe,kBAAkB;;;ACD1C,SAAS,mBAAmB,cAAc;AAGnC,IAAI,aAAa,EAAC,iBAAgB,qDAAoD,oBAAmB,yDAAwD,oBAAmB,wDAAuD,4BAA2B,iEAAgE,QAAO,EAAC,aAAY,yDAAwD,+BAA8B,6EAA4E,YAAW,wDAAuD,QAAO,mDAAkD,0BAAyB,uEAAsE,WAAU,uDAAsD,WAAU,uDAAsD,6BAA4B,2EAA0E,WAAU,uDAAsD,6BAA4B,2EAA0E,iBAAgB,6DAA4D,mCAAkC,iFAAgF,UAAS,qDAAoD,qBAAoB,mEAAkE,GAAE,aAAY,EAAC,cAAa,8DAA6D,GAAE,OAAM,EAAC,cAAa,8DAA6D,EAAC;AAChmD,IAAI,eAAe,OAAO,EAAC,kBAAiB,aAAY,mBAAkB,EAAC,OAAM,EAAC,SAAQ,aAAY,WAAU,YAAW,GAAE,SAAQ,EAAC,MAAK,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;;;ACLhM,SAAS,QAAW,KAAsC;AAC/D,SAAO,IAAI;AAAA,IACT,CAAC,SACC,SAAS,UAAa,SAAS;AAAA,EACnC;AACF;;;ACLO,SAAS,WACd,KAGA;AACA,SAAO,OAAO,QAAQ,GAAG,EAAE,OAAY,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;AAC5D,QAAI,UAAU,QAAQ,UAAU,QAAW;AACzC,UAAI,GAAG,IAAI;AAAA,IACb;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AACP;;;ACZO,SAAS,WACd,IACA,MACA,IACA;AACA,QAAM,WAAW,MAAM;AACrB,OAAG,oBAAoB,MAAM,QAAQ;AACrC,OAAG;AAAA,EACL;AAEA,KAAG,iBAAiB,MAAM,QAAQ;AACpC;;;ACXO,IAAM,eAAe,CAAC,OAAmB;AAC9C,KAAG;AACH,SAAO,iBAAiB,UAAU,EAAE;AAEpC,SAAO,MAAM;AACX,WAAO,oBAAoB,UAAU,EAAE;AAAA,EACzC;AACF;;;ACPO,IAAM,OAAO,MAAM;AAAC;;;ACCpB,SAAS,iBAAiB,IAAgB;AAC/C,wBAAsB,MAAM;AAC1B,0BAAsB,MAAM;AAC1B,SAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;;;APoDQ,gBAAAC,YAAA;AA3BR,IAAM,uBAAuB,cAAoC;AAAA,EAC/D,OAAO;AACT,CAAC;AAEM,IAAM,wBAAwB,qBAAqB;AAEnD,SAAS,mBAAmB;AACjC,SAAO,WAAW,oBAAoB;AACxC;AAEO,IAAM,gBAIe,CAAC,YAAY,OAAO;AAAA,EAC9C,KAAK;AAAA,EACL,UAAU,EAAE,OAAO,eAAe,GAAG;AAhDvC;AAiDI,UAAM,WACJ,OAAO,YAAY,aAAa,QAAQ,EAAE,eAAe,CAAC,IAAI;AAEhE,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,iCACF,UADE;AAAA,UAEL,QAAO,sDAAgB,UAAhB,YAAyB,SAAS;AAAA,QAC3C;AAAA,QAEA,0BAAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,QAAQ;AAAA,cACb,aAAa;AAAA,gBACf,QAAO,sDAAgB,UAAhB,YAAyB,SAAS;AAAA,gBACzC,SAAS,MAAM,0BAA0B;AAAA,cAC3C,CAAC;AAAA,cACD,SAAS;AAAA,YACX,CAAC,EAAE,KAAK,GAAG;AAAA,YACX,OAAO;AAAA,cACL,WAAW;AAAA,gBACT,CAAK,WAAW,eAAe,GAAG,SAAS;AAAA,gBAC3C,CAAK,WAAW,kBAAkB,GAAG,SAAS;AAAA,gBAC9C,CAAK,WACF,kBAAkB,GAAG,GAAG,MAAM;AAAA,gBACjC,CAAK,WAAW,0BAA0B,GACxC,MAAM,0BAA0B,YAC5B,GAAG,MAAM,yBACT;AAAA,gBACN,CAAK,WAAW,OAAO,WAAW,IAAG,cAAS,WAAT,mBAAiB;AAAA,gBACtD,CAAK,WAAW,OAAO,UAAU,IAAG,cAAS,WAAT,mBAAiB;AAAA,gBACrD,CAAK,WAAW,OAAO,MAAM,IAAG,cAAS,WAAT,mBAAiB;AAAA,gBACjD,CAAK,WAAW,OAAO,SAAS,IAAG,cAAS,WAAT,mBAAiB;AAAA,gBACpD,CAAK,WAAW,OAAO,SAAS,IAAG,cAAS,WAAT,mBAAiB;AAAA,gBACpD,CAAK,WAAW,OAAO,mBAAmB,IACxC,cAAS,WAAT,mBAAiB;AAAA,gBACnB,CAAK,WAAW,YAAY,YAAY,IACtC,cAAS,gBAAT,mBAAsB;AAAA,gBACxB,CAAK,WAAW,MAAM,YAAY,IAAG,cAAS,UAAT,mBAAgB;AAAA,cACvD,CAAC;AAAA,YACH;AAAA,YAEC,gBAAM,OAAO;AAAA;AAAA,QAChB;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;;;AQ7FA,SAAS,cAAAC,mBAAkB;AAC3B,SAAS,oBAAAC,yBAAwB;AACjC,SAAS,iBAAAC,gBAAe,cAAAC,aAAY,SAAS,UAAAC,eAAc;;;ACJ3D,SAAS,WAAW,gBAAgB;AAI7B,SAAS,QAAW,OAAU;AACnC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,MAAS;AAE3D,YAAU,MAAM;AACd,qBAAiB,MAAM;AACrB,eAAS,KAAK;AAAA,IAChB,CAAC;AAAA,EACH,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACT;;;ACdA,SAAS,aAAAC,YAAW,YAAAC,iBAAgB;AAI7B,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,CAAC,UAAU,WAAW,IAAIC,UAA6B,MAAS;AAEtE,EAAAC,WAAU,MAAM;AACd,UAAM,SAAS,YAAY,aAAa,YAAY,SAAS;AAC7D,UAAM,SAAS,SAAS;AAExB,QAAI,CAAC,UAAU,CAAC,UAAU,CAAC,QAAQ;AACjC,aAAO;AAAA,IACT;AAEA,UAAM,UAAU,aAAa,MAAM;AACjC,YAAM,cAAc,OAAO;AAE3B,YAAM,YAAY,OAAO;AACzB,YAAM,cAAc,OAAO;AAC3B,YAAM,aAAa,cAAc,YAAY;AAE7C,YAAM,aAAa,KAAK,IAAI,WAAW,UAAU;AAEjD,kBAAY,cAAc,IAAI,UAAU;AAAA,IAC1C,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,EACF;AACF;;;ACxCA,SAAS,mBAAmB;AAErB,SAAS,sBAAsB;AACpC,SAAO,YAAY;AACrB;;;ACJA,SAAS,aAAAC,kBAAiB;AAK1B,IAAM,cAQF,CAAC;AAEE,SAAS,eAAsC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,WAAW,oBAAoB;AAErC,EAAAC,WAAU,MAAM;AACd,QAAI,CAAC,UAAU;AACb,aAAO;AAAA,IACT;AACA,QAAI,CAAC,YAAY,SAAS,GAAG;AAC3B,kBAAY,SAAS,IAAI,oBAAI,IAAI;AAAA,IACnC;AAEA,gBAAY,SAAS,EAAE,IAAI,SAAS,QAAQ;AAAA,MAC1C;AAAA,MACA,WAAW,CAAC,CAAC;AAAA,IACf,CAAC;AAED,WAAO,MAAM;AACX,kBAAY,SAAS,EAAE,OAAO,SAAS,MAAM;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,qCAAU,IAAI,MAAM,MAAM,CAAC;AAE/B,EAAAA,WAAU,MAAM;AACd,QAAI,CAAC,UAAU;AACb,aAAO;AAAA,IACT;AACA,QAAI,CAAC,QAAQ;AACX,aAAO;AAAA,IACT;AAEA,UAAMC,SAAQ,MAAM;AAClB,UAAI,MAAiC,CAAC;AAEtC,eAAS,IAAI,GAAG,KAAK,SAAS,QAAQ,KAAK,GAAG;AAC5C,cAAM,aAAa,YAAY,SAAS,EAAE,IAAI,SAAS,SAAS,CAAC;AAEjE,YAAI,yCAAY,MAAM;AACpB,gBAAM,CAAC,GAAG,KAAK,GAAG,WAAW,IAAI;AAAA,QACnC;AACA,YAAI,yCAAY,WAAW;AACzB;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT,GAAG;AAEH,UAAM,UAAU,OAAO;AAAA,MACrB,yBAAyB,SAAS;AAAA,MAClC,MAAAA;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX;AAAA,IACF;AAAA,EACF,GAAG,CAAC,qCAAU,iBAAiB,GAAI,kCAAc,CAAC,CAAE,CAAC;AACvD;;;AC/EO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAGG;AACD,iBAAe;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,QAAQ,YACJ,CAAC,EAAE,yBAAyB,MAAAC,MAAK,MAAM;AACrC,YAAM,UAAU,MAAM;AACpB,QAAAA,MAAK,QAAQ,CAAC,QAAQ;AACpB,cAAI,CAAC,IAAI,SAAS;AAChB;AAAA,UACF;AACA,gBAAM,OAAO,IAAI;AAEjB,eAAK,MAAM,UAAU;AAAA,QACvB,CAAC;AAAA,MACH;AAEA,cAAQ,yBAAyB;AAAA,QAC/B,KAAK,cAAc;AACjB,UAAAA,MAAK,QAAQ,CAAC,QAAQ;AACpB,gBAAI,CAAC,IAAI,SAAS;AAChB;AAAA,YACF;AACA,kBAAM,OAAO,IAAI;AAEjB,iBAAK,MAAM,UAAU;AAAA,UACvB,CAAC;AAED,iBAAO,MAAM;AACX,oBAAQ;AAAA,UACV;AAAA,QACF;AAAA,QACA,SAAS;AACP,kBAAQ;AAER,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF,IACA;AAAA,EACN,CAAC;AACH;;;AC9CO,IAAM,oBAAoB;AAC1B,IAAM,sBAAsB;AAE5B,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,iBAAe;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,QAAQ,YACJ,CAAC,EAAE,yBAAyB,MAAAC,MAAK,MAAM;AACrC,YAAM,YACJ,UAAU,cACN,gBAAgB,sBAAsB,iBACtC,mBAAmB,oBAAoB;AAE7C,YAAM,UAAU,MAAM;AACpB,yBAAiB,MAAM;AACrB,UAAAA,MAAK,QAAQ,CAAC,QAAQ;AACpB,gBAAI,CAAC,IAAI,SAAS;AAChB;AAAA,YACF;AAEA,kBAAM,MAAM,IAAI;AAEhB,gBAAI,MAAM,YAAY;AAEtB,uBAAW,KAAK,iBAAiB,MAAM;AACrC,kBAAI,MAAM,aAAa;AAAA,YACzB,CAAC;AAAA,UACH,CAAC;AAAA,QACH,CAAC;AAAA,MACH;AAEA,cAAQ,yBAAyB;AAAA,QAC/B,KAAK;AAAA,QACL,KAAK,cAAc;AACjB,UAAAA,MAAK,QAAQ,CAAC,QAAQ;AACpB,gBAAI,CAAC,IAAI,SAAS;AAChB;AAAA,YACF;AAEA,gBAAI,QAAQ,MAAM,aAChB,WAAW;AACb,gBAAI,QAAQ,MAAM,YAAY;AAAA,UAChC,CAAC;AAED,kBAAQ,yBAAyB;AAAA,YAC/B,KAAK;AACH,qBAAO,MAAM;AACX,wBAAQ;AAAA,cACV;AAAA,YACF,KAAK;AAAA,YACL;AACE,qBAAO;AAAA,UACX;AAAA,QACF;AAAA,QACA,KAAK;AAAA,QACL,KAAK,aAAa;AAChB,2BAAiB,MAAM;AACrB,oBAAQ;AAAA,UACV,CAAC;AAED,iBAAO;AAAA,QACT;AAAA,QACA,SAAS;AACP,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF,IACA;AAAA,EACN,CAAC;AACH;;;ACjFA,SAAS,mBAAmBC,eAAc;AAEnC,IAAI,YAAYC,QAAO,EAAC,kBAAiB,mDAAkD,mBAAkB,EAAC,iBAAgB,EAAC,gBAAe,aAAY,cAAa,aAAY,eAAc,aAAY,aAAY,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAE9Q,IAAI,MAAM;AACV,IAAI,OAAOC,QAAO,EAAC,kBAAiB,6CAA4C,mBAAkB,EAAC,WAAU,EAAC,MAAK,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAGxK,IAAI,aAAa;AACjB,IAAI,WAAW;AACf,IAAI,QAAQC,QAAO,EAAC,kBAAiB,yEAAwE,mBAAkB,EAAC,WAAU,EAAC,MAAK,oBAAmB,GAAE,wBAAuB,EAAC,MAAK,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvP,IAAI,OAAO,EAAC,oBAAmB,oBAAmB,UAAS,EAAC,KAAI,oBAAmB,OAAM,oBAAmB,MAAK,oBAAmB,QAAO,mBAAkB,GAAE,QAAO,EAAC,QAAO,EAAC,WAAU,mBAAkB,EAAC,EAAC;;;ACN7M,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,iBAAe;AAAA,IACb,WAAW;AAAA,IACX,MAAM,CAAC,QAAQ;AAAA,IACf,QAAQ,YACJ,CAAC,EAAE,KAAK,MAAM;AACZ,UAAI,UAAU,aAAa;AACzB,eAAO;AAAA,MACT;AAEA,UAAI,CAAC,OAAO,WAAW,CAAC,QAAQ,WAAW,CAAC,SAAS,SAAS;AAC5D,eAAO;AAAA,MACT;AAEA,YAAM,OAAO,OAAO;AACpB,YAAM,QAAQ,QAAQ;AACtB,YAAM,SAAS,SAAS;AAExB,UAAI,KAAoB;AACxB,UAAI,KAAoB;AACxB,UAAI,IAAmB;AAEvB,UAAI,aAUC,CAAC;AAEN,YAAM,aAAa,MAAM;AACvB,aAAK;AACL,aAAK;AACL,YAAI;AACJ,qBAAa,CAAC;AAAA,MAChB;AAEA,UAAI,WAAW;AAEf,eAAS,UAAU,IAAY;AAC7B,YAAI,CAAC,UAAU;AACb,qBAAW;AAEX,gCAAsB,MAAM;AAC1B,kBAAM,IAAI,KAAK,OAAO;AAEtB,iBAAK,MAAM,UAAU,GAAG,IAAI;AAC5B,iBAAK,MAAM,aAAa;AAExB,mBAAO,MAAM,YAAY;AACzB,mBAAO,MAAM,YAAY,eAAe;AACxC,mBAAO,MAAM,aAAa;AAE1B,iBAAK,QAAQ,CAAC,QAAQ;AAjFtC;AAkFkB,kBAAI,CAAC,IAAI,SAAS;AAChB;AAAA,cACF;AAEA,kBAAI,QAAQ,MAAM,YAAY,eAC5B,MAAM,IAAI,KAAK;AAEjB,kBAAI,QAAQ,MAAM,aAAa;AAE/B,oBAAI,SAAI,QAAQ,kBAAZ,mBAA2B,MAAM,aAAY,QAAQ;AACvD,oBAAI,QAAQ,cAAc,MAAM,UAAU;AAAA,cAC5C;AAAA,YACF,CAAC;AAED,uBAAW;AAAA,UACb,CAAC;AAAA,QACH;AAAA,MACF;AAEA,eAAS,WAAW,EAAE,OAAO,GAAuC;AAClE,eAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,gCAAsB,MAAM;AAC1B,iBAAK,MAAM,UAAU,GAAG,SAAS,IAAI;AACrC,iBAAK,MAAM,aAAa,WAAW;AAEnC,mBAAO,MAAM,YAAY;AACzB,mBAAO,MAAM,YAAY,cAAc,SAAS,SAAS;AACzD,mBAAO,MAAM,aAAa,WAAW;AAErC,iBAAK,QAAQ,CAAC,QAAQ;AACpB,kBAAI,CAAC,IAAI,SAAS;AAChB;AAAA,cACF;AAEA,kBAAI,QAAQ,MAAM,aAAa,WAAW;AAC1C,kBAAI,QAAQ,MAAM,YAAY,eAC5B,SAAS,MAAM,IAAI,sBAAsB;AAAA,YAE7C,CAAC;AAED,kBAAM,cAAc,CAAC,GAAG,UAAU;AAElC,oBAAQ;AAER,uBAAW,QAAQ,iBAAiB,MAAM;AA9H1D;AA+HkB,oBAAM,UACJ,YACA,YAAO,kBAAP,mBAAsB,UAAU;AAAA,gBACjB;AAAA,sBAEf,YAAO,kBAAP,mBAAsB,UAAU;AAAA,gBACjB;AAAA;AAGjB,mBAAK,MAAM,UAAU;AACrB,qBAAO,MAAM,YAAY;AACzB,qBAAO,MAAM,YAAY;AAEzB,mBAAK,QAAQ,CAAC,KAAK,MAAM;AACvB,oBAAI,CAAC,IAAI,SAAS;AAChB;AAAA,gBACF;AAEA,sBAAM,aAAa,YAAY,CAAC;AAEhC,oBAAI,SAAS;AACX,sBAAI,QAAQ,MAAM,aAAa;AAC/B,sBAAI,QAAQ,MAAM,YAAY;AAE9B,sBAAI,IAAI,QAAQ,eAAe;AAC7B,wBAAI,QAAQ,cAAc,MAAM,UAAU;AAAA,kBAC5C;AAAA,gBACF,WAAW,YAAY;AACrB,sBAAI,QAAQ,MAAM,aAChB,WAAW,MAAM;AACnB,sBAAI,QAAQ,MAAM,YAAY,WAAW,MAAM;AAE/C,sBACE,IAAI,QAAQ,iBACZ,WAAW,eACX;AACA,wBAAI,QAAQ,cAAc,MAAM,UAC9B,WAAW,cAAc,MAAM;AAAA,kBACnC;AAAA,gBACF;AAAA,cACF,CAAC;AAAA,YACH,CAAC;AAAA,UACH,CAAC;AAAA,QACH,CAAC;AAAA,MACH;AAEA,YAAM,eAAe,CAAC,MAAkB;AA7KlD;AA8KY,cAAM,EAAE,cAAc,IAAI;AAE1B,6DAAe,SAAf;AAEA,aAAK,IAAI,EAAE,QAAQ,CAAC,EAAE;AACtB,aAAK,KAAK,IAAI;AAEd,qBAAa,KAAK,IAAI,CAAC,QAAQ;AAC7B,cAAI,CAAC,IAAI,SAAS;AAChB,mBAAO;AAAA,cACL,OAAO;AAAA,gBACL,WAAW;AAAA,gBACX,YAAY;AAAA,cACd;AAAA,YACF;AAAA,UACF;AAEA,iBAAO;AAAA,YACL,OAAO;AAAA,cACL,WAAW,IAAI,QAAQ,MAAM;AAAA,cAC7B,YAAY,IAAI,QAAQ,MAAM;AAAA,YAChC;AAAA,YACA,eAAe,IAAI,QAAQ,gBACvB;AAAA,cACE,OAAO;AAAA,gBACL,SAAS,IAAI,QAAQ,cAAc,MAAM;AAAA,cAC3C;AAAA,YACF,IACA;AAAA,UACN;AAAA,QACF,CAAC;AAAA,MACH;AAEA,YAAM,cAAc,CAAC,MAAkB;AACrC,YAAI,CAAC,IAAI;AACP,qBAAW;AACX;AAAA,QACF;AAEA,YAAI,EAAE,QAAQ,CAAC,EAAE;AAEjB,kBAAU,IAAI,EAAE;AAAA,MAClB;AAEA,YAAM,aAAa,MAAM;AACvB,YAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG;AACpB,qBAAW;AACX;AAAA,QACF;AAEA,cAAM,IAAI,KAAK,IAAI;AACnB,cAAM,KAAK,IAAI,OAAO,IAAI;AAC1B,cAAM,SAAS,IAAI,KAAK,IAAI,OAAO,cAAc;AAEjD,YAAI,QAAQ;AACV;AAAA,QACF;AAEA,gBAAQ,QAAQ,EACb,KAAK,MAAM,WAAW,EAAE,OAAO,CAAC,CAAC,EACjC,KAAK,MAAM,WAAW,CAAC;AAAA,MAC5B;AAEA,YAAM,iBAAiB,cAAc,cAAc,EAAE,SAAS,KAAK,CAAC;AACpE,YAAM,iBAAiB,aAAa,aAAa,EAAE,SAAS,KAAK,CAAC;AAClE,YAAM,iBAAiB,YAAY,YAAY,EAAE,SAAS,KAAK,CAAC;AAChE,YAAM,iBAAiB,eAAe,YAAY,EAAE,SAAS,KAAK,CAAC;AAEnE,aAAO,MAAM;AACX,cAAM,oBAAoB,cAAc,YAAY;AACpD,cAAM,oBAAoB,aAAa,WAAW;AAClD,cAAM,oBAAoB,YAAY,UAAU;AAChD,cAAM,oBAAoB,eAAe,UAAU;AAAA,MACrD;AAAA,IACF,IACA;AAAA,IACJ,YAAY,CAAC,SAAS;AAAA,EACxB,CAAC;AACH;;;AC5PA,SAAS,kBAAkB;AAC3B,SAAS,oBAAAC,yBAAwB;AACjC,SAAS,YAAY,cAAc;;;ACEnC,SAAS,mBAAmBC,eAAc;AACnC,IAAI,SAASA,QAAO,EAAC,kBAAiB,yDAAwD,mBAAkB,EAAC,QAAO,EAAC,MAAK,YAAW,GAAE,wBAAuB,EAAC,MAAK,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7N,IAAI,aAAa;AACjB,IAAI,SAAS;AACb,IAAI,aAAaA,QAAO,EAAC,kBAAiB,aAAY,mBAAkB,EAAC,SAAQ,EAAC,MAAK,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5I,IAAI,iBAAiB;AACrB,IAAI,aAAa;AACjB,IAAI,cAAc;AAClB,IAAI,YAAY;AAChB,IAAI,OAAO;AACX,IAAI,QAAQ;AACZ,IAAI,WAAW;;;AD8GV,gBAAAC,MA6KF,QAAAC,aA7KE;AArEZ,IAAM,SAAS;AAAA,EACb,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,sBAAsB;AAAA,IACtB,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AAlFP;AAmFI,UAAM,UAAU,WAAW;AAC3B,UAAM,WAAW,oBAAoB;AAErC,UAAM,gBAAgB,iBAAiB;AACvC,UAAM,qBAAoB,mBAAc,WAAd,mBAAsB;AAChD,UAAM,oBAAmB,mBAAc,WAAd,mBAAsB;AAE/C,UAAM,YAAY,OAAY,IAAI;AAElC,UAAM,EAAE,SAAS,IAAI,YAAY;AAAA,MAC/B,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ,cAAc,UAAU;AAAA,IAClC,CAAC;AAED,UAAM,yBAAyB,2BAA2B;AAE1D,UAAM,cAAc,CAAC,MAA2C;AAC9D,UAAID,eAAc,aAAaA,eAAcA,YAAW,SAAS;AAC/D,QAAAA,YAAW,QAAQ,CAAC;AAAA,MACtB;AAEA,UAAI,CAAC,EAAE,kBAAkB;AACvB,gBAAQ,IAAI;AAAA,MACd;AAAA,IACF;AAEA,UAAM,mBAAmB,MAAM;AA9GnC,UAAAE,KAAAC;AA+GM,UAAI,CAAC,UAAU;AACb,eAAO;AAAA,MACT;AACA,UAAI,SAAS,QAAQ;AACnB,eAAO;AAAA,MACT;AAEA,UAAI,CAACH,eAAc,CAAC,kBAAkB;AACpC,eACE,gBAAAF;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAe;AAAA,YACf,SAAS;AAAA,YAET,0BAAAA,KAAC,oBAAS;AAAA;AAAA,QACZ;AAAA,MAEJ;AAEA,UAAIE,eAAc,YAAYA,eAAcA,YAAW,QAAQ;AAC7D,gBAAOE,MAAAF,YAAW,WAAX,gBAAAE,IAAA,KAAAF;AAAA,MACT;AACA,UACE,oBACA,YAAY,oBACZ,iBAAiB,QACjB;AACA,gBAAOG,MAAA,iBAAiB,WAAjB,gBAAAA,IAAA;AAAA,MACT;AAEA,aACE,gBAAAL;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAe;AAAA,UACf,cACEE,eAAc,eAAeA,cACzBA,YAAW,YACX,oBAAoB,eAAe,mBACnC,iBAAiB,YACjB;AAAA,UAEN,SAAS;AAAA,UAEP,iBAAM;AACN,gBACEA,eACA,gBAAgBA,eAChBA,YAAW,YACX;AACA,qBAAOA,YAAW,WAAW;AAAA,YAC/B;AACA,gBACE,oBACA,gBAAgB,oBAChB,iBAAiB,YACjB;AACA,qBAAO,iBAAiB,WAAW;AAAA,YACrC;AAEA,gBAAI,wBAAwB;AAC1B,qBAAO,gBAAAF,KAAC,qBAAU;AAAA,YACpB;AAEA,mBAAO,gBAAAA,KAAC,oBAAS;AAAA,UACnB,GAAG;AAAA;AAAA,MACL;AAAA,IAEJ;AAEA,UAAM,eAAe,CAAC,MAA2C;AApLrE,UAAAI;AAqLM,UAAID,gBAAe,aAAaA,gBAAeA,aAAY,SAAS;AAClE,QAAAA,aAAY,QAAQ,CAAC;AAAA,MACvB;AAEA,UACE,CAAC,EAAE,oBACH,qBACA,aAAa,mBACb;AACA,SAAAC,MAAA,kBAAkB,YAAlB,gBAAAA,IAAA,wBAA4B;AAAA,MAC9B;AAAA,IACF;AAEA,UAAM,oBAAoB,MAAM;AAlMpC,UAAAA;AAmMM,YAAM,SAAS,CAAC,YAAY,SAAS;AAErC,YAAM,kBAAkB,CAACD,iBACtBA,gBAAe,YAAYA,gBAAeA,aAAY,UACtDA,gBACC,gBAAgBA,gBAChBA,aAAY,cACbA,gBAAe,aAAaA,gBAAeA,aAAY;AAE1D,UACE,EACE,gBAAgBA,YAAW,KAC3B,iBAAgBC,MAAA,cAAc,WAAd,gBAAAA,IAAsB,WAAW,MAEnD,CAAC,QACD;AACA,eAAO;AAAA,MACT;AACA,UAAID,gBAAe,YAAYA,gBAAeA,aAAY,QAAQ;AAChE,eAAOA,aAAY,OAAO;AAAA,MAC5B;AACA,UACE,qBACA,YAAY,qBACZ,kBAAkB,QAClB;AACA,eAAO,kBAAkB,OAAO;AAAA,MAClC;AAEA,aACE,gBAAAH;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAe;AAAA,UACf,cACEG,gBAAe,eAAeA,eAC1BA,aAAY,YACZ,qBAAqB,eAAe,oBACpC,kBAAkB,YAClB;AAAA,UAEN,SAAS;AAAA,UAEP,iBAAM;AACN,gBACEA,gBACA,gBAAgBA,gBAChBA,aAAY,YACZ;AACA,qBAAOA,aAAY,WAAW;AAAA,YAChC;AACA,gBACE,qBACA,gBAAgB,qBAChB,kBAAkB,YAClB;AACA,qBAAO,kBAAkB,WAAW;AAAA,YACtC;AAEA,mBAAO,gBAAAH,KAAC,qBAAU;AAAA,UACpB,GAAG;AAAA;AAAA,MACL;AAAA,IAEJ;AAEA,UAAM,UAAU,CAAC,EACd,wBAAwB,UAAUG,gBACnCD,eACA;AAGF,WACE,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAe,OAAO;AAAA,UACpB;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD,OAAOK;AAAA,UACL,WAAW;AAAA,YACT,CAAC,WAAW,OAAO,SAAS,GAAG;AAAA,YAC/B,CAAC,WAAW,OAAO,2BAA2B,GAC5C;AAAA,YACF,CAAC,WAAW,OAAO,SAAS,GAAG;AAAA,YAC/B,CAAC,WAAW,OAAO,2BAA2B,GAC5C;AAAA,YACF,CAAC,WAAW,OAAO,WAAW,GAAG;AAAA,YACjC,CAAC,WAAW,OAAO,6BAA6B,GAC9C;AAAA,YACF,CAAC,WAAW,OAAO,UAAU,GAAG;AAAA,YAChC,CAAC,WAAW,OAAO,MAAM,GAAG;AAAA,YAC5B,CAAC,WAAW,OAAO,wBAAwB,GACzC;AAAA,YACF,CAAC,WAAW,OAAO,QAAQ,GAAG;AAAA,YAC9B,CAAC,WAAW,OAAO,eAAe,GAChC,mBAAmB,WAAW;AAAA,YAChC,CAAC,WAAW,OAAO,iCAAiC,GAClD;AAAA,YACF,CAAc,KAAK,OAAO,OAAO,SAAS,GAAG,GAAG;AAAA,UAClD,CAAC;AAAA,QACH;AAAA,QAEA;AAAA,0BAAAN,KAAC,SAAI,WAAe,UAAU;AAAA,UAC9B,gBAAAC,MAAC,SAAI,WAAe,WAClB;AAAA,4BAAAA,MAAC,SAAI,WAAe,MACjB;AAAA,sCAAwB,UAAU,kBAAkB;AAAA,cACpD,iBAAiB;AAAA,cACjB;AAAA,eACH;AAAA,YACA,gBAAAD,KAAC,SAAI,KAAK,WAAW,WAAe,QAClC,0BAAAC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAe,WAAW;AAAA,kBACxB;AAAA,gBACF,CAAC;AAAA,gBAEA;AAAA,yBAAO,UAAU,WAChB,gBAAAD,KAAC,SAAI,WAAe,YAAa,iBAAM,IAEvC;AAAA,kBAEF,gBAAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAe;AAAA,sBACf,MAAK;AAAA,sBACL,eAAY;AAAA,sBACZ,SAAS;AAAA;AAAA,kBACX;AAAA;AAAA;AAAA,YACF,GACF;AAAA,YACA,gBAAAC,MAAC,SAAI,WAAe,OACjB;AAAA;AAAA,cACA,wBAAwB,WAAW,kBAAkB;AAAA,eACxD;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AAErB,IAAO,iBAAQ;;;ATnNT,SA2BE,OAAAM,MA3BF,QAAAC,aAAA;AAnGN,IAAM,UAAUC,eAAgC,IAAW;AAEpD,SAAS,eAAe;AAC7B,SAAOC,YAAW,OAAO;AAC3B;AAaA,IAAM,YAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,QAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAhDN;AAiDE,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,WAAW,oBAAoB;AAErC,QAAM,EAAE,IAAI,IAAIC,YAAW;AAE3B,QAAM,eAAeC,QAAuB,IAAI;AAChD,QAAM,SAASA,QAAuB,IAAI;AAC1C,QAAM,WAAWA,QAAuB,IAAI;AAC5C,QAAM,UAAUA,QAAuB,IAAI;AAC3C,QAAM,YAAYA,QAAuB,IAAI;AAE7C,QAAM,yBAAyB,2BAA2B;AAC1D,QAAM,qBAAqB,oBAAoB;AAE/C,qBAAmB;AAAA,IACjB,MAAM,CAAC,YAAY;AAAA,IACnB,WAAW;AAAA,EACb,CAAC;AACD,uBAAqB;AAAA,IACnB,OAAO,cAAc;AAAA,IACrB,MACE,cAAc,UAAU,cAAc,CAAC,QAAQ,IAAI,CAAC,UAAU,SAAS;AAAA,IACzE,WAAW,CAAC;AAAA,EACd,CAAC;AACD,0BAAwB;AAAA,IACtB,OAAO,cAAc;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AACT,UAAI;AAAA,IACN;AAAA,EACF,CAAC;AAED,QAAM,YAAY,CAAC,CAACF;AAEpB,QAAM,eAAc,0CAAU,WAAV,YAAoB,KAAK;AAC7C,QAAM,YAAY;AAClB,QAAM,cACJ,cAAc,cAAc,UAAU,eAAe,YAAY,IAAI;AACvE,QAAM,aAAa,aAAa;AAChC,QAAM,eACJ,cAAc,UAAU,cAAc,aAAa,IAAI,aAAa;AAEtE,QAAM,mBAAkB,0CAAU,oBAAV,YAA6B;AACrD,QAAM,sBAAsB,QAAQ,eAAe;AAEnD,QAAM,mBAA4C,CAAC,MAAM;AAlG3D,QAAAG,KAAAC;AAmGI,KAAAD,MAAAH,WAAA,gBAAAA,QAAQ,eAAR,gBAAAG,IAAA,KAAAH,SAAqB;AAErB,QAAI,CAAC,EAAE,kBAAkB;AACvB,OAAAI,MAAA,SAAS,YAAT,gBAAAA,IAAkB,OAAO;AAAA,QACvB,KAAK;AAAA,QACL,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAEA,SACE,gBAAAR;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACC,OAAO;AAAA,QACL,OAAO;AAAA,UACL,OAAO,EAAE,IAAI,GAAG;AAjH1B,gBAAAO;AAkHY,aAAAA,MAAA,qCAAU,YAAV,gBAAAA,IAAmB,OAAO;AAAA,cACxB;AAAA,cACA,UAAU;AAAA,YACZ;AAAA,UACF;AAAA,QACF;AAAA,QACA,CAAC,QAAQ;AAAA,MACX;AAAA,MAEA,0BAAAN;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,WAAe,UAAU;AAAA,YACvB,iBACE,oBAAoB,gBAAgB,oBAAoB,cACpD,kBACA;AAAA,UACR,CAAC;AAAA,UACD,OAAOQ;AAAA,YACL,WAAW;AAAA,cACT,CAAC,WAAW,eAAe,GAAG;AAAA,cAC9B,CAAC,WAAW,kBAAkB,GAAG;AAAA,cACjC,CAAC,WAAW,OAAO,MAAM,GAAGL,WAAA,gBAAAA,QAAQ;AAAA,cACpC,CAAC,WAAW,OAAO,wBAAwB,GACzCA,WAAA,gBAAAA,QAAQ;AAAA,cACV,CAAK,KAAK,SAAS,GAAG,GAAG,GAAG;AAAA,cAC5B,CAAK,KAAK,SAAS,KAAK,GAAG,GAAG;AAAA,cAC9B,CAAK,KAAK,SAAS,IAAI,GAAG,GAAG;AAAA,cAC7B,CAAK,KAAK,SAAS,MAAM,GAAG,GAAG;AAAA,cAC/B,CAAK,KAAK,kBAAkB,GAC1B,oBAAoB,kBACpB,oBAAoB,gBAChB,WAAW,6BACX;AAAA,YACR,CAAC;AAAA,UACH;AAAA,UAEA;AAAA,4BAAAJ,KAAC,SAAI,WAAe,KAAK,KAAK,QAAQ;AAAA,YACrCI,WACC,gBAAAJ;AAAA,cAAC;AAAA,+CACKI,UADL;AAAA,gBAEC,KAAK;AAAA,gBACL;AAAA,gBACA,YAAY;AAAA;AAAA,YACd;AAAA,YAEF,gBAAAJ;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAe,MAAM;AAAA,kBACnB;AAAA,kBACA;AAAA,gBACF,CAAC;AAAA,gBACD,KAAK;AAAA,gBAEJ;AAAA;AAAA,cAPI,qCAAU;AAAA,YAQjB;AAAA,YACC,EAAC,qCAAU,WACV,cAAc,UAAU,eACxB,CAAC,sBACC,gBAAAA,KAAC,SAAI,WAAe,KAAK,EAAE,UAAU,CAAC,GAAG,KAAK,SAAS;AAAA;AAAA;AAAA,MAE7D;AAAA;AAAA,EACF;AAEJ;AAEA,UAAU,cAAc;AAExB,IAAO,oBAAQ;;;AWnLf,SAAS,cAAAU,mBAAkB;AAC3B,SAAS,oBAAAC,yBAAwB;AACjC,SAAS,UAAAC,eAAc;;;ACDvB,SAAS,mBAAmBC,eAAc;AACnC,IAAIC,aAAYD,QAAO,EAAC,kBAAiB,mDAAkD,mBAAkB,EAAC,iBAAgB,EAAC,gBAAe,aAAY,cAAa,aAAY,eAAc,aAAY,aAAY,YAAW,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC9Q,IAAIE,OAAM;AAKV,IAAIC,SAAQ;AACZ,IAAIC,QAAO,EAAC,oBAAmB,oBAAmB,UAAS,EAAC,KAAI,oBAAmB,OAAM,mBAAkB,EAAC;;;ADgF3G,gBAAAC,YAAA;AAxER,IAAM,cAA0C,CAAC;AAAA,EAC/C,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAzBN;AA0BE,QAAM,WAAW,oBAAoB;AACrC,QAAM,EAAE,IAAI,IAAIC,YAAW;AAE3B,QAAM,eAAeC,QAAuB,IAAI;AAChD,QAAM,WAAWA,QAAuB,IAAI;AAE5C,iBAAe;AAAA,IACb,WAAW;AAAA,IACX,MAAM,CAAC,YAAY;AAAA,EACrB,CAAC;AACD,iBAAe;AAAA,IACb,WAAW;AAAA,IACX,MAAM,CAAC,QAAQ;AAAA,EACjB,CAAC;AACD,iBAAe;AAAA,IACb,WAAW;AAAA,IACX,MAAM,CAAC,QAAQ;AAAA,EACjB,CAAC;AAED,QAAM,UAAUA,QAAO,KAAK;AAE5B,QAAM,aAAsC,CAAC,MAAM;AACjD,qDAAiB;AAEjB,QAAI,EAAE,kBAAkB;AACtB;AAAA,IACF;AAEA,QAAI,QAAQ,SAAS;AACnB;AAAA,IACF;AACA,YAAQ,UAAU;AAElB,QAAI;AAAA,EACN;AACA,QAAM,eAAwC,CAAC,MAAM;AACnD,MAAE,gBAAgB;AAAA,EACpB;AAEA,QAAM,eAAc,0CAAU,WAAV,YAAoB,KAAK,IAAI;AACjD,QAAM,gBAAe,0CAAU,WAAV,YAAoB,KAAK,IAAI;AAClD,QAAM,mBAAkB,0CAAU,oBAAV,YAA6B;AAErD,SACE,gBAAAF;AAAA,IAAC;AAAA;AAAA,MACC,WAAeG,WAAU;AAAA,QACvB,iBAAiB,QAAQ,eAAe;AAAA,MAC1C,CAAC;AAAA,MACD,KAAK;AAAA,MACL,OAAOC;AAAA,QACL,WAAW;AAAA,UACT,CAAC,WAAW,YAAY,YAAY,GAAG;AAAA,UACvC,CAAC,WAAW,eAAe,GAAG;AAAA,UAC9B,CAAC,WAAW,kBAAkB,GAAG;AAAA,UACjC,CAAKC,MAAK,SAAS,GAAG,GAAG,GAAG;AAAA,UAC5B,CAAKA,MAAK,SAAS,KAAK,GAAG,GAAG;AAAA,UAC9B,CAAKA,MAAK,kBAAkB,GAC1B,oBAAoB,kBACpB,oBAAoB,gBAChB,WAAW,6BACX;AAAA,QACR,CAAC;AAAA,MACH;AAAA,MAEA,0BAAAL,KAAC,SAAI,WAAeM,MAAK,KAAK,UAAU,SAAS,YAC/C,0BAAAN,KAAC,SAAI,WAAeO,QAAO,SAAS,cACjC,UACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,YAAY,cAAc;AAE1B,IAAO,sBAAQ;;;AEnGf,SAAS,cAAAC,mBAAkB;AAC3B,SAAS,oBAAAC,yBAAwB;AACjC,SAAS,UAAAC,eAAc;;;ACDvB,SAAS,mBAAmBC,eAAc;AACnC,IAAIC,aAAYD,QAAO,EAAC,kBAAiB,mDAAkD,mBAAkB,EAAC,iBAAgB,EAAC,gBAAe,YAAW,cAAa,YAAW,eAAc,YAAW,aAAY,WAAU,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1Q,IAAIE,OAAM;AAKV,IAAIC,SAAQ;AACZ,IAAIC,QAAO,EAAC,oBAAmB,mBAAkB,UAAS,EAAC,KAAI,mBAAkB,OAAM,kBAAiB,EAAC;;;ADgFxG,gBAAAC,YAAA;AAxER,IAAM,QAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AACF,MAAM;AAzBN;AA0BE,QAAM,WAAW,oBAAoB;AACrC,QAAM,EAAE,IAAI,IAAIC,YAAW;AAE3B,QAAM,eAAeC,QAAuB,IAAI;AAChD,QAAM,WAAWA,QAAuB,IAAI;AAE5C,iBAAe;AAAA,IACb,WAAW;AAAA,IACX,MAAM,CAAC,YAAY;AAAA,EACrB,CAAC;AACD,iBAAe;AAAA,IACb,WAAW;AAAA,IACX,MAAM,CAAC,QAAQ;AAAA,EACjB,CAAC;AACD,iBAAe;AAAA,IACb,WAAW;AAAA,IACX,MAAM,CAAC,QAAQ;AAAA,EACjB,CAAC;AAED,QAAM,UAAUA,QAAO,KAAK;AAE5B,QAAM,aAAsC,CAAC,MAAM;AACjD,qDAAiB;AAEjB,QAAI,EAAE,kBAAkB;AACtB;AAAA,IACF;AAEA,QAAI,QAAQ,SAAS;AACnB;AAAA,IACF;AACA,YAAQ,UAAU;AAElB,QAAI;AAAA,EACN;AACA,QAAM,eAAwC,CAAC,MAAM;AACnD,MAAE,gBAAgB;AAAA,EACpB;AAEA,QAAM,eAAc,0CAAU,WAAV,YAAoB,KAAK,IAAI;AACjD,QAAM,gBAAe,0CAAU,WAAV,YAAoB,KAAK,IAAI;AAClD,QAAM,mBAAkB,0CAAU,oBAAV,YAA6B;AAErD,SACE,gBAAAF;AAAA,IAAC;AAAA;AAAA,MACC,WAAeG,WAAU;AAAA,QACvB,iBAAiB,QAAQ,eAAe;AAAA,MAC1C,CAAC;AAAA,MACD,KAAK;AAAA,MACL,OAAOC;AAAA,QACL,WAAW;AAAA,UACT,CAAC,WAAW,YAAY,YAAY,GAAG;AAAA,UACvC,CAAC,WAAW,eAAe,GAAG;AAAA,UAC9B,CAAC,WAAW,kBAAkB,GAAG;AAAA,UACjC,CAAKC,MAAK,SAAS,GAAG,GAAG,GAAG;AAAA,UAC5B,CAAKA,MAAK,SAAS,KAAK,GAAG,GAAG;AAAA,UAC9B,CAAKA,MAAK,kBAAkB,GAC1B,oBAAoB,kBACpB,oBAAoB,gBAChB,WAAW,6BACX;AAAA,QACR,CAAC;AAAA,MACH;AAAA,MAEA,0BAAAL,KAAC,SAAI,WAAeM,MAAK,KAAK,UAAU,SAAS,YAC/C,0BAAAN,KAAC,SAAI,WAAeO,QAAO,SAAS,cACjC,UACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,cAAc;AAEpB,IAAO,gBAAQ;",
6
6
  "names": ["jsx", "jsx", "useActions", "assignInlineVars", "createContext", "useContext", "useRef", "useEffect", "useState", "useState", "useEffect", "useEffect", "useEffect", "refs", "refs", "refs", "_7a468", "_7a468", "_7a468", "_7a468", "assignInlineVars", "_7a468", "jsx", "jsxs", "backButton", "closeButton", "_a", "_b", "assignInlineVars", "jsx", "jsxs", "createContext", "useContext", "appBar", "useActions", "useRef", "_a", "_b", "assignInlineVars", "useActions", "assignInlineVars", "useRef", "_7a468", "container", "dim", "paper", "vars", "jsx", "useActions", "useRef", "container", "assignInlineVars", "vars", "dim", "paper", "useActions", "assignInlineVars", "useRef", "_7a468", "container", "dim", "paper", "vars", "jsx", "useActions", "useRef", "container", "assignInlineVars", "vars", "dim", "paper"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stackflow/plugin-basic-ui",
3
- "version": "1.3.3",
3
+ "version": "1.3.4-alpha.4+9350a2ba",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": {
@@ -70,5 +70,5 @@
70
70
  "build"
71
71
  ]
72
72
  },
73
- "gitHead": "663b913ff1339dc4d1e0c680d1c15a85c5c9e242"
73
+ "gitHead": "9350a2ba696c4b69e6df770924153cb304563dbc"
74
74
  }
package/src/components/AppBar.tsx CHANGED
@@ -29,8 +29,8 @@ type AppBarProps = Partial<
29
29
  >
30
30
  > & {
31
31
  title?: React.ReactNode;
32
- appendLeft?: () => React.ReactNode;
33
- appendRight?: () => React.ReactNode;
32
+ renderLeft?: () => React.ReactNode;
33
+ renderRight?: () => React.ReactNode;
34
34
  backButton?:
35
35
  | {
36
36
  renderIcon?: () => React.ReactNode;
@@ -58,8 +58,8 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
58
58
  (
59
59
  {
60
60
  title,
61
- appendLeft,
62
- appendRight,
61
+ renderLeft,
62
+ renderRight,
63
63
  backButton,
64
64
  closeButton,
65
65
  closeButtonLocation = "left",
@@ -260,7 +260,7 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
260
260
  const hasLeft = !!(
261
261
  (closeButtonLocation === "left" && closeButton) ||
262
262
  backButton ||
263
- appendLeft
263
+ renderLeft
264
264
  );
265
265
 
266
266
  return (
@@ -299,7 +299,7 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
299
299
  <div className={css.left}>
300
300
  {closeButtonLocation === "left" && renderCloseButton()}
301
301
  {renderBackButton()}
302
- {appendLeft?.()}
302
+ {renderLeft?.()}
303
303
  </div>
304
304
  <div ref={centerRef} className={css.center}>
305
305
  <div
@@ -321,7 +321,7 @@ const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
321
321
  </div>
322
322
  </div>
323
323
  <div className={css.right}>
324
- {appendRight?.()}
324
+ {renderRight?.()}
325
325
  {closeButtonLocation === "right" && renderCloseButton()}
326
326
  </div>
327
327
  </div>