@jenesei-software/jenesei-kit-react 1.3.12 → 1.3.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/build-info.txt +3 -3
- package/build/component-image-select.cjs.js +1 -1
- package/build/component-image-select.es.js +1 -1
- package/build/component-image-slider.cjs.js +1 -1
- package/build/component-image-slider.es.js +1 -1
- package/build/component-image.cjs.js +1 -1
- package/build/component-image.es.js +1 -1
- package/build/{component.constants-BxnfHAYp.js → component.constants-COLayaiY.js} +2 -2
- package/build/{component.constants-BxnfHAYp.js.map → component.constants-COLayaiY.js.map} +1 -1
- package/build/{component.constants-CpRgeAIu.cjs → component.constants-eYn_2hvO.cjs} +2 -2
- package/build/{component.constants-CpRgeAIu.cjs.map → component.constants-eYn_2hvO.cjs.map} +1 -1
- package/build/{component.styles-BEaqQuF_.js → component.styles-BYVYSgCZ.js} +9 -7
- package/build/component.styles-BYVYSgCZ.js.map +1 -0
- package/build/{component.styles-DwtZ7CY4.js → component.styles-Ba1VTyjn.js} +2 -2
- package/build/{component.styles-DwtZ7CY4.js.map → component.styles-Ba1VTyjn.js.map} +1 -1
- package/build/component.styles-CAN6t4un.cjs +10 -0
- package/build/component.styles-CAN6t4un.cjs.map +1 -0
- package/build/{component.styles-C4xnWrvJ.cjs → component.styles-DhBoJzIN.cjs} +2 -2
- package/build/{component.styles-C4xnWrvJ.cjs.map → component.styles-DhBoJzIN.cjs.map} +1 -1
- package/build/index.cjs.js +1 -1
- package/build/index.es.js +3 -3
- package/package.json +1 -1
- package/build/component.styles-B-bndnRM.cjs +0 -10
- package/build/component.styles-B-bndnRM.cjs.map +0 -1
- package/build/component.styles-BEaqQuF_.js.map +0 -1
package/build/build-info.txt
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
version: 1.3.
|
|
2
|
-
commit:
|
|
3
|
-
date: 2025-08-
|
|
1
|
+
version: 1.3.13
|
|
2
|
+
commit: 91d7c64
|
|
3
|
+
date: 2025-08-29T02:45:21Z
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./component.styles-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./component.styles-DhBoJzIN.cjs");exports.ImageSelect=e.ImageSelect,exports.ImageSelectListSize=e.ImageSelectListSize,exports.ImageSelectListSizeConstructor=e.ImageSelectListSizeConstructor,exports.ImageSelectListWrapper=e.ImageSelectListWrapper,exports.ImageSelectSize=e.ImageSelectSize,exports.ImageSelectSizeConstructor=e.ImageSelectSizeConstructor,exports.ImageSelectWrapper=e.ImageSelectWrapper;
|
|
2
2
|
//# sourceMappingURL=component-image-select.cjs.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./component.constants-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./component.constants-eYn_2hvO.cjs");exports.IMAGES=e.IMAGES,exports.ImageSlider=e.ImageSlider,exports.SliderDot=e.SliderDot,exports.SliderImage=e.SliderImage;
|
|
2
2
|
//# sourceMappingURL=component-image-slider.cjs.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./component.styles-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./component.styles-CAN6t4un.cjs");exports.Image=e.Image,exports.ImageIMG=e.ImageIMG;
|
|
2
2
|
//# sourceMappingURL=component-image.cjs.js.map
|
|
@@ -2,7 +2,7 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
|
|
|
2
2
|
import { motion, AnimatePresence } from "framer-motion";
|
|
3
3
|
import { useMemo, useState, useCallback, useEffect } from "react";
|
|
4
4
|
import { c as Button } from "./component-CN6att4f.js";
|
|
5
|
-
import { I as Image } from "./component.styles-
|
|
5
|
+
import { I as Image } from "./component.styles-BYVYSgCZ.js";
|
|
6
6
|
import styled from "styled-components";
|
|
7
7
|
import { b as Stack, c as StackMotion } from "./component-mzzOCXSx.js";
|
|
8
8
|
import { i as Typography } from "./component-GtWqnaqk.js";
|
|
@@ -760,4 +760,4 @@ export {
|
|
|
760
760
|
SliderDot as a,
|
|
761
761
|
IMAGES as b
|
|
762
762
|
};
|
|
763
|
-
//# sourceMappingURL=component.constants-
|
|
763
|
+
//# sourceMappingURL=component.constants-COLayaiY.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.constants-BxnfHAYp.js","sources":["../src/components/image-slider/component.styles.tsx","../src/hooks/use-image-slider/use.tsx","../src/components/image-slider/component.tsx","../src/components/image-slider/component.constants.tsx"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const SliderImage = styled(motion.div)`\n display: flex;\n position: absolute;\n height: 100%;\n width: 100%;\n touch-action: pan-y;\n &:hover {\n cursor: grab;\n }\n\n &:active {\n cursor: grabbing;\n }\n`;\n\nexport const SliderDot = styled(motion.div)`\n width: 6px;\n height: 6px;\n background-color: ${(props) => props.theme.palette.whiteStandard};\n border-radius: 5px;\n opacity: 0.8;\n cursor: pointer;\n`;\n","import { Button } from '@local/components/button';\nimport { Image } from '@local/components/image';\nimport { ImageSliderProps, SliderDot, SliderImage } 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 { AnimatePresence, PanInfo, Variants } from 'framer-motion';\nimport { FC, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useImageSliderProps } from '.';\n\nexport const useImageSlider = (props: useImageSliderProps) => {\n const { onIndexChange } = props;\n\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const images = useMemo(() => props.images, [props.images]);\n\n const [{ activeImageId, direction }, setActiveImage] = useState({\n activeImageId: images?.[0]?.id ?? null,\n direction: 0,\n });\n const isLengthOne = useMemo(() => images?.length === 1, [images]);\n const isLengthZero = useMemo(() => images?.length === 0, [images]);\n\n const activeImageIndex = useMemo(() => images.findIndex((img) => img.id === activeImageId), [activeImageId, images]);\n\n const swipeToImage = useCallback(\n (swipeDirection: number) => {\n const currentIndex = images.findIndex((img) => img.id === activeImageId);\n const nextIndex = (currentIndex + swipeDirection + images.length) % images.length;\n setActiveImage({ activeImageId: images[nextIndex].id, direction: swipeDirection });\n },\n [activeImageId, images],\n );\n const dragEndHandler = useCallback(\n (dragInfo: PanInfo) => {\n const { offset, velocity } = dragInfo;\n const swipeThreshold = 50;\n const swipePower = Math.abs(offset.x) * velocity.x;\n\n if (swipePower > 500 || offset.x > swipeThreshold) {\n swipeToImage(-1);\n } else if (swipePower < -500 || offset.x < -swipeThreshold) {\n swipeToImage(1);\n }\n },\n [swipeToImage],\n );\n const skipToImage = useCallback(\n (imageId: number) => {\n const currentIndex = images.findIndex((img) => img.id === activeImageId);\n const newIndex = images.findIndex((img) => img.id === imageId);\n if (newIndex === -1 || newIndex === currentIndex) return;\n\n const direction = newIndex > currentIndex ? 1 : -1;\n setActiveImage({ activeImageId: imageId, direction });\n },\n [activeImageId, images],\n );\n\n useEffect(() => {\n if (activeImageId) onIndexChange?.(activeImageId);\n }, [activeImageId, onIndexChange]);\n\n const { add } = useDialog<ComponentHandleAddProps>({\n br: br,\n dragEndHandler: dragEndHandler,\n images: images,\n children: props.children,\n activeImageIndex: activeImageIndex,\n activeImageId: activeImageId,\n swipeToImage: swipeToImage,\n skipToImage: skipToImage,\n direction: direction,\n aspect: props.imageSettings.aspect,\n genre: props.genre,\n size: props.size,\n failedToLoad: props.locales.failedToLoad,\n isLengthOne: isLengthOne,\n propsDialog: {\n borderRadius: br,\n padding: '0',\n background: 'whiteStandard',\n },\n });\n const handleAdd = useCallback(() => {\n add({\n content: (params, remove) => <ComponentHandleAdd params={params} remove={remove} />,\n });\n }, [add]);\n\n return {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd,\n };\n};\nconst sliderVariants: Variants = {\n initial: (direction) => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0,\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: (direction) => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2,\n }),\n};\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04],\n};\n\ntype ComponentHandleAddProps = {\n br?: string;\n dragEndHandler: (dragInfo: PanInfo) => void;\n images: ImageSliderProps['images'];\n children?: ImageSliderProps['children'];\n activeImageIndex: number;\n activeImageId: number | null;\n swipeToImage: (swipeDirection: number) => void;\n skipToImage: (imageId: number) => void;\n direction: number;\n aspect: number;\n failedToLoad: string;\n isLengthOne: boolean;\n} & Pick<ImageSliderProps, 'genre' | 'size'>;\n\nconst ComponentHandleAdd: FC<{\n params?: useDialogProps<ComponentHandleAddProps>;\n remove?: () => void;\n}> = ({ params, remove }) => {\n return (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n aspectRatio: `${params?.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 <AnimatePresence initial={false} custom={params?.direction}>\n <SliderImage\n key={params?.activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: params?.br,\n }}\n custom={params?.direction}\n variants={sliderVariants}\n initial='initial'\n animate='active'\n exit='exit'\n transition={sliderTransition}\n {...(!params?.isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => params?.dragEndHandler(dragInfo),\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={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n src={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {params?.failedToLoad}\n </Typography>\n }\n />\n {(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof params?.children === 'function' ? params?.children?.({ isDialog: true }) : params?.children}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n right: 15,\n },\n }}\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => remove?.()}\n />\n {!params?.isLengthOne ? (\n <>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: 15,\n gap: '8px',\n },\n }}\n >\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(-1)}\n />\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(1)}\n />\n </Stack>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px',\n },\n }}\n >\n {(params?.images ?? [])?.map((i) => (\n <SliderDot\n onClick={() => params?.skipToImage?.(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: params?.activeImageId === i.id ? 1.5 : 1,\n opacity: params?.activeImageId === i.id ? 1 : 0.5,\n }}\n />\n ))}\n </Stack>\n </>\n ) : null}\n </Stack>\n );\n};\n","import { AnimatePresence, Variants } from 'framer-motion';\nimport { FC, useMemo } from 'react';\n\nimport { useImageSlider } from '@local/hooks/use-image-slider';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { ImageSliderProps, SliderDot, SliderImage } from '.';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { Image } from '../image';\nimport { Stack, StackMotion } from '../stack';\nimport { Typography } from '../typography';\n\nexport const ImageSlider: FC<ImageSliderProps> = (props) => {\n const { onIndexChange } = props;\n const images = useMemo(() => props.images, [props.images]);\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd,\n } = useImageSlider({\n genre: props.genre,\n size: props.size,\n images: images,\n imageSettings: props.imageSettings,\n locales: props.locales,\n onIndexChange: onIndexChange,\n children: props.children,\n });\n return (\n <StackMotion\n {...props.propsStack}\n sx={(theme) => ({\n ...props.propsStack?.sx,\n default: {\n borderRadius: br,\n flexDirection: 'column',\n alignItems: 'center',\n overflow: 'hidden',\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).default\n : props.propsStack?.sx.default\n : {}),\n },\n tablet: {\n maxWidth: '95dvw',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).tablet\n : props.propsStack?.sx.tablet\n : {}),\n },\n })}\n >\n {props.isLoading ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n }}\n >\n <Icon size='large' type='loading' primaryColor='blueFocus' name='Line' />\n </Stack>\n ) : !isLengthZero ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n },\n }}\n >\n <AnimatePresence initial={false} custom={direction}>\n <SliderImage\n key={activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: br,\n }}\n custom={direction}\n variants={sliderVariants}\n initial='initial'\n animate='active'\n exit='exit'\n transition={sliderTransition}\n {...(!isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => dragEndHandler(dragInfo),\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 alt={images[activeImageIndex]?.imageSrc}\n src={images[activeImageIndex]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locales.failedToLoad}\n </Typography>\n }\n />\n {images[activeImageIndex]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof props?.children === 'function' ? props?.children?.({ isDialog: false }) : props?.children}\n\n {!isLengthOne && (\n <>\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n left: 5,\n transform: 'translateY(-50%)',\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(-1)}\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n right: 5,\n transform: 'translateY(-50%)',\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(1)}\n />\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px',\n },\n }}\n >\n {images.map((i) => (\n <SliderDot\n onClick={() => skipToImage(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: activeImageId === i.id ? 1.5 : 1,\n opacity: activeImageId === i.id ? 1 : 0.5,\n }}\n />\n ))}\n </Stack>\n </>\n )}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n right: 5,\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Activity',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => handleAdd()}\n />\n </Stack>\n ) : (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n }}\n >\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locales.noImagesAvailable}\n </Typography>\n </Stack>\n )}\n </StackMotion>\n );\n};\nconst sliderVariants: Variants = {\n initial: (direction) => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0,\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: (direction) => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2,\n }),\n};\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04],\n};\n","import 'styled-components';\n\nimport { ImageSliderProps } from '.';\nimport { Button } from '../button';\nimport { Stack } from '../stack';\n\nexport const IMAGES: ImageSliderProps['images'] = [\n {\n id: 0,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://drupal-prod.visitcalifornia.com/sites/default/files/styles/fluid_1920/public/2020-06/VC_PlacesToVisit_LosAngelesCounty_RF_1170794243.jpg.webp?itok=46pJYz8v',\n },\n {\n id: 1,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.unsplash.com/flagged/photo-1575555201693-7cd442b8023f?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bG9zJTIwYW5nZWxlc3xlbnwwfHwwfHx8MA%3D%3D',\n },\n {\n id: 2,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://img.goodfon.com/original/2048x1319/8/29/ssha-kaliforniia-los-andzheles-los-angeles-doma-neboskreby-s.jpg',\n },\n {\n id: 3,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.pexels.com/photos/2231756/pexels-photo-2231756.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',\n },\n {\n id: 4,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.pexels.com/photos/1813157/pexels-photo-1813157.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',\n },\n];\n"],"names":["direction","jsx","sliderVariants","sliderTransition","jsxs","Fragment","_a","_b","_c","_d"],"mappings":";;;;;;;;;;;AAGO,MAAM,cAAc,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAerC,MAAM,YAAY,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA,sBAGpB,CAAC,UAAU,MAAM,MAAM,QAAQ,aAAa;AAAA;AAAA;AAAA;AAAA;ACR3D,MAAM,iBAAiB,CAAC,UAA+B;;AAC5D,QAAM,EAAE,kBAAkB;AAE1B,QAAM,OAAO,QAAQ,MAAM,cAAc,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC;AAClE,QAAM,KAAK,QAAQ,MAAM,GAAG,KAAK,MAAM,MAAM,CAAC,KAAK,MAAM,CAAC;AAE1D,QAAM,SAAS,QAAQ,MAAM,MAAM,QAAQ,CAAC,MAAM,MAAM,CAAC;AAEzD,QAAM,CAAC,EAAE,eAAe,aAAa,cAAc,IAAI,SAAS;AAAA,IAC9D,iBAAe,sCAAS,OAAT,mBAAa,OAAM;AAAA,IAClC,WAAW;AAAA,EAAA,CACZ;AACD,QAAM,cAAc,QAAQ,OAAM,iCAAQ,YAAW,GAAG,CAAC,MAAM,CAAC;AAChE,QAAM,eAAe,QAAQ,OAAM,iCAAQ,YAAW,GAAG,CAAC,MAAM,CAAC;AAEjE,QAAM,mBAAmB,QAAQ,MAAM,OAAO,UAAU,CAAC,QAAQ,IAAI,OAAO,aAAa,GAAG,CAAC,eAAe,MAAM,CAAC;AAEnH,QAAM,eAAe;AAAA,IACnB,CAAC,mBAA2B;AAC1B,YAAM,eAAe,OAAO,UAAU,CAAC,QAAQ,IAAI,OAAO,aAAa;AACvE,YAAM,aAAa,eAAe,iBAAiB,OAAO,UAAU,OAAO;AAC3E,qBAAe,EAAE,eAAe,OAAO,SAAS,EAAE,IAAI,WAAW,gBAAgB;AAAA,IAAA;AAAA,IAEnF,CAAC,eAAe,MAAM;AAAA,EAAA;AAExB,QAAM,iBAAiB;AAAA,IACrB,CAAC,aAAsB;AACrB,YAAM,EAAE,QAAQ,SAAA,IAAa;AAC7B,YAAM,iBAAiB;AACvB,YAAM,aAAa,KAAK,IAAI,OAAO,CAAC,IAAI,SAAS;AAEjD,UAAI,aAAa,OAAO,OAAO,IAAI,gBAAgB;AACjD,qBAAa,EAAE;AAAA,MAAA,WACN,aAAa,QAAQ,OAAO,IAAI,CAAC,gBAAgB;AAC1D,qBAAa,CAAC;AAAA,MAAA;AAAA,IAChB;AAAA,IAEF,CAAC,YAAY;AAAA,EAAA;AAEf,QAAM,cAAc;AAAA,IAClB,CAAC,YAAoB;AACnB,YAAM,eAAe,OAAO,UAAU,CAAC,QAAQ,IAAI,OAAO,aAAa;AACvE,YAAM,WAAW,OAAO,UAAU,CAAC,QAAQ,IAAI,OAAO,OAAO;AAC7D,UAAI,aAAa,MAAM,aAAa,aAAc;AAElD,YAAMA,aAAY,WAAW,eAAe,IAAI;AAChD,qBAAe,EAAE,eAAe,SAAS,WAAAA,YAAW;AAAA,IAAA;AAAA,IAEtD,CAAC,eAAe,MAAM;AAAA,EAAA;AAGxB,YAAU,MAAM;AACd,QAAI,8DAA+B;AAAA,EAAa,GAC/C,CAAC,eAAe,aAAa,CAAC;AAEjC,QAAM,EAAE,IAAA,IAAQ,UAAmC;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,MAAM;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,MAAM,cAAc;AAAA,IAC5B,OAAO,MAAM;AAAA,IACb,MAAM,MAAM;AAAA,IACZ,cAAc,MAAM,QAAQ;AAAA,IAC5B;AAAA,IACA,aAAa;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,MACT,YAAY;AAAA,IAAA;AAAA,EACd,CACD;AACD,QAAM,YAAY,YAAY,MAAM;AAClC,QAAI;AAAA,MACF,SAAS,CAAC,QAAQ,WAAWC,kCAAAA,IAAC,oBAAA,EAAmB,QAAgB,OAAA,CAAgB;AAAA,IAAA,CAClF;AAAA,EAAA,GACA,CAAC,GAAG,CAAC;AAER,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;AACA,MAAMC,mBAA2B;AAAA,EAC/B,SAAS,CAAC,eAAe;AAAA,IACvB,GAAG,YAAY,IAAI,SAAS;AAAA,IAC5B,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,QAAQ,EAAE,GAAG,GAAG,OAAO,GAAG,SAAS,EAAA;AAAA,EACnC,MAAM,CAAC,eAAe;AAAA,IACpB,GAAG,YAAY,IAAI,UAAU;AAAA,IAC7B,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;AACA,MAAMC,qBAAmB;AAAA,EACvB,UAAU;AAAA,EACV,MAAM,CAAC,MAAM,MAAM,MAAM,IAAI;AAC/B;AAiBA,MAAM,qBAGD,CAAC,EAAE,QAAQ,aAAa;;AAC3B,SACEC,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,SAAS;AAAA,UACP,UAAU;AAAA,UACV,UAAU;AAAA,UACV,aAAa,IAAG,iCAAQ,UAAU,CAAC;AAAA,UACnC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,cAAc,iCAAQ;AAAA,QAAA;AAAA,QAExB,QAAQ;AAAA,UACN,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,MAGF,UAAA;AAAA,QAAAH,sCAAC,iBAAA,EAAgB,SAAS,OAAO,QAAQ,iCAAQ,WAC/C,UAAAG,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,cAAc,iCAAQ;AAAA,YAAA;AAAA,YAExB,QAAQ,iCAAQ;AAAA,YAChB,UAAUF;AAAAA,YACV,SAAQ;AAAA,YACR,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,YAAYC;AAAAA,YACX,GAAI,EAAC,iCAAQ,eACV;AAAA,cACE,MAAM;AAAA,cACN,iBAAiB,EAAE,MAAM,GAAG,OAAO,EAAA;AAAA,cACnC,aAAa;AAAA,cACb,WAAW,CAAC,GAAG,aAAa,iCAAQ,eAAe;AAAA,YAAQ,IAE7D,CAAA;AAAA,YAEJ,UAAA;AAAA,cAAAF,kCAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAS,CAAC,WAAW;AAAA,oBACnB,SAAS;AAAA,sBACP,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,YAAY;AAAA,sBACZ,gBAAgB;AAAA,sBAChB,iBAAiB,MAAM,QAAQ;AAAA,sBAC/B,UAAU;AAAA,sBACV,eAAe;AAAA,oBAAA;AAAA,kBACjB;AAAA,kBAEF,mBAAiB;AAAA,kBACjB,SAAS;AAAA,oBACP,SAAS;AAAA,sBACP,WAAW;AAAA,oBAAA;AAAA,kBACb;AAAA,kBAEF,MAAM,6CAAQ,WAAU,CAAA,MAAlB,oBAAwB,iCAAQ,qBAAoB,OAApD,mBAAwD;AAAA,kBAC9D,MAAM,6CAAQ,WAAU,CAAA,MAAlB,oBAAwB,iCAAQ,qBAAoB,OAApD,mBAAwD;AAAA,kBAC9D,mBACEA,kCAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,IAAI;AAAA,wBACF,SAAS;AAAA,0BACP,SAAS;AAAA,wBAAA;AAAA,sBACX;AAAA,sBAGD,UAAA,iCAAQ;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACX;AAAA,cAAA;AAAA,eAGF,6CAAQ,WAAU,CAAA,MAAlB,oBAAwB,iCAAQ,qBAAoB,OAApD,mBAAwD;AAAA,YAAA;AAAA,UAAA;AAAA,UApDrD,iCAAQ;AAAA,QAAA,GAsDjB;AAAA,QACC,QAAO,iCAAQ,cAAa,cAAa,sCAAQ,aAAR,gCAAmB,EAAE,UAAU,KAAA,KAAU,iCAAQ;AAAA,QAE3FA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,SAAS;AAAA,gBACP,UAAU;AAAA,gBACV,QAAQ;AAAA,gBACR,OAAO;AAAA,cAAA;AAAA,YACT;AAAA,YAEF,QAAO,iCAAQ,UAAS;AAAA,YACxB,OAAM,iCAAQ,SAAQ;AAAA,YACtB,OAAO;AAAA,cACL;AAAA,gBACE,MAAM;AAAA,gBACN,MAAM;AAAA,cAAA;AAAA,YACR;AAAA,YAEF,iBAAe;AAAA,YACf,gBAAc;AAAA,YACd,UAAQ;AAAA,YACR,SAAS,MAAM;AAAA,UAAS;AAAA,QAAA;AAAA,QAEzB,EAAC,iCAAQ,eACRG,kCAAAA,KAAAC,kBAAAA,UAAA,EACE,UAAA;AAAA,UAAAD,kCAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,gBACF,SAAS;AAAA,kBACP,UAAU;AAAA,kBACV,QAAQ;AAAA,kBACR,MAAM;AAAA,kBACN,KAAK;AAAA,gBAAA;AAAA,cACP;AAAA,cAGF,UAAA;AAAA,gBAAAH,kCAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,QAAO,iCAAQ,UAAS;AAAA,oBACxB,OAAM,iCAAQ,SAAQ;AAAA,oBACtB,OAAO;AAAA,sBACL;AAAA,wBACE,MAAM;AAAA,wBACN,MAAM;AAAA,wBACN,MAAM;AAAA,sBAAA;AAAA,oBACR;AAAA,oBAEF,iBAAe;AAAA,oBACf,gBAAc;AAAA,oBACd,qBAAmB;AAAA,oBACnB,UAAQ;AAAA,oBACR,SAAS,MAAA;;AAAM,8BAAAK,MAAA,iCAAQ,iBAAR,gBAAAA,IAAA,aAAuB;AAAA;AAAA,kBAAE;AAAA,gBAAA;AAAA,gBAE1CL,kCAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,QAAO,iCAAQ,UAAS;AAAA,oBACxB,OAAM,iCAAQ,SAAQ;AAAA,oBACtB,OAAO;AAAA,sBACL;AAAA,wBACE,MAAM;AAAA,wBACN,MAAM;AAAA,wBACN,MAAM;AAAA,sBAAA;AAAA,oBACR;AAAA,oBAEF,iBAAe;AAAA,oBACf,gBAAc;AAAA,oBACd,qBAAmB;AAAA,oBACnB,UAAQ;AAAA,oBACR,SAAS,MAAA;;AAAM,8BAAAK,MAAA,iCAAQ,iBAAR,gBAAAA,IAAA,aAAuB;AAAA;AAAA,kBAAC;AAAA,gBAAA;AAAA,cACzC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFL,kCAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,gBACF,SAAS;AAAA,kBACP,UAAU;AAAA,kBACV,QAAQ;AAAA,kBACR,MAAM;AAAA,kBACN,WAAW;AAAA,kBACX,KAAK;AAAA,gBAAA;AAAA,cACP;AAAA,cAGA,kDAAQ,WAAU,CAAA,yBAAK,IAAI,CAAC,MAC5BA,kCAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAS,MAAA;;AAAM,4BAAAK,MAAA,iCAAQ,gBAAR,gBAAAA,IAAA,aAAsB,EAAE;AAAA;AAAA,kBAEvC,SAAS;AAAA,kBACT,SAAS;AAAA,oBACP,QAAO,iCAAQ,mBAAkB,EAAE,KAAK,MAAM;AAAA,oBAC9C,UAAS,iCAAQ,mBAAkB,EAAE,KAAK,IAAI;AAAA,kBAAA;AAAA,gBAChD;AAAA,gBALK,EAAE;AAAA,cAAA;AAAA,YAOV;AAAA,UAAA;AAAA,QACH,EAAA,CACF,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;AC5SO,MAAM,cAAoC,CAAC,UAAU;;AAC1D,QAAM,EAAE,kBAAkB;AAC1B,QAAM,SAAS,QAAQ,MAAM,MAAM,QAAQ,CAAC,MAAM,MAAM,CAAC;AACzD,QAAM,OAAO,QAAQ,MAAM,cAAc,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC;AAClE,QAAM,KAAK,QAAQ,MAAM,GAAG,KAAK,MAAM,MAAM,CAAC,KAAK,MAAM,CAAC;AAE1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,eAAe;AAAA,IACjB,OAAO,MAAM;AAAA,IACb,MAAM,MAAM;AAAA,IACZ;AAAA,IACA,eAAe,MAAM;AAAA,IACrB,SAAS,MAAM;AAAA,IACf;AAAA,IACA,UAAU,MAAM;AAAA,EAAA,CACjB;AACD,SACEL,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG,MAAM;AAAA,MACV,IAAI,CAAC,UAAA;;AAAW;AAAA,UACd,IAAGK,MAAA,MAAM,eAAN,gBAAAA,IAAkB;AAAA,UACrB,SAAS;AAAA,YACP,cAAc;AAAA,YACd,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,UAAU;AAAA,YACV,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,KAAIC,MAAA,MAAM,eAAN,gBAAAA,IAAkB,MAClB,SAAOC,MAAA,MAAM,eAAN,gBAAAA,IAAkB,QAAO,cAC9BC,MAAA,MAAM,eAAN,gBAAAA,IAAkB,GAAG,OAAO,WAC5B,WAAM,eAAN,mBAAkB,GAAG,UACvB,CAAA;AAAA,UAAC;AAAA,UAEP,QAAQ;AAAA,YACN,UAAU;AAAA,YACV,KAAI,WAAM,eAAN,mBAAkB,MAClB,SAAO,WAAM,eAAN,mBAAkB,QAAO,cAC9B,WAAM,eAAN,mBAAkB,GAAG,OAAO,UAC5B,WAAM,eAAN,mBAAkB,GAAG,SACvB,CAAA;AAAA,UAAC;AAAA,QACP;AAAA;AAAA,MAGD,gBAAM,YACLR,kCAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,SAAS;AAAA,cACP,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,UAAU;AAAA,cACV,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,YAAA;AAAA,UAClB;AAAA,UAGF,UAAAA,kCAAAA,IAAC,QAAK,MAAK,SAAQ,MAAK,WAAU,cAAa,aAAY,MAAK,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA,IAEvE,CAAC,eACHG,kCAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,SAAS;AAAA,cACP,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,UAGF,UAAA;AAAA,YAAAH,kCAAAA,IAAC,iBAAA,EAAgB,SAAS,OAAO,QAAQ,WACvC,UAAAG,kCAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,OAAO;AAAA,kBACL,UAAU;AAAA,kBACV,cAAc;AAAA,gBAAA;AAAA,gBAEhB,QAAQ;AAAA,gBACR,UAAU;AAAA,gBACV,SAAQ;AAAA,gBACR,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,YAAY;AAAA,gBACX,GAAI,CAAC,cACF;AAAA,kBACE,MAAM;AAAA,kBACN,iBAAiB,EAAE,MAAM,GAAG,OAAO,EAAA;AAAA,kBACnC,aAAa;AAAA,kBACb,WAAW,CAAC,GAAG,aAAa,eAAe,QAAQ;AAAA,gBAAA,IAErD,CAAA;AAAA,gBAEJ,UAAA;AAAA,kBAAAH,kCAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,SAAS,CAAC,WAAW;AAAA,wBACnB,SAAS;AAAA,0BACP,OAAO;AAAA,0BACP,QAAQ;AAAA,0BACR,YAAY;AAAA,0BACZ,gBAAgB;AAAA,0BAChB,iBAAiB,MAAM,QAAQ;AAAA,0BAC/B,UAAU;AAAA,0BACV,eAAe;AAAA,wBAAA;AAAA,sBACjB;AAAA,sBAEF,MAAK,YAAO,gBAAgB,MAAvB,mBAA0B;AAAA,sBAC/B,MAAK,YAAO,gBAAgB,MAAvB,mBAA0B;AAAA,sBAC/B,mBACEA,kCAAAA;AAAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,IAAI;AAAA,4BACF,SAAS;AAAA,8BACP,SAAS;AAAA,4BAAA;AAAA,0BACX;AAAA,0BAGD,gBAAM,QAAQ;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACjB;AAAA,kBAAA;AAAA,mBAGH,YAAO,gBAAgB,MAAvB,mBAA0B;AAAA,gBAAA;AAAA,cAAA;AAAA,cA9CtB;AAAA,YAAA,GAgDT;AAAA,YACC,QAAO,+BAAO,cAAa,cAAa,oCAAO,aAAP,+BAAkB,EAAE,UAAU,MAAA,KAAW,+BAAO;AAAA,YAExF,CAAC,eACAG,kCAAAA,KAAAC,kBAAAA,UAAA,EACE,UAAA;AAAA,cAAAJ,kCAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,oBACF,SAAS;AAAA,sBACP,UAAU;AAAA,sBACV,KAAK;AAAA,sBACL,MAAM;AAAA,sBACN,WAAW;AAAA,oBAAA;AAAA,kBACb;AAAA,kBAEF,OAAO,MAAM;AAAA,kBACb,MAAM,MAAM;AAAA,kBACZ,OAAO;AAAA,oBACL;AAAA,sBACE,MAAM;AAAA,sBACN,MAAM;AAAA,sBACN,MAAM;AAAA,oBAAA;AAAA,kBACR;AAAA,kBAEF,iBAAe;AAAA,kBACf,gBAAc;AAAA,kBACd,UAAQ;AAAA,kBACR,SAAS,MAAM,aAAa,EAAE;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEhCA,kCAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,oBACF,SAAS;AAAA,sBACP,UAAU;AAAA,sBACV,KAAK;AAAA,sBACL,OAAO;AAAA,sBACP,WAAW;AAAA,oBAAA;AAAA,kBACb;AAAA,kBAEF,OAAO,MAAM;AAAA,kBACb,MAAM,MAAM;AAAA,kBACZ,OAAO;AAAA,oBACL;AAAA,sBACE,MAAM;AAAA,sBACN,MAAM;AAAA,sBACN,MAAM;AAAA,oBAAA;AAAA,kBACR;AAAA,kBAEF,iBAAe;AAAA,kBACf,gBAAc;AAAA,kBACd,UAAQ;AAAA,kBACR,SAAS,MAAM,aAAa,CAAC;AAAA,gBAAA;AAAA,cAAA;AAAA,cAE/BA,kCAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,oBACF,SAAS;AAAA,sBACP,UAAU;AAAA,sBACV,QAAQ;AAAA,sBACR,MAAM;AAAA,sBACN,WAAW;AAAA,sBACX,KAAK;AAAA,oBAAA;AAAA,kBACP;AAAA,kBAGD,UAAA,OAAO,IAAI,CAAC,MACXA,kCAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,SAAS,MAAM,YAAY,EAAE,EAAE;AAAA,sBAE/B,SAAS;AAAA,sBACT,SAAS;AAAA,wBACP,OAAO,kBAAkB,EAAE,KAAK,MAAM;AAAA,wBACtC,SAAS,kBAAkB,EAAE,KAAK,IAAI;AAAA,sBAAA;AAAA,oBACxC;AAAA,oBALK,EAAE;AAAA,kBAAA,CAOV;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,GACF;AAAA,YAGFA,kCAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,kBACF,SAAS;AAAA,oBACP,UAAU;AAAA,oBACV,QAAQ;AAAA,oBACR,OAAO;AAAA,kBAAA;AAAA,gBACT;AAAA,gBAEF,OAAO,MAAM;AAAA,gBACb,MAAM,MAAM;AAAA,gBACZ,OAAO;AAAA,kBACL;AAAA,oBACE,MAAM;AAAA,oBACN,MAAM;AAAA,kBAAA;AAAA,gBACR;AAAA,gBAEF,iBAAe;AAAA,gBACf,gBAAc;AAAA,gBACd,UAAQ;AAAA,gBACR,SAAS,MAAM,UAAA;AAAA,cAAU;AAAA,YAAA;AAAA,UAC3B;AAAA,QAAA;AAAA,MAAA,IAGFA,kCAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,SAAS;AAAA,cACP,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,UAAU;AAAA,cACV,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,YAAA;AAAA,UAClB;AAAA,UAGF,UAAAA,kCAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,gBACF,SAAS;AAAA,kBACP,SAAS;AAAA,gBAAA;AAAA,cACX;AAAA,cAGD,gBAAM,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;AACA,MAAM,iBAA2B;AAAA,EAC/B,SAAS,CAAC,eAAe;AAAA,IACvB,GAAG,YAAY,IAAI,SAAS;AAAA,IAC5B,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,QAAQ,EAAE,GAAG,GAAG,OAAO,GAAG,SAAS,EAAA;AAAA,EACnC,MAAM,CAAC,eAAe;AAAA,IACpB,GAAG,YAAY,IAAI,UAAU;AAAA,IAC7B,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;AACA,MAAM,mBAAmB;AAAA,EACvB,UAAU;AAAA,EACV,MAAM,CAAC,MAAM,MAAM,MAAM,IAAI;AAC/B;ACzRO,MAAM,SAAqC;AAAA,EAChD;AAAA,IACE,IAAI;AAAA,IACJ,UACEA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAGF,UAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,YAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAc,EAAE,SAAS,EAAE,QAAQ,MAAI;AAAA,YACxC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAGJ,UACE;AAAA,EAAA;AAAA,EAEJ;AAAA,IACE,IAAI;AAAA,IACJ,UACEA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAGF,UAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,YAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAc,EAAE,SAAS,EAAE,QAAQ,MAAI;AAAA,YACxC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAGJ,UACE;AAAA,EAAA;AAAA,EAEJ;AAAA,IACE,IAAI;AAAA,IACJ,UACEA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAGF,UAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,YAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAc,EAAE,SAAS,EAAE,QAAQ,MAAI;AAAA,YACxC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAGJ,UACE;AAAA,EAAA;AAAA,EAEJ;AAAA,IACE,IAAI;AAAA,IACJ,UACEA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAGF,UAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,YAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAc,EAAE,SAAS,EAAE,QAAQ,MAAI;AAAA,YACxC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAGJ,UACE;AAAA,EAAA;AAAA,EAEJ;AAAA,IACE,IAAI;AAAA,IACJ,UACEA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAGF,UAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,YAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAc,EAAE,SAAS,EAAE,QAAQ,MAAI;AAAA,YACxC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAGJ,UACE;AAAA,EAAA;AAEN;"}
|
|
1
|
+
{"version":3,"file":"component.constants-COLayaiY.js","sources":["../src/components/image-slider/component.styles.tsx","../src/hooks/use-image-slider/use.tsx","../src/components/image-slider/component.tsx","../src/components/image-slider/component.constants.tsx"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const SliderImage = styled(motion.div)`\n display: flex;\n position: absolute;\n height: 100%;\n width: 100%;\n touch-action: pan-y;\n &:hover {\n cursor: grab;\n }\n\n &:active {\n cursor: grabbing;\n }\n`;\n\nexport const SliderDot = styled(motion.div)`\n width: 6px;\n height: 6px;\n background-color: ${(props) => props.theme.palette.whiteStandard};\n border-radius: 5px;\n opacity: 0.8;\n cursor: pointer;\n`;\n","import { Button } from '@local/components/button';\nimport { Image } from '@local/components/image';\nimport { ImageSliderProps, SliderDot, SliderImage } 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 { AnimatePresence, PanInfo, Variants } from 'framer-motion';\nimport { FC, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useImageSliderProps } from '.';\n\nexport const useImageSlider = (props: useImageSliderProps) => {\n const { onIndexChange } = props;\n\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const images = useMemo(() => props.images, [props.images]);\n\n const [{ activeImageId, direction }, setActiveImage] = useState({\n activeImageId: images?.[0]?.id ?? null,\n direction: 0,\n });\n const isLengthOne = useMemo(() => images?.length === 1, [images]);\n const isLengthZero = useMemo(() => images?.length === 0, [images]);\n\n const activeImageIndex = useMemo(() => images.findIndex((img) => img.id === activeImageId), [activeImageId, images]);\n\n const swipeToImage = useCallback(\n (swipeDirection: number) => {\n const currentIndex = images.findIndex((img) => img.id === activeImageId);\n const nextIndex = (currentIndex + swipeDirection + images.length) % images.length;\n setActiveImage({ activeImageId: images[nextIndex].id, direction: swipeDirection });\n },\n [activeImageId, images],\n );\n const dragEndHandler = useCallback(\n (dragInfo: PanInfo) => {\n const { offset, velocity } = dragInfo;\n const swipeThreshold = 50;\n const swipePower = Math.abs(offset.x) * velocity.x;\n\n if (swipePower > 500 || offset.x > swipeThreshold) {\n swipeToImage(-1);\n } else if (swipePower < -500 || offset.x < -swipeThreshold) {\n swipeToImage(1);\n }\n },\n [swipeToImage],\n );\n const skipToImage = useCallback(\n (imageId: number) => {\n const currentIndex = images.findIndex((img) => img.id === activeImageId);\n const newIndex = images.findIndex((img) => img.id === imageId);\n if (newIndex === -1 || newIndex === currentIndex) return;\n\n const direction = newIndex > currentIndex ? 1 : -1;\n setActiveImage({ activeImageId: imageId, direction });\n },\n [activeImageId, images],\n );\n\n useEffect(() => {\n if (activeImageId) onIndexChange?.(activeImageId);\n }, [activeImageId, onIndexChange]);\n\n const { add } = useDialog<ComponentHandleAddProps>({\n br: br,\n dragEndHandler: dragEndHandler,\n images: images,\n children: props.children,\n activeImageIndex: activeImageIndex,\n activeImageId: activeImageId,\n swipeToImage: swipeToImage,\n skipToImage: skipToImage,\n direction: direction,\n aspect: props.imageSettings.aspect,\n genre: props.genre,\n size: props.size,\n failedToLoad: props.locales.failedToLoad,\n isLengthOne: isLengthOne,\n propsDialog: {\n borderRadius: br,\n padding: '0',\n background: 'whiteStandard',\n },\n });\n const handleAdd = useCallback(() => {\n add({\n content: (params, remove) => <ComponentHandleAdd params={params} remove={remove} />,\n });\n }, [add]);\n\n return {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd,\n };\n};\nconst sliderVariants: Variants = {\n initial: (direction) => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0,\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: (direction) => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2,\n }),\n};\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04],\n};\n\ntype ComponentHandleAddProps = {\n br?: string;\n dragEndHandler: (dragInfo: PanInfo) => void;\n images: ImageSliderProps['images'];\n children?: ImageSliderProps['children'];\n activeImageIndex: number;\n activeImageId: number | null;\n swipeToImage: (swipeDirection: number) => void;\n skipToImage: (imageId: number) => void;\n direction: number;\n aspect: number;\n failedToLoad: string;\n isLengthOne: boolean;\n} & Pick<ImageSliderProps, 'genre' | 'size'>;\n\nconst ComponentHandleAdd: FC<{\n params?: useDialogProps<ComponentHandleAddProps>;\n remove?: () => void;\n}> = ({ params, remove }) => {\n return (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n aspectRatio: `${params?.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 <AnimatePresence initial={false} custom={params?.direction}>\n <SliderImage\n key={params?.activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: params?.br,\n }}\n custom={params?.direction}\n variants={sliderVariants}\n initial='initial'\n animate='active'\n exit='exit'\n transition={sliderTransition}\n {...(!params?.isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => params?.dragEndHandler(dragInfo),\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={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n src={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {params?.failedToLoad}\n </Typography>\n }\n />\n {(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof params?.children === 'function' ? params?.children?.({ isDialog: true }) : params?.children}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n right: 15,\n },\n }}\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => remove?.()}\n />\n {!params?.isLengthOne ? (\n <>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: 15,\n gap: '8px',\n },\n }}\n >\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(-1)}\n />\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(1)}\n />\n </Stack>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px',\n },\n }}\n >\n {(params?.images ?? [])?.map((i) => (\n <SliderDot\n onClick={() => params?.skipToImage?.(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: params?.activeImageId === i.id ? 1.5 : 1,\n opacity: params?.activeImageId === i.id ? 1 : 0.5,\n }}\n />\n ))}\n </Stack>\n </>\n ) : null}\n </Stack>\n );\n};\n","import { AnimatePresence, Variants } from 'framer-motion';\nimport { FC, useMemo } from 'react';\n\nimport { useImageSlider } from '@local/hooks/use-image-slider';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { ImageSliderProps, SliderDot, SliderImage } from '.';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { Image } from '../image';\nimport { Stack, StackMotion } from '../stack';\nimport { Typography } from '../typography';\n\nexport const ImageSlider: FC<ImageSliderProps> = (props) => {\n const { onIndexChange } = props;\n const images = useMemo(() => props.images, [props.images]);\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd,\n } = useImageSlider({\n genre: props.genre,\n size: props.size,\n images: images,\n imageSettings: props.imageSettings,\n locales: props.locales,\n onIndexChange: onIndexChange,\n children: props.children,\n });\n return (\n <StackMotion\n {...props.propsStack}\n sx={(theme) => ({\n ...props.propsStack?.sx,\n default: {\n borderRadius: br,\n flexDirection: 'column',\n alignItems: 'center',\n overflow: 'hidden',\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).default\n : props.propsStack?.sx.default\n : {}),\n },\n tablet: {\n maxWidth: '95dvw',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).tablet\n : props.propsStack?.sx.tablet\n : {}),\n },\n })}\n >\n {props.isLoading ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n }}\n >\n <Icon size='large' type='loading' primaryColor='blueFocus' name='Line' />\n </Stack>\n ) : !isLengthZero ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n },\n }}\n >\n <AnimatePresence initial={false} custom={direction}>\n <SliderImage\n key={activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: br,\n }}\n custom={direction}\n variants={sliderVariants}\n initial='initial'\n animate='active'\n exit='exit'\n transition={sliderTransition}\n {...(!isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => dragEndHandler(dragInfo),\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 alt={images[activeImageIndex]?.imageSrc}\n src={images[activeImageIndex]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locales.failedToLoad}\n </Typography>\n }\n />\n {images[activeImageIndex]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof props?.children === 'function' ? props?.children?.({ isDialog: false }) : props?.children}\n\n {!isLengthOne && (\n <>\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n left: 5,\n transform: 'translateY(-50%)',\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(-1)}\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n right: 5,\n transform: 'translateY(-50%)',\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(1)}\n />\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px',\n },\n }}\n >\n {images.map((i) => (\n <SliderDot\n onClick={() => skipToImage(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: activeImageId === i.id ? 1.5 : 1,\n opacity: activeImageId === i.id ? 1 : 0.5,\n }}\n />\n ))}\n </Stack>\n </>\n )}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n right: 5,\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Activity',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => handleAdd()}\n />\n </Stack>\n ) : (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n }}\n >\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locales.noImagesAvailable}\n </Typography>\n </Stack>\n )}\n </StackMotion>\n );\n};\nconst sliderVariants: Variants = {\n initial: (direction) => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0,\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: (direction) => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2,\n }),\n};\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04],\n};\n","import 'styled-components';\n\nimport { ImageSliderProps } from '.';\nimport { Button } from '../button';\nimport { Stack } from '../stack';\n\nexport const IMAGES: ImageSliderProps['images'] = [\n {\n id: 0,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://drupal-prod.visitcalifornia.com/sites/default/files/styles/fluid_1920/public/2020-06/VC_PlacesToVisit_LosAngelesCounty_RF_1170794243.jpg.webp?itok=46pJYz8v',\n },\n {\n id: 1,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.unsplash.com/flagged/photo-1575555201693-7cd442b8023f?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bG9zJTIwYW5nZWxlc3xlbnwwfHwwfHx8MA%3D%3D',\n },\n {\n id: 2,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://img.goodfon.com/original/2048x1319/8/29/ssha-kaliforniia-los-andzheles-los-angeles-doma-neboskreby-s.jpg',\n },\n {\n id: 3,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.pexels.com/photos/2231756/pexels-photo-2231756.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',\n },\n {\n id: 4,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.pexels.com/photos/1813157/pexels-photo-1813157.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',\n },\n];\n"],"names":["direction","jsx","sliderVariants","sliderTransition","jsxs","Fragment","_a","_b","_c","_d"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),i=require("framer-motion"),t=require("react"),s=require("./component-DnJo66DS.cjs"),n=require("./component.styles-
|
|
1
|
+
"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),i=require("framer-motion"),t=require("react"),s=require("./component-DnJo66DS.cjs"),n=require("./component.styles-CAN6t4un.cjs"),o=require("styled-components"),a=require("./component-GKvpOWlO.cjs"),l=require("./component-BVnHSTJd.cjs"),d=require("./context.constants-BLQ_1jZI.cjs"),r=require("./theme.global-CcoD5bPP.cjs"),u=require("./component.styles-BKnUDWqO.cjs"),c=o(i.motion.div)`
|
|
2
2
|
display: flex;
|
|
3
3
|
position: absolute;
|
|
4
4
|
height: 100%;
|
|
@@ -19,4 +19,4 @@
|
|
|
19
19
|
opacity: 0.8;
|
|
20
20
|
cursor: pointer;
|
|
21
21
|
`,p={initial:e=>({x:e>0?"100%":"-100%",scale:1,opacity:0}),active:{x:0,scale:1,opacity:1},exit:e=>({x:e>0?"-100%":"100%",scale:1,opacity:.2})},m={duration:.3,ease:[.56,.03,.12,1.04]},g=({params:t,remove:o})=>{var d,r,u,g,h,v,f,j;return e.jsxRuntimeExports.jsxs(a.Stack,{sx:{default:{position:"relative",overflow:"hidden",aspectRatio:2*(null==t?void 0:t.aspect)+" / 2",width:"auto",maxWidth:"70dvw",height:"85dvh",borderRadius:null==t?void 0:t.br},tablet:{maxWidth:"95dvw"}},children:[e.jsxRuntimeExports.jsx(i.AnimatePresence,{initial:!1,custom:null==t?void 0:t.direction,children:e.jsxRuntimeExports.jsxs(c,{style:{overflow:"hidden",borderRadius:null==t?void 0:t.br},custom:null==t?void 0:t.direction,variants:p,initial:"initial",animate:"active",exit:"exit",transition:m,...(null==t?void 0:t.isLengthOne)?{}:{drag:"x",dragConstraints:{left:0,right:0},dragElastic:.5,onDragEnd:(e,i)=>null==t?void 0:t.dragEndHandler(i)},children:[e.jsxRuntimeExports.jsx(n.Image,{sxStack:e=>({default:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.palette.black10,position:"absolute",pointerEvents:"none"}}),isShowBeforeImage:!0,sxImage:{default:{objectFit:"contain"}},alt:null==(r=null==(d=(null==t?void 0:t.images)??[])?void 0:d[(null==t?void 0:t.activeImageIndex)??0])?void 0:r.imageSrc,src:null==(g=null==(u=(null==t?void 0:t.images)??[])?void 0:u[(null==t?void 0:t.activeImageIndex)??0])?void 0:g.imageSrc,componentFallback:e.jsxRuntimeExports.jsx(l.Typography,{sx:{default:{variant:"h6"}},children:null==t?void 0:t.failedToLoad})}),null==(v=null==(h=(null==t?void 0:t.images)??[])?void 0:h[(null==t?void 0:t.activeImageIndex)??0])?void 0:v.children]},null==t?void 0:t.activeImageId)}),"function"==typeof(null==t?void 0:t.children)?null==(f=null==t?void 0:t.children)?void 0:f.call(t,{isDialog:!0}):null==t?void 0:t.children,e.jsxRuntimeExports.jsx(s.Button,{sx:{default:{position:"absolute",bottom:15,right:15}},genre:(null==t?void 0:t.genre)??"product",size:(null==t?void 0:t.size)??"medium",icons:[{type:"id",name:"Arrow4"}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>null==o?void 0:o()}),(null==t?void 0:t.isLengthOne)?null:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs(a.Stack,{sx:{default:{position:"absolute",bottom:15,left:15,gap:"8px"}},children:[e.jsxRuntimeExports.jsx(s.Button,{genre:(null==t?void 0:t.genre)??"product",size:(null==t?void 0:t.size)??"medium",icons:[{type:"id",name:"Arrow4",turn:90}],isWidthAsHeight:!0,isHiddenBorder:!0,isPlaystationEffect:!0,isRadius:!0,onClick:()=>{var e;return null==(e=null==t?void 0:t.swipeToImage)?void 0:e.call(t,-1)}}),e.jsxRuntimeExports.jsx(s.Button,{genre:(null==t?void 0:t.genre)??"product",size:(null==t?void 0:t.size)??"medium",icons:[{type:"id",name:"Arrow4",turn:-90}],isWidthAsHeight:!0,isHiddenBorder:!0,isPlaystationEffect:!0,isRadius:!0,onClick:()=>{var e;return null==(e=null==t?void 0:t.swipeToImage)?void 0:e.call(t,1)}})]}),e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{position:"absolute",bottom:15,left:"50%",transform:"translateX(-50%)",gap:"4px"}},children:null==(j=(null==t?void 0:t.images)??[])?void 0:j.map(i=>e.jsxRuntimeExports.jsx(x,{onClick:()=>{var e;return null==(e=null==t?void 0:t.skipToImage)?void 0:e.call(t,i.id)},initial:!1,animate:{scale:(null==t?void 0:t.activeImageId)===i.id?1.5:1,opacity:(null==t?void 0:t.activeImageId)===i.id?1:.5}},i.id))})]})]})},h={initial:e=>({x:e>0?"100%":"-100%",scale:1,opacity:0}),active:{x:0,scale:1,opacity:1},exit:e=>({x:e>0?"-100%":"100%",scale:1,opacity:.2})},v={duration:.3,ease:[.56,.03,.12,1.04]},f=[{id:0,children:e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{justifyContent:"flex-start",padding:"5px",flexGrow:1}},children:e.jsxRuntimeExports.jsx(s.Button,{isHiddenBorder:!0,isDisabled:!0,genre:"realebail-white",size:"medium",sxTypography:{default:{weight:700}},children:"Los Angeles"})}),imageSrc:"https://drupal-prod.visitcalifornia.com/sites/default/files/styles/fluid_1920/public/2020-06/VC_PlacesToVisit_LosAngelesCounty_RF_1170794243.jpg.webp?itok=46pJYz8v"},{id:1,children:e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{justifyContent:"flex-start",padding:"5px",flexGrow:1}},children:e.jsxRuntimeExports.jsx(s.Button,{isHiddenBorder:!0,isDisabled:!0,genre:"realebail-white",size:"medium",sxTypography:{default:{weight:700}},children:"Los Angeles"})}),imageSrc:"https://images.unsplash.com/flagged/photo-1575555201693-7cd442b8023f?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bG9zJTIwYW5nZWxlc3xlbnwwfHwwfHx8MA%3D%3D"},{id:2,children:e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{justifyContent:"flex-start",padding:"5px",flexGrow:1}},children:e.jsxRuntimeExports.jsx(s.Button,{isHiddenBorder:!0,isDisabled:!0,genre:"realebail-white",size:"medium",sxTypography:{default:{weight:700}},children:"Los Angeles"})}),imageSrc:"https://img.goodfon.com/original/2048x1319/8/29/ssha-kaliforniia-los-andzheles-los-angeles-doma-neboskreby-s.jpg"},{id:3,children:e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{justifyContent:"flex-start",padding:"5px",flexGrow:1}},children:e.jsxRuntimeExports.jsx(s.Button,{isHiddenBorder:!0,isDisabled:!0,genre:"realebail-white",size:"medium",sxTypography:{default:{weight:700}},children:"Los Angeles"})}),imageSrc:"https://images.pexels.com/photos/2231756/pexels-photo-2231756.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"},{id:4,children:e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{justifyContent:"flex-start",padding:"5px",flexGrow:1}},children:e.jsxRuntimeExports.jsx(s.Button,{isHiddenBorder:!0,isDisabled:!0,genre:"realebail-white",size:"medium",sxTypography:{default:{weight:700}},children:"Los Angeles"})}),imageSrc:"https://images.pexels.com/photos/1813157/pexels-photo-1813157.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"}];exports.IMAGES=f,exports.ImageSlider=o=>{var p,m,f,j;const{onIndexChange:b}=o,y=t.useMemo(()=>o.images,[o.images]),I=t.useMemo(()=>r.KEY_SIZE_DATA[o.size],[o.size]),w=t.useMemo(()=>`${I.radius}px`,[I.radius]),{isLengthZero:E,direction:R,activeImageId:k,isLengthOne:S,dragEndHandler:A,activeImageIndex:C,swipeToImage:z,skipToImage:T,handleAdd:B}=(i=>{var s;const{onIndexChange:n}=i,o=t.useMemo(()=>r.KEY_SIZE_DATA[i.size],[i.size]),a=t.useMemo(()=>`${o.radius}px`,[o.radius]),l=t.useMemo(()=>i.images,[i.images]),[{activeImageId:u,direction:c},x]=t.useState({activeImageId:(null==(s=null==l?void 0:l[0])?void 0:s.id)??null,direction:0}),p=t.useMemo(()=>1===(null==l?void 0:l.length),[l]),m=t.useMemo(()=>0===(null==l?void 0:l.length),[l]),h=t.useMemo(()=>l.findIndex(e=>e.id===u),[u,l]),v=t.useCallback(e=>{const i=(l.findIndex(e=>e.id===u)+e+l.length)%l.length;x({activeImageId:l[i].id,direction:e})},[u,l]),f=t.useCallback(e=>{const{offset:i,velocity:t}=e,s=Math.abs(i.x)*t.x;s>500||i.x>50?v(-1):(s<-500||i.x<-50)&&v(1)},[v]),j=t.useCallback(e=>{const i=l.findIndex(e=>e.id===u),t=l.findIndex(i=>i.id===e);-1!==t&&t!==i&&x({activeImageId:e,direction:t>i?1:-1})},[u,l]);t.useEffect(()=>{u&&(null==n||n(u))},[u,n]);const{add:b}=d.useDialog({br:a,dragEndHandler:f,images:l,children:i.children,activeImageIndex:h,activeImageId:u,swipeToImage:v,skipToImage:j,direction:c,aspect:i.imageSettings.aspect,genre:i.genre,size:i.size,failedToLoad:i.locales.failedToLoad,isLengthOne:p,propsDialog:{borderRadius:a,padding:"0",background:"whiteStandard"}}),y=t.useCallback(()=>{b({content:(i,t)=>e.jsxRuntimeExports.jsx(g,{params:i,remove:t})})},[b]);return{isLengthZero:m,direction:c,activeImageId:u,isLengthOne:p,dragEndHandler:f,activeImageIndex:h,swipeToImage:v,skipToImage:j,handleAdd:y}})({genre:o.genre,size:o.size,images:y,imageSettings:o.imageSettings,locales:o.locales,onIndexChange:b,children:o.children});return e.jsxRuntimeExports.jsx(a.StackMotion,{...o.propsStack,sx:e=>{var i,t,s,n,a,l,d,r,u;return{...null==(i=o.propsStack)?void 0:i.sx,default:{borderRadius:w,flexDirection:"column",alignItems:"center",overflow:"hidden",width:"auto",maxWidth:"70dvw",height:"85dvh",...(null==(t=o.propsStack)?void 0:t.sx)?"function"==typeof(null==(s=o.propsStack)?void 0:s.sx)?null==(n=o.propsStack)?void 0:n.sx(e).default:null==(a=o.propsStack)?void 0:a.sx.default:{}},tablet:{maxWidth:"95dvw",...(null==(l=o.propsStack)?void 0:l.sx)?"function"==typeof(null==(d=o.propsStack)?void 0:d.sx)?null==(r=o.propsStack)?void 0:r.sx(e).tablet:null==(u=o.propsStack)?void 0:u.sx.tablet:{}}}},children:o.isLoading?e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{width:"100%",height:"100%",position:"relative",overflow:"hidden",display:"flex",alignItems:"center",justifyContent:"center"}},children:e.jsxRuntimeExports.jsx(u.Icon,{size:"large",type:"loading",primaryColor:"blueFocus",name:"Line"})}):E?e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{width:"100%",height:"100%",position:"relative",overflow:"hidden",display:"flex",alignItems:"center",justifyContent:"center"}},children:e.jsxRuntimeExports.jsx(l.Typography,{sx:{default:{variant:"h6"}},children:o.locales.noImagesAvailable})}):e.jsxRuntimeExports.jsxs(a.Stack,{sx:{default:{width:"100%",height:"100%",position:"relative",overflow:"hidden"}},children:[e.jsxRuntimeExports.jsx(i.AnimatePresence,{initial:!1,custom:R,children:e.jsxRuntimeExports.jsxs(c,{style:{overflow:"hidden",borderRadius:w},custom:R,variants:h,initial:"initial",animate:"active",exit:"exit",transition:v,...S?{}:{drag:"x",dragConstraints:{left:0,right:0},dragElastic:.5,onDragEnd:(e,i)=>A(i)},children:[e.jsxRuntimeExports.jsx(n.Image,{sxStack:e=>({default:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.palette.black10,position:"absolute",pointerEvents:"none"}}),alt:null==(p=y[C])?void 0:p.imageSrc,src:null==(m=y[C])?void 0:m.imageSrc,componentFallback:e.jsxRuntimeExports.jsx(l.Typography,{sx:{default:{variant:"h6"}},children:o.locales.failedToLoad})}),null==(f=y[C])?void 0:f.children]},k)}),"function"==typeof(null==o?void 0:o.children)?null==(j=null==o?void 0:o.children)?void 0:j.call(o,{isDialog:!1}):null==o?void 0:o.children,!S&&e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(s.Button,{sx:{default:{position:"absolute",top:"50%",left:5,transform:"translateY(-50%)"}},genre:o.genre,size:o.size,icons:[{type:"id",name:"Arrow4",turn:90}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>z(-1)}),e.jsxRuntimeExports.jsx(s.Button,{sx:{default:{position:"absolute",top:"50%",right:5,transform:"translateY(-50%)"}},genre:o.genre,size:o.size,icons:[{type:"id",name:"Arrow4",turn:-90}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>z(1)}),e.jsxRuntimeExports.jsx(a.Stack,{sx:{default:{position:"absolute",bottom:5,left:"50%",transform:"translateX(-50%)",gap:"4px"}},children:y.map(i=>e.jsxRuntimeExports.jsx(x,{onClick:()=>T(i.id),initial:!1,animate:{scale:k===i.id?1.5:1,opacity:k===i.id?1:.5}},i.id))})]}),e.jsxRuntimeExports.jsx(s.Button,{sx:{default:{position:"absolute",bottom:5,right:5}},genre:o.genre,size:o.size,icons:[{type:"id",name:"Activity"}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>B()})]})})},exports.SliderDot=x,exports.SliderImage=c;
|
|
22
|
-
//# sourceMappingURL=component.constants-
|
|
22
|
+
//# sourceMappingURL=component.constants-eYn_2hvO.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.constants-CpRgeAIu.cjs","sources":["../src/components/image-slider/component.styles.tsx","../src/hooks/use-image-slider/use.tsx","../src/components/image-slider/component.tsx","../src/components/image-slider/component.constants.tsx"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const SliderImage = styled(motion.div)`\n display: flex;\n position: absolute;\n height: 100%;\n width: 100%;\n touch-action: pan-y;\n &:hover {\n cursor: grab;\n }\n\n &:active {\n cursor: grabbing;\n }\n`;\n\nexport const SliderDot = styled(motion.div)`\n width: 6px;\n height: 6px;\n background-color: ${(props) => props.theme.palette.whiteStandard};\n border-radius: 5px;\n opacity: 0.8;\n cursor: pointer;\n`;\n","import { Button } from '@local/components/button';\nimport { Image } from '@local/components/image';\nimport { ImageSliderProps, SliderDot, SliderImage } 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 { AnimatePresence, PanInfo, Variants } from 'framer-motion';\nimport { FC, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useImageSliderProps } from '.';\n\nexport const useImageSlider = (props: useImageSliderProps) => {\n const { onIndexChange } = props;\n\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const images = useMemo(() => props.images, [props.images]);\n\n const [{ activeImageId, direction }, setActiveImage] = useState({\n activeImageId: images?.[0]?.id ?? null,\n direction: 0,\n });\n const isLengthOne = useMemo(() => images?.length === 1, [images]);\n const isLengthZero = useMemo(() => images?.length === 0, [images]);\n\n const activeImageIndex = useMemo(() => images.findIndex((img) => img.id === activeImageId), [activeImageId, images]);\n\n const swipeToImage = useCallback(\n (swipeDirection: number) => {\n const currentIndex = images.findIndex((img) => img.id === activeImageId);\n const nextIndex = (currentIndex + swipeDirection + images.length) % images.length;\n setActiveImage({ activeImageId: images[nextIndex].id, direction: swipeDirection });\n },\n [activeImageId, images],\n );\n const dragEndHandler = useCallback(\n (dragInfo: PanInfo) => {\n const { offset, velocity } = dragInfo;\n const swipeThreshold = 50;\n const swipePower = Math.abs(offset.x) * velocity.x;\n\n if (swipePower > 500 || offset.x > swipeThreshold) {\n swipeToImage(-1);\n } else if (swipePower < -500 || offset.x < -swipeThreshold) {\n swipeToImage(1);\n }\n },\n [swipeToImage],\n );\n const skipToImage = useCallback(\n (imageId: number) => {\n const currentIndex = images.findIndex((img) => img.id === activeImageId);\n const newIndex = images.findIndex((img) => img.id === imageId);\n if (newIndex === -1 || newIndex === currentIndex) return;\n\n const direction = newIndex > currentIndex ? 1 : -1;\n setActiveImage({ activeImageId: imageId, direction });\n },\n [activeImageId, images],\n );\n\n useEffect(() => {\n if (activeImageId) onIndexChange?.(activeImageId);\n }, [activeImageId, onIndexChange]);\n\n const { add } = useDialog<ComponentHandleAddProps>({\n br: br,\n dragEndHandler: dragEndHandler,\n images: images,\n children: props.children,\n activeImageIndex: activeImageIndex,\n activeImageId: activeImageId,\n swipeToImage: swipeToImage,\n skipToImage: skipToImage,\n direction: direction,\n aspect: props.imageSettings.aspect,\n genre: props.genre,\n size: props.size,\n failedToLoad: props.locales.failedToLoad,\n isLengthOne: isLengthOne,\n propsDialog: {\n borderRadius: br,\n padding: '0',\n background: 'whiteStandard',\n },\n });\n const handleAdd = useCallback(() => {\n add({\n content: (params, remove) => <ComponentHandleAdd params={params} remove={remove} />,\n });\n }, [add]);\n\n return {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd,\n };\n};\nconst sliderVariants: Variants = {\n initial: (direction) => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0,\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: (direction) => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2,\n }),\n};\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04],\n};\n\ntype ComponentHandleAddProps = {\n br?: string;\n dragEndHandler: (dragInfo: PanInfo) => void;\n images: ImageSliderProps['images'];\n children?: ImageSliderProps['children'];\n activeImageIndex: number;\n activeImageId: number | null;\n swipeToImage: (swipeDirection: number) => void;\n skipToImage: (imageId: number) => void;\n direction: number;\n aspect: number;\n failedToLoad: string;\n isLengthOne: boolean;\n} & Pick<ImageSliderProps, 'genre' | 'size'>;\n\nconst ComponentHandleAdd: FC<{\n params?: useDialogProps<ComponentHandleAddProps>;\n remove?: () => void;\n}> = ({ params, remove }) => {\n return (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n aspectRatio: `${params?.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 <AnimatePresence initial={false} custom={params?.direction}>\n <SliderImage\n key={params?.activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: params?.br,\n }}\n custom={params?.direction}\n variants={sliderVariants}\n initial='initial'\n animate='active'\n exit='exit'\n transition={sliderTransition}\n {...(!params?.isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => params?.dragEndHandler(dragInfo),\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={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n src={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {params?.failedToLoad}\n </Typography>\n }\n />\n {(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof params?.children === 'function' ? params?.children?.({ isDialog: true }) : params?.children}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n right: 15,\n },\n }}\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => remove?.()}\n />\n {!params?.isLengthOne ? (\n <>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: 15,\n gap: '8px',\n },\n }}\n >\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(-1)}\n />\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(1)}\n />\n </Stack>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px',\n },\n }}\n >\n {(params?.images ?? [])?.map((i) => (\n <SliderDot\n onClick={() => params?.skipToImage?.(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: params?.activeImageId === i.id ? 1.5 : 1,\n opacity: params?.activeImageId === i.id ? 1 : 0.5,\n }}\n />\n ))}\n </Stack>\n </>\n ) : null}\n </Stack>\n );\n};\n","import { AnimatePresence, Variants } from 'framer-motion';\nimport { FC, useMemo } from 'react';\n\nimport { useImageSlider } from '@local/hooks/use-image-slider';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { ImageSliderProps, SliderDot, SliderImage } from '.';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { Image } from '../image';\nimport { Stack, StackMotion } from '../stack';\nimport { Typography } from '../typography';\n\nexport const ImageSlider: FC<ImageSliderProps> = (props) => {\n const { onIndexChange } = props;\n const images = useMemo(() => props.images, [props.images]);\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd,\n } = useImageSlider({\n genre: props.genre,\n size: props.size,\n images: images,\n imageSettings: props.imageSettings,\n locales: props.locales,\n onIndexChange: onIndexChange,\n children: props.children,\n });\n return (\n <StackMotion\n {...props.propsStack}\n sx={(theme) => ({\n ...props.propsStack?.sx,\n default: {\n borderRadius: br,\n flexDirection: 'column',\n alignItems: 'center',\n overflow: 'hidden',\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).default\n : props.propsStack?.sx.default\n : {}),\n },\n tablet: {\n maxWidth: '95dvw',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).tablet\n : props.propsStack?.sx.tablet\n : {}),\n },\n })}\n >\n {props.isLoading ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n }}\n >\n <Icon size='large' type='loading' primaryColor='blueFocus' name='Line' />\n </Stack>\n ) : !isLengthZero ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n },\n }}\n >\n <AnimatePresence initial={false} custom={direction}>\n <SliderImage\n key={activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: br,\n }}\n custom={direction}\n variants={sliderVariants}\n initial='initial'\n animate='active'\n exit='exit'\n transition={sliderTransition}\n {...(!isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => dragEndHandler(dragInfo),\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 alt={images[activeImageIndex]?.imageSrc}\n src={images[activeImageIndex]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locales.failedToLoad}\n </Typography>\n }\n />\n {images[activeImageIndex]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof props?.children === 'function' ? props?.children?.({ isDialog: false }) : props?.children}\n\n {!isLengthOne && (\n <>\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n left: 5,\n transform: 'translateY(-50%)',\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(-1)}\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n right: 5,\n transform: 'translateY(-50%)',\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(1)}\n />\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px',\n },\n }}\n >\n {images.map((i) => (\n <SliderDot\n onClick={() => skipToImage(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: activeImageId === i.id ? 1.5 : 1,\n opacity: activeImageId === i.id ? 1 : 0.5,\n }}\n />\n ))}\n </Stack>\n </>\n )}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n right: 5,\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Activity',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => handleAdd()}\n />\n </Stack>\n ) : (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n }}\n >\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locales.noImagesAvailable}\n </Typography>\n </Stack>\n )}\n </StackMotion>\n );\n};\nconst sliderVariants: Variants = {\n initial: (direction) => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0,\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: (direction) => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2,\n }),\n};\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04],\n};\n","import 'styled-components';\n\nimport { ImageSliderProps } from '.';\nimport { Button } from '../button';\nimport { Stack } from '../stack';\n\nexport const IMAGES: ImageSliderProps['images'] = [\n {\n id: 0,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://drupal-prod.visitcalifornia.com/sites/default/files/styles/fluid_1920/public/2020-06/VC_PlacesToVisit_LosAngelesCounty_RF_1170794243.jpg.webp?itok=46pJYz8v',\n },\n {\n id: 1,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.unsplash.com/flagged/photo-1575555201693-7cd442b8023f?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bG9zJTIwYW5nZWxlc3xlbnwwfHwwfHx8MA%3D%3D',\n },\n {\n id: 2,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://img.goodfon.com/original/2048x1319/8/29/ssha-kaliforniia-los-andzheles-los-angeles-doma-neboskreby-s.jpg',\n },\n {\n id: 3,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.pexels.com/photos/2231756/pexels-photo-2231756.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',\n },\n {\n id: 4,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.pexels.com/photos/1813157/pexels-photo-1813157.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',\n },\n];\n"],"names":["SliderImage","styled","motion","div","SliderDot","props","theme","palette","whiteStandard","sliderVariants","initial","direction","x","scale","opacity","active","exit","sliderTransition","duration","ease","ComponentHandleAdd","params","remove","jsxs","Stack","sx","default","position","overflow","aspectRatio","aspect","width","maxWidth","height","borderRadius","br","tablet","children","jsx","AnimatePresence","custom","style","variants","animate","transition","isLengthOne","drag","dragConstraints","left","right","dragElastic","onDragEnd","_","dragInfo","dragEndHandler","Image","sxStack","alignItems","justifyContent","backgroundColor","black10","pointerEvents","isShowBeforeImage","sxImage","objectFit","alt","_b","images","_a","activeImageIndex","imageSrc","src","_d","_c","componentFallback","Typography","variant","failedToLoad","_f","_e","activeImageId","_g","call","isDialog","Button","bottom","genre","size","icons","type","name","isWidthAsHeight","isHiddenBorder","isRadius","onClick","Fragment","gap","turn","isPlaystationEffect","swipeToImage","transform","map","i","skipToImage","id","IMAGES","padding","flexGrow","isDisabled","sxTypography","weight","onIndexChange","useMemo","KEY_SIZE_DATA","radius","isLengthZero","handleAdd","setActiveImage","useState","length","findIndex","img","useCallback","swipeDirection","nextIndex","offset","velocity","swipePower","Math","abs","imageId","currentIndex","newIndex","useEffect","add","useDialog","imageSettings","locales","propsDialog","background","content","useImageSlider","StackMotion","propsStack","flexDirection","_h","_i","isLoading","display","Icon","primaryColor","noImagesAvailable","top"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"component.constants-eYn_2hvO.cjs","sources":["../src/components/image-slider/component.styles.tsx","../src/hooks/use-image-slider/use.tsx","../src/components/image-slider/component.tsx","../src/components/image-slider/component.constants.tsx"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const SliderImage = styled(motion.div)`\n display: flex;\n position: absolute;\n height: 100%;\n width: 100%;\n touch-action: pan-y;\n &:hover {\n cursor: grab;\n }\n\n &:active {\n cursor: grabbing;\n }\n`;\n\nexport const SliderDot = styled(motion.div)`\n width: 6px;\n height: 6px;\n background-color: ${(props) => props.theme.palette.whiteStandard};\n border-radius: 5px;\n opacity: 0.8;\n cursor: pointer;\n`;\n","import { Button } from '@local/components/button';\nimport { Image } from '@local/components/image';\nimport { ImageSliderProps, SliderDot, SliderImage } 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 { AnimatePresence, PanInfo, Variants } from 'framer-motion';\nimport { FC, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useImageSliderProps } from '.';\n\nexport const useImageSlider = (props: useImageSliderProps) => {\n const { onIndexChange } = props;\n\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const images = useMemo(() => props.images, [props.images]);\n\n const [{ activeImageId, direction }, setActiveImage] = useState({\n activeImageId: images?.[0]?.id ?? null,\n direction: 0,\n });\n const isLengthOne = useMemo(() => images?.length === 1, [images]);\n const isLengthZero = useMemo(() => images?.length === 0, [images]);\n\n const activeImageIndex = useMemo(() => images.findIndex((img) => img.id === activeImageId), [activeImageId, images]);\n\n const swipeToImage = useCallback(\n (swipeDirection: number) => {\n const currentIndex = images.findIndex((img) => img.id === activeImageId);\n const nextIndex = (currentIndex + swipeDirection + images.length) % images.length;\n setActiveImage({ activeImageId: images[nextIndex].id, direction: swipeDirection });\n },\n [activeImageId, images],\n );\n const dragEndHandler = useCallback(\n (dragInfo: PanInfo) => {\n const { offset, velocity } = dragInfo;\n const swipeThreshold = 50;\n const swipePower = Math.abs(offset.x) * velocity.x;\n\n if (swipePower > 500 || offset.x > swipeThreshold) {\n swipeToImage(-1);\n } else if (swipePower < -500 || offset.x < -swipeThreshold) {\n swipeToImage(1);\n }\n },\n [swipeToImage],\n );\n const skipToImage = useCallback(\n (imageId: number) => {\n const currentIndex = images.findIndex((img) => img.id === activeImageId);\n const newIndex = images.findIndex((img) => img.id === imageId);\n if (newIndex === -1 || newIndex === currentIndex) return;\n\n const direction = newIndex > currentIndex ? 1 : -1;\n setActiveImage({ activeImageId: imageId, direction });\n },\n [activeImageId, images],\n );\n\n useEffect(() => {\n if (activeImageId) onIndexChange?.(activeImageId);\n }, [activeImageId, onIndexChange]);\n\n const { add } = useDialog<ComponentHandleAddProps>({\n br: br,\n dragEndHandler: dragEndHandler,\n images: images,\n children: props.children,\n activeImageIndex: activeImageIndex,\n activeImageId: activeImageId,\n swipeToImage: swipeToImage,\n skipToImage: skipToImage,\n direction: direction,\n aspect: props.imageSettings.aspect,\n genre: props.genre,\n size: props.size,\n failedToLoad: props.locales.failedToLoad,\n isLengthOne: isLengthOne,\n propsDialog: {\n borderRadius: br,\n padding: '0',\n background: 'whiteStandard',\n },\n });\n const handleAdd = useCallback(() => {\n add({\n content: (params, remove) => <ComponentHandleAdd params={params} remove={remove} />,\n });\n }, [add]);\n\n return {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd,\n };\n};\nconst sliderVariants: Variants = {\n initial: (direction) => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0,\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: (direction) => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2,\n }),\n};\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04],\n};\n\ntype ComponentHandleAddProps = {\n br?: string;\n dragEndHandler: (dragInfo: PanInfo) => void;\n images: ImageSliderProps['images'];\n children?: ImageSliderProps['children'];\n activeImageIndex: number;\n activeImageId: number | null;\n swipeToImage: (swipeDirection: number) => void;\n skipToImage: (imageId: number) => void;\n direction: number;\n aspect: number;\n failedToLoad: string;\n isLengthOne: boolean;\n} & Pick<ImageSliderProps, 'genre' | 'size'>;\n\nconst ComponentHandleAdd: FC<{\n params?: useDialogProps<ComponentHandleAddProps>;\n remove?: () => void;\n}> = ({ params, remove }) => {\n return (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n aspectRatio: `${params?.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 <AnimatePresence initial={false} custom={params?.direction}>\n <SliderImage\n key={params?.activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: params?.br,\n }}\n custom={params?.direction}\n variants={sliderVariants}\n initial='initial'\n animate='active'\n exit='exit'\n transition={sliderTransition}\n {...(!params?.isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => params?.dragEndHandler(dragInfo),\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={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n src={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {params?.failedToLoad}\n </Typography>\n }\n />\n {(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof params?.children === 'function' ? params?.children?.({ isDialog: true }) : params?.children}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n right: 15,\n },\n }}\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => remove?.()}\n />\n {!params?.isLengthOne ? (\n <>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: 15,\n gap: '8px',\n },\n }}\n >\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(-1)}\n />\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(1)}\n />\n </Stack>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px',\n },\n }}\n >\n {(params?.images ?? [])?.map((i) => (\n <SliderDot\n onClick={() => params?.skipToImage?.(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: params?.activeImageId === i.id ? 1.5 : 1,\n opacity: params?.activeImageId === i.id ? 1 : 0.5,\n }}\n />\n ))}\n </Stack>\n </>\n ) : null}\n </Stack>\n );\n};\n","import { AnimatePresence, Variants } from 'framer-motion';\nimport { FC, useMemo } from 'react';\n\nimport { useImageSlider } from '@local/hooks/use-image-slider';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { ImageSliderProps, SliderDot, SliderImage } from '.';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { Image } from '../image';\nimport { Stack, StackMotion } from '../stack';\nimport { Typography } from '../typography';\n\nexport const ImageSlider: FC<ImageSliderProps> = (props) => {\n const { onIndexChange } = props;\n const images = useMemo(() => props.images, [props.images]);\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd,\n } = useImageSlider({\n genre: props.genre,\n size: props.size,\n images: images,\n imageSettings: props.imageSettings,\n locales: props.locales,\n onIndexChange: onIndexChange,\n children: props.children,\n });\n return (\n <StackMotion\n {...props.propsStack}\n sx={(theme) => ({\n ...props.propsStack?.sx,\n default: {\n borderRadius: br,\n flexDirection: 'column',\n alignItems: 'center',\n overflow: 'hidden',\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).default\n : props.propsStack?.sx.default\n : {}),\n },\n tablet: {\n maxWidth: '95dvw',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).tablet\n : props.propsStack?.sx.tablet\n : {}),\n },\n })}\n >\n {props.isLoading ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n }}\n >\n <Icon size='large' type='loading' primaryColor='blueFocus' name='Line' />\n </Stack>\n ) : !isLengthZero ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n },\n }}\n >\n <AnimatePresence initial={false} custom={direction}>\n <SliderImage\n key={activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: br,\n }}\n custom={direction}\n variants={sliderVariants}\n initial='initial'\n animate='active'\n exit='exit'\n transition={sliderTransition}\n {...(!isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => dragEndHandler(dragInfo),\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 alt={images[activeImageIndex]?.imageSrc}\n src={images[activeImageIndex]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locales.failedToLoad}\n </Typography>\n }\n />\n {images[activeImageIndex]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof props?.children === 'function' ? props?.children?.({ isDialog: false }) : props?.children}\n\n {!isLengthOne && (\n <>\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n left: 5,\n transform: 'translateY(-50%)',\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(-1)}\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n right: 5,\n transform: 'translateY(-50%)',\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(1)}\n />\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px',\n },\n }}\n >\n {images.map((i) => (\n <SliderDot\n onClick={() => skipToImage(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: activeImageId === i.id ? 1.5 : 1,\n opacity: activeImageId === i.id ? 1 : 0.5,\n }}\n />\n ))}\n </Stack>\n </>\n )}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n right: 5,\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Activity',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => handleAdd()}\n />\n </Stack>\n ) : (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n }}\n >\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locales.noImagesAvailable}\n </Typography>\n </Stack>\n )}\n </StackMotion>\n );\n};\nconst sliderVariants: Variants = {\n initial: (direction) => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0,\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: (direction) => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2,\n }),\n};\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04],\n};\n","import 'styled-components';\n\nimport { ImageSliderProps } from '.';\nimport { Button } from '../button';\nimport { Stack } from '../stack';\n\nexport const IMAGES: ImageSliderProps['images'] = [\n {\n id: 0,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://drupal-prod.visitcalifornia.com/sites/default/files/styles/fluid_1920/public/2020-06/VC_PlacesToVisit_LosAngelesCounty_RF_1170794243.jpg.webp?itok=46pJYz8v',\n },\n {\n id: 1,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.unsplash.com/flagged/photo-1575555201693-7cd442b8023f?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bG9zJTIwYW5nZWxlc3xlbnwwfHwwfHx8MA%3D%3D',\n },\n {\n id: 2,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://img.goodfon.com/original/2048x1319/8/29/ssha-kaliforniia-los-andzheles-los-angeles-doma-neboskreby-s.jpg',\n },\n {\n id: 3,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.pexels.com/photos/2231756/pexels-photo-2231756.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',\n },\n {\n id: 4,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.pexels.com/photos/1813157/pexels-photo-1813157.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',\n },\n];\n"],"names":["SliderImage","styled","motion","div","SliderDot","props","theme","palette","whiteStandard","sliderVariants","initial","direction","x","scale","opacity","active","exit","sliderTransition","duration","ease","ComponentHandleAdd","params","remove","jsxs","Stack","sx","default","position","overflow","aspectRatio","aspect","width","maxWidth","height","borderRadius","br","tablet","children","jsx","AnimatePresence","custom","style","variants","animate","transition","isLengthOne","drag","dragConstraints","left","right","dragElastic","onDragEnd","_","dragInfo","dragEndHandler","Image","sxStack","alignItems","justifyContent","backgroundColor","black10","pointerEvents","isShowBeforeImage","sxImage","objectFit","alt","_b","images","_a","activeImageIndex","imageSrc","src","_d","_c","componentFallback","Typography","variant","failedToLoad","_f","_e","activeImageId","_g","call","isDialog","Button","bottom","genre","size","icons","type","name","isWidthAsHeight","isHiddenBorder","isRadius","onClick","Fragment","gap","turn","isPlaystationEffect","swipeToImage","transform","map","i","skipToImage","id","IMAGES","padding","flexGrow","isDisabled","sxTypography","weight","onIndexChange","useMemo","KEY_SIZE_DATA","radius","isLengthZero","handleAdd","setActiveImage","useState","length","findIndex","img","useCallback","swipeDirection","nextIndex","offset","velocity","swipePower","Math","abs","imageId","currentIndex","newIndex","useEffect","add","useDialog","imageSettings","locales","propsDialog","background","content","useImageSlider","StackMotion","propsStack","flexDirection","_h","_i","isLoading","display","Icon","primaryColor","noImagesAvailable","top"],"mappings":"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"}
|
|
@@ -2,9 +2,9 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
|
|
|
2
2
|
import { a as Skeleton } from "./area-sDVSuS3G.js";
|
|
3
3
|
import { b as Stack } from "./component-mzzOCXSx.js";
|
|
4
4
|
import { useState, useEffect } from "react";
|
|
5
|
+
import styled, { useTheme } from "styled-components";
|
|
5
6
|
import { b as addTransition } from "./style-RL73t3JD.js";
|
|
6
7
|
import { a as addSX } from "./style-plT9Ah7t.js";
|
|
7
|
-
import styled from "styled-components";
|
|
8
8
|
const Image = (props) => {
|
|
9
9
|
const [isPending, setIsPending] = useState(true);
|
|
10
10
|
const [isError, setIsError] = useState(false);
|
|
@@ -36,11 +36,12 @@ const Image = (props) => {
|
|
|
36
36
|
setIsError(false);
|
|
37
37
|
};
|
|
38
38
|
}, [props.src]);
|
|
39
|
+
const theme = useTheme();
|
|
40
|
+
const { default: defaultSx, ...rest } = (props == null ? void 0 : props.sxStack) ? typeof (props == null ? void 0 : props.sxStack) === "function" ? props.sxStack(theme) : props.sxStack : {};
|
|
39
41
|
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
40
42
|
Stack,
|
|
41
43
|
{
|
|
42
|
-
sx:
|
|
43
|
-
...props == null ? void 0 : props.sxStack,
|
|
44
|
+
sx: {
|
|
44
45
|
default: {
|
|
45
46
|
position: "relative",
|
|
46
47
|
overflow: "hidden",
|
|
@@ -60,9 +61,10 @@ const Image = (props) => {
|
|
|
60
61
|
zIndex: 0
|
|
61
62
|
}
|
|
62
63
|
} : {},
|
|
63
|
-
...
|
|
64
|
-
}
|
|
65
|
-
|
|
64
|
+
...defaultSx
|
|
65
|
+
},
|
|
66
|
+
...rest
|
|
67
|
+
},
|
|
66
68
|
children: [
|
|
67
69
|
!isError ? props.componentLoading || isPending ? /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
68
70
|
Skeleton,
|
|
@@ -95,4 +97,4 @@ export {
|
|
|
95
97
|
Image as I,
|
|
96
98
|
ImageIMG as a
|
|
97
99
|
};
|
|
98
|
-
//# sourceMappingURL=component.styles-
|
|
100
|
+
//# sourceMappingURL=component.styles-BYVYSgCZ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.styles-BYVYSgCZ.js","sources":["../src/components/image/component.tsx","../src/components/image/component.styles.tsx"],"sourcesContent":["import { Skeleton } from '@local/areas/skeleton';\nimport { Stack } from '@local/components/stack';\n\nimport { FC, useEffect, useState } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { ImageIMG, ImageProps } from '.';\n\nexport const Image: FC<ImageProps> = (props) => {\n const [isPending, setIsPending] = useState(true);\n const [isError, setIsError] = useState(false);\n\n useEffect(() => {\n if (!props.src) return;\n\n const img = new (window.Image as { new (width?: number, height?: number): HTMLImageElement })();\n\n img.onload = () => {\n setIsPending(false);\n setIsError(false);\n };\n\n img.onerror = () => {\n setIsPending(false);\n setIsError(true);\n };\n\n img.src = props.src;\n\n if (img.complete) {\n if (img.naturalWidth > 0) {\n setIsPending(false);\n setIsError(false);\n } else {\n setIsPending(false);\n setIsError(true);\n }\n }\n\n return () => {\n img.onload = null;\n img.onerror = null;\n setIsPending(true);\n setIsError(false);\n };\n }, [props.src]);\n const theme = useTheme();\n const { default: defaultSx, ...rest } = props?.sxStack\n ? typeof props?.sxStack === 'function'\n ? props.sxStack(theme)\n : props.sxStack\n : {};\n\n return (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n ...(props.isShowBeforeImage\n ? {\n '&::before': {\n width: '100%',\n height: '100%',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n backgroundImage: `url(${props.src})`,\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n filter: 'blur(20px)',\n transform: 'scale(1.1)',\n zIndex: 0,\n },\n }\n : {}),\n ...defaultSx,\n },\n ...rest,\n }}\n >\n {!isError ? (\n props.componentLoading || isPending ? (\n <Skeleton\n visible\n sx={{\n default: {\n width: '100%',\n height: '100%',\n },\n }}\n />\n ) : null\n ) : null}\n {!isError && (\n <ImageIMG loading='lazy' $isPending={isPending} src={props.src} alt={props.alt} $sx={props.sxImage} />\n )}\n {isError ? props.componentFallback || null : null}\n </Stack>\n );\n};\n","import { addTransition } from '@local/styles/add';\nimport { addSX } from '@local/styles/sx';\n\nimport styled from 'styled-components';\n\nimport { ImageIMGProps } from '.';\n\nexport const ImageIMG = styled.img<ImageIMGProps>`\n position: absolute;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: ${(props) => (props.$isPending ? 0 : 1)};\n ${addTransition};\n ${addSX};\n`;\n"],"names":["jsxs","jsx"],"mappings":";;;;;;;AAQO,MAAM,QAAwB,CAAC,UAAU;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,YAAU,MAAM;AACd,QAAI,CAAC,MAAM,IAAK;AAEhB,UAAM,MAAM,IAAK,OAAO,MAAA;AAExB,QAAI,SAAS,MAAM;AACjB,mBAAa,KAAK;AAClB,iBAAW,KAAK;AAAA,IAAA;AAGlB,QAAI,UAAU,MAAM;AAClB,mBAAa,KAAK;AAClB,iBAAW,IAAI;AAAA,IAAA;AAGjB,QAAI,MAAM,MAAM;AAEhB,QAAI,IAAI,UAAU;AAChB,UAAI,IAAI,eAAe,GAAG;AACxB,qBAAa,KAAK;AAClB,mBAAW,KAAK;AAAA,MAAA,OACX;AACL,qBAAa,KAAK;AAClB,mBAAW,IAAI;AAAA,MAAA;AAAA,IACjB;AAGF,WAAO,MAAM;AACX,UAAI,SAAS;AACb,UAAI,UAAU;AACd,mBAAa,IAAI;AACjB,iBAAW,KAAK;AAAA,IAAA;AAAA,EAClB,GACC,CAAC,MAAM,GAAG,CAAC;AACd,QAAM,QAAQ,SAAA;AACd,QAAM,EAAE,SAAS,WAAW,GAAG,KAAA,KAAS,+BAAO,WAC3C,QAAO,+BAAO,aAAY,aACxB,MAAM,QAAQ,KAAK,IACnB,MAAM,UACR,CAAA;AAEJ,SACEA,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,SAAS;AAAA,UACP,UAAU;AAAA,UACV,UAAU;AAAA,UACV,GAAI,MAAM,oBACN;AAAA,YACE,aAAa;AAAA,cACX,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,UAAU;AAAA,cACV,OAAO;AAAA,cACP,iBAAiB,OAAO,MAAM,GAAG;AAAA,cACjC,kBAAkB;AAAA,cAClB,gBAAgB;AAAA,cAChB,oBAAoB;AAAA,cACpB,QAAQ;AAAA,cACR,WAAW;AAAA,cACX,QAAQ;AAAA,YAAA;AAAA,UACV,IAEF,CAAA;AAAA,UACJ,GAAG;AAAA,QAAA;AAAA,QAEL,GAAG;AAAA,MAAA;AAAA,MAGJ,UAAA;AAAA,QAAA,CAAC,UACA,MAAM,oBAAoB,YACxBC,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAO;AAAA,YACP,IAAI;AAAA,cACF,SAAS;AAAA,gBACP,OAAO;AAAA,gBACP,QAAQ;AAAA,cAAA;AAAA,YACV;AAAA,UACF;AAAA,QAAA,IAEA,OACF;AAAA,QACH,CAAC,WACAA,kCAAAA,IAAC,UAAA,EAAS,SAAQ,QAAO,YAAY,WAAW,KAAK,MAAM,KAAK,KAAK,MAAM,KAAK,KAAK,MAAM,SAAS;AAAA,QAErG,UAAU,MAAM,qBAAqB,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnD;AC9FO,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAKlB,CAAC,UAAW,MAAM,aAAa,IAAI,CAAE;AAAA,IAC9C,aAAa;AAAA,IACb,KAAK;AAAA;"}
|
|
@@ -2,7 +2,7 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
|
|
|
2
2
|
import { ImageSupportedFormatsForInput } from "./consts.es.js";
|
|
3
3
|
import { u as useImageCrop } from "./use-_V1SKE0-.js";
|
|
4
4
|
import { c as Button } from "./component-CN6att4f.js";
|
|
5
|
-
import { I as Image } from "./component.styles-
|
|
5
|
+
import { I as Image } from "./component.styles-BYVYSgCZ.js";
|
|
6
6
|
import { b as Stack } from "./component-mzzOCXSx.js";
|
|
7
7
|
import styled, { useTheme, css } from "styled-components";
|
|
8
8
|
import { i as Typography } from "./component-GtWqnaqk.js";
|
|
@@ -482,4 +482,4 @@ export {
|
|
|
482
482
|
ImageSelectWrapper as e,
|
|
483
483
|
ImageSelectListWrapper as f
|
|
484
484
|
};
|
|
485
|
-
//# sourceMappingURL=component.styles-
|
|
485
|
+
//# sourceMappingURL=component.styles-Ba1VTyjn.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.styles-DwtZ7CY4.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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"}
|
|
1
|
+
{"version":3,"file":"component.styles-Ba1VTyjn.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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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("./area-DRsIULcw.cjs"),r=require("./component-GKvpOWlO.cjs"),n=require("react"),o=require("styled-components"),s=require("./style-Df37KnoJ.cjs"),i=require("./style-fRZ6xrVp.cjs"),a=o.img`
|
|
2
|
+
position: absolute;
|
|
3
|
+
width: 100%;
|
|
4
|
+
height: 100%;
|
|
5
|
+
object-fit: cover;
|
|
6
|
+
opacity: ${e=>e.$isPending?0:1};
|
|
7
|
+
${s.addTransition};
|
|
8
|
+
${i.addSX};
|
|
9
|
+
`;exports.Image=s=>{const[i,c]=n.useState(!0),[l,u]=n.useState(!1);n.useEffect(()=>{if(!s.src)return;const e=new window.Image;return e.onload=()=>{c(!1),u(!1)},e.onerror=()=>{c(!1),u(!0)},e.src=s.src,e.complete&&(e.naturalWidth>0?(c(!1),u(!1)):(c(!1),u(!0))),()=>{e.onload=null,e.onerror=null,c(!0),u(!1)}},[s.src]);const d=o.useTheme(),{default:x,...g}=(null==s?void 0:s.sxStack)?"function"==typeof(null==s?void 0:s.sxStack)?s.sxStack(d):s.sxStack:{};return e.jsxRuntimeExports.jsxs(r.Stack,{sx:{default:{position:"relative",overflow:"hidden",...s.isShowBeforeImage?{"&::before":{width:"100%",height:"100%",content:'""',position:"absolute",inset:0,backgroundImage:`url(${s.src})`,backgroundRepeat:"no-repeat",backgroundSize:"cover",backgroundPosition:"center",filter:"blur(20px)",transform:"scale(1.1)",zIndex:0}}:{},...x},...g},children:[l?null:s.componentLoading||i?e.jsxRuntimeExports.jsx(t.Skeleton,{visible:!0,sx:{default:{width:"100%",height:"100%"}}}):null,!l&&e.jsxRuntimeExports.jsx(a,{loading:"lazy",$isPending:i,src:s.src,alt:s.alt,$sx:s.sxImage}),l&&s.componentFallback||null]})},exports.ImageIMG=a;
|
|
10
|
+
//# sourceMappingURL=component.styles-CAN6t4un.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.styles-CAN6t4un.cjs","sources":["../src/components/image/component.styles.tsx","../src/components/image/component.tsx"],"sourcesContent":["import { addTransition } from '@local/styles/add';\nimport { addSX } from '@local/styles/sx';\n\nimport styled from 'styled-components';\n\nimport { ImageIMGProps } from '.';\n\nexport const ImageIMG = styled.img<ImageIMGProps>`\n position: absolute;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: ${(props) => (props.$isPending ? 0 : 1)};\n ${addTransition};\n ${addSX};\n`;\n","import { Skeleton } from '@local/areas/skeleton';\nimport { Stack } from '@local/components/stack';\n\nimport { FC, useEffect, useState } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { ImageIMG, ImageProps } from '.';\n\nexport const Image: FC<ImageProps> = (props) => {\n const [isPending, setIsPending] = useState(true);\n const [isError, setIsError] = useState(false);\n\n useEffect(() => {\n if (!props.src) return;\n\n const img = new (window.Image as { new (width?: number, height?: number): HTMLImageElement })();\n\n img.onload = () => {\n setIsPending(false);\n setIsError(false);\n };\n\n img.onerror = () => {\n setIsPending(false);\n setIsError(true);\n };\n\n img.src = props.src;\n\n if (img.complete) {\n if (img.naturalWidth > 0) {\n setIsPending(false);\n setIsError(false);\n } else {\n setIsPending(false);\n setIsError(true);\n }\n }\n\n return () => {\n img.onload = null;\n img.onerror = null;\n setIsPending(true);\n setIsError(false);\n };\n }, [props.src]);\n const theme = useTheme();\n const { default: defaultSx, ...rest } = props?.sxStack\n ? typeof props?.sxStack === 'function'\n ? props.sxStack(theme)\n : props.sxStack\n : {};\n\n return (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n ...(props.isShowBeforeImage\n ? {\n '&::before': {\n width: '100%',\n height: '100%',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n backgroundImage: `url(${props.src})`,\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n filter: 'blur(20px)',\n transform: 'scale(1.1)',\n zIndex: 0,\n },\n }\n : {}),\n ...defaultSx,\n },\n ...rest,\n }}\n >\n {!isError ? (\n props.componentLoading || isPending ? (\n <Skeleton\n visible\n sx={{\n default: {\n width: '100%',\n height: '100%',\n },\n }}\n />\n ) : null\n ) : null}\n {!isError && (\n <ImageIMG loading='lazy' $isPending={isPending} src={props.src} alt={props.alt} $sx={props.sxImage} />\n )}\n {isError ? props.componentFallback || null : null}\n </Stack>\n );\n};\n"],"names":["ImageIMG","styled","img","props","$isPending","addTransition","addSX","isPending","setIsPending","useState","isError","setIsError","useEffect","src","window","Image","onload","onerror","complete","naturalWidth","theme","useTheme","default","defaultSx","rest","sxStack","jsxs","Stack","sx","position","overflow","isShowBeforeImage","width","height","content","inset","backgroundImage","backgroundRepeat","backgroundSize","backgroundPosition","filter","transform","zIndex","children","componentLoading","jsx","Skeleton","visible","loading","alt","$sx","sxImage","componentFallback"],"mappings":"wPAOaA,EAAWC,EAAOC,GAAA;;;;;aAKjBC,GAAWA,EAAMC,WAAa,EAAI;IAC5CC;IACAC;gBCNkCH,IACpC,MAAOI,EAAWC,GAAgBC,EAAAA,UAAS,IACpCC,EAASC,GAAcF,EAAAA,UAAS,GAEvCG,EAAAA,UAAU,KACR,IAAKT,EAAMU,IAAK,OAEhB,MAAMX,EAAM,IAAKY,OAAOC,MAwBxB,OAtBAb,EAAIc,OAAS,KACXR,GAAa,GACbG,GAAW,IAGbT,EAAIe,QAAU,KACZT,GAAa,GACbG,GAAW,IAGbT,EAAIW,IAAMV,EAAMU,IAEZX,EAAIgB,WACFhB,EAAIiB,aAAe,GACrBX,GAAa,GACbG,GAAW,KAEXH,GAAa,GACbG,GAAW,KAIR,KACLT,EAAIc,OAAS,KACbd,EAAIe,QAAU,KACdT,GAAa,GACbG,GAAW,KAEZ,CAACR,EAAMU,MACV,MAAMO,EAAQC,EAAAA,YACNC,QAASC,KAAcC,UAASrB,WAAOsB,SACjB,mBAAnB,MAAAtB,OAAA,EAAAA,EAAOsB,SACZtB,EAAMsB,QAAQL,GACdjB,EAAMsB,QACR,CAAA,EAEJ,SACEC,kBAAAA,KAACC,EAAAA,MAAA,CACCC,GAAI,CACFN,QAAS,CACPO,SAAU,WACVC,SAAU,YACN3B,EAAM4B,kBACN,CACE,YAAa,CACXC,MAAO,OACPC,OAAQ,OACRC,QAAS,KACTL,SAAU,WACVM,MAAO,EACPC,gBAAiB,OAAOjC,EAAMU,OAC9BwB,iBAAkB,YAClBC,eAAgB,QAChBC,mBAAoB,SACpBC,OAAQ,aACRC,UAAW,aACXC,OAAQ,IAGZ,CAAA,KACDnB,MAEFC,GAGJmB,SAAA,CAACjC,EAYE,KAXFP,EAAMyC,kBAAoBrC,IACxBsC,kBAAAA,IAACC,EAAAA,SAAA,CACCC,SAAO,EACPnB,GAAI,CACFN,QAAS,CACPU,MAAO,OACPC,OAAQ,WAIZ,MAEJvB,GACAmC,EAAAA,kBAAAA,IAAC7C,EAAA,CAASgD,QAAQ,OAAO5C,WAAYG,EAAWM,IAAKV,EAAMU,IAAKoC,IAAK9C,EAAM8C,IAAKC,IAAK/C,EAAMgD,UAE5FzC,GAAUP,EAAMiD,mBAA4B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("./consts.cjs.js"),s=require("./use-ClugPshj.cjs"),i=require("./component-DnJo66DS.cjs"),r=require("./component.styles-
|
|
1
|
+
"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("./consts.cjs.js"),s=require("./use-ClugPshj.cjs"),i=require("./component-DnJo66DS.cjs"),r=require("./component.styles-CAN6t4un.cjs"),o=require("./component-GKvpOWlO.cjs"),n=require("styled-components"),a=require("./component-BVnHSTJd.cjs"),l=require("./context.constants-BLQ_1jZI.cjs"),d=require("./theme.global-CcoD5bPP.cjs"),u=require("react"),c=require("./style-D3Lbn1EL.cjs"),g=require("framer-motion"),p=require("./style-fRZ6xrVp.cjs"),m=n.css`
|
|
2
2
|
${e=>n.css`
|
|
3
3
|
background: ${e.theme.colors.imageSelect[e.$genre].background.rest};
|
|
4
4
|
color: ${e.theme.colors.imageSelect[e.$genre].color.rest};
|
|
@@ -36,4 +36,4 @@
|
|
|
36
36
|
${m}
|
|
37
37
|
${x}
|
|
38
38
|
`;exports.ImageSelect=p=>{const{onChange:m}=p,x=u.useMemo(()=>d.KEY_SIZE_DATA[p.size],[p.size]),[h,f]=u.useState(p.images||[]),[j,v]=u.useState(!1),y=u.useRef(null),$=n.useTheme(),E=u.useCallback(e=>{e&&f(t=>{const s=e.map((e,s)=>({...e,index:t.length+s})),i=[...t,...s];return null==m||m(i),i})},[m]),z=()=>{var e;null==(e=y.current)||e.click()},{handleAddFiles:R}=s.useImageCrop({onSave:E,locale:p.locale,dialog:{button:{genre:p.propsButton.default.genre,size:p.propsButton.default.size},buttonDelete:{genre:p.propsButton.delete.genre,size:p.propsButton.delete.size}},imageSettings:{maxSize:p.imageSettings.maxSize,maxCount:p.imageSettings.maxCount-h.length,aspect:p.imageSettings.aspect},refInput:y}),{handleAdd:k}=(t=>{const s=u.useMemo(()=>d.KEY_SIZE_DATA[t.size],[t.size]),n=u.useMemo(()=>`${s.radius}px`,[s.radius]),{add:c}=l.useDialog({br:n,propsDialog:{borderRadius:n,padding:"0",background:"whiteStandard"}});return{handleAdd:u.useCallback(s=>{c({content:(n,l)=>e.jsxRuntimeExports.jsxs(o.Stack,{sx:{default:{position:"relative",overflow:"hidden",aspectRatio:2*t.imageSettings.aspect+" / 2",width:"auto",maxWidth:"70dvw",height:"85dvh",borderRadius:null==n?void 0:n.br},tablet:{maxWidth:"95dvw"}},children:[e.jsxRuntimeExports.jsx(r.Image,{sxStack:e=>({default:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.palette.black10,position:"absolute",pointerEvents:"none"}}),isShowBeforeImage:!0,sxImage:{default:{objectFit:"contain"}},alt:null==s?void 0:s.imageSrc,src:null==s?void 0:s.imageSrc,componentFallback:e.jsxRuntimeExports.jsx(a.Typography,{sx:{default:{variant:"h6"}},children:t.locale.imageFallback})}),e.jsxRuntimeExports.jsx(i.Button,{sx:{default:{position:"absolute",bottom:15,right:15}},genre:"realebail-white",size:"small",icons:[{type:"id",name:"Arrow4"}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>null==l?void 0:l()})]})})},[c,t.imageSettings.aspect,t.locale.imageFallback])}})({size:p.size,locale:p.locale,imageSettings:p.imageSettings,genre:p.genre});return u.useEffect(()=>{f(p.images||[])},[p.images]),e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs(S,{$genre:p.genre,$size:p.size,id:p.id,$sx:p.sx,$error:p.error,children:[e.jsxRuntimeExports.jsxs(b,{onDrop:e=>{(e=>{var t;e.preventDefault(),(null==(t=e.dataTransfer.files)?void 0:t.length)&&R(e.dataTransfer.files)})(e),v(!1)},onDragOver:e=>e.preventDefault(),onDragEnter:()=>v(!0),onDragLeave:()=>v(!1),animate:{borderColor:j?$.colors.imageSelect[p.genre].border.hover:$.colors.imageSelect[p.genre].border.rest},transition:{duration:.3},$genre:p.genre,$size:p.size,children:[e.jsxRuntimeExports.jsxs(g.motion.div,{transition:{layout:{duration:.3,ease:"easeInOut",type:"spring"}},layout:!0,style:{display:"flex",flexWrap:"wrap",gap:x.padding-2+"px"},children:[h.map(t=>t.url&&e.jsxRuntimeExports.jsxs(g.motion.div,{style:{position:"relative",width:`${p.imageSettings.width}px`,height:`${p.imageSettings.height}px`,userSelect:"none",overflow:"hidden",borderRadius:`${x.radius}px`,flexGrow:1},layout:!0,transition:{layout:{duration:.3,ease:"easeInOut",type:"spring"}},children:[e.jsxRuntimeExports.jsx(r.Image,{sxStack:e=>({default:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.palette.black10,position:"absolute",pointerEvents:"none"}}),isShowBeforeImage:p.isContain,sxImage:{default:{objectFit:p.isContain?"contain":"cover"}},alt:t.name||"image",src:t.url,componentFallback:e.jsxRuntimeExports.jsx(a.Typography,{sx:{default:{variant:"h6"}},children:p.locale.imageFallback})}),e.jsxRuntimeExports.jsx(i.Button,{sx:{default:{position:"absolute",top:5,right:5}},genre:p.genre,size:"small",icons:[{type:"id",name:"Close"}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>{return e=t.id,void f(t=>{const s=t.filter(t=>t.id!==e);return null==m||m(s),s});var e}}),e.jsxRuntimeExports.jsx(i.Button,{sx:{default:{position:"absolute",bottom:5,right:5}},genre:p.genre,size:"small",icons:[{type:"id",name:"Activity"}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>t.url&&k({id:t.id,imageSrc:t.url})})]},t.id)),0===h.length?e.jsxRuntimeExports.jsx("div",{onClick:z,style:{position:"relative",width:`${p.imageSettings.width}px`,height:`${p.imageSettings.height}px`,userSelect:"none",overflow:"hidden",borderRadius:`${x.radius}px`,flexGrow:1,display:"flex",alignItems:"center",justifyContent:"center",textAlign:"center",cursor:"pointer"},children:e.jsxRuntimeExports.jsx(a.Typography,{style:{color:$.colors.imageSelect[p.genre].color.rest},sx:{default:{}},children:p.locale.dragAndDrop})},"empty"):null]}),e.jsxRuntimeExports.jsx("input",{ref:y,type:"file",accept:t.ImageSupportedFormatsForInput,multiple:!0,style:{display:"none"},onChange:e=>{e.target.files&&R(e.target.files)}})]}),e.jsxRuntimeExports.jsxs(o.Stack,{sx:{default:{flexGrow:1,gap:x.padding-2+"px"}},children:[e.jsxRuntimeExports.jsx(i.Button,{type:"button",genre:p.genre,size:p.size,sx:{default:{flexGrow:3}},isRadius:!0,onClick:z,children:p.locale.buttonAdd}),e.jsxRuntimeExports.jsx(i.Button,{isRadius:!0,type:"button",sx:{default:{flexGrow:1}},onClick:()=>{f(p.defaultImages||[]),null==m||m(p.defaultImages||[])},genre:p.genre,size:p.size,children:p.locale.buttonReset})]})]}),(null==p?void 0:p.error)?e.jsxRuntimeExports.jsx(c.ErrorMessage,{...p.error,size:(null==p?void 0:p.error.size)??p.size,font:{size:12,weight:400,family:$.font.family}}):null]})},exports.ImageSelectListSize=x,exports.ImageSelectListSizeConstructor=h,exports.ImageSelectListWrapper=b,exports.ImageSelectSize=f,exports.ImageSelectSizeConstructor=j,exports.ImageSelectWrapper=S;
|
|
39
|
-
//# sourceMappingURL=component.styles-
|
|
39
|
+
//# sourceMappingURL=component.styles-DhBoJzIN.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.styles-C4xnWrvJ.cjs","sources":["../src/components/image-select/component.styles.ts","../src/components/image-select/component.tsx","../src/hooks/use-image-view/use.tsx"],"sourcesContent":["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","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 { 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"],"names":["ImageSelectListGenre","css","props","theme","colors","imageSelect","$genre","background","rest","color","ImageSelectListSize","ImageSelectListSizeConstructor","KEY_SIZE_DATA","$size","padding","radius","ImageSelectSize","ImageSelectSizeConstructor","ImageSelectWrapper","styled","div","addError","addSX","ImageSelectListWrapper","motion","onChange","size","useMemo","images","setImages","useState","isDraggingOver","setIsDraggingOver","refInput","useRef","useTheme","handleOnSave","useCallback","files","prev","newImages","map","file","idx","index","length","finalImages","openFileDialog","_a","current","click","handleAddFiles","handleAddFilesCrop","useImageCrop","onSave","locale","dialog","button","genre","propsButton","default","buttonDelete","delete","imageSettings","maxSize","maxCount","aspect","handleAdd","br","add","useDialog","propsDialog","borderRadius","image","content","params","remove","jsxs","Stack","sx","position","overflow","aspectRatio","width","maxWidth","height","tablet","children","jsx","Image","sxStack","alignItems","justifyContent","backgroundColor","palette","black10","pointerEvents","isShowBeforeImage","sxImage","objectFit","alt","imageSrc","src","componentFallback","Typography","variant","imageFallback","Button","bottom","right","icons","type","name","isWidthAsHeight","isHiddenBorder","isRadius","onClick","useImageView","useEffect","Fragment","id","$sx","$error","error","onDrop","e","preventDefault","dataTransfer","handleDrop","onDragOver","onDragEnter","onDragLeave","animate","borderColor","border","hover","transition","duration","layout","ease","style","display","flexWrap","gap","img","url","userSelect","flexGrow","isContain","top","handleDelete","filter","textAlign","cursor","dragAndDrop","ref","accept","ImageSupportedFormatsForInput","multiple","target","buttonAdd","defaultImages","buttonReset","ErrorMessage","font","weight","family"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"component.styles-DhBoJzIN.cjs","sources":["../src/components/image-select/component.styles.ts","../src/components/image-select/component.tsx","../src/hooks/use-image-view/use.tsx"],"sourcesContent":["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","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 { 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"],"names":["ImageSelectListGenre","css","props","theme","colors","imageSelect","$genre","background","rest","color","ImageSelectListSize","ImageSelectListSizeConstructor","KEY_SIZE_DATA","$size","padding","radius","ImageSelectSize","ImageSelectSizeConstructor","ImageSelectWrapper","styled","div","addError","addSX","ImageSelectListWrapper","motion","onChange","size","useMemo","images","setImages","useState","isDraggingOver","setIsDraggingOver","refInput","useRef","useTheme","handleOnSave","useCallback","files","prev","newImages","map","file","idx","index","length","finalImages","openFileDialog","_a","current","click","handleAddFiles","handleAddFilesCrop","useImageCrop","onSave","locale","dialog","button","genre","propsButton","default","buttonDelete","delete","imageSettings","maxSize","maxCount","aspect","handleAdd","br","add","useDialog","propsDialog","borderRadius","image","content","params","remove","jsxs","Stack","sx","position","overflow","aspectRatio","width","maxWidth","height","tablet","children","jsx","Image","sxStack","alignItems","justifyContent","backgroundColor","palette","black10","pointerEvents","isShowBeforeImage","sxImage","objectFit","alt","imageSrc","src","componentFallback","Typography","variant","imageFallback","Button","bottom","right","icons","type","name","isWidthAsHeight","isHiddenBorder","isRadius","onClick","useImageView","useEffect","Fragment","id","$sx","$error","error","onDrop","e","preventDefault","dataTransfer","handleDrop","onDragOver","onDragEnter","onDragLeave","animate","borderColor","border","hover","transition","duration","layout","ease","style","display","flexWrap","gap","img","url","userSelect","flexGrow","isContain","top","handleDelete","filter","textAlign","cursor","dragAndDrop","ref","accept","ImageSupportedFormatsForInput","multiple","target","buttonAdd","defaultImages","buttonReset","ErrorMessage","font","weight","family"],"mappings":"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"}
|
package/build/index.cjs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./area-Dup_lUb9.cjs"),t=require("./area.hooks-C_UKZzcb.cjs"),o=require("./area-CZkDIeGx.cjs"),r=require("./area-CmCMHnRA.cjs"),p=require("./area-DRsIULcw.cjs"),s=require("./component-8NOxwZJO.cjs"),n=require("./component.styles-Py-IeQ2q.cjs"),a=require("./component-DnJo66DS.cjs"),i=require("./component-cRmWWDr_.cjs"),x=require("./component.styles-Bb7_KygZ.cjs"),c=require("./component.styles-DbWj2stq.cjs"),u=require("./component.types-CfR3RBsV.cjs"),l=require("./component.styles-BKnUDWqO.cjs"),d=require("./component.types-DraGq1j_.cjs"),S=require("./component.styles-B-bndnRM.cjs"),D=require("./component-DdJt3LEF.cjs"),I=require("./component.styles-C4xnWrvJ.cjs"),E=require("./component.constants-CpRgeAIu.cjs"),T=require("./component--jGdo2yq.cjs"),_=require("./component.styles-BeRVOt5T.cjs"),A=require("./component.styles-gZHy-64x.cjs"),O=require("./component.components-CC3IeZon.cjs"),L=require("./component.constants-D6AJ1xmO.cjs"),C=require("./component.styles-ZU_GyVub.cjs"),m=require("./component.styles-Dpg-__rn.cjs"),P=require("./component-CLqcB5mM.cjs"),g=require("./component.styles-PNgt36ZD.cjs"),R=require("./component.styles-CLn52hJD.cjs"),N=require("./component-GKvpOWlO.cjs"),y=require("./component.styles-CsB9986a.cjs"),M=require("./component.styles-BELwxHxh.cjs"),h=require("./component-BVnHSTJd.cjs"),U=require("./component.functions-D9ffjEok.cjs"),F=require("./consts.cjs.js"),G=require("./context.hooks-XBiTuVyt.cjs"),k=require("./context.functions-80N-5MqM.cjs"),j=require("./context.constants-BLQ_1jZI.cjs"),W=require("./context.hooks-u408Pxw8.cjs"),B=require("./context.functions-ohI9H54j.cjs"),b=require("./context.functions-ar41xFVo.cjs"),v=require("./context.hooks-D13tbrva.cjs"),q=require("./context.hooks-BIsapq-0.cjs"),z=require("./context.constants-cm50ZUiS.cjs"),f=require("./functions.cjs.js"),V=require("./use-IhzeVumv.cjs"),w=require("./use-C1l0O0Qo.cjs"),K=require("./style-Df37KnoJ.cjs"),X=require("./style-D3Lbn1EL.cjs"),Z=require("./motion-DgB7M2Hn.cjs"),H=require("./style-fRZ6xrVp.cjs"),Y=require("./theme.global-CcoD5bPP.cjs");exports.Outside=e.Outside,exports.useRemovePreviewLoader=t.useRemovePreviewLoader,exports.Preview=o.Preview,exports.Scroll=r.Scroll,exports.StyledScroll=r.StyledScroll,exports.Skeleton=p.Skeleton,exports.StyledSkeleton=p.StyledSkeleton,exports.Smooth=s.Smooth,exports.Accordion=n.Accordion,exports.AccordionDetails=n.AccordionDetails,exports.AccordionStyledIcon=n.AccordionStyledIcon,exports.AccordionSummary=n.AccordionSummary,exports.AccordionSummaryContent=n.AccordionSummaryContent,exports.AccordionWrapper=n.AccordionWrapper,exports.Button=a.Button,exports.ButtonSize=a.ButtonSize,exports.ButtonSizeConstructor=a.ButtonSizeConstructor,exports.StyledButton=a.StyledButton,exports.StyledButtonIconsWrapper=a.StyledButtonIconsWrapper,exports.ButtonGroup=i.ButtonGroup,exports.ButtonGroupWrapper=i.ButtonGroupWrapper,exports.Checkbox=x.Checkbox,exports.CheckboxGenre=x.CheckboxGenre,exports.CheckboxSize=x.CheckboxSize,exports.CheckboxSizeConstructor=x.CheckboxSizeConstructor,exports.CheckboxWrapper=x.CheckboxWrapper,exports.StyledIcon=x.StyledIcon,exports.CheckboxChildren=c.CheckboxChildren,exports.CheckboxGroup=c.CheckboxGroup,exports.CheckboxGroupItem=c.CheckboxGroupItem,exports.CheckboxGroupLabel=c.CheckboxGroupLabel,exports.CheckboxGroupSize=c.CheckboxGroupSize,exports.CheckboxGroupSizeConstructor=c.CheckboxGroupSizeConstructor,exports.CheckboxGroupWrapper=c.CheckboxGroupWrapper,exports.DateDropdownDay=u.DateDropdownDay,exports.DateDropdownDayOfWeek=u.DateDropdownDayOfWeek,exports.DateDropdownDays=u.DateDropdownDays,exports.DateDropdownList=u.DateDropdownList,exports.DateDropdownListParent=u.DateDropdownListParent,exports.DateInput=u.DateInput,exports.DateInputButton=u.DateInputButton,exports.DateInputWrapper=u.DateInputWrapper,exports.DatePicker=u.DatePicker,exports.DatePickerVariant=u.DatePickerVariant,exports.DateWrapper=u.DateWrapper,exports.addDateDropdownDaySize=u.addDateDropdownDaySize,exports.addDateInputButtonSize=u.addDateInputButtonSize,exports.addDateInputWrapperSize=u.addDateInputWrapperSize,exports.Icon=l.Icon,exports.StyledSVG=l.StyledSVG,exports.ENUM_ICON_BUSTMARKET=d.ENUM_ICON_BUSTMARKET,exports.ENUM_ICON_CHECKBOX=d.ENUM_ICON_CHECKBOX,exports.ENUM_ICON_ID=d.ENUM_ICON_ID,exports.ENUM_ICON_LOADING=d.ENUM_ICON_LOADING,exports.ENUM_ICON_LOGO=d.ENUM_ICON_LOGO,exports.ENUM_ICON_REALEBAIL=d.ENUM_ICON_REALEBAIL,exports.Image=S.Image,exports.ImageIMG=S.ImageIMG,exports.ImageButton=D.ImageButton,exports.ImageSelect=I.ImageSelect,exports.ImageSelectListSize=I.ImageSelectListSize,exports.ImageSelectListSizeConstructor=I.ImageSelectListSizeConstructor,exports.ImageSelectListWrapper=I.ImageSelectListWrapper,exports.ImageSelectSize=I.ImageSelectSize,exports.ImageSelectSizeConstructor=I.ImageSelectSizeConstructor,exports.ImageSelectWrapper=I.ImageSelectWrapper,exports.IMAGES=E.IMAGES,exports.ImageSlider=E.ImageSlider,exports.SliderDot=E.SliderDot,exports.SliderImage=E.SliderImage,exports.Input=T.Input,exports.formatPhoneNumber=T.formatPhoneNumber,exports.InputPostfixChildren=_.InputPostfixChildren,exports.InputPrefixChildren=_.InputPrefixChildren,exports.InputSize=_.InputSize,exports.InputSizeConstructor=_.InputSizeConstructor,exports.StyledInput=_.StyledInput,exports.StyledInputCSS=_.StyledInputCSS,exports.StyledInputNumeric=_.StyledInputNumeric,exports.StyledInputPattern=_.StyledInputPattern,exports.StyledInputWrapper=_.StyledInputWrapper,exports.StyledMotionInput=_.StyledMotionInput,exports.addInputIsInputEffect=_.addInputIsInputEffect,exports.addInputPlaceholder=_.addInputPlaceholder,exports.addInputPlaceholderNiceNumber=_.addInputPlaceholderNiceNumber,exports.InputOTP=A.InputOTP,exports.InputOTPSize=A.InputOTPSize,exports.InputOTPSizeConstructor=A.InputOTPSizeConstructor,exports.InputOTPWrapper=A.InputOTPWrapper,exports.CustomZoomControl=O.CustomZoomControl,exports.DEFAULT_MAP_CENTER=O.DEFAULT_MAP_CENTER,exports.DEFAULT_MAP_MAX_ZOOM=O.DEFAULT_MAP_MAX_ZOOM,exports.DEFAULT_MAP_MIN_ZOOM=O.DEFAULT_MAP_MIN_ZOOM,exports.DEFAULT_MAP_THEME=O.DEFAULT_MAP_THEME,exports.DEFAULT_MAP_ZOOM=O.DEFAULT_MAP_ZOOM,exports.MapCluster=O.MapCluster,exports.MapDot=O.MapDot,exports.MapWrapper=O.MapWrapper,exports.MarkerCluster=O.MarkerCluster,exports.UpdateMapSettings=O.UpdateMapSettings,exports.createClusterIcon=O.createClusterIcon,exports.customDefaultIcon=O.customDefaultIcon,exports.customTextIcon=O.customTextIcon,exports.DEFAULT_COMPONENT_PAGINATION_GAP=L.DEFAULT_COMPONENT_PAGINATION_GAP,exports.Pagination=L.Pagination,exports.Range=C.Range,exports.RangeThumb=C.RangeThumb,exports.RangeTrack=C.RangeTrack,exports.RangeWrapper=C.RangeWrapper,exports.DEFAULT_RIPPLE_DURATION=m.DEFAULT_RIPPLE_DURATION,exports.DEFAULT_RIPPLE_ID=m.DEFAULT_RIPPLE_ID,exports.RippleContainer=m.RippleContainer,exports.RippleSpan=m.RippleSpan,exports.addRipple=m.addRipple,exports.addRippleDefault=m.addRippleDefault,exports.Ripple=P.Ripple,exports.ButtonList=g.ButtonList,exports.ContainerDropdownListOption=g.ContainerDropdownListOption,exports.ContainerSelectListOption=g.ContainerSelectListOption,exports.DropdownList=g.DropdownList,exports.DropdownListOption=g.DropdownListOption,exports.DropdownListOptionIcon=g.DropdownListOptionIcon,exports.DropdownListParent=g.DropdownListParent,exports.Select=g.Select,exports.SelectLanguage=g.SelectLanguage,exports.SelectList=g.SelectList,exports.SelectListOption=g.SelectListOption,exports.SelectMapTheme=g.SelectMapTheme,exports.SelectMonth=g.SelectMonth,exports.SelectMonths=g.SelectMonths,exports.SelectTextArea=g.SelectTextArea,exports.SelectWrapper=g.SelectWrapper,exports.SelectYear=g.SelectYear,exports.Separator=R.Separator,exports.SeparatorWrapper=R.SeparatorWrapper,exports.Stack=N.Stack,exports.StackMotion=N.StackMotion,exports.StyledStack=N.StyledStack,exports.StyledStackMotion=N.StyledStackMotion,exports.StyledTextArea=y.StyledTextArea,exports.TextArea=y.TextArea,exports.TextAreaWrapper=y.TextAreaWrapper,exports.addTextArea=y.addTextArea,exports.Toggle=M.Toggle,exports.ToggleCenter=M.ToggleCenter,exports.ToggleWrapper=M.ToggleWrapper,exports.DEFAULT_TOOLTIP_OFFSET_FALLBACK=h.DEFAULT_TOOLTIP_OFFSET_FALLBACK,exports.DEFAULT_TOOLTIP_PLACEMENT_FALLBACK=h.DEFAULT_TOOLTIP_PLACEMENT_FALLBACK,exports.Title=h.Title,exports.Tooltip=h.Tooltip,exports.TooltipBox=h.TooltipBox,exports.TooltipContainer=h.TooltipContainer,exports.TooltipContent=h.TooltipContent,exports.Typography=h.Typography,exports.TypographyLink=h.TypographyLink,exports.TypographyTooltip=h.TypographyTooltip,exports.addSXTypography=h.addSXTypography,exports.addTooltipBoxSize=h.addTooltipBoxSize,exports.addTooltipBoxSizeConstructor=h.addTooltipBoxSizeConstructor,exports.getFontSizeStyles=U.getFontSizeStyles,exports.ImageSupportedFormats=F.ImageSupportedFormats,exports.ImageSupportedFormatsForInput=F.ImageSupportedFormatsForInput,exports.KeysLanguage=F.KeysLanguage,exports.KeysService=F.KeysService,exports.ListLanguage=F.ListLanguage,exports.ListService=F.ListService,exports.LoremIpsumText=F.LoremIpsumText,exports.MapThemeList=F.MapThemeList,exports.ObjectLanguage=F.ObjectLanguage,exports.ObjectService=F.ObjectService,exports.localeInput=F.localeInput,exports.localeMonths=F.localeMonths,exports.localeWeeks=F.localeWeeks,exports.AppContext=G.AppContext,exports.ProviderApp=G.ProviderApp,exports.ProviderAppOutlet=G.ProviderAppOutlet,exports.ProviderAppOutletChildren=G.ProviderAppOutletChildren,exports.ProviderAppOutletFooter=G.ProviderAppOutletFooter,exports.ProviderAppOutletHeader=G.ProviderAppOutletHeader,exports.ProviderAppOutletLeftAside=G.ProviderAppOutletLeftAside,exports.ProviderAppOutletNav=G.ProviderAppOutletNav,exports.ProviderAppOutletNotification=G.ProviderAppOutletNotification,exports.ProviderAppOutletRightAside=G.ProviderAppOutletRightAside,exports.ProviderAppWrapper=G.ProviderAppWrapper,exports.useApp=G.useApp,exports.useBgColor=G.useBgColor,exports.useBgImage=G.useBgImage,exports.useDescription=G.useDescription,exports.useStatusBarColor=G.useStatusBarColor,exports.CookieContext=k.CookieContext,exports.ProviderCookie=k.ProviderCookie,exports.getFromCookie=k.getFromCookie,exports.setToCookie=k.setToCookie,exports.useCookie=k.useCookie,exports.DEFAULT_PROVIDER_DIALOG_DURATION_ELEMENT=j.DEFAULT_PROVIDER_DIALOG_DURATION_ELEMENT,exports.DEFAULT_PROVIDER_DIALOG_DURATION_LAYOUT=j.DEFAULT_PROVIDER_DIALOG_DURATION_LAYOUT,exports.DEFAULT_PROVIDER_DIALOG_ELEMENT_BACKGROUND=j.DEFAULT_PROVIDER_DIALOG_ELEMENT_BACKGROUND,exports.DEFAULT_PROVIDER_DIALOG_ELEMENT_BORDER_RADIUS=j.DEFAULT_PROVIDER_DIALOG_ELEMENT_BORDER_RADIUS,exports.DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_HEIGHT=j.DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_HEIGHT,exports.DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_WIDTH=j.DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_WIDTH,exports.DEFAULT_PROVIDER_DIALOG_ELEMENT_PADDING=j.DEFAULT_PROVIDER_DIALOG_ELEMENT_PADDING,exports.DialogContent=j.DialogContent,exports.DialogContext=j.DialogContext,exports.DialogElementWrapper=j.DialogElementWrapper,exports.DialogLayout=j.DialogLayout,exports.ProviderDialog=j.ProviderDialog,exports.useDialog=j.useDialog,exports.useDialogs=j.useDialogs,exports.GeolocationContext=W.GeolocationContext,exports.ProviderGeolocation=W.ProviderGeolocation,exports.useGeolocation=W.useGeolocation,exports.LocalStorageContext=B.LocalStorageContext,exports.ProviderLocalStorage=B.ProviderLocalStorage,exports.getFromLocalStorage=B.getFromLocalStorage,exports.setToLocalStorage=B.setToLocalStorage,exports.useLocalStorage=B.useLocalStorage,exports.urlBase64ToUint8Array=b.urlBase64ToUint8Array,exports.PermissionContext=v.PermissionContext,exports.ProviderPermission=v.ProviderPermission,exports.usePermission=v.usePermission,exports.ProviderScreenWidth=q.ProviderScreenWidth,exports.ScreenWidthContext=q.ScreenWidthContext,exports.useScreenWidth=q.useScreenWidth,exports.DEFAULT_PROVIDER_SONNER_BUTTON=z.DEFAULT_PROVIDER_SONNER_BUTTON,exports.DEFAULT_PROVIDER_SONNER_DURATION=z.DEFAULT_PROVIDER_SONNER_DURATION,exports.DEFAULT_PROVIDER_SONNER_GENRE=z.DEFAULT_PROVIDER_SONNER_GENRE,exports.DEFAULT_PROVIDER_SONNER_MARGIN_BOTTOM=z.DEFAULT_PROVIDER_SONNER_MARGIN_BOTTOM,exports.DEFAULT_PROVIDER_SONNER_SCALE=z.DEFAULT_PROVIDER_SONNER_SCALE,exports.DEFAULT_PROVIDER_SONNER_Y=z.DEFAULT_PROVIDER_SONNER_Y,exports.DEFAULT_PROVIDER_SONNER_Z_INDEX=z.DEFAULT_PROVIDER_SONNER_Z_INDEX,exports.ProviderSonner=z.ProviderSonner,exports.SonnerButtonWrapper=z.SonnerButtonWrapper,exports.SonnerContent=z.SonnerContent,exports.SonnerContentDescription=z.SonnerContentDescription,exports.SonnerContentTitle=z.SonnerContentTitle,exports.SonnerContext=z.SonnerContext,exports.SonnerElementWrapper=z.SonnerElementWrapper,exports.SonnerIcon=z.SonnerIcon,exports.SonnerLayout=z.SonnerLayout,exports.useSonner=z.useSonner,exports.getContrastYIQ=f.getContrastYIQ,exports.getScrollbarWidth=f.getScrollbarWidth,exports.transformEnumToOptions=f.transformEnumToOptions,exports.transformObjectToArray=f.transformObjectToArray,exports.transformObjectValuesToKeys=f.transformObjectValuesToKeys,exports.useDebouncedCallback=V.useDebouncedCallback,exports.useDeepCompareMemoize=w.useDeepCompareMemoize,exports.addAlwaysOutline=K.addAlwaysOutline,exports.addColorTransition=K.addColorTransition,exports.addDisabled=K.addDisabled,exports.addFont=K.addFont,exports.addGridTransition=K.addGridTransition,exports.addNiceNumber=K.addNiceNumber,exports.addOutline=K.addOutline,exports.addOutlineChildren=K.addOutlineChildren,exports.addRemoveOutline=K.addRemoveOutline,exports.addRemoveScrollbar=K.addRemoveScrollbar,exports.addTransition=K.addTransition,exports.addTransitionWithoutSize=K.addTransitionWithoutSize,exports.ErrorMessage=X.ErrorMessage,exports.ErrorMessageComponent=X.ErrorMessageComponent,exports.addError=X.addError,exports.BlurIn=Z.BlurIn,exports.GradualSpacing=Z.GradualSpacing,exports.TypingEffect=Z.TypingEffect,exports.WordsPullUp=Z.WordsPullUp,exports.addSX=H.addSX,exports.JeneseiGlobalStyles=Y.JeneseiGlobalStyles,exports.JeneseiPalette=Y.JeneseiPalette,exports.KEY_SIZE_DATA=Y.KEY_SIZE_DATA,exports.KEY_SIZE_DATA_TOGGLE=Y.KEY_SIZE_DATA_TOGGLE,exports.ThemeBlack=Y.ThemeBlack,exports.ThemeLight=Y.ThemeLight;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./area-Dup_lUb9.cjs"),t=require("./area.hooks-C_UKZzcb.cjs"),o=require("./area-CZkDIeGx.cjs"),r=require("./area-CmCMHnRA.cjs"),p=require("./area-DRsIULcw.cjs"),s=require("./component-8NOxwZJO.cjs"),n=require("./component.styles-Py-IeQ2q.cjs"),a=require("./component-DnJo66DS.cjs"),i=require("./component-cRmWWDr_.cjs"),x=require("./component.styles-Bb7_KygZ.cjs"),c=require("./component.styles-DbWj2stq.cjs"),u=require("./component.types-CfR3RBsV.cjs"),l=require("./component.styles-BKnUDWqO.cjs"),d=require("./component.types-DraGq1j_.cjs"),S=require("./component.styles-CAN6t4un.cjs"),D=require("./component-DdJt3LEF.cjs"),I=require("./component.styles-DhBoJzIN.cjs"),E=require("./component.constants-eYn_2hvO.cjs"),T=require("./component--jGdo2yq.cjs"),_=require("./component.styles-BeRVOt5T.cjs"),A=require("./component.styles-gZHy-64x.cjs"),O=require("./component.components-CC3IeZon.cjs"),L=require("./component.constants-D6AJ1xmO.cjs"),C=require("./component.styles-ZU_GyVub.cjs"),m=require("./component.styles-Dpg-__rn.cjs"),P=require("./component-CLqcB5mM.cjs"),g=require("./component.styles-PNgt36ZD.cjs"),R=require("./component.styles-CLn52hJD.cjs"),N=require("./component-GKvpOWlO.cjs"),y=require("./component.styles-CsB9986a.cjs"),M=require("./component.styles-BELwxHxh.cjs"),h=require("./component-BVnHSTJd.cjs"),U=require("./component.functions-D9ffjEok.cjs"),F=require("./consts.cjs.js"),G=require("./context.hooks-XBiTuVyt.cjs"),k=require("./context.functions-80N-5MqM.cjs"),j=require("./context.constants-BLQ_1jZI.cjs"),W=require("./context.hooks-u408Pxw8.cjs"),B=require("./context.functions-ohI9H54j.cjs"),b=require("./context.functions-ar41xFVo.cjs"),v=require("./context.hooks-D13tbrva.cjs"),q=require("./context.hooks-BIsapq-0.cjs"),z=require("./context.constants-cm50ZUiS.cjs"),f=require("./functions.cjs.js"),V=require("./use-IhzeVumv.cjs"),w=require("./use-C1l0O0Qo.cjs"),K=require("./style-Df37KnoJ.cjs"),X=require("./style-D3Lbn1EL.cjs"),Z=require("./motion-DgB7M2Hn.cjs"),H=require("./style-fRZ6xrVp.cjs"),Y=require("./theme.global-CcoD5bPP.cjs");exports.Outside=e.Outside,exports.useRemovePreviewLoader=t.useRemovePreviewLoader,exports.Preview=o.Preview,exports.Scroll=r.Scroll,exports.StyledScroll=r.StyledScroll,exports.Skeleton=p.Skeleton,exports.StyledSkeleton=p.StyledSkeleton,exports.Smooth=s.Smooth,exports.Accordion=n.Accordion,exports.AccordionDetails=n.AccordionDetails,exports.AccordionStyledIcon=n.AccordionStyledIcon,exports.AccordionSummary=n.AccordionSummary,exports.AccordionSummaryContent=n.AccordionSummaryContent,exports.AccordionWrapper=n.AccordionWrapper,exports.Button=a.Button,exports.ButtonSize=a.ButtonSize,exports.ButtonSizeConstructor=a.ButtonSizeConstructor,exports.StyledButton=a.StyledButton,exports.StyledButtonIconsWrapper=a.StyledButtonIconsWrapper,exports.ButtonGroup=i.ButtonGroup,exports.ButtonGroupWrapper=i.ButtonGroupWrapper,exports.Checkbox=x.Checkbox,exports.CheckboxGenre=x.CheckboxGenre,exports.CheckboxSize=x.CheckboxSize,exports.CheckboxSizeConstructor=x.CheckboxSizeConstructor,exports.CheckboxWrapper=x.CheckboxWrapper,exports.StyledIcon=x.StyledIcon,exports.CheckboxChildren=c.CheckboxChildren,exports.CheckboxGroup=c.CheckboxGroup,exports.CheckboxGroupItem=c.CheckboxGroupItem,exports.CheckboxGroupLabel=c.CheckboxGroupLabel,exports.CheckboxGroupSize=c.CheckboxGroupSize,exports.CheckboxGroupSizeConstructor=c.CheckboxGroupSizeConstructor,exports.CheckboxGroupWrapper=c.CheckboxGroupWrapper,exports.DateDropdownDay=u.DateDropdownDay,exports.DateDropdownDayOfWeek=u.DateDropdownDayOfWeek,exports.DateDropdownDays=u.DateDropdownDays,exports.DateDropdownList=u.DateDropdownList,exports.DateDropdownListParent=u.DateDropdownListParent,exports.DateInput=u.DateInput,exports.DateInputButton=u.DateInputButton,exports.DateInputWrapper=u.DateInputWrapper,exports.DatePicker=u.DatePicker,exports.DatePickerVariant=u.DatePickerVariant,exports.DateWrapper=u.DateWrapper,exports.addDateDropdownDaySize=u.addDateDropdownDaySize,exports.addDateInputButtonSize=u.addDateInputButtonSize,exports.addDateInputWrapperSize=u.addDateInputWrapperSize,exports.Icon=l.Icon,exports.StyledSVG=l.StyledSVG,exports.ENUM_ICON_BUSTMARKET=d.ENUM_ICON_BUSTMARKET,exports.ENUM_ICON_CHECKBOX=d.ENUM_ICON_CHECKBOX,exports.ENUM_ICON_ID=d.ENUM_ICON_ID,exports.ENUM_ICON_LOADING=d.ENUM_ICON_LOADING,exports.ENUM_ICON_LOGO=d.ENUM_ICON_LOGO,exports.ENUM_ICON_REALEBAIL=d.ENUM_ICON_REALEBAIL,exports.Image=S.Image,exports.ImageIMG=S.ImageIMG,exports.ImageButton=D.ImageButton,exports.ImageSelect=I.ImageSelect,exports.ImageSelectListSize=I.ImageSelectListSize,exports.ImageSelectListSizeConstructor=I.ImageSelectListSizeConstructor,exports.ImageSelectListWrapper=I.ImageSelectListWrapper,exports.ImageSelectSize=I.ImageSelectSize,exports.ImageSelectSizeConstructor=I.ImageSelectSizeConstructor,exports.ImageSelectWrapper=I.ImageSelectWrapper,exports.IMAGES=E.IMAGES,exports.ImageSlider=E.ImageSlider,exports.SliderDot=E.SliderDot,exports.SliderImage=E.SliderImage,exports.Input=T.Input,exports.formatPhoneNumber=T.formatPhoneNumber,exports.InputPostfixChildren=_.InputPostfixChildren,exports.InputPrefixChildren=_.InputPrefixChildren,exports.InputSize=_.InputSize,exports.InputSizeConstructor=_.InputSizeConstructor,exports.StyledInput=_.StyledInput,exports.StyledInputCSS=_.StyledInputCSS,exports.StyledInputNumeric=_.StyledInputNumeric,exports.StyledInputPattern=_.StyledInputPattern,exports.StyledInputWrapper=_.StyledInputWrapper,exports.StyledMotionInput=_.StyledMotionInput,exports.addInputIsInputEffect=_.addInputIsInputEffect,exports.addInputPlaceholder=_.addInputPlaceholder,exports.addInputPlaceholderNiceNumber=_.addInputPlaceholderNiceNumber,exports.InputOTP=A.InputOTP,exports.InputOTPSize=A.InputOTPSize,exports.InputOTPSizeConstructor=A.InputOTPSizeConstructor,exports.InputOTPWrapper=A.InputOTPWrapper,exports.CustomZoomControl=O.CustomZoomControl,exports.DEFAULT_MAP_CENTER=O.DEFAULT_MAP_CENTER,exports.DEFAULT_MAP_MAX_ZOOM=O.DEFAULT_MAP_MAX_ZOOM,exports.DEFAULT_MAP_MIN_ZOOM=O.DEFAULT_MAP_MIN_ZOOM,exports.DEFAULT_MAP_THEME=O.DEFAULT_MAP_THEME,exports.DEFAULT_MAP_ZOOM=O.DEFAULT_MAP_ZOOM,exports.MapCluster=O.MapCluster,exports.MapDot=O.MapDot,exports.MapWrapper=O.MapWrapper,exports.MarkerCluster=O.MarkerCluster,exports.UpdateMapSettings=O.UpdateMapSettings,exports.createClusterIcon=O.createClusterIcon,exports.customDefaultIcon=O.customDefaultIcon,exports.customTextIcon=O.customTextIcon,exports.DEFAULT_COMPONENT_PAGINATION_GAP=L.DEFAULT_COMPONENT_PAGINATION_GAP,exports.Pagination=L.Pagination,exports.Range=C.Range,exports.RangeThumb=C.RangeThumb,exports.RangeTrack=C.RangeTrack,exports.RangeWrapper=C.RangeWrapper,exports.DEFAULT_RIPPLE_DURATION=m.DEFAULT_RIPPLE_DURATION,exports.DEFAULT_RIPPLE_ID=m.DEFAULT_RIPPLE_ID,exports.RippleContainer=m.RippleContainer,exports.RippleSpan=m.RippleSpan,exports.addRipple=m.addRipple,exports.addRippleDefault=m.addRippleDefault,exports.Ripple=P.Ripple,exports.ButtonList=g.ButtonList,exports.ContainerDropdownListOption=g.ContainerDropdownListOption,exports.ContainerSelectListOption=g.ContainerSelectListOption,exports.DropdownList=g.DropdownList,exports.DropdownListOption=g.DropdownListOption,exports.DropdownListOptionIcon=g.DropdownListOptionIcon,exports.DropdownListParent=g.DropdownListParent,exports.Select=g.Select,exports.SelectLanguage=g.SelectLanguage,exports.SelectList=g.SelectList,exports.SelectListOption=g.SelectListOption,exports.SelectMapTheme=g.SelectMapTheme,exports.SelectMonth=g.SelectMonth,exports.SelectMonths=g.SelectMonths,exports.SelectTextArea=g.SelectTextArea,exports.SelectWrapper=g.SelectWrapper,exports.SelectYear=g.SelectYear,exports.Separator=R.Separator,exports.SeparatorWrapper=R.SeparatorWrapper,exports.Stack=N.Stack,exports.StackMotion=N.StackMotion,exports.StyledStack=N.StyledStack,exports.StyledStackMotion=N.StyledStackMotion,exports.StyledTextArea=y.StyledTextArea,exports.TextArea=y.TextArea,exports.TextAreaWrapper=y.TextAreaWrapper,exports.addTextArea=y.addTextArea,exports.Toggle=M.Toggle,exports.ToggleCenter=M.ToggleCenter,exports.ToggleWrapper=M.ToggleWrapper,exports.DEFAULT_TOOLTIP_OFFSET_FALLBACK=h.DEFAULT_TOOLTIP_OFFSET_FALLBACK,exports.DEFAULT_TOOLTIP_PLACEMENT_FALLBACK=h.DEFAULT_TOOLTIP_PLACEMENT_FALLBACK,exports.Title=h.Title,exports.Tooltip=h.Tooltip,exports.TooltipBox=h.TooltipBox,exports.TooltipContainer=h.TooltipContainer,exports.TooltipContent=h.TooltipContent,exports.Typography=h.Typography,exports.TypographyLink=h.TypographyLink,exports.TypographyTooltip=h.TypographyTooltip,exports.addSXTypography=h.addSXTypography,exports.addTooltipBoxSize=h.addTooltipBoxSize,exports.addTooltipBoxSizeConstructor=h.addTooltipBoxSizeConstructor,exports.getFontSizeStyles=U.getFontSizeStyles,exports.ImageSupportedFormats=F.ImageSupportedFormats,exports.ImageSupportedFormatsForInput=F.ImageSupportedFormatsForInput,exports.KeysLanguage=F.KeysLanguage,exports.KeysService=F.KeysService,exports.ListLanguage=F.ListLanguage,exports.ListService=F.ListService,exports.LoremIpsumText=F.LoremIpsumText,exports.MapThemeList=F.MapThemeList,exports.ObjectLanguage=F.ObjectLanguage,exports.ObjectService=F.ObjectService,exports.localeInput=F.localeInput,exports.localeMonths=F.localeMonths,exports.localeWeeks=F.localeWeeks,exports.AppContext=G.AppContext,exports.ProviderApp=G.ProviderApp,exports.ProviderAppOutlet=G.ProviderAppOutlet,exports.ProviderAppOutletChildren=G.ProviderAppOutletChildren,exports.ProviderAppOutletFooter=G.ProviderAppOutletFooter,exports.ProviderAppOutletHeader=G.ProviderAppOutletHeader,exports.ProviderAppOutletLeftAside=G.ProviderAppOutletLeftAside,exports.ProviderAppOutletNav=G.ProviderAppOutletNav,exports.ProviderAppOutletNotification=G.ProviderAppOutletNotification,exports.ProviderAppOutletRightAside=G.ProviderAppOutletRightAside,exports.ProviderAppWrapper=G.ProviderAppWrapper,exports.useApp=G.useApp,exports.useBgColor=G.useBgColor,exports.useBgImage=G.useBgImage,exports.useDescription=G.useDescription,exports.useStatusBarColor=G.useStatusBarColor,exports.CookieContext=k.CookieContext,exports.ProviderCookie=k.ProviderCookie,exports.getFromCookie=k.getFromCookie,exports.setToCookie=k.setToCookie,exports.useCookie=k.useCookie,exports.DEFAULT_PROVIDER_DIALOG_DURATION_ELEMENT=j.DEFAULT_PROVIDER_DIALOG_DURATION_ELEMENT,exports.DEFAULT_PROVIDER_DIALOG_DURATION_LAYOUT=j.DEFAULT_PROVIDER_DIALOG_DURATION_LAYOUT,exports.DEFAULT_PROVIDER_DIALOG_ELEMENT_BACKGROUND=j.DEFAULT_PROVIDER_DIALOG_ELEMENT_BACKGROUND,exports.DEFAULT_PROVIDER_DIALOG_ELEMENT_BORDER_RADIUS=j.DEFAULT_PROVIDER_DIALOG_ELEMENT_BORDER_RADIUS,exports.DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_HEIGHT=j.DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_HEIGHT,exports.DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_WIDTH=j.DEFAULT_PROVIDER_DIALOG_ELEMENT_MAX_WIDTH,exports.DEFAULT_PROVIDER_DIALOG_ELEMENT_PADDING=j.DEFAULT_PROVIDER_DIALOG_ELEMENT_PADDING,exports.DialogContent=j.DialogContent,exports.DialogContext=j.DialogContext,exports.DialogElementWrapper=j.DialogElementWrapper,exports.DialogLayout=j.DialogLayout,exports.ProviderDialog=j.ProviderDialog,exports.useDialog=j.useDialog,exports.useDialogs=j.useDialogs,exports.GeolocationContext=W.GeolocationContext,exports.ProviderGeolocation=W.ProviderGeolocation,exports.useGeolocation=W.useGeolocation,exports.LocalStorageContext=B.LocalStorageContext,exports.ProviderLocalStorage=B.ProviderLocalStorage,exports.getFromLocalStorage=B.getFromLocalStorage,exports.setToLocalStorage=B.setToLocalStorage,exports.useLocalStorage=B.useLocalStorage,exports.urlBase64ToUint8Array=b.urlBase64ToUint8Array,exports.PermissionContext=v.PermissionContext,exports.ProviderPermission=v.ProviderPermission,exports.usePermission=v.usePermission,exports.ProviderScreenWidth=q.ProviderScreenWidth,exports.ScreenWidthContext=q.ScreenWidthContext,exports.useScreenWidth=q.useScreenWidth,exports.DEFAULT_PROVIDER_SONNER_BUTTON=z.DEFAULT_PROVIDER_SONNER_BUTTON,exports.DEFAULT_PROVIDER_SONNER_DURATION=z.DEFAULT_PROVIDER_SONNER_DURATION,exports.DEFAULT_PROVIDER_SONNER_GENRE=z.DEFAULT_PROVIDER_SONNER_GENRE,exports.DEFAULT_PROVIDER_SONNER_MARGIN_BOTTOM=z.DEFAULT_PROVIDER_SONNER_MARGIN_BOTTOM,exports.DEFAULT_PROVIDER_SONNER_SCALE=z.DEFAULT_PROVIDER_SONNER_SCALE,exports.DEFAULT_PROVIDER_SONNER_Y=z.DEFAULT_PROVIDER_SONNER_Y,exports.DEFAULT_PROVIDER_SONNER_Z_INDEX=z.DEFAULT_PROVIDER_SONNER_Z_INDEX,exports.ProviderSonner=z.ProviderSonner,exports.SonnerButtonWrapper=z.SonnerButtonWrapper,exports.SonnerContent=z.SonnerContent,exports.SonnerContentDescription=z.SonnerContentDescription,exports.SonnerContentTitle=z.SonnerContentTitle,exports.SonnerContext=z.SonnerContext,exports.SonnerElementWrapper=z.SonnerElementWrapper,exports.SonnerIcon=z.SonnerIcon,exports.SonnerLayout=z.SonnerLayout,exports.useSonner=z.useSonner,exports.getContrastYIQ=f.getContrastYIQ,exports.getScrollbarWidth=f.getScrollbarWidth,exports.transformEnumToOptions=f.transformEnumToOptions,exports.transformObjectToArray=f.transformObjectToArray,exports.transformObjectValuesToKeys=f.transformObjectValuesToKeys,exports.useDebouncedCallback=V.useDebouncedCallback,exports.useDeepCompareMemoize=w.useDeepCompareMemoize,exports.addAlwaysOutline=K.addAlwaysOutline,exports.addColorTransition=K.addColorTransition,exports.addDisabled=K.addDisabled,exports.addFont=K.addFont,exports.addGridTransition=K.addGridTransition,exports.addNiceNumber=K.addNiceNumber,exports.addOutline=K.addOutline,exports.addOutlineChildren=K.addOutlineChildren,exports.addRemoveOutline=K.addRemoveOutline,exports.addRemoveScrollbar=K.addRemoveScrollbar,exports.addTransition=K.addTransition,exports.addTransitionWithoutSize=K.addTransitionWithoutSize,exports.ErrorMessage=X.ErrorMessage,exports.ErrorMessageComponent=X.ErrorMessageComponent,exports.addError=X.addError,exports.BlurIn=Z.BlurIn,exports.GradualSpacing=Z.GradualSpacing,exports.TypingEffect=Z.TypingEffect,exports.WordsPullUp=Z.WordsPullUp,exports.addSX=H.addSX,exports.JeneseiGlobalStyles=Y.JeneseiGlobalStyles,exports.JeneseiPalette=Y.JeneseiPalette,exports.KEY_SIZE_DATA=Y.KEY_SIZE_DATA,exports.KEY_SIZE_DATA_TOGGLE=Y.KEY_SIZE_DATA_TOGGLE,exports.ThemeBlack=Y.ThemeBlack,exports.ThemeLight=Y.ThemeLight;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
package/build/index.es.js
CHANGED
|
@@ -12,10 +12,10 @@ import { f, C as C2, d as d3, e as e2, a as a7, b as b4, c as c4 } from "./compo
|
|
|
12
12
|
import { f as f2, g, d as d4, c as c5, b as b5, h, l, j, D, m, a as a8, e as e3, k, i } from "./component.types-BhmQrqBu.js";
|
|
13
13
|
import { I, S as S6 } from "./component.styles-DS0ofW1Y.js";
|
|
14
14
|
import { e as e4, a as a9, E, b as b6, d as d5, c as c6 } from "./component.types-BBQ18Npa.js";
|
|
15
|
-
import { I as I2, a as a10 } from "./component.styles-
|
|
15
|
+
import { I as I2, a as a10 } from "./component.styles-BYVYSgCZ.js";
|
|
16
16
|
import { I as I3 } from "./component-P-3bwi3_.js";
|
|
17
|
-
import { I as I4, a as a11, b as b7, f as f3, c as c7, d as d6, e as e5 } from "./component.styles-
|
|
18
|
-
import { b as b8, I as I5, a as a12, S as S7 } from "./component.constants-
|
|
17
|
+
import { I as I4, a as a11, b as b7, f as f3, c as c7, d as d6, e as e5 } from "./component.styles-Ba1VTyjn.js";
|
|
18
|
+
import { b as b8, I as I5, a as a12, S as S7 } from "./component.constants-COLayaiY.js";
|
|
19
19
|
import { I as I6, f as f4 } from "./component-DaXKDHnc.js";
|
|
20
20
|
import { k as k2, j as j2, I as I7, c as c8, f as f5, e as e6, i as i2, h as h2, S as S8, g as g2, d as d7, a as a13, b as b9 } from "./component.styles-BbwS_Ekx.js";
|
|
21
21
|
import { I as I8, a as a14, b as b10, c as c9 } from "./component.styles-BDKsgd6y.js";
|
package/package.json
CHANGED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("./area-DRsIULcw.cjs"),n=require("./component-GKvpOWlO.cjs"),o=require("react"),r=require("./style-Df37KnoJ.cjs"),s=require("./style-fRZ6xrVp.cjs"),i=require("styled-components").img`
|
|
2
|
-
position: absolute;
|
|
3
|
-
width: 100%;
|
|
4
|
-
height: 100%;
|
|
5
|
-
object-fit: cover;
|
|
6
|
-
opacity: ${e=>e.$isPending?0:1};
|
|
7
|
-
${r.addTransition};
|
|
8
|
-
${s.addSX};
|
|
9
|
-
`;exports.Image=r=>{const[s,l]=o.useState(!0),[a,c]=o.useState(!1);return o.useEffect(()=>{if(!r.src)return;const e=new window.Image;return e.onload=()=>{l(!1),c(!1)},e.onerror=()=>{l(!1),c(!0)},e.src=r.src,e.complete&&(e.naturalWidth>0?(l(!1),c(!1)):(l(!1),c(!0))),()=>{e.onload=null,e.onerror=null,l(!0),c(!1)}},[r.src]),e.jsxRuntimeExports.jsxs(n.Stack,{sx:e=>({...null==r?void 0:r.sxStack,default:{position:"relative",overflow:"hidden",...r.isShowBeforeImage?{"&::before":{width:"100%",height:"100%",content:'""',position:"absolute",inset:0,backgroundImage:`url(${r.src})`,backgroundRepeat:"no-repeat",backgroundSize:"cover",backgroundPosition:"center",filter:"blur(20px)",transform:"scale(1.1)",zIndex:0}}:{},...(null==r?void 0:r.sxStack)?"function"==typeof(null==r?void 0:r.sxStack)?null==r?void 0:r.sxStack(e).default:null==r?void 0:r.sxStack.default:{}}}),children:[a?null:r.componentLoading||s?e.jsxRuntimeExports.jsx(t.Skeleton,{visible:!0,sx:{default:{width:"100%",height:"100%"}}}):null,!a&&e.jsxRuntimeExports.jsx(i,{loading:"lazy",$isPending:s,src:r.src,alt:r.alt,$sx:r.sxImage}),a&&r.componentFallback||null]})},exports.ImageIMG=i;
|
|
10
|
-
//# sourceMappingURL=component.styles-B-bndnRM.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"component.styles-B-bndnRM.cjs","sources":["../src/components/image/component.styles.tsx","../src/components/image/component.tsx"],"sourcesContent":["import { addTransition } from '@local/styles/add';\nimport { addSX } from '@local/styles/sx';\n\nimport styled from 'styled-components';\n\nimport { ImageIMGProps } from '.';\n\nexport const ImageIMG = styled.img<ImageIMGProps>`\n position: absolute;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: ${(props) => (props.$isPending ? 0 : 1)};\n ${addTransition};\n ${addSX};\n`;\n","import { Skeleton } from '@local/areas/skeleton';\nimport { Stack } from '@local/components/stack';\n\nimport { FC, useEffect, useState } from 'react';\n\nimport { ImageIMG, ImageProps } from '.';\n\nexport const Image: FC<ImageProps> = (props) => {\n const [isPending, setIsPending] = useState(true);\n const [isError, setIsError] = useState(false);\n\n useEffect(() => {\n if (!props.src) return;\n\n const img = new (window.Image as { new (width?: number, height?: number): HTMLImageElement })();\n\n img.onload = () => {\n setIsPending(false);\n setIsError(false);\n };\n\n img.onerror = () => {\n setIsPending(false);\n setIsError(true);\n };\n\n img.src = props.src;\n\n if (img.complete) {\n if (img.naturalWidth > 0) {\n setIsPending(false);\n setIsError(false);\n } else {\n setIsPending(false);\n setIsError(true);\n }\n }\n\n return () => {\n img.onload = null;\n img.onerror = null;\n setIsPending(true);\n setIsError(false);\n };\n }, [props.src]);\n return (\n <Stack\n sx={(theme) => ({\n ...props?.sxStack,\n default: {\n position: 'relative',\n overflow: 'hidden',\n ...(props.isShowBeforeImage\n ? {\n '&::before': {\n width: '100%',\n height: '100%',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n backgroundImage: `url(${props.src})`,\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n filter: 'blur(20px)',\n transform: 'scale(1.1)',\n zIndex: 0,\n },\n }\n : {}),\n ...(props?.sxStack\n ? typeof props?.sxStack === 'function'\n ? props?.sxStack(theme).default\n : props?.sxStack.default\n : {}),\n },\n })}\n >\n {!isError ? (\n props.componentLoading || isPending ? (\n <Skeleton\n visible\n sx={{\n default: {\n width: '100%',\n height: '100%',\n },\n }}\n />\n ) : null\n ) : null}\n {!isError && (\n <ImageIMG loading='lazy' $isPending={isPending} src={props.src} alt={props.alt} $sx={props.sxImage} />\n )}\n {isError ? props.componentFallback || null : null}\n </Stack>\n );\n};\n"],"names":["ImageIMG","img","props","$isPending","addTransition","addSX","isPending","setIsPending","useState","isError","setIsError","useEffect","src","window","Image","onload","onerror","complete","naturalWidth","jsxs","Stack","sx","theme","sxStack","default","position","overflow","isShowBeforeImage","width","height","content","inset","backgroundImage","backgroundRepeat","backgroundSize","backgroundPosition","filter","transform","zIndex","children","componentLoading","jsx","Skeleton","visible","loading","alt","$sx","sxImage","componentFallback"],"mappings":"yNAOaA,+BAAkBC,GAAA;;;;;aAKjBC,GAAWA,EAAMC,WAAa,EAAI;IAC5CC;IACAC;gBCPkCH,IACpC,MAAOI,EAAWC,GAAgBC,EAAAA,UAAS,IACpCC,EAASC,GAAcF,EAAAA,UAAS,GAoCvC,OAlCAG,EAAAA,UAAU,KACR,IAAKT,EAAMU,IAAK,OAEhB,MAAMX,EAAM,IAAKY,OAAOC,MAwBxB,OAtBAb,EAAIc,OAAS,KACXR,GAAa,GACbG,GAAW,IAGbT,EAAIe,QAAU,KACZT,GAAa,GACbG,GAAW,IAGbT,EAAIW,IAAMV,EAAMU,IAEZX,EAAIgB,WACFhB,EAAIiB,aAAe,GACrBX,GAAa,GACbG,GAAW,KAEXH,GAAa,GACbG,GAAW,KAIR,KACLT,EAAIc,OAAS,KACbd,EAAIe,QAAU,KACdT,GAAa,GACbG,GAAW,KAEZ,CAACR,EAAMU,QAERO,kBAAAA,KAACC,EAAAA,MAAA,CACCC,GAAKC,IAAA,IACA,MAAApB,OAAA,EAAAA,EAAOqB,QACVC,QAAS,CACPC,SAAU,WACVC,SAAU,YACNxB,EAAMyB,kBACN,CACE,YAAa,CACXC,MAAO,OACPC,OAAQ,OACRC,QAAS,KACTL,SAAU,WACVM,MAAO,EACPC,gBAAiB,OAAO9B,EAAMU,OAC9BqB,iBAAkB,YAClBC,eAAgB,QAChBC,mBAAoB,SACpBC,OAAQ,aACRC,UAAW,aACXC,OAAQ,IAGZ,CAAA,MACA,MAAApC,OAAA,EAAAA,EAAOqB,SACmB,yBAAnBrB,WAAOqB,SACZ,MAAArB,OAAA,EAAAA,EAAOqB,QAAQD,GAAOE,QACtB,MAAAtB,OAAA,EAAAA,EAAOqB,QAAQC,QACjB,CAAA,KAIPe,SAAA,CAAC9B,EAYE,KAXFP,EAAMsC,kBAAoBlC,IACxBmC,kBAAAA,IAACC,EAAAA,SAAA,CACCC,SAAO,EACPtB,GAAI,CACFG,QAAS,CACPI,MAAO,OACPC,OAAQ,WAIZ,MAEJpB,GACAgC,EAAAA,kBAAAA,IAACzC,EAAA,CAAS4C,QAAQ,OAAOzC,WAAYG,EAAWM,IAAKV,EAAMU,IAAKiC,IAAK3C,EAAM2C,IAAKC,IAAK5C,EAAM6C,UAE5FtC,GAAUP,EAAM8C,mBAA4B"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"component.styles-BEaqQuF_.js","sources":["../src/components/image/component.tsx","../src/components/image/component.styles.tsx"],"sourcesContent":["import { Skeleton } from '@local/areas/skeleton';\nimport { Stack } from '@local/components/stack';\n\nimport { FC, useEffect, useState } from 'react';\n\nimport { ImageIMG, ImageProps } from '.';\n\nexport const Image: FC<ImageProps> = (props) => {\n const [isPending, setIsPending] = useState(true);\n const [isError, setIsError] = useState(false);\n\n useEffect(() => {\n if (!props.src) return;\n\n const img = new (window.Image as { new (width?: number, height?: number): HTMLImageElement })();\n\n img.onload = () => {\n setIsPending(false);\n setIsError(false);\n };\n\n img.onerror = () => {\n setIsPending(false);\n setIsError(true);\n };\n\n img.src = props.src;\n\n if (img.complete) {\n if (img.naturalWidth > 0) {\n setIsPending(false);\n setIsError(false);\n } else {\n setIsPending(false);\n setIsError(true);\n }\n }\n\n return () => {\n img.onload = null;\n img.onerror = null;\n setIsPending(true);\n setIsError(false);\n };\n }, [props.src]);\n return (\n <Stack\n sx={(theme) => ({\n ...props?.sxStack,\n default: {\n position: 'relative',\n overflow: 'hidden',\n ...(props.isShowBeforeImage\n ? {\n '&::before': {\n width: '100%',\n height: '100%',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n backgroundImage: `url(${props.src})`,\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n filter: 'blur(20px)',\n transform: 'scale(1.1)',\n zIndex: 0,\n },\n }\n : {}),\n ...(props?.sxStack\n ? typeof props?.sxStack === 'function'\n ? props?.sxStack(theme).default\n : props?.sxStack.default\n : {}),\n },\n })}\n >\n {!isError ? (\n props.componentLoading || isPending ? (\n <Skeleton\n visible\n sx={{\n default: {\n width: '100%',\n height: '100%',\n },\n }}\n />\n ) : null\n ) : null}\n {!isError && (\n <ImageIMG loading='lazy' $isPending={isPending} src={props.src} alt={props.alt} $sx={props.sxImage} />\n )}\n {isError ? props.componentFallback || null : null}\n </Stack>\n );\n};\n","import { addTransition } from '@local/styles/add';\nimport { addSX } from '@local/styles/sx';\n\nimport styled from 'styled-components';\n\nimport { ImageIMGProps } from '.';\n\nexport const ImageIMG = styled.img<ImageIMGProps>`\n position: absolute;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: ${(props) => (props.$isPending ? 0 : 1)};\n ${addTransition};\n ${addSX};\n`;\n"],"names":["jsxs","jsx"],"mappings":";;;;;;;AAOO,MAAM,QAAwB,CAAC,UAAU;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,YAAU,MAAM;AACd,QAAI,CAAC,MAAM,IAAK;AAEhB,UAAM,MAAM,IAAK,OAAO,MAAA;AAExB,QAAI,SAAS,MAAM;AACjB,mBAAa,KAAK;AAClB,iBAAW,KAAK;AAAA,IAAA;AAGlB,QAAI,UAAU,MAAM;AAClB,mBAAa,KAAK;AAClB,iBAAW,IAAI;AAAA,IAAA;AAGjB,QAAI,MAAM,MAAM;AAEhB,QAAI,IAAI,UAAU;AAChB,UAAI,IAAI,eAAe,GAAG;AACxB,qBAAa,KAAK;AAClB,mBAAW,KAAK;AAAA,MAAA,OACX;AACL,qBAAa,KAAK;AAClB,mBAAW,IAAI;AAAA,MAAA;AAAA,IACjB;AAGF,WAAO,MAAM;AACX,UAAI,SAAS;AACb,UAAI,UAAU;AACd,mBAAa,IAAI;AACjB,iBAAW,KAAK;AAAA,IAAA;AAAA,EAClB,GACC,CAAC,MAAM,GAAG,CAAC;AACd,SACEA,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,CAAC,WAAW;AAAA,QACd,GAAG,+BAAO;AAAA,QACV,SAAS;AAAA,UACP,UAAU;AAAA,UACV,UAAU;AAAA,UACV,GAAI,MAAM,oBACN;AAAA,YACE,aAAa;AAAA,cACX,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,UAAU;AAAA,cACV,OAAO;AAAA,cACP,iBAAiB,OAAO,MAAM,GAAG;AAAA,cACjC,kBAAkB;AAAA,cAClB,gBAAgB;AAAA,cAChB,oBAAoB;AAAA,cACpB,QAAQ;AAAA,cACR,WAAW;AAAA,cACX,QAAQ;AAAA,YAAA;AAAA,UACV,IAEF,CAAA;AAAA,UACJ,IAAI,+BAAO,WACP,QAAO,+BAAO,aAAY,aACxB,+BAAO,QAAQ,OAAO,UACtB,+BAAO,QAAQ,UACjB,CAAA;AAAA,QAAC;AAAA,MACP;AAAA,MAGD,UAAA;AAAA,QAAA,CAAC,UACA,MAAM,oBAAoB,YACxBC,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAO;AAAA,YACP,IAAI;AAAA,cACF,SAAS;AAAA,gBACP,OAAO;AAAA,gBACP,QAAQ;AAAA,cAAA;AAAA,YACV;AAAA,UACF;AAAA,QAAA,IAEA,OACF;AAAA,QACH,CAAC,WACAA,kCAAAA,IAAC,UAAA,EAAS,SAAQ,QAAO,YAAY,WAAW,KAAK,MAAM,KAAK,KAAK,MAAM,KAAK,KAAK,MAAM,SAAS;AAAA,QAErG,UAAU,MAAM,qBAAqB,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnD;AC1FO,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAKlB,CAAC,UAAW,MAAM,aAAa,IAAI,CAAE;AAAA,IAC9C,aAAa;AAAA,IACb,KAAK;AAAA;"}
|