@jenesei-software/jenesei-kit-react 1.3.15 → 1.3.16

package/build/component.styles-CHqowxsZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-CHqowxsZ.js","sources":["../src/components/accordion/component.tsx","../src/components/accordion/component.styles.ts"],"sourcesContent":["import { Stack } from '@local/components/stack';\n\nimport React, { FC, useCallback } from 'react';\n\nimport {\n  AccordionDetails,\n  AccordionProps,\n  AccordionStyledIcon,\n  AccordionSummary,\n  AccordionSummaryContent,\n  AccordionWrapper,\n} from '.';\n\nexport const Accordion: FC<AccordionProps> = (props) => {\n  const onClickSummary = useCallback(() => {\n    if (props.onClickSummary) props.onClickSummary();\n  }, [props]);\n\n  const onClickIcon = useCallback(\n    (event: React.MouseEvent<SVGSVGElement>) => {\n      if (props.onClickIcon) {\n        event.stopPropagation();\n\n        props.onClickIcon();\n      }\n    },\n    [props],\n  );\n\n  return (\n    <Stack {...props.wrapperProps}>\n      <AccordionWrapper>\n        <AccordionSummary onClick={onClickSummary}>\n          <AccordionSummaryContent $isAccordionIcon={props.isAccordionIcon}>\n            {props.accordionSummary}\n          </AccordionSummaryContent>\n          {props.isAccordionIcon && (\n            <AccordionStyledIcon\n              $expanded={props.expanded}\n              onClick={onClickIcon}\n              name='Arrow1'\n              color='black100'\n              type='id'\n              size='large'\n            />\n          )}\n        </AccordionSummary>\n        <AccordionDetails $expanded={props.expanded}>{props.accordionDetails}</AccordionDetails>\n      </AccordionWrapper>\n    </Stack>\n  );\n};\n","import { Icon } from '@local/components/icon';\nimport { addTransition } from '@local/styles/add';\n\nimport styled, { css } from 'styled-components';\n\nimport { AccordionDetailsProps, AccordionStyledIconProps, AccordionSummaryContentProps } from '.';\n\nexport const AccordionWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`;\nexport const AccordionSummary = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  user-select: none;\n`;\nexport const AccordionSummaryContent = styled.div<AccordionSummaryContentProps>`\n  width: 100%;\n\n  ${(props) =>\n    props.$isAccordionIcon &&\n    css`\n      width: calc(100% - 26px);\n    `}\n`;\nexport const AccordionDetails = styled.div<AccordionDetailsProps>`\n  max-height: ${(props) => (props.$expanded ? '9999px' : '0')};\n  height: ${(props) => (props.$expanded ? '100%' : '0')};\n  opacity: ${(props) => (props.$expanded ? 1 : 0)};\n  overflow: hidden;\n  ${addTransition};\n`;\nexport const AccordionStyledIcon = styled(Icon)<AccordionStyledIconProps>`\n  padding: 4px;\n  box-sizing: content-box;\n  cursor: pointer;\n  ${(props) =>\n    props.$expanded\n      ? css`\n          transform: rotate(180deg);\n        `\n      : css`\n          transform: rotate(0deg);\n        `}\n`;\n"],"names":["jsxs","jsx"],"mappings":";;;;;;AAaO,MAAM,YAAgC,CAAC,UAAU;AACtD,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,MAAM,eAAgB,OAAM,eAAA;AAAA,EAAe,GAC9C,CAAC,KAAK,CAAC;AAEV,QAAM,cAAc;AAAA,IAClB,CAAC,UAA2C;AAC1C,UAAI,MAAM,aAAa;AACrB,cAAM,gBAAA;AAEN,cAAM,YAAA;AAAA,MAAY;AAAA,IACpB;AAAA,IAEF,CAAC,KAAK;AAAA,EAAA;AAGR,+CACG,OAAA,EAAO,GAAG,MAAM,cACf,iDAAC,kBAAA,EACC,UAAA;AAAA,IAAAA,kCAAAA,KAAC,kBAAA,EAAiB,SAAS,gBACzB,UAAA;AAAA,MAAAC,sCAAC,yBAAA,EAAwB,kBAAkB,MAAM,iBAC9C,gBAAM,kBACT;AAAA,MACC,MAAM,mBACLA,kCAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,MAAM;AAAA,UACjB,SAAS;AAAA,UACT,MAAK;AAAA,UACL,OAAM;AAAA,UACN,MAAK;AAAA,UACL,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP,GAEJ;AAAA,0CACC,kBAAA,EAAiB,WAAW,MAAM,UAAW,gBAAM,iBAAA,CAAiB;AAAA,EAAA,EAAA,CACvE,EAAA,CACF;AAEJ;AC5CO,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAKhC,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMhC,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA,IAG1C,CAAC,UACD,MAAM,oBACN;AAAA;AAAA,KAEC;AAAA;AAEE,MAAM,mBAAmB,OAAO;AAAA,gBACvB,CAAC,UAAW,MAAM,YAAY,WAAW,GAAI;AAAA,YACjD,CAAC,UAAW,MAAM,YAAY,SAAS,GAAI;AAAA,aAC1C,CAAC,UAAW,MAAM,YAAY,IAAI,CAAE;AAAA;AAAA,IAE7C,aAAa;AAAA;AAEV,MAAM,sBAAsB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,IAI1C,CAAC,UACD,MAAM,YACF;AAAA;AAAA,YAGA;AAAA;AAAA,SAEC;AAAA;"}

package/build/component.styles-CXyyc0xg.cjs

@@ -0,0 +1,32 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),o=require("./component-GKvpOWlO.cjs"),n=require("react"),r=require("./component.styles-BviHtzJH.cjs"),c=require("./style-Df37KnoJ.cjs"),i=require("styled-components"),s=i.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`,t=i.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  user-select: none;
+`,d=i.div`
+  width: 100%;
+
+  ${e=>e.$isAccordionIcon&&i.css`
+      width: calc(100% - 26px);
+    `}
+`,a=i.div`
+  max-height: ${e=>e.$expanded?"9999px":"0"};
+  height: ${e=>e.$expanded?"100%":"0"};
+  opacity: ${e=>e.$expanded?1:0};
+  overflow: hidden;
+  ${c.addTransition};
+`,x=i(r.Icon)`
+  padding: 4px;
+  box-sizing: content-box;
+  cursor: pointer;
+  ${e=>e.$expanded?i.css`
+          transform: rotate(180deg);
+        `:i.css`
+          transform: rotate(0deg);
+        `}
+`;exports.Accordion=r=>{const c=n.useCallback(()=>{r.onClickSummary&&r.onClickSummary()},[r]),i=n.useCallback(e=>{r.onClickIcon&&(e.stopPropagation(),r.onClickIcon())},[r]);return e.jsxRuntimeExports.jsx(o.Stack,{...r.wrapperProps,children:e.jsxRuntimeExports.jsxs(s,{children:[e.jsxRuntimeExports.jsxs(t,{onClick:c,children:[e.jsxRuntimeExports.jsx(d,{$isAccordionIcon:r.isAccordionIcon,children:r.accordionSummary}),r.isAccordionIcon&&e.jsxRuntimeExports.jsx(x,{$expanded:r.expanded,onClick:i,name:"Arrow1",color:"black100",type:"id",size:"large"})]}),e.jsxRuntimeExports.jsx(a,{$expanded:r.expanded,children:r.accordionDetails})]})})},exports.AccordionDetails=a,exports.AccordionStyledIcon=x,exports.AccordionSummary=t,exports.AccordionSummaryContent=d,exports.AccordionWrapper=s;
+//# sourceMappingURL=component.styles-CXyyc0xg.cjs.map

package/build/{component.styles-Py-IeQ2q.cjs.map → component.styles-CXyyc0xg.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"component.styles-Py-IeQ2q.cjs","sources":["../src/components/accordion/component.styles.ts","../src/components/accordion/component.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Icon } from '@local/components/icon';\nimport { addTransition } from '@local/styles/add';\n\nimport { AccordionDetailsProps, AccordionStyledIconProps, AccordionSummaryContentProps } from '.';\n\nexport const AccordionWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`;\nexport const AccordionSummary = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  user-select: none;\n`;\nexport const AccordionSummaryContent = styled.div<AccordionSummaryContentProps>`\n  width: 100%;\n\n  ${(props) =>\n    props.$isAccordionIcon &&\n    css`\n      width: calc(100% - 26px);\n    `}\n`;\nexport const AccordionDetails = styled.div<AccordionDetailsProps>`\n  max-height: ${(props) => (props.$expanded ? '9999px' : '0')};\n  height: ${(props) => (props.$expanded ? '100%' : '0')};\n  opacity: ${(props) => (props.$expanded ? 1 : 0)};\n  overflow: hidden;\n  ${addTransition};\n`;\nexport const AccordionStyledIcon = styled(Icon)<AccordionStyledIconProps>`\n  padding: 4px;\n  box-sizing: content-box;\n  cursor: pointer;\n  ${(props) =>\n    props.$expanded\n      ? css`\n          transform: rotate(180deg);\n        `\n      : css`\n          transform: rotate(0deg);\n        `}\n`;\n","import React, { FC, useCallback } from 'react';\n\nimport { Stack } from '@local/components/stack';\n\nimport {\n  AccordionDetails,\n  AccordionProps,\n  AccordionStyledIcon,\n  AccordionSummary,\n  AccordionSummaryContent,\n  AccordionWrapper,\n} from '.';\n\nexport const Accordion: FC<AccordionProps> = (props) => {\n  const onClickSummary = useCallback(() => {\n    if (props.onClickSummary) props.onClickSummary();\n  }, [props]);\n\n  const onClickIcon = useCallback(\n    (event: React.MouseEvent<SVGSVGElement>) => {\n      if (props.onClickIcon) {\n        event.stopPropagation();\n\n        props.onClickIcon();\n      }\n    },\n    [props],\n  );\n\n  return (\n    <Stack {...props.wrapperProps}>\n      <AccordionWrapper>\n        <AccordionSummary onClick={onClickSummary}>\n          <AccordionSummaryContent $isAccordionIcon={props.isAccordionIcon}>\n            {props.accordionSummary}\n          </AccordionSummaryContent>\n          {props.isAccordionIcon && (\n            <AccordionStyledIcon\n              $expanded={props.expanded}\n              onClick={onClickIcon}\n              name='Arrow1'\n              primaryColor='black100'\n              type='id'\n              size='large'\n            />\n          )}\n        </AccordionSummary>\n        <AccordionDetails $expanded={props.expanded}>{props.accordionDetails}</AccordionDetails>\n      </AccordionWrapper>\n    </Stack>\n  );\n};\n"],"names":["AccordionWrapper","styled","div","AccordionSummary","AccordionSummaryContent","props","$isAccordionIcon","css","AccordionDetails","$expanded","addTransition","AccordionStyledIcon","Icon","onClickSummary","useCallback","onClickIcon","event","stopPropagation","Stack","wrapperProps","children","jsxs","onClick","jsx","isAccordionIcon","accordionSummary","expanded","name","primaryColor","type","size","accordionDetails"],"mappings":"kOAOaA,EAAmBC,EAAOC,GAAA;;;;EAK1BC,EAAmBF,EAAOC,GAAA;;;;;EAM1BE,EAA0BH,EAAOC,GAAA;;;IAGzCG,GACDA,EAAMC,kBACNC,EAAAA,GAAAA;;;EAISC,EAAmBP,EAAOC,GAAA;gBACtBG,GAAWA,EAAMI,UAAY,SAAW;YAC5CJ,GAAWA,EAAMI,UAAY,OAAS;aACrCJ,GAAWA,EAAMI,UAAY,EAAI;;IAE3CC;EAESC,EAAsBV,EAAOW,OAAI;;;;IAIzCP,GACDA,EAAMI,UACFF,EAAAA,GAAAA;;UAGAA,EAAAA,GAAAA;;;oBC9BsCF,IAC5C,MAAMQ,EAAiBC,EAAAA,YAAY,KAC7BT,EAAMQ,gBAAgBR,EAAMQ,kBAC/B,CAACR,IAEEU,EAAcD,EAAAA,YACjBE,IACKX,EAAMU,cACRC,EAAMC,kBAENZ,EAAMU,gBAGV,CAACV,IAGH,+BACGa,QAAA,IAAUb,EAAMc,aACfC,kCAACpB,EAAA,CACCoB,SAAA,GAAAC,kBAAAA,KAAClB,EAAA,CAAiBmB,QAAST,EACzBO,SAAA,CAAAG,wBAACnB,EAAA,CAAwBE,iBAAkBD,EAAMmB,gBAC9CJ,WAAMK,mBAERpB,EAAMmB,iBACLD,EAAAA,kBAAAA,IAACZ,EAAA,CACCF,UAAWJ,EAAMqB,SACjBJ,QAASP,EACTY,KAAK,SACLC,aAAa,WACbC,KAAK,KACLC,KAAK,qCAIVtB,EAAA,CAAiBC,UAAWJ,EAAMqB,SAAWN,WAAMW"}
+{"version":3,"file":"component.styles-CXyyc0xg.cjs","sources":["../src/components/accordion/component.styles.ts","../src/components/accordion/component.tsx"],"sourcesContent":["import { Icon } from '@local/components/icon';\nimport { addTransition } from '@local/styles/add';\n\nimport styled, { css } from 'styled-components';\n\nimport { AccordionDetailsProps, AccordionStyledIconProps, AccordionSummaryContentProps } from '.';\n\nexport const AccordionWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`;\nexport const AccordionSummary = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  user-select: none;\n`;\nexport const AccordionSummaryContent = styled.div<AccordionSummaryContentProps>`\n  width: 100%;\n\n  ${(props) =>\n    props.$isAccordionIcon &&\n    css`\n      width: calc(100% - 26px);\n    `}\n`;\nexport const AccordionDetails = styled.div<AccordionDetailsProps>`\n  max-height: ${(props) => (props.$expanded ? '9999px' : '0')};\n  height: ${(props) => (props.$expanded ? '100%' : '0')};\n  opacity: ${(props) => (props.$expanded ? 1 : 0)};\n  overflow: hidden;\n  ${addTransition};\n`;\nexport const AccordionStyledIcon = styled(Icon)<AccordionStyledIconProps>`\n  padding: 4px;\n  box-sizing: content-box;\n  cursor: pointer;\n  ${(props) =>\n    props.$expanded\n      ? css`\n          transform: rotate(180deg);\n        `\n      : css`\n          transform: rotate(0deg);\n        `}\n`;\n","import { Stack } from '@local/components/stack';\n\nimport React, { FC, useCallback } from 'react';\n\nimport {\n  AccordionDetails,\n  AccordionProps,\n  AccordionStyledIcon,\n  AccordionSummary,\n  AccordionSummaryContent,\n  AccordionWrapper,\n} from '.';\n\nexport const Accordion: FC<AccordionProps> = (props) => {\n  const onClickSummary = useCallback(() => {\n    if (props.onClickSummary) props.onClickSummary();\n  }, [props]);\n\n  const onClickIcon = useCallback(\n    (event: React.MouseEvent<SVGSVGElement>) => {\n      if (props.onClickIcon) {\n        event.stopPropagation();\n\n        props.onClickIcon();\n      }\n    },\n    [props],\n  );\n\n  return (\n    <Stack {...props.wrapperProps}>\n      <AccordionWrapper>\n        <AccordionSummary onClick={onClickSummary}>\n          <AccordionSummaryContent $isAccordionIcon={props.isAccordionIcon}>\n            {props.accordionSummary}\n          </AccordionSummaryContent>\n          {props.isAccordionIcon && (\n            <AccordionStyledIcon\n              $expanded={props.expanded}\n              onClick={onClickIcon}\n              name='Arrow1'\n              color='black100'\n              type='id'\n              size='large'\n            />\n          )}\n        </AccordionSummary>\n        <AccordionDetails $expanded={props.expanded}>{props.accordionDetails}</AccordionDetails>\n      </AccordionWrapper>\n    </Stack>\n  );\n};\n"],"names":["AccordionWrapper","styled","div","AccordionSummary","AccordionSummaryContent","props","$isAccordionIcon","css","AccordionDetails","$expanded","addTransition","AccordionStyledIcon","Icon","onClickSummary","useCallback","onClickIcon","event","stopPropagation","Stack","wrapperProps","children","jsxs","onClick","jsx","isAccordionIcon","accordionSummary","expanded","name","color","type","size","accordionDetails"],"mappings":"kOAOaA,EAAmBC,EAAOC,GAAA;;;;EAK1BC,EAAmBF,EAAOC,GAAA;;;;;EAM1BE,EAA0BH,EAAOC,GAAA;;;IAGzCG,GACDA,EAAMC,kBACNC,EAAAA,GAAAA;;;EAISC,EAAmBP,EAAOC,GAAA;gBACtBG,GAAWA,EAAMI,UAAY,SAAW;YAC5CJ,GAAWA,EAAMI,UAAY,OAAS;aACrCJ,GAAWA,EAAMI,UAAY,EAAI;;IAE3CC;EAESC,EAAsBV,EAAOW,OAAI;;;;IAIzCP,GACDA,EAAMI,UACFF,EAAAA,GAAAA;;UAGAA,EAAAA,GAAAA;;;oBC9BsCF,IAC5C,MAAMQ,EAAiBC,EAAAA,YAAY,KAC7BT,EAAMQ,gBAAgBR,EAAMQ,kBAC/B,CAACR,IAEEU,EAAcD,EAAAA,YACjBE,IACKX,EAAMU,cACRC,EAAMC,kBAENZ,EAAMU,gBAGV,CAACV,IAGH,+BACGa,QAAA,IAAUb,EAAMc,aACfC,kCAACpB,EAAA,CACCoB,SAAA,GAAAC,kBAAAA,KAAClB,EAAA,CAAiBmB,QAAST,EACzBO,SAAA,CAAAG,wBAACnB,EAAA,CAAwBE,iBAAkBD,EAAMmB,gBAC9CJ,WAAMK,mBAERpB,EAAMmB,iBACLD,EAAAA,kBAAAA,IAACZ,EAAA,CACCF,UAAWJ,EAAMqB,SACjBJ,QAASP,EACTY,KAAK,SACLC,MAAM,WACNC,KAAK,KACLC,KAAK,qCAIVtB,EAAA,CAAiBC,UAAWJ,EAAMqB,SAAWN,WAAMW"}

package/build/component.styles-CtZeOnGH.js

@@ -0,0 +1,120 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { useMemo, useState, useEffect } from "react";
+import styled, { useTheme, css } from "styled-components";
+import { f as addColorTransition } from "./style-RL73t3JD.js";
+import { a as addSX } from "./style-plT9Ah7t.js";
+import { K as KEY_SIZE_DATA } from "./theme.global-BzunMIsv.js";
+const Icon = (props) => {
+  const theme = useTheme();
+  const iconId = useMemo(
+    () => theme.icon.getIconId({ type: props.type, name: props.name }),
+    [props.name, props.type, theme.icon.getIconId]
+  );
+  const spriteUrl = useMemo(() => theme.icon.getSpriteUrl({ type: props.type }), [props.type, theme.icon.getSpriteUrl]);
+  const loaded = useLazyInjectSprite(spriteUrl);
+  if (!loaded) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    StyledSVG,
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      $size: props.size,
+      $turn: props.turn,
+      $order: props.order,
+      $color: props.color || void 0,
+      $sx: props.sx,
+      className: props.className,
+      onClick: props.onClick,
+      tabIndex: props.tabIndex,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("use", { href: iconId })
+    }
+  );
+};
+function getIconComponents(props) {
+  var _a, _b;
+  return (_b = (_a = props.icons ?? []) == null ? void 0 : _a.filter((icon) => !icon.isHidden)) == null ? void 0 : _b.map((icon, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { size: (icon == null ? void 0 : icon.size) ?? props.size, ...icon }, `${icon.type}-${icon.name}-${index}`));
+}
+function useInjectSprites(urls) {
+  useEffect(() => {
+    const containers = [];
+    urls.forEach(async (url) => {
+      try {
+        const res = await fetch(url);
+        if (!res.ok) {
+          console.error(`Failed to load sprite: ${url}`);
+          return;
+        }
+        const text = await res.text();
+        const div = document.createElement("div");
+        div.style.display = "none";
+        div.innerHTML = text;
+        document.body.prepend(div);
+        containers.push(div);
+      } catch (err) {
+        console.error(`Error loading sprite ${url}`, err);
+      }
+    });
+    return () => {
+      containers.forEach((div) => div.remove());
+    };
+  }, [urls]);
+}
+const loadedSprites = /* @__PURE__ */ new Map();
+function useLazyInjectSprite(url) {
+  const [loaded, setLoaded] = useState(loadedSprites.has(url));
+  useEffect(() => {
+    var _a;
+    if (loaded) return;
+    let isMounted = true;
+    if (!loadedSprites.has(url)) {
+      const promise = (async () => {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`Failed to load sprite: ${url}`);
+        const text = await res.text();
+        const div = document.createElement("div");
+        div.style.display = "none";
+        div.innerHTML = text;
+        document.body.prepend(div);
+      })();
+      loadedSprites.set(url, promise);
+    }
+    (_a = loadedSprites.get(url)) == null ? void 0 : _a.then(() => {
+      if (isMounted) setLoaded(true);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [url, loaded]);
+  return loaded;
+}
+const StyledSVG = styled.svg`
+  color: ${(props) => props.$color ? props.theme.palette[props.$color] : "inherit"};
+
+  ${(props) => css`
+    height: ${props.$size !== "100%" ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : "100%"};
+    min-height: ${props.$size !== "100%" ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : "100%"};
+
+    width: ${props.$size !== "100%" ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : "100%"};
+    min-width: ${props.$size !== "100%" ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : "100%"};
+
+    transform: rotate(${props.$turn || 0}deg);
+  `}
+  ${(props) => props.$order !== void 0 && css`
+      order: ${props.$order};
+    `};
+  ${addColorTransition};
+  & path {
+    ${addColorTransition};
+  }
+  ${addSX};
+`;
+export {
+  Icon as I,
+  StyledSVG as S,
+  useLazyInjectSprite as a,
+  getIconComponents as g,
+  useInjectSprites as u
+};
+//# sourceMappingURL=component.styles-CtZeOnGH.js.map

package/build/component.styles-CtZeOnGH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-CtZeOnGH.js","sources":["../src/components/icon/component.tsx","../src/components/icon/component.functions.tsx","../src/components/icon/component.styles.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { IconItemProps, StyledSVG, useLazyInjectSprite } from '.';\n\nexport const Icon = (props: IconItemProps) => {\n  const theme = useTheme();\n  const iconId = useMemo(\n    () => theme.icon.getIconId({ type: props.type, name: props.name }),\n    [props.name, props.type, theme.icon.getIconId],\n  );\n  const spriteUrl = useMemo(() => theme.icon.getSpriteUrl({ type: props.type }), [props.type, theme.icon.getSpriteUrl]);\n  const loaded = useLazyInjectSprite(spriteUrl);\n\n  if (!loaded) return null;\n\n  return (\n    <StyledSVG\n      width='24'\n      height='24'\n      viewBox='0 0 24 24'\n      xmlns='http://www.w3.org/2000/svg'\n      $size={props.size}\n      $turn={props.turn}\n      $order={props.order}\n      $color={props.color || undefined}\n      $sx={props.sx}\n      className={props.className}\n      onClick={props.onClick}\n      tabIndex={props.tabIndex}\n    >\n      <use href={iconId} />\n    </StyledSVG>\n  );\n};\n","import { useEffect, useState } from 'react';\n\nimport { getIconComponentsProps, Icon } from '.';\n\nexport function getIconComponents(props: getIconComponentsProps) {\n  return (props.icons ?? [])\n    ?.filter((icon) => !icon.isHidden)\n    ?.map((icon, index) => (\n      <Icon key={`${icon.type}-${icon.name}-${index}`} size={icon?.size ?? props.size} {...icon} />\n    ));\n}\nexport function useInjectSprites(urls: string[]) {\n  useEffect(() => {\n    const containers: HTMLDivElement[] = [];\n\n    urls.forEach(async (url) => {\n      try {\n        const res = await fetch(url);\n        if (!res.ok) {\n          console.error(`Failed to load sprite: ${url}`);\n          return;\n        }\n        const text = await res.text();\n\n        const div = document.createElement('div');\n        div.style.display = 'none';\n        div.innerHTML = text;\n\n        document.body.prepend(div);\n        containers.push(div);\n      } catch (err) {\n        console.error(`Error loading sprite ${url}`, err);\n      }\n    });\n\n    return () => {\n      containers.forEach((div) => div.remove());\n    };\n  }, [urls]);\n}\n\nconst loadedSprites = new Map<string, Promise<void>>();\nexport function useLazyInjectSprite(url: string) {\n  const [loaded, setLoaded] = useState(loadedSprites.has(url));\n\n  useEffect(() => {\n    if (loaded) return;\n\n    let isMounted = true;\n\n    if (!loadedSprites.has(url)) {\n      const promise = (async () => {\n        const res = await fetch(url);\n        if (!res.ok) throw new Error(`Failed to load sprite: ${url}`);\n        const text = await res.text();\n        const div = document.createElement('div');\n        div.style.display = 'none';\n        div.innerHTML = text;\n        document.body.prepend(div);\n      })();\n      loadedSprites.set(url, promise);\n    }\n\n    loadedSprites.get(url)?.then(() => {\n      if (isMounted) setLoaded(true);\n    });\n\n    return () => {\n      isMounted = false;\n    };\n  }, [url, loaded]);\n\n  return loaded;\n}\n","import { addColorTransition } from '@local/styles/add';\nimport { addSX } from '@local/styles/sx';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport styled, { css } from 'styled-components';\n\nimport { StyledIconItemProps } from '.';\n\nexport const StyledSVG = styled.svg<StyledIconItemProps>`\n  color: ${(props) => (props.$color ? props.theme.palette[props.$color] : 'inherit')};\n\n  ${(props) => css`\n    height: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n    min-height: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n\n    width: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n    min-width: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n\n    transform: rotate(${props.$turn || 0}deg);\n  `}\n  ${(props) =>\n    props.$order !== undefined &&\n    css`\n      order: ${props.$order};\n    `};\n  ${addColorTransition};\n  & path {\n    ${addColorTransition};\n  }\n  ${addSX};\n`;\n"],"names":["jsx"],"mappings":";;;;;;AAKO,MAAM,OAAO,CAAC,UAAyB;AAC5C,QAAM,QAAQ,SAAA;AACd,QAAM,SAAS;AAAA,IACb,MAAM,MAAM,KAAK,UAAU,EAAE,MAAM,MAAM,MAAM,MAAM,MAAM,MAAM;AAAA,IACjE,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,KAAK,SAAS;AAAA,EAAA;AAE/C,QAAM,YAAY,QAAQ,MAAM,MAAM,KAAK,aAAa,EAAE,MAAM,MAAM,KAAA,CAAM,GAAG,CAAC,MAAM,MAAM,MAAM,KAAK,YAAY,CAAC;AACpH,QAAM,SAAS,oBAAoB,SAAS;AAE5C,MAAI,CAAC,OAAQ,QAAO;AAEpB,SACEA,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,OAAO,MAAM;AAAA,MACb,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM;AAAA,MACd,QAAQ,MAAM,SAAS;AAAA,MACvB,KAAK,MAAM;AAAA,MACX,WAAW,MAAM;AAAA,MACjB,SAAS,MAAM;AAAA,MACf,UAAU,MAAM;AAAA,MAEhB,UAAAA,kCAAAA,IAAC,OAAA,EAAI,MAAM,OAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;AC9BO,SAAS,kBAAkB,OAA+B;;AAC/D,UAAQ,iBAAM,SAAS,CAAA,MAAf,mBACJ,OAAO,CAAC,SAAS,CAAC,KAAK,cADnB,mBAEJ,IAAI,CAAC,MAAM,UACXA,kCAAAA,IAAC,MAAA,EAAgD,OAAM,6BAAM,SAAQ,MAAM,MAAO,GAAG,KAAA,GAA1E,GAAG,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,KAAK,EAA8C;AAEjG;AACO,SAAS,iBAAiB,MAAgB;AAC/C,YAAU,MAAM;AACd,UAAM,aAA+B,CAAA;AAErC,SAAK,QAAQ,OAAO,QAAQ;AAC1B,UAAI;AACF,cAAM,MAAM,MAAM,MAAM,GAAG;AAC3B,YAAI,CAAC,IAAI,IAAI;AACX,kBAAQ,MAAM,0BAA0B,GAAG,EAAE;AAC7C;AAAA,QAAA;AAEF,cAAM,OAAO,MAAM,IAAI,KAAA;AAEvB,cAAM,MAAM,SAAS,cAAc,KAAK;AACxC,YAAI,MAAM,UAAU;AACpB,YAAI,YAAY;AAEhB,iBAAS,KAAK,QAAQ,GAAG;AACzB,mBAAW,KAAK,GAAG;AAAA,MAAA,SACZ,KAAK;AACZ,gBAAQ,MAAM,wBAAwB,GAAG,IAAI,GAAG;AAAA,MAAA;AAAA,IAClD,CACD;AAED,WAAO,MAAM;AACX,iBAAW,QAAQ,CAAC,QAAQ,IAAI,QAAQ;AAAA,IAAA;AAAA,EAC1C,GACC,CAAC,IAAI,CAAC;AACX;AAEA,MAAM,oCAAoB,IAAA;AACnB,SAAS,oBAAoB,KAAa;AAC/C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,cAAc,IAAI,GAAG,CAAC;AAE3D,YAAU,MAAM;;AACd,QAAI,OAAQ;AAEZ,QAAI,YAAY;AAEhB,QAAI,CAAC,cAAc,IAAI,GAAG,GAAG;AAC3B,YAAM,WAAW,YAAY;AAC3B,cAAM,MAAM,MAAM,MAAM,GAAG;AAC3B,YAAI,CAAC,IAAI,GAAI,OAAM,IAAI,MAAM,0BAA0B,GAAG,EAAE;AAC5D,cAAM,OAAO,MAAM,IAAI,KAAA;AACvB,cAAM,MAAM,SAAS,cAAc,KAAK;AACxC,YAAI,MAAM,UAAU;AACpB,YAAI,YAAY;AAChB,iBAAS,KAAK,QAAQ,GAAG;AAAA,MAAA,GAC3B;AACA,oBAAc,IAAI,KAAK,OAAO;AAAA,IAAA;AAGhC,wBAAc,IAAI,GAAG,MAArB,mBAAwB,KAAK,MAAM;AACjC,UAAI,qBAAqB,IAAI;AAAA,IAAA;AAG/B,WAAO,MAAM;AACX,kBAAY;AAAA,IAAA;AAAA,EACd,GACC,CAAC,KAAK,MAAM,CAAC;AAEhB,SAAO;AACT;ACjEO,MAAM,YAAY,OAAO;AAAA,WACrB,CAAC,UAAW,MAAM,SAAS,MAAM,MAAM,QAAQ,MAAM,MAAM,IAAI,SAAU;AAAA;AAAA,IAEhF,CAAC,UAAU;AAAA,cACD,MAAM,UAAU,SAAS,GAAG,cAAc,MAAM,KAAK,EAAE,UAAU,OAAO,MAAM;AAAA,kBAC1E,MAAM,UAAU,SAAS,GAAG,cAAc,MAAM,KAAK,EAAE,UAAU,OAAO,MAAM;AAAA;AAAA,aAEnF,MAAM,UAAU,SAAS,GAAG,cAAc,MAAM,KAAK,EAAE,UAAU,OAAO,MAAM;AAAA,iBAC1E,MAAM,UAAU,SAAS,GAAG,cAAc,MAAM,KAAK,EAAE,UAAU,OAAO,MAAM;AAAA;AAAA,wBAEvE,MAAM,SAAS,CAAC;AAAA,GACrC;AAAA,IACC,CAAC,UACD,MAAM,WAAW,UACjB;AAAA,eACW,MAAM,MAAM;AAAA,KACtB;AAAA,IACD,kBAAkB;AAAA;AAAA,MAEhB,kBAAkB;AAAA;AAAA,IAEpB,KAAK;AAAA;"}

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

@@ -1,15 +1,15 @@
 import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
 import { ImageSupportedFormatsForInput } from "./consts.es.js";
-import { u as useImageCrop } from "./use-CuHzkWqv.js";
-import { c as Button } from "./component-CeuA5Ry0.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 { b as Stack } from "./component-mzzOCXSx.js";
 import styled, { useTheme, css } from "styled-components";
-import { i as Typography } from "./component-BFOHa1GY.js";
+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-BgERDJ4e.js";
+import { K as KEY_SIZE_DATA } from "./theme.global-BzunMIsv.js";
 import { useMemo, useCallback, useState, useRef, useEffect } from "react";
-import { b as ErrorMessage, a as addError } from "./style-uVTmdhsH.js";
+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) => {
@@ -482,4 +482,4 @@ export {
   ImageSelectWrapper as e,
   ImageSelectListWrapper as f
 };
-//# sourceMappingURL=component.styles-B9jJFDUk.js.map
+//# sourceMappingURL=component.styles-CwTYpBx_.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.styles-B9jJFDUk.js","sources":["../src/hooks/use-image-view/use.tsx","../src/components/image-select/component.tsx","../src/components/image-select/component.styles.ts"],"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 { ImageSupportedFormatsForInput } 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={ImageSupportedFormatsForInput}\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","import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\n\nimport { addError } from '@local/styles/error';\nimport { addSX } from '@local/styles/sx';\nimport { IThemeSizePropertyDefault, KEY_SIZE_DATA } from '@local/theme';\n\nimport { ImageSelectWrapperProps } from '.';\n\nconst ImageSelectListGenre = css<ImageSelectWrapperProps>`\n  ${(props) => css`\n    background: ${props.theme.colors.imageSelect[props.$genre].background.rest};\n    color: ${props.theme.colors.imageSelect[props.$genre].color.rest};\n    &:active {\n      background: ${props.theme.colors.imageSelect[props.$genre].background.rest};\n      color: ${props.theme.colors.imageSelect[props.$genre].color.rest};\n    }\n    &:focus-visible {\n      background: ${props.theme.colors.imageSelect[props.$genre].background.rest};\n      color: ${props.theme.colors.imageSelect[props.$genre].color.rest};\n    }\n  `};\n`;\n/****************************************** Size *************************************************/\nexport const ImageSelectListSize = css<ImageSelectWrapperProps>`\n  ${(props) => ImageSelectListSizeConstructor(KEY_SIZE_DATA[props.$size])};\n`;\nexport const ImageSelectListSizeConstructor = (props: IThemeSizePropertyDefault) => css`\n  padding: ${props.padding}px;\n  border-radius: ${props.radius}px;\n`;\nexport const ImageSelectSize = css<ImageSelectWrapperProps>`\n  ${(props) => ImageSelectSizeConstructor(KEY_SIZE_DATA[props.$size])};\n`;\nexport const ImageSelectSizeConstructor = (props: IThemeSizePropertyDefault) => css`\n  gap: ${props.padding - 2}px;\n`;\nexport const ImageSelectWrapper = styled.div<ImageSelectWrapperProps>`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  ${ImageSelectSize};\n  ${addError};\n  ${addSX};\n`;\nexport const ImageSelectListWrapper = styled(motion.div)<ImageSelectWrapperProps>`\n  border: 2px dashed;\n\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  ${ImageSelectListGenre}\n  ${ImageSelectListSize}\n`;\n"],"names":["jsxs","jsx","Fragment","theme"],"mappings":"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"}
+{"version":3,"file":"component.styles-CwTYpBx_.js","sources":["../src/hooks/use-image-view/use.tsx","../src/components/image-select/component.tsx","../src/components/image-select/component.styles.ts"],"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 { ImageSupportedFormatsForInput } 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={ImageSupportedFormatsForInput}\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","import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\n\nimport { addError } from '@local/styles/error';\nimport { addSX } from '@local/styles/sx';\nimport { IThemeSizePropertyDefault, KEY_SIZE_DATA } from '@local/theme';\n\nimport { ImageSelectWrapperProps } from '.';\n\nconst ImageSelectListGenre = css<ImageSelectWrapperProps>`\n  ${(props) => css`\n    background: ${props.theme.colors.imageSelect[props.$genre].background.rest};\n    color: ${props.theme.colors.imageSelect[props.$genre].color.rest};\n    &:active {\n      background: ${props.theme.colors.imageSelect[props.$genre].background.rest};\n      color: ${props.theme.colors.imageSelect[props.$genre].color.rest};\n    }\n    &:focus-visible {\n      background: ${props.theme.colors.imageSelect[props.$genre].background.rest};\n      color: ${props.theme.colors.imageSelect[props.$genre].color.rest};\n    }\n  `};\n`;\n/****************************************** Size *************************************************/\nexport const ImageSelectListSize = css<ImageSelectWrapperProps>`\n  ${(props) => ImageSelectListSizeConstructor(KEY_SIZE_DATA[props.$size])};\n`;\nexport const ImageSelectListSizeConstructor = (props: IThemeSizePropertyDefault) => css`\n  padding: ${props.padding}px;\n  border-radius: ${props.radius}px;\n`;\nexport const ImageSelectSize = css<ImageSelectWrapperProps>`\n  ${(props) => ImageSelectSizeConstructor(KEY_SIZE_DATA[props.$size])};\n`;\nexport const ImageSelectSizeConstructor = (props: IThemeSizePropertyDefault) => css`\n  gap: ${props.padding - 2}px;\n`;\nexport const ImageSelectWrapper = styled.div<ImageSelectWrapperProps>`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  ${ImageSelectSize};\n  ${addError};\n  ${addSX};\n`;\nexport const ImageSelectListWrapper = styled(motion.div)<ImageSelectWrapperProps>`\n  border: 2px dashed;\n\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  ${ImageSelectListGenre}\n  ${ImageSelectListSize}\n`;\n"],"names":["jsxs","jsx","Fragment","theme"],"mappings":"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"}

package/build/{component.styles-CEDSDKXy.cjs → component.styles-CxlbZwr4.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),o=require("./consts.cjs.js"),t=require("./style-D3Lbn1EL.cjs"),s=require("./theme.global-CcoD5bPP.cjs"),r=require("./floating-ui.react--v70Xky9.cjs"),i=require("@tanstack/react-virtual"),l=require("moment"),n=require("react"),a=require("styled-components"),c=require("./component-BLWcOf3A.cjs"),u=require("./component.styles-BKnUDWqO.cjs"),d=require("./component-BkYIZFlr.cjs"),p=require("./style-Df37KnoJ.cjs"),h=require("./style-fRZ6xrVp.cjs"),$=require("framer-motion"),g=require("./component.styles-CsB9986a.cjs"),x=e=>`+${e} more`,m=e=>`Add "${e}" option`,S=o=>{var l;const p=n.useMemo(()=>s.KEY_SIZE_DATA[o.size].height,[o.size]),h=n.useMemo(()=>s.KEY_SIZE_DATA[o.size].padding,[o.size]),$=n.useMemo(()=>s.KEY_SIZE_DATA[o.size].radius,[o.size]),{isOpen:g,close:S,open:b,refReference:w,refFloating:C,floatingStyles:z,toggle:j}=d.usePopover({placement:"bottom-start",offset:h,mode:"independence",isClickOutside:!0,isWidthAsContent:!0,isDisabled:null==o?void 0:o.isDisabled,onBlur:o.onBlur,onFocus:o.onFocus}),D=n.useRef(null),O=n.useRef(null),R=r.useMergeRefs([o.refReference,w]),L=r.useMergeRefs([o.refFloating,C]),T=n.useMemo(()=>o.labelSelectAll??"Select all option",[o.labelSelectAll]),Y=n.useMemo(()=>o.labelPlaceholder??"Select an option",[o.labelPlaceholder]),H=n.useMemo(()=>o.labelEmptyOption??"No options available",[o.labelEmptyOption]),Z=n.useMemo(()=>o.labelAndMore??x,[o.labelAndMore]),N=n.useMemo(()=>o.labelAddOption??m,[o.labelAddOption]),B=n.useMemo(()=>o.maxViewSelect??2,[o.maxViewSelect]),W=n.useMemo(()=>o.maxViewDropdown??5,[o.maxViewDropdown]),F=n.useMemo(()=>o.minViewDropdown??1,[o.minViewDropdown]),q=n.useMemo(()=>o.value.length===o.option.length||o.value.length===o.optionAllLength,[o.option.length,o.optionAllLength,o.value.length]),V=n.useMemo(()=>!!o.option.length,[o.option.length]),P=n.useMemo(()=>!!o.value.length,[o.value.length]),U=n.useMemo(()=>o.valueSearch&&o.isShowAddOption,[o.valueSearch,o.isShowAddOption]),[J,Q]=n.useState(!1),X=n.useMemo(()=>o.isNotShowDisabledOptions?o.option.filter(e=>!e.isDisabled).length:o.option.length,[o.option,o.isNotShowDisabledOptions]),G=n.useMemo(()=>p*(X<W?X:W),[p,X,W,F]),ee=n.useMemo(()=>{const e=o.isShowSelectAll&&V?p:0,t=V?0:p,s=V?G:0,r=U?p:0,i=(0!==e?1:0)+(0!==t?1:0)+(0!==s?1:0)+(0!==r?1:0);return e+t+s+r+(i<=1?0:h/2.8*(i-1))},[o.isShowSelectAll,p,V,h,G,U]),oe=n.useMemo(()=>o.value.length>B,[B,o.value.length]),te=n.useMemo(()=>o.isShowIconSearchClear&&o.valueSearch,[o.isShowIconSearchClear,o.valueSearch]),se=n.useMemo(()=>te||o.isShowIconToggle||o.isShowIconFetching&&o.isFetching,[te,o.isShowIconToggle,o.isShowIconFetching,o.isFetching]),re=n.useMemo(()=>X>W,[W,X]),ie=n.useCallback(e=>q||o.value.some(o=>o.value===e.value),[q,o.value]),le=n.useMemo(()=>U||o.isShowSelectAll&&V||!V,[V,U,o.isShowSelectAll]),ne=i.useVirtualizer({count:X,estimateSize:o.getEstimateSize?o.getEstimateSize:()=>p,getScrollElement:()=>O.current,overscan:1,paddingEnd:0}),ae=n.useCallback(e=>{o.isSearch&&!o.isDisabled?Q(e):Q(!1)},[o.isDisabled,o.isSearch]),ce=n.useCallback(e=>{let t=[];const s=e.value,r=o.value.findIndex(e=>e.value===s),i=-1!==r;t=o.isMulti?i?[...o.value.slice(0,r),...o.value.slice(r+1)]:[...o.value,e]:i&&!o.isStayValueAfterSelect?[...o.value.slice(0,r),...o.value.slice(r+1)]:[e],o.onChange(t),ae(!!o.isStaySearchAfterSelect),o.isOnClickOptionClose&&S()},[S,ae,o]),ue=n.useCallback(()=>{var e;null==(e=o.onChangeAll)||e.call(o,q?[]:o.option,!q),ae(!!o.isStaySearchAfterSelect),o.isOnClickOptionClose&&S()},[S,q,ae,o]),de=n.useCallback(()=>{var e;null==(e=o.onChangeSearch)||e.call(o,"")},[o]),pe=n.useCallback(e=>{if(e){const{scrollHeight:t,scrollTop:s,clientHeight:r}=e;t-s-r<G&&!o.isFetching&&o.fetchNextPage&&o.fetchNextPage()}},[G,o]),he=n.useCallback(e=>{var t,s;null==(t=o.onAddOption)||t.call(o,e),null==(s=o.onChangeSearch)||s.call(o,"")},[o]);n.useEffect(()=>{ae(!1)},[ae,o.isDisabled]),n.useEffect(()=>{P||ae(!0)},[P,ae]),n.useEffect(()=>{!g&&P&&ae(!1)},[P,g,ae]);const $e=a.useTheme(),ge=n.useMemo(()=>{var e,t,s,r;return{size:(null==(e=o.font)?void 0:e.size)??16,weight:(null==(t=o.font)?void 0:t.weight)??(o.isBold?500:400),family:(null==(s=o.font)?void 0:s.family)??$e.font.family,height:null==(r=o.font)?void 0:r.height}},[o.font,$e.font.family,o.isBold]);return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs(E,{tabIndex:0,$error:null==o?void 0:o.error,$isNotShowHoverStyle:null==o?void 0:o.isNotShowHoverStyle,$size:o.size,$genre:o.genre,$isCenter:o.isCenter,$sx:o.sx,$isOpen:g,ref:R,onClick:()=>{b(),ae(!0)},onFocus:()=>{b()},children:[J&&e.jsxRuntimeExports.jsx(K,{ref:D,genre:o.genre,size:o.size,minRows:1,maxRows:5,isAutoHeight:!0,onChange:e=>{var t;null==(t=null==o?void 0:o.onChangeSearch)||t.call(o,e)},value:o.valueSearch,placeholder:Y}),!P||o.isShowSelectAllLabel&&q?null:e.jsxRuntimeExports.jsx(_,{$size:o.size,tabIndex:-1,$isWrapSelectOption:o.isWrapSelectOption,onMouseDown:e=>{e.preventDefault()},onClick:e=>{e.preventDefault()},children:o.value.map((t,s)=>{if(s>=B)return null;const r=ie(t);return e.jsxRuntimeExports.jsx(f,{isChecked:r,onClick:()=>o.isClearWhenClickSelectListOption&&ce(t),item:t,genre:o.genre,size:o.size,isBold:o.isBold,isOnlyColorInSelectListOption:o.isOnlyColorInSelectListOption,isClearWhenClickSelectListOption:o.isClearWhenClickSelectListOption,isWrapSelectOption:o.isWrapSelectOption,isNotShowHoverStyle:o.isNotShowHoverStyle,isCenter:o.isCenter},`${t.value}-${s}`)})}),P&&o.isShowSelectAllLabel&&q?e.jsxRuntimeExports.jsx(d.Typography,{sxStandard:{default:{padding:`${h/2.8}px 0px ${h/2.8}px ${h/2.8}px`}},sx:{default:{size:16,line:1,isNoUserSelect:!0}},children:T}):null,P||o.isSearch?null:e.jsxRuntimeExports.jsx(d.Typography,{sxStandard:e=>({default:{color:e.colors.input[o.genre].color.placeholder,padding:`${h/2.8}px 0px ${h/2.8}px ${h/2.8}px`}}),sx:{default:{size:16,line:1,isNoUserSelect:!0}},children:Y}),!oe||!P||o.isShowSelectAllLabel&&q?null:e.jsxRuntimeExports.jsx(d.Typography,{sxStandard:{default:{padding:`${h/2.8}px 0px ${h/2.8}px ${h/2.8}px`}},sx:{default:{size:16,line:1,isNoUserSelect:!0}},children:Z(o.value.length-B)}),se?e.jsxRuntimeExports.jsxs(M,{$size:o.size,onMouseDown:e=>{e.preventDefault()},children:[te&&e.jsxRuntimeExports.jsx(c.Button,{genre:o.genre,size:"small",isWidthAsHeight:!0,isFullSize:!0,isRadius:!0,isOnlyIcon:!0,icons:[{name:"Close",type:"id"}],onClick:e=>{e.preventDefault(),e.stopPropagation(),de()}}),o.isShowIconToggle&&e.jsxRuntimeExports.jsx(c.Button,{genre:o.genre,size:"small",isWidthAsHeight:!0,isFullSize:!0,isRadius:!0,isOnlyIcon:!0,icons:[{name:"Select",type:"id"}],onClick:e=>{e.preventDefault(),e.stopPropagation(),j()}}),o.isShowIconFetching&&o.isFetching&&e.jsxRuntimeExports.jsx(c.Button,{tabIndex:-1,genre:o.genre,size:"small",isWidthAsHeight:!0,isFullSize:!0,isRadius:!0,isHiddenBorder:!0,isDisabledRipple:!0,isNotHoverEffect:!0,children:e.jsxRuntimeExports.jsx(u.Icon,{type:"loading",name:"Circle",size:o.size})})]}):null]}),e.jsxRuntimeExports.jsx(d.Popover,{sx:e=>({default:{background:e.colors.input[o.genre].background.rest,borderRadius:`${$}px`,padding:"0px",maxHeight:`${ee}px`}}),isShowAlwaysOutline:!0,size:o.size,genre:o.genre,floatingStyles:z,ref:L,isOpen:g,children:e.jsxRuntimeExports.jsxs(y,{tabIndex:-1,ref:O,$size:o.size,onScroll:e=>pe(e.target),children:[le&&e.jsxRuntimeExports.jsxs(A,{style:{position:"sticky",top:0,zIndex:1},children:[U?e.jsxRuntimeExports.jsx(k,{tabIndex:0,onClick:()=>o.valueSearch&&he(o.valueSearch),onKeyDown:e=>{"Enter"===e.key&&o.valueSearch&&he(o.valueSearch)},$isCenter:o.isCenter,$isNotShowHoverStyle:o.isNotShowHoverStyle,$genre:o.genre,$size:o.size,$font:ge,$isBold:o.isBold,$isChecked:q,style:{position:"relative",minHeight:`${p}px`},children:o.valueSearch&&N(o.valueSearch)}):null,o.isShowSelectAll&&V?e.jsxRuntimeExports.jsxs(k,{tabIndex:0,onClick:()=>ue(),onKeyDown:e=>{"Enter"===e.key&&ue()},$isCenter:o.isCenter,$isNotShowHoverStyle:o.isNotShowHoverStyle,$genre:o.genre,$size:o.size,$font:ge,$isBold:o.isBold,$isChecked:q,$isShowScroll:re,style:{position:"relative",minHeight:`${p}px`},children:[T,o.isShowDropdownOptionIcon&&e.jsxRuntimeExports.jsx(I,{tabIndex:-1,size:o.size,type:"checkbox",name:"Arrow",$genre:o.genre,$checked:q,$size:o.size})]}):null,V?null:e.jsxRuntimeExports.jsx(k,{tabIndex:-1,$isCenter:o.isCenter,$isNotShowHoverStyle:o.isNotShowHoverStyle,$genre:o.genre,$size:o.size,$font:ge,$isBold:o.isBold,$isChecked:q,$isShowScroll:re,style:{position:"relative",minHeight:`${p}px`},children:e.jsxRuntimeExports.jsx(d.Typography,{sx:{default:{size:16,line:1}},children:H})})]}),V?e.jsxRuntimeExports.jsx(A,{tabIndex:-1,style:{height:`${ne.getTotalSize()}px`,minHeight:`${G}px`},children:ne.getVirtualItems().map(t=>{const s=o.option[t.index],r=ie(s);return e.jsxRuntimeExports.jsx(v,{virtualRowSize:t.size,virtualRowStart:t.start,isChecked:r,onClick:()=>ce(s),item:s,genre:o.genre,size:o.size,font:ge,isBold:o.isBold,isNotShowHoverStyle:o.isNotShowHoverStyle,isCenter:o.isCenter,isShowScroll:re,isShowDropdownOptionIcon:o.isShowDropdownOptionIcon},t.index)})}):null]})}),(null==o?void 0:o.error)?e.jsxRuntimeExports.jsx(t.ErrorMessage,{...o.error,size:(null==o?void 0:o.error.size)??o.size,font:{size:12,weight:400,family:(null==(l=o.font)?void 0:l.family)??$e.font.family}}):null]})},v=n.memo(o=>e.jsxRuntimeExports.jsxs(k,{tabIndex:0,onClick:()=>{!o.item.isDisabled&&o.onClick()},onKeyDown:e=>{o.item.isDisabled||"Enter"===e.key&&o.onClick()},style:{position:"absolute",height:`${o.virtualRowSize}px`,transform:`translateY(${o.virtualRowStart}px)`},$isCenter:o.isCenter,$isNotShowHoverStyle:o.isNotShowHoverStyle,$item:o.item,$genre:o.genre,$size:o.size,$font:o.font,$isBold:o.isBold,$isChecked:o.isChecked,$isShowScroll:o.isShowScroll,children:[o.item.label,o.isShowDropdownOptionIcon&&e.jsxRuntimeExports.jsx(I,{tabIndex:-1,size:o.size,type:"checkbox",name:"Arrow",$genre:o.genre,$checked:o.isChecked,$size:o.size})]})),f=n.memo(o=>e.jsxRuntimeExports.jsx(Y,{tabIndex:-1,onClick:o.onClick,$isOnlyColorInSelectListOption:o.isOnlyColorInSelectListOption,$isClearWhenClickSelectListOption:o.isClearWhenClickSelectListOption,$isWrapSelectOption:o.isWrapSelectOption,$isCenter:o.isCenter,$isNotShowHoverStyle:o.isNotShowHoverStyle,$item:o.item,$genre:o.genre,$size:o.size,$isBold:o.isBold,$isChecked:o.isChecked,children:e.jsxRuntimeExports.jsx(d.Typography,{sx:{default:{size:16,line:1}},children:o.item.label})})),b=a.css`
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),o=require("./consts.cjs.js"),t=require("./style-D8DUzG0C.cjs"),s=require("./theme.global-D67h5YeA.cjs"),r=require("./floating-ui.react-DZzvtpim.cjs"),i=require("@tanstack/react-virtual"),l=require("moment"),n=require("react"),a=require("styled-components"),c=require("./component-BfppCwz9.cjs"),u=require("./component.styles-BviHtzJH.cjs"),d=require("./component-BxetIWe6.cjs"),p=require("./style-Df37KnoJ.cjs"),h=require("./style-fRZ6xrVp.cjs"),$=require("framer-motion"),g=require("./component.styles-FMHm5NHm.cjs"),x=e=>`+${e} more`,m=e=>`Add "${e}" option`,S=o=>{var l;const p=n.useMemo(()=>s.KEY_SIZE_DATA[o.size].height,[o.size]),h=n.useMemo(()=>s.KEY_SIZE_DATA[o.size].padding,[o.size]),$=n.useMemo(()=>s.KEY_SIZE_DATA[o.size].radius,[o.size]),{isOpen:g,close:S,open:b,refReference:w,refFloating:C,floatingStyles:z,toggle:j}=d.usePopover({placement:"bottom-start",offset:h,mode:"independence",isClickOutside:!0,isWidthAsContent:!0,isDisabled:null==o?void 0:o.isDisabled,onBlur:o.onBlur,onFocus:o.onFocus}),D=n.useRef(null),O=n.useRef(null),R=r.useMergeRefs([o.refReference,w]),L=r.useMergeRefs([o.refFloating,C]),T=n.useMemo(()=>o.labelSelectAll??"Select all option",[o.labelSelectAll]),Y=n.useMemo(()=>o.labelPlaceholder??"Select an option",[o.labelPlaceholder]),H=n.useMemo(()=>o.labelEmptyOption??"No options available",[o.labelEmptyOption]),Z=n.useMemo(()=>o.labelAndMore??x,[o.labelAndMore]),N=n.useMemo(()=>o.labelAddOption??m,[o.labelAddOption]),B=n.useMemo(()=>o.maxViewSelect??2,[o.maxViewSelect]),W=n.useMemo(()=>o.maxViewDropdown??5,[o.maxViewDropdown]),F=n.useMemo(()=>o.minViewDropdown??1,[o.minViewDropdown]),q=n.useMemo(()=>o.value.length===o.option.length||o.value.length===o.optionAllLength,[o.option.length,o.optionAllLength,o.value.length]),V=n.useMemo(()=>!!o.option.length,[o.option.length]),P=n.useMemo(()=>!!o.value.length,[o.value.length]),U=n.useMemo(()=>o.valueSearch&&o.isShowAddOption,[o.valueSearch,o.isShowAddOption]),[J,X]=n.useState(!1),G=n.useMemo(()=>o.isNotShowDisabledOptions?o.option.filter(e=>!e.isDisabled).length:o.option.length,[o.option,o.isNotShowDisabledOptions]),Q=n.useMemo(()=>p*(G<W?G:W),[p,G,W,F]),ee=n.useMemo(()=>{const e=o.isShowSelectAll&&V?p:0,t=V?0:p,s=V?Q:0,r=U?p:0,i=(0!==e?1:0)+(0!==t?1:0)+(0!==s?1:0)+(0!==r?1:0);return e+t+s+r+(i<=1?0:h/2.8*(i-1))},[o.isShowSelectAll,p,V,h,Q,U]),oe=n.useMemo(()=>o.value.length>B,[B,o.value.length]),te=n.useMemo(()=>o.isShowIconSearchClear&&o.valueSearch,[o.isShowIconSearchClear,o.valueSearch]),se=n.useMemo(()=>te||o.isShowIconToggle||o.isShowIconFetching&&o.isFetching,[te,o.isShowIconToggle,o.isShowIconFetching,o.isFetching]),re=n.useMemo(()=>G>W,[W,G]),ie=n.useCallback(e=>q||o.value.some(o=>o.value===e.value),[q,o.value]),le=n.useMemo(()=>U||o.isShowSelectAll&&V||!V,[V,U,o.isShowSelectAll]),ne=i.useVirtualizer({count:G,estimateSize:o.getEstimateSize?o.getEstimateSize:()=>p,getScrollElement:()=>O.current,overscan:1,paddingEnd:0}),ae=n.useCallback(e=>{o.isSearch&&!o.isDisabled?X(e):X(!1)},[o.isDisabled,o.isSearch]),ce=n.useCallback(e=>{let t=[];const s=e.value,r=o.value.findIndex(e=>e.value===s),i=-1!==r;t=o.isMulti?i?[...o.value.slice(0,r),...o.value.slice(r+1)]:[...o.value,e]:i&&!o.isStayValueAfterSelect?[...o.value.slice(0,r),...o.value.slice(r+1)]:[e],o.onChange(t),ae(!!o.isStaySearchAfterSelect),o.isOnClickOptionClose&&S()},[S,ae,o]),ue=n.useCallback(()=>{var e;null==(e=o.onChangeAll)||e.call(o,q?[]:o.option,!q),ae(!!o.isStaySearchAfterSelect),o.isOnClickOptionClose&&S()},[S,q,ae,o]),de=n.useCallback(()=>{var e;null==(e=o.onChangeSearch)||e.call(o,"")},[o]),pe=n.useCallback(e=>{if(e){const{scrollHeight:t,scrollTop:s,clientHeight:r}=e;t-s-r<Q&&!o.isFetching&&o.fetchNextPage&&o.fetchNextPage()}},[Q,o]),he=n.useCallback(e=>{var t,s;null==(t=o.onAddOption)||t.call(o,e),null==(s=o.onChangeSearch)||s.call(o,"")},[o]);n.useEffect(()=>{ae(!1)},[ae,o.isDisabled]),n.useEffect(()=>{P||ae(!0)},[P,ae]),n.useEffect(()=>{!g&&P&&ae(!1)},[P,g,ae]);const $e=a.useTheme(),ge=n.useMemo(()=>{var e,t,s,r;return{size:(null==(e=o.font)?void 0:e.size)??16,weight:(null==(t=o.font)?void 0:t.weight)??(o.isBold?500:400),family:(null==(s=o.font)?void 0:s.family)??$e.font.family,height:null==(r=o.font)?void 0:r.height}},[o.font,$e.font.family,o.isBold]);return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs(E,{tabIndex:0,$error:null==o?void 0:o.error,$isNotShowHoverStyle:null==o?void 0:o.isNotShowHoverStyle,$size:o.size,$genre:o.genre,$isCenter:o.isCenter,$sx:o.sx,$isOpen:g,ref:R,onClick:()=>{b(),ae(!0)},onFocus:()=>{b()},children:[J&&e.jsxRuntimeExports.jsx(K,{ref:D,genre:o.genre,size:o.size,minRows:1,maxRows:5,isAutoHeight:!0,onChange:e=>{var t;null==(t=null==o?void 0:o.onChangeSearch)||t.call(o,e)},value:o.valueSearch,placeholder:Y}),!P||o.isShowSelectAllLabel&&q?null:e.jsxRuntimeExports.jsx(_,{$size:o.size,tabIndex:-1,$isWrapSelectOption:o.isWrapSelectOption,onMouseDown:e=>{e.preventDefault()},onClick:e=>{e.preventDefault()},children:o.value.map((t,s)=>{if(s>=B)return null;const r=ie(t);return e.jsxRuntimeExports.jsx(f,{isChecked:r,onClick:()=>o.isClearWhenClickSelectListOption&&ce(t),item:t,genre:o.genre,size:o.size,isBold:o.isBold,isOnlyColorInSelectListOption:o.isOnlyColorInSelectListOption,isClearWhenClickSelectListOption:o.isClearWhenClickSelectListOption,isWrapSelectOption:o.isWrapSelectOption,isNotShowHoverStyle:o.isNotShowHoverStyle,isCenter:o.isCenter},`${t.value}-${s}`)})}),P&&o.isShowSelectAllLabel&&q?e.jsxRuntimeExports.jsx(d.Typography,{sxStandard:{default:{padding:`${h/2.8}px 0px ${h/2.8}px ${h/2.8}px`}},sx:{default:{size:16,line:1,isNoUserSelect:!0}},children:T}):null,P||o.isSearch?null:e.jsxRuntimeExports.jsx(d.Typography,{sxStandard:e=>({default:{color:e.colors.input[o.genre].color.placeholder,padding:`${h/2.8}px 0px ${h/2.8}px ${h/2.8}px`}}),sx:{default:{size:16,line:1,isNoUserSelect:!0}},children:Y}),!oe||!P||o.isShowSelectAllLabel&&q?null:e.jsxRuntimeExports.jsx(d.Typography,{sxStandard:{default:{padding:`${h/2.8}px 0px ${h/2.8}px ${h/2.8}px`}},sx:{default:{size:16,line:1,isNoUserSelect:!0}},children:Z(o.value.length-B)}),se?e.jsxRuntimeExports.jsxs(M,{$size:o.size,onMouseDown:e=>{e.preventDefault()},children:[te&&e.jsxRuntimeExports.jsx(c.Button,{genre:o.genre,size:"small",isWidthAsHeight:!0,isFullSize:!0,isRadius:!0,isOnlyIcon:!0,icons:[{name:"Close",type:"id"}],onClick:e=>{e.preventDefault(),e.stopPropagation(),de()}}),o.isShowIconToggle&&e.jsxRuntimeExports.jsx(c.Button,{genre:o.genre,size:"small",isWidthAsHeight:!0,isFullSize:!0,isRadius:!0,isOnlyIcon:!0,icons:[{name:"Select",type:"id"}],onClick:e=>{e.preventDefault(),e.stopPropagation(),j()}}),o.isShowIconFetching&&o.isFetching&&e.jsxRuntimeExports.jsx(c.Button,{tabIndex:-1,genre:o.genre,size:"small",isWidthAsHeight:!0,isFullSize:!0,isRadius:!0,isHiddenBorder:!0,isDisabledRipple:!0,isNotHoverEffect:!0,children:e.jsxRuntimeExports.jsx(u.Icon,{type:"loading",name:"Circle",size:o.size})})]}):null]}),e.jsxRuntimeExports.jsx(d.Popover,{sx:e=>({default:{background:e.colors.input[o.genre].background.rest,borderRadius:`${$}px`,padding:"0px",maxHeight:`${ee}px`}}),isShowAlwaysOutline:!0,size:o.size,genre:o.genre,floatingStyles:z,ref:L,isOpen:g,children:e.jsxRuntimeExports.jsxs(y,{tabIndex:-1,ref:O,$size:o.size,onScroll:e=>pe(e.target),children:[le&&e.jsxRuntimeExports.jsxs(A,{style:{position:"sticky",top:0,zIndex:1},children:[U?e.jsxRuntimeExports.jsx(k,{tabIndex:0,onClick:()=>o.valueSearch&&he(o.valueSearch),onKeyDown:e=>{"Enter"===e.key&&o.valueSearch&&he(o.valueSearch)},$isCenter:o.isCenter,$isNotShowHoverStyle:o.isNotShowHoverStyle,$genre:o.genre,$size:o.size,$font:ge,$isBold:o.isBold,$isChecked:q,style:{position:"relative",minHeight:`${p}px`},children:o.valueSearch&&N(o.valueSearch)}):null,o.isShowSelectAll&&V?e.jsxRuntimeExports.jsxs(k,{tabIndex:0,onClick:()=>ue(),onKeyDown:e=>{"Enter"===e.key&&ue()},$isCenter:o.isCenter,$isNotShowHoverStyle:o.isNotShowHoverStyle,$genre:o.genre,$size:o.size,$font:ge,$isBold:o.isBold,$isChecked:q,$isShowScroll:re,style:{position:"relative",minHeight:`${p}px`},children:[T,o.isShowDropdownOptionIcon&&e.jsxRuntimeExports.jsx(I,{tabIndex:-1,size:o.size,type:"checkbox",name:"Arrow",$genre:o.genre,$checked:q,$size:o.size})]}):null,V?null:e.jsxRuntimeExports.jsx(k,{tabIndex:-1,$isCenter:o.isCenter,$isNotShowHoverStyle:o.isNotShowHoverStyle,$genre:o.genre,$size:o.size,$font:ge,$isBold:o.isBold,$isChecked:q,$isShowScroll:re,style:{position:"relative",minHeight:`${p}px`},children:e.jsxRuntimeExports.jsx(d.Typography,{sx:{default:{size:16,line:1}},children:H})})]}),V?e.jsxRuntimeExports.jsx(A,{tabIndex:-1,style:{height:`${ne.getTotalSize()}px`,minHeight:`${Q}px`},children:ne.getVirtualItems().map(t=>{const s=o.option[t.index],r=ie(s);return e.jsxRuntimeExports.jsx(v,{virtualRowSize:t.size,virtualRowStart:t.start,isChecked:r,onClick:()=>ce(s),item:s,genre:o.genre,size:o.size,font:ge,isBold:o.isBold,isNotShowHoverStyle:o.isNotShowHoverStyle,isCenter:o.isCenter,isShowScroll:re,isShowDropdownOptionIcon:o.isShowDropdownOptionIcon},t.index)})}):null]})}),(null==o?void 0:o.error)?e.jsxRuntimeExports.jsx(t.ErrorMessage,{...o.error,size:(null==o?void 0:o.error.size)??o.size,font:{size:12,weight:400,family:(null==(l=o.font)?void 0:l.family)??$e.font.family}}):null]})},v=n.memo(o=>e.jsxRuntimeExports.jsxs(k,{tabIndex:0,onClick:()=>{!o.item.isDisabled&&o.onClick()},onKeyDown:e=>{o.item.isDisabled||"Enter"===e.key&&o.onClick()},style:{position:"absolute",height:`${o.virtualRowSize}px`,transform:`translateY(${o.virtualRowStart}px)`},$isCenter:o.isCenter,$isNotShowHoverStyle:o.isNotShowHoverStyle,$item:o.item,$genre:o.genre,$size:o.size,$font:o.font,$isBold:o.isBold,$isChecked:o.isChecked,$isShowScroll:o.isShowScroll,children:[o.item.label,o.isShowDropdownOptionIcon&&e.jsxRuntimeExports.jsx(I,{tabIndex:-1,size:o.size,type:"checkbox",name:"Arrow",$genre:o.genre,$checked:o.isChecked,$size:o.size})]})),f=n.memo(o=>e.jsxRuntimeExports.jsx(Y,{tabIndex:-1,onClick:o.onClick,$isOnlyColorInSelectListOption:o.isOnlyColorInSelectListOption,$isClearWhenClickSelectListOption:o.isClearWhenClickSelectListOption,$isWrapSelectOption:o.isWrapSelectOption,$isCenter:o.isCenter,$isNotShowHoverStyle:o.isNotShowHoverStyle,$item:o.item,$genre:o.genre,$size:o.size,$isBold:o.isBold,$isChecked:o.isChecked,children:e.jsxRuntimeExports.jsx(d.Typography,{sx:{default:{size:16,line:1}},children:o.item.label})})),b=a.css`
   ${e=>a.css`
     background: ${e.theme.colors.input[e.$genre].background.rest};
     border-color: ${e.theme.colors.input[e.$genre].border.rest};
@@ -222,4 +222,4 @@ ${e=>e.$isOnlyColorInSelectListOption?a.css`
   padding: ${e=>s.KEY_SIZE_DATA[e.size].padding/2.8}px 0px ${e=>s.KEY_SIZE_DATA[e.size].padding/2.8}px ${e=>s.KEY_SIZE_DATA[e.size].padding/2.8}px;
   ${p.addRemoveOutline};
 `;exports.ButtonList=M,exports.ContainerDropdownListOption=v,exports.ContainerSelectListOption=f,exports.DropdownList=A,exports.DropdownListOption=k,exports.DropdownListOptionIcon=I,exports.DropdownListParent=y,exports.Select=S,exports.SelectLanguage=t=>{const{value:s,onChange:r}=t,i=o.ListLanguage,[l]=n.useState(i),a=n.useMemo(()=>{const e=i.find(e=>e.value===s);return e?[e]:[]},[i,s]);return e.jsxRuntimeExports.jsx(S,{...t,option:l,value:a,onChange:e=>{0===e.length&&r(null),r(e[0].value.toString())}})},exports.SelectList=_,exports.SelectListOption=Y,exports.SelectMapTheme=t=>{const{value:s,onChange:r}=t,i=n.useMemo(()=>o.MapThemeList.map(e=>({label:e.name,value:e.name,placeholder:e.name})),[]),[l,a]=n.useState(i);n.useEffect(()=>{a(i)},[i]);const c=n.useMemo(()=>{const e=i.find(e=>e.value===s.name);return e?[e]:[]},[s,i]),[u,d]=n.useState(""),p=n.useCallback(e=>{if(d(e),""===e)a(i);else{const o=i.filter(o=>Object.values(o).some(o=>null==o?void 0:o.toString().toLowerCase().includes(e.toLowerCase())));a(o)}},[i]);return e.jsxRuntimeExports.jsx(S,{...t,option:l,value:c,onChange:e=>{0===e.length&&r(null);const t=o.MapThemeList.find(o=>o.name===e[0].value);r(t??null)},valueSearch:u,onChangeSearch:p})},exports.SelectMonth=o=>{const{value:t,onChange:s,dateMin:r,dateMax:i,monthsLocale:a,isShortLabel:c}=o,u=l(t).utc().year(),d=n.useMemo(()=>a.map(e=>{const o=l().month(e.value).month(),t=l.utc().year(u).month(o).startOf("month"),s=r&&t.isBefore(l.utc(r),"month")||i&&t.isAfter(l.utc(i),"month");return{value:t.valueOf(),label:c?e.localeShort:e.localeLong,placeholder:c?e.localeShort:e.localeLong,search:`${e.localeLong.toLowerCase()}, ${o+1}`,isDisabled:!!s,monthValue:e.value}}),[a,u,r,i,c]),p=n.useMemo(()=>{const e=d.find(e=>e.value===t);return e?[e]:[]},[t,d]);return e.jsxRuntimeExports.jsx(S,{...o,option:d,value:p,onChange:e=>{0===e.length&&s(null),s(+e[0].value)}})},exports.SelectMonths=o=>{const{value:t,onChange:s,dateMin:r,dateMax:i,monthsLocale:a,isShortLabel:c}=o,u=l(t).utc().year(),d=n.useMemo(()=>a.map(e=>{const o=l().month(e.value).month(),t=l.utc().year(u).month(o).startOf("month"),s=r&&t.isBefore(l.utc(r),"month")||i&&t.isAfter(l.utc(i),"month");return{value:t.valueOf(),label:c?e.localeShort:e.localeLong,placeholder:c?e.localeShort:e.localeLong,search:`${e.localeLong.toLowerCase()}, ${o+1}`,isDisabled:!!s,monthValue:e.value}}),[a,u,r,i,c]),[p,h]=n.useState(d);n.useEffect(()=>{h(d)},[d]);const $=n.useMemo(()=>t&&0!==t.length?t.map(e=>d.find(o=>o.value===e)).filter(Boolean):[],[t,d]),[g,x]=n.useState(""),m=n.useCallback(e=>{if(x(e),""===e)h(d);else{const o=d.filter(o=>Object.values(o).some(o=>null==o?void 0:o.toString().toLowerCase().includes(e.toLowerCase())));h(o)}},[d]);return e.jsxRuntimeExports.jsx(S,{...o,valueSearch:g,onChangeSearch:m,optionAllLength:d.length,option:p,minViewDropdown:1,isMulti:!0,value:$,onChange:e=>{0===e.length&&s([]),s(e.map(e=>+e.value))},onChangeAll:(e,o)=>{s(o?p.map(e=>+e.value):[])}})},exports.SelectTextArea=K,exports.SelectWrapper=E,exports.SelectYear=o=>{const{value:t,onChange:s,dateMin:r,dateMax:i,sortOrder:a="desc"}=o,c=l(r).utc().year(),u=l(i).utc().year(),d=n.useMemo(()=>{const e=Array.from({length:u-c+1},(e,o)=>{const t=c+o;return{value:l().year(t).utc().startOf("year").valueOf(),label:l().year(t).utc().format("YYYY"),placeholder:l().year(t).utc().format("YYYY"),search:`${l().year(t).utc().format("YYYY").toLowerCase()}`}});return"asc"===a?e.sort((e,o)=>e.value-o.value):e.sort((e,o)=>o.value-e.value)},[u,c,a]),p=n.useMemo(()=>{const e=d.find(e=>e.value===t);return e?[e]:[]},[t,d]);return e.jsxRuntimeExports.jsx(S,{...o,option:d,value:p,onChange:e=>{0===e.length&&s(null),s(+e[0].value)}})};
-//# sourceMappingURL=component.styles-CEDSDKXy.cjs.map
+//# sourceMappingURL=component.styles-CxlbZwr4.cjs.map