@jenesei-software/jenesei-kit-react 1.2.6 → 1.2.7

package/build/{component.styles-B-ZAk_1C.cjs.map → component.styles-CBnEu0_t.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"component.styles-B-ZAk_1C.cjs","sources":["../src/components/icon/component.styles.ts","../src/components/icon/component.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nimport { addColorTransition } from '@local/styles/add'\nimport { addSX } from '@local/styles/sx'\nimport { KEY_SIZE_DATA } from '@local/theme'\n\nimport { StyledIconIdItemProps } from '.'\n\nexport const StyledSVG = styled.svg<StyledIconIdItemProps>`\n  color: ${props => (props.$color ? props.theme.palette[props.$color] : 'inherit')};\n\n  ${props => css`\n    height: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n    min-height: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n\n    width: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n    min-width: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n\n    transform: rotate(${props.$turn || 0}deg);\n  `}\n  ${props =>\n    props.$order !== undefined &&\n    css`\n      order: ${props.$order};\n    `};\n  ${addColorTransition};\n  & path {\n    ${addColorTransition};\n  }\n  ${addSX};\n`\n","import { JeneseiPalette } from '@local/theme/theme';\n\nimport { useMemo } from 'react';\n\nimport 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  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 '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 contentLoadings = props.type === 'loading' ? (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={contentLoadings ? { __html: contentLoadings } : undefined}\n    >\n      {contentPaths}\n    </StyledSVG>\n  );\n};\n"],"names":["StyledSVG","styled","svg","props","$color","theme","palette","css","$size","KEY_SIZE_DATA","heightIcon","$turn","$order","addColorTransition","addSX","icon","useMemo","type","IconIdJSON","name","IconRealEbailJSON","IconLogoJSON","IconCheckboxJSON","IconLoadingJSON","primaryColor","JeneseiPalette","secondColor","console","warn","contentPaths","paths","map","path","index","jsx","id","d","clipRule","fillRule","fill","fillType","contentLoadings","width","height","viewBox","xmlns","size","turn","order","$sx","sx","className","onClick","tabIndex","dangerouslySetInnerHTML","__html","children"],"mappings":"upqPAQaA,EAAYC,EAAOC,GAAA;WACrBC,GAAUA,EAAMC,OAASD,EAAME,MAAMC,QAAQH,EAAMC,QAAU;;IAEpED,GAASI,EAAAA,GAAAA;cACiB,SAAhBJ,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;kBACpD,SAAhBP,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;;aAE7D,SAAhBP,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;iBACpD,SAAhBP,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;;wBAEjEP,EAAMQ,OAAS;;IAEnCR,QACiB,IAAjBA,EAAMS,QACNL,EAAAA,GAAAA;eACWJ,EAAMS;;IAEjBC;;MAEEA;;IAEFC;eCT8CX,IAChD,MAAMY,EAAOC,EAAAA,QAAQ,KACnB,IAAID,EAAO,KAEX,OAAQZ,EAAMc,MACZ,IAAK,KACHF,EAAOG,EAAWf,EAAMgB,MACxB,MACF,IAAK,YACHJ,EAAOK,EAAkBjB,EAAMgB,MAC/B,MACF,IAAK,OACHJ,EAAOM,EAAalB,EAAMgB,MAC1B,MACF,IAAK,WACHJ,EAAOO,EAAiBnB,EAAMgB,MAC9B,MACF,IAAK,UACHJ,EAAOQ,EAAgBpB,EAAMgB,MAGjC,OAAOJ,GACN,CAACZ,EAAMgB,KAAMhB,EAAMc,OAEhBO,EAAerB,EAAMqB,aAAeC,EAAAA,eAAetB,EAAMqB,cAAgB,eACzEE,EAAcvB,EAAMuB,YAAcD,EAAAA,eAAetB,EAAMuB,aAAe,eAE5E,IAAKX,EAEH,OADAY,QAAQC,KAAK,QAAQzB,EAAMgB,kCACpB,KAGT,MAMMU,EACW,MAAd1B,EAAMc,MAA+B,aAAfd,EAAMc,MAAsC,cAAfd,EAAMc,MAAuC,SAAfd,EAAMc,MACxE,iBAATF,KACP,UAAWA,GAWP,MAVCA,EAAKe,OAAS,IAAIC,IAAI,CAACC,EAAMC,KAC5BC,SAAAA,kBAAAA,IAAC,OAAA,CAECC,GAAI,OAAQH,EAAQA,EAAKG,QAAgB,EACzCC,EAAGJ,EAAKI,EACRC,SAAS,UACTC,SAAS,UACTC,KAAM,SAAUP,GAjBJQ,EAiBwBR,EAAKO,KAhBhC,iBAAbC,EAAoChB,EACvB,gBAAbgB,EAAmCd,EAChC,gBAc4D,gBALtD,GAAGvB,EAAMc,QAAQd,EAAMgB,aAAac,KAZ9B,IAACO,IAsBhBC,EAAiC,YAAftC,EAAMc,KAAsBF,EAAkB,KAEtE,SACEmB,kBAAAA,IAAClC,EAAA,CACC0C,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,MAAM,6BACNrC,MAAOL,EAAM2C,KACbnC,MAAOR,EAAM4C,KACbnC,OAAQT,EAAM6C,MACd5C,OAAQD,EAAMqB,mBAAgB,EAC9ByB,IAAK9C,EAAM+C,GACXC,UAAWhD,EAAMgD,UACjBC,QAASjD,EAAMiD,QACfC,SAAUlD,EAAMkD,SAChBC,wBAAyBb,EAAkB,CAAEc,OAAQd,QAAoB,EAExEe,SAAA3B"}
+{"version":3,"file":"component.styles-CBnEu0_t.cjs","sources":["../src/components/icon/component.styles.ts","../src/components/icon/component.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nimport { addColorTransition } from '@local/styles/add'\nimport { addSX } from '@local/styles/sx'\nimport { KEY_SIZE_DATA } from '@local/theme'\n\nimport { StyledIconIdItemProps } from '.'\n\nexport const StyledSVG = styled.svg<StyledIconIdItemProps>`\n  color: ${props => (props.$color ? props.theme.palette[props.$color] : 'inherit')};\n\n  ${props => css`\n    height: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n    min-height: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n\n    width: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n    min-width: ${props.$size !== '100%' ? `${KEY_SIZE_DATA[props.$size].heightIcon}px` : '100%'};\n\n    transform: rotate(${props.$turn || 0}deg);\n  `}\n  ${props =>\n    props.$order !== undefined &&\n    css`\n      order: ${props.$order};\n    `};\n  ${addColorTransition};\n  & path {\n    ${addColorTransition};\n  }\n  ${addSX};\n`\n","import { JeneseiPalette } from '@local/theme/theme';\n\nimport { useMemo } from 'react';\n\nimport 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  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 '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 contentLoadings = props.type === 'loading' ? (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={contentLoadings ? { __html: contentLoadings } : undefined}\n    >\n      {contentPaths}\n    </StyledSVG>\n  );\n};\n"],"names":["StyledSVG","styled","svg","props","$color","theme","palette","css","$size","KEY_SIZE_DATA","heightIcon","$turn","$order","addColorTransition","addSX","icon","useMemo","type","IconIdJSON","name","IconRealEbailJSON","IconLogoJSON","IconCheckboxJSON","IconLoadingJSON","primaryColor","JeneseiPalette","secondColor","console","warn","contentPaths","paths","map","path","index","jsx","id","d","clipRule","fillRule","fill","fillType","contentLoadings","width","height","viewBox","xmlns","size","turn","order","$sx","sx","className","onClick","tabIndex","dangerouslySetInnerHTML","__html","children"],"mappings":"upqPAQaA,EAAYC,EAAOC,GAAA;WACrBC,GAAUA,EAAMC,OAASD,EAAME,MAAMC,QAAQH,EAAMC,QAAU;;IAEpED,GAASI,EAAAA,GAAAA;cACiB,SAAhBJ,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;kBACpD,SAAhBP,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;;aAE7D,SAAhBP,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;iBACpD,SAAhBP,EAAMK,MAAmB,GAAGC,EAAAA,cAAcN,EAAMK,OAAOE,eAAiB;;wBAEjEP,EAAMQ,OAAS;;IAEnCR,QACiB,IAAjBA,EAAMS,QACNL,EAAAA,GAAAA;eACWJ,EAAMS;;IAEjBC;;MAEEA;;IAEFC;eCT8CX,IAChD,MAAMY,EAAOC,EAAAA,QAAQ,KACnB,IAAID,EAAO,KAEX,OAAQZ,EAAMc,MACZ,IAAK,KACHF,EAAOG,EAAWf,EAAMgB,MACxB,MACF,IAAK,YACHJ,EAAOK,EAAkBjB,EAAMgB,MAC/B,MACF,IAAK,OACHJ,EAAOM,EAAalB,EAAMgB,MAC1B,MACF,IAAK,WACHJ,EAAOO,EAAiBnB,EAAMgB,MAC9B,MACF,IAAK,UACHJ,EAAOQ,EAAgBpB,EAAMgB,MAGjC,OAAOJ,GACN,CAACZ,EAAMgB,KAAMhB,EAAMc,OAEhBO,EAAerB,EAAMqB,aAAeC,EAAAA,eAAetB,EAAMqB,cAAgB,eACzEE,EAAcvB,EAAMuB,YAAcD,EAAAA,eAAetB,EAAMuB,aAAe,eAE5E,IAAKX,EAEH,OADAY,QAAQC,KAAK,QAAQzB,EAAMgB,kCACpB,KAGT,MAMMU,EACW,MAAd1B,EAAMc,MAA+B,aAAfd,EAAMc,MAAsC,cAAfd,EAAMc,MAAuC,SAAfd,EAAMc,MACxE,iBAATF,KACP,UAAWA,GAWP,MAVCA,EAAKe,OAAS,IAAIC,IAAI,CAACC,EAAMC,KAC5BC,SAAAA,kBAAAA,IAAC,OAAA,CAECC,GAAI,OAAQH,EAAQA,EAAKG,QAAgB,EACzCC,EAAGJ,EAAKI,EACRC,SAAS,UACTC,SAAS,UACTC,KAAM,SAAUP,GAjBJQ,EAiBwBR,EAAKO,KAhBhC,iBAAbC,EAAoChB,EACvB,gBAAbgB,EAAmCd,EAChC,gBAc4D,gBALtD,GAAGvB,EAAMc,QAAQd,EAAMgB,aAAac,KAZ9B,IAACO,IAsBhBC,EAAiC,YAAftC,EAAMc,KAAsBF,EAAkB,KAEtE,SACEmB,kBAAAA,IAAClC,EAAA,CACC0C,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,MAAM,6BACNrC,MAAOL,EAAM2C,KACbnC,MAAOR,EAAM4C,KACbnC,OAAQT,EAAM6C,MACd5C,OAAQD,EAAMqB,mBAAgB,EAC9ByB,IAAK9C,EAAM+C,GACXC,UAAWhD,EAAMgD,UACjBC,QAASjD,EAAMiD,QACfC,SAAUlD,EAAMkD,SAChBC,wBAAyBb,EAAkB,CAAEc,OAAQd,QAAoB,EAExEe,SAAA3B"}

package/build/{component.styles-DS53SD15.js → component.styles-CGiPShK6.js}

@@ -1,11 +1,11 @@
 import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
-import { b as ErrorMessage } from "./style-Dca2udON.js";
+import { b as ErrorMessage } from "./style-BUTdwE0W.js";
 import { useState, useRef, useCallback } from "react";
-import { I as Input } from "./component-CTz8wF0z.js";
-import "./component.styles-hc14mwUo.js";
+import { I as Input } from "./component-CI1bPd1b.js";
+import "./component.styles-CUNUEB0K.js";
 import styled, { css } from "styled-components";
 import { a as addSX } from "./style-plT9Ah7t.js";
-import { K as KEY_SIZE_DATA } from "./theme.global-B46v_8eu.js";
+import { K as KEY_SIZE_DATA } from "./theme.global-DuEXPcSK.js";
 const InputOTP = (props) => {
   const [otp, setOtp] = useState(new Array(props.length).fill(""));
   const inputsRef = useRef([]);
@@ -175,4 +175,4 @@ export {
   InputOTPSizeConstructor as b,
   InputOTPWrapper as c
 };
-//# sourceMappingURL=component.styles-DS53SD15.js.map
+//# sourceMappingURL=component.styles-CGiPShK6.js.map

package/build/{component.styles-DS53SD15.js.map → component.styles-CGiPShK6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"component.styles-DS53SD15.js","sources":["../src/components/input-otp/component.tsx","../src/components/input-otp/component.styles.ts"],"sourcesContent":["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          />\n        ))}\n      </InputOTPWrapper>\n      {props?.error ? <ErrorMessage {...props.error} size={props?.error.size ?? props.size} /> : null}\n    </>\n  )\n}\n","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"],"names":["_a","_b","jsxs","Fragment","jsx"],"mappings":"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"}
+{"version":3,"file":"component.styles-CGiPShK6.js","sources":["../src/components/input-otp/component.tsx","../src/components/input-otp/component.styles.ts"],"sourcesContent":["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          />\n        ))}\n      </InputOTPWrapper>\n      {props?.error ? <ErrorMessage {...props.error} size={props?.error.size ?? props.size} /> : null}\n    </>\n  )\n}\n","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"],"names":["_a","_b","jsxs","Fragment","jsx"],"mappings":"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"}

package/build/{component.styles-D8ZAo-kS.cjs → component.styles-CMxkHzEu.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),r=require("./theme.global-BdZkriPJ.cjs"),o=require("react"),t=require("./style-f3_KtJIt.cjs"),s=require("./style-DmwoOdFB.cjs"),i=require("framer-motion"),n=require("styled-components"),a=n.css`
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),r=require("./theme.global-B9wIU_rF.cjs"),o=require("react"),t=require("./style-f3_KtJIt.cjs"),s=require("./style-BX0S5FEa.cjs"),i=require("framer-motion"),n=require("styled-components"),a=n.css`
   ${e=>n.css`
     height: ${r.KEY_SIZE_DATA_TOGGLE[e.$size].height}px;
     width: ${r.KEY_SIZE_DATA_TOGGLE[e.$size].width}px;
@@ -62,4 +62,4 @@
           }
         `}
 `;exports.Toggle=t=>{const s=o.useMemo(()=>({tap:{width:r.KEY_SIZE_DATA_TOGGLE[t.size].thumb+4,translateX:t.value?r.KEY_SIZE_DATA_TOGGLE[t.size].width-r.KEY_SIZE_DATA_TOGGLE[t.size].thumb-3*r.KEY_SIZE_DATA_TOGGLE[t.size].padding-4:0,transition:{duration:.05}},checked:{translateX:r.KEY_SIZE_DATA_TOGGLE[t.size].width-r.KEY_SIZE_DATA_TOGGLE[t.size].thumb-3*r.KEY_SIZE_DATA_TOGGLE[t.size].padding,transition:{ease:"circInOut",duration:.05}},unchecked:{translateX:0,transition:{ease:"circInOut",duration:.05}}}),[t.size,t.value]);return e.jsxRuntimeExports.jsx(l,{$genre:t.genre,$isDisabled:t.isDisabled,$value:t.value,$size:t.size,$error:t.error,tabIndex:0,onClick:()=>{var e;return null==(e=t.onChange)?void 0:e.call(t,!t.value)},whileTap:"tap",animate:t.value?"checked":"unchecked",onKeyDown:e=>{var r;"Enter"===e.key&&(null==(r=t.onChange)||r.call(t,!t.value))},children:e.jsxRuntimeExports.jsx(g,{variants:s,$genre:t.genre,$isDisabled:t.isDisabled,$value:t.value,$size:t.size,$error:t.error})})},exports.ToggleCenter=g,exports.ToggleWrapper=l;
-//# sourceMappingURL=component.styles-D8ZAo-kS.cjs.map
+//# sourceMappingURL=component.styles-CMxkHzEu.cjs.map

package/build/{component.styles-D8ZAo-kS.cjs.map → component.styles-CMxkHzEu.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"component.styles-D8ZAo-kS.cjs","sources":["../src/components/toggle/component.styles.ts","../src/components/toggle/component.tsx"],"sourcesContent":["import { addDisabled, addOutline, addTransition } from '@local/styles/add';\nimport { addError } from '@local/styles/error';\nimport { KEY_SIZE_DATA_TOGGLE } from '@local/theme';\n\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\n\nimport { StyledToggleProps } from '.';\n\n/****************************************** Add *************************************************/\nconst addToggleWrapperSize = css<StyledToggleProps>`\n  ${(props) => css`\n    height: ${KEY_SIZE_DATA_TOGGLE[props.$size].height}px;\n    width: ${KEY_SIZE_DATA_TOGGLE[props.$size].width}px;\n    padding: ${KEY_SIZE_DATA_TOGGLE[props.$size].padding}px;\n    border-radius: 100px;\n  `};\n`;\n\nconst addToggleCenterSize = css<StyledToggleProps>`\n  ${(props) => css`\n  height: ${KEY_SIZE_DATA_TOGGLE[props.$size].thumb}px;\n  width: ${KEY_SIZE_DATA_TOGGLE[props.$size].thumb}px;\n  border-radius: 100px;\n  `}\n`;\n/****************************************** Standard *************************************************/\nexport const ToggleWrapper = styled(motion.div)<StyledToggleProps>`\n  cursor: pointer;\n  border: 1px solid transparent;\n\n  display: flex;\n  align-items: center;\n\n  ${addToggleWrapperSize};\n  ${addTransition};\n  ${addOutline};\n  ${addDisabled};\n\n  ${(props) =>\n    props.$value\n      ? css`\n          background: ${props.theme.colors.toggle[props.$genre].active.rest.track};\n          border-color: ${props.theme.colors.toggle[props.$genre].active.rest.border};\n          justify-content: flex-start;\n          &:hover {\n            background: ${props.theme.colors.toggle[props.$genre].active.hover.track};\n            border-color: ${props.theme.colors.toggle[props.$genre].active.hover.border};\n          }\n        `\n      : css`\n          background: ${props.theme.colors.toggle[props.$genre].unActive.rest.track};\n          border-color: ${props.theme.colors.toggle[props.$genre].unActive.rest.border};\n          justify-content: flex-start;\n          &:hover {\n            background: ${props.theme.colors.toggle[props.$genre].unActive.hover.track};\n            border-color: ${props.theme.colors.toggle[props.$genre].unActive.hover.border};\n          }\n        `};\n\n  ${addError};\n`;\n\nexport const ToggleCenter = styled(motion.div)<StyledToggleProps>`\n  ${addToggleCenterSize};\n  ${addTransition};\n\n  ${(props) =>\n    props.$value\n      ? css`\n          background: ${props.theme.colors.toggle[props.$genre].active.rest.thumb};\n          box-shadow: ${props.theme.colors.toggle[props.$genre].active.rest.thumbBoxShadow};\n          &:hover {\n            background: ${props.theme.colors.toggle[props.$genre].active.hover.thumb};\n            box-shadow: ${props.theme.colors.toggle[props.$genre].active.hover.thumbBoxShadow};\n          }\n        `\n      : css`\n          background: ${props.theme.colors.toggle[props.$genre].unActive.rest.thumb};\n          box-shadow: ${props.theme.colors.toggle[props.$genre].unActive.rest.thumbBoxShadow};\n          &:hover {\n            background: ${props.theme.colors.toggle[props.$genre].unActive.hover.thumb};\n            box-shadow: ${props.theme.colors.toggle[props.$genre].unActive.hover.thumbBoxShadow};\n          }\n        `}\n`;\n","import { KEY_SIZE_DATA_TOGGLE } from '@local/theme';\n\nimport { useMemo } from 'react';\n\nimport { ToggleCenter, ToggleProps, ToggleWrapper } from '.'\n\nexport const Toggle = (props: ToggleProps) => {\n  const toggleVariants = useMemo(() => ({\n    tap: {\n      width: KEY_SIZE_DATA_TOGGLE[props.size].thumb + 4,\n      translateX: props.value ? KEY_SIZE_DATA_TOGGLE[props.size].width - KEY_SIZE_DATA_TOGGLE[props.size].thumb - KEY_SIZE_DATA_TOGGLE[props.size].padding * 3 - 4 : 0,\n      transition: {\n        duration: 0.05,\n      },\n    },\n    checked: {\n      translateX: KEY_SIZE_DATA_TOGGLE[props.size].width - KEY_SIZE_DATA_TOGGLE[props.size].thumb - KEY_SIZE_DATA_TOGGLE[props.size].padding * 3,\n      transition: { ease: \"circInOut\", duration: 0.05 },\n    },\n    unchecked: {\n      translateX: 0,\n      transition: { ease: \"circInOut\", duration: 0.05 },\n    },\n  }), [props.size, props.value]);\n\n  return (\n    <ToggleWrapper\n      $genre={props.genre}\n      $isDisabled={props.isDisabled}\n      $value={props.value}\n      $size={props.size}\n      $error={props.error}\n      tabIndex={0}\n      onClick={() => props.onChange?.(!props.value)}\n      whileTap=\"tap\"\n      animate={props.value ? \"checked\" : \"unchecked\"}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') props.onChange?.(!props.value)\n      }}\n\n    >\n      <ToggleCenter\n        variants={toggleVariants}\n        $genre={props.genre}\n        $isDisabled={props.isDisabled}\n        $value={props.value}\n        $size={props.size}\n        $error={props.error}\n      />\n    </ToggleWrapper>\n  )\n}\n"],"names":["addToggleWrapperSize","css","props","KEY_SIZE_DATA_TOGGLE","$size","height","width","padding","addToggleCenterSize","thumb","ToggleWrapper","styled","motion","div","addTransition","addOutline","addDisabled","$value","theme","colors","toggle","$genre","active","rest","track","border","hover","unActive","addError","ToggleCenter","thumbBoxShadow","toggleVariants","useMemo","tap","size","translateX","value","transition","duration","checked","ease","unchecked","jsx","genre","$isDisabled","isDisabled","$error","error","tabIndex","onClick","_a","onChange","call","whileTap","animate","onKeyDown","e","key","children","variants"],"mappings":"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"}
+{"version":3,"file":"component.styles-CMxkHzEu.cjs","sources":["../src/components/toggle/component.styles.ts","../src/components/toggle/component.tsx"],"sourcesContent":["import { addDisabled, addOutline, addTransition } from '@local/styles/add';\nimport { addError } from '@local/styles/error';\nimport { KEY_SIZE_DATA_TOGGLE } from '@local/theme';\n\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\n\nimport { StyledToggleProps } from '.';\n\n/****************************************** Add *************************************************/\nconst addToggleWrapperSize = css<StyledToggleProps>`\n  ${(props) => css`\n    height: ${KEY_SIZE_DATA_TOGGLE[props.$size].height}px;\n    width: ${KEY_SIZE_DATA_TOGGLE[props.$size].width}px;\n    padding: ${KEY_SIZE_DATA_TOGGLE[props.$size].padding}px;\n    border-radius: 100px;\n  `};\n`;\n\nconst addToggleCenterSize = css<StyledToggleProps>`\n  ${(props) => css`\n  height: ${KEY_SIZE_DATA_TOGGLE[props.$size].thumb}px;\n  width: ${KEY_SIZE_DATA_TOGGLE[props.$size].thumb}px;\n  border-radius: 100px;\n  `}\n`;\n/****************************************** Standard *************************************************/\nexport const ToggleWrapper = styled(motion.div)<StyledToggleProps>`\n  cursor: pointer;\n  border: 1px solid transparent;\n\n  display: flex;\n  align-items: center;\n\n  ${addToggleWrapperSize};\n  ${addTransition};\n  ${addOutline};\n  ${addDisabled};\n\n  ${(props) =>\n    props.$value\n      ? css`\n          background: ${props.theme.colors.toggle[props.$genre].active.rest.track};\n          border-color: ${props.theme.colors.toggle[props.$genre].active.rest.border};\n          justify-content: flex-start;\n          &:hover {\n            background: ${props.theme.colors.toggle[props.$genre].active.hover.track};\n            border-color: ${props.theme.colors.toggle[props.$genre].active.hover.border};\n          }\n        `\n      : css`\n          background: ${props.theme.colors.toggle[props.$genre].unActive.rest.track};\n          border-color: ${props.theme.colors.toggle[props.$genre].unActive.rest.border};\n          justify-content: flex-start;\n          &:hover {\n            background: ${props.theme.colors.toggle[props.$genre].unActive.hover.track};\n            border-color: ${props.theme.colors.toggle[props.$genre].unActive.hover.border};\n          }\n        `};\n\n  ${addError};\n`;\n\nexport const ToggleCenter = styled(motion.div)<StyledToggleProps>`\n  ${addToggleCenterSize};\n  ${addTransition};\n\n  ${(props) =>\n    props.$value\n      ? css`\n          background: ${props.theme.colors.toggle[props.$genre].active.rest.thumb};\n          box-shadow: ${props.theme.colors.toggle[props.$genre].active.rest.thumbBoxShadow};\n          &:hover {\n            background: ${props.theme.colors.toggle[props.$genre].active.hover.thumb};\n            box-shadow: ${props.theme.colors.toggle[props.$genre].active.hover.thumbBoxShadow};\n          }\n        `\n      : css`\n          background: ${props.theme.colors.toggle[props.$genre].unActive.rest.thumb};\n          box-shadow: ${props.theme.colors.toggle[props.$genre].unActive.rest.thumbBoxShadow};\n          &:hover {\n            background: ${props.theme.colors.toggle[props.$genre].unActive.hover.thumb};\n            box-shadow: ${props.theme.colors.toggle[props.$genre].unActive.hover.thumbBoxShadow};\n          }\n        `}\n`;\n","import { KEY_SIZE_DATA_TOGGLE } from '@local/theme';\n\nimport { useMemo } from 'react';\n\nimport { ToggleCenter, ToggleProps, ToggleWrapper } from '.'\n\nexport const Toggle = (props: ToggleProps) => {\n  const toggleVariants = useMemo(() => ({\n    tap: {\n      width: KEY_SIZE_DATA_TOGGLE[props.size].thumb + 4,\n      translateX: props.value ? KEY_SIZE_DATA_TOGGLE[props.size].width - KEY_SIZE_DATA_TOGGLE[props.size].thumb - KEY_SIZE_DATA_TOGGLE[props.size].padding * 3 - 4 : 0,\n      transition: {\n        duration: 0.05,\n      },\n    },\n    checked: {\n      translateX: KEY_SIZE_DATA_TOGGLE[props.size].width - KEY_SIZE_DATA_TOGGLE[props.size].thumb - KEY_SIZE_DATA_TOGGLE[props.size].padding * 3,\n      transition: { ease: \"circInOut\", duration: 0.05 },\n    },\n    unchecked: {\n      translateX: 0,\n      transition: { ease: \"circInOut\", duration: 0.05 },\n    },\n  }), [props.size, props.value]);\n\n  return (\n    <ToggleWrapper\n      $genre={props.genre}\n      $isDisabled={props.isDisabled}\n      $value={props.value}\n      $size={props.size}\n      $error={props.error}\n      tabIndex={0}\n      onClick={() => props.onChange?.(!props.value)}\n      whileTap=\"tap\"\n      animate={props.value ? \"checked\" : \"unchecked\"}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') props.onChange?.(!props.value)\n      }}\n\n    >\n      <ToggleCenter\n        variants={toggleVariants}\n        $genre={props.genre}\n        $isDisabled={props.isDisabled}\n        $value={props.value}\n        $size={props.size}\n        $error={props.error}\n      />\n    </ToggleWrapper>\n  )\n}\n"],"names":["addToggleWrapperSize","css","props","KEY_SIZE_DATA_TOGGLE","$size","height","width","padding","addToggleCenterSize","thumb","ToggleWrapper","styled","motion","div","addTransition","addOutline","addDisabled","$value","theme","colors","toggle","$genre","active","rest","track","border","hover","unActive","addError","ToggleCenter","thumbBoxShadow","toggleVariants","useMemo","tap","size","translateX","value","transition","duration","checked","ease","unchecked","jsx","genre","$isDisabled","isDisabled","$error","error","tabIndex","onClick","_a","onChange","call","whileTap","animate","onKeyDown","e","key","children","variants"],"mappings":"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"}

package/build/{component.styles-uPfiNBIy.js → component.styles-CO20q5q1.js}

@@ -2,7 +2,7 @@ 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-CiGPOpxk.js";
+import { I as Icon } from "./component.styles-nkvjDCzl.js";
 import { b as addTransition } from "./style-Bvt_Melk.js";
 const Accordion = (props) => {
   const onClickSummary = useCallback(() => {
@@ -78,4 +78,4 @@ export {
   AccordionDetails as d,
   AccordionStyledIcon as e
 };
-//# sourceMappingURL=component.styles-uPfiNBIy.js.map
+//# sourceMappingURL=component.styles-CO20q5q1.js.map

package/build/{component.styles-uPfiNBIy.js.map → component.styles-CO20q5q1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"component.styles-uPfiNBIy.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-CO20q5q1.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-hc14mwUo.js → component.styles-CUNUEB0K.js}

@@ -1,8 +1,8 @@
-import { g as getFontSizeStyles } from "./component-zhkRBgS8.js";
+import { g as getFontSizeStyles } from "./component-zZ5X_UdT.js";
 import { j as addNiceNumber, k as addDisabled, f as addOutline, b as addTransition } from "./style-Bvt_Melk.js";
-import { a as addError } from "./style-Dca2udON.js";
+import { a as addError } from "./style-BUTdwE0W.js";
 import { a as addSX } from "./style-plT9Ah7t.js";
-import { K as KEY_SIZE_DATA } from "./theme.global-B46v_8eu.js";
+import { K as KEY_SIZE_DATA } from "./theme.global-DuEXPcSK.js";
 import { motion } from "framer-motion";
 import React__default, { useRef, useState, useEffect, useLayoutEffect, useMemo } from "react";
 import styled, { css } from "styled-components";
@@ -1368,4 +1368,4 @@ export {
   InputPrefixChildren as j,
   InputPostfixChildren as k
 };
-//# sourceMappingURL=component.styles-hc14mwUo.js.map
+//# sourceMappingURL=component.styles-CUNUEB0K.js.map