@jenesei-software/jenesei-kit-react 1.3.39 → 2.0.0

package/build/component-CWawez-M.js

@@ -1,443 +0,0 @@
-import { j as jsxRuntimeExports } from "./jsx-runtime-DZS36FSE.js";
-import { LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT } from "./consts.es.js";
-import { u as useImageCrop } from "./use-D8uozTND.js";
-import { bo as KEY_SIZE_DATA, aM as Typography, B as Button, V as ImageSelectWrapper, W as ImageSelectListWrapper, bk as ErrorMessage } from "./context.constants-D0UjboYX.js";
-import { I as Image } from "./component-sNGsB3JK.js";
-import { b as Stack } from "./component-gcvwlILJ.js";
-import { useTheme } from "styled-components";
-import "./context.constants-DUVlJghM.js";
-import { a as useDialog } from "./context.hooks-v8uZ7dfO.js";
-import { useMemo, useState, useCallback, useRef, useEffect } from "react";
-import { motion } from "framer-motion";
-const useImageView = (props) => {
-  const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);
-  const br = useMemo(() => `${size.radius}px`, [size.radius]);
-  const [image, setImage] = useState(null);
-  const propsDialog = useMemo(
-    () => ({
-      propsCustom: {
-        image,
-        br
-      },
-      propsDialog: {
-        borderRadius: br,
-        padding: "0",
-        background: "whiteStandard"
-      },
-      onRemove() {
-        setImage(null);
-      },
-      content: (remove, _isAnimating, params) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Stack,
-        {
-          sx: {
-            default: {
-              position: "relative",
-              overflow: "hidden",
-              aspectRatio: `${props.imageSettings.aspect * 2} / 2`,
-              width: "auto",
-              maxWidth: "70dvw",
-              height: "85dvh",
-              borderRadius: params == null ? void 0 : params.br
-            },
-            tablet: {
-              maxWidth: "95dvw"
-            }
-          },
-          children: [
-            (params == null ? void 0 : params.image) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Image,
-              {
-                sxStack: (theme) => ({
-                  default: {
-                    width: "100%",
-                    height: "100%",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    backgroundColor: theme.palette.black10,
-                    position: "absolute",
-                    pointerEvents: "none"
-                  }
-                }),
-                isShowBeforeImage: true,
-                sxImage: {
-                  default: {
-                    objectFit: "contain"
-                  }
-                },
-                alt: params.image.imageSrc,
-                src: params.image.imageSrc,
-                componentFallback: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Typography,
-                  {
-                    sx: {
-                      default: {
-                        variant: "h6"
-                      }
-                    },
-                    children: props.locale.imageFallback
-                  }
-                )
-              }
-            ) : null,
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Button,
-              {
-                sx: {
-                  default: {
-                    position: "absolute",
-                    bottom: 15,
-                    right: 15
-                  }
-                },
-                genre: "realebail-white",
-                size: "small",
-                icons: [
-                  {
-                    type: "id",
-                    name: "Arrow4"
-                  }
-                ],
-                isWidthAsHeight: true,
-                isHiddenBorder: true,
-                isRadius: true,
-                onClick: () => remove == null ? void 0 : remove()
-              }
-            )
-          ]
-        }
-      )
-    }),
-    [br, props.imageSettings.aspect, props.locale.imageFallback, image]
-  );
-  const { add } = useDialog(propsDialog);
-  const handleAdd = useCallback(
-    (image2) => {
-      setImage(image2);
-      add();
-    },
-    [add]
-  );
-  return { handleAdd };
-};
-const ImageSelect = (props) => {
-  const { onChange } = props;
-  const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);
-  const [images, setImages] = useState(props.images || []);
-  const [isDraggingOver, setIsDraggingOver] = useState(false);
-  const refInput = useRef(null);
-  const theme = useTheme();
-  const handleDrop = (e) => {
-    var _a;
-    e.preventDefault();
-    if ((_a = e.dataTransfer.files) == null ? void 0 : _a.length) {
-      handleAddFilesCrop(e.dataTransfer.files);
-    }
-  };
-  const handleDelete = (id) => {
-    setImages((prev) => {
-      const finalImages = prev.filter((img) => img.id !== id);
-      onChange == null ? void 0 : onChange(finalImages);
-      return finalImages;
-    });
-  };
-  const handleOnSave = useCallback(
-    (files) => {
-      if (files) {
-        setImages((prev) => {
-          const newImages = files.map((file, idx) => ({
-            ...file,
-            index: prev.length + idx
-          }));
-          const finalImages = [...prev, ...newImages];
-          onChange == null ? void 0 : onChange(finalImages);
-          return finalImages;
-        });
-      }
-    },
-    [onChange]
-  );
-  const openFileDialog = () => {
-    var _a;
-    (_a = refInput.current) == null ? void 0 : _a.click();
-  };
-  const resetImages = () => {
-    setImages(props.defaultImages || []);
-    onChange == null ? void 0 : onChange(props.defaultImages || []);
-  };
-  const { handleAddFiles: handleAddFilesCrop } = useImageCrop({
-    onSave: handleOnSave,
-    locale: props.locale,
-    dialog: {
-      button: {
-        genre: props.propsButton.default.genre,
-        size: props.propsButton.default.size
-      },
-      buttonDelete: {
-        genre: props.propsButton.delete.genre,
-        size: props.propsButton.delete.size
-      }
-    },
-    imageSettings: {
-      maxSize: props.imageSettings.maxSize,
-      maxCount: props.imageSettings.maxCount - images.length,
-      aspect: props.imageSettings.aspect
-    },
-    refInput
-  });
-  const { handleAdd } = useImageView({
-    size: props.size,
-    locale: props.locale,
-    imageSettings: props.imageSettings,
-    genre: props.genre
-  });
-  useEffect(() => {
-    setImages(props.images || []);
-  }, [props.images]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(ImageSelectWrapper, { $genre: props.genre, $size: props.size, id: props.id, $sx: props.sx, $error: props.error, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        ImageSelectListWrapper,
-        {
-          onDrop: (e) => {
-            handleDrop(e);
-            setIsDraggingOver(false);
-          },
-          onDragOver: (e) => e.preventDefault(),
-          onDragEnter: () => setIsDraggingOver(true),
-          onDragLeave: () => setIsDraggingOver(false),
-          animate: {
-            borderColor: isDraggingOver ? theme.colors.imageSelect[props.genre].border.hover : theme.colors.imageSelect[props.genre].border.rest
-          },
-          transition: { duration: 0.3 },
-          $genre: props.genre,
-          $size: props.size,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              motion.div,
-              {
-                transition: {
-                  layout: {
-                    duration: 0.3,
-                    ease: "easeInOut",
-                    type: "spring"
-                  }
-                },
-                layout: true,
-                style: { display: "flex", flexWrap: "wrap", gap: `${size.padding - 2}px` },
-                children: [
-                  images.map(
-                    (img) => img.url && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                      motion.div,
-                      {
-                        style: {
-                          position: "relative",
-                          width: `${props.imageSettings.width}px`,
-                          height: `${props.imageSettings.height}px`,
-                          userSelect: "none",
-                          overflow: "hidden",
-                          borderRadius: `${size.radius}px`,
-                          flexGrow: 1
-                        },
-                        layout: true,
-                        transition: {
-                          layout: {
-                            duration: 0.3,
-                            ease: "easeInOut",
-                            type: "spring"
-                          }
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            Image,
-                            {
-                              sxStack: (theme2) => ({
-                                default: {
-                                  width: "100%",
-                                  height: "100%",
-                                  alignItems: "center",
-                                  justifyContent: "center",
-                                  backgroundColor: theme2.palette.black10,
-                                  position: "absolute",
-                                  pointerEvents: "none"
-                                }
-                              }),
-                              isShowBeforeImage: props.isContain,
-                              sxImage: {
-                                default: {
-                                  objectFit: props.isContain ? "contain" : "cover"
-                                }
-                              },
-                              alt: img.name || "image",
-                              src: img.url,
-                              componentFallback: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                                Typography,
-                                {
-                                  sx: {
-                                    default: {
-                                      variant: "h6"
-                                    }
-                                  },
-                                  children: props.locale.imageFallback
-                                }
-                              )
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            Button,
-                            {
-                              sx: {
-                                default: {
-                                  position: "absolute",
-                                  top: 5,
-                                  right: 5
-                                }
-                              },
-                              genre: props.genre,
-                              size: "small",
-                              icons: [
-                                {
-                                  type: "id",
-                                  name: "Close"
-                                }
-                              ],
-                              isWidthAsHeight: true,
-                              isHiddenBorder: true,
-                              isRadius: true,
-                              onClick: () => handleDelete(img.id)
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            Button,
-                            {
-                              sx: {
-                                default: {
-                                  position: "absolute",
-                                  bottom: 5,
-                                  right: 5
-                                }
-                              },
-                              genre: props.genre,
-                              size: "small",
-                              icons: [
-                                {
-                                  type: "id",
-                                  name: "Activity"
-                                }
-                              ],
-                              isWidthAsHeight: true,
-                              isHiddenBorder: true,
-                              isRadius: true,
-                              onClick: () => img.url && handleAdd({ id: img.id, imageSrc: img.url })
-                            }
-                          )
-                        ]
-                      },
-                      img.id
-                    )
-                  ),
-                  images.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "div",
-                    {
-                      onClick: openFileDialog,
-                      style: {
-                        position: "relative",
-                        width: `${props.imageSettings.width}px`,
-                        height: `${props.imageSettings.height}px`,
-                        userSelect: "none",
-                        overflow: "hidden",
-                        borderRadius: `${size.radius}px`,
-                        flexGrow: 1,
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        textAlign: "center",
-                        cursor: "pointer"
-                      },
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        Typography,
-                        {
-                          style: {
-                            color: theme.colors.imageSelect[props.genre].color.rest
-                          },
-                          sx: {
-                            default: {}
-                          },
-                          children: props.locale.dragAndDrop
-                        }
-                      )
-                    },
-                    "empty"
-                  ) : null
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "input",
-              {
-                ref: refInput,
-                type: "file",
-                accept: LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT,
-                multiple: true,
-                style: { display: "none" },
-                onChange: (e) => {
-                  if (e.target.files) handleAddFilesCrop(e.target.files);
-                }
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { sx: { default: { flexGrow: 1, gap: `${size.padding - 2}px` } }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            type: "button",
-            genre: props.genre,
-            size: props.size,
-            sx: {
-              default: {
-                flexGrow: 3
-              }
-            },
-            isRadius: true,
-            onClick: openFileDialog,
-            children: props.locale.buttonAdd
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            isRadius: true,
-            type: "button",
-            sx: {
-              default: {
-                flexGrow: 1
-              }
-            },
-            onClick: resetImages,
-            genre: props.genre,
-            size: props.size,
-            children: props.locale.buttonReset
-          }
-        )
-      ] })
-    ] }),
-    (props == null ? void 0 : props.error) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ErrorMessage,
-      {
-        ...props.error,
-        size: (props == null ? void 0 : props.error.size) ?? props.size,
-        font: {
-          size: 12,
-          weight: 400,
-          family: theme.font.family
-        }
-      }
-    ) : null
-  ] });
-};
-export {
-  ImageSelect as I
-};
-//# sourceMappingURL=component-CWawez-M.js.map

package/build/component-CWawez-M.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-CWawez-M.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, useDialogProps } from '@local/contexts/context-dialog';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { useCallback, useMemo, useState } 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  const [image, setImage] = useState<SliderImageProps | null>(null);\n  const propsDialog: useDialogProps<{ br?: string; image: SliderImageProps | null }> = useMemo(\n    () => ({\n      propsCustom: {\n        image: image,\n        br: br,\n      },\n      propsDialog: {\n        borderRadius: br,\n        padding: '0',\n        background: 'whiteStandard',\n      },\n      onRemove() {\n        setImage(null);\n      },\n      content: (remove, _isAnimating, params) => (\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          {params?.image ? (\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={params.image.imageSrc}\n              src={params.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          ) : null}\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    [br, props.imageSettings.aspect, props.locale.imageFallback, image],\n  );\n  const { add } = useDialog<{\n    br?: string;\n    image: SliderImageProps | null;\n  }>(propsDialog);\n  const handleAdd = useCallback(\n    (image: SliderImageProps) => {\n      setImage(image);\n      add();\n    },\n    [add],\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","image","Fragment","theme"],"mappings":"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"}

package/build/component-CZM5p4mC.js

@@ -1,74 +0,0 @@
-import { j as jsxRuntimeExports } from "./jsx-runtime-DZS36FSE.js";
-import { useCallback, useMemo } from "react";
-import { useTheme } from "styled-components";
-import { ad as RangeWrapper, af as RangeThumb, ae as RangeTrack } from "./context.constants-D0UjboYX.js";
-const Range = (props) => {
-  const { onChange } = props;
-  const handleChange = useCallback(
-    (index, newValue) => {
-      const newValues = [...props.values];
-      newValues[index] = Math.min(props.max, Math.max(props.min, newValue));
-      onChange(newValues.sort((a, b) => a - b));
-    },
-    [onChange, props.max, props.min, props.values]
-  );
-  const getThumbPositionPercent = useCallback(
-    (val) => (val - props.min) / (props.max - props.min) * 100,
-    [props.max, props.min]
-  );
-  const positions = useMemo(
-    () => props.values.map((val) => getThumbPositionPercent(val)),
-    [getThumbPositionPercent, props.values]
-  );
-  const theme = useTheme();
-  const colorTrackBackground = theme.colors.range[props.genre].track.background.rest;
-  const colorTrackGradient = theme.colors.range[props.genre].track.gradient.rest;
-  const colorThumbBorder = theme.colors.range[props.genre].thumb.border.rest;
-  const colorThumbBackground = theme.colors.range[props.genre].thumb.background.rest;
-  const trackGradient = useMemo(
-    () => positions.map((position, idx) => {
-      const isFirst = idx === 0;
-      const isLast = idx === positions.length - 1;
-      if (isFirst)
-        return `${colorTrackBackground} 0%, ${colorTrackBackground} ${position}%, ${colorTrackGradient} ${position}%`;
-      if (isLast)
-        return `${colorTrackGradient} ${position}%, ${colorTrackBackground} ${position}%, ${colorTrackBackground} 100%`;
-      return `${colorTrackGradient} ${position}%`;
-    }).join(", "),
-    [colorTrackGradient, colorTrackBackground, positions]
-  );
-  const gradient = useMemo(() => `linear-gradient(to right, ${trackGradient})`, [trackGradient]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(RangeWrapper, { $size: props.size, $sx: props.sx, $error: props.error, onBlur: props.onBlur, children: [
-    props.values.map((val, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      RangeThumb,
-      {
-        type: "range",
-        $size: props.size,
-        $genre: props.genre,
-        min: props.min,
-        max: props.max,
-        step: props.step,
-        value: val,
-        onChange: (e) => handleChange(idx, parseFloat(e.target.value)),
-        style: { zIndex: 100 + idx },
-        $colorBackground: colorThumbBackground,
-        $colorBorder: colorThumbBorder
-      },
-      idx
-    )),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      RangeTrack,
-      {
-        $size: props.size,
-        $genre: props.genre,
-        style: {
-          background: gradient
-        }
-      }
-    )
-  ] });
-};
-export {
-  Range as R
-};
-//# sourceMappingURL=component-CZM5p4mC.js.map

package/build/component-CZM5p4mC.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-CZM5p4mC.js","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":["jsxs","jsx"],"mappings":";;;;AAKO,MAAM,QAAQ,CAAC,UAAsB;AAC1C,QAAM,EAAE,aAAa;AACrB,QAAM,eAAe;AAAA,IACnB,CAAC,OAAe,aAAqB;AACnC,YAAM,YAAY,CAAC,GAAG,MAAM,MAAM;AAClC,gBAAU,KAAK,IAAI,KAAK,IAAI,MAAM,KAAK,KAAK,IAAI,MAAM,KAAK,QAAQ,CAAC;AACpE,eAAS,UAAU,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC;AAAA,IAC1C;AAAA,IACA,CAAC,UAAU,MAAM,KAAK,MAAM,KAAK,MAAM,MAAM;AAAA,EAAA;AAE/C,QAAM,0BAA0B;AAAA,IAC9B,CAAC,SAAkB,MAAM,MAAM,QAAQ,MAAM,MAAM,MAAM,OAAQ;AAAA,IACjE,CAAC,MAAM,KAAK,MAAM,GAAG;AAAA,EAAA;AAEvB,QAAM,YAAY;AAAA,IAChB,MAAM,MAAM,OAAO,IAAI,CAAC,QAAQ,wBAAwB,GAAG,CAAC;AAAA,IAC5D,CAAC,yBAAyB,MAAM,MAAM;AAAA,EAAA;AAExC,QAAM,QAAQ,SAAA;AAEd,QAAM,uBAAuB,MAAM,OAAO,MAAM,MAAM,KAAK,EAAE,MAAM,WAAW;AAC9E,QAAM,qBAAqB,MAAM,OAAO,MAAM,MAAM,KAAK,EAAE,MAAM,SAAS;AAC1E,QAAM,mBAAmB,MAAM,OAAO,MAAM,MAAM,KAAK,EAAE,MAAM,OAAO;AACtE,QAAM,uBAAuB,MAAM,OAAO,MAAM,MAAM,KAAK,EAAE,MAAM,WAAW;AAE9E,QAAM,gBAAgB;AAAA,IACpB,MACE,UACG,IAAI,CAAC,UAAU,QAAQ;AACtB,YAAM,UAAU,QAAQ;AACxB,YAAM,SAAS,QAAQ,UAAU,SAAS;AAE1C,UAAI;AACF,eAAO,GAAG,oBAAoB,QAAQ,oBAAoB,IAAI,QAAQ,MAAM,kBAAkB,IAAI,QAAQ;AAC5G,UAAI;AACF,eAAO,GAAG,kBAAkB,IAAI,QAAQ,MAAM,oBAAoB,IAAI,QAAQ,MAAM,oBAAoB;AAC1G,aAAO,GAAG,kBAAkB,IAAI,QAAQ;AAAA,IAC1C,CAAC,EACA,KAAK,IAAI;AAAA,IACd,CAAC,oBAAoB,sBAAsB,SAAS;AAAA,EAAA;AAEtD,QAAM,WAAW,QAAQ,MAAM,6BAA6B,aAAa,KAAK,CAAC,aAAa,CAAC;AAE7F,SACEA,kCAAAA,KAAC,cAAA,EAAa,OAAO,MAAM,MAAM,KAAK,MAAM,IAAI,QAAQ,MAAM,OAAO,QAAQ,MAAM,QAChF,UAAA;AAAA,IAAA,MAAM,OAAO,IAAI,CAAC,KAAK,QACtBC,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,OAAO,MAAM;AAAA,QACb,QAAQ,MAAM;AAAA,QACd,KAAK,MAAM;AAAA,QACX,KAAK,MAAM;AAAA,QACX,MAAM,MAAM;AAAA,QACZ,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,aAAa,KAAK,WAAW,EAAE,OAAO,KAAK,CAAC;AAAA,QAC7D,OAAO,EAAE,QAAQ,MAAM,IAAA;AAAA,QACvB,kBAAkB;AAAA,QAClB,cAAc;AAAA,MAAA;AAAA,MAXT;AAAA,IAAA,CAaR;AAAA,IACDA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,MAAM;AAAA,QACb,QAAQ,MAAM;AAAA,QACd,OAAO;AAAA,UACL,YAAY;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/build/component-Cfs39n8Q.js

@@ -1,21 +0,0 @@
-import { j as jsxRuntimeExports } from "./jsx-runtime-DZS36FSE.js";
-import { S as SeparatorWrapper } from "./component.styles-SZ5VuhNG.js";
-const Separator = (props) => {
-  const color = props.color || "grayMonica";
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SeparatorWrapper,
-    {
-      role: "separator",
-      "aria-orientation": props.type,
-      $radius: props.radius,
-      $color: color,
-      $sx: props.sx,
-      $type: props.type,
-      $thickness: props.thickness
-    }
-  );
-};
-export {
-  Separator as S
-};
-//# sourceMappingURL=component-Cfs39n8Q.js.map

package/build/component-Cfs39n8Q.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-Cfs39n8Q.js","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":["jsx"],"mappings":";;AAMO,MAAM,YAAgC,CAAC,UAAU;AACtD,QAAM,QAA2B,MAAM,SAAS;AAChD,SACEA,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,oBAAkB,MAAM;AAAA,MACxB,SAAS,MAAM;AAAA,MACf,QAAQ;AAAA,MACR,KAAK,MAAM;AAAA,MACX,OAAO,MAAM;AAAA,MACb,YAAY,MAAM;AAAA,IAAA;AAAA,EAAA;AAGxB;"}

package/build/component-CoOTSdM5.cjs

@@ -1,28 +0,0 @@
-"use strict";const e=require("./jsx-runtime-C6yv_9g1.cjs"),r=require("./style-fRZ6xrVp.cjs"),o=require("framer-motion"),s=require("styled-components"),t=require("./component.styles-BX2Aiqp_.cjs");require("react");const i=s.div`
-  display: flex;
-  ${r.addSX}
-
-  ${e=>e.$isHover&&s.css`
-      transition:
-        background-color ${e=>e.theme.transition.default},
-        outline 0s;
-      &:hover {
-        background-color: ${e=>e.theme.palette.black05};
-      }
-    `};
-  ${t.addRipple};
-`,n=s(o.motion.div)`
-  display: flex;
-  ${r.addSX}
-
-  ${e=>e.$isHover&&s.css`
-      transition:
-        background-color ${e=>e.theme.transition.default},
-        outline 0s;
-      &:hover {
-        background-color: ${e=>e.theme.palette.black05};
-      }
-    `};
-  ${t.addRipple};
-`;exports.Stack=r=>e.jsxRuntimeExports.jsx(i,{ref:r.ref,onClick:r.onClick,onDrop:r.onDrop,onDragOver:r.onDragOver,className:r.className,$sx:r.sx,$isHover:r.isHover,$isRipple:r.isRipple,children:r.children}),exports.StackMotion=r=>{const{style:o,className:s,isHover:t,isRipple:i,onClick:l,onDrop:a,onDragOver:c,ref:p,sx:d}=r;return e.jsxRuntimeExports.jsx(n,{ref:p,style:o,onClick:l,onDrop:a,onDragOver:c,className:s,$sx:d,$isHover:t,$isRipple:i,...r,children:r.children})},exports.StyledStack=i,exports.StyledStackMotion=n;
-//# sourceMappingURL=component-CoOTSdM5.cjs.map

package/build/component-CoOTSdM5.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-CoOTSdM5.cjs","sources":["../src/components/stack/component.styles.tsx","../src/components/stack/component.tsx"],"sourcesContent":["import { addSX } from '@local/styles/sx';\n\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\n\nimport { addRipple } from '../ripple';\nimport { StyledStackProps } from '.';\n\nexport const StyledStack = styled.div<StyledStackProps>`\n  display: flex;\n  ${addSX}\n\n  ${(props) =>\n    props.$isHover &&\n    css`\n      transition:\n        background-color ${(props) => props.theme.transition.default},\n        outline 0s;\n      &:hover {\n        background-color: ${(props) => props.theme.palette.black05};\n      }\n    `};\n  ${addRipple};\n`;\n\nexport const StyledStackMotion = styled(motion.div)<StyledStackProps>`\n  display: flex;\n  ${addSX}\n\n  ${(props) =>\n    props.$isHover &&\n    css`\n      transition:\n        background-color ${(props) => props.theme.transition.default},\n        outline 0s;\n      &:hover {\n        background-color: ${(props) => props.theme.palette.black05};\n      }\n    `};\n  ${addRipple};\n`;\n","import { FC } from 'react';\n\nimport { StackMotionProps, StackProps, StyledStack, StyledStackMotion } from '.';\n\nexport const Stack: FC<StackProps> = (props) => {\n  return (\n    <StyledStack\n      ref={props.ref}\n      onClick={props.onClick}\n      onDrop={props.onDrop}\n      onDragOver={props.onDragOver}\n      className={props.className}\n      $sx={props.sx}\n      $isHover={props.isHover}\n      $isRipple={props.isRipple}\n    >\n      {props.children}\n    </StyledStack>\n  );\n};\n\nexport const StackMotion: FC<StackMotionProps> = (props) => {\n  const { style, className, isHover, isRipple, onClick, onDrop, onDragOver, ref, sx } = props;\n  return (\n    <StyledStackMotion\n      ref={ref}\n      style={style}\n      onClick={onClick}\n      onDrop={onDrop}\n      onDragOver={onDragOver}\n      className={className}\n      $sx={sx}\n      $isHover={isHover}\n      $isRipple={isRipple}\n      {...props}\n    >\n      {props.children}\n    </StyledStackMotion>\n  );\n};\n"],"names":["StyledStack","styled","div","addSX","props","$isHover","css","theme","transition","default","palette","black05","addRipple","StyledStackMotion","motion","jsx","ref","onClick","onDrop","onDragOver","className","$sx","sx","isHover","$isRipple","isRipple","children","style"],"mappings":"qNAQO,MAAMA,EAAcC,EAAOC,GAAA;;IAE9BC,EAAAA;;IAECC,GACDA,EAAMC,UACNC,EAAAA,GAAAA;;2BAEwBF,GAAUA,EAAMG,MAAMC,WAAWC;;;4BAGhCL,GAAUA,EAAMG,MAAMG,QAAQC;;;IAGvDC;EAGSC,EAAoBZ,EAAOa,EAAAA,OAAOZ,IAAG;;IAE9CC,EAAAA;;IAECC,GACDA,EAAMC,UACNC,EAAAA,GAAAA;;2BAEwBF,GAAUA,EAAMG,MAAMC,WAAWC;;;4BAGhCL,GAAUA,EAAMG,MAAMG,QAAQC;;;IAGvDC;gBCnCkCR,KAElCW,kBAAAA,IAACf,EAAA,CACCgB,IAAKZ,EAAMY,IACXC,QAASb,EAAMa,QACfC,OAAQd,EAAMc,OACdC,WAAYf,EAAMe,WAClBC,UAAWhB,EAAMgB,UACjBC,IAAKjB,EAAMkB,GACXjB,SAAUD,EAAMmB,QAChBC,UAAWpB,EAAMqB,SAEhBC,SAAAtB,EAAMsB,+BAKqCtB,IAChD,MAAQuB,MAAAA,EAAAA,UAAOP,EAAAG,QAAWA,EAAAE,SAASA,EAAAR,QAAUA,EAAAC,OAASA,EAAAC,WAAQA,EAAAH,IAAYA,EAAAM,GAAKA,GAAOlB,EACtF,SACEW,kBAAAA,IAACF,EAAA,CACCG,MACAW,MAAAA,EACAV,UACAC,SACAC,aACAC,YACAC,IAAKC,EACLjB,SAAUkB,EACVC,UAAWC,KACPrB,EAEHsB,SAAAtB,EAAMsB"}

package/build/component-Cu2i_-RT.cjs

@@ -1,2 +0,0 @@
-"use strict";const t=require("./jsx-runtime-C6yv_9g1.cjs"),e=require("./component-CoOTSdM5.cjs");exports.Smooth=o=>t.jsxRuntimeExports.jsx(e.StackMotion,{transition:{layout:{duration:.3,ease:"easeInOut",type:"spring"}},layout:!0,...o,children:o.children});
-//# sourceMappingURL=component-Cu2i_-RT.cjs.map

package/build/component-Cu2i_-RT.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-Cu2i_-RT.cjs","sources":["../src/areas/smooth/component.tsx"],"sourcesContent":["import { FC } from 'react';\n\nimport { StackMotion, StackProps } from '@local/components/stack';\n\nexport const Smooth: FC<StackProps> = (props) => {\n  return (\n    <StackMotion\n      transition={{\n        layout: {\n          duration: 0.3,\n          ease: 'easeInOut',\n          type: 'spring',\n        },\n      }}\n      layout\n      {...props}\n    >\n      {props.children}\n    </StackMotion>\n  );\n};\n"],"names":["props","jsx","StackMotion","transition","layout","duration","ease","type","children"],"mappings":"gHAIuCA,KAEnCC,kBAAAA,IAACC,EAAAA,YAAA,CACCC,WAAY,CACVC,OAAQ,CACNC,SAAU,GACVC,KAAM,YACNC,KAAM,WAGVH,QAAM,KACFJ,EAEHQ,SAAAR,EAAMQ"}