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

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

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

package/build/component.styles-Bb7_KygZ.cjs

@@ -0,0 +1,73 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),r=require("./style-D3Lbn1EL.cjs"),o=require("./theme.global-CcoD5bPP.cjs"),s=require("react"),i=require("styled-components"),t=require("./component.styles-BKnUDWqO.cjs"),n=require("./component.styles-Dpg-__rn.cjs"),c=require("./component-CLqcB5mM.cjs"),d=require("./component-BVnHSTJd.cjs"),l=require("./style-Df37KnoJ.cjs"),a=require("./style-fRZ6xrVp.cjs"),h=i.css`
+  ${e=>x({...o.KEY_SIZE_DATA[e.$size],isWidthAsHeight:e.$isWidthAsHeight})};
+`,x=e=>i.css`
+  height: ${e.height}px;
+  min-height: ${e.height}px;
+  border-radius: ${e.radius}px;
+  gap: ${e.padding-2}px;
+  padding: ${e.padding-4}px;
+  ${e.isWidthAsHeight&&i.css`
+    width: ${e.height}px;
+    min-width: ${e.height}px;
+    padding: 0px;
+  `};
+`,$=i.css`
+  ${e=>i.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};
+    }
+  `};
+`,p=i.css`
+  ${l.addDisabled};
+  ${e=>e.$isDisabled?i.css`
+          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;
+        `:""}
+`,u=i.css`
+  ${e=>e.$isHiddenBorder&&i.css`
+      border-color: transparent !important;
+    `}
+`,g=i.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"};
+
+  ${n.addRippleDefault};
+  ${l.addTransition};
+  ${$};
+  ${u};
+  ${h};
+  ${p}
+  ${l.addOutline};
+  ${l.addFont};
+  ${r.addError};
+  ${d.addSXTypography};
+  ${a.addSX};
+`,b=i(t.Icon)`
+  ${e=>e.$checked?i.css`
+          & #check {
+            color: inherit;
+          }
+          & #uncheck {
+            color: transparent;
+          }
+        `:i.css`
+          & #check {
+            color: transparent;
+          }
+          & #uncheck {
+            color: inherit;
+          }
+        `}
+`;exports.Checkbox=n=>{var d,l,a,h,x;const $=s.useCallback(e=>{var r;null==(r=n.onChange)||r.call(n,e)},[n.onChange]),p=i.useTheme(),u=s.useMemo(()=>e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(b,{size:n.sizeIcon||n.size,name:n.view,type:"checkbox",order:n.iconOrder,$genre:n.genre,$checked:n.checked}),n.children&&n.children]}),[n.checked,n.children,n.genre,n.iconOrder,n.size,n.sizeIcon,n.view]),m=e.jsxRuntimeExports.jsx(t.Icon,{size:n.size,type:"loading",name:"Line"});return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs(g,{type:"button",$genre:n.genre,$error:n.error,$view:n.view,$font:{size:(null==(d=n.font)?void 0:d.size)??o.KEY_SIZE_DATA[n.size].font,weight:(null==(l=n.font)?void 0:l.weight)??700,family:(null==(a=n.font)?void 0:a.family)??p.font.family,height:null==(h=n.font)?void 0:h.height},$checked:n.checked,$isWidthAsHeight:n.isWidthAsHeight,$size:n.size,$isDisabled:n.isDisabled,$isHiddenBorder:n.isHiddenBorder,$isNotBackground:n.isNotBackground,$sx:n.sx,$sxTypography:n.sxTypography,$isDisabledOutline:n.isDisabled??n.isDisabledOutline,$isOutlineBoxShadow:n.isOutlineBoxShadow,$isReadOnly:n.isReadOnly,disabled:n.isDisabled,tabIndex:0,onClick:()=>!n.isDisabled&&$(!n.checked),children:[e.jsxRuntimeExports.jsx(c.Ripple,{color:p.colors.checkbox[n.genre].color.rest,isDisabled:n.isDisabled}),n.isOnlyLoading?n.isLoading?m:u:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[u,n.isLoading&&m]})]}),(null==n?void 0:n.error)?e.jsxRuntimeExports.jsx(r.ErrorMessage,{...n.error,size:(null==n?void 0:n.error.size)??n.size,font:{size:12,weight:400,family:(null==(x=n.font)?void 0:x.family)??p.font.family}}):null]})},exports.CheckboxGenre=$,exports.CheckboxSize=h,exports.CheckboxSizeConstructor=x,exports.CheckboxWrapper=g,exports.StyledIcon=b;
+//# sourceMappingURL=component.styles-Bb7_KygZ.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-Bb7_KygZ.cjs","sources":["../src/components/checkbox/component.styles.ts","../src/components/checkbox/component.tsx"],"sourcesContent":["import { Icon } from '@local/components/icon';\nimport { addSXTypography } from '@local/components/typography';\nimport { addDisabled, addFont, 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 styled, { css } from 'styled-components';\n\nimport { addRippleDefault } from '../ripple';\nimport { StyledCheckboxProps, StyledIconProps } from '.';\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  padding: ${props.padding - 4}px;\n  ${\n    props.isWidthAsHeight &&\n    css`\n    width: ${props.height}px;\n    min-width: ${props.height}px;\n    padding: 0px;\n  `\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 addCheckboxDisabled = css<StyledCheckboxProps>`\n  ${addDisabled};\n  ${(props) =>\n    props.$isDisabled\n      ? css`\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      : ''}\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  ${CheckboxHiddenBorder};\n  ${CheckboxSize};\n  ${addCheckboxDisabled}\n  ${addOutline};\n  ${addFont};\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 { ErrorMessage } from '@local/styles/error';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { FC, useCallback, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { Icon } from '../icon';\nimport { Ripple } from '../ripple';\nimport { CheckboxProps, CheckboxWrapper, StyledIcon } from '.';\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n  const handleOnClick = useCallback(\n    (checked: boolean) => {\n      props.onChange?.(checked);\n    },\n    [props.onChange],\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        $font={{\n          size: props.font?.size ?? KEY_SIZE_DATA[props.size].font,\n          weight: props.font?.weight ?? 700,\n          family: props.font?.family ?? theme.font.family,\n          height: props.font?.height,\n        }}\n        $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        $isDisabledOutline={props.isDisabled ?? props.isDisabledOutline}\n        $isOutlineBoxShadow={props.isOutlineBoxShadow}\n        $isReadOnly={props.isReadOnly}\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 ? (\n        <ErrorMessage\n          {...props.error}\n          size={props?.error.size ?? props.size}\n          font={{\n            size: 12,\n            weight: 400,\n            family: props.font?.family ?? theme.font.family,\n          }}\n        />\n      ) : null}\n    </>\n  );\n};\n"],"names":["CheckboxSize","css","props","CheckboxSizeConstructor","KEY_SIZE_DATA","$size","isWidthAsHeight","$isWidthAsHeight","height","radius","padding","CheckboxGenre","theme","colors","checkbox","$genre","background","rest","border","color","hover","addCheckboxDisabled","addDisabled","$isDisabled","CheckboxHiddenBorder","$isHiddenBorder","CheckboxWrapper","styled","button","$isNotBackground","addRippleDefault","addTransition","addOutline","addFont","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","$font","font","weight","_b","family","_c","_d","isDisabled","isHiddenBorder","isNotBackground","$sx","sx","$sxTypography","sxTypography","$isDisabledOutline","isDisabledOutline","$isOutlineBoxShadow","isOutlineBoxShadow","$isReadOnly","isReadOnly","disabled","tabIndex","onClick","Ripple","isOnlyLoading","isLoading","ErrorMessage","_e"],"mappings":"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"}

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

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