@jenesei-software/jenesei-kit-react 1.0.0

package/build/component.styles-Du2y0R4W.js

@@ -0,0 +1,177 @@
+import { motion } from "framer-motion";
+import { PatternFormat, NumericFormat } from "react-number-format";
+import styled, { css } from "styled-components";
+import { g as getFontSizeStyles } from "./component-C2JFFh-k.js";
+import { f as addOutline, b as addTransition, i as addNiceNumber } from "./style-CEGJOjRW.js";
+import { a as addError } from "./style-DeAgDHyI.js";
+import { a as addSX } from "./style-plT9Ah7t.js";
+import { K as KEY_SIZE_DATA } from "./theme.global-bN9HlSWE.js";
+const StyledInputWrapper = styled.div`
+  width: max-content;
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  ${(props) => props.$isWidthAsHeight ? css`
+          width: ${KEY_SIZE_DATA[props.$size].height}px;
+          min-width: ${KEY_SIZE_DATA[props.$size].height}px;
+          & input {
+            text-align: center;
+          }
+        ` : null};
+  ${addSX};
+`;
+const InputPlaceholder = css`
+  &::placeholder,
+  &::-webkit-input-placeholder {
+    ${(props) => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};
+    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)};
+    color: ${(props) => props.theme.colors.input[props.$genre].color.placeholder};
+    opacity: 1;
+  }
+`;
+const InputPlaceholderNiceNumber = css`
+  &::placeholder,
+  &::-webkit-input-placeholder {
+    ${(props) => getFontSizeStyles(16, props.$isBold ? 500 : 400, "Roboto Mono", props.theme.font.lineHeight)};
+    color: ${(props) => props.theme.colors.input[props.$genre].color.placeholder};
+    opacity: 1;
+    ${addNiceNumber};
+    background: transparent;
+  }
+  &:-ms-input-placeholder {
+    ${(props) => getFontSizeStyles(16, props.$isBold ? 500 : 400, "Roboto Mono", props.theme.font.lineHeight)};
+    color: ${(props) => props.theme.colors.input[props.$genre].color.placeholder};
+    opacity: 1;
+    ${addNiceNumber};
+    background: transparent;
+  }
+`;
+const InputGenre = css`
+  ${(props) => css`
+    background: ${props.theme.colors.input[props.$genre].background.rest};
+    border-color: ${props.theme.colors.input[props.$genre].border.rest};
+    color: ${props.theme.colors.input[props.$genre].color.rest};
+    &:active {
+      background: ${props.theme.colors.input[props.$genre].background.rest};
+      border-color: ${props.theme.colors.input[props.$genre].border.rest};
+      color: ${props.theme.colors.input[props.$genre].color.rest};
+    }
+    ${!props.$isNotShowHoverStyle && css`
+      &:hover {
+        background: ${props.theme.colors.input[props.$genre].background.hover};
+        border-color: ${props.theme.colors.input[props.$genre].border.hover};
+        color: ${props.theme.colors.input[props.$genre].color.hover};
+      }
+    `}
+    &:focus-visible {
+      background: ${props.theme.colors.input[props.$genre].background.rest};
+      border-color: ${props.theme.colors.input[props.$genre].border.rest};
+      color: ${props.theme.colors.input[props.$genre].color.rest};
+    }
+  `};
+`;
+const InputSize = css`
+  ${(props) => InputSizeConstructor(KEY_SIZE_DATA[props.$size])};
+`;
+const InputSizeConstructor = (props) => css`
+  padding: 0px ${props.padding}px;
+  height: ${props.height}px;
+  min-height: ${props.height}px;
+  max-height: ${props.height}px;
+  border-radius: ${props.radius}px;
+`;
+const InputHidden = css`
+  opacity: ${(props) => props.$isDisabled ? 0.5 : 1};
+`;
+const InputIsInputEffect = css`
+  ${(props) => props.$isInputEffect && css`
+      box-shadow: ${props.theme.effects.input};
+    `}
+`;
+const StyledInputCSS = css`
+  resize: none;
+  overflow: hidden;
+  width: 100%;
+  border: 1px solid;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  ${(props) => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};
+
+  ${InputSize};
+  ${InputGenre};
+  ${InputPlaceholder};
+  ${InputHidden};
+  ${InputIsInputEffect};
+  ${addOutline};
+  ${addTransition};
+  ${addError};
+
+  ${(props) => props.$isNiceNumber && css`
+      ${addNiceNumber};
+    `};
+  ${(props) => props.$isCenter && css`
+      text-align: center;
+      justify-content: center;
+    `};
+
+  ${(props) => props.$prefixChildren && css`
+      padding-left: ${`calc(${props.$prefixChildren.width} + ${props.$prefixChildren.right} + ${props.$prefixChildren.left})`};
+    `};
+
+  ${(props) => props.$postfixChildren && css`
+      padding-right: ${`calc(${props.$postfixChildren.width} + ${props.$postfixChildren.right} + ${props.$postfixChildren.left})`};
+    `};
+`;
+const StyledInput = styled.input`
+  ${StyledInputCSS};
+`;
+const StyledMotionInput = styled(motion.input)`
+  ${StyledInputCSS};
+`;
+const StyledInputPattern = styled(PatternFormat)`
+  ${StyledInputCSS};
+`;
+const StyledInputNumeric = styled(NumericFormat)`
+  ${StyledInputCSS};
+`;
+const InputPrefixChildren = styled.div`
+  position: absolute;
+  display: flex;
+  left: ${(props) => props.$left};
+  width: ${(props) => props.$width};
+  opacity: ${(props) => props.$isDisabled ? 0.5 : 1};
+  height: 100%;
+  ${addTransition};
+`;
+const InputPostfixChildren = styled.div`
+  position: absolute;
+  display: flex;
+  right: ${(props) => props.$right};
+  width: ${(props) => props.$width};
+  opacity: ${(props) => props.$isDisabled ? 0.5 : 1};
+  height: 100%;
+  ${addTransition};
+`;
+export {
+  InputPlaceholder as I,
+  StyledInputWrapper as S,
+  InputPlaceholderNiceNumber as a,
+  InputSize as b,
+  InputSizeConstructor as c,
+  InputIsInputEffect as d,
+  StyledInputCSS as e,
+  StyledInput as f,
+  StyledMotionInput as g,
+  StyledInputPattern as h,
+  StyledInputNumeric as i,
+  InputPrefixChildren as j,
+  InputPostfixChildren as k
+};
+//# sourceMappingURL=component.styles-Du2y0R4W.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-Du2y0R4W.js","sources":["../src/components/input/component.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion'\nimport { NumericFormat, PatternFormat } from 'react-number-format'\nimport styled, { css } from 'styled-components'\n\nimport { getFontSizeStyles } from '@local/components/typography'\nimport { addNiceNumber, addOutline, addTransition } from '@local/styles/add'\nimport { addError } from '@local/styles/error'\nimport { addSX } from '@local/styles/sx'\nimport { IThemeSizePropertyDefault, KEY_SIZE_DATA } from '@local/theme'\n\nimport { StyledInputChildrenProps, StyledInputProps, StyledInputWrapperProps } from '.'\n\n/****************************************** Wrapper *************************************************/\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  width: max-content;\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  ${props =>\n    props.$isWidthAsHeight\n      ? css`\n          width: ${KEY_SIZE_DATA[props.$size].height}px;\n          min-width: ${KEY_SIZE_DATA[props.$size].height}px;\n          & input {\n            text-align: center;\n          }\n        `\n      : null};\n  ${addSX};\n`\n\n/****************************************** Placeholder *************************************************/\nexport const InputPlaceholder = css<StyledInputProps>`\n  &::placeholder,\n  &::-webkit-input-placeholder {\n    ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};\n    color: ${props => props.theme.colors.input[props.$genre].color.placeholder};\n    opacity: 1;\n  }\n  &:-ms-input-placeholder {\n    ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};\n    color: ${props => props.theme.colors.input[props.$genre].color.placeholder};\n    opacity: 1;\n  }\n`\nexport const InputPlaceholderNiceNumber = css<StyledInputProps>`\n  &::placeholder,\n  &::-webkit-input-placeholder {\n    ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, 'Roboto Mono', props.theme.font.lineHeight)};\n    color: ${props => props.theme.colors.input[props.$genre].color.placeholder};\n    opacity: 1;\n    ${addNiceNumber};\n    background: transparent;\n  }\n  &:-ms-input-placeholder {\n    ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, 'Roboto Mono', props.theme.font.lineHeight)};\n    color: ${props => props.theme.colors.input[props.$genre].color.placeholder};\n    opacity: 1;\n    ${addNiceNumber};\n    background: transparent;\n  }\n`\n\n/****************************************** Genre *************************************************/\nconst InputGenre = css<StyledInputProps>`\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    &: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    ${!props.$isNotShowHoverStyle &&\n    css`\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    `}\n    &:focus-visible {\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  `};\n`\n\n/****************************************** Size *************************************************/\nexport const InputSize = css<StyledInputProps>`\n  ${props => InputSizeConstructor(KEY_SIZE_DATA[props.$size])};\n`\nexport const InputSizeConstructor = (props: IThemeSizePropertyDefault) => css`\n  padding: 0px ${props.padding}px;\n  height: ${props.height}px;\n  min-height: ${props.height}px;\n  max-height: ${props.height}px;\n  border-radius: ${props.radius}px;\n`\n\n/****************************************** Hidden *************************************************/\nconst InputHidden = css<StyledInputProps>`\n  opacity: ${props => (props.$isDisabled ? 0.5 : 1)};\n`\n/****************************************** is isInputEffect *************************************************/\nexport const InputIsInputEffect = css<Pick<StyledInputProps, '$isInputEffect'>>`\n  ${props =>\n    props.$isInputEffect &&\n    css`\n      box-shadow: ${props.theme.effects.input};\n    `}\n`\n\n/****************************************** Default *************************************************/\nexport const StyledInputCSS = css<StyledInputProps>`\n  resize: none;\n  overflow: hidden;\n  width: 100%;\n  border: 1px solid;\n\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};\n\n  ${InputSize};\n  ${InputGenre};\n  ${InputPlaceholder};\n  ${InputHidden};\n  ${InputIsInputEffect};\n  ${addOutline};\n  ${addTransition};\n  ${addError};\n\n  ${props =>\n    props.$isNiceNumber &&\n    css`\n      ${addNiceNumber};\n    `};\n  ${props =>\n    props.$isCenter &&\n    css`\n      text-align: center;\n      justify-content: center;\n    `};\n\n  ${props =>\n    props.$prefixChildren &&\n    css`\n      padding-left: ${`calc(${props.$prefixChildren.width} + ${props.$prefixChildren.right} + ${props.$prefixChildren.left})`};\n    `};\n\n  ${props =>\n    props.$postfixChildren &&\n    css`\n      padding-right: ${`calc(${props.$postfixChildren.width} + ${props.$postfixChildren.right} + ${props.$postfixChildren.left})`};\n    `};\n`\n\nexport const StyledInput = styled.input<StyledInputProps>`\n  ${StyledInputCSS};\n`\n\nexport const StyledMotionInput = styled(motion.input)<StyledInputProps>`\n  ${StyledInputCSS};\n`\n\nexport const StyledInputPattern = styled(PatternFormat)<StyledInputProps>`\n  ${StyledInputCSS};\n`\nexport const StyledInputNumeric = styled(NumericFormat)<StyledInputProps>`\n  ${StyledInputCSS};\n`\n\n/****************************************** Children *************************************************/\nexport const InputPrefixChildren = styled.div<StyledInputChildrenProps>`\n  position: absolute;\n  display: flex;\n  left: ${props => props.$left};\n  width: ${props => props.$width};\n  opacity: ${props => (props.$isDisabled ? 0.5 : 1)};\n  height: 100%;\n  ${addTransition};\n`\n\nexport const InputPostfixChildren = styled.div<StyledInputChildrenProps>`\n  position: absolute;\n  display: flex;\n  right: ${props => props.$right};\n  width: ${props => props.$width};\n  opacity: ${props => (props.$isDisabled ? 0.5 : 1)};\n  height: 100%;\n  ${addTransition};\n`\n"],"names":[],"mappings":"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"}

package/build/component.styles-DxeG9Opm.cjs

@@ -0,0 +1,47 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),r=require("react"),n=require("styled-components"),t=require("./style-CtGd1JVB.cjs"),o=require("./style-fRZ6xrVp.cjs"),a=n.div`
+  position: relative;
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  height: 20px;
+  ${t.addError};
+  ${o.addSX};
+`,s=n.div`
+  position: absolute;
+  height: 3px;
+  width: 100%;
+  padding: 0px 10px;
+  border-radius: 2px;
+`,i=n.input`
+  position: absolute;
+  width: 100%;
+  outline: none !important;
+  pointer-events: none;
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  left: 0;
+  margin: 0;
+  &::-webkit-slider-thumb {
+    pointer-events: all;
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    padding: 0;
+    border-radius: 50%;
+    background: ${e=>e.$colorBackground};
+    border: 3px ${e=>e.$colorBorder} solid;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: 0px;
+    transition:
+      transform ${e=>e.theme.transition.default},
+      color ${e=>e.theme.transition.default},
+      background-color ${e=>e.theme.transition.default};
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+`;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-DxeG9Opm.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-DxeG9Opm.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-DyGfo9t0.cjs

@@ -0,0 +1,32 @@
+"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-BfvB83xM.cjs"),i=require("./style-Dm74EPGE.cjs"),s=r.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`,t=r.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  user-select: none;
+`,d=r.div`
+  width: 100%;
+
+  ${e=>e.$isAccordionIcon&&r.css`
+      width: calc(100% - 26px);
+    `}
+`,a=r.div`
+  max-height: ${e=>e.$expanded?"9999px":"0"};
+  height: ${e=>e.$expanded?"100%":"0"};
+  opacity: ${e=>e.$expanded?1:0};
+  overflow: hidden;
+  ${i.addTransition};
+`,x=r(c.Icon)`
+  padding: 4px;
+  box-sizing: content-box;
+  cursor: pointer;
+  ${e=>e.$expanded?r.css`
+          transform: rotate(180deg);
+        `:r.css`
+          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-DyGfo9t0.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-DyGfo9t0.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-RkQwTlwG.js

@@ -0,0 +1,170 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { useState, useRef, useCallback } from "react";
+import { b as ErrorMessage } from "./style-DeAgDHyI.js";
+import { I as Input } from "./component-CuiUpH8H.js";
+import "./component.styles-Du2y0R4W.js";
+import styled, { css } from "styled-components";
+import { a as addSX } from "./style-plT9Ah7t.js";
+import { K as KEY_SIZE_DATA } from "./theme.global-bN9HlSWE.js";
+const InputOTP = (props) => {
+  const [otp, setOtp] = useState(new Array(props.length).fill(""));
+  const inputsRef = useRef([]);
+  const wrapperRef = useRef(null);
+  const handlePaste = useCallback(
+    (index, e) => {
+      e.preventDefault();
+      const pasteData = e.clipboardData.getData("Text");
+      const digits = pasteData.replace(/\D/g, "").split("");
+      if (!digits.length) return;
+      setOtp((prevOtp) => {
+        var _a, _b;
+        const newOtp = [...prevOtp];
+        let currentIndex = index;
+        for (let i = 0; i < digits.length && currentIndex < newOtp.length; i++) {
+          newOtp[currentIndex] = digits[i];
+          currentIndex++;
+        }
+        const joined = newOtp.join("");
+        (_a = props.onChange) == null ? void 0 : _a.call(props, joined);
+        if (newOtp.every((char) => char !== "")) {
+          (_b = props.onComplete) == null ? void 0 : _b.call(props, joined);
+        }
+        setTimeout(() => {
+          var _a2, _b2;
+          const firstEmpty = newOtp.findIndex((char) => char === "");
+          if (firstEmpty !== -1) {
+            (_a2 = inputsRef.current[firstEmpty]) == null ? void 0 : _a2.focus();
+          } else if (currentIndex < newOtp.length) {
+            (_b2 = inputsRef.current[currentIndex]) == null ? void 0 : _b2.focus();
+          }
+        }, 0);
+        return newOtp;
+      });
+    },
+    [props]
+  );
+  const handleChange = useCallback(
+    (index, value) => {
+      if (!/^\d*$/.test(value)) return;
+      setOtp((prevOtp) => {
+        var _a;
+        const newOtp = [...prevOtp];
+        newOtp[index] = value.slice(-1);
+        if (props.onChange) {
+          props.onChange(newOtp.join(""));
+        }
+        if (newOtp.every((char) => char !== "")) {
+          (_a = props.onComplete) == null ? void 0 : _a.call(props, newOtp.join(""));
+        }
+        if (value && index < prevOtp.length - 1) {
+          setTimeout(() => {
+            var _a2;
+            (_a2 = inputsRef.current[index + 1]) == null ? void 0 : _a2.focus();
+          }, 0);
+        }
+        return newOtp;
+      });
+    },
+    [props]
+  );
+  const handleKeyDown = (index, e) => {
+    const input = inputsRef.current[index];
+    if (!input) return;
+    if (e.key === "ArrowRight") {
+      const nextIndex = index < otp.length - 1 ? index + 1 : 0;
+      const nextInput = inputsRef.current[nextIndex];
+      if (nextInput) {
+        nextInput.focus();
+        setTimeout(() => nextInput.setSelectionRange(0, nextInput.value.length), 0);
+      }
+    }
+    if (e.key === "ArrowLeft") {
+      const prevIndex = index > 0 ? index - 1 : otp.length - 1;
+      const prevInput = inputsRef.current[prevIndex];
+      if (prevInput) {
+        prevInput.focus();
+        setTimeout(() => prevInput.setSelectionRange(0, prevInput.value.length), 0);
+      }
+    }
+    if (e.key === "Backspace") {
+      if (input.value) {
+        setTimeout(() => input.setSelectionRange(0, input.value.length), 0);
+      } else if (index > 0) {
+        setTimeout(() => {
+          const prevInput = inputsRef.current[index - 1];
+          if (prevInput) {
+            prevInput.focus();
+            prevInput.setSelectionRange(0, prevInput.value.length);
+          }
+        }, 0);
+      }
+    }
+  };
+  const handleFocusInput = useCallback((e) => {
+    setTimeout(() => e.target.setSelectionRange(0, e.target.value.length), 0);
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      InputOTPWrapper,
+      {
+        $error: props.error,
+        $size: props.size,
+        id: props.id,
+        ref: wrapperRef,
+        onBlur: (e) => {
+          setTimeout(() => {
+            var _a;
+            if (wrapperRef.current && !wrapperRef.current.contains(document.activeElement)) {
+              (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+            }
+          }, 0);
+        },
+        $sx: props.sx,
+        children: otp.map((digit, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Input,
+          {
+            isWidthAsHeight: true,
+            tabIndex: index + 1,
+            ref: (el) => {
+              inputsRef.current[index] = el;
+            },
+            variety: "standard",
+            type: "text",
+            inputMode: "numeric",
+            maxLength: 1,
+            value: digit,
+            onFocus: handleFocusInput,
+            onPaste: (e) => handlePaste(index, e),
+            onChange: (value) => handleChange(index, value),
+            onKeyDown: (e) => handleKeyDown(index, e),
+            genre: props.genre,
+            size: props.size
+          },
+          index
+        ))
+      }
+    ),
+    (props == null ? void 0 : props.error) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorMessage, { ...props.error, size: (props == null ? void 0 : props.error.size) ?? props.size }) : null
+  ] });
+};
+const InputOTPSize = css`
+  ${(props) => InputOTPSizeConstructor({ ...KEY_SIZE_DATA[props.$size], ...props })};
+`;
+const InputOTPSizeConstructor = (props) => css`
+  gap: ${props.padding - 2}px;
+  width: 100%;
+`;
+const InputOTPWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  ${InputOTPSize};
+  ${addSX};
+`;
+export {
+  InputOTP as I,
+  InputOTPSize as a,
+  InputOTPSizeConstructor as b,
+  InputOTPWrapper as c
+};
+//# sourceMappingURL=component.styles-RkQwTlwG.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-RkQwTlwG.js","sources":["../src/components/input-otp/component.tsx","../src/components/input-otp/component.styles.ts"],"sourcesContent":["import { ClipboardEvent, FocusEvent, KeyboardEvent, useCallback, useRef, useState } from 'react'\n\nimport { ErrorMessage } from '@local/styles/error'\n\nimport { InputOTPProps, InputOTPWrapper } from '.'\nimport { Input } from '../input'\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        $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-ZtwHuL4x.cjs

@@ -0,0 +1,75 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),r=require("react"),s=require("styled-components"),o=require("./style-CtGd1JVB.cjs"),i=require("./component.styles-BfvB83xM.cjs"),c=require("./component.styles-Dpg-__rn.cjs"),t=require("./component-xnEaYd4a.cjs"),n=require("./component-C52VCES6.cjs"),d=require("./style-Dm74EPGE.cjs"),h=require("./style-fRZ6xrVp.cjs"),l=require("./theme.global-D6XU05Et.cjs"),a=s.css`
+  ${e=>x({...l.KEY_SIZE_DATA[e.$size],isWidthAsHeight:e.$isWidthAsHeight})};
+`,x=e=>s.css`
+  height: ${e.height}px;
+  min-height: ${e.height}px;
+  border-radius: ${e.radius}px;
+  gap: ${e.padding-2}px;
+  ${r=>n.getFontSizeStyles(e.font,700,r.theme.font.family)};
+  padding: ${e.padding-4}px;
+  ${e.isWidthAsHeight&&s.css`
+    width: ${e.height}px;
+    min-width: ${e.height}px;
+    padding: 0px;
+  `};
+`,p=s.css`
+  ${e=>s.css`
+    background: ${e.theme.colors.checkbox[e.$genre].background.rest};
+    border-color: ${e.theme.colors.checkbox[e.$genre].border.rest};
+    color: ${e.theme.colors.checkbox[e.$genre].color.rest};
+    &:hover {
+      background: ${e.theme.colors.checkbox[e.$genre].background.hover};
+      border-color: ${e.theme.colors.checkbox[e.$genre].border.hover};
+      color: ${e.theme.colors.checkbox[e.$genre].color.hover};
+    }
+  `};
+`,$=s.css`
+  ${e=>e.$isDisabled?s.css`
+          opacity: 0.5;
+          background: ${e.theme.colors.checkbox[e.$genre].background.rest} !important;
+          border-color: ${e.theme.colors.checkbox[e.$genre].border.rest} !important;
+          color: ${e.theme.colors.checkbox[e.$genre].color.rest} !important;
+        `:s.css`
+          opacity: 1;
+        `}
+`,g=s.css`
+  ${e=>e.$isHiddenBorder&&s.css`
+      border-color: transparent !important;
+    `}
+`,u=s.button`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  border: 1px solid transparent;
+  user-select: none;
+  cursor: pointer;
+  background-color: ${e=>e.$isNotBackground&&"transparent"};
+
+  ${c.addRippleDefault};
+  ${d.addTransition};
+  ${p};
+  ${$}
+  ${g};
+  ${a};
+  ${d.addOutline};
+  ${o.addError};
+  ${n.addSXTypography};
+  ${h.addSX};
+`,b=s(i.Icon)`
+  ${e=>e.$checked?s.css`
+          & #check {
+            color: inherit;
+          }
+          & #uncheck {
+            color: transparent;
+          }
+        `:s.css`
+          & #check {
+            color: transparent;
+          }
+          & #uncheck {
+            color: inherit;
+          }
+        `}
+`;exports.Checkbox=c=>{const n=r.useCallback(e=>{var r;null==(r=c.onChange)||r.call(c,e)},[c]),d=s.useTheme(),h=r.useMemo(()=>e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(b,{size:c.sizeIcon||c.size,name:c.view,type:"checkbox",order:c.iconOrder,$genre:c.genre,$checked:c.checked}),c.children&&c.children]}),[c.checked,c.children,c.genre,c.iconOrder,c.size,c.sizeIcon,c.view]),l=e.jsxRuntimeExports.jsx(i.Icon,{size:c.size,type:"loading",name:"Line"});return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs(u,{type:"button",$genre:c.genre,$error:c.error,$view:c.view,$checked:c.checked,$isWidthAsHeight:c.isWidthAsHeight,$size:c.size,$isDisabled:c.isDisabled,$isHiddenBorder:c.isHiddenBorder,$isNotBackground:c.isNotBackground,$sx:c.sx,$sxTypography:c.sxTypography,disabled:c.isDisabled,tabIndex:0,onClick:()=>!c.isDisabled&&n(!c.checked),children:[e.jsxRuntimeExports.jsx(t.Ripple,{color:d.colors.checkbox[c.genre].color.rest,isDisabled:c.isDisabled}),c.isOnlyLoading?c.isLoading?l:h:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[h,c.isLoading&&l]})]}),(null==c?void 0:c.error)?e.jsxRuntimeExports.jsx(o.ErrorMessage,{...c.error,size:(null==c?void 0:c.error.size)??c.size}):null]})},exports.CheckboxGenre=p,exports.CheckboxSize=a,exports.CheckboxSizeConstructor=x,exports.CheckboxWrapper=u,exports.StyledIcon=b;
+//# sourceMappingURL=component.styles-ZtwHuL4x.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-ZtwHuL4x.cjs","sources":["../src/components/checkbox/component.styles.ts","../src/components/checkbox/component.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nimport { Icon } from '@local/components/icon'\nimport { addSXTypography, getFontSizeStyles } from '@local/components/typography'\nimport { addOutline, addTransition } from '@local/styles/add'\nimport { addError } from '@local/styles/error'\nimport { addSX } from '@local/styles/sx'\nimport { IThemeSizePropertyDefault, KEY_SIZE_DATA } from '@local/theme'\n\nimport { StyledCheckboxProps, StyledIconProps } from '.'\nimport { addRippleDefault } from '../ripple'\n\n/****************************************** Size *************************************************/\nexport const CheckboxSize = css<StyledCheckboxProps>`\n  ${props => CheckboxSizeConstructor({ ...KEY_SIZE_DATA[props.$size], isWidthAsHeight: props.$isWidthAsHeight })};\n`\nexport const CheckboxSizeConstructor = (\n  props: IThemeSizePropertyDefault & {\n    isWidthAsHeight?: boolean\n  }\n) => css`\n  height: ${props.height}px;\n  min-height: ${props.height}px;\n  border-radius: ${props.radius}px;\n  gap: ${props.padding - 2}px;\n  ${params => getFontSizeStyles(props.font, 700, params.theme.font.family)};\n  padding: ${props.padding - 4}px;\n  ${props.isWidthAsHeight &&\n  css`\n    width: ${props.height}px;\n    min-width: ${props.height}px;\n    padding: 0px;\n  `};\n`\n\n/****************************************** Genre *************************************************/\nexport const CheckboxGenre = css<StyledCheckboxProps>`\n  ${props => css`\n    background: ${props.theme.colors.checkbox[props.$genre].background.rest};\n    border-color: ${props.theme.colors.checkbox[props.$genre].border.rest};\n    color: ${props.theme.colors.checkbox[props.$genre].color.rest};\n    &:hover {\n      background: ${props.theme.colors.checkbox[props.$genre].background.hover};\n      border-color: ${props.theme.colors.checkbox[props.$genre].border.hover};\n      color: ${props.theme.colors.checkbox[props.$genre].color.hover};\n    }\n  `};\n`\n\n/****************************************** Disabled *************************************************/\nconst CheckboxDisabled = css<StyledCheckboxProps>`\n  ${props =>\n    props.$isDisabled\n      ? css`\n          opacity: 0.5;\n          background: ${props.theme.colors.checkbox[props.$genre].background.rest} !important;\n          border-color: ${props.theme.colors.checkbox[props.$genre].border.rest} !important;\n          color: ${props.theme.colors.checkbox[props.$genre].color.rest} !important;\n        `\n      : css`\n          opacity: 1;\n        `}\n`\n\n/****************************************** HiddenBorder *************************************************/\nconst CheckboxHiddenBorder = css<StyledCheckboxProps>`\n  ${props =>\n    props.$isHiddenBorder &&\n    css`\n      border-color: transparent !important;\n    `}\n`\n\n/****************************************** Default *************************************************/\nexport const CheckboxWrapper = styled.button<StyledCheckboxProps>`\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  border: 1px solid transparent;\n  user-select: none;\n  cursor: pointer;\n  background-color: ${props => props.$isNotBackground && 'transparent'};\n\n  ${addRippleDefault};\n  ${addTransition};\n  ${CheckboxGenre};\n  ${CheckboxDisabled}\n  ${CheckboxHiddenBorder};\n  ${CheckboxSize};\n  ${addOutline};\n  ${addError};\n  ${addSXTypography};\n  ${addSX};\n`\n\n/****************************************** Styled *************************************************/\nexport const StyledIcon = styled(Icon)<StyledIconProps>`\n  ${props =>\n    props.$checked\n      ? css`\n          & #check {\n            color: inherit;\n          }\n          & #uncheck {\n            color: transparent;\n          }\n        `\n      : css`\n          & #check {\n            color: transparent;\n          }\n          & #uncheck {\n            color: inherit;\n          }\n        `}\n`\n","import { FC, useCallback, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\n\nimport { ErrorMessage } from '@local/styles/error'\n\nimport { CheckboxProps, CheckboxWrapper, StyledIcon } from '.'\nimport { Icon } from '../icon'\nimport { Ripple } from '../ripple'\n\nexport const Checkbox: FC<CheckboxProps> = props => {\n  const handleOnClick = useCallback(\n    (checked: boolean) => {\n      props.onChange?.(checked)\n    },\n    [props]\n  )\n  const theme = useTheme()\n  const children = useMemo(\n    () => (\n      <>\n        <StyledIcon\n          size={props.sizeIcon || props.size}\n          name={props.view}\n          type=\"checkbox\"\n          order={props.iconOrder}\n          $genre={props.genre}\n          $checked={props.checked}\n        />\n        {props.children && props.children}\n      </>\n    ),\n    [props.checked, props.children, props.genre, props.iconOrder, props.size, props.sizeIcon, props.view]\n  )\n  const LoadingComponent = <Icon size={props.size} type=\"loading\" name=\"Line\" />\n\n  return (\n    <>\n      <CheckboxWrapper\n        type=\"button\"\n        $genre={props.genre}\n        $error={props.error}\n        $view={props.view}\n        $checked={props.checked}\n        $isWidthAsHeight={props.isWidthAsHeight}\n        $size={props.size}\n        $isDisabled={props.isDisabled}\n        $isHiddenBorder={props.isHiddenBorder}\n        $isNotBackground={props.isNotBackground}\n        $sx={props.sx}\n        $sxTypography={props.sxTypography}\n        disabled={props.isDisabled}\n        tabIndex={0}\n        onClick={() => !props.isDisabled && handleOnClick(!props.checked)}\n      >\n        <Ripple color={theme.colors.checkbox[props.genre].color.rest} isDisabled={props.isDisabled} />\n        {props.isOnlyLoading ? (\n          props.isLoading ? (\n            LoadingComponent\n          ) : (\n            children\n          )\n        ) : (\n          <>\n            {children}\n            {props.isLoading && LoadingComponent}\n          </>\n        )}\n      </CheckboxWrapper>\n      {props?.error ? <ErrorMessage {...props.error} size={props?.error.size ?? props.size} /> : null}\n    </>\n  )\n}\n"],"names":["CheckboxSize","css","props","CheckboxSizeConstructor","KEY_SIZE_DATA","$size","isWidthAsHeight","$isWidthAsHeight","height","radius","padding","params","getFontSizeStyles","font","theme","family","CheckboxGenre","colors","checkbox","$genre","background","rest","border","color","hover","CheckboxDisabled","$isDisabled","CheckboxHiddenBorder","$isHiddenBorder","CheckboxWrapper","styled","button","$isNotBackground","addRippleDefault","addTransition","addOutline","addError","addSXTypography","addSX","StyledIcon","Icon","$checked","handleOnClick","useCallback","checked","_a","onChange","call","useTheme","children","useMemo","jsxs","Fragment","jsx","size","sizeIcon","name","view","type","order","iconOrder","genre","LoadingComponent","$error","error","$view","isDisabled","isHiddenBorder","isNotBackground","$sx","sx","$sxTypography","sxTypography","disabled","tabIndex","onClick","Ripple","isOnlyLoading","isLoading","ErrorMessage"],"mappings":"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"}