@jenesei-software/jenesei-kit-react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Jenesei Software
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,102 @@
+# jenesei-kit-react
+
+This is a frontend library for React from Jenesei Software.
+
+## Customize the theme
+
+To use themes in your application, create a declaration themes file and extend `styled-comments` as follows:
+
+```typescript
+// styled-components.d.ts
+import { ITheme } from '@jenesei-software/jenesei-kit-react/style-theme'
+import 'styled-components'
+
+declare module 'styled-components' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface DefaultTheme extends ITheme {}
+}
+```
+
+Import `JeneseiTheme` and `JeneseiGlobalStyles` from our library and apply them in the root component of your application:
+
+```typescript
+// app.tsx
+import { JeneseiGlobalStyles, JeneseiTheme } from '@jenesei-software/jenesei-kit-react/style-theme'
+
+
+import '@fontsource/inter/100.css'
+import '@fontsource/inter/300.css'
+import '@fontsource/inter/400.css'
+import '@fontsource/inter/500.css'
+import '@fontsource/inter/700.css'
+import '@fontsource/inter/900.css'
+import '@fontsource/roboto/100.css'
+import '@fontsource/roboto/300.css'
+import '@fontsource/roboto/400.css'
+import '@fontsource/roboto/500.css'
+import '@fontsource/roboto/700.css'
+import '@fontsource/roboto/900.css'
+import '@fontsource/roboto-mono/100.css'
+import '@fontsource/roboto-mono/300.css'
+import '@fontsource/roboto-mono/400.css'
+import '@fontsource/roboto-mono/500.css'
+import '@fontsource/roboto-mono/700.css'
+import '@fontsource/roboto-mono/900.css'
+
+function App() {
+  return (
+    ...
+      <ThemeProvider theme={JeneseiTheme}>
+        <JeneseiGlobalStyles />
+        {/* Your components */}
+      </ThemeProvider>
+    ...
+  )
+}
+```
+
+## Customize the cookie and local storage
+
+```typescript
+//jenesei-kit-react.d.ts
+import '@jenesei-software/jenesei-kit-react/context-cookie'
+import '@jenesei-software/jenesei-kit-react/context-local-storage'
+
+declare module '@jenesei-software/jenesei-kit-react/context-cookie' {
+  export interface ValidCookieObject {
+    access_token: string
+    refresh_token: string
+  }
+}
+declare module '@jenesei-software/jenesei-kit-react/context-local-storage' {
+  export interface ValidLocalStorageObject {
+    access_token: string
+    refresh_token: string
+  }
+}
+```
+
+# IMPORTANT
+
+
+To work correctly you need to install the following dependencies:
+
+```bash
+npm install @emotion/styled --save
+npm install @tanstack/react-router --save
+npm install @tanstack/react-virtual --save
+npm install framer-motion --save
+npm install js-cookie --save
+npm install leaflet --save
+npm install leaflet.markercluster --save
+npm install moment --save
+npm install react --save
+npm install react-dom --save
+npm install react-image-webp --save
+npm install react-leaflet --save
+npm install react-leaflet-markercluster --save
+npm install react-number-format --save
+npm install styled-components --save
+npm install styled-reset --save
+npm install uuid --save
+```

package/build/area-9NUxwBGc.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("framer-motion"),i=require("react"),n=require("./component.styles-BfvB83xM.cjs"),o=require("./component-BV_7tGiu.cjs");exports.Preview=s=>{const[l,r]=i.useState(s.defaultVisible??!0),u=i.useMemo(()=>"visible"in s?s.visible:null,[s]),a=i.useMemo(()=>"time"in s?s.time:null,[s]),d=i.useMemo(()=>"minTime"in s?s.minTime:null,[s]);return i.useEffect(()=>{if(null!==a){const e=setTimeout(()=>{r(!0)},a);return()=>{clearTimeout(e)}}},[a]),i.useEffect(()=>{if(null!==u)if(u){if(d){const e=setTimeout(()=>{r(u)},d);return()=>clearTimeout(e)}r(u)}else r(u)},[u,d]),e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:e.jsxRuntimeExports.jsxs(t.AnimatePresence,{children:[l?null:e.jsxRuntimeExports.jsxs(o.StackMotion,{sx:e=>({...null==s?void 0:s.sxLoader,default:{backgroundColor:e.palette.whiteStandard,width:"100%",height:"100%",position:"absolute",top:0,left:0,display:"flex",alignItems:"center",justifyContent:"center",zIndex:1,...(null==s?void 0:s.sxLoader)?"function"==typeof(null==s?void 0:s.sxLoader)?null==s?void 0:s.sxLoader(e).default:null==s?void 0:s.sxLoader.default:{}}}),transition:{duration:.3},exit:{opacity:0},animate:{opacity:1},children:[e.jsxRuntimeExports.jsx(o.Stack,{sx:{default:{position:"absolute",width:"8vmin",height:"8vmin"}},children:e.jsxRuntimeExports.jsx(n.Icon,{size:"100%",type:"loading",primaryColor:"blueFocus",name:"Line"})}),s.content&&e.jsxRuntimeExports.jsx(o.Stack,{sx:{default:{position:"relative",marginTop:"18vmin"}},children:s.content})]},"loader"),l?e.jsxRuntimeExports.jsx(o.StackMotion,{sx:e=>({...null==s?void 0:s.sxChildren,default:{display:"contents",zIndex:0,...(null==s?void 0:s.sxChildren)?"function"==typeof(null==s?void 0:s.sxChildren)?null==s?void 0:s.sxChildren(e).default:null==s?void 0:s.sxChildren.default:{}}}),transition:{duration:.3},initial:{opacity:0},exit:{opacity:0},animate:{opacity:1},children:s.children},"children"):null]})})};
+//# sourceMappingURL=area-9NUxwBGc.cjs.map

package/build/area-9NUxwBGc.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-9NUxwBGc.cjs","sources":["../src/areas/preview/area.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion'\nimport { FC, useEffect, useMemo, useState } from 'react'\n\nimport { Icon } from '@local/components/icon'\nimport { Stack, StackMotion } from '@local/components/stack'\n\nimport { PreviewProps } from '.'\n\nexport const Preview: FC<PreviewProps> = props => {\n  const [visible, setVisible] = useState(props.defaultVisible ?? true)\n\n  const propsVisible = useMemo(() => ('visible' in props ? props.visible : null), [props])\n  const propsTime = useMemo(() => ('time' in props ? props.time : null), [props])\n  const propsMinTime = useMemo(() => ('minTime' in props ? props.minTime : null), [props])\n\n  useEffect(() => {\n    if (propsTime !== null) {\n      const timer = setTimeout(() => {\n        setVisible(true)\n      }, propsTime)\n\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  }, [propsTime])\n\n  useEffect(() => {\n    if (propsVisible !== null) {\n      if (propsVisible) {\n        if (propsMinTime) {\n          const timer = setTimeout(() => {\n            setVisible(propsVisible)\n          }, propsMinTime)\n          return () => clearTimeout(timer)\n        } else {\n          setVisible(propsVisible)\n        }\n      } else {\n        setVisible(propsVisible)\n      }\n    }\n  }, [propsVisible, propsMinTime])\n\n  return (\n    <>\n      <AnimatePresence>\n        {!visible ? (\n          <StackMotion\n            key=\"loader\"\n            sx={theme => ({\n              ...props?.sxLoader,\n              default: {\n                backgroundColor: theme.palette.whiteStandard,\n                width: '100%',\n                height: '100%',\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                zIndex: 1,\n                ...(props?.sxLoader\n                  ? typeof props?.sxLoader === 'function'\n                    ? props?.sxLoader(theme).default\n                    : props?.sxLoader.default\n                  : {})\n              }\n            })}\n            transition={{ duration: 0.3 }}\n            exit={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n          >\n            <Stack\n              sx={{\n                default: {\n                  position: 'absolute',\n                  width: '8vmin',\n                  height: '8vmin'\n                }\n              }}\n            >\n              <Icon size=\"100%\" type=\"loading\" primaryColor=\"blueFocus\" name=\"Line\" />\n            </Stack>\n            {props.content && (\n              <Stack\n                sx={{\n                  default: {\n                    position: 'relative',\n                    marginTop: '18vmin'\n                  }\n                }}\n              >\n                {props.content}\n              </Stack>\n            )}\n          </StackMotion>\n        ) : null}\n        {visible ? (\n          <StackMotion\n            key=\"children\"\n            sx={theme => ({\n              ...props?.sxChildren,\n              default: {\n                display: 'contents',\n                zIndex: 0,\n                ...(props?.sxChildren\n                  ? typeof props?.sxChildren === 'function'\n                    ? props?.sxChildren(theme).default\n                    : props?.sxChildren.default\n                  : {})\n              }\n            })}\n            transition={{ duration: 0.3 }}\n            initial={{ opacity: 0 }}\n            exit={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n          >\n            {props.children}\n          </StackMotion>\n        ) : null}\n      </AnimatePresence>\n    </>\n  )\n}\n"],"names":["props","visible","setVisible","useState","defaultVisible","propsVisible","useMemo","propsTime","time","propsMinTime","minTime","useEffect","timer","setTimeout","clearTimeout","jsx","Fragment","children","AnimatePresence","jsxs","StackMotion","sx","theme","sxLoader","default","backgroundColor","palette","whiteStandard","width","height","position","top","left","display","alignItems","justifyContent","zIndex","transition","duration","exit","opacity","animate","Stack","Icon","size","type","primaryColor","name","content","marginTop","sxChildren","initial"],"mappings":"4MAQyCA,IACvC,MAAOC,EAASC,GAAcC,EAAAA,SAASH,EAAMI,iBAAkB,GAEzDC,EAAeC,UAAQ,IAAO,YAAaN,EAAQA,EAAMC,QAAU,KAAO,CAACD,IAC3EO,EAAYD,UAAQ,IAAO,SAAUN,EAAQA,EAAMQ,KAAO,KAAO,CAACR,IAClES,EAAeH,UAAQ,IAAO,YAAaN,EAAQA,EAAMU,QAAU,KAAO,CAACV,IA+BjF,OA7BAW,EAAAA,UAAU,KACR,GAAkB,OAAdJ,EAAoB,CACtB,MAAMK,EAAQC,WAAW,KACvBX,GAAW,IACVK,GAEH,MAAO,KACLO,aAAaF,GACf,GAED,CAACL,IAEJI,EAAAA,UAAU,KACR,GAAqB,OAAjBN,EACF,GAAIA,EAAc,CAChB,GAAII,EAAc,CAChB,MAAMG,EAAQC,WAAW,KACvBX,EAAWG,IACVI,GACH,MAAO,IAAMK,aAAaF,EAAK,CAE/BV,EAAWG,EACb,MAEAH,EAAWG,IAGd,CAACA,EAAcI,IAGhBM,EAAAA,kBAAAA,IAAAC,EAAAA,kBAAAA,SAAA,CACEC,kCAACC,EAAAA,gBAAA,CACED,SAAA,CAAChB,EAmDE,KAlDFkB,EAAAA,kBAAAA,KAACC,EAAAA,YAAA,CAECC,GAAIC,IAAA,IACC,MAAAtB,OAAA,EAAAA,EAAOuB,SACVC,QAAS,CACPC,gBAAiBH,EAAMI,QAAQC,cAC/BC,MAAO,OACPC,OAAQ,OACRC,SAAU,WACVC,IAAK,EACLC,KAAM,EACNC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,OAAQ,MACJ,MAAApC,OAAA,EAAAA,EAAOuB,UACoB,yBAApBvB,WAAOuB,UACZ,MAAAvB,OAAA,EAAAA,EAAOuB,SAASD,GAAOE,QACvB,MAAAxB,OAAA,EAAAA,EAAOuB,SAASC,QAClB,CAAA,KAGRa,WAAY,CAAEC,SAAU,IACxBC,KAAM,CAAEC,QAAS,GACjBC,QAAS,CAAED,QAAS,GAEpBvB,SAAA,GAAAF,kBAAAA,IAAC2B,EAAAA,MAAA,CACCrB,GAAI,CACFG,QAAS,CACPM,SAAU,WACVF,MAAO,QACPC,OAAQ,UAIZZ,SAAAF,EAAAA,kBAAAA,IAAC4B,QAAKC,KAAK,OAAOC,KAAK,UAAUC,aAAa,YAAYC,KAAK,WAEhE/C,EAAMgD,SACLjC,EAAAA,kBAAAA,IAAC2B,EAAAA,MAAA,CACCrB,GAAI,CACFG,QAAS,CACPM,SAAU,WACVmB,UAAW,WAIdhC,SAAAjB,EAAMgD,YA7CP,UAkDP/C,IACCc,kBAAAA,IAACK,EAAAA,YAAA,CAECC,GAAIC,IAAA,IACC,MAAAtB,OAAA,EAAAA,EAAOkD,WACV1B,QAAS,CACPS,QAAS,WACTG,OAAQ,MACJ,MAAApC,OAAA,EAAAA,EAAOkD,YACsB,yBAAtBlD,WAAOkD,YACZ,MAAAlD,OAAA,EAAAA,EAAOkD,WAAW5B,GAAOE,QACzB,MAAAxB,OAAA,EAAAA,EAAOkD,WAAW1B,QACpB,CAAA,KAGRa,WAAY,CAAEC,SAAU,IACxBa,QAAS,CAAEX,QAAS,GACpBD,KAAM,CAAEC,QAAS,GACjBC,QAAS,CAAED,QAAS,GAEnBvB,SAAAjB,EAAMiB,UAlBH,YAoBJ"}

package/build/area-BnAddPtl.js

@@ -0,0 +1,114 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { AnimatePresence } from "framer-motion";
+import { useState, useMemo, useEffect } from "react";
+import { I as Icon } from "./component.styles-BapdQNhL.js";
+import { c as StackMotion, b as Stack } from "./component-jPZYT5iL.js";
+const Preview = (props) => {
+  const [visible, setVisible] = useState(props.defaultVisible ?? true);
+  const propsVisible = useMemo(() => "visible" in props ? props.visible : null, [props]);
+  const propsTime = useMemo(() => "time" in props ? props.time : null, [props]);
+  const propsMinTime = useMemo(() => "minTime" in props ? props.minTime : null, [props]);
+  useEffect(() => {
+    if (propsTime !== null) {
+      const timer = setTimeout(() => {
+        setVisible(true);
+      }, propsTime);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [propsTime]);
+  useEffect(() => {
+    if (propsVisible !== null) {
+      if (propsVisible) {
+        if (propsMinTime) {
+          const timer = setTimeout(() => {
+            setVisible(propsVisible);
+          }, propsMinTime);
+          return () => clearTimeout(timer);
+        } else {
+          setVisible(propsVisible);
+        }
+      } else {
+        setVisible(propsVisible);
+      }
+    }
+  }, [propsVisible, propsMinTime]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AnimatePresence, { children: [
+    !visible ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      StackMotion,
+      {
+        sx: (theme) => ({
+          ...props == null ? void 0 : props.sxLoader,
+          default: {
+            backgroundColor: theme.palette.whiteStandard,
+            width: "100%",
+            height: "100%",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1,
+            ...(props == null ? void 0 : props.sxLoader) ? typeof (props == null ? void 0 : props.sxLoader) === "function" ? props == null ? void 0 : props.sxLoader(theme).default : props == null ? void 0 : props.sxLoader.default : {}
+          }
+        }),
+        transition: { duration: 0.3 },
+        exit: { opacity: 0 },
+        animate: { opacity: 1 },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Stack,
+            {
+              sx: {
+                default: {
+                  position: "absolute",
+                  width: "8vmin",
+                  height: "8vmin"
+                }
+              },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { size: "100%", type: "loading", primaryColor: "blueFocus", name: "Line" })
+            }
+          ),
+          props.content && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Stack,
+            {
+              sx: {
+                default: {
+                  position: "relative",
+                  marginTop: "18vmin"
+                }
+              },
+              children: props.content
+            }
+          )
+        ]
+      },
+      "loader"
+    ) : null,
+    visible ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      StackMotion,
+      {
+        sx: (theme) => ({
+          ...props == null ? void 0 : props.sxChildren,
+          default: {
+            display: "contents",
+            zIndex: 0,
+            ...(props == null ? void 0 : props.sxChildren) ? typeof (props == null ? void 0 : props.sxChildren) === "function" ? props == null ? void 0 : props.sxChildren(theme).default : props == null ? void 0 : props.sxChildren.default : {}
+          }
+        }),
+        transition: { duration: 0.3 },
+        initial: { opacity: 0 },
+        exit: { opacity: 0 },
+        animate: { opacity: 1 },
+        children: props.children
+      },
+      "children"
+    ) : null
+  ] }) });
+};
+export {
+  Preview as P
+};
+//# sourceMappingURL=area-BnAddPtl.js.map

package/build/area-BnAddPtl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-BnAddPtl.js","sources":["../src/areas/preview/area.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion'\nimport { FC, useEffect, useMemo, useState } from 'react'\n\nimport { Icon } from '@local/components/icon'\nimport { Stack, StackMotion } from '@local/components/stack'\n\nimport { PreviewProps } from '.'\n\nexport const Preview: FC<PreviewProps> = props => {\n  const [visible, setVisible] = useState(props.defaultVisible ?? true)\n\n  const propsVisible = useMemo(() => ('visible' in props ? props.visible : null), [props])\n  const propsTime = useMemo(() => ('time' in props ? props.time : null), [props])\n  const propsMinTime = useMemo(() => ('minTime' in props ? props.minTime : null), [props])\n\n  useEffect(() => {\n    if (propsTime !== null) {\n      const timer = setTimeout(() => {\n        setVisible(true)\n      }, propsTime)\n\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  }, [propsTime])\n\n  useEffect(() => {\n    if (propsVisible !== null) {\n      if (propsVisible) {\n        if (propsMinTime) {\n          const timer = setTimeout(() => {\n            setVisible(propsVisible)\n          }, propsMinTime)\n          return () => clearTimeout(timer)\n        } else {\n          setVisible(propsVisible)\n        }\n      } else {\n        setVisible(propsVisible)\n      }\n    }\n  }, [propsVisible, propsMinTime])\n\n  return (\n    <>\n      <AnimatePresence>\n        {!visible ? (\n          <StackMotion\n            key=\"loader\"\n            sx={theme => ({\n              ...props?.sxLoader,\n              default: {\n                backgroundColor: theme.palette.whiteStandard,\n                width: '100%',\n                height: '100%',\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                zIndex: 1,\n                ...(props?.sxLoader\n                  ? typeof props?.sxLoader === 'function'\n                    ? props?.sxLoader(theme).default\n                    : props?.sxLoader.default\n                  : {})\n              }\n            })}\n            transition={{ duration: 0.3 }}\n            exit={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n          >\n            <Stack\n              sx={{\n                default: {\n                  position: 'absolute',\n                  width: '8vmin',\n                  height: '8vmin'\n                }\n              }}\n            >\n              <Icon size=\"100%\" type=\"loading\" primaryColor=\"blueFocus\" name=\"Line\" />\n            </Stack>\n            {props.content && (\n              <Stack\n                sx={{\n                  default: {\n                    position: 'relative',\n                    marginTop: '18vmin'\n                  }\n                }}\n              >\n                {props.content}\n              </Stack>\n            )}\n          </StackMotion>\n        ) : null}\n        {visible ? (\n          <StackMotion\n            key=\"children\"\n            sx={theme => ({\n              ...props?.sxChildren,\n              default: {\n                display: 'contents',\n                zIndex: 0,\n                ...(props?.sxChildren\n                  ? typeof props?.sxChildren === 'function'\n                    ? props?.sxChildren(theme).default\n                    : props?.sxChildren.default\n                  : {})\n              }\n            })}\n            transition={{ duration: 0.3 }}\n            initial={{ opacity: 0 }}\n            exit={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n          >\n            {props.children}\n          </StackMotion>\n        ) : null}\n      </AnimatePresence>\n    </>\n  )\n}\n"],"names":["jsx","Fragment","jsxs"],"mappings":"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"}

package/build/area-C2sWYH-e.js

@@ -0,0 +1,47 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import styled, { css } from "styled-components";
+import { b as Stack } from "./component-jPZYT5iL.js";
+const StyledScroll = styled(Stack)`
+  overflow-x: hidden;
+  overflow-y: hidden;
+
+  ${(props) => css`
+    ${props.$horizontal && css`
+      scrollbar-gutter: stable;
+      overflow-x: auto;
+    `}
+
+    ${props.$vertical && css`
+      scrollbar-gutter: stable;
+      overflow-y: auto;
+    `}
+
+    ${props.$isAlwaysHorizontal && css`
+      scrollbar-gutter: stable;
+      overflow-x: scroll;
+    `}
+
+    ${props.$isAlwaysVertical && css`
+      scrollbar-gutter: stable;
+      overflow-y: scroll;
+    `}
+  `}
+`;
+const Scroll = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    StyledScroll,
+    {
+      ...props,
+      $horizontal: props.horizontal,
+      $vertical: props.vertical,
+      $isAlwaysHorizontal: props.isAlwaysHorizontal,
+      $isAlwaysVertical: props.isAlwaysVertical,
+      children: props.children
+    }
+  );
+};
+export {
+  StyledScroll as S,
+  Scroll as a
+};
+//# sourceMappingURL=area-C2sWYH-e.js.map

package/build/area-C2sWYH-e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-C2sWYH-e.js","sources":["../src/areas/scroll/area.styles.tsx","../src/areas/scroll/area.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nimport { Stack } from '@local/components/stack'\n\nimport { StyledScrollProps } from '.'\n\nexport const StyledScroll = styled(Stack)<StyledScrollProps>`\n  overflow-x: hidden;\n  overflow-y: hidden;\n\n  ${props => css`\n    ${props.$horizontal &&\n    css`\n      scrollbar-gutter: stable;\n      overflow-x: auto;\n    `}\n\n    ${props.$vertical &&\n    css`\n      scrollbar-gutter: stable;\n      overflow-y: auto;\n    `}\n\n    ${props.$isAlwaysHorizontal &&\n    css`\n      scrollbar-gutter: stable;\n      overflow-x: scroll;\n    `}\n\n    ${props.$isAlwaysVertical &&\n    css`\n      scrollbar-gutter: stable;\n      overflow-y: scroll;\n    `}\n  `}\n`\n","import { FC } from 'react'\n\nimport { ScrollProps, StyledScroll } from '.'\n\nexport const Scroll: FC<ScrollProps> = props => {\n  return (\n    <StyledScroll\n      {...props}\n      $horizontal={props.horizontal}\n      $vertical={props.vertical}\n      $isAlwaysHorizontal={props.isAlwaysHorizontal}\n      $isAlwaysVertical={props.isAlwaysVertical}\n    >\n      {props.children}\n    </StyledScroll>\n  )\n}\n"],"names":["jsx"],"mappings":";;;AAMO,MAAM,eAAe,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,IAIpC,CAAA,UAAS;AAAA,MACP,MAAM,eACR;AAAA;AAAA;AAAA,KAGC;AAAA;AAAA,MAEC,MAAM,aACR;AAAA;AAAA;AAAA,KAGC;AAAA;AAAA,MAEC,MAAM,uBACR;AAAA;AAAA;AAAA,KAGC;AAAA;AAAA,MAEC,MAAM,qBACR;AAAA;AAAA;AAAA,KAGC;AAAA,GACF;AAAA;AC9BI,MAAM,SAA0B,CAAA,UAAS;AAC9C,SACEA,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAa,MAAM;AAAA,MACnB,WAAW,MAAM;AAAA,MACjB,qBAAqB,MAAM;AAAA,MAC3B,mBAAmB,MAAM;AAAA,MAExB,UAAA,MAAM;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/build/area-CD10k19W.cjs

@@ -0,0 +1,27 @@
+"use strict";const l=require("./jsx-runtime-BcGej2Kr.cjs"),r=require("styled-components"),s=require("./component-BV_7tGiu.cjs"),o=r(s.Stack)`
+  overflow-x: hidden;
+  overflow-y: hidden;
+
+  ${l=>r.css`
+    ${l.$horizontal&&r.css`
+      scrollbar-gutter: stable;
+      overflow-x: auto;
+    `}
+
+    ${l.$vertical&&r.css`
+      scrollbar-gutter: stable;
+      overflow-y: auto;
+    `}
+
+    ${l.$isAlwaysHorizontal&&r.css`
+      scrollbar-gutter: stable;
+      overflow-x: scroll;
+    `}
+
+    ${l.$isAlwaysVertical&&r.css`
+      scrollbar-gutter: stable;
+      overflow-y: scroll;
+    `}
+  `}
+`;exports.Scroll=r=>l.jsxRuntimeExports.jsx(o,{...r,$horizontal:r.horizontal,$vertical:r.vertical,$isAlwaysHorizontal:r.isAlwaysHorizontal,$isAlwaysVertical:r.isAlwaysVertical,children:r.children}),exports.StyledScroll=o;
+//# sourceMappingURL=area-CD10k19W.cjs.map

package/build/area-CD10k19W.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-CD10k19W.cjs","sources":["../src/areas/scroll/area.styles.tsx","../src/areas/scroll/area.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nimport { Stack } from '@local/components/stack'\n\nimport { StyledScrollProps } from '.'\n\nexport const StyledScroll = styled(Stack)<StyledScrollProps>`\n  overflow-x: hidden;\n  overflow-y: hidden;\n\n  ${props => css`\n    ${props.$horizontal &&\n    css`\n      scrollbar-gutter: stable;\n      overflow-x: auto;\n    `}\n\n    ${props.$vertical &&\n    css`\n      scrollbar-gutter: stable;\n      overflow-y: auto;\n    `}\n\n    ${props.$isAlwaysHorizontal &&\n    css`\n      scrollbar-gutter: stable;\n      overflow-x: scroll;\n    `}\n\n    ${props.$isAlwaysVertical &&\n    css`\n      scrollbar-gutter: stable;\n      overflow-y: scroll;\n    `}\n  `}\n`\n","import { FC } from 'react'\n\nimport { ScrollProps, StyledScroll } from '.'\n\nexport const Scroll: FC<ScrollProps> = props => {\n  return (\n    <StyledScroll\n      {...props}\n      $horizontal={props.horizontal}\n      $vertical={props.vertical}\n      $isAlwaysHorizontal={props.isAlwaysHorizontal}\n      $isAlwaysVertical={props.isAlwaysVertical}\n    >\n      {props.children}\n    </StyledScroll>\n  )\n}\n"],"names":["StyledScroll","styled","Stack","props","css","$horizontal","$vertical","$isAlwaysHorizontal","$isAlwaysVertical","jsx","horizontal","vertical","isAlwaysHorizontal","isAlwaysVertical","children"],"mappings":"gIAMaA,EAAeC,EAAOC,QAAK;;;;IAIpCC,GAASC,EAAAA,GAAAA;MACPD,EAAME,aACRD,EAAAA,GAAAA;;;;;MAKED,EAAMG,WACRF,EAAAA,GAAAA;;;;;MAKED,EAAMI,qBACRH,EAAAA,GAAAA;;;;;MAKED,EAAMK,mBACRJ,EAAAA,GAAAA;;;;;iBC1BmCD,KAEnCM,kBAAAA,IAACT,EAAA,IACKG,EACJE,YAAaF,EAAMO,WACnBJ,UAAWH,EAAMQ,SACjBJ,oBAAqBJ,EAAMS,mBAC3BJ,kBAAmBL,EAAMU,iBAExBC,SAAAX,EAAMW"}

package/build/area-ClrrGVJG.cjs

@@ -0,0 +1,40 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),r=require("react"),t=require("styled-components"),i=require("./component-BV_7tGiu.cjs"),s=require("./style-Dm74EPGE.cjs"),n=t.keyframes`
+  0% {
+    background-position: -468px 0;
+  }
+  100% {
+    background-position: 468px 0;
+  }
+`,a=t(i.Stack)`
+  background: transparent;
+
+  ${e=>t.css`
+    ${!e.$visible&&t.css`
+      ${"secondary"===e.$type?t.css`
+            background: rgba(130, 130, 130, 0.4);
+            background: linear-gradient(
+              to right,
+              rgba(130, 130, 130, 0.4) 8%,
+              rgba(130, 130, 130, 0.5) 18%,
+              rgba(130, 130, 130, 0.4) 33%
+            );
+          `:t.css`
+            background: rgba(130, 130, 130, 0.2);
+            background: linear-gradient(
+              to right,
+              rgba(130, 130, 130, 0.2) 8%,
+              rgba(130, 130, 130, 0.3) 18%,
+              rgba(130, 130, 130, 0.2) 33%
+            );
+          `}
+      background-size: 800px 100px;
+      animation: ${n} 2s infinite ease-out;
+    `}
+  `}
+  ${s.addTransition};
+  & > * {
+    opacity: ${e=>e.$visible?1:0};
+    ${s.addTransition};
+  }
+`;exports.Skeleton=t=>{const[i,s]=r.useState(t.defaultVisible??!1);return r.useEffect(()=>{if("time"in t){const e=setTimeout(()=>{s(!0)},t.time);return()=>{clearTimeout(e)}}},[t]),r.useEffect(()=>{"visible"in t&&s(!t.visible)},[t]),e.jsxRuntimeExports.jsx(a,{...t,$visible:i,$type:t.type,children:t.children})},exports.StyledSkeleton=a;
+//# sourceMappingURL=area-ClrrGVJG.cjs.map

package/build/area-ClrrGVJG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-ClrrGVJG.cjs","sources":["../src/areas/skeleton/area.styles.tsx","../src/areas/skeleton/area.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\n\nimport { Stack } from '@local/components/stack'\nimport { addTransition } from '@local/styles/add'\n\nimport { StyledSkeletonProps } from '.'\n\nconst shimmer = keyframes`\n  0% {\n    background-position: -468px 0;\n  }\n  100% {\n    background-position: 468px 0;\n  }\n`\n\nexport const StyledSkeleton = styled(Stack)<StyledSkeletonProps>`\n  background: transparent;\n\n  ${props => css`\n    ${!props.$visible &&\n    css`\n      ${props.$type === 'secondary'\n        ? css`\n            background: rgba(130, 130, 130, 0.4);\n            background: linear-gradient(\n              to right,\n              rgba(130, 130, 130, 0.4) 8%,\n              rgba(130, 130, 130, 0.5) 18%,\n              rgba(130, 130, 130, 0.4) 33%\n            );\n          `\n        : css`\n            background: rgba(130, 130, 130, 0.2);\n            background: linear-gradient(\n              to right,\n              rgba(130, 130, 130, 0.2) 8%,\n              rgba(130, 130, 130, 0.3) 18%,\n              rgba(130, 130, 130, 0.2) 33%\n            );\n          `}\n      background-size: 800px 100px;\n      animation: ${shimmer} 2s infinite ease-out;\n    `}\n  `}\n  ${addTransition};\n  & > * {\n    opacity: ${props => (!props.$visible ? 0 : 1)};\n    ${addTransition};\n  }\n`\n","import { FC, useEffect, useState } from 'react'\n\nimport { SkeletonProps, StyledSkeleton } from '.'\n\nexport const Skeleton: FC<SkeletonProps> = props => {\n  const [visible, setVisible] = useState(props.defaultVisible ?? false)\n\n  useEffect(() => {\n    if ('time' in props) {\n      const timer = setTimeout(() => {\n        setVisible(true)\n      }, props.time)\n\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  }, [props])\n\n  useEffect(() => {\n    if ('visible' in props) {\n      setVisible(!props.visible)\n    }\n  }, [props])\n\n  return (\n    <StyledSkeleton {...props} $visible={visible} $type={props.type}>\n      {props.children}\n    </StyledSkeleton>\n  )\n}\n"],"names":["shimmer","keyframes","StyledSkeleton","styled","Stack","props","css","$visible","$type","addTransition","visible","setVisible","useState","defaultVisible","useEffect","timer","setTimeout","time","clearTimeout","jsx","type","children"],"mappings":"qLAOMA,EAAUC,EAAAA,SAAAA;;;;;;;EASHC,EAAiBC,EAAOC,QAAK;;;IAGtCC,GAASC,EAAAA,GAAAA;OACND,EAAME,UACTD,EAAAA,GAAAA;QACoB,cAAhBD,EAAMG,MACJF,EAAAA,GAAAA;;;;;;;;YASAA,EAAAA,GAAAA;;;;;;;;;;mBAUSN;;;IAGfS;;eAEWJ,GAAWA,EAAME,SAAe,EAAJ;MACrCE;;mBC5CqCJ,IACzC,MAAOK,EAASC,GAAcC,EAAAA,SAASP,EAAMQ,iBAAkB,GAoB/D,OAlBAC,EAAAA,UAAU,KACR,GAAI,SAAUT,EAAO,CACnB,MAAMU,EAAQC,WAAW,KACvBL,GAAW,IACVN,EAAMY,MAET,MAAO,KACLC,aAAaH,GACf,GAED,CAACV,IAEJS,EAAAA,UAAU,KACJ,YAAaT,GACfM,GAAYN,EAAMK,UAEnB,CAACL,IAGFc,EAAAA,kBAAAA,IAACjB,EAAA,IAAmBG,EAAOE,SAAUG,EAASF,MAAOH,EAAMe,KACxDC,SAAAhB,EAAMgB"}

package/build/area-D7906bXA.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("react"),n=require("./component-BV_7tGiu.cjs");exports.Outside=s=>{const u=t.useRef(null);return t.useEffect(()=>{const e=e=>{u.current&&!u.current.contains(e.target)&&s.onOutsideClick(e)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[s]),e.jsxRuntimeExports.jsx(n.Stack,{sx:e=>({...null==s?void 0:s.sx,default:{display:"content",...(null==s?void 0:s.sx)?"function"==typeof(null==s?void 0:s.sx)?null==s?void 0:s.sx(e).default:null==s?void 0:s.sx.default:{}}}),ref:u,children:s.children})};
+//# sourceMappingURL=area-D7906bXA.cjs.map

package/build/area-D7906bXA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-D7906bXA.cjs","sources":["../src/areas/outside/area.tsx"],"sourcesContent":["import { FC, PropsWithChildren, useEffect, useRef } from 'react'\n\nimport { Stack } from '@local/components/stack'\nimport { addSXProps } from '@local/styles/sx'\n\ntype OutsideProps = PropsWithChildren &\n  addSXProps & {\n    onOutsideClick: (event: MouseEvent) => void\n  }\n\nexport const Outside: FC<OutsideProps> = props => {\n  const elementRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n        props.onOutsideClick(event)\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [props])\n  return (\n    <Stack\n      sx={theme => ({\n        ...props?.sx,\n        default: {\n          display: 'content',\n          ...(props?.sx ? (typeof props?.sx === 'function' ? props?.sx(theme).default : props?.sx.default) : {})\n        }\n      })}\n      ref={elementRef}\n    >\n      {props.children}\n    </Stack>\n  )\n}\n"],"names":["props","elementRef","useRef","useEffect","handleClickOutside","event","current","contains","target","onOutsideClick","document","addEventListener","removeEventListener","jsx","Stack","sx","theme","default","display","ref","children"],"mappings":"oIAUyCA,IACvC,MAAMC,EAAaC,EAAAA,OAAuB,MAc1C,OAZAC,EAAAA,UAAU,KACR,MAAMC,EAAsBC,IACtBJ,EAAWK,UAAYL,EAAWK,QAAQC,SAASF,EAAMG,SAC3DR,EAAMS,eAAeJ,IAKzB,OADAK,SAASC,iBAAiB,YAAaP,GAChC,KACLM,SAASE,oBAAoB,YAAaR,KAE3C,CAACJ,MAEFa,kBAAAA,IAACC,EAAAA,MAAA,CACCC,GAAIC,IAAA,IACC,MAAAhB,OAAA,EAAAA,EAAOe,GACVE,QAAS,CACPC,QAAS,cACL,MAAAlB,OAAA,EAAAA,EAAOe,IAA2B,yBAAdf,WAAOe,IAAoB,MAAAf,OAAA,EAAAA,EAAOe,GAAGC,GAAOC,QAAU,MAAAjB,OAAA,EAAAA,EAAOe,GAAGE,QAAW,CAAA,KAGvGE,IAAKlB,EAEJmB,SAAApB,EAAMoB"}

package/build/area-DRqAofd0.js

@@ -0,0 +1,35 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { useRef, useEffect } from "react";
+import { b as Stack } from "./component-jPZYT5iL.js";
+const Outside = (props) => {
+  const elementRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (elementRef.current && !elementRef.current.contains(event.target)) {
+        props.onOutsideClick(event);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [props]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Stack,
+    {
+      sx: (theme) => ({
+        ...props == null ? void 0 : props.sx,
+        default: {
+          display: "content",
+          ...(props == null ? void 0 : props.sx) ? typeof (props == null ? void 0 : props.sx) === "function" ? props == null ? void 0 : props.sx(theme).default : props == null ? void 0 : props.sx.default : {}
+        }
+      }),
+      ref: elementRef,
+      children: props.children
+    }
+  );
+};
+export {
+  Outside as O
+};
+//# sourceMappingURL=area-DRqAofd0.js.map

package/build/area-DRqAofd0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-DRqAofd0.js","sources":["../src/areas/outside/area.tsx"],"sourcesContent":["import { FC, PropsWithChildren, useEffect, useRef } from 'react'\n\nimport { Stack } from '@local/components/stack'\nimport { addSXProps } from '@local/styles/sx'\n\ntype OutsideProps = PropsWithChildren &\n  addSXProps & {\n    onOutsideClick: (event: MouseEvent) => void\n  }\n\nexport const Outside: FC<OutsideProps> = props => {\n  const elementRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n        props.onOutsideClick(event)\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [props])\n  return (\n    <Stack\n      sx={theme => ({\n        ...props?.sx,\n        default: {\n          display: 'content',\n          ...(props?.sx ? (typeof props?.sx === 'function' ? props?.sx(theme).default : props?.sx.default) : {})\n        }\n      })}\n      ref={elementRef}\n    >\n      {props.children}\n    </Stack>\n  )\n}\n"],"names":["jsx"],"mappings":";;;AAUO,MAAM,UAA4B,CAAA,UAAS;AAChD,QAAM,aAAa,OAAuB,IAAI;AAE9C,YAAU,MAAM;AACd,UAAM,qBAAqB,CAAC,UAAsB;AAChD,UAAI,WAAW,WAAW,CAAC,WAAW,QAAQ,SAAS,MAAM,MAAc,GAAG;AAC5E,cAAM,eAAe,KAAK;AAAA,MAAA;AAAA,IAC5B;AAGF,aAAS,iBAAiB,aAAa,kBAAkB;AACzD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAAA;AAAA,EAC9D,GACC,CAAC,KAAK,CAAC;AACV,SACEA,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,CAAA,WAAU;AAAA,QACZ,GAAG,+BAAO;AAAA,QACV,SAAS;AAAA,UACP,SAAS;AAAA,UACT,IAAI,+BAAO,MAAM,QAAO,+BAAO,QAAO,aAAa,+BAAO,GAAG,OAAO,UAAU,+BAAO,GAAG,UAAW,CAAA;AAAA,QAAC;AAAA,MACtG;AAAA,MAEF,KAAK;AAAA,MAEJ,UAAA,MAAM;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/build/area-DfCAwCiZ.js

@@ -0,0 +1,69 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { useState, useEffect } from "react";
+import styled, { keyframes, css } from "styled-components";
+import { b as Stack } from "./component-jPZYT5iL.js";
+import { b as addTransition } from "./style-CEGJOjRW.js";
+const shimmer = keyframes`
+  0% {
+    background-position: -468px 0;
+  }
+  100% {
+    background-position: 468px 0;
+  }
+`;
+const StyledSkeleton = styled(Stack)`
+  background: transparent;
+
+  ${(props) => css`
+    ${!props.$visible && css`
+      ${props.$type === "secondary" ? css`
+            background: rgba(130, 130, 130, 0.4);
+            background: linear-gradient(
+              to right,
+              rgba(130, 130, 130, 0.4) 8%,
+              rgba(130, 130, 130, 0.5) 18%,
+              rgba(130, 130, 130, 0.4) 33%
+            );
+          ` : css`
+            background: rgba(130, 130, 130, 0.2);
+            background: linear-gradient(
+              to right,
+              rgba(130, 130, 130, 0.2) 8%,
+              rgba(130, 130, 130, 0.3) 18%,
+              rgba(130, 130, 130, 0.2) 33%
+            );
+          `}
+      background-size: 800px 100px;
+      animation: ${shimmer} 2s infinite ease-out;
+    `}
+  `}
+  ${addTransition};
+  & > * {
+    opacity: ${(props) => !props.$visible ? 0 : 1};
+    ${addTransition};
+  }
+`;
+const Skeleton = (props) => {
+  const [visible, setVisible] = useState(props.defaultVisible ?? false);
+  useEffect(() => {
+    if ("time" in props) {
+      const timer = setTimeout(() => {
+        setVisible(true);
+      }, props.time);
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [props]);
+  useEffect(() => {
+    if ("visible" in props) {
+      setVisible(!props.visible);
+    }
+  }, [props]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(StyledSkeleton, { ...props, $visible: visible, $type: props.type, children: props.children });
+};
+export {
+  StyledSkeleton as S,
+  Skeleton as a
+};
+//# sourceMappingURL=area-DfCAwCiZ.js.map

package/build/area-DfCAwCiZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-DfCAwCiZ.js","sources":["../src/areas/skeleton/area.styles.tsx","../src/areas/skeleton/area.tsx"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\n\nimport { Stack } from '@local/components/stack'\nimport { addTransition } from '@local/styles/add'\n\nimport { StyledSkeletonProps } from '.'\n\nconst shimmer = keyframes`\n  0% {\n    background-position: -468px 0;\n  }\n  100% {\n    background-position: 468px 0;\n  }\n`\n\nexport const StyledSkeleton = styled(Stack)<StyledSkeletonProps>`\n  background: transparent;\n\n  ${props => css`\n    ${!props.$visible &&\n    css`\n      ${props.$type === 'secondary'\n        ? css`\n            background: rgba(130, 130, 130, 0.4);\n            background: linear-gradient(\n              to right,\n              rgba(130, 130, 130, 0.4) 8%,\n              rgba(130, 130, 130, 0.5) 18%,\n              rgba(130, 130, 130, 0.4) 33%\n            );\n          `\n        : css`\n            background: rgba(130, 130, 130, 0.2);\n            background: linear-gradient(\n              to right,\n              rgba(130, 130, 130, 0.2) 8%,\n              rgba(130, 130, 130, 0.3) 18%,\n              rgba(130, 130, 130, 0.2) 33%\n            );\n          `}\n      background-size: 800px 100px;\n      animation: ${shimmer} 2s infinite ease-out;\n    `}\n  `}\n  ${addTransition};\n  & > * {\n    opacity: ${props => (!props.$visible ? 0 : 1)};\n    ${addTransition};\n  }\n`\n","import { FC, useEffect, useState } from 'react'\n\nimport { SkeletonProps, StyledSkeleton } from '.'\n\nexport const Skeleton: FC<SkeletonProps> = props => {\n  const [visible, setVisible] = useState(props.defaultVisible ?? false)\n\n  useEffect(() => {\n    if ('time' in props) {\n      const timer = setTimeout(() => {\n        setVisible(true)\n      }, props.time)\n\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  }, [props])\n\n  useEffect(() => {\n    if ('visible' in props) {\n      setVisible(!props.visible)\n    }\n  }, [props])\n\n  return (\n    <StyledSkeleton {...props} $visible={visible} $type={props.type}>\n      {props.children}\n    </StyledSkeleton>\n  )\n}\n"],"names":["jsx"],"mappings":";;;;;AAOA,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAST,MAAM,iBAAiB,OAAO,KAAK;AAAA;AAAA;AAAA,IAGtC,CAAA,UAAS;AAAA,MACP,CAAC,MAAM,YACT;AAAA,QACI,MAAM,UAAU,cACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cASA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQC;AAAA;AAAA,mBAEQ,OAAO;AAAA,KACrB;AAAA,GACF;AAAA,IACC,aAAa;AAAA;AAAA,eAEF,CAAA,UAAU,CAAC,MAAM,WAAW,IAAI,CAAE;AAAA,MAC3C,aAAa;AAAA;AAAA;AC5CZ,MAAM,WAA8B,CAAA,UAAS;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,MAAM,kBAAkB,KAAK;AAEpE,YAAU,MAAM;AACd,QAAI,UAAU,OAAO;AACnB,YAAM,QAAQ,WAAW,MAAM;AAC7B,mBAAW,IAAI;AAAA,MAAA,GACd,MAAM,IAAI;AAEb,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MAAA;AAAA,IACpB;AAAA,EACF,GACC,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM;AACd,QAAI,aAAa,OAAO;AACtB,iBAAW,CAAC,MAAM,OAAO;AAAA,IAAA;AAAA,EAC3B,GACC,CAAC,KAAK,CAAC;AAEV,SACEA,kCAAAA,IAAC,gBAAA,EAAgB,GAAG,OAAO,UAAU,SAAS,OAAO,MAAM,MACxD,UAAA,MAAM,SAAA,CACT;AAEJ;"}

package/build/area-outside.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./area-D7906bXA.cjs");exports.Outside=e.Outside;
+//# sourceMappingURL=area-outside.cjs.js.map

package/build/area-outside.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-outside.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/area-outside.d.ts

@@ -0,0 +1,28 @@
+import { CSSObject } from 'styled-components';
+import { DefaultTheme } from 'styled-components';
+import { FC } from 'react';
+import { PropsWithChildren } from 'react';
+
+declare interface addSXProps {
+    sx?: SXProps;
+}
+
+declare type IThemeDevice = 'default' | 'tablet' | 'mobile';
+
+export declare const Outside: FC<OutsideProps>;
+
+declare type OutsideProps = PropsWithChildren & addSXProps & {
+    onOutsideClick: (event: MouseEvent) => void;
+};
+
+declare type SXProps = ({
+    default: CSSObject;
+} & {
+    [K in IThemeDevice]?: CSSObject;
+}) | ((theme: DefaultTheme) => {
+    default: CSSObject;
+} & {
+    [K in IThemeDevice]?: CSSObject;
+});
+
+export { }

package/build/area-outside.es.js

@@ -0,0 +1,5 @@
+import { O } from "./area-DRqAofd0.js";
+export {
+  O as Outside
+};
+//# sourceMappingURL=area-outside.es.js.map

package/build/area-outside.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-outside.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/build/area-preview.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./area.hooks-C_UKZzcb.cjs"),r=require("./area-9NUxwBGc.cjs");exports.useRemovePreviewLoader=e.useRemovePreviewLoader,exports.Preview=r.Preview;
+//# sourceMappingURL=area-preview.cjs.js.map

package/build/area-preview.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-preview.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}