@100mslive/roomkit-react 0.3.22-alpha.1 → 0.3.22-alpha.3

package/dist/chunk-3MRQJSIY.js

@@ -0,0 +1,171 @@
+import {
+  Pagination,
+  usePagesWithTiles,
+  useVideoTileContext
+} from "./chunk-PJQSPAFZ.js";
+import {
+  VideoTile_default
+} from "./chunk-26D5FDBW.js";
+import {
+  Box,
+  Flex
+} from "./chunk-7QZJMUHM.js";
+import {
+  APP_DATA,
+  __spreadProps,
+  __spreadValues,
+  config,
+  init_define_process_env
+} from "./chunk-TBXRX6MK.js";
+
+// src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
+init_define_process_env();
+import React from "react";
+var Root = ({
+  children,
+  edgeToEdge,
+  hasSidebar
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    Flex,
+    {
+      direction: hasSidebar ? "row" : "column",
+      css: { h: "100%", flex: "1 1 0", minWidth: 0, gap: "$6", "@md": { gap: edgeToEdge ? 0 : "$6" } }
+    },
+    children
+  );
+};
+var ProminentSection = ({ children, css = {} }) => {
+  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", css: __spreadValues({ flex: "1 1 0", gap: "$2", minHeight: 0 }, css) }, children);
+};
+var SecondarySection = ({
+  tiles,
+  children,
+  edgeToEdge,
+  hasSidebar
+}) => {
+  const tileLayoutProps = useVideoTileContext();
+  if (!(tiles == null ? void 0 : tiles.length)) {
+    return null;
+  }
+  const gridStyles = hasSidebar ? {
+    gridTemplateColumns: "1fr",
+    gridTemplateRows: `repeat(${tiles.length}, minmax(0, 1fr))`,
+    maxHeight: "100%",
+    width: 240
+  } : {
+    gridTemplateRows: React.Children.count(children) > 0 ? "136px auto" : "154px",
+    gridTemplateColumns: `repeat(${tiles.length}, minmax(0, 1fr))`
+  };
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      css: __spreadProps(__spreadValues({
+        display: "grid",
+        margin: "auto",
+        gap: hasSidebar ? "$8" : "$2 $4",
+        placeItems: "center"
+      }, gridStyles), {
+        "@md": { gap: edgeToEdge ? 0 : "$4" }
+      })
+    },
+    tiles.map((tile) => {
+      var _a, _b, _c, _d;
+      return /* @__PURE__ */ React.createElement(
+        VideoTile_default,
+        __spreadValues({
+          key: ((_a = tile.track) == null ? void 0 : _a.id) || ((_b = tile.peer) == null ? void 0 : _b.id),
+          peerId: (_c = tile.peer) == null ? void 0 : _c.id,
+          trackId: (_d = tile.track) == null ? void 0 : _d.id,
+          rootCSS: __spreadProps(__spreadValues({
+            padding: 0,
+            maxWidth: 240,
+            aspectRatio: "16 / 9"
+          }, hasSidebar ? { w: "100%" } : { h: "100%" }), {
+            "@md": { aspectRatio: "1" }
+          }),
+          objectFit: "contain"
+        }, tileLayoutProps)
+      );
+    }),
+    children && /* @__PURE__ */ React.createElement(Box, { css: { gridColumn: hasSidebar ? 1 : `1/span ${tiles.length}` } }, children)
+  );
+};
+var ProminenceLayout = {
+  Root,
+  ProminentSection,
+  SecondarySection
+};
+
+// src/Prebuilt/components/SecondaryTiles.tsx
+init_define_process_env();
+import React2, { useEffect, useRef, useState } from "react";
+import { useMedia } from "react-use";
+import { selectAppData, selectSessionStore, selectTrackByID, useHMSStore } from "@100mslive/react-sdk";
+var SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge, hasSidebar }) => {
+  var _a, _b;
+  const isMobile = useMedia(config.media.md);
+  const maxTileCount = isMobile ? 2 : 4;
+  const [page, setPage] = useState(0);
+  const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId));
+  const spotlightPeerId = useHMSStore(selectSessionStore("spotlight" /* SPOTLIGHT */));
+  const activeScreensharePeerId = useHMSStore(selectAppData(APP_DATA.activeScreensharePeerId));
+  const pinnedPeer = (_a = useHMSStore(selectTrackByID(pinnedTrackId))) == null ? void 0 : _a.peerId;
+  const pageChangedAfterPinning = useRef(false);
+  const pagesWithTiles = usePagesWithTiles({
+    peers: spotlightPeerId || pinnedPeer ? [...peers].sort((p1, p2) => {
+      if (activeScreensharePeerId === p1.id) {
+        return -1;
+      }
+      if (activeScreensharePeerId === p2.id) {
+        return 1;
+      }
+      const peerIdList = [pinnedPeer, spotlightPeerId];
+      if (peerIdList.includes(p1.id)) {
+        return -1;
+      }
+      if (peerIdList.includes(p2.id)) {
+        return 1;
+      }
+      return 0;
+    }) : peers,
+    maxTileCount
+  });
+  const pageSize = ((_b = pagesWithTiles[0]) == null ? void 0 : _b.length) || 0;
+  useEffect(() => {
+    var _a2;
+    if (peers.length > 0 && !((_a2 = pagesWithTiles[page]) == null ? void 0 : _a2.length)) {
+      setPage(Math.max(0, page - 1));
+    }
+  }, [peers, page, pagesWithTiles]);
+  useEffect(() => {
+    if (pageSize > 0) {
+      onPageSize == null ? void 0 : onPageSize(pageSize);
+    }
+  }, [pageSize, onPageSize]);
+  useEffect(() => {
+    if ((pinnedPeer || spotlightPeerId) && page !== 0 && !pageChangedAfterPinning.current) {
+      setPage(0);
+      pageChangedAfterPinning.current = true;
+    } else if (!pinnedPeer && !spotlightPeerId) {
+      pageChangedAfterPinning.current = false;
+    }
+  }, [pinnedPeer, spotlightPeerId, page]);
+  return /* @__PURE__ */ React2.createElement(ProminenceLayout.SecondarySection, { tiles: pagesWithTiles[page], edgeToEdge, hasSidebar }, !edgeToEdge && /* @__PURE__ */ React2.createElement(
+    Pagination,
+    {
+      page,
+      onPageChange: (page2) => {
+        setPage(page2);
+        onPageChange == null ? void 0 : onPageChange(page2);
+      },
+      numPages: pagesWithTiles.length
+    }
+  ));
+};
+
+export {
+  ProminenceLayout,
+  SecondaryTiles
+};
+//# sourceMappingURL=chunk-3MRQJSIY.js.map

package/dist/chunk-3MRQJSIY.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx", "../src/Prebuilt/components/SecondaryTiles.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';\nimport { Box, Flex } from '../../../Layout';\nimport { CSS } from '../../../Theme';\n// @ts-ignore: No implicit Any\nimport VideoTile from '../VideoTile';\nimport { useVideoTileContext } from '../hooks/useVideoTileLayout';\n\nconst Root = ({\n  children,\n  edgeToEdge,\n  hasSidebar,\n}: React.PropsWithChildren<{ edgeToEdge?: boolean; hasSidebar?: boolean }>) => {\n  return (\n    <Flex\n      direction={hasSidebar ? 'row' : 'column'}\n      css={{ h: '100%', flex: '1 1 0', minWidth: 0, gap: '$6', '@md': { gap: edgeToEdge ? 0 : '$6' } }}\n    >\n      {children}\n    </Flex>\n  );\n};\n\nconst ProminentSection = ({ children, css = {} }: React.PropsWithChildren<{ css?: CSS }>) => {\n  return (\n    <Flex direction=\"column\" css={{ flex: '1 1 0', gap: '$2', minHeight: 0, ...css }}>\n      {children}\n    </Flex>\n  );\n};\n\nconst SecondarySection = ({\n  tiles,\n  children,\n  edgeToEdge,\n  hasSidebar,\n}: React.PropsWithChildren<{ tiles: TrackWithPeerAndDimensions[]; edgeToEdge?: boolean; hasSidebar?: boolean }>) => {\n  const tileLayoutProps = useVideoTileContext();\n  if (!tiles?.length) {\n    return null;\n  }\n  const gridStyles = hasSidebar\n    ? {\n        gridTemplateColumns: '1fr',\n        gridTemplateRows: `repeat(${tiles.length}, minmax(0, 1fr))`,\n        maxHeight: '100%',\n        width: 240,\n      }\n    : {\n        gridTemplateRows: React.Children.count(children) > 0 ? '136px auto' : '154px',\n        gridTemplateColumns: `repeat(${tiles.length}, minmax(0, 1fr))`,\n      };\n  return (\n    <Box\n      css={{\n        display: 'grid',\n        margin: 'auto',\n        gap: hasSidebar ? '$8' : '$2 $4',\n        placeItems: 'center',\n        ...gridStyles,\n        '@md': { gap: edgeToEdge ? 0 : '$4' },\n      }}\n    >\n      {tiles.map(tile => {\n        return (\n          <VideoTile\n            key={tile.track?.id || tile.peer?.id}\n            peerId={tile.peer?.id}\n            trackId={tile.track?.id}\n            rootCSS={{\n              padding: 0,\n              maxWidth: 240,\n              aspectRatio: '16 / 9',\n              ...(hasSidebar ? { w: '100%' } : { h: '100%' }),\n              '@md': { aspectRatio: '1' },\n            }}\n            objectFit=\"contain\"\n            {...tileLayoutProps}\n          />\n        );\n      })}\n      {children && <Box css={{ gridColumn: hasSidebar ? 1 : `1/span ${tiles.length}` }}>{children}</Box>}\n    </Box>\n  );\n};\n\nexport const ProminenceLayout = {\n  Root,\n  ProminentSection,\n  SecondarySection,\n};\n", "import React, { useEffect, useRef, useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { selectAppData, selectSessionStore, selectTrackByID, useHMSStore } from '@100mslive/react-sdk';\nimport { LayoutProps } from './VideoLayouts/interface';\nimport { ProminenceLayout } from './VideoLayouts/ProminenceLayout';\nimport { config as cssConfig } from '../../Theme';\nimport { Pagination } from './Pagination';\nimport { usePagesWithTiles } from './hooks/useTileLayout';\nimport { APP_DATA, SESSION_STORE_KEY } from '../common/constants';\n\nexport const SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge, hasSidebar }: LayoutProps) => {\n  const isMobile = useMedia(cssConfig.media.md);\n  const maxTileCount = isMobile ? 2 : 4;\n  const [page, setPage] = useState(0);\n  const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId));\n  const spotlightPeerId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));\n  const activeScreensharePeerId = useHMSStore(selectAppData(APP_DATA.activeScreensharePeerId));\n  const pinnedPeer = useHMSStore(selectTrackByID(pinnedTrackId))?.peerId;\n  const pageChangedAfterPinning = useRef(false);\n  const pagesWithTiles = usePagesWithTiles({\n    peers:\n      spotlightPeerId || pinnedPeer\n        ? [...peers].sort((p1, p2) => {\n            if (activeScreensharePeerId === p1.id) {\n              return -1;\n            }\n            if (activeScreensharePeerId === p2.id) {\n              return 1;\n            }\n            const peerIdList = [pinnedPeer, spotlightPeerId];\n            // put active screenshare peer, pinned peer, spotlight peer at first\n            if (peerIdList.includes(p1.id)) {\n              return -1;\n            }\n            if (peerIdList.includes(p2.id)) {\n              return 1;\n            }\n            return 0;\n          })\n        : peers,\n    maxTileCount,\n  });\n  const pageSize = pagesWithTiles[0]?.length || 0;\n\n  // Handles final peer leaving from the last page\n  useEffect(() => {\n    if (peers.length > 0 && !pagesWithTiles[page]?.length) {\n      setPage(Math.max(0, page - 1));\n    }\n  }, [peers, page, pagesWithTiles]);\n\n  useEffect(() => {\n    if (pageSize > 0) {\n      onPageSize?.(pageSize);\n    }\n  }, [pageSize, onPageSize]);\n\n  useEffect(() => {\n    if ((pinnedPeer || spotlightPeerId) && page !== 0 && !pageChangedAfterPinning.current) {\n      setPage(0);\n      pageChangedAfterPinning.current = true;\n    } else if (!pinnedPeer && !spotlightPeerId) {\n      pageChangedAfterPinning.current = false;\n    }\n  }, [pinnedPeer, spotlightPeerId, page]);\n\n  return (\n    <ProminenceLayout.SecondarySection tiles={pagesWithTiles[page]} edgeToEdge={edgeToEdge} hasSidebar={hasSidebar}>\n      {!edgeToEdge && (\n        <Pagination\n          page={page}\n          onPageChange={page => {\n            setPage(page);\n            onPageChange?.(page);\n          }}\n          numPages={pagesWithTiles.length}\n        />\n      )}\n    </ProminenceLayout.SecondarySection>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React", "_a", "React", "page"]
+}

package/dist/chunk-4X4WB7X3.js

@@ -0,0 +1,98 @@
+import {
+  ProminenceLayout,
+  SecondaryTiles
+} from "./chunk-3MRQJSIY.js";
+import {
+  ToastManager
+} from "./chunk-BQOT4DK7.js";
+import {
+  Box
+} from "./chunk-7QZJMUHM.js";
+import {
+  useResetEmbedConfig,
+  useSetAppDataByKey
+} from "./chunk-ENHSO6YN.js";
+import {
+  APP_DATA,
+  __async,
+  init_define_process_env
+} from "./chunk-TBXRX6MK.js";
+
+// src/Prebuilt/layouts/EmbedView.jsx
+init_define_process_env();
+import React, { useEffect, useMemo } from "react";
+import { selectAppData, selectPeers, selectPeerScreenSharing, useEmbedShare, useHMSStore } from "@100mslive/react-sdk";
+var EmbedView = () => {
+  return /* @__PURE__ */ React.createElement(EmbedScreenShareView, null, /* @__PURE__ */ React.createElement(EmbedComponent, null));
+};
+var EmbedScreenShareView = ({ children }) => {
+  const peers = useHMSStore(selectPeers);
+  const peerPresenting = useHMSStore(selectPeerScreenSharing);
+  const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);
+  const smallTilePeers = useMemo(() => {
+    const smallTilePeers2 = peers.filter((peer) => peer.id !== (peerPresenting == null ? void 0 : peerPresenting.id));
+    return smallTilePeers2;
+  }, [peers, peerPresenting]);
+  useEffect(() => {
+    setActiveScreenSharePeer(peerPresenting == null ? void 0 : peerPresenting.id);
+    return () => {
+      setActiveScreenSharePeer("");
+    };
+  }, [peerPresenting == null ? void 0 : peerPresenting.id, setActiveScreenSharePeer]);
+  return /* @__PURE__ */ React.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React.createElement(ProminenceLayout.ProminentSection, null, children), /* @__PURE__ */ React.createElement(SecondaryTiles, { peers: smallTilePeers }));
+};
+var EmbedComponent = () => {
+  const embedConfig = useHMSStore(selectAppData(APP_DATA.embedConfig));
+  const resetConfig = useResetEmbedConfig();
+  const { iframeRef, startEmbedShare, isEmbedShareInProgress } = useEmbedShare(resetConfig);
+  useEffect(() => {
+    (() => __async(void 0, null, function* () {
+      if (embedConfig && !isEmbedShareInProgress) {
+        try {
+          yield startEmbedShare(embedConfig);
+        } catch (err) {
+          resetConfig();
+          ToastManager.addToast({
+            title: `Error while sharing embed url ${err.message || ""}`,
+            variant: "error"
+          });
+        }
+      }
+    }))();
+  }, [isEmbedShareInProgress, embedConfig, startEmbedShare, resetConfig]);
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      css: {
+        mx: "$8",
+        flex: "3 1 0",
+        "@lg": {
+          flex: "2 1 0",
+          display: "flex",
+          alignItems: "center"
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "iframe",
+      {
+        title: "Embed View",
+        ref: iframeRef,
+        style: {
+          width: "100%",
+          height: "100%",
+          border: 0,
+          borderRadius: "0.75rem"
+        },
+        allow: "autoplay; clipboard-write;",
+        referrerPolicy: "no-referrer"
+      }
+    )
+  );
+};
+
+export {
+  EmbedView,
+  EmbedScreenShareView
+};
+//# sourceMappingURL=chunk-4X4WB7X3.js.map

package/dist/chunk-4X4WB7X3.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Prebuilt/layouts/EmbedView.jsx"],
+  "sourcesContent": ["import React, { useEffect, useMemo } from 'react';\nimport { selectAppData, selectPeers, selectPeerScreenSharing, useEmbedShare, useHMSStore } from '@100mslive/react-sdk';\nimport { SecondaryTiles } from '../components/SecondaryTiles';\nimport { ToastManager } from '../components/Toast/ToastManager';\nimport { ProminenceLayout } from '../components/VideoLayouts/ProminenceLayout';\nimport { Box } from '../../Layout';\nimport { useResetEmbedConfig, useSetAppDataByKey } from '../components/AppData/useUISettings';\nimport { APP_DATA } from '../common/constants';\n\nexport const EmbedView = () => {\n  return (\n    <EmbedScreenShareView>\n      <EmbedComponent />\n    </EmbedScreenShareView>\n  );\n};\n\nexport const EmbedScreenShareView = ({ children }) => {\n  const peers = useHMSStore(selectPeers);\n\n  const peerPresenting = useHMSStore(selectPeerScreenSharing);\n  const [, setActiveScreenSharePeer] = useSetAppDataByKey(APP_DATA.activeScreensharePeerId);\n\n  const smallTilePeers = useMemo(() => {\n    const smallTilePeers = peers.filter(peer => peer.id !== peerPresenting?.id);\n    return smallTilePeers;\n  }, [peers, peerPresenting]);\n\n  useEffect(() => {\n    setActiveScreenSharePeer(peerPresenting?.id);\n    return () => {\n      setActiveScreenSharePeer('');\n    };\n  }, [peerPresenting?.id, setActiveScreenSharePeer]);\n  return (\n    <ProminenceLayout.Root>\n      <ProminenceLayout.ProminentSection>{children}</ProminenceLayout.ProminentSection>\n      <SecondaryTiles peers={smallTilePeers} />\n    </ProminenceLayout.Root>\n  );\n};\n/**\n * EmbedView is responsible for rendering the iframe and managing the screen sharing functionality.\n */\nconst EmbedComponent = () => {\n  const embedConfig = useHMSStore(selectAppData(APP_DATA.embedConfig));\n  const resetConfig = useResetEmbedConfig();\n\n  // need to send resetConfig to clear configuration, if stop screenshare occurs.\n  const { iframeRef, startEmbedShare, isEmbedShareInProgress } = useEmbedShare(resetConfig);\n\n  useEffect(() => {\n    (async () => {\n      if (embedConfig && !isEmbedShareInProgress) {\n        try {\n          await startEmbedShare(embedConfig);\n        } catch (err) {\n          resetConfig();\n          ToastManager.addToast({\n            title: `Error while sharing embed url ${err.message || ''}`,\n            variant: 'error',\n          });\n        }\n      }\n    })();\n  }, [isEmbedShareInProgress, embedConfig, startEmbedShare, resetConfig]);\n\n  return (\n    <Box\n      css={{\n        mx: '$8',\n        flex: '3 1 0',\n        '@lg': {\n          flex: '2 1 0',\n          display: 'flex',\n          alignItems: 'center',\n        },\n      }}\n    >\n      <iframe\n        title=\"Embed View\"\n        ref={iframeRef}\n        style={{\n          width: '100%',\n          height: '100%',\n          border: 0,\n          borderRadius: '0.75rem',\n        }}\n        allow=\"autoplay; clipboard-write;\"\n        referrerPolicy=\"no-referrer\"\n      />\n    </Box>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,OAAO,SAAS,WAAW,eAAe;AAC1C,SAAS,eAAe,aAAa,yBAAyB,eAAe,mBAAmB;AAQzF,IAAM,YAAY,MAAM;AAC7B,SACE,oCAAC,4BACC,oCAAC,oBAAe,CAClB;AAEJ;AAEO,IAAM,uBAAuB,CAAC,EAAE,SAAS,MAAM;AACpD,QAAM,QAAQ,YAAY,WAAW;AAErC,QAAM,iBAAiB,YAAY,uBAAuB;AAC1D,QAAM,CAAC,EAAE,wBAAwB,IAAI,mBAAmB,SAAS,uBAAuB;AAExF,QAAM,iBAAiB,QAAQ,MAAM;AACnC,UAAMA,kBAAiB,MAAM,OAAO,UAAQ,KAAK,QAAO,iDAAgB,GAAE;AAC1E,WAAOA;AAAA,EACT,GAAG,CAAC,OAAO,cAAc,CAAC;AAE1B,YAAU,MAAM;AACd,6BAAyB,iDAAgB,EAAE;AAC3C,WAAO,MAAM;AACX,+BAAyB,EAAE;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,iDAAgB,IAAI,wBAAwB,CAAC;AACjD,SACE,oCAAC,iBAAiB,MAAjB,MACC,oCAAC,iBAAiB,kBAAjB,MAAmC,QAAS,GAC7C,oCAAC,kBAAe,OAAO,gBAAgB,CACzC;AAEJ;AAIA,IAAM,iBAAiB,MAAM;AAC3B,QAAM,cAAc,YAAY,cAAc,SAAS,WAAW,CAAC;AACnE,QAAM,cAAc,oBAAoB;AAGxC,QAAM,EAAE,WAAW,iBAAiB,uBAAuB,IAAI,cAAc,WAAW;AAExF,YAAU,MAAM;AACd,KAAC,MAAY;AACX,UAAI,eAAe,CAAC,wBAAwB;AAC1C,YAAI;AACF,gBAAM,gBAAgB,WAAW;AAAA,QACnC,SAAS,KAAK;AACZ,sBAAY;AACZ,uBAAa,SAAS;AAAA,YACpB,OAAO,iCAAiC,IAAI,WAAW,EAAE;AAAA,YACzD,SAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF,IAAG;AAAA,EACL,GAAG,CAAC,wBAAwB,aAAa,iBAAiB,WAAW,CAAC;AAEtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,QACH,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,UACL,MAAM;AAAA,UACN,SAAS;AAAA,UACT,YAAY;AAAA,QACd;AAAA,MACF;AAAA;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,KAAK;AAAA,QACL,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,cAAc;AAAA,QAChB;AAAA,QACA,OAAM;AAAA,QACN,gBAAe;AAAA;AAAA,IACjB;AAAA,EACF;AAEJ;",
+  "names": ["smallTilePeers"]
+}

package/dist/chunk-7QZJMUHM.js

@@ -0,0 +1,90 @@
+import {
+  init_define_process_env,
+  styled
+} from "./chunk-TBXRX6MK.js";
+
+// src/Layout/Flex.tsx
+init_define_process_env();
+var gapStyles = (value) => {
+  return {
+    "& > * + *": {
+      marginRight: "0",
+      marginLeft: `${0.25 * value}rem`
+    }
+  };
+};
+var Flex = styled("div", {
+  display: "flex",
+  variants: {
+    justify: {
+      start: {
+        justifyContent: "flex-start"
+      },
+      end: {
+        justifyContent: "flex-end"
+      },
+      center: {
+        justifyContent: "center"
+      },
+      between: {
+        justifyContent: "space-between"
+      },
+      around: {
+        justifyContent: "space-around"
+      },
+      evenly: {
+        justifyContent: "space-evenly"
+      }
+    },
+    align: {
+      start: {
+        alignItems: "flex-start"
+      },
+      end: {
+        alignItems: "flex-end"
+      },
+      center: {
+        alignItems: "center"
+      },
+      baseline: {
+        alignItems: "baseline"
+      },
+      strech: {
+        alignItems: "stretch"
+      }
+    },
+    direction: {
+      row: {
+        flexDirection: "row"
+      },
+      column: {
+        flexDirection: "column"
+      },
+      rowReverse: {
+        flexDirection: "row-reverse"
+      },
+      columnReverse: {
+        flexDirection: "column-reverse"
+      }
+    },
+    gap: {
+      1: gapStyles(1),
+      2: gapStyles(2),
+      3: gapStyles(3),
+      4: gapStyles(4)
+    }
+  }
+});
+
+// src/Layout/Box.tsx
+init_define_process_env();
+var Box = styled("div", {});
+
+// src/Layout/index.tsx
+init_define_process_env();
+
+export {
+  Flex,
+  Box
+};
+//# sourceMappingURL=chunk-7QZJMUHM.js.map

package/dist/chunk-7QZJMUHM.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Layout/Flex.tsx", "../src/Layout/Box.tsx", "../src/Layout/index.tsx"],
+  "sourcesContent": ["import { styled } from '../Theme';\n\n/**\n * @see https://tailwindcss.com/docs/space\n */\nconst gapStyles = (value: number) => {\n  return {\n    '& > * + *': {\n      marginRight: '0',\n      marginLeft: `${0.25 * value}rem`,\n    },\n  };\n};\n\nexport const Flex = styled('div', {\n  display: 'flex',\n  variants: {\n    justify: {\n      start: {\n        justifyContent: 'flex-start',\n      },\n      end: {\n        justifyContent: 'flex-end',\n      },\n      center: {\n        justifyContent: 'center',\n      },\n      between: {\n        justifyContent: 'space-between',\n      },\n      around: {\n        justifyContent: 'space-around',\n      },\n      evenly: {\n        justifyContent: 'space-evenly',\n      },\n    },\n    align: {\n      start: {\n        alignItems: 'flex-start',\n      },\n      end: {\n        alignItems: 'flex-end',\n      },\n      center: {\n        alignItems: 'center',\n      },\n      baseline: {\n        alignItems: 'baseline',\n      },\n      strech: {\n        alignItems: 'stretch',\n      },\n    },\n    direction: {\n      row: {\n        flexDirection: 'row',\n      },\n      column: {\n        flexDirection: 'column',\n      },\n      rowReverse: {\n        flexDirection: 'row-reverse',\n      },\n      columnReverse: {\n        flexDirection: 'column-reverse',\n      },\n    },\n    gap: {\n      1: gapStyles(1),\n      2: gapStyles(2),\n      3: gapStyles(3),\n      4: gapStyles(4),\n    },\n  },\n});\n", "import { styled } from '../Theme';\n\nexport const Box = styled('div', {});\n", "export { Flex } from './Flex';\nexport { Box } from './Box';\n"],
+  "mappings": ";;;;;;AAAA;AAKA,IAAM,YAAY,CAAC,UAAkB;AACnC,SAAO;AAAA,IACL,aAAa;AAAA,MACX,aAAa;AAAA,MACb,YAAY,GAAG,OAAO,KAAK;AAAA,IAC7B;AAAA,EACF;AACF;AAEO,IAAM,OAAO,OAAO,OAAO;AAAA,EAChC,SAAS;AAAA,EACT,UAAU;AAAA,IACR,SAAS;AAAA,MACP,OAAO;AAAA,QACL,gBAAgB;AAAA,MAClB;AAAA,MACA,KAAK;AAAA,QACH,gBAAgB;AAAA,MAClB;AAAA,MACA,QAAQ;AAAA,QACN,gBAAgB;AAAA,MAClB;AAAA,MACA,SAAS;AAAA,QACP,gBAAgB;AAAA,MAClB;AAAA,MACA,QAAQ;AAAA,QACN,gBAAgB;AAAA,MAClB;AAAA,MACA,QAAQ;AAAA,QACN,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,OAAO;AAAA,QACL,YAAY;AAAA,MACd;AAAA,MACA,KAAK;AAAA,QACH,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,YAAY;AAAA,MACd;AAAA,MACA,UAAU;AAAA,QACR,YAAY;AAAA,MACd;AAAA,MACA,QAAQ;AAAA,QACN,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACT,KAAK;AAAA,QACH,eAAe;AAAA,MACjB;AAAA,MACA,QAAQ;AAAA,QACN,eAAe;AAAA,MACjB;AAAA,MACA,YAAY;AAAA,QACV,eAAe;AAAA,MACjB;AAAA,MACA,eAAe;AAAA,QACb,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,KAAK;AAAA,MACH,GAAG,UAAU,CAAC;AAAA,MACd,GAAG,UAAU,CAAC;AAAA,MACd,GAAG,UAAU,CAAC;AAAA,MACd,GAAG,UAAU,CAAC;AAAA,IAChB;AAAA,EACF;AACF,CAAC;;;AC3ED;AAEO,IAAM,MAAM,OAAO,OAAO,CAAC,CAAC;;;ACFnC;",
+  "names": []
+}

package/dist/chunk-ABCV7TX5.js

@@ -0,0 +1,71 @@
+import {
+  Text
+} from "./chunk-JKWX7W4K.js";
+import {
+  Box,
+  Flex
+} from "./chunk-7QZJMUHM.js";
+import {
+  init_define_process_env
+} from "./chunk-TBXRX6MK.js";
+
+// src/Prebuilt/layouts/WaitingView.tsx
+init_define_process_env();
+import React from "react";
+var WaitingView = React.memo(
+  ({ icon, title, subtitle }) => {
+    return /* @__PURE__ */ React.createElement(
+      Flex,
+      {
+        align: "center",
+        direction: "column",
+        css: {
+          textAlign: "center",
+          margin: "auto",
+          h: "100%",
+          justifyContent: "center",
+          gap: "$8"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Box,
+        {
+          css: {
+            backgroundColor: "$surface_default",
+            display: "flex",
+            alignItems: "center",
+            gap: "$4",
+            size: "$20",
+            r: "$round",
+            justifyContent: "center"
+          }
+        },
+        icon
+      ),
+      /* @__PURE__ */ React.createElement(
+        Flex,
+        {
+          direction: "column",
+          css: {
+            p: "$1",
+            gap: "$4"
+          }
+        },
+        /* @__PURE__ */ React.createElement(Text, { variant: "h4", css: { "@md": { fontSize: "$md", color: "$on_surface_high" } } }, title),
+        /* @__PURE__ */ React.createElement(
+          Text,
+          {
+            variant: "body1",
+            css: { fontWeight: "$regular", color: "$on_surface_medium", "@md": { fontSize: "$sm" } }
+          },
+          subtitle
+        )
+      )
+    );
+  }
+);
+
+export {
+  WaitingView
+};
+//# sourceMappingURL=chunk-ABCV7TX5.js.map

package/dist/chunk-ABCV7TX5.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Prebuilt/layouts/WaitingView.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport { Box, Flex } from '../../Layout';\nimport { Text } from '../../Text';\n\nexport const WaitingView = React.memo(\n  ({ icon, title, subtitle }: { icon: React.ReactNode; title: string; subtitle: string }) => {\n    return (\n      <Flex\n        align=\"center\"\n        direction=\"column\"\n        css={{\n          textAlign: 'center',\n          margin: 'auto',\n          h: '100%',\n          justifyContent: 'center',\n          gap: '$8',\n        }}\n      >\n        <Box\n          css={{\n            backgroundColor: '$surface_default',\n            display: 'flex',\n            alignItems: 'center',\n            gap: '$4',\n            size: '$20',\n            r: '$round',\n            justifyContent: 'center',\n          }}\n        >\n          {icon}\n        </Box>\n        <Flex\n          direction=\"column\"\n          css={{\n            p: '$1',\n            gap: '$4',\n          }}\n        >\n          <Text variant=\"h4\" css={{ '@md': { fontSize: '$md', color: '$on_surface_high' } }}>\n            {title}\n          </Text>\n          <Text\n            variant=\"body1\"\n            css={{ fontWeight: '$regular', color: '$on_surface_medium', '@md': { fontSize: '$sm' } }}\n          >\n            {subtitle}\n          </Text>\n        </Flex>\n      </Flex>\n    );\n  },\n);\n"],
+  "mappings": ";;;;;;;;;;;;AAAA;AAAA,OAAO,WAAW;AAIX,IAAM,cAAc,MAAM;AAAA,EAC/B,CAAC,EAAE,MAAM,OAAO,SAAS,MAAkE;AACzF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,WAAU;AAAA,QACV,KAAK;AAAA,UACH,WAAW;AAAA,UACX,QAAQ;AAAA,UACR,GAAG;AAAA,UACH,gBAAgB;AAAA,UAChB,KAAK;AAAA,QACP;AAAA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,YACH,iBAAiB;AAAA,YACjB,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,KAAK;AAAA,YACL,MAAM;AAAA,YACN,GAAG;AAAA,YACH,gBAAgB;AAAA,UAClB;AAAA;AAAA,QAEC;AAAA,MACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,YACH,GAAG;AAAA,YACH,KAAK;AAAA,UACP;AAAA;AAAA,QAEA,oCAAC,QAAK,SAAQ,MAAK,KAAK,EAAE,OAAO,EAAE,UAAU,OAAO,OAAO,mBAAmB,EAAE,KAC7E,KACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,KAAK,EAAE,YAAY,YAAY,OAAO,sBAAsB,OAAO,EAAE,UAAU,MAAM,EAAE;AAAA;AAAA,UAEtF;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EAEJ;AACF;",
+  "names": []
+}