@jenesei-software/jenesei-kit-react 1.3.18 → 1.3.20

package/build/area-BLgNLu9A.js

@@ -0,0 +1,19 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { S as StyledScroll } from "./area.styles-DWqSyo49.js";
+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 {
+  Scroll as S
+};
+//# sourceMappingURL=area-BLgNLu9A.js.map

package/build/area-BLgNLu9A.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-BLgNLu9A.js","sources":["../src/areas/scroll/area.tsx"],"sourcesContent":["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":";;AAIO,MAAM,SAA0B,CAAC,UAAU;AAChD,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-C5QUBcb-.js

@@ -0,0 +1,26 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { useState, useEffect } from "react";
+import { S as StyledSkeleton } from "./area.styles-BJCDsTi3.js";
+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 {
+  Skeleton as S
+};
+//# sourceMappingURL=area-C5QUBcb-.js.map

package/build/area-C5QUBcb-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-C5QUBcb-.js","sources":["../src/areas/skeleton/area.tsx"],"sourcesContent":["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":";;;AAIO,MAAM,WAA8B,CAAC,UAAU;AACpD,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-DAgP6K9K.cjs

@@ -0,0 +1,2 @@
+"use strict";const r=require("./jsx-runtime-BcGej2Kr.cjs"),l=require("./area.styles-DQBIvHdz.cjs");exports.Scroll=s=>r.jsxRuntimeExports.jsx(l.StyledScroll,{...s,$horizontal:s.horizontal,$vertical:s.vertical,$isAlwaysHorizontal:s.isAlwaysHorizontal,$isAlwaysVertical:s.isAlwaysVertical,children:s.children});
+//# sourceMappingURL=area-DAgP6K9K.cjs.map

package/build/area-DAgP6K9K.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-DAgP6K9K.cjs","sources":["../src/areas/scroll/area.tsx"],"sourcesContent":["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":["props","jsx","StyledScroll","$horizontal","horizontal","$vertical","vertical","$isAlwaysHorizontal","isAlwaysHorizontal","$isAlwaysVertical","isAlwaysVertical","children"],"mappings":"kHAIwCA,KAEpCC,kBAAAA,IAACC,EAAAA,aAAA,IACKF,EACJG,YAAaH,EAAMI,WACnBC,UAAWL,EAAMM,SACjBC,oBAAqBP,EAAMQ,mBAC3BC,kBAAmBT,EAAMU,iBAExBC,SAAAX,EAAMW"}

package/build/area-k8GR7Khj.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("react"),i=require("./area.styles-CtrTLcAj.cjs");exports.Skeleton=s=>{const[r,u]=t.useState(s.defaultVisible??!1);return t.useEffect(()=>{if("time"in s){const e=setTimeout(()=>{u(!0)},s.time);return()=>{clearTimeout(e)}}},[s]),t.useEffect(()=>{"visible"in s&&u(!s.visible)},[s]),e.jsxRuntimeExports.jsx(i.StyledSkeleton,{...s,$visible:r,$type:s.type,children:s.children})};
+//# sourceMappingURL=area-k8GR7Khj.cjs.map

package/build/area-k8GR7Khj.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-k8GR7Khj.cjs","sources":["../src/areas/skeleton/area.tsx"],"sourcesContent":["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":["props","visible","setVisible","useState","defaultVisible","useEffect","timer","setTimeout","time","clearTimeout","jsx","StyledSkeleton","$visible","$type","type","children"],"mappings":"uIAI4CA,IAC1C,MAAOC,EAASC,GAAcC,EAAAA,SAASH,EAAMI,iBAAkB,GAoB/D,OAlBAC,EAAAA,UAAU,KACR,GAAI,SAAUL,EAAO,CACnB,MAAMM,EAAQC,WAAW,KACvBL,GAAW,IACVF,EAAMQ,MAET,MAAO,KACLC,aAAaH,GACf,GAED,CAACN,IAEJK,EAAAA,UAAU,KACJ,YAAaL,GACfE,GAAYF,EAAMC,UAEnB,CAACD,MAGFU,kBAAAA,IAACC,EAAAA,eAAA,IAAmBX,EAAOY,SAAUX,EAASY,MAAOb,EAAMc,KACxDC,SAAAf,EAAMe"}

package/build/area-preview.cjs.js

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

package/build/area-preview.es.js

@@ -1,5 +1,5 @@
 import { u } from "./area.hooks-Bk04M7mk.js";
-import { P } from "./area-Cvp3eBBo.js";
+import { P } from "./context.constants-C5Unln0I.js";
 export {
   P as Preview,
   u as useRemovePreviewLoader

package/build/area-scroll.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./area-CmCMHnRA.cjs");exports.Scroll=e.Scroll,exports.StyledScroll=e.StyledScroll;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./area.styles-DQBIvHdz.cjs"),r=require("./area-DAgP6K9K.cjs");exports.StyledScroll=e.StyledScroll,exports.Scroll=r.Scroll;
 //# sourceMappingURL=area-scroll.cjs.js.map

package/build/area-scroll.es.js

@@ -1,6 +1,7 @@
-import { a, S } from "./area-BWxBop5m.js";
+import { S } from "./area.styles-DWqSyo49.js";
+import { S as S2 } from "./area-BLgNLu9A.js";
 export {
-  a as Scroll,
+  S2 as Scroll,
   S as StyledScroll
 };
 //# sourceMappingURL=area-scroll.es.js.map

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

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

package/build/area-skeleton.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./area-DqLK4RX5.cjs");exports.Skeleton=e.Skeleton,exports.StyledSkeleton=e.StyledSkeleton;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./area.styles-CtrTLcAj.cjs"),t=require("./area-k8GR7Khj.cjs");exports.StyledSkeleton=e.StyledSkeleton,exports.Skeleton=t.Skeleton;
 //# sourceMappingURL=area-skeleton.cjs.js.map

package/build/area-skeleton.es.js

@@ -1,6 +1,7 @@
-import { a, S } from "./area-BDMDiVi1.js";
+import { S } from "./area.styles-BJCDsTi3.js";
+import { S as S2 } from "./area-C5QUBcb-.js";
 export {
-  a as Skeleton,
+  S2 as Skeleton,
   S as StyledSkeleton
 };
 //# sourceMappingURL=area-skeleton.es.js.map

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

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

package/build/{area-BDMDiVi1.js → area.styles-BJCDsTi3.js}

@@ -1,5 +1,3 @@
-import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
-import { useState, useEffect } from "react";
 import { b as Stack } from "./component-mzzOCXSx.js";
 import styled, { keyframes, css } from "styled-components";
 const shimmer = keyframes`
@@ -42,27 +40,7 @@ const StyledSkeleton = styled(Stack)`
       opacity ${(props) => props.theme.transition.default};
   }
 `;
-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
+  StyledSkeleton as S
 };
-//# sourceMappingURL=area-BDMDiVi1.js.map
+//# sourceMappingURL=area.styles-BJCDsTi3.js.map

package/build/area.styles-BJCDsTi3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area.styles-BJCDsTi3.js","sources":["../src/areas/skeleton/area.styles.tsx"],"sourcesContent":["import { Stack } from '@local/components/stack';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport { StyledSkeletonProps } from '.';\n\n// const shimmer = keyframes`\n//   0% {\n//     background-position: -468px 0;\n//   }\n//   100% {\n//     background-position: 468px 0;\n//   }\n// `;\n\nconst shimmer = keyframes`\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n`;\n\nexport const StyledSkeleton = styled(Stack)<StyledSkeletonProps>`\n  background: transparent;\n\n  ${(props) => css`\n    ${\n      !props.$visible &&\n      css`\n      ${\n        props.$type === 'secondary'\n          ? css`\n            background: linear-gradient(\n        90deg,\n        #f6f7f8 25%,\n        #edeef1 50%,\n        #f6f7f8 75%\n      );\n          `\n          : css`\n            background: linear-gradient(\n        90deg,\n        #edeef1 25%,\n        #f6f7f8 50%,\n        #edeef1 75%\n      );   \n          `\n      };\n      background-size: 200% 100%;\n      animation: ${shimmer} 1.5s infinite linear;\n\n    `\n    };\n  `}\n  & > * {\n    opacity: ${(props) => (!props.$visible ? 0 : 1)};\n    transition:\n      outline 0s,\n      opacity ${(props) => props.theme.transition.default};\n  }\n`;\n"],"names":[],"mappings":";;AAeA,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAST,MAAM,iBAAiB,OAAO,KAAK;AAAA;AAAA;AAAA,IAGtC,CAAC,UAAU;AAAA,MAET,CAAC,MAAM,YACP;AAAA,QAEE,MAAM,UAAU,cACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQN;AAAA;AAAA,mBAEa,OAAO;AAAA;AAAA,KAGtB;AAAA,GACD;AAAA;AAAA,eAEY,CAAC,UAAW,CAAC,MAAM,WAAW,IAAI,CAAE;AAAA;AAAA;AAAA,gBAGnC,CAAC,UAAU,MAAM,MAAM,WAAW,OAAO;AAAA;AAAA;"}

package/build/area.styles-CtrTLcAj.cjs

@@ -0,0 +1,40 @@
+"use strict";const e=require("./component-GKvpOWlO.cjs"),n=require("styled-components"),i=n.keyframes`
+  0% {
+    background-position: 100%;
+  }
+  100% {
+    background-position: -100%;
+  }
+`,s=n(e.Stack)`
+  background: transparent;
+
+  ${e=>n.css`
+    ${!e.$visible&&n.css`
+      ${"secondary"===e.$type?n.css`
+            background: linear-gradient(
+        90deg,
+        #f6f7f8 25%,
+        #edeef1 50%,
+        #f6f7f8 75%
+      );
+          `:n.css`
+            background: linear-gradient(
+        90deg,
+        #edeef1 25%,
+        #f6f7f8 50%,
+        #edeef1 75%
+      );   
+          `};
+      background-size: 200% 100%;
+      animation: ${i} 1.5s infinite linear;
+
+    `};
+  `}
+  & > * {
+    opacity: ${e=>e.$visible?1:0};
+    transition:
+      outline 0s,
+      opacity ${e=>e.theme.transition.default};
+  }
+`;exports.StyledSkeleton=s;
+//# sourceMappingURL=area.styles-CtrTLcAj.cjs.map

package/build/area.styles-CtrTLcAj.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area.styles-CtrTLcAj.cjs","sources":["../src/areas/skeleton/area.styles.tsx"],"sourcesContent":["import { Stack } from '@local/components/stack';\n\nimport styled, { css, keyframes } from 'styled-components';\n\nimport { StyledSkeletonProps } from '.';\n\n// const shimmer = keyframes`\n//   0% {\n//     background-position: -468px 0;\n//   }\n//   100% {\n//     background-position: 468px 0;\n//   }\n// `;\n\nconst shimmer = keyframes`\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n`;\n\nexport const StyledSkeleton = styled(Stack)<StyledSkeletonProps>`\n  background: transparent;\n\n  ${(props) => css`\n    ${\n      !props.$visible &&\n      css`\n      ${\n        props.$type === 'secondary'\n          ? css`\n            background: linear-gradient(\n        90deg,\n        #f6f7f8 25%,\n        #edeef1 50%,\n        #f6f7f8 75%\n      );\n          `\n          : css`\n            background: linear-gradient(\n        90deg,\n        #edeef1 25%,\n        #f6f7f8 50%,\n        #edeef1 75%\n      );   \n          `\n      };\n      background-size: 200% 100%;\n      animation: ${shimmer} 1.5s infinite linear;\n\n    `\n    };\n  `}\n  & > * {\n    opacity: ${(props) => (!props.$visible ? 0 : 1)};\n    transition:\n      outline 0s,\n      opacity ${(props) => props.theme.transition.default};\n  }\n`;\n"],"names":["shimmer","keyframes","StyledSkeleton","styled","Stack","props","css","$visible","$type","theme","transition","default"],"mappings":"wFAeMA,EAAUC,EAAAA,SAAAA;;;;;;;EASHC,EAAiBC,EAAOC,QAAK;;;IAGrCC,GAAUC,EAAAA,GAAAA;OAERD,EAAME,UACPD,EAAAA,GAAAA;QAEkB,cAAhBD,EAAMG,MACFF,EAAAA,GAAAA;;;;;;;YAQAA,EAAAA,GAAAA;;;;;;;;;mBAUON;;;;;eAMHK,GAAYA,EAAME,SAAe,EAAJ;;;gBAG5BF,GAAUA,EAAMI,MAAMC,WAAWC;;"}

package/build/{area-CmCMHnRA.cjs → area.styles-DQBIvHdz.cjs}

@@ -1,4 +1,4 @@
-"use strict";const l=require("./jsx-runtime-BcGej2Kr.cjs"),r=require("./component-GKvpOWlO.cjs"),s=require("styled-components"),o=s(r.Stack)`
+"use strict";const l=require("./component-GKvpOWlO.cjs"),s=require("styled-components"),o=s(l.Stack)`
   overflow-x: hidden;
   overflow-y: hidden;
 
@@ -23,5 +23,5 @@
       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-CmCMHnRA.cjs.map
+`;exports.StyledScroll=o;
+//# sourceMappingURL=area.styles-DQBIvHdz.cjs.map

package/build/area.styles-DQBIvHdz.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area.styles-DQBIvHdz.cjs","sources":["../src/areas/scroll/area.styles.tsx"],"sourcesContent":["import { Stack } from '@local/components/stack';\n\nimport styled, { css } from 'styled-components';\n\nimport { StyledScrollProps } from '.';\n\nexport const StyledScroll = styled(Stack)<StyledScrollProps>`\n  overflow-x: hidden;\n  overflow-y: hidden;\n\n  ${(props) => css`\n    ${\n      props.$horizontal &&\n      css`\n      scrollbar-gutter: stable;\n      overflow-x: auto;\n    `\n    }\n\n    ${\n      props.$vertical &&\n      css`\n      scrollbar-gutter: stable;\n      overflow-y: auto;\n    `\n    }\n\n    ${\n      props.$isAlwaysHorizontal &&\n      css`\n      scrollbar-gutter: stable;\n      overflow-x: scroll;\n    `\n    }\n\n    ${\n      props.$isAlwaysVertical &&\n      css`\n      scrollbar-gutter: stable;\n      overflow-y: scroll;\n    `\n    }\n  `}\n`;\n"],"names":["StyledScroll","styled","Stack","props","css","$horizontal","$vertical","$isAlwaysHorizontal","$isAlwaysVertical"],"mappings":"wFAMaA,EAAeC,EAAOC,QAAK;;;;IAInCC,GAAUC,EAAAA,GAAAA;MAETD,EAAME,aACND,EAAAA,GAAAA;;;;;MAOAD,EAAMG,WACNF,EAAAA,GAAAA;;;;;MAOAD,EAAMI,qBACNH,EAAAA,GAAAA;;;;;MAOAD,EAAMK,mBACNJ,EAAAA,GAAAA;;;;;"}

package/build/{area-BWxBop5m.js → area.styles-DWqSyo49.js}

@@ -1,4 +1,3 @@
-import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
 import { b as Stack } from "./component-mzzOCXSx.js";
 import styled, { css } from "styled-components";
 const StyledScroll = styled(Stack)`
@@ -27,21 +26,7 @@ const StyledScroll = styled(Stack)`
     `}
   `}
 `;
-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
+  StyledScroll as S
 };
-//# sourceMappingURL=area-BWxBop5m.js.map
+//# sourceMappingURL=area.styles-DWqSyo49.js.map

package/build/area.styles-DWqSyo49.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area.styles-DWqSyo49.js","sources":["../src/areas/scroll/area.styles.tsx"],"sourcesContent":["import { Stack } from '@local/components/stack';\n\nimport styled, { css } from 'styled-components';\n\nimport { StyledScrollProps } from '.';\n\nexport const StyledScroll = styled(Stack)<StyledScrollProps>`\n  overflow-x: hidden;\n  overflow-y: hidden;\n\n  ${(props) => css`\n    ${\n      props.$horizontal &&\n      css`\n      scrollbar-gutter: stable;\n      overflow-x: auto;\n    `\n    }\n\n    ${\n      props.$vertical &&\n      css`\n      scrollbar-gutter: stable;\n      overflow-y: auto;\n    `\n    }\n\n    ${\n      props.$isAlwaysHorizontal &&\n      css`\n      scrollbar-gutter: stable;\n      overflow-x: scroll;\n    `\n    }\n\n    ${\n      props.$isAlwaysVertical &&\n      css`\n      scrollbar-gutter: stable;\n      overflow-y: scroll;\n    `\n    }\n  `}\n`;\n"],"names":[],"mappings":";;AAMO,MAAM,eAAe,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,IAIpC,CAAC,UAAU;AAAA,MAET,MAAM,eACN;AAAA;AAAA;AAAA,KAIF;AAAA;AAAA,MAGE,MAAM,aACN;AAAA;AAAA;AAAA,KAIF;AAAA;AAAA,MAGE,MAAM,uBACN;AAAA;AAAA;AAAA,KAIF;AAAA;AAAA,MAGE,MAAM,qBACN;AAAA;AAAA;AAAA,KAIF;AAAA,GACD;AAAA;"}

package/build/build-info.txt

@@ -1,3 +1,3 @@
-version: 1.3.18
-commit: bb79496
-date: 2025-09-06T18:25:20Z
+version: 1.3.20
+commit: 287f32c
+date: 2025-09-07T14:19:45Z

package/build/component-86oA9dYz.cjs

@@ -0,0 +1,2 @@
+"use strict";const r=require("./jsx-runtime-BcGej2Kr.cjs"),e=require("./component.styles-CD6ZzRrk.cjs");exports.Separator=s=>{const t=s.color||"grayMonica";return r.jsxRuntimeExports.jsx(e.SeparatorWrapper,{role:"separator","aria-orientation":s.type,$radius:s.radius,$color:t,$sx:s.sx,$type:s.type,$thickness:s.thickness})};
+//# sourceMappingURL=component-86oA9dYz.cjs.map

package/build/component-86oA9dYz.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-86oA9dYz.cjs","sources":["../src/components/separator/component.tsx"],"sourcesContent":["import { IThemePaletteKeys } from '@local/theme/theme.interface';\n\nimport { FC } from 'react';\n\nimport { SeparatorProps, SeparatorWrapper } from '.';\n\nexport const Separator: FC<SeparatorProps> = (props) => {\n  const color: IThemePaletteKeys = props.color || 'grayMonica';\n  return (\n    <SeparatorWrapper\n      role='separator'\n      aria-orientation={props.type}\n      $radius={props.radius}\n      $color={color}\n      $sx={props.sx}\n      $type={props.type}\n      $thickness={props.thickness}\n    />\n  );\n};\n"],"names":["props","color","jsx","SeparatorWrapper","role","type","$radius","radius","$color","$sx","sx","$type","$thickness","thickness"],"mappings":"0HAM8CA,IAC5C,MAAMC,EAA2BD,EAAMC,OAAS,aAChD,SACEC,kBAAAA,IAACC,EAAAA,iBAAA,CACCC,KAAK,YACL,mBAAkBJ,EAAMK,KACxBC,QAASN,EAAMO,OACfC,OAAQP,EACRQ,IAAKT,EAAMU,GACXC,MAAOX,EAAMK,KACbO,WAAYZ,EAAMa"}

package/build/component-BLW4AlTi.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),r=require("react"),n=require("styled-components"),s=require("./context.constants-DSfxf3ST.cjs");exports.Range=a=>{const{onChange:t}=a,o=r.useCallback((e,r)=>{const n=[...a.values];n[e]=Math.min(a.max,Math.max(a.min,r)),t(n.sort((e,r)=>e-r))},[t,a.max,a.min,a.values]),u=r.useCallback(e=>(e-a.min)/(a.max-a.min)*100,[a.max,a.min]),m=r.useMemo(()=>a.values.map(e=>u(e)),[u,a.values]),i=n.useTheme(),g=i.colors.range[a.genre].track.background.rest,c=i.colors.range[a.genre].track.gradient.rest,l=i.colors.range[a.genre].thumb.border.rest,x=i.colors.range[a.genre].thumb.background.rest,$=r.useMemo(()=>m.map((e,r)=>{const n=0===r,s=r===m.length-1;return n?`${g} 0%, ${g} ${e}%, ${c} ${e}%`:s?`${c} ${e}%, ${g} ${e}%, ${g} 100%`:`${c} ${e}%`}).join(", "),[c,g,m]),p=r.useMemo(()=>`linear-gradient(to right, ${$})`,[$]);return e.jsxRuntimeExports.jsxs(s.RangeWrapper,{$size:a.size,$sx:a.sx,$error:a.error,onBlur:a.onBlur,children:[a.values.map((r,n)=>e.jsxRuntimeExports.jsx(s.RangeThumb,{type:"range",$size:a.size,$genre:a.genre,min:a.min,max:a.max,step:a.step,value:r,onChange:e=>o(n,parseFloat(e.target.value)),style:{zIndex:100+n},$colorBackground:x,$colorBorder:l},n)),e.jsxRuntimeExports.jsx(s.RangeTrack,{$size:a.size,$genre:a.genre,style:{background:p}})]})};
+//# sourceMappingURL=component-BLW4AlTi.cjs.map

package/build/component-BLW4AlTi.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-BLW4AlTi.cjs","sources":["../src/components/range/component.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { RangeProps, RangeThumb, RangeTrack, RangeWrapper } from '.';\n\nexport const Range = (props: RangeProps) => {\n  const { onChange } = props;\n  const handleChange = useCallback(\n    (index: number, newValue: number) => {\n      const newValues = [...props.values];\n      newValues[index] = Math.min(props.max, Math.max(props.min, newValue));\n      onChange(newValues.sort((a, b) => a - b));\n    },\n    [onChange, props.max, props.min, props.values],\n  );\n  const getThumbPositionPercent = useCallback(\n    (val: number) => ((val - props.min) / (props.max - props.min)) * 100,\n    [props.max, props.min],\n  );\n  const positions = useMemo(\n    () => props.values.map((val) => getThumbPositionPercent(val)),\n    [getThumbPositionPercent, props.values],\n  );\n  const theme = useTheme();\n\n  const colorTrackBackground = theme.colors.range[props.genre].track.background.rest;\n  const colorTrackGradient = theme.colors.range[props.genre].track.gradient.rest;\n  const colorThumbBorder = theme.colors.range[props.genre].thumb.border.rest;\n  const colorThumbBackground = theme.colors.range[props.genre].thumb.background.rest;\n\n  const trackGradient = useMemo(\n    () =>\n      positions\n        .map((position, idx) => {\n          const isFirst = idx === 0;\n          const isLast = idx === positions.length - 1;\n\n          if (isFirst)\n            return `${colorTrackBackground} 0%, ${colorTrackBackground} ${position}%, ${colorTrackGradient} ${position}%`;\n          if (isLast)\n            return `${colorTrackGradient} ${position}%, ${colorTrackBackground} ${position}%, ${colorTrackBackground} 100%`;\n          return `${colorTrackGradient} ${position}%`;\n        })\n        .join(', '),\n    [colorTrackGradient, colorTrackBackground, positions],\n  );\n  const gradient = useMemo(() => `linear-gradient(to right, ${trackGradient})`, [trackGradient]);\n\n  return (\n    <RangeWrapper $size={props.size} $sx={props.sx} $error={props.error} onBlur={props.onBlur}>\n      {props.values.map((val, idx) => (\n        <RangeThumb\n          key={idx}\n          type='range'\n          $size={props.size}\n          $genre={props.genre}\n          min={props.min}\n          max={props.max}\n          step={props.step}\n          value={val}\n          onChange={(e) => handleChange(idx, parseFloat(e.target.value))}\n          style={{ zIndex: 100 + idx }}\n          $colorBackground={colorThumbBackground}\n          $colorBorder={colorThumbBorder}\n        />\n      ))}\n      <RangeTrack\n        $size={props.size}\n        $genre={props.genre}\n        style={{\n          background: gradient,\n        }}\n      />\n    </RangeWrapper>\n  );\n};\n"],"names":["props","onChange","handleChange","useCallback","index","newValue","newValues","values","Math","min","max","sort","a","b","getThumbPositionPercent","val","positions","useMemo","map","theme","useTheme","colorTrackBackground","colors","range","genre","track","background","rest","colorTrackGradient","gradient","colorThumbBorder","thumb","border","colorThumbBackground","trackGradient","position","idx","isFirst","isLast","length","join","jsxs","RangeWrapper","$size","size","$sx","sx","$error","error","onBlur","children","jsx","RangeThumb","type","$genre","step","value","e","parseFloat","target","style","zIndex","$colorBackground","$colorBorder","RangeTrack"],"mappings":"yKAKsBA,IACpB,MAAMC,SAAEA,GAAaD,EACfE,EAAeC,EAAAA,YACnB,CAACC,EAAeC,KACd,MAAMC,EAAY,IAAIN,EAAMO,QAC5BD,EAAUF,GAASI,KAAKC,IAAIT,EAAMU,IAAKF,KAAKE,IAAIV,EAAMS,IAAKJ,IAC3DJ,EAASK,EAAUK,KAAK,CAACC,EAAGC,IAAMD,EAAIC,KAExC,CAACZ,EAAUD,EAAMU,IAAKV,EAAMS,IAAKT,EAAMO,SAEnCO,EAA0BX,EAAAA,YAC7BY,IAAkBA,EAAMf,EAAMS,MAAQT,EAAMU,IAAMV,EAAMS,KAAQ,IACjE,CAACT,EAAMU,IAAKV,EAAMS,MAEdO,EAAYC,EAAAA,QAChB,IAAMjB,EAAMO,OAAOW,IAAKH,GAAQD,EAAwBC,IACxD,CAACD,EAAyBd,EAAMO,SAE5BY,EAAQC,EAAAA,WAERC,EAAuBF,EAAMG,OAAOC,MAAMvB,EAAMwB,OAAOC,MAAMC,WAAWC,KACxEC,EAAqBT,EAAMG,OAAOC,MAAMvB,EAAMwB,OAAOC,MAAMI,SAASF,KACpEG,EAAmBX,EAAMG,OAAOC,MAAMvB,EAAMwB,OAAOO,MAAMC,OAAOL,KAChEM,EAAuBd,EAAMG,OAAOC,MAAMvB,EAAMwB,OAAOO,MAAML,WAAWC,KAExEO,EAAgBjB,EAAAA,QACpB,IACED,EACGE,IAAI,CAACiB,EAAUC,KACd,MAAMC,EAAkB,IAARD,EACVE,EAASF,IAAQpB,EAAUuB,OAAS,EAE1C,OAAIF,EACK,GAAGhB,SAA4BA,KAAwBc,OAAcP,KAAsBO,KAChGG,EACK,GAAGV,KAAsBO,OAAcd,KAAwBc,OAAcd,SAC/E,GAAGO,KAAsBO,OAEjCK,KAAK,MACV,CAACZ,EAAoBP,EAAsBL,IAEvCa,EAAWZ,EAAAA,QAAQ,IAAM,6BAA6BiB,KAAkB,CAACA,IAE/E,SACEO,kBAAAA,KAACC,EAAAA,aAAA,CAAaC,MAAO3C,EAAM4C,KAAMC,IAAK7C,EAAM8C,GAAIC,OAAQ/C,EAAMgD,MAAOC,OAAQjD,EAAMiD,OAChFC,SAAA,CAAAlD,EAAMO,OAAOW,IAAI,CAACH,EAAKqB,MACtBe,kBAAAA,IAACC,EAAAA,WAAA,CAECC,KAAK,QACLV,MAAO3C,EAAM4C,KACbU,OAAQtD,EAAMwB,MACdf,IAAKT,EAAMS,IACXC,IAAKV,EAAMU,IACX6C,KAAMvD,EAAMuD,KACZC,MAAOzC,EACPd,SAAWwD,GAAMvD,EAAakC,EAAKsB,WAAWD,EAAEE,OAAOH,QACvDI,MAAO,CAAEC,OAAQ,IAAMzB,GACvB0B,iBAAkB7B,EAClB8B,aAAcjC,GAXTM,MAcTe,kBAAAA,IAACa,EAAAA,WAAA,CACCrB,MAAO3C,EAAM4C,KACbU,OAAQtD,EAAMwB,MACdoC,MAAO,CACLlC,WAAYG"}

package/build/component-BLa80fGE.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("./context.constants-DSfxf3ST.cjs"),n=require("react"),r=require("./component-DP42Uzl2.cjs");exports.InputOTP=l=>{var o;const[s,u]=n.useState(new Array(l.length).fill("")),c=n.useRef([]),i=n.useRef(null),a=n.useCallback((e,t)=>{t.preventDefault();const n=t.clipboardData.getData("Text").replace(/\D/g,"").split("");n.length&&u(t=>{var r,o;const s=[...t];let u=e;for(let e=0;e<n.length&&u<s.length;e++)s[u]=n[e],u++;const i=s.join("");return null==(r=l.onChange)||r.call(l,i),s.every(e=>""!==e)&&(null==(o=l.onComplete)||o.call(l,i)),setTimeout(()=>{var e,t;const n=s.findIndex(e=>""===e);-1!==n?null==(e=c.current[n])||e.focus():u<s.length&&(null==(t=c.current[u])||t.focus())},0),s})},[l]),g=n.useCallback((e,t)=>{/^\d*$/.test(t)&&u(n=>{var r;const o=[...n];return o[e]=t.slice(-1),l.onChange&&l.onChange(o.join("")),o.every(e=>""!==e)&&(null==(r=l.onComplete)||r.call(l,o.join(""))),t&&e<n.length-1&&setTimeout(()=>{var t;null==(t=c.current[e+1])||t.focus()},0),o})},[l]),m=n.useCallback(e=>{setTimeout(()=>e.target.setSelectionRange(0,e.target.value.length),0)},[]);return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(t.InputOTPWrapper,{$error:l.error,$size:l.size,id:l.id,ref:i,onBlur:e=>{setTimeout(()=>{var t;i.current&&!i.current.contains(document.activeElement)&&(null==(t=l.onBlur)||t.call(l,e))},0)},onFocus:e=>{setTimeout(()=>{var t,n;(null==(t=i.current)?void 0:t.contains(document.activeElement))&&(null==(n=l.onFocus)||n.call(l,e))},0)},$sx:l.sx,children:s.map((t,n)=>e.jsxRuntimeExports.jsx(r.Input,{isWidthAsHeight:!0,tabIndex:n+1,ref:e=>{c.current[n]=e},variety:"standard",type:"text",inputMode:"numeric",maxLength:1,value:t,onFocus:m,onPaste:e=>a(n,e),onChange:e=>g(n,e),onKeyDown:e=>((e,t)=>{const n=c.current[e];if(n){if("ArrowRight"===t.key){const t=e<s.length-1?e+1:0,n=c.current[t];n&&(n.focus(),setTimeout(()=>n.setSelectionRange(0,n.value.length),0))}if("ArrowLeft"===t.key){const t=e>0?e-1:s.length-1,n=c.current[t];n&&(n.focus(),setTimeout(()=>n.setSelectionRange(0,n.value.length),0))}"Backspace"===t.key&&(n.value?setTimeout(()=>n.setSelectionRange(0,n.value.length),0):e>0&&setTimeout(()=>{const t=c.current[e-1];t&&(t.focus(),t.setSelectionRange(0,t.value.length))},0))}})(n,e),genre:l.genre,size:l.size,font:l.font},n))}),(null==l?void 0:l.error)?e.jsxRuntimeExports.jsx(t.ErrorMessage,{...l.error,size:(null==l?void 0:l.error.size)??l.size,font:{size:12,weight:400,family:null==(o=l.font)?void 0:o.family}}):null]})};
+//# sourceMappingURL=component-BLa80fGE.cjs.map

package/build/component-BLa80fGE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-BLa80fGE.cjs","sources":["../src/components/input-otp/component.tsx"],"sourcesContent":["import { ErrorMessage } from '@local/styles/error';\n\nimport { ClipboardEvent, FocusEvent, KeyboardEvent, useCallback, useRef, useState } from 'react';\n\nimport { Input } from '../input';\nimport { InputOTPProps, InputOTPWrapper } from '.';\n\nexport const InputOTP = (props: InputOTPProps) => {\n  const [otp, setOtp] = useState<string[]>(new Array(props.length).fill(''));\n  const inputsRef = useRef<(HTMLInputElement | null)[]>([]);\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n  const handlePaste = useCallback(\n    (index: number, e: ClipboardEvent<HTMLInputElement>) => {\n      e.preventDefault();\n\n      const pasteData = e.clipboardData.getData('Text');\n      const digits = pasteData.replace(/\\D/g, '').split('');\n\n      if (!digits.length) return;\n\n      setOtp((prevOtp) => {\n        const newOtp = [...prevOtp];\n        let currentIndex = index;\n\n        for (let i = 0; i < digits.length && currentIndex < newOtp.length; i++) {\n          newOtp[currentIndex] = digits[i];\n          currentIndex++;\n        }\n\n        const joined = newOtp.join('');\n\n        props.onChange?.(joined);\n\n        if (newOtp.every((char) => char !== '')) {\n          props.onComplete?.(joined);\n        }\n\n        setTimeout(() => {\n          const firstEmpty = newOtp.findIndex((char) => char === '');\n          if (firstEmpty !== -1) {\n            inputsRef.current[firstEmpty]?.focus();\n          } else if (currentIndex < newOtp.length) {\n            inputsRef.current[currentIndex]?.focus();\n          }\n        }, 0);\n\n        return newOtp;\n      });\n    },\n    [props],\n  );\n\n  const handleChange = useCallback(\n    (index: number, value: string) => {\n      if (!/^\\d*$/.test(value)) return;\n\n      setOtp((prevOtp) => {\n        const newOtp = [...prevOtp];\n        newOtp[index] = value.slice(-1);\n\n        if (props.onChange) {\n          props.onChange(newOtp.join(''));\n        }\n\n        if (newOtp.every((char) => char !== '')) {\n          props.onComplete?.(newOtp.join(''));\n        }\n\n        if (value && index < prevOtp.length - 1) {\n          setTimeout(() => {\n            inputsRef.current[index + 1]?.focus();\n          }, 0);\n        }\n\n        return newOtp;\n      });\n    },\n    [props],\n  );\n\n  const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n    const input = inputsRef.current[index];\n\n    if (!input) return;\n\n    if (e.key === 'ArrowRight') {\n      const nextIndex = index < otp.length - 1 ? index + 1 : 0;\n      const nextInput = inputsRef.current[nextIndex];\n\n      if (nextInput) {\n        nextInput.focus();\n        setTimeout(() => nextInput.setSelectionRange(0, nextInput.value.length), 0);\n      }\n    }\n\n    if (e.key === 'ArrowLeft') {\n      const prevIndex = index > 0 ? index - 1 : otp.length - 1;\n      const prevInput = inputsRef.current[prevIndex];\n\n      if (prevInput) {\n        prevInput.focus();\n        setTimeout(() => prevInput.setSelectionRange(0, prevInput.value.length), 0);\n      }\n    }\n\n    if (e.key === 'Backspace') {\n      if (input.value) {\n        setTimeout(() => input.setSelectionRange(0, input.value.length), 0);\n      } else if (index > 0) {\n        setTimeout(() => {\n          const prevInput = inputsRef.current[index - 1];\n          if (prevInput) {\n            prevInput.focus();\n            prevInput.setSelectionRange(0, prevInput.value.length);\n          }\n        }, 0);\n      }\n    }\n  };\n\n  const handleFocusInput = useCallback((e: FocusEvent<HTMLInputElement>) => {\n    setTimeout(() => e.target.setSelectionRange(0, e.target.value.length), 0);\n  }, []);\n  return (\n    <>\n      <InputOTPWrapper\n        $error={props.error}\n        $size={props.size}\n        id={props.id}\n        ref={wrapperRef}\n        onBlur={(e) => {\n          setTimeout(() => {\n            if (wrapperRef.current && !wrapperRef.current.contains(document.activeElement)) {\n              props.onBlur?.(e);\n            }\n          }, 0);\n        }}\n        onFocus={(e) => {\n          setTimeout(() => {\n            if (wrapperRef.current?.contains(document.activeElement)) {\n              props.onFocus?.(e);\n            }\n          }, 0);\n        }}\n        $sx={props.sx}\n      >\n        {otp.map((digit, index) => (\n          <Input\n            isWidthAsHeight\n            key={index}\n            tabIndex={index + 1}\n            ref={(el) => {\n              inputsRef.current[index] = el;\n            }}\n            variety='standard'\n            type='text'\n            inputMode='numeric'\n            maxLength={1}\n            value={digit}\n            onFocus={handleFocusInput}\n            onPaste={(e) => handlePaste(index, e)}\n            onChange={(value) => handleChange(index, value)}\n            onKeyDown={(e) => handleKeyDown(index, e)}\n            genre={props.genre}\n            size={props.size}\n            font={props.font}\n          />\n        ))}\n      </InputOTPWrapper>\n      {props?.error ? (\n        <ErrorMessage\n          {...props.error}\n          size={props?.error.size ?? props.size}\n          font={{\n            size: 12,\n            weight: 400,\n            family: props.font?.family,\n          }}\n        />\n      ) : null}\n    </>\n  );\n};\n"],"names":["props","otp","setOtp","useState","Array","length","fill","inputsRef","useRef","wrapperRef","handlePaste","useCallback","index","e","preventDefault","digits","clipboardData","getData","replace","split","prevOtp","newOtp","currentIndex","i","joined","join","_a","onChange","call","every","char","_b","onComplete","setTimeout","firstEmpty","findIndex","current","focus","handleChange","value","test","slice","handleFocusInput","target","setSelectionRange","jsxs","Fragment","children","jsx","InputOTPWrapper","$error","error","$size","size","id","ref","onBlur","contains","document","activeElement","onFocus","$sx","sx","map","digit","Input","isWidthAsHeight","tabIndex","el","variety","type","inputMode","maxLength","onPaste","onKeyDown","input","key","nextIndex","nextInput","prevIndex","prevInput","handleKeyDown","genre","font","ErrorMessage","weight","family"],"mappings":"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"}

package/build/{component.styles-CwTYpBx_.js → component-BX7rFpno.js}

@@ -1,17 +1,15 @@
 import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
-import { ImageSupportedFormatsForInput } from "./consts.es.js";
-import { u as useImageCrop } from "./use-CnGHh8iL.js";
-import { B as Button } from "./component-jPLOz52P.js";
-import { I as Image } from "./component.styles-C4Bz4OTl.js";
+import { LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT } from "./consts.es.js";
+import { u as useImageCrop } from "./use-7TZR9yNq.js";
+import { bp as KEY_SIZE_DATA, aN as Typography, B as Button, N as ImageSelectWrapper, O as ImageSelectListWrapper, bl as ErrorMessage } from "./context.constants-C5Unln0I.js";
+import { I as Image } from "./component-C56biWpi.js";
+import "./component.styles-eaocqYbA.js";
 import { b as Stack } from "./component-mzzOCXSx.js";
-import styled, { useTheme, css } from "styled-components";
-import { i as Typography } from "./component-eqTj4VVc.js";
-import { a as useDialog } from "./context.constants-BCpaUfFz.js";
-import { K as KEY_SIZE_DATA } from "./theme.global-BzunMIsv.js";
+import { useTheme } from "styled-components";
+import "./context.constants-CaDW-QGJ.js";
+import { a as useDialog } from "./context.hooks-Bj9FlQEC.js";
 import { useMemo, useCallback, useState, useRef, useEffect } from "react";
-import { b as ErrorMessage, a as addError } from "./style-BzxSHZDV.js";
 import { motion } from "framer-motion";
-import { a as addSX } from "./style-plT9Ah7t.js";
 const useImageView = (props) => {
   const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);
   const br = useMemo(() => `${size.radius}px`, [size.radius]);
@@ -369,7 +367,7 @@ const ImageSelect = (props) => {
               {
                 ref: refInput,
                 type: "file",
-                accept: ImageSupportedFormatsForInput,
+                accept: LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT,
                 multiple: true,
                 style: { display: "none" },
                 onChange: (e) => {
@@ -429,57 +427,7 @@ const ImageSelect = (props) => {
     ) : null
   ] });
 };
-const ImageSelectListGenre = css`
-  ${(props) => css`
-    background: ${props.theme.colors.imageSelect[props.$genre].background.rest};
-    color: ${props.theme.colors.imageSelect[props.$genre].color.rest};
-    &:active {
-      background: ${props.theme.colors.imageSelect[props.$genre].background.rest};
-      color: ${props.theme.colors.imageSelect[props.$genre].color.rest};
-    }
-    &:focus-visible {
-      background: ${props.theme.colors.imageSelect[props.$genre].background.rest};
-      color: ${props.theme.colors.imageSelect[props.$genre].color.rest};
-    }
-  `};
-`;
-const ImageSelectListSize = css`
-  ${(props) => ImageSelectListSizeConstructor(KEY_SIZE_DATA[props.$size])};
-`;
-const ImageSelectListSizeConstructor = (props) => css`
-  padding: ${props.padding}px;
-  border-radius: ${props.radius}px;
-`;
-const ImageSelectSize = css`
-  ${(props) => ImageSelectSizeConstructor(KEY_SIZE_DATA[props.$size])};
-`;
-const ImageSelectSizeConstructor = (props) => css`
-  gap: ${props.padding - 2}px;
-`;
-const ImageSelectWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  ${ImageSelectSize};
-  ${addError};
-  ${addSX};
-`;
-const ImageSelectListWrapper = styled(motion.div)`
-  border: 2px dashed;
-
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  ${ImageSelectListGenre}
-  ${ImageSelectListSize}
-`;
 export {
-  ImageSelect as I,
-  ImageSelectListSize as a,
-  ImageSelectListSizeConstructor as b,
-  ImageSelectSize as c,
-  ImageSelectSizeConstructor as d,
-  ImageSelectWrapper as e,
-  ImageSelectListWrapper as f
+  ImageSelect as I
 };
-//# sourceMappingURL=component.styles-CwTYpBx_.js.map
+//# sourceMappingURL=component-BX7rFpno.js.map

package/build/component-BX7rFpno.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-BX7rFpno.js","sources":["../src/hooks/use-image-view/use.tsx","../src/components/image-select/component.tsx"],"sourcesContent":["import { Button } from '@local/components/button';\nimport { Image } from '@local/components/image';\nimport { SliderImageProps } from '@local/components/image-slider';\nimport { Stack } from '@local/components/stack';\nimport { Typography } from '@local/components/typography';\nimport { useDialog } from '@local/contexts/context-dialog';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { useCallback, useMemo } from 'react';\n\nimport { useImageViewProps } from '.';\n\nexport const useImageView = (props: useImageViewProps) => {\n  const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n  const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n  const { add } = useDialog<{\n    br?: string;\n  }>({\n    br: br,\n    propsDialog: {\n      borderRadius: br,\n      padding: '0',\n      background: 'whiteStandard',\n    },\n  });\n  const handleAdd = useCallback(\n    (image: SliderImageProps) => {\n      add({\n        content: (params, remove) => (\n          <Stack\n            sx={{\n              default: {\n                position: 'relative',\n                overflow: 'hidden',\n                aspectRatio: `${props.imageSettings.aspect * 2} / 2`,\n                width: 'auto',\n                maxWidth: '70dvw',\n                height: '85dvh',\n                borderRadius: params?.br,\n              },\n              tablet: {\n                maxWidth: '95dvw',\n              },\n            }}\n          >\n            <Image\n              sxStack={(theme) => ({\n                default: {\n                  width: '100%',\n                  height: '100%',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  backgroundColor: theme.palette.black10,\n                  position: 'absolute',\n                  pointerEvents: 'none',\n                },\n              })}\n              isShowBeforeImage\n              sxImage={{\n                default: {\n                  objectFit: 'contain',\n                },\n              }}\n              alt={image?.imageSrc}\n              src={image?.imageSrc}\n              componentFallback={\n                <Typography\n                  sx={{\n                    default: {\n                      variant: 'h6',\n                    },\n                  }}\n                >\n                  {props.locale.imageFallback}\n                </Typography>\n              }\n            />\n            <Button\n              sx={{\n                default: {\n                  position: 'absolute',\n                  bottom: 15,\n                  right: 15,\n                },\n              }}\n              genre='realebail-white'\n              size='small'\n              icons={[\n                {\n                  type: 'id',\n                  name: 'Arrow4',\n                },\n              ]}\n              isWidthAsHeight\n              isHiddenBorder\n              isRadius\n              onClick={() => remove?.()}\n            />\n          </Stack>\n        ),\n      });\n    },\n    [add, props.imageSettings.aspect, props.locale.imageFallback],\n  );\n  return { handleAdd };\n};\n","import { LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT } from '@local/consts';\nimport { useImageCrop } from '@local/hooks/use-image-crop';\nimport { useImageView } from '@local/hooks/use-image-view';\nimport { ErrorMessage } from '@local/styles/error';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { motion } from 'framer-motion';\nimport { DragEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { Button } from '../button';\nimport { Image } from '../image';\nimport { Stack } from '../stack';\nimport { Typography } from '../typography';\nimport { ImageSelectItemProps, ImageSelectListWrapper, ImageSelectProps, ImageSelectWrapper } from '.';\n\nexport const ImageSelect = (props: ImageSelectProps) => {\n  const { onChange } = props;\n\n  const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n\n  const [images, setImages] = useState<ImageSelectItemProps[]>(props.images || []);\n\n  const [isDraggingOver, setIsDraggingOver] = useState(false);\n\n  const refInput = useRef<HTMLInputElement | null>(null);\n\n  const theme = useTheme();\n\n  const handleDrop = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    if (e.dataTransfer.files?.length) {\n      handleAddFilesCrop(e.dataTransfer.files);\n    }\n  };\n\n  const handleDelete = (id: number) => {\n    setImages((prev) => {\n      const finalImages = prev.filter((img) => img.id !== id);\n      onChange?.(finalImages);\n      return finalImages;\n    });\n  };\n\n  const handleOnSave = useCallback(\n    (files: ImageSelectItemProps[] | null) => {\n      if (files) {\n        setImages((prev) => {\n          const newImages = files.map((file, idx) => ({\n            ...file,\n            index: prev.length + idx,\n          }));\n          const finalImages = [...prev, ...newImages];\n          onChange?.(finalImages);\n          return finalImages;\n        });\n      }\n    },\n    [onChange],\n  );\n\n  const openFileDialog = () => {\n    refInput.current?.click();\n  };\n\n  const resetImages = () => {\n    setImages(props.defaultImages || []);\n    onChange?.(props.defaultImages || []);\n  };\n\n  const { handleAddFiles: handleAddFilesCrop } = useImageCrop({\n    onSave: handleOnSave,\n    locale: props.locale,\n    dialog: {\n      button: {\n        genre: props.propsButton.default.genre,\n        size: props.propsButton.default.size,\n      },\n      buttonDelete: {\n        genre: props.propsButton.delete.genre,\n        size: props.propsButton.delete.size,\n      },\n    },\n    imageSettings: {\n      maxSize: props.imageSettings.maxSize,\n      maxCount: props.imageSettings.maxCount - images.length,\n      aspect: props.imageSettings.aspect,\n    },\n    refInput: refInput,\n  });\n\n  const { handleAdd } = useImageView({\n    size: props.size,\n    locale: props.locale,\n    imageSettings: props.imageSettings,\n    genre: props.genre,\n  });\n\n  useEffect(() => {\n    setImages(props.images || []);\n  }, [props.images]);\n\n  return (\n    <>\n      <ImageSelectWrapper $genre={props.genre} $size={props.size} id={props.id} $sx={props.sx} $error={props.error}>\n        <ImageSelectListWrapper\n          onDrop={(e) => {\n            handleDrop(e);\n            setIsDraggingOver(false);\n          }}\n          onDragOver={(e) => e.preventDefault()}\n          onDragEnter={() => setIsDraggingOver(true)}\n          onDragLeave={() => setIsDraggingOver(false)}\n          animate={{\n            borderColor: isDraggingOver\n              ? theme.colors.imageSelect[props.genre].border.hover\n              : theme.colors.imageSelect[props.genre].border.rest,\n          }}\n          transition={{ duration: 0.3 }}\n          $genre={props.genre}\n          $size={props.size}\n        >\n          <motion.div\n            transition={{\n              layout: {\n                duration: 0.3,\n                ease: 'easeInOut',\n                type: 'spring',\n              },\n            }}\n            layout\n            style={{ display: 'flex', flexWrap: 'wrap', gap: `${size.padding - 2}px` }}\n          >\n            {images.map(\n              (img) =>\n                img.url && (\n                  <motion.div\n                    key={img.id}\n                    style={{\n                      position: 'relative',\n                      width: `${props.imageSettings.width}px`,\n                      height: `${props.imageSettings.height}px`,\n                      userSelect: 'none',\n                      overflow: 'hidden',\n                      borderRadius: `${size.radius}px`,\n                      flexGrow: 1,\n                    }}\n                    layout\n                    transition={{\n                      layout: {\n                        duration: 0.3,\n                        ease: 'easeInOut',\n                        type: 'spring',\n                      },\n                    }}\n                  >\n                    <Image\n                      sxStack={(theme) => ({\n                        default: {\n                          width: '100%',\n                          height: '100%',\n                          alignItems: 'center',\n                          justifyContent: 'center',\n                          backgroundColor: theme.palette.black10,\n                          position: 'absolute',\n                          pointerEvents: 'none',\n                        },\n                      })}\n                      isShowBeforeImage={props.isContain}\n                      sxImage={{\n                        default: {\n                          objectFit: props.isContain ? 'contain' : 'cover',\n                        },\n                      }}\n                      alt={img.name || 'image'}\n                      src={img.url}\n                      componentFallback={\n                        <Typography\n                          sx={{\n                            default: {\n                              variant: 'h6',\n                            },\n                          }}\n                        >\n                          {props.locale.imageFallback}\n                        </Typography>\n                      }\n                    />\n                    <Button\n                      sx={{\n                        default: {\n                          position: 'absolute',\n                          top: 5,\n                          right: 5,\n                        },\n                      }}\n                      genre={props.genre}\n                      size='small'\n                      icons={[\n                        {\n                          type: 'id',\n                          name: 'Close',\n                        },\n                      ]}\n                      isWidthAsHeight\n                      isHiddenBorder\n                      isRadius\n                      onClick={() => handleDelete(img.id)}\n                    />\n                    <Button\n                      sx={{\n                        default: {\n                          position: 'absolute',\n                          bottom: 5,\n                          right: 5,\n                        },\n                      }}\n                      genre={props.genre}\n                      size='small'\n                      icons={[\n                        {\n                          type: 'id',\n                          name: 'Activity',\n                        },\n                      ]}\n                      isWidthAsHeight\n                      isHiddenBorder\n                      isRadius\n                      onClick={() => img.url && handleAdd({ id: img.id, imageSrc: img.url })}\n                    />\n                  </motion.div>\n                ),\n            )}\n            {images.length === 0 ? (\n              <div\n                onClick={openFileDialog}\n                key='empty'\n                style={{\n                  position: 'relative',\n                  width: `${props.imageSettings.width}px`,\n                  height: `${props.imageSettings.height}px`,\n                  userSelect: 'none',\n                  overflow: 'hidden',\n                  borderRadius: `${size.radius}px`,\n                  flexGrow: 1,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  textAlign: 'center',\n                  cursor: 'pointer',\n                }}\n              >\n                <Typography\n                  style={{\n                    color: theme.colors.imageSelect[props.genre].color.rest,\n                  }}\n                  sx={{\n                    default: {},\n                  }}\n                >\n                  {props.locale.dragAndDrop}\n                </Typography>\n              </div>\n            ) : null}\n          </motion.div>\n\n          <input\n            ref={refInput}\n            type='file'\n            accept={LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT}\n            multiple\n            style={{ display: 'none' }}\n            onChange={(e) => {\n              if (e.target.files) handleAddFilesCrop(e.target.files);\n            }}\n          />\n        </ImageSelectListWrapper>\n        <Stack sx={{ default: { flexGrow: 1, gap: `${size.padding - 2}px` } }}>\n          <Button\n            type='button'\n            genre={props.genre}\n            size={props.size}\n            sx={{\n              default: {\n                flexGrow: 3,\n              },\n            }}\n            isRadius\n            onClick={openFileDialog}\n          >\n            {props.locale.buttonAdd}\n          </Button>\n          <Button\n            isRadius\n            type='button'\n            sx={{\n              default: {\n                flexGrow: 1,\n              },\n            }}\n            onClick={resetImages}\n            genre={props.genre}\n            size={props.size}\n          >\n            {props.locale.buttonReset}\n          </Button>\n        </Stack>\n      </ImageSelectWrapper>\n      {props?.error ? (\n        <ErrorMessage\n          {...props.error}\n          size={props?.error.size ?? props.size}\n          font={{\n            size: 12,\n            weight: 400,\n            family: theme.font.family,\n          }}\n        />\n      ) : null}\n    </>\n  );\n};\n"],"names":["jsxs","jsx","Fragment","theme"],"mappings":"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"}

package/build/{component.styles-0apMzB81.js → component-BtgXUCiJ.js}

@@ -1,14 +1,9 @@
 import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
-import { b as ErrorMessage, a as addError } from "./style-BzxSHZDV.js";
-import { K as KEY_SIZE_DATA } from "./theme.global-BzunMIsv.js";
+import { I as Icon, i as CheckboxWrapper, bp as KEY_SIZE_DATA, bl as ErrorMessage } from "./context.constants-C5Unln0I.js";
 import { useCallback, useMemo } from "react";
-import styled, { useTheme, css } from "styled-components";
-import { I as Icon } from "./component.styles-CtZeOnGH.js";
-import { d as addRippleDefault } from "./component.styles-B0L4jbOO.js";
+import { useTheme } from "styled-components";
+import "./component.styles-B0L4jbOO.js";
 import { R as Ripple } from "./component-DHM9pbab.js";
-import { g as addSXTypography } from "./component-eqTj4VVc.js";
-import { l as addDisabled, b as addTransition, g as addOutline, c as addFont } from "./style-RL73t3JD.js";
-import { a as addSX } from "./style-plT9Ah7t.js";
 const Checkbox = (props) => {
   var _a, _b, _c, _d, _e;
   const handleOnClick = useCallback(
@@ -84,72 +79,7 @@ const Checkbox = (props) => {
     ) : null
   ] });
 };
-const CheckboxSize = css`
-  ${(props) => CheckboxSizeConstructor({ ...KEY_SIZE_DATA[props.$size], isWidthAsHeight: props.$isWidthAsHeight })};
-`;
-const CheckboxSizeConstructor = (props) => css`
-  height: ${props.height}px;
-  min-height: ${props.height}px;
-  border-radius: ${props.radius}px;
-  gap: ${props.padding - 2}px;
-  padding: ${props.padding - 4}px;
-  ${props.isWidthAsHeight && css`
-    width: ${props.height}px;
-    min-width: ${props.height}px;
-    padding: 0px;
-  `};
-`;
-const CheckboxGenre = css`
-  ${(props) => css`
-    background: ${props.theme.colors.checkbox[props.$genre].background.rest};
-    border-color: ${props.theme.colors.checkbox[props.$genre].border.rest};
-    color: ${props.theme.colors.checkbox[props.$genre].color.rest};
-    &:hover {
-      background: ${props.theme.colors.checkbox[props.$genre].background.hover};
-      border-color: ${props.theme.colors.checkbox[props.$genre].border.hover};
-      color: ${props.theme.colors.checkbox[props.$genre].color.hover};
-    }
-  `};
-`;
-const addCheckboxDisabled = css`
-  ${addDisabled};
-  ${(props) => props.$isDisabled ? css`
-          background: ${props.theme.colors.checkbox[props.$genre].background.rest} !important;
-          border-color: ${props.theme.colors.checkbox[props.$genre].border.rest} !important;
-          color: ${props.theme.colors.checkbox[props.$genre].color.rest} !important;
-        ` : ""}
-`;
-const CheckboxHiddenBorder = css`
-  ${(props) => props.$isHiddenBorder && css`
-      border-color: transparent !important;
-    `}
-`;
-const CheckboxWrapper = styled.button`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  border: 1px solid transparent;
-  user-select: none;
-  cursor: pointer;
-  background-color: ${(props) => props.$isNotBackground && "transparent"};
-
-  ${addRippleDefault};
-  ${addTransition};
-  ${CheckboxGenre};
-  ${CheckboxHiddenBorder};
-  ${CheckboxSize};
-  ${addCheckboxDisabled}
-  ${addOutline};
-  ${addFont};
-  ${addError};
-  ${addSXTypography};
-  ${addSX};
-`;
 export {
-  Checkbox as C,
-  CheckboxSize as a,
-  CheckboxSizeConstructor as b,
-  CheckboxGenre as c,
-  CheckboxWrapper as d
+  Checkbox as C
 };
-//# sourceMappingURL=component.styles-0apMzB81.js.map
+//# sourceMappingURL=component-BtgXUCiJ.js.map

package/build/component-BtgXUCiJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-BtgXUCiJ.js","sources":["../src/components/checkbox/component.tsx"],"sourcesContent":["import { ErrorMessage } from '@local/styles/error';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { FC, useCallback, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { Icon } from '../icon';\nimport { Ripple } from '../ripple';\nimport { CheckboxProps, CheckboxWrapper } from '.';\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n  const handleOnClick = useCallback(\n    (checked: boolean) => {\n      props.onChange?.(checked);\n    },\n    [props.onChange],\n  );\n  const theme = useTheme();\n  const children = useMemo(\n    () => (\n      <>\n        <Icon\n          {...(props.checked ? props.view.true : props.view.false)}\n          size={(props.checked ? props.view.true : props.view.false).size ?? props.size}\n        />\n        {props.children && props.children}\n      </>\n    ),\n    [props.checked, props.children, props.size, props.view],\n  );\n  const LoadingComponent = <Icon size={props.size} type='loading' name='Line' />;\n\n  return (\n    <>\n      <CheckboxWrapper\n        type='button'\n        $genre={props.genre}\n        $error={props.error}\n        $view={props.view}\n        $font={{\n          size: props.font?.size ?? KEY_SIZE_DATA[props.size].font,\n          weight: props.font?.weight ?? 700,\n          family: props.font?.family ?? theme.font.family,\n          height: props.font?.height,\n        }}\n        $checked={props.checked}\n        $isWidthAsHeight={props.isWidthAsHeight}\n        $size={props.size}\n        $isDisabled={props.isDisabled}\n        $isHiddenBorder={props.isHiddenBorder}\n        $isNotBackground={props.isNotBackground}\n        $sx={props.sx}\n        $sxTypography={props.sxTypography}\n        $isDisabledOutline={props.isDisabled ?? props.isDisabledOutline}\n        $isOutlineBoxShadow={props.isOutlineBoxShadow}\n        $isReadOnly={props.isReadOnly}\n        disabled={props.isDisabled}\n        tabIndex={0}\n        onClick={() => !props.isDisabled && handleOnClick(!props.checked)}\n      >\n        <Ripple color={theme.colors.checkbox[props.genre].color.rest} isDisabled={props.isDisabled} />\n        {props.isOnlyLoading ? (\n          props.isLoading ? (\n            LoadingComponent\n          ) : (\n            children\n          )\n        ) : (\n          <>\n            {children}\n            {props.isLoading && LoadingComponent}\n          </>\n        )}\n      </CheckboxWrapper>\n      {props?.error ? (\n        <ErrorMessage\n          {...props.error}\n          size={props?.error.size ?? props.size}\n          font={{\n            size: 12,\n            weight: 400,\n            family: props.font?.family ?? theme.font.family,\n          }}\n        />\n      ) : null}\n    </>\n  );\n};\n"],"names":["_a","jsxs","Fragment","jsx"],"mappings":";;;;;;AAUO,MAAM,WAA8B,CAAC,UAAU;;AACpD,QAAM,gBAAgB;AAAA,IACpB,CAAC,YAAqB;;AACpB,OAAAA,MAAA,MAAM,aAAN,gBAAAA,IAAA,YAAiB;AAAA,IAAO;AAAA,IAE1B,CAAC,MAAM,QAAQ;AAAA,EAAA;AAEjB,QAAM,QAAQ,SAAA;AACd,QAAM,WAAW;AAAA,IACf,MACEC,kCAAAA,KAAAC,4BAAA,EACE,UAAA;AAAA,MAAAC,kCAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAI,MAAM,UAAU,MAAM,KAAK,OAAO,MAAM,KAAK;AAAA,UAClD,OAAO,MAAM,UAAU,MAAM,KAAK,OAAO,MAAM,KAAK,OAAO,QAAQ,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAE1E,MAAM,YAAY,MAAM;AAAA,IAAA,GAC3B;AAAA,IAEF,CAAC,MAAM,SAAS,MAAM,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA,EAAA;AAExD,QAAM,yDAAoB,MAAA,EAAK,MAAM,MAAM,MAAM,MAAK,WAAU,MAAK,OAAA,CAAO;AAE5E,SACEF,kCAAAA,KAAAC,4BAAA,EACE,UAAA;AAAA,IAAAD,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,QAAQ,MAAM;AAAA,QACd,QAAQ,MAAM;AAAA,QACd,OAAO,MAAM;AAAA,QACb,OAAO;AAAA,UACL,QAAM,WAAM,SAAN,mBAAY,SAAQ,cAAc,MAAM,IAAI,EAAE;AAAA,UACpD,UAAQ,WAAM,SAAN,mBAAY,WAAU;AAAA,UAC9B,UAAQ,WAAM,SAAN,mBAAY,WAAU,MAAM,KAAK;AAAA,UACzC,SAAQ,WAAM,SAAN,mBAAY;AAAA,QAAA;AAAA,QAEtB,UAAU,MAAM;AAAA,QAChB,kBAAkB,MAAM;AAAA,QACxB,OAAO,MAAM;AAAA,QACb,aAAa,MAAM;AAAA,QACnB,iBAAiB,MAAM;AAAA,QACvB,kBAAkB,MAAM;AAAA,QACxB,KAAK,MAAM;AAAA,QACX,eAAe,MAAM;AAAA,QACrB,oBAAoB,MAAM,cAAc,MAAM;AAAA,QAC9C,qBAAqB,MAAM;AAAA,QAC3B,aAAa,MAAM;AAAA,QACnB,UAAU,MAAM;AAAA,QAChB,UAAU;AAAA,QACV,SAAS,MAAM,CAAC,MAAM,cAAc,cAAc,CAAC,MAAM,OAAO;AAAA,QAEhE,UAAA;AAAA,UAAAE,kCAAAA,IAAC,QAAA,EAAO,OAAO,MAAM,OAAO,SAAS,MAAM,KAAK,EAAE,MAAM,MAAM,YAAY,MAAM,WAAA,CAAY;AAAA,UAC3F,MAAM,gBACL,MAAM,YACJ,mBAEA,WAGFF,kCAAAA,KAAAC,4BAAA,EACG,UAAA;AAAA,YAAA;AAAA,YACA,MAAM,aAAa;AAAA,UAAA,EAAA,CACtB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,KAGH,+BAAO,SACNC,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG,MAAM;AAAA,QACV,OAAM,+BAAO,MAAM,SAAQ,MAAM;AAAA,QACjC,MAAM;AAAA,UACJ,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,UAAQ,WAAM,SAAN,mBAAY,WAAU,MAAM,KAAK;AAAA,QAAA;AAAA,MAC3C;AAAA,IAAA,IAEA;AAAA,EAAA,GACN;AAEJ;"}

package/build/component-C-yqkm2n.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("./consts.cjs.js"),n=require("./use-DNJlP5ji.cjs"),s=require("react"),l=require("./context.constants-DSfxf3ST.cjs");exports.ImageButton=r=>{const i=s.useRef(null),u=s.useCallback(()=>{var e;null==(e=i.current)||e.click()},[]),{handleAddFiles:o}=n.useImageCrop({onSave:r.onSave,locale:r.locale,dialog:r.dialog,imageSettings:r.imageSettings,refInput:i});return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(l.Button,{...r.button,onClick:e=>{var t,n;null==(n=(t=r.button).onClick)||n.call(t,e),u()},children:r.button.children||r.locale.buttonAdd}),e.jsxRuntimeExports.jsx("input",{ref:i,type:"file",accept:t.LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT,multiple:!0,style:{display:"none"},onChange:e=>{e.target.files&&o(e.target.files)}})]})};
+//# sourceMappingURL=component-C-yqkm2n.cjs.map