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

package/build/{component.styles-Bm3Ec-Kd.js.map → component.styles-DS0ofW1Y.js.map}

@@ -1 +1 @@
-{"version":3,"file":"component.styles-Bm3Ec-Kd.js","sources":["../src/components/icon/component.tsx","../src/components/icon/component.styles.ts"],"sourcesContent":["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","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"],"names":["icon","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"component.styles-DS0ofW1Y.js","sources":["../src/components/icon/component.tsx","../src/components/icon/component.styles.ts"],"sourcesContent":["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","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"],"names":["icon","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,OAAO,CAA8B,UAA4B;AAC5E,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAIA,QAAO;AAEX,YAAQ,MAAM,MAAA;AAAA,MACZ,KAAK;AACHA,gBAAO,WAAW,MAAM,IAAyB;AACjD;AAAA,MACF,KAAK;AACHA,gBAAO,mBAAmB,MAAM,IAAiC;AACjE;AAAA,MACF,KAAK;AACHA,gBAAO,kBAAkB,MAAM,IAAgC;AAC/D;AAAA,MACF,KAAK;AACHA,gBAAO,aAAa,MAAM,IAA2B;AACrD;AAAA,MACF,KAAK;AACHA,gBAAO,iBAAiB,MAAM,IAA+B;AAC7D;AAAA,MACF,KAAK;AACHA,gBAAO,gBAAgB,MAAM,IAA8B;AAC3D;AAAA,IAAA;AAEJ,WAAOA;AAAAA,EAAA,GACN,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAE3B,QAAM,eAAe,MAAM,eAAe,eAAe,MAAM,YAAY,IAAI;AAC/E,QAAM,cAAc,MAAM,cAAc,eAAe,MAAM,WAAW,IAAI;AAE5E,MAAI,CAAC,MAAM;AACT,YAAQ,KAAK,QAAQ,MAAM,IAAI,4BAA4B;AAC3D,WAAO;AAAA,EAAA;AAGT,QAAM,eAAe,CAAC,aAA0C;AAC9D,QAAI,aAAa,eAAgB,QAAO;AACxC,QAAI,aAAa,cAAe,QAAO;AACvC,WAAO;AAAA,EAAA;AAGT,QAAM,gBACH,MAAM,QAAQ,QAAQ,MAAM,SAAS,cAAc,MAAM,SAAS,eAAe,MAAM,SAAS,WACjG,OAAO,SAAS,YAChB,WAAW,QACN,KAAK,SAAS,CAAA,GAAI,IAAI,CAAC,MAAM,UAC5BC,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MAEC,IAAI,QAAQ,OAAQ,KAAK,KAAgB;AAAA,MACzC,GAAG,KAAK;AAAA,MACR,UAAS;AAAA,MACT,UAAS;AAAA,MACT,MAAM,UAAU,OAAO,aAAa,KAAK,IAAc,IAAI;AAAA,IAAA;AAAA,IALtD,GAAG,MAAM,IAAI,IAAI,MAAM,IAAI,SAAS,KAAK;AAAA,EAAA,CAOjD,IACD;AAEN,QAAM,SAAS,MAAM,SAAS,aAAa,MAAM,SAAS,eAAgB,OAAkB;AAE5F,SACEA,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,OAAO,MAAM;AAAA,MACb,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM;AAAA,MACd,QAAQ,MAAM,gBAAgB;AAAA,MAC9B,KAAK,MAAM;AAAA,MACX,WAAW,MAAM;AAAA,MACjB,SAAS,MAAM;AAAA,MACf,UAAU,MAAM;AAAA,MAChB,yBAAyB,SAAS,EAAE,QAAQ,WAAW;AAAA,MAEtD,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AC5FO,MAAM,YAAY,OAAO;AAAA,WACrB,CAAA,UAAU,MAAM,SAAS,MAAM,MAAM,QAAQ,MAAM,MAAM,IAAI,SAAU;AAAA;AAAA,IAE9E,CAAA,UAAS;AAAA,cACC,MAAM,UAAU,SAAS,GAAG,cAAc,MAAM,KAAK,EAAE,UAAU,OAAO,MAAM;AAAA,kBAC1E,MAAM,UAAU,SAAS,GAAG,cAAc,MAAM,KAAK,EAAE,UAAU,OAAO,MAAM;AAAA;AAAA,aAEnF,MAAM,UAAU,SAAS,GAAG,cAAc,MAAM,KAAK,EAAE,UAAU,OAAO,MAAM;AAAA,iBAC1E,MAAM,UAAU,SAAS,GAAG,cAAc,MAAM,KAAK,EAAE,UAAU,OAAO,MAAM;AAAA;AAAA,wBAEvE,MAAM,SAAS,CAAC;AAAA,GACrC;AAAA,IACC,CAAA,UACA,MAAM,WAAW,UACjB;AAAA,eACW,MAAM,MAAM;AAAA,KACtB;AAAA,IACD,kBAAkB;AAAA;AAAA,MAEhB,kBAAkB;AAAA;AAAA,IAEpB,KAAK;AAAA;"}

package/build/component.styles-DWGUgUoF.cjs

@@ -0,0 +1,21 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),i=require("./component.styles-BpvpyZax.cjs"),l=require("./theme.global-CcoD5bPP.cjs"),o=require("react"),s=require("styled-components"),n=require("./style-Df37KnoJ.cjs"),t=require("./style-fRZ6xrVp.cjs"),r=s.css`
+  ${e=>d(l.KEY_SIZE_DATA[e.$size])};
+`,d=e=>s.css`
+  gap: ${e.padding-2}px;
+`,c=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  ${r};
+  ${n.addFont};
+  ${t.addSX};
+`,u=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`,a=s.div`
+  user-select: none;
+`,x=s.div`
+  user-select: none;
+`;exports.CheckboxChildren=x,exports.CheckboxGroup=n=>{var t,r,d,h;const p=o.useCallback(e=>{const i=n.value.some(i=>i[n.valueField]===e[n.valueField])?n.value.filter(i=>i[n.valueField]!==e[n.valueField]):n.multiple?[...n.value,e]:[e];n.onChange&&n.onChange(i)},[n]),v=s.useTheme();return e.jsxRuntimeExports.jsx(c,{className:n.className,$sx:n.sx,$size:n.size,$font:{size:(null==(t=n.font)?void 0:t.size)??l.KEY_SIZE_DATA[n.size].font,weight:(null==(r=n.font)?void 0:r.weight)??700,family:(null==(d=n.font)?void 0:d.family)??v.font.family,height:null==(h=n.font)?void 0:h.height},children:n.options.map((o,s)=>{var t,r,d,c;const h=n.value.some(e=>e[n.valueField]===o[n.valueField]);return e.jsxRuntimeExports.jsxs(u,{onClick:()=>!n.isClickOnlyIcon&&p(o),children:[e.jsxRuntimeExports.jsx(i.Checkbox,{genre:n.checkboxGenre,isHiddenBorder:n.checkboxIsHiddenBorder,view:n.checkBoxView,sx:n.checkboxSX,size:n.size,checked:h,font:{size:(null==(t=n.font)?void 0:t.size)??l.KEY_SIZE_DATA[n.size].font,weight:(null==(r=n.font)?void 0:r.weight)??700,family:(null==(d=n.font)?void 0:d.family)??v.font.family,height:null==(c=n.font)?void 0:c.height},children:n.labelField&&void 0!==(null==o?void 0:o[n.labelField])&&e.jsxRuntimeExports.jsx(a,{dangerouslySetInnerHTML:(m=o[n.labelField],{__html:m})})}),n.childrenField&&void 0!==(null==o?void 0:o[n.childrenField])&&e.jsxRuntimeExports.jsx(x,{children:o[n.childrenField]})]},s);var m})})},exports.CheckboxGroupItem=u,exports.CheckboxGroupLabel=a,exports.CheckboxGroupSize=r,exports.CheckboxGroupSizeConstructor=d,exports.CheckboxGroupWrapper=c;
+//# sourceMappingURL=component.styles-DWGUgUoF.cjs.map

package/build/component.styles-DWGUgUoF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-DWGUgUoF.cjs","sources":["../src/components/checkbox-group/component.styles.ts","../src/components/checkbox-group/component.tsx"],"sourcesContent":["import { addFont } from '@local/styles/add';\nimport { addSX } from '@local/styles/sx';\nimport { IThemeSizePropertyDefault, KEY_SIZE_DATA } from '@local/theme';\n\nimport styled, { css } from 'styled-components';\n\nimport { CheckboxGroupWrapperProps } from '.';\n\n/****************************************** Size *************************************************/\nexport const CheckboxGroupSize = css<CheckboxGroupWrapperProps>`\n  ${(props) => CheckboxGroupSizeConstructor(KEY_SIZE_DATA[props.$size])};\n`;\nexport const CheckboxGroupSizeConstructor = (props: IThemeSizePropertyDefault) => css`\n  gap: ${props.padding - 2}px;\n`;\n\n/****************************************** Default *************************************************/\nexport const CheckboxGroupWrapper = styled.div<CheckboxGroupWrapperProps>`\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  ${CheckboxGroupSize};\n  ${addFont};\n  ${addSX};\n`;\n\nexport const CheckboxGroupItem = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const CheckboxGroupLabel = styled.div`\n  user-select: none;\n`;\n\nexport const CheckboxChildren = styled.div`\n  user-select: none;\n`;\n","import { Checkbox } from '@local/components/checkbox';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { ReactNode, useCallback } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport {\n  CheckboxChildren,\n  CheckboxGroupItem,\n  CheckboxGroupLabel,\n  CheckboxGroupProps,\n  CheckboxGroupWrapper,\n  ICheckboxValue,\n} from '.';\n\nexport const CheckboxGroup = <T extends ICheckboxValue>(props: CheckboxGroupProps<T>) => {\n  const createMarkup = (html: string) => ({ __html: html });\n\n  const handleCheckboxChange = useCallback(\n    (item: T) => {\n      const isSelected = props.value.some((selectedItem) => selectedItem[props.valueField] === item[props.valueField]);\n\n      const updatedSelectedItems = isSelected\n        ? props.value.filter((selectedItem) => selectedItem[props.valueField] !== item[props.valueField])\n        : props.multiple\n          ? [...props.value, item]\n          : [item];\n      if (props.onChange) props.onChange(updatedSelectedItems);\n    },\n    [props],\n  );\n\n  const theme = useTheme();\n  return (\n    <CheckboxGroupWrapper\n      className={props.className}\n      $sx={props.sx}\n      $size={props.size}\n      $font={{\n        size: props.font?.size ?? KEY_SIZE_DATA[props.size].font,\n        weight: props.font?.weight ?? 700,\n        family: props.font?.family ?? theme.font.family,\n        height: props.font?.height,\n      }}\n    >\n      {props.options.map((e, index) => {\n        const isChecked = props.value.some((selectedItem) => selectedItem[props.valueField] === e[props.valueField]);\n        return (\n          <CheckboxGroupItem key={index} onClick={() => !props.isClickOnlyIcon && handleCheckboxChange(e)}>\n            <Checkbox\n              genre={props.checkboxGenre}\n              isHiddenBorder={props.checkboxIsHiddenBorder}\n              view={props.checkBoxView}\n              sx={props.checkboxSX}\n              size={props.size}\n              checked={isChecked}\n              font={{\n                size: props.font?.size ?? KEY_SIZE_DATA[props.size].font,\n                weight: props.font?.weight ?? 700,\n                family: props.font?.family ?? theme.font.family,\n                height: props.font?.height,\n              }}\n            >\n              {props.labelField && e?.[props.labelField] !== undefined && (\n                <CheckboxGroupLabel dangerouslySetInnerHTML={createMarkup(e[props.labelField] as string)} />\n              )}\n            </Checkbox>\n            {props.childrenField && e?.[props.childrenField] !== undefined && (\n              <CheckboxChildren>{e[props.childrenField] as ReactNode}</CheckboxChildren>\n            )}\n          </CheckboxGroupItem>\n        );\n      })}\n    </CheckboxGroupWrapper>\n  );\n};\n"],"names":["CheckboxGroupSize","css","props","CheckboxGroupSizeConstructor","KEY_SIZE_DATA","$size","padding","CheckboxGroupWrapper","styled","div","addFont","addSX","CheckboxGroupItem","CheckboxGroupLabel","CheckboxChildren","handleCheckboxChange","useCallback","item","updatedSelectedItems","value","some","selectedItem","valueField","filter","multiple","onChange","theme","useTheme","jsx","className","$sx","sx","size","$font","_a","font","weight","_b","family","_c","height","_d","children","options","map","e","index","isChecked","jsxs","onClick","isClickOnlyIcon","Checkbox","genre","checkboxGenre","isHiddenBorder","checkboxIsHiddenBorder","view","checkBoxView","checkboxSX","checked","labelField","dangerouslySetInnerHTML","html","__html","childrenField"],"mappings":"uQASaA,EAAoBC,EAAAA,GAAAA;IAC5BC,GAAUC,EAA6BC,EAAAA,cAAcF,EAAMG;EAEnDF,EAAgCD,GAAqCD,EAAAA,GAAAA;SACzEC,EAAMI,QAAU;EAIZC,EAAuBC,EAAOC,GAAA;;;;IAIvCT;IACAU;IACAC;EAGSC,EAAoBJ,EAAOC,GAAA;;;;EAM3BI,EAAqBL,EAAOC,GAAA;;EAI5BK,EAAmBN,EAAOC,GAAA;;mDCrBiBP,gBACtD,MAEMa,EAAuBC,EAAAA,YAC1BC,IACC,MAEMC,EAFahB,EAAMiB,MAAMC,KAAMC,GAAiBA,EAAanB,EAAMoB,cAAgBL,EAAKf,EAAMoB,aAGhGpB,EAAMiB,MAAMI,OAAQF,GAAiBA,EAAanB,EAAMoB,cAAgBL,EAAKf,EAAMoB,aACnFpB,EAAMsB,SACJ,IAAItB,EAAMiB,MAAOF,GACjB,CAACA,GACHf,EAAMuB,UAAUvB,EAAMuB,SAASP,IAErC,CAAChB,IAGGwB,EAAQC,EAAAA,WACd,SACEC,kBAAAA,IAACrB,EAAA,CACCsB,UAAW3B,EAAM2B,UACjBC,IAAK5B,EAAM6B,GACX1B,MAAOH,EAAM8B,KACbC,MAAO,CACLD,MAAM,OAAAE,IAAMC,WAAN,EAAAD,EAAYF,OAAQ5B,EAAAA,cAAcF,EAAM8B,MAAMG,KACpDC,QAAQ,OAAAC,EAAAnC,EAAMiC,WAAN,EAAAE,EAAYD,SAAU,IAC9BE,QAAQ,OAAAC,EAAArC,EAAMiC,WAAN,EAAAI,EAAYD,SAAUZ,EAAMS,KAAKG,OACzCE,OAAQ,OAAAC,EAAAvC,EAAMiC,WAAN,EAAAM,EAAYD,QAGrBE,SAAAxC,EAAMyC,QAAQC,IAAI,CAACC,EAAGC,iBACrB,MAAMC,EAAY7C,EAAMiB,MAAMC,KAAMC,GAAiBA,EAAanB,EAAMoB,cAAgBuB,EAAE3C,EAAMoB,aAChG,OACE0B,yBAACpC,GAA8BqC,QAAS,KAAO/C,EAAMgD,iBAAmBnC,EAAqB8B,GAC3FH,SAAA,GAAAd,kBAAAA,IAACuB,EAAAA,SAAA,CACCC,MAAOlD,EAAMmD,cACbC,eAAgBpD,EAAMqD,uBACtBC,KAAMtD,EAAMuD,aACZ1B,GAAI7B,EAAMwD,WACV1B,KAAM9B,EAAM8B,KACZ2B,QAASZ,EACTZ,KAAM,CACJH,MAAM,OAAAE,EAAAhC,EAAMiC,WAAN,EAAAD,EAAYF,OAAQ5B,EAAAA,cAAcF,EAAM8B,MAAMG,KACpDC,QAAQ,OAAAC,EAAAnC,EAAMiC,WAAN,EAAAE,EAAYD,SAAU,IAC9BE,QAAQ,OAAAC,EAAArC,EAAMiC,aAANI,EAAYD,SAAUZ,EAAMS,KAAKG,OACzCE,OAAQ,OAAAC,EAAAvC,EAAMiC,aAANM,EAAYD,QAGrBE,SAAAxC,EAAM0D,iBAAwC,WAA1Bf,WAAI3C,EAAM0D,cAC7BhC,EAAAA,kBAAAA,IAACf,EAAA,CAAmBgD,yBAhDZC,EAgDkDjB,EAAE3C,EAAM0D,YAhD1D,CAAoBG,OAAQD,QAmDvC5D,EAAM8D,oBAA8C,KAA7B,MAAAnB,OAAA,EAAAA,EAAI3C,EAAM8D,iBAChCpC,wBAACd,EAAA,CAAkB4B,SAAAG,EAAE3C,EAAM8D,mBApBPlB,GAhCX,IAACgB"}

package/build/{component.styles-DX_3POUD.js → component.styles-DjoG6jr2.js}

@@ -2,8 +2,8 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
 import { useCallback } from "react";
 import { b as Stack } from "./component-jPZYT5iL.js";
 import styled, { css } from "styled-components";
-import { I as Icon } from "./component.styles-Bm3Ec-Kd.js";
-import { b as addTransition } from "./style-BgcnmVAY.js";
+import { I as Icon } from "./component.styles-DS0ofW1Y.js";
+import { b as addTransition } from "./style-RL73t3JD.js";
 const Accordion = (props) => {
   const onClickSummary = useCallback(() => {
     if (props.onClickSummary) props.onClickSummary();
@@ -78,4 +78,4 @@ export {
   AccordionDetails as d,
   AccordionStyledIcon as e
 };
-//# sourceMappingURL=component.styles-DX_3POUD.js.map
+//# sourceMappingURL=component.styles-DjoG6jr2.js.map

package/build/{component.styles-DX_3POUD.js.map → component.styles-DjoG6jr2.js.map}

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

package/build/{component.styles-Bfhg18CX.cjs → component.styles-Dpo373cZ.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),o=require("react"),n=require("./component-BV_7tGiu.cjs"),r=require("styled-components"),c=require("./component.styles-DSle6iuF.cjs"),i=require("./style-mc2ST5fY.cjs"),s=r.div`
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),o=require("react"),n=require("./component-BV_7tGiu.cjs"),r=require("styled-components"),c=require("./component.styles-BKnUDWqO.cjs"),i=require("./style-Df37KnoJ.cjs"),s=r.div`
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -29,4 +29,4 @@
           transform: rotate(0deg);
         `}
 `;exports.Accordion=r=>{const c=o.useCallback(()=>{r.onClickSummary&&r.onClickSummary()},[r]),i=o.useCallback(e=>{r.onClickIcon&&(e.stopPropagation(),r.onClickIcon())},[r]);return e.jsxRuntimeExports.jsx(n.Stack,{...r.wrapperProps,children:e.jsxRuntimeExports.jsxs(s,{children:[e.jsxRuntimeExports.jsxs(t,{onClick:c,children:[e.jsxRuntimeExports.jsx(d,{$isAccordionIcon:r.isAccordionIcon,children:r.accordionSummary}),r.isAccordionIcon&&e.jsxRuntimeExports.jsx(x,{$expanded:r.expanded,onClick:i,name:"Arrow1",primaryColor:"black100",type:"id",size:"large"})]}),e.jsxRuntimeExports.jsx(a,{$expanded:r.expanded,children:r.accordionDetails})]})})},exports.AccordionDetails=a,exports.AccordionStyledIcon=x,exports.AccordionSummary=t,exports.AccordionSummaryContent=d,exports.AccordionWrapper=s;
-//# sourceMappingURL=component.styles-Bfhg18CX.cjs.map
+//# sourceMappingURL=component.styles-Dpo373cZ.cjs.map

package/build/{component.styles-Bfhg18CX.cjs.map → component.styles-Dpo373cZ.cjs.map}

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

package/build/{component.styles-v0YYECwW.js → component.styles-VrNFgg1_.js}

@@ -1,12 +1,13 @@
 import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
-import { b as ErrorMessage, a as addError } from "./style-BQ653xOS.js";
-import { m as useMergeRefs, g as getFontSizeStyles } from "./component-BoHvC24Q.js";
+import { b as ErrorMessage, a as addError } from "./style-uVTmdhsH.js";
+import { u as useMergeRefs } from "./floating-ui.react-Byi6bLb1.js";
 import { useRef, useMemo, useCallback, useEffect } from "react";
 import styled, { useTheme, css } from "styled-components";
-import { c as addTransitionWithoutSize, k as addDisabled, g as addOutlineChildren, i as addRemoveOutline } from "./style-BgcnmVAY.js";
+import { d as addTransitionWithoutSize, l as addDisabled, h as addOutlineChildren, c as addFont, j as addRemoveOutline } from "./style-RL73t3JD.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";
 const TextArea = (props) => {
+  var _a, _b, _c, _d, _e;
   const theme = useTheme();
   const refLocal = useRef(null);
   const ref = useMergeRefs([refLocal, props.ref]);
@@ -29,12 +30,12 @@ const TextArea = (props) => {
   }, [props.isAutoHeight, maxHeight]);
   const handleOnChange = useCallback(
     (value) => {
-      var _a, _b;
+      var _a2, _b2;
       if (props.isNoSpaces) {
         const valueWithoutSpaces = value.replace(/\s+/g, "");
-        (_a = props.onChange) == null ? void 0 : _a.call(props, valueWithoutSpaces);
+        (_a2 = props.onChange) == null ? void 0 : _a2.call(props, valueWithoutSpaces);
       } else {
-        (_b = props.onChange) == null ? void 0 : _b.call(props, value);
+        (_b2 = props.onChange) == null ? void 0 : _b2.call(props, value);
       }
     },
     [props]
@@ -50,6 +51,8 @@ const TextArea = (props) => {
       {
         $isInputEffect: props.isInputEffect,
         $isDisabled: props.isDisabled,
+        $isDisabledOutline: props.isDisabled ?? props.isDisabledOutline,
+        $isOutlineBoxShadow: props.isOutlineBoxShadow,
         $sx: props.sx,
         $genre: props.genre,
         $size: props.size,
@@ -62,6 +65,12 @@ const TextArea = (props) => {
           {
             tabIndex: 0,
             ref,
+            $font: {
+              size: ((_a = props.font) == null ? void 0 : _a.size) ?? 16,
+              weight: ((_b = props.font) == null ? void 0 : _b.weight) ?? (props.isBold ? 500 : 400),
+              family: ((_c = props.font) == null ? void 0 : _c.family) ?? theme.font.family,
+              height: ((_d = props.font) == null ? void 0 : _d.height) ?? `${lineHeight}px`
+            },
             $lineHeight: lineHeight,
             $isResize: props.isResize,
             $error: props.error,
@@ -95,7 +104,18 @@ const TextArea = (props) => {
         )
       }
     ),
-    (props == null ? void 0 : props.error) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorMessage, { ...props.error, size: (props == null ? void 0 : props.error.size) ?? props.size }) : null
+    (props == null ? void 0 : props.error) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ErrorMessage,
+      {
+        ...props.error,
+        size: (props == null ? void 0 : props.error.size) ?? props.size,
+        font: {
+          size: 12,
+          weight: 400,
+          family: ((_e = props.font) == null ? void 0 : _e.family) ?? theme.font.family
+        }
+      }
+    ) : null
   ] });
 };
 const addTextAreaWrapperGenre = css`
@@ -153,12 +173,12 @@ const TextAreaWrapper = styled.div`
 const addTextAreaPlaceholder = 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;
   }
@@ -193,8 +213,8 @@ const addTextArea = css`
   text-overflow: ellipsis;
   height: auto;
   background-color: transparent;
-  ${(props) => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, `${props.$lineHeight}px`)};
 
+  ${addFont};
   ${addTextAreaGenre};
   ${addTextAreaIsResize};
   ${addTextAreaPlaceholder};
@@ -210,4 +230,4 @@ export {
   TextAreaWrapper as a,
   addTextArea as b
 };
-//# sourceMappingURL=component.styles-v0YYECwW.js.map
+//# sourceMappingURL=component.styles-VrNFgg1_.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-VrNFgg1_.js","sources":["../src/components/textarea/component.tsx","../src/components/textarea/component.styles.ts"],"sourcesContent":["import { ErrorMessage } from '@local/styles/error';\n\nimport { useMergeRefs } from '@floating-ui/react';\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { StyledTextArea, TextAreaProps, TextAreaWrapper } from '.';\n\nexport const TextArea = (props: TextAreaProps) => {\n  const theme = useTheme();\n\n  const refLocal = useRef<HTMLTextAreaElement>(null);\n  const ref = useMergeRefs([refLocal, props.ref]);\n\n  const lineHeight = useMemo(\n    () => theme.font.sizeDefault.default * theme.font.lineHeight,\n    [theme.font.lineHeight, theme.font.sizeDefault.default],\n  );\n  const maxHeight = useMemo(() => (props.maxRows ? props.maxRows * lineHeight : 0), [lineHeight, props.maxRows]);\n  const minHeight = useMemo(\n    () => (props.minRows ? props.minRows * lineHeight : lineHeight),\n    [lineHeight, props.minRows],\n  );\n\n  const resizeTextarea = useCallback(() => {\n    const el = refLocal.current;\n    if (el && props.isAutoHeight) {\n      el.style.height = 'auto';\n      const newHeight = Math.min(el.scrollHeight, maxHeight);\n      el.style.height = `${newHeight}px`;\n    }\n  }, [props.isAutoHeight, maxHeight]);\n\n  const handleOnChange = useCallback(\n    (value: string) => {\n      if (props.isNoSpaces) {\n        const valueWithoutSpaces = value.replace(/\\s+/g, '');\n        props.onChange?.(valueWithoutSpaces);\n      } else {\n        props.onChange?.(value);\n      }\n    },\n    [props],\n  );\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n  useEffect(() => {\n    if (props.isAutoHeight) {\n      requestAnimationFrame(resizeTextarea);\n    }\n  }, [props.value, resizeTextarea, props.isAutoHeight]);\n  return (\n    <>\n      <TextAreaWrapper\n        $isInputEffect={props.isInputEffect}\n        $isDisabled={props.isDisabled}\n        $isDisabledOutline={props.isDisabled ?? props.isDisabledOutline}\n        $isOutlineBoxShadow={props.isOutlineBoxShadow}\n        $sx={props.sx}\n        $genre={props.genre}\n        $size={props.size}\n        $lineHeight={lineHeight}\n        $isReadOnly={props.isReadOnly}\n        className={props.className}\n        tabIndex={-1}\n      >\n        <StyledTextArea\n          tabIndex={0}\n          ref={ref}\n          $font={{\n            size: props.font?.size ?? 16,\n            weight: props.font?.weight ?? (props.isBold ? 500 : 400),\n            family: props.font?.family ?? theme.font.family,\n            height: props.font?.height ?? `${lineHeight}px`,\n          }}\n          $lineHeight={lineHeight}\n          $isResize={props.isResize}\n          $error={props.error}\n          $isInputEffect={props.isInputEffect}\n          $isLoading={props.isLoading}\n          $genre={props.genre}\n          $size={props.size}\n          $isBold={props.isBold}\n          $isDisabled={props.isDisabled}\n          maxLength={props.maxLength}\n          minLength={props.minLength}\n          disabled={props.isDisabled}\n          readOnly={props.isReadOnly}\n          required={props.isRequired}\n          defaultValue={props.defaultValue === null ? '' : props.defaultValue}\n          value={props.value === null ? '' : props.value}\n          rows={props.minRows}\n          placeholder={props.placeholder}\n          onChange={(event) => handleOnChange(event.target.value)}\n          onBlur={props.onBlur}\n          onFocus={props.onFocus}\n          onKeyDown={props.onKeyDown}\n          name={props.name}\n          autoComplete={props.autoComplete}\n          id={props.id}\n          style={{\n            minHeight: `${minHeight}px`,\n            maxHeight: props.isResize ? 'none' : props.isAutoHeight ? `${maxHeight}px` : `${minHeight}px`,\n          }}\n        />\n      </TextAreaWrapper>\n      {props?.error ? (\n        <ErrorMessage\n          {...props.error}\n          size={props?.error.size ?? props.size}\n          font={{\n            size: 12,\n            weight: 400,\n            family: props.font?.family ?? theme.font.family,\n          }}\n        />\n      ) : null}\n    </>\n  );\n};\n","import {\n  addDisabled,\n  addFont,\n  addOutlineChildren,\n  addRemoveOutline,\n  addTransitionWithoutSize,\n} from '@local/styles/add';\nimport { addError } from '@local/styles/error';\nimport { addSX } from '@local/styles/sx';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport styled, { css } from 'styled-components';\n\nimport { StyledTextAreaProps, TextAreaWrapperProps } from '.';\n\n/****************************************** Wrapper *************************************************/\nconst addTextAreaWrapperGenre = css<TextAreaWrapperProps>`\n  ${(props) => css`\n    background: ${props.theme.colors.input[props.$genre].background.rest};\n    border-color: ${props.theme.colors.input[props.$genre].border.rest};\n    color: ${props.theme.colors.input[props.$genre].color.rest};\n\n    &:active {\n      background: ${props.theme.colors.input[props.$genre].background.rest};\n      border-color: ${props.theme.colors.input[props.$genre].border.rest};\n      color: ${props.theme.colors.input[props.$genre].color.rest};\n    }\n    &:hover {\n      background: ${props.theme.colors.input[props.$genre].background.hover};\n      border-color: ${props.theme.colors.input[props.$genre].border.hover};\n      color: ${props.theme.colors.input[props.$genre].color.hover};\n    }\n    &:focus-visible {\n      border-color: ${props.theme.colors.input[props.$genre].border.rest};\n      background: ${props.theme.colors.input[props.$genre].background.rest};\n      color: ${props.theme.colors.input[props.$genre].color.rest};\n    }\n  `};\n`;\n\nconst addTextAreaWrapperIsInputEffect = css<Pick<TextAreaWrapperProps, '$isInputEffect'>>`\n  ${(props) =>\n    props.$isInputEffect &&\n    css`\n      box-shadow: ${props.theme.effects.input};\n    `}\n`;\nconst addTextAreaWrapperSize = css<TextAreaWrapperProps>`\n  ${(props) => css`\n    padding: ${KEY_SIZE_DATA[props.$size].padding - 4}px ${KEY_SIZE_DATA[props.$size].padding}px ${KEY_SIZE_DATA[props.$size].padding - 4}px ${KEY_SIZE_DATA[props.$size].padding}px;\n    border-radius: ${KEY_SIZE_DATA[props.$size].radius}px;\n    min-height: ${KEY_SIZE_DATA[props.$size].height}px;\n  `};\n`;\n\nexport const TextAreaWrapper = styled.div<TextAreaWrapperProps>`\n  border: 1px solid;\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-direction: column;\n  overflow: hidden;\n  width: 100%;\n  ${addTransitionWithoutSize};\n  ${addTextAreaWrapperSize};\n  ${addTextAreaWrapperGenre};\n  ${addTextAreaWrapperIsInputEffect};\n  ${addDisabled};\n  ${addOutlineChildren};\n  ${addSX};\n`;\n\n/****************************************** TextArea *************************************************/\nconst addTextAreaPlaceholder = css<StyledTextAreaProps>`\n  &::placeholder,\n  &::-webkit-input-placeholder {\n    ${addFont};\n    color: ${(props) => props.theme.colors.input[props.$genre].color.placeholder};\n    opacity: 1;\n  }\n  &:-ms-input-placeholder {\n    ${addFont};\n    color: ${(props) => props.theme.colors.input[props.$genre].color.placeholder};\n    opacity: 1;\n  }\n`;\nconst addTextAreaGenre = css<StyledTextAreaProps>`\n  ${(props) => css`\n    color: ${props.theme.colors.input[props.$genre].color.rest};\n    border-color: transparent;\n    &:active {\n      color: ${props.theme.colors.input[props.$genre].color.rest};\n    }\n    &:hover {\n      color: ${props.theme.colors.input[props.$genre].color.hover};\n    }\n    &:focus-visible {\n      color: ${props.theme.colors.input[props.$genre].color.rest};\n    }\n  `};\n`;\nconst addTextAreaIsResize = css<Pick<StyledTextAreaProps, '$isResize'>>`\n  ${(props) =>\n    !props.$isResize &&\n    css`\n      resize: none;\n    `}\n`;\nexport const addTextArea = css<StyledTextAreaProps>`\n  overflow-x: hidden;\n  width: -webkit-fill-available;\n  padding: 0 !important;\n  border: none !important;\n  margin: 0 !important;\n  white-space: normal;\n  text-overflow: ellipsis;\n  height: auto;\n  background-color: transparent;\n\n  ${addFont};\n  ${addTextAreaGenre};\n  ${addTextAreaIsResize};\n  ${addTextAreaPlaceholder};\n  ${addRemoveOutline};\n  ${addError};\n`;\n\nexport const StyledTextArea = styled.textarea<StyledTextAreaProps>`\n  ${addTextArea};\n`;\n"],"names":["_a","_b","jsxs","Fragment","jsx"],"mappings":"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"}

package/build/{component.styles-DhAMCZ71.cjs → component.styles-ZU_GyVub.cjs}

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

package/build/{component.styles-DhAMCZ71.cjs.map → component.styles-ZU_GyVub.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"component.styles-DhAMCZ71.cjs","sources":["../src/components/range/component.styles.ts","../src/components/range/component.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nimport { addError } from '@local/styles/error'\nimport { addSX } from '@local/styles/sx'\n\nimport { RangeComponentProps, RangeThumbProps, RangeWrapperProps } from '.'\n\nexport const RangeWrapper = styled.div<RangeWrapperProps>`\n  position: relative;\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  align-items: center;\n  height: 20px;\n  ${addError};\n  ${addSX};\n`\n\nexport const RangeTrack = styled.div<RangeComponentProps>`\n  position: absolute;\n  height: 3px;\n  width: 100%;\n  padding: 0px 10px;\n  border-radius: 2px;\n`\nexport const RangeThumb = styled.input<RangeThumbProps>`\n  position: absolute;\n  width: 100%;\n  outline: none !important;\n  pointer-events: none;\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  left: 0;\n  margin: 0;\n  &::-webkit-slider-thumb {\n    pointer-events: all;\n    width: 16px;\n    height: 16px;\n    margin: 0;\n    padding: 0;\n    border-radius: 50%;\n    background: ${props => props.$colorBackground};\n    border: 3px ${props => props.$colorBorder} solid;\n    cursor: pointer;\n    -webkit-appearance: none;\n    margin-top: 0px;\n    transition:\n      transform ${props => props.theme.transition.default},\n      color ${props => props.theme.transition.default},\n      background-color ${props => props.theme.transition.default};\n    &:hover {\n      transform: scale(1.2);\n    }\n  }\n`\n","import { useCallback, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\n\nimport { RangeProps, RangeThumb, RangeTrack, RangeWrapper } from '.'\n\nexport const Range = (props: RangeProps) => {\n  const { onChange } = props\n  const handleChange = useCallback(\n    (index: number, newValue: number) => {\n      const newValues = [...props.values]\n      newValues[index] = Math.min(props.max, Math.max(props.min, newValue))\n      onChange(newValues.sort((a, b) => a - b))\n    },\n    [onChange, props.max, props.min, props.values]\n  )\n  const getThumbPositionPercent = useCallback(\n    (val: number) => ((val - props.min) / (props.max - props.min)) * 100,\n    [props.max, props.min]\n  )\n  const positions = useMemo(\n    () => props.values.map(val => getThumbPositionPercent(val)),\n    [getThumbPositionPercent, props.values]\n  )\n  const theme = useTheme()\n\n  const colorTrackBackground = theme.colors.range[props.genre].track.background.rest\n  const colorTrackGradient = theme.colors.range[props.genre].track.gradient.rest\n  const colorThumbBorder = theme.colors.range[props.genre].thumb.border.rest\n  const colorThumbBackground = theme.colors.range[props.genre].thumb.background.rest\n\n  const trackGradient = useMemo(\n    () =>\n      positions\n        .map((position, idx) => {\n          const isFirst = idx === 0\n          const isLast = idx === positions.length - 1\n\n          if (isFirst)\n            return `${colorTrackBackground} 0%, ${colorTrackBackground} ${position}%, ${colorTrackGradient} ${position}%`\n          if (isLast)\n            return `${colorTrackGradient} ${position}%, ${colorTrackBackground} ${position}%, ${colorTrackBackground} 100%`\n          return `${colorTrackGradient} ${position}%`\n        })\n        .join(', '),\n    [colorTrackGradient, colorTrackBackground, positions]\n  )\n  const gradient = useMemo(() => `linear-gradient(to right, ${trackGradient})`, [trackGradient])\n\n  return (\n    <RangeWrapper $size={props.size} $sx={props.sx} $error={props.error} onBlur={props.onBlur}>\n      {props.values.map((val, idx) => (\n        <RangeThumb\n          key={idx}\n          type=\"range\"\n          $size={props.size}\n          $genre={props.genre}\n          min={props.min}\n          max={props.max}\n          step={props.step}\n          value={val}\n          onChange={e => handleChange(idx, parseFloat(e.target.value))}\n          style={{ zIndex: 100 + idx }}\n          $colorBackground={colorThumbBackground}\n          $colorBorder={colorThumbBorder}\n        />\n      ))}\n      <RangeTrack\n        $size={props.size}\n        $genre={props.genre}\n        style={{\n          background: gradient\n        }}\n      />\n    </RangeWrapper>\n  )\n}\n"],"names":["RangeWrapper","styled","div","addError","addSX","RangeTrack","RangeThumb","input","props","$colorBackground","$colorBorder","theme","transition","default","onChange","handleChange","useCallback","index","newValue","newValues","values","Math","min","max","sort","a","b","getThumbPositionPercent","val","positions","useMemo","map","useTheme","colorTrackBackground","colors","range","genre","track","background","rest","colorTrackGradient","gradient","colorThumbBorder","thumb","border","colorThumbBackground","trackGradient","position","idx","isFirst","isLast","length","join","jsxs","$size","size","$sx","sx","$error","error","onBlur","children","jsx","type","$genre","step","value","parseFloat","e","target","style","zIndex"],"mappings":"iLAOaA,EAAeC,EAAOC,GAAA;;;;;;;IAO/BC;IACAC;EAGSC,EAAaJ,EAAOC,GAAA;;;;;;EAOpBI,EAAaL,EAAOM,KAAA;;;;;;;;;;;;;;;;;kBAiBfC,GAASA,EAAMC;kBACfD,GAASA,EAAME;;;;;kBAKfF,GAASA,EAAMG,MAAMC,WAAWC;cACpCL,GAASA,EAAMG,MAAMC,WAAWC;yBACrBL,GAASA,EAAMG,MAAMC,WAAWC;;;;;gBC7CnCL,IACpB,MAAMM,SAAEA,GAAaN,EACfO,EAAeC,EAAAA,YACnB,CAACC,EAAeC,KACd,MAAMC,EAAY,IAAIX,EAAMY,QAC5BD,EAAUF,GAASI,KAAKC,IAAId,EAAMe,IAAKF,KAAKE,IAAIf,EAAMc,IAAKJ,IAC3DJ,EAASK,EAAUK,KAAK,CAACC,EAAGC,IAAMD,EAAIC,KAExC,CAACZ,EAAUN,EAAMe,IAAKf,EAAMc,IAAKd,EAAMY,SAEnCO,EAA0BX,EAAAA,YAC7BY,IAAkBA,EAAMpB,EAAMc,MAAQd,EAAMe,IAAMf,EAAMc,KAAQ,IACjE,CAACd,EAAMe,IAAKf,EAAMc,MAEdO,EAAYC,EAAAA,QAChB,IAAMtB,EAAMY,OAAOW,IAAIH,GAAOD,EAAwBC,IACtD,CAACD,EAAyBnB,EAAMY,SAE5BT,EAAQqB,EAAAA,WAERC,EAAuBtB,EAAMuB,OAAOC,MAAM3B,EAAM4B,OAAOC,MAAMC,WAAWC,KACxEC,EAAqB7B,EAAMuB,OAAOC,MAAM3B,EAAM4B,OAAOC,MAAMI,SAASF,KACpEG,EAAmB/B,EAAMuB,OAAOC,MAAM3B,EAAM4B,OAAOO,MAAMC,OAAOL,KAChEM,EAAuBlC,EAAMuB,OAAOC,MAAM3B,EAAM4B,OAAOO,MAAML,WAAWC,KAExEO,EAAgBhB,EAAAA,QACpB,IACED,EACGE,IAAI,CAACgB,EAAUC,KACd,MAAMC,EAAkB,IAARD,EACVE,EAASF,IAAQnB,EAAUsB,OAAS,EAE1C,OAAIF,EACK,GAAGhB,SAA4BA,KAAwBc,OAAcP,KAAsBO,KAChGG,EACK,GAAGV,KAAsBO,OAAcd,KAAwBc,OAAcd,SAC/E,GAAGO,KAAsBO,OAEjCK,KAAK,MACV,CAACZ,EAAoBP,EAAsBJ,IAEvCY,EAAWX,EAAAA,QAAQ,IAAM,6BAA6BgB,KAAkB,CAACA,IAE/E,SACEO,kBAAAA,KAACrD,EAAA,CAAasD,MAAO9C,EAAM+C,KAAMC,IAAKhD,EAAMiD,GAAIC,OAAQlD,EAAMmD,MAAOC,OAAQpD,EAAMoD,OAChFC,SAAA,CAAArD,EAAMY,OAAOW,IAAI,CAACH,EAAKoB,MACtBc,kBAAAA,IAACxD,EAAA,CAECyD,KAAK,QACLT,MAAO9C,EAAM+C,KACbS,OAAQxD,EAAM4B,MACdd,IAAKd,EAAMc,IACXC,IAAKf,EAAMe,IACX0C,KAAMzD,EAAMyD,KACZC,MAAOtC,EACPd,YAAeC,EAAaiC,EAAKmB,WAAWC,EAAEC,OAAOH,QACrDI,MAAO,CAAEC,OAAQ,IAAMvB,GACvBvC,iBAAkBoC,EAClBnC,aAAcgC,GAXTM,MAcTc,kBAAAA,IAACzD,EAAA,CACCiD,MAAO9C,EAAM+C,KACbS,OAAQxD,EAAM4B,MACdkC,MAAO,CACLhC,WAAYG"}
+{"version":3,"file":"component.styles-ZU_GyVub.cjs","sources":["../src/components/range/component.styles.ts","../src/components/range/component.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nimport { addError } from '@local/styles/error'\nimport { addSX } from '@local/styles/sx'\n\nimport { RangeComponentProps, RangeThumbProps, RangeWrapperProps } from '.'\n\nexport const RangeWrapper = styled.div<RangeWrapperProps>`\n  position: relative;\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  align-items: center;\n  height: 20px;\n  ${addError};\n  ${addSX};\n`\n\nexport const RangeTrack = styled.div<RangeComponentProps>`\n  position: absolute;\n  height: 3px;\n  width: 100%;\n  padding: 0px 10px;\n  border-radius: 2px;\n`\nexport const RangeThumb = styled.input<RangeThumbProps>`\n  position: absolute;\n  width: 100%;\n  outline: none !important;\n  pointer-events: none;\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  left: 0;\n  margin: 0;\n  &::-webkit-slider-thumb {\n    pointer-events: all;\n    width: 16px;\n    height: 16px;\n    margin: 0;\n    padding: 0;\n    border-radius: 50%;\n    background: ${props => props.$colorBackground};\n    border: 3px ${props => props.$colorBorder} solid;\n    cursor: pointer;\n    -webkit-appearance: none;\n    margin-top: 0px;\n    transition:\n      transform ${props => props.theme.transition.default},\n      color ${props => props.theme.transition.default},\n      background-color ${props => props.theme.transition.default};\n    &:hover {\n      transform: scale(1.2);\n    }\n  }\n`\n","import { useCallback, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\n\nimport { RangeProps, RangeThumb, RangeTrack, RangeWrapper } from '.'\n\nexport const Range = (props: RangeProps) => {\n  const { onChange } = props\n  const handleChange = useCallback(\n    (index: number, newValue: number) => {\n      const newValues = [...props.values]\n      newValues[index] = Math.min(props.max, Math.max(props.min, newValue))\n      onChange(newValues.sort((a, b) => a - b))\n    },\n    [onChange, props.max, props.min, props.values]\n  )\n  const getThumbPositionPercent = useCallback(\n    (val: number) => ((val - props.min) / (props.max - props.min)) * 100,\n    [props.max, props.min]\n  )\n  const positions = useMemo(\n    () => props.values.map(val => getThumbPositionPercent(val)),\n    [getThumbPositionPercent, props.values]\n  )\n  const theme = useTheme()\n\n  const colorTrackBackground = theme.colors.range[props.genre].track.background.rest\n  const colorTrackGradient = theme.colors.range[props.genre].track.gradient.rest\n  const colorThumbBorder = theme.colors.range[props.genre].thumb.border.rest\n  const colorThumbBackground = theme.colors.range[props.genre].thumb.background.rest\n\n  const trackGradient = useMemo(\n    () =>\n      positions\n        .map((position, idx) => {\n          const isFirst = idx === 0\n          const isLast = idx === positions.length - 1\n\n          if (isFirst)\n            return `${colorTrackBackground} 0%, ${colorTrackBackground} ${position}%, ${colorTrackGradient} ${position}%`\n          if (isLast)\n            return `${colorTrackGradient} ${position}%, ${colorTrackBackground} ${position}%, ${colorTrackBackground} 100%`\n          return `${colorTrackGradient} ${position}%`\n        })\n        .join(', '),\n    [colorTrackGradient, colorTrackBackground, positions]\n  )\n  const gradient = useMemo(() => `linear-gradient(to right, ${trackGradient})`, [trackGradient])\n\n  return (\n    <RangeWrapper $size={props.size} $sx={props.sx} $error={props.error} onBlur={props.onBlur}>\n      {props.values.map((val, idx) => (\n        <RangeThumb\n          key={idx}\n          type=\"range\"\n          $size={props.size}\n          $genre={props.genre}\n          min={props.min}\n          max={props.max}\n          step={props.step}\n          value={val}\n          onChange={e => handleChange(idx, parseFloat(e.target.value))}\n          style={{ zIndex: 100 + idx }}\n          $colorBackground={colorThumbBackground}\n          $colorBorder={colorThumbBorder}\n        />\n      ))}\n      <RangeTrack\n        $size={props.size}\n        $genre={props.genre}\n        style={{\n          background: gradient\n        }}\n      />\n    </RangeWrapper>\n  )\n}\n"],"names":["RangeWrapper","styled","div","addError","addSX","RangeTrack","RangeThumb","input","props","$colorBackground","$colorBorder","theme","transition","default","onChange","handleChange","useCallback","index","newValue","newValues","values","Math","min","max","sort","a","b","getThumbPositionPercent","val","positions","useMemo","map","useTheme","colorTrackBackground","colors","range","genre","track","background","rest","colorTrackGradient","gradient","colorThumbBorder","thumb","border","colorThumbBackground","trackGradient","position","idx","isFirst","isLast","length","join","jsxs","$size","size","$sx","sx","$error","error","onBlur","children","jsx","type","$genre","step","value","parseFloat","e","target","style","zIndex"],"mappings":"iLAOaA,EAAeC,EAAOC,GAAA;;;;;;;IAO/BC;IACAC;EAGSC,EAAaJ,EAAOC,GAAA;;;;;;EAOpBI,EAAaL,EAAOM,KAAA;;;;;;;;;;;;;;;;;kBAiBfC,GAASA,EAAMC;kBACfD,GAASA,EAAME;;;;;kBAKfF,GAASA,EAAMG,MAAMC,WAAWC;cACpCL,GAASA,EAAMG,MAAMC,WAAWC;yBACrBL,GAASA,EAAMG,MAAMC,WAAWC;;;;;gBC7CnCL,IACpB,MAAMM,SAAEA,GAAaN,EACfO,EAAeC,EAAAA,YACnB,CAACC,EAAeC,KACd,MAAMC,EAAY,IAAIX,EAAMY,QAC5BD,EAAUF,GAASI,KAAKC,IAAId,EAAMe,IAAKF,KAAKE,IAAIf,EAAMc,IAAKJ,IAC3DJ,EAASK,EAAUK,KAAK,CAACC,EAAGC,IAAMD,EAAIC,KAExC,CAACZ,EAAUN,EAAMe,IAAKf,EAAMc,IAAKd,EAAMY,SAEnCO,EAA0BX,EAAAA,YAC7BY,IAAkBA,EAAMpB,EAAMc,MAAQd,EAAMe,IAAMf,EAAMc,KAAQ,IACjE,CAACd,EAAMe,IAAKf,EAAMc,MAEdO,EAAYC,EAAAA,QAChB,IAAMtB,EAAMY,OAAOW,IAAIH,GAAOD,EAAwBC,IACtD,CAACD,EAAyBnB,EAAMY,SAE5BT,EAAQqB,EAAAA,WAERC,EAAuBtB,EAAMuB,OAAOC,MAAM3B,EAAM4B,OAAOC,MAAMC,WAAWC,KACxEC,EAAqB7B,EAAMuB,OAAOC,MAAM3B,EAAM4B,OAAOC,MAAMI,SAASF,KACpEG,EAAmB/B,EAAMuB,OAAOC,MAAM3B,EAAM4B,OAAOO,MAAMC,OAAOL,KAChEM,EAAuBlC,EAAMuB,OAAOC,MAAM3B,EAAM4B,OAAOO,MAAML,WAAWC,KAExEO,EAAgBhB,EAAAA,QACpB,IACED,EACGE,IAAI,CAACgB,EAAUC,KACd,MAAMC,EAAkB,IAARD,EACVE,EAASF,IAAQnB,EAAUsB,OAAS,EAE1C,OAAIF,EACK,GAAGhB,SAA4BA,KAAwBc,OAAcP,KAAsBO,KAChGG,EACK,GAAGV,KAAsBO,OAAcd,KAAwBc,OAAcd,SAC/E,GAAGO,KAAsBO,OAEjCK,KAAK,MACV,CAACZ,EAAoBP,EAAsBJ,IAEvCY,EAAWX,EAAAA,QAAQ,IAAM,6BAA6BgB,KAAkB,CAACA,IAE/E,SACEO,kBAAAA,KAACrD,EAAA,CAAasD,MAAO9C,EAAM+C,KAAMC,IAAKhD,EAAMiD,GAAIC,OAAQlD,EAAMmD,MAAOC,OAAQpD,EAAMoD,OAChFC,SAAA,CAAArD,EAAMY,OAAOW,IAAI,CAACH,EAAKoB,MACtBc,kBAAAA,IAACxD,EAAA,CAECyD,KAAK,QACLT,MAAO9C,EAAM+C,KACbS,OAAQxD,EAAM4B,MACdd,IAAKd,EAAMc,IACXC,IAAKf,EAAMe,IACX0C,KAAMzD,EAAMyD,KACZC,MAAOtC,EACPd,YAAeC,EAAaiC,EAAKmB,WAAWC,EAAEC,OAAOH,QACrDI,MAAO,CAAEC,OAAQ,IAAMvB,GACvBvC,iBAAkBoC,EAClBnC,aAAcgC,GAXTM,MAcTc,kBAAAA,IAACzD,EAAA,CACCiD,MAAO9C,EAAM+C,KACbS,OAAQxD,EAAM4B,MACdkC,MAAO,CACLhC,WAAYG"}

package/build/component.styles-gZHy-64x.cjs

@@ -0,0 +1,13 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("./style-D3Lbn1EL.cjs"),n=require("react"),r=require("./component--jGdo2yq.cjs");require("./component.styles-BeRVOt5T.cjs");const s=require("styled-components"),l=require("./style-fRZ6xrVp.cjs"),o=require("./theme.global-CcoD5bPP.cjs"),u=s.css`
+  ${e=>i({...o.KEY_SIZE_DATA[e.$size],...e})};
+`,i=e=>s.css`
+  gap: ${e.padding-2}px;
+  width: 100%;
+`,c=s.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  ${u};
+  ${l.addSX};
+`;exports.InputOTP=s=>{var l;const[o,u]=n.useState(new Array(s.length).fill("")),i=n.useRef([]),a=n.useRef(null),g=n.useCallback((e,t)=>{t.preventDefault();const n=t.clipboardData.getData("Text").replace(/\D/g,"").split("");n.length&&u(t=>{var r,l;const o=[...t];let u=e;for(let e=0;e<n.length&&u<o.length;e++)o[u]=n[e],u++;const c=o.join("");return null==(r=s.onChange)||r.call(s,c),o.every(e=>""!==e)&&(null==(l=s.onComplete)||l.call(s,c)),setTimeout(()=>{var e,t;const n=o.findIndex(e=>""===e);-1!==n?null==(e=i.current[n])||e.focus():u<o.length&&(null==(t=i.current[u])||t.focus())},0),o})},[s]),p=n.useCallback((e,t)=>{/^\d*$/.test(t)&&u(n=>{var r;const l=[...n];return l[e]=t.slice(-1),s.onChange&&s.onChange(l.join("")),l.every(e=>""!==e)&&(null==(r=s.onComplete)||r.call(s,l.join(""))),t&&e<n.length-1&&setTimeout(()=>{var t;null==(t=i.current[e+1])||t.focus()},0),l})},[s]),m=n.useCallback(e=>{setTimeout(()=>e.target.setSelectionRange(0,e.target.value.length),0)},[]);return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(c,{$error:s.error,$size:s.size,id:s.id,ref:a,onBlur:e=>{setTimeout(()=>{var t;a.current&&!a.current.contains(document.activeElement)&&(null==(t=s.onBlur)||t.call(s,e))},0)},onFocus:e=>{setTimeout(()=>{var t,n;(null==(t=a.current)?void 0:t.contains(document.activeElement))&&(null==(n=s.onFocus)||n.call(s,e))},0)},$sx:s.sx,children:o.map((t,n)=>e.jsxRuntimeExports.jsx(r.Input,{isWidthAsHeight:!0,tabIndex:n+1,ref:e=>{i.current[n]=e},variety:"standard",type:"text",inputMode:"numeric",maxLength:1,value:t,onFocus:m,onPaste:e=>g(n,e),onChange:e=>p(n,e),onKeyDown:e=>((e,t)=>{const n=i.current[e];if(n){if("ArrowRight"===t.key){const t=e<o.length-1?e+1:0,n=i.current[t];n&&(n.focus(),setTimeout(()=>n.setSelectionRange(0,n.value.length),0))}if("ArrowLeft"===t.key){const t=e>0?e-1:o.length-1,n=i.current[t];n&&(n.focus(),setTimeout(()=>n.setSelectionRange(0,n.value.length),0))}"Backspace"===t.key&&(n.value?setTimeout(()=>n.setSelectionRange(0,n.value.length),0):e>0&&setTimeout(()=>{const t=i.current[e-1];t&&(t.focus(),t.setSelectionRange(0,t.value.length))},0))}})(n,e),genre:s.genre,size:s.size,font:s.font},n))}),(null==s?void 0:s.error)?e.jsxRuntimeExports.jsx(t.ErrorMessage,{...s.error,size:(null==s?void 0:s.error.size)??s.size,font:{size:12,weight:400,family:null==(l=s.font)?void 0:l.family}}):null]})},exports.InputOTPSize=u,exports.InputOTPSizeConstructor=i,exports.InputOTPWrapper=c;
+//# sourceMappingURL=component.styles-gZHy-64x.cjs.map

package/build/component.styles-gZHy-64x.cjs.map

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

package/build/{component.styles--Ug3PJQ6.cjs → component.styles-iHE8mmya.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("./consts.cjs.js"),s=require("./use-D7IsSb34.cjs"),i=require("./component-u_42PteJ.cjs"),r=require("./component.styles-DLU0S0KI.cjs"),o=require("./component-BV_7tGiu.cjs"),n=require("styled-components"),a=require("./component-CACoGUK9.cjs"),l=require("./context.constants-CTfUKury.cjs"),d=require("./theme.global-B9t2Fi10.cjs"),u=require("react"),c=require("./style-B5u4pW5G.cjs"),g=require("framer-motion"),p=require("./style-fRZ6xrVp.cjs"),m=n.css`
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),t=require("./consts.cjs.js"),s=require("./use-Dg449cuf.cjs"),i=require("./component-B1bvPlyB.cjs"),r=require("./component.styles-BTsmbWT6.cjs"),o=require("./component-BV_7tGiu.cjs"),n=require("styled-components"),a=require("./component-C67KboOB.cjs"),l=require("./context.constants-ByXsACU7.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`
   ${e=>n.css`
     background: ${e.theme.colors.imageSelect[e.$genre].background.rest};
     color: ${e.theme.colors.imageSelect[e.$genre].color.rest};
@@ -16,15 +16,15 @@
 `,h=e=>n.css`
   padding: ${e.padding}px;
   border-radius: ${e.radius}px;
-`,j=n.css`
-  ${e=>f(d.KEY_SIZE_DATA[e.$size])};
-`,f=e=>n.css`
+`,f=n.css`
+  ${e=>j(d.KEY_SIZE_DATA[e.$size])};
+`,j=e=>n.css`
   gap: ${e.padding-2}px;
 `,S=n.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  ${j};
+  ${f};
   ${c.addError};
   ${p.addSX};
 `,b=n(g.motion.div)`
@@ -35,5 +35,5 @@
   width: 100%;
   ${m}
   ${x}
-`;exports.ImageSelect=p=>{const{onChange:m}=p,x=u.useMemo(()=>d.KEY_SIZE_DATA[p.size],[p.size]),[h,j]=u.useState(p.images||[]),[f,v]=u.useState(!1),$=u.useRef(null),y=n.useTheme(),E=u.useCallback(e=>{e&&j(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=$.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:$}),{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(()=>{j(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:f?y.colors.imageSelect[p.genre].border.hover:y.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 j(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:y.colors.imageSelect[p.genre].color.rest},sx:{default:{}},children:p.locale.dragAndDrop})},"empty"):null]}),e.jsxRuntimeExports.jsx("input",{ref:$,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:()=>{j(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}):null]})},exports.ImageSelectListSize=x,exports.ImageSelectListSizeConstructor=h,exports.ImageSelectListWrapper=b,exports.ImageSelectSize=j,exports.ImageSelectSizeConstructor=f,exports.ImageSelectWrapper=S;
-//# sourceMappingURL=component.styles--Ug3PJQ6.cjs.map
+`;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;
+//# sourceMappingURL=component.styles-iHE8mmya.cjs.map