@jenesei-software/jenesei-kit-react 1.0.0 → 1.2.0

package/build/component.styles-Du2y0R4W.js

@@ -1,177 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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-RkQwTlwG.js.map

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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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"}

package/build/style-CEGJOjRW.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"style-CEGJOjRW.js","sources":["../src/styles/add/style.ts"],"sourcesContent":["import { css } from 'styled-components'\n\nexport const addRemoveScrollbar = css`\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-horizontal {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-vertical {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    display: none;\n  }\n`\n\nexport const addTransition = css`\n  transition:\n    outline 0s,\n    opacity ${props => props.theme.transition.default},\n    transform ${props => props.theme.transition.default},\n    background-color ${props => props.theme.transition.default},\n    height ${props => props.theme.transition.default},\n    max-height ${props => props.theme.transition.default},\n    width ${props => props.theme.transition.default},\n    color ${props => props.theme.transition.default},\n    visibility ${props => props.theme.transition.default},\n    box-shadow ${props => props.theme.transition.default},\n    border-color ${props => props.theme.transition.default},\n    left ${props => props.theme.transition.default},\n    right ${props => props.theme.transition.default},\n    grid-template-areas ${props => props.theme.transition.default},\n    grid-template-rows ${props => props.theme.transition.default},\n    grid-template-columns ${props => props.theme.transition.default};\n`\n\nexport const addTransitionWithoutSize = css`\n  transition:\n    outline 0s,\n    opacity ${props => props.theme.transition.default},\n    transform ${props => props.theme.transition.default},\n    background-color ${props => props.theme.transition.default},\n    color ${props => props.theme.transition.default},\n    visibility ${props => props.theme.transition.default},\n    box-shadow ${props => props.theme.transition.default},\n    border-color ${props => props.theme.transition.default},\n    left ${props => props.theme.transition.default},\n    right ${props => props.theme.transition.default},\n    grid-template-areas ${props => props.theme.transition.default},\n    grid-template-rows ${props => props.theme.transition.default},\n    grid-template-columns ${props => props.theme.transition.default};\n`\n\nexport const addGridTransition = css`\n  transition:\n    grid-template-areas ${props => props.theme.transition.default},\n    grid-template-rows ${props => props.theme.transition.default},\n    grid-template-columns ${props => props.theme.transition.default};\n`\n\nexport const addColorTransition = css`\n  transition:\n    outline 0s,\n    opacity ${props => props.theme.transition.default},\n    background-color ${props => props.theme.transition.default},\n    color ${props => props.theme.transition.default},\n    box-shadow ${props => props.theme.transition.default},\n    border-color ${props => props.theme.transition.default};\n`\n\nexport const addOutline = css`\n  outline: 2px solid transparent;\n  outline-offset: 1px;\n  &:focus-visible {\n    outline: 2px solid ${props => props.theme.states.focus};\n  }\n`\n\nexport const addBorder = css`\n  border: 1px solid transparent;\n  &:focus-visible {\n    border-color: ${props => props.theme.states.focus};\n  }\n`\n\nexport const addRemoveOutline = css`\n  outline: 0px solid transparent;\n  outline-offset: 0px;\n  &:focus-visible {\n    outline: 0px solid ${props => props.theme.states.focus};\n  }\n`\n\nexport const addNiceNumber = css`\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum';\n`\n"],"names":[],"mappings":";AAEO,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqB3B,MAAM,gBAAgB;AAAA;AAAA;AAAA,cAGf,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,gBACrC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,uBAChC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,aACjD,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,iBACnC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,YAC5C,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,YACvC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,iBAClC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,iBACvC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,mBACrC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,WAC/C,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,YACtC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,0BACzB,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,yBACxC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,4BACpC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA;AAG5D,MAAM,2BAA2B;AAAA;AAAA;AAAA,cAG1B,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,gBACrC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,uBAChC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,YAClD,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,iBAClC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,iBACvC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,mBACrC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,WAC/C,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,YACtC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,0BACzB,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,yBACxC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,4BACpC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA;AAG5D,MAAM,oBAAoB;AAAA;AAAA,0BAEP,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,yBACxC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,4BACpC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA;AAG5D,MAAM,qBAAqB;AAAA;AAAA;AAAA,cAGpB,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,uBAC9B,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,YAClD,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,iBAClC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA,mBACrC,CAAA,UAAS,MAAM,MAAM,WAAW,OAAO;AAAA;AAGnD,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA,yBAID,CAAA,UAAS,MAAM,MAAM,OAAO,KAAK;AAAA;AAAA;AAInD,MAAM,YAAY;AAAA;AAAA;AAAA,oBAGL,CAAA,UAAS,MAAM,MAAM,OAAO,KAAK;AAAA;AAAA;AAI9C,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA,yBAIP,CAAA,UAAS,MAAM,MAAM,OAAO,KAAK;AAAA;AAAA;AAInD,MAAM,gBAAgB;AAAA;AAAA;AAAA;"}

package/build/style-Dm74EPGE.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"style-Dm74EPGE.cjs","sources":["../src/styles/add/style.ts"],"sourcesContent":["import { css } from 'styled-components'\n\nexport const addRemoveScrollbar = css`\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-horizontal {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-vertical {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    display: none;\n  }\n`\n\nexport const addTransition = css`\n  transition:\n    outline 0s,\n    opacity ${props => props.theme.transition.default},\n    transform ${props => props.theme.transition.default},\n    background-color ${props => props.theme.transition.default},\n    height ${props => props.theme.transition.default},\n    max-height ${props => props.theme.transition.default},\n    width ${props => props.theme.transition.default},\n    color ${props => props.theme.transition.default},\n    visibility ${props => props.theme.transition.default},\n    box-shadow ${props => props.theme.transition.default},\n    border-color ${props => props.theme.transition.default},\n    left ${props => props.theme.transition.default},\n    right ${props => props.theme.transition.default},\n    grid-template-areas ${props => props.theme.transition.default},\n    grid-template-rows ${props => props.theme.transition.default},\n    grid-template-columns ${props => props.theme.transition.default};\n`\n\nexport const addTransitionWithoutSize = css`\n  transition:\n    outline 0s,\n    opacity ${props => props.theme.transition.default},\n    transform ${props => props.theme.transition.default},\n    background-color ${props => props.theme.transition.default},\n    color ${props => props.theme.transition.default},\n    visibility ${props => props.theme.transition.default},\n    box-shadow ${props => props.theme.transition.default},\n    border-color ${props => props.theme.transition.default},\n    left ${props => props.theme.transition.default},\n    right ${props => props.theme.transition.default},\n    grid-template-areas ${props => props.theme.transition.default},\n    grid-template-rows ${props => props.theme.transition.default},\n    grid-template-columns ${props => props.theme.transition.default};\n`\n\nexport const addGridTransition = css`\n  transition:\n    grid-template-areas ${props => props.theme.transition.default},\n    grid-template-rows ${props => props.theme.transition.default},\n    grid-template-columns ${props => props.theme.transition.default};\n`\n\nexport const addColorTransition = css`\n  transition:\n    outline 0s,\n    opacity ${props => props.theme.transition.default},\n    background-color ${props => props.theme.transition.default},\n    color ${props => props.theme.transition.default},\n    box-shadow ${props => props.theme.transition.default},\n    border-color ${props => props.theme.transition.default};\n`\n\nexport const addOutline = css`\n  outline: 2px solid transparent;\n  outline-offset: 1px;\n  &:focus-visible {\n    outline: 2px solid ${props => props.theme.states.focus};\n  }\n`\n\nexport const addBorder = css`\n  border: 1px solid transparent;\n  &:focus-visible {\n    border-color: ${props => props.theme.states.focus};\n  }\n`\n\nexport const addRemoveOutline = css`\n  outline: 0px solid transparent;\n  outline-offset: 0px;\n  &:focus-visible {\n    outline: 0px solid ${props => props.theme.states.focus};\n  }\n`\n\nexport const addNiceNumber = css`\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum';\n`\n"],"names":["addRemoveScrollbar","css","addTransition","props","theme","transition","default","addTransitionWithoutSize","addGridTransition","addColorTransition","addOutline","states","focus","addBorder","addRemoveOutline","addNiceNumber"],"mappings":"kDAEaA,EAAqBC,EAAAA,GAAAA;;;;;;;;;;;;;;;;;;;EAqBrBC,EAAgBD,EAAAA,GAAAA;;;cAGfE,GAASA,EAAMC,MAAMC,WAAWC;gBAC9BH,GAASA,EAAMC,MAAMC,WAAWC;uBACzBH,GAASA,EAAMC,MAAMC,WAAWC;aAC1CH,GAASA,EAAMC,MAAMC,WAAWC;iBAC5BH,GAASA,EAAMC,MAAMC,WAAWC;YACrCH,GAASA,EAAMC,MAAMC,WAAWC;YAChCH,GAASA,EAAMC,MAAMC,WAAWC;iBAC3BH,GAASA,EAAMC,MAAMC,WAAWC;iBAChCH,GAASA,EAAMC,MAAMC,WAAWC;mBAC9BH,GAASA,EAAMC,MAAMC,WAAWC;WACxCH,GAASA,EAAMC,MAAMC,WAAWC;YAC/BH,GAASA,EAAMC,MAAMC,WAAWC;0BAClBH,GAASA,EAAMC,MAAMC,WAAWC;yBACjCH,GAASA,EAAMC,MAAMC,WAAWC;4BAC7BH,GAASA,EAAMC,MAAMC,WAAWC;EAG/CC,EAA2BN,EAAAA,GAAAA;;;cAG1BE,GAASA,EAAMC,MAAMC,WAAWC;gBAC9BH,GAASA,EAAMC,MAAMC,WAAWC;uBACzBH,GAASA,EAAMC,MAAMC,WAAWC;YAC3CH,GAASA,EAAMC,MAAMC,WAAWC;iBAC3BH,GAASA,EAAMC,MAAMC,WAAWC;iBAChCH,GAASA,EAAMC,MAAMC,WAAWC;mBAC9BH,GAASA,EAAMC,MAAMC,WAAWC;WACxCH,GAASA,EAAMC,MAAMC,WAAWC;YAC/BH,GAASA,EAAMC,MAAMC,WAAWC;0BAClBH,GAASA,EAAMC,MAAMC,WAAWC;yBACjCH,GAASA,EAAMC,MAAMC,WAAWC;4BAC7BH,GAASA,EAAMC,MAAMC,WAAWC;EAG/CE,EAAoBP,EAAAA,GAAAA;;0BAEPE,GAASA,EAAMC,MAAMC,WAAWC;yBACjCH,GAASA,EAAMC,MAAMC,WAAWC;4BAC7BH,GAASA,EAAMC,MAAMC,WAAWC;EAG/CG,EAAqBR,EAAAA,GAAAA;;;cAGpBE,GAASA,EAAMC,MAAMC,WAAWC;uBACvBH,GAASA,EAAMC,MAAMC,WAAWC;YAC3CH,GAASA,EAAMC,MAAMC,WAAWC;iBAC3BH,GAASA,EAAMC,MAAMC,WAAWC;mBAC9BH,GAASA,EAAMC,MAAMC,WAAWC;EAGtCI,EAAaT,EAAAA,GAAAA;;;;yBAIDE,GAASA,EAAMC,MAAMO,OAAOC;;EAIxCC,EAAYZ,EAAAA,GAAAA;;;oBAGLE,GAASA,EAAMC,MAAMO,OAAOC;;EAInCE,EAAmBb,EAAAA,GAAAA;;;;yBAIPE,GAASA,EAAMC,MAAMO,OAAOC;;EAIxCG,EAAgBd,EAAAA,GAAAA;;;"}