@jenesei-software/jenesei-kit-react 1.3.9 → 1.3.10

package/build/{component.styles-DSle6iuF.cjs.map → component.styles-BKnUDWqO.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"component.styles-DSle6iuF.cjs","sources":["../src/components/icon/component.styles.ts","../src/components/icon/component.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nimport { addColorTransition } from '@local/styles/add'\nimport { addSX } from '@local/styles/sx'\nimport { KEY_SIZE_DATA } from '@local/theme'\n\nimport { StyledIconIdItemProps } from '.'\n\nexport const StyledSVG = styled.svg<StyledIconIdItemProps>`\n  color: ${props => (props.$color ? props.theme.palette[props.$color] : 'inherit')};\n\n  ${props => css`\n    height: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n    min-height: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n\n    width: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n    min-width: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n\n    transform: rotate(${props.$turn || 0}deg);\n  `}\n  ${props =>\n    props.$order !== undefined &&\n    css`\n      order: ${props.$order};\n    `};\n  ${addColorTransition};\n  & path {\n    ${addColorTransition};\n  }\n  ${addSX};\n`\n","import { JeneseiPalette } from '@local/theme/theme';\n\nimport { useMemo } from 'react';\n\nimport IconBustMarketJSON from './component-bustmarket.json';\nimport IconCheckboxJSON from './component-checkbox.json';\nimport IconIdJSON from './component-id.json';\nimport IconLoadingJSON from './component-loading.json';\nimport IconLogoJSON from './component-logo.json';\nimport IconRealEbailJSON from './component-realebail.json';\nimport {\n  IconItemProps,\n  IconTypeMap,\n  StyledSVG,\n  TIconBustMarketNameString,\n  TIconCheckboxNameString,\n  TIconIdNameString,\n  TIconLoadingNameString,\n  TIconLogoNameString,\n  TIconRealEbailNameString,\n} from '.';\n\nexport const Icon = <T extends keyof IconTypeMap>(props: IconItemProps<T>) => {\n  const icon = useMemo(() => {\n    let icon = null;\n\n    switch (props.type) {\n      case 'id':\n        icon = IconIdJSON[props.name as TIconIdNameString];\n        break;\n      case 'bustmarket':\n        icon = IconBustMarketJSON[props.name as TIconBustMarketNameString];\n        break;\n      case 'realebail':\n        icon = IconRealEbailJSON[props.name as TIconRealEbailNameString];\n        break;\n      case 'logo':\n        icon = IconLogoJSON[props.name as TIconLogoNameString];\n        break;\n      case 'checkbox':\n        icon = IconCheckboxJSON[props.name as TIconCheckboxNameString];\n        break;\n      case 'loading':\n        icon = IconLoadingJSON[props.name as TIconLoadingNameString];\n        break;\n    }\n    return icon;\n  }, [props.name, props.type]);\n\n  const primaryColor = props.primaryColor ? JeneseiPalette[props.primaryColor] : 'currentColor';\n  const secondColor = props.secondColor ? JeneseiPalette[props.secondColor] : 'currentColor';\n\n  if (!icon) {\n    console.warn(`Icon ${props.name} not found in the library.`);\n    return null;\n  }\n\n  const getFillColor = (fillType?: string): string | undefined => {\n    if (fillType === 'primaryColor') return primaryColor;\n    if (fillType === 'secondColor') return secondColor;\n    return 'currentColor';\n  };\n\n  const contentPaths =\n    (props.type == 'id' || props.type === 'checkbox' || props.type === 'realebail' || props.type === 'logo') &&\n    typeof icon === 'object' &&\n    'paths' in icon\n      ? (icon.paths ?? []).map((path, index) => (\n          <path\n            key={`${props.type}-${props.name}-path-${index}`}\n            id={'id' in path ? (path.id as string) : undefined}\n            d={path.d}\n            clipRule='evenodd'\n            fillRule='evenodd'\n            fill={'fill' in path ? getFillColor(path.fill as string) : 'currentColor'}\n          />\n        ))\n      : null;\n\n  const isFull = props.type === 'loading' || props.type === 'bustmarket' ? (icon as string) : null;\n\n  return (\n    <StyledSVG\n      width='24'\n      height='24'\n      viewBox='0 0 24 24'\n      xmlns='http://www.w3.org/2000/svg'\n      $size={props.size}\n      $turn={props.turn}\n      $order={props.order}\n      $color={props.primaryColor || undefined}\n      $sx={props.sx}\n      className={props.className}\n      onClick={props.onClick}\n      tabIndex={props.tabIndex}\n      dangerouslySetInnerHTML={isFull ? { __html: isFull } : undefined}\n    >\n      {contentPaths}\n    </StyledSVG>\n  );\n};\n"],"names":["StyledSVG","styled","svg","props","$color","theme","palette","css","$size","KEY_SIZE_DATA","heightIcon","$turn","$order","addColorTransition","addSX","icon","useMemo","type","IconIdJSON","name","IconBustMarketJSON","IconRealEbailJSON","IconLogoJSON","IconCheckboxJSON","IconLoadingJSON","primaryColor","JeneseiPalette","secondColor","console","warn","contentPaths","paths","map","path","index","jsx","id","d","clipRule","fillRule","fill","fillType","isFull","width","height","viewBox","xmlns","size","turn","order","$sx","sx","className","onClick","tabIndex","dangerouslySetInnerHTML","__html","children"],"mappings":"g03PAQaA,EAAYC,EAAOC,GAAA;WACrBC,GAAUA,EAAMC,OAASD,EAAME,MAAMC,QAAQH,EAAMC,QAAU;;IAEpED,GAASI,EAAAA,GAAAA;cACiB,SAAhBJ,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;kBACpD,SAAhBP,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;;aAE7D,SAAhBP,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;iBACpD,SAAhBP,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;;wBAEjEP,EAAMQ,OAAS;;IAEnCR,QACiB,IAAjBA,EAAMS,QACNL,EAAAA,GAAAA;eACWJ,EAAMS;;IAEjBC;;MAEEA;;IAEFC;eCP8CX,IAChD,MAAMY,EAAOC,EAAAA,QAAQ,KACnB,IAAID,EAAO,KAEX,OAAQZ,EAAMc,MACZ,IAAK,KACHF,EAAOG,EAAWf,EAAMgB,MACxB,MACF,IAAK,aACHJ,EAAOK,EAAmBjB,EAAMgB,MAChC,MACF,IAAK,YACHJ,EAAOM,EAAkBlB,EAAMgB,MAC/B,MACF,IAAK,OACHJ,EAAOO,EAAanB,EAAMgB,MAC1B,MACF,IAAK,WACHJ,EAAOQ,EAAiBpB,EAAMgB,MAC9B,MACF,IAAK,UACHJ,EAAOS,EAAgBrB,EAAMgB,MAGjC,OAAOJ,GACN,CAACZ,EAAMgB,KAAMhB,EAAMc,OAEhBQ,EAAetB,EAAMsB,aAAeC,EAAAA,eAAevB,EAAMsB,cAAgB,eACzEE,EAAcxB,EAAMwB,YAAcD,EAAAA,eAAevB,EAAMwB,aAAe,eAE5E,IAAKZ,EAEH,OADAa,QAAQC,KAAK,QAAQ1B,EAAMgB,kCACpB,KAGT,MAMMW,EACW,MAAd3B,EAAMc,MAA+B,aAAfd,EAAMc,MAAsC,cAAfd,EAAMc,MAAuC,SAAfd,EAAMc,MACxE,iBAATF,KACP,UAAWA,GAWP,MAVCA,EAAKgB,OAAS,IAAIC,IAAI,CAACC,EAAMC,KAC5BC,SAAAA,kBAAAA,IAAC,OAAA,CAECC,GAAI,OAAQH,EAAQA,EAAKG,QAAgB,EACzCC,EAAGJ,EAAKI,EACRC,SAAS,UACTC,SAAS,UACTC,KAAM,SAAUP,GAjBJQ,EAiBwBR,EAAKO,KAhBhC,iBAAbC,EAAoChB,EACvB,gBAAbgB,EAAmCd,EAChC,gBAc4D,gBALtD,GAAGxB,EAAMc,QAAQd,EAAMgB,aAAae,KAZ9B,IAACO,IAsBhBC,EAAwB,YAAfvC,EAAMc,MAAqC,eAAfd,EAAMc,KAAyBF,EAAkB,KAE5F,SACEoB,kBAAAA,IAACnC,EAAA,CACC2C,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,MAAM,6BACNtC,MAAOL,EAAM4C,KACbpC,MAAOR,EAAM6C,KACbpC,OAAQT,EAAM8C,MACd7C,OAAQD,EAAMsB,mBAAgB,EAC9ByB,IAAK/C,EAAMgD,GACXC,UAAWjD,EAAMiD,UACjBC,QAASlD,EAAMkD,QACfC,SAAUnD,EAAMmD,SAChBC,wBAAyBb,EAAS,CAAEc,OAAQd,QAAW,EAEtDe,SAAA3B"}
+{"version":3,"file":"component.styles-BKnUDWqO.cjs","sources":["../src/components/icon/component.styles.ts","../src/components/icon/component.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nimport { addColorTransition } from '@local/styles/add'\nimport { addSX } from '@local/styles/sx'\nimport { KEY_SIZE_DATA } from '@local/theme'\n\nimport { StyledIconIdItemProps } from '.'\n\nexport const StyledSVG = styled.svg<StyledIconIdItemProps>`\n  color: ${props => (props.$color ? props.theme.palette[props.$color] : 'inherit')};\n\n  ${props => css`\n    height: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n    min-height: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n\n    width: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n    min-width: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n\n    transform: rotate(${props.$turn || 0}deg);\n  `}\n  ${props =>\n    props.$order !== undefined &&\n    css`\n      order: ${props.$order};\n    `};\n  ${addColorTransition};\n  & path {\n    ${addColorTransition};\n  }\n  ${addSX};\n`\n","import { JeneseiPalette } from '@local/theme/theme';\n\nimport { useMemo } from 'react';\n\nimport IconBustMarketJSON from './component-bustmarket.json';\nimport IconCheckboxJSON from './component-checkbox.json';\nimport IconIdJSON from './component-id.json';\nimport IconLoadingJSON from './component-loading.json';\nimport IconLogoJSON from './component-logo.json';\nimport IconRealEbailJSON from './component-realebail.json';\nimport {\n  IconItemProps,\n  IconTypeMap,\n  StyledSVG,\n  TIconBustMarketNameString,\n  TIconCheckboxNameString,\n  TIconIdNameString,\n  TIconLoadingNameString,\n  TIconLogoNameString,\n  TIconRealEbailNameString,\n} from '.';\n\nexport const Icon = <T extends keyof IconTypeMap>(props: IconItemProps<T>) => {\n  const icon = useMemo(() => {\n    let icon = null;\n\n    switch (props.type) {\n      case 'id':\n        icon = IconIdJSON[props.name as TIconIdNameString];\n        break;\n      case 'bustmarket':\n        icon = IconBustMarketJSON[props.name as TIconBustMarketNameString];\n        break;\n      case 'realebail':\n        icon = IconRealEbailJSON[props.name as TIconRealEbailNameString];\n        break;\n      case 'logo':\n        icon = IconLogoJSON[props.name as TIconLogoNameString];\n        break;\n      case 'checkbox':\n        icon = IconCheckboxJSON[props.name as TIconCheckboxNameString];\n        break;\n      case 'loading':\n        icon = IconLoadingJSON[props.name as TIconLoadingNameString];\n        break;\n    }\n    return icon;\n  }, [props.name, props.type]);\n\n  const primaryColor = props.primaryColor ? JeneseiPalette[props.primaryColor] : 'currentColor';\n  const secondColor = props.secondColor ? JeneseiPalette[props.secondColor] : 'currentColor';\n\n  if (!icon) {\n    console.warn(`Icon ${props.name} not found in the library.`);\n    return null;\n  }\n\n  const getFillColor = (fillType?: string): string | undefined => {\n    if (fillType === 'primaryColor') return primaryColor;\n    if (fillType === 'secondColor') return secondColor;\n    return 'currentColor';\n  };\n\n  const contentPaths =\n    (props.type == 'id' || props.type === 'checkbox' || props.type === 'realebail' || props.type === 'logo') &&\n    typeof icon === 'object' &&\n    'paths' in icon\n      ? (icon.paths ?? []).map((path, index) => (\n          <path\n            key={`${props.type}-${props.name}-path-${index}`}\n            id={'id' in path ? (path.id as string) : undefined}\n            d={path.d}\n            clipRule='evenodd'\n            fillRule='evenodd'\n            fill={'fill' in path ? getFillColor(path.fill as string) : 'currentColor'}\n          />\n        ))\n      : null;\n\n  const isFull = props.type === 'loading' || props.type === 'bustmarket' ? (icon as string) : null;\n\n  return (\n    <StyledSVG\n      width='24'\n      height='24'\n      viewBox='0 0 24 24'\n      xmlns='http://www.w3.org/2000/svg'\n      $size={props.size}\n      $turn={props.turn}\n      $order={props.order}\n      $color={props.primaryColor || undefined}\n      $sx={props.sx}\n      className={props.className}\n      onClick={props.onClick}\n      tabIndex={props.tabIndex}\n      dangerouslySetInnerHTML={isFull ? { __html: isFull } : undefined}\n    >\n      {contentPaths}\n    </StyledSVG>\n  );\n};\n"],"names":["StyledSVG","styled","svg","props","$color","theme","palette","css","$size","KEY_SIZE_DATA","heightIcon","$turn","$order","addColorTransition","addSX","icon","useMemo","type","IconIdJSON","name","IconBustMarketJSON","IconRealEbailJSON","IconLogoJSON","IconCheckboxJSON","IconLoadingJSON","primaryColor","JeneseiPalette","secondColor","console","warn","contentPaths","paths","map","path","index","jsx","id","d","clipRule","fillRule","fill","fillType","isFull","width","height","viewBox","xmlns","size","turn","order","$sx","sx","className","onClick","tabIndex","dangerouslySetInnerHTML","__html","children"],"mappings":"g03PAQaA,EAAYC,EAAOC,GAAA;WACrBC,GAAUA,EAAMC,OAASD,EAAME,MAAMC,QAAQH,EAAMC,QAAU;;IAEpED,GAASI,EAAAA,GAAAA;cACiB,SAAhBJ,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;kBACpD,SAAhBP,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;;aAE7D,SAAhBP,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;iBACpD,SAAhBP,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;;wBAEjEP,EAAMQ,OAAS;;IAEnCR,QACiB,IAAjBA,EAAMS,QACNL,EAAAA,GAAAA;eACWJ,EAAMS;;IAEjBC;;MAEEA;;IAEFC;eCP8CX,IAChD,MAAMY,EAAOC,EAAAA,QAAQ,KACnB,IAAID,EAAO,KAEX,OAAQZ,EAAMc,MACZ,IAAK,KACHF,EAAOG,EAAWf,EAAMgB,MACxB,MACF,IAAK,aACHJ,EAAOK,EAAmBjB,EAAMgB,MAChC,MACF,IAAK,YACHJ,EAAOM,EAAkBlB,EAAMgB,MAC/B,MACF,IAAK,OACHJ,EAAOO,EAAanB,EAAMgB,MAC1B,MACF,IAAK,WACHJ,EAAOQ,EAAiBpB,EAAMgB,MAC9B,MACF,IAAK,UACHJ,EAAOS,EAAgBrB,EAAMgB,MAGjC,OAAOJ,GACN,CAACZ,EAAMgB,KAAMhB,EAAMc,OAEhBQ,EAAetB,EAAMsB,aAAeC,EAAAA,eAAevB,EAAMsB,cAAgB,eACzEE,EAAcxB,EAAMwB,YAAcD,EAAAA,eAAevB,EAAMwB,aAAe,eAE5E,IAAKZ,EAEH,OADAa,QAAQC,KAAK,QAAQ1B,EAAMgB,kCACpB,KAGT,MAMMW,EACW,MAAd3B,EAAMc,MAA+B,aAAfd,EAAMc,MAAsC,cAAfd,EAAMc,MAAuC,SAAfd,EAAMc,MACxE,iBAATF,KACP,UAAWA,GAWP,MAVCA,EAAKgB,OAAS,IAAIC,IAAI,CAACC,EAAMC,KAC5BC,SAAAA,kBAAAA,IAAC,OAAA,CAECC,GAAI,OAAQH,EAAQA,EAAKG,QAAgB,EACzCC,EAAGJ,EAAKI,EACRC,SAAS,UACTC,SAAS,UACTC,KAAM,SAAUP,GAjBJQ,EAiBwBR,EAAKO,KAhBhC,iBAAbC,EAAoChB,EACvB,gBAAbgB,EAAmCd,EAChC,gBAc4D,gBALtD,GAAGxB,EAAMc,QAAQd,EAAMgB,aAAae,KAZ9B,IAACO,IAsBhBC,EAAwB,YAAfvC,EAAMc,MAAqC,eAAfd,EAAMc,KAAyBF,EAAkB,KAE5F,SACEoB,kBAAAA,IAACnC,EAAA,CACC2C,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,MAAM,6BACNtC,MAAOL,EAAM4C,KACbpC,MAAOR,EAAM6C,KACbpC,OAAQT,EAAM8C,MACd7C,OAAQD,EAAMsB,mBAAgB,EAC9ByB,IAAK/C,EAAMgD,GACXC,UAAWjD,EAAMiD,UACjBC,QAASlD,EAAMkD,QACfC,SAAUnD,EAAMmD,SAChBC,wBAAyBb,EAAS,CAAEc,OAAQd,QAAW,EAEtDe,SAAA3B"}

package/build/{component.styles-DLU0S0KI.cjs → component.styles-BTsmbWT6.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("./area-C3wR_pPr.cjs"),n=require("./component-BV_7tGiu.cjs"),o=require("react"),r=require("./style-mc2ST5fY.cjs"),s=require("./style-fRZ6xrVp.cjs"),i=require("styled-components").img`
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("./area-oZm7ewxw.cjs"),n=require("./component-BV_7tGiu.cjs"),o=require("react"),r=require("./style-Df37KnoJ.cjs"),s=require("./style-fRZ6xrVp.cjs"),i=require("styled-components").img`
   position: absolute;
   width: 100%;
   height: 100%;
@@ -7,4 +7,4 @@
   ${r.addTransition};
   ${s.addSX};
 `;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;
-//# sourceMappingURL=component.styles-DLU0S0KI.cjs.map
+//# sourceMappingURL=component.styles-BTsmbWT6.cjs.map

package/build/{component.styles-DLU0S0KI.cjs.map → component.styles-BTsmbWT6.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"component.styles-DLU0S0KI.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;;;;;aAKlBC,GAAUA,EAAMC,WAAa,EAAI;IAC1CC;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"}
+{"version":3,"file":"component.styles-BTsmbWT6.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;;;;;aAKlBC,GAAUA,EAAMC,WAAa,EAAI;IAC1CC;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"}

package/build/{component.styles-DYS_AJ9F.js → component.styles-BbwS_Ekx.js}

@@ -1,8 +1,7 @@
-import { g as getFontSizeStyles } from "./component-BoHvC24Q.js";
-import { j as addNiceNumber, k as addDisabled, f as addOutline, b as addTransition } from "./style-BgcnmVAY.js";
-import { a as addError } from "./style-BQ653xOS.js";
+import { c as addFont, k as addNiceNumber, l as addDisabled, g as addOutline, b as addTransition } from "./style-RL73t3JD.js";
+import { a as addError } from "./style-uVTmdhsH.js";
 import { a as addSX } from "./style-plT9Ah7t.js";
-import { K as KEY_SIZE_DATA } from "./theme.global-CFUz5Asg.js";
+import { K as KEY_SIZE_DATA } from "./theme.global-BgERDJ4e.js";
 import { motion } from "framer-motion";
 import React__default, { useRef, useState, useEffect, useLayoutEffect, useMemo } from "react";
 import styled, { css } from "styled-components";
@@ -1221,12 +1220,12 @@ const StyledInputWrapper = styled.div`
 const addInputPlaceholder = css`
   &::placeholder,
   &::-webkit-input-placeholder {
-    ${(props) => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};
+    ${addFont};
     color: ${(props) => props.theme.colors.input[props.$genre].color.placeholder};
     opacity: 1;
   }
   &:-ms-input-placeholder {
-    ${(props) => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};
+    ${addFont};
     color: ${(props) => props.theme.colors.input[props.$genre].color.placeholder};
     opacity: 1;
   }
@@ -1234,14 +1233,14 @@ const addInputPlaceholder = css`
 const addInputPlaceholderNiceNumber = css`
   &::placeholder,
   &::-webkit-input-placeholder {
-    ${(props) => getFontSizeStyles(16, props.$isBold ? 500 : 400, "Roboto Mono", props.theme.font.lineHeight)};
+    ${addFont};
     color: ${(props) => props.theme.colors.input[props.$genre].color.placeholder};
     opacity: 1;
     ${addNiceNumber};
     background: transparent;
   }
   &:-ms-input-placeholder {
-    ${(props) => getFontSizeStyles(16, props.$isBold ? 500 : 400, "Roboto Mono", props.theme.font.lineHeight)};
+    ${addFont};
     color: ${(props) => props.theme.colors.input[props.$genre].color.placeholder};
     opacity: 1;
     ${addNiceNumber};
@@ -1296,8 +1295,8 @@ const StyledInputCSS = css`
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  ${(props) => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};
 
+  ${addFont};
   ${InputSize};
   ${InputGenre};
   ${addInputPlaceholder};
@@ -1368,4 +1367,4 @@ export {
   InputPrefixChildren as j,
   InputPostfixChildren as k
 };
-//# sourceMappingURL=component.styles-DYS_AJ9F.js.map
+//# sourceMappingURL=component.styles-BbwS_Ekx.js.map