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

package/build/component-input.d.ts

@@ -3,6 +3,7 @@ import { ClipboardEventHandler } from 'react';
 import { Component } from 'react';
 import { ComponentType } from 'react';
 import { CSSObject } from 'styled-components';
+import { CSSProperties } from 'react';
 import { DefaultTheme } from 'styled-components';
 import { DetailedHTMLProps } from 'react';
 import { FocusEventHandler } from 'react';
@@ -38,13 +39,25 @@ declare interface addErrorProps {
     error?: ErrorMessageProps;
 }
 
+declare type addFontProps = {
+    font?: FontSizeStylesProps;
+};
+
 /****************************************** is isInputEffect *************************************************/
-export declare const addInputIsInputEffect: RuleSet<Pick<AddDollarSign<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>, "$isInputEffect">>;
+export declare const addInputIsInputEffect: RuleSet<Pick<StyledInputProps, "$isInputEffect">>;
 
 /****************************************** Placeholder *************************************************/
-export declare const addInputPlaceholder: RuleSet<AddDollarSign<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>;
+export declare const addInputPlaceholder: RuleSet<StyledInputProps>;
+
+export declare const addInputPlaceholderNiceNumber: RuleSet<StyledInputProps>;
 
-export declare const addInputPlaceholderNiceNumber: RuleSet<AddDollarSign<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>;
+declare type addOutlineProps = {
+    isReadOnly?: boolean;
+    isDisabledOutline?: boolean;
+    isOutlineBoxShadow?: boolean;
+};
+
+declare type addOutlinePropsDollar = AddDollarSign_2<addOutlineProps>;
 
 declare interface addSXProps {
     sx?: SXProps;
@@ -52,7 +65,7 @@ declare interface addSXProps {
 
 declare type BaseInputProps = CommonInputProps & (ControlledValue | UncontrolledValue);
 
-declare type CommonInputProps = addErrorProps & addSXProps & {
+declare type CommonInputProps = addErrorProps & addFontProps & addOutlineProps & addSXProps & {
     ref?: Ref<HTMLInputElement | null>;
     name?: string;
     id?: string;
@@ -67,7 +80,6 @@ declare type CommonInputProps = addErrorProps & addSXProps & {
     isNiceNumber?: boolean;
     isDisabled?: boolean;
     isLoading?: boolean;
-    isReadOnly?: boolean;
     isInputEffect?: boolean;
     isRequired?: boolean;
     isCenter?: boolean;
@@ -96,6 +108,13 @@ declare type ErrorMessageProps = {
     isErrorAbsolute?: boolean;
     size?: IThemeSize;
     sx?: addSXProps['sx'];
+} & addFontProps;
+
+declare type FontSizeStylesProps = {
+    size?: TypographyDataProps['size'];
+    weight?: TypographyDataProps['weight'];
+    family?: TypographyDataProps['family'];
+    height?: TypographyDataProps['height'];
 };
 
 export declare function formatPhoneNumber(dialCode: string, international: string): {
@@ -131,7 +150,7 @@ export declare const InputPrefixChildren: IStyledComponentBase<"web", Substitute
 export declare type InputProps = InputStandardProps | InputPatternProps | InputNumericProps;
 
 /****************************************** Size *************************************************/
-export declare const InputSize: RuleSet<AddDollarSign<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>;
+export declare const InputSize: RuleSet<StyledInputProps>;
 
 export declare const InputSizeConstructor: (props: IThemeSizePropertyDefault) => RuleSet<object>;
 
@@ -146,7 +165,9 @@ export declare type InputStandardProps = BaseInputProps & {
 
 declare type IThemeDevice = 'default' | 'tablet' | 'mobile';
 
-declare type IThemeGenreInput = Record<Extract<IThemeGenreName, 'gray' | 'grayBorder' | 'blackBorder' | 'realebail-white'>, IThemeGenreTypeDefault>;
+declare type IThemeFontFamily = 'Inter' | 'Roboto' | 'Work Sans' | 'Roboto Mono' | 'Manrope';
+
+declare type IThemeGenreInput = Record<Extract<IThemeGenreName, 'gray' | 'grayBorder' | 'blackBorder' | 'realebail-white' | 'bustmarket-gray'>, IThemeGenreTypeDefault>;
 
 declare type IThemeGenreName = 'gray' | 'grayBorder' | 'black' | 'blackBorder' | 'product' | 'productBorder' | 'white' | 'greenTransparent' | 'redTransparent' | 'yellowTransparent' | 'realebail-product' | 'realebail-gray' | 'realebail-white' | 'bustmarket-gray-violet' | 'bustmarket-gray' | 'bustmarket-violet' | 'bustmarket-white-violet';
 
@@ -166,6 +187,8 @@ declare interface IThemeGenreTypeDefault {
     };
 }
 
+declare type IThemePaletteKeys = 'transparent' | 'black100' | 'black80' | 'black60' | 'black50' | 'black40' | 'black10' | 'black05' | 'black04' | 'blackHelena' | 'blackJanice' | 'grayJanice' | 'grayKaren' | 'grayMonica' | 'graySandra' | 'grayPatricia' | 'graySarah' | 'grayStassie' | 'grayAdriana' | 'greenGoogle' | 'grayBarbara' | 'grayStephanie' | 'grayFrances' | 'grayTina' | 'green100' | 'green50' | 'green25' | 'green10' | 'green10Background' | 'whiteStandard' | 'whiteJanice' | 'yellowGoogle' | 'yellow100' | 'yellow50' | 'yellow25' | 'yellow10' | 'yellow10Background' | 'redGoogle' | 'red100' | 'red50' | 'red25' | 'red10' | 'red10Background' | 'blueGoogle' | 'blueRest' | 'blueActive' | 'blueHover' | 'blueFocus' | 'blueBr' | 'blueKaren' | 'blueMonica' | 'violetStephanie' | 'violetJanice' | 'amnezia' | 'inherit' | 'currentColor';
+
 declare type IThemeSize = 'large' | 'largeMedium' | 'medium' | 'mediumSmall' | 'small';
 
 declare interface IThemeSizePropertyDefault {
@@ -176,12 +199,14 @@ declare interface IThemeSizePropertyDefault {
     radius: number;
 }
 
-export declare const StyledInput: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, AddDollarSign<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>> & string;
+declare type IThemeTypographyWeight = 100 | 300 | 400 | 500 | 700 | 900;
+
+export declare const StyledInput: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledInputProps>> & string;
 
 export declare type StyledInputChildrenProps = AddDollarSign_2<Pick<InputProps, 'isDisabled'> & Pick<InputChildrenProps, 'left' | 'right' | 'width'>>;
 
 /****************************************** Default *************************************************/
-export declare const StyledInputCSS: RuleSet<AddDollarSign<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>;
+export declare const StyledInputCSS: RuleSet<StyledInputProps>;
 
 export declare const StyledInputNumeric: IStyledComponentBase<"web", Substitute<InternalNumberFormatBase & {
 thousandSeparator?: boolean | string;
@@ -196,7 +221,7 @@ suffix?: string;
 prefix?: string;
 } & Omit<InputAttributes, never> & Omit<unknown, "value" | "ref" | "defaultValue" | "prefix" | "inputMode" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onMouseUp" | "type" | "displayType" | "renderText" | "getInputRef" | "valueIsNumericString" | "onValueChange" | "isAllowed" | "thousandSeparator" | "decimalSeparator" | "allowedDecimalSeparators" | "thousandsGroupStyle" | "decimalScale" | "fixedDecimalScale" | "allowNegative" | "allowLeadingZeros" | "suffix"> & {
 customInput?: ComponentType<unknown> | undefined;
-}, AddDollarSign<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>> & string & Omit<typeof NumericFormat, keyof Component<any, {}, any>>;
+}, StyledInputProps>> & string & Omit<typeof NumericFormat, keyof Component<any, {}, any>>;
 
 export declare const StyledInputPattern: IStyledComponentBase<"web", Substitute<InternalNumberFormatBase & {
 format: string;
@@ -205,16 +230,16 @@ allowEmptyFormatting?: boolean;
 patternChar?: string;
 } & Omit<InputAttributes, never> & Omit<unknown, "mask" | "value" | "ref" | "defaultValue" | "inputMode" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onMouseUp" | "type" | "format" | "displayType" | "renderText" | "getInputRef" | "valueIsNumericString" | "onValueChange" | "isAllowed" | "allowEmptyFormatting" | "patternChar"> & {
 customInput?: ComponentType<unknown> | undefined;
-}, AddDollarSign<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>> & string & Omit<typeof PatternFormat, keyof Component<any, {}, any>>;
+}, StyledInputProps>> & string & Omit<typeof PatternFormat, keyof Component<any, {}, any>>;
 
-export declare type StyledInputProps = AddDollarSign_2<Pick<InputProps, 'genre' | 'size' | 'error' | 'isLoading' | 'isInputEffect' | 'isDisabled' | 'postfixChildren' | 'prefixChildren' | 'isBold' | 'isNiceNumber' | 'isNotShowHoverStyle' | 'sx' | 'isCenter'>>;
+export declare type StyledInputProps = AddDollarSign_2<Pick<InputProps, 'genre' | 'size' | 'error' | 'isLoading' | 'isInputEffect' | 'isDisabled' | 'postfixChildren' | 'prefixChildren' | 'isBold' | 'isNiceNumber' | 'isNotShowHoverStyle' | 'sx' | 'isCenter' | 'font'>> & addOutlinePropsDollar;
 
 /****************************************** Wrapper *************************************************/
 export declare const StyledInputWrapper: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AddDollarSign<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "isWidthAsHeight" | "isInputEffect">>>> & string;
 
 export declare type StyledInputWrapperProps = AddDollarSign_2<Pick<InputProps, 'isDisabled' | 'isInputEffect' | 'sx' | 'size' | 'isWidthAsHeight'>>;
 
-export declare const StyledMotionInput: IStyledComponentBase<"web", Substitute<Omit<HTMLMotionProps<"input">, "ref"> & RefAttributes<HTMLInputElement>, AddDollarSign<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>> & string & Omit<ForwardRefComponent<HTMLInputElement, HTMLMotionProps<"input">>, keyof Component<any, {}, any>>;
+export declare const StyledMotionInput: IStyledComponentBase<"web", Substitute<Omit<HTMLMotionProps<"input">, "ref"> & RefAttributes<HTMLInputElement>, StyledInputProps>> & string & Omit<ForwardRefComponent<HTMLInputElement, HTMLMotionProps<"input">>, keyof Component<any, {}, any>>;
 
 declare type SXProps = ({
     default: CSSObject;
@@ -228,9 +253,32 @@ declare type SXProps = ({
 
 export declare type TInputGenre = keyof IThemeGenreInput;
 
+declare type TypographyDataProps = TypographyDefaultProps & {
+    size?: number;
+};
+
+declare type TypographyDefaultProps = {
+    align?: CSSProperties['textAlign'];
+    color?: IThemePaletteKeys;
+    cursor?: CSSProperties['cursor'];
+    decoration?: CSSProperties['textDecoration'];
+    family?: IThemeFontFamily;
+    flex?: string;
+    height?: number | string;
+    isHoverUnderlining?: boolean;
+    letterSpacing?: CSSProperties['letterSpacing'];
+    line?: number;
+    overflow?: CSSProperties['overflow'];
+    shadow?: 'shadowPulse';
+    transform?: CSSProperties['textTransform'];
+    weight?: IThemeTypographyWeight;
+    wrap?: CSSProperties['textWrap'];
+    isNoUserSelect?: boolean;
+};
+
 declare type UncontrolledValue = {
-    value?: never;
     defaultValue: string | number | null | undefined;
+    value?: never;
 };
 
 export { }

package/build/component-input.es.js

@@ -1,5 +1,5 @@
-import { I, f } from "./component-Bzw_uobM.js";
-import { k, j, I as I2, c, f as f2, e, i, h, S, g, d, a, b } from "./component.styles-DYS_AJ9F.js";
+import { I, f } from "./component-DaXKDHnc.js";
+import { k, j, I as I2, c, f as f2, e, i, h, S, g, d, a, b } from "./component.styles-BbwS_Ekx.js";
 export {
   I as Input,
   k as InputPostfixChildren,

package/build/component-map.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./component.components-H_qAeBHw.cjs");exports.CustomZoomControl=t.CustomZoomControl,exports.DEFAULT_MAP_CENTER=t.DEFAULT_MAP_CENTER,exports.DEFAULT_MAP_MAX_ZOOM=t.DEFAULT_MAP_MAX_ZOOM,exports.DEFAULT_MAP_MIN_ZOOM=t.DEFAULT_MAP_MIN_ZOOM,exports.DEFAULT_MAP_THEME=t.DEFAULT_MAP_THEME,exports.DEFAULT_MAP_ZOOM=t.DEFAULT_MAP_ZOOM,exports.MapCluster=t.MapCluster,exports.MapDot=t.MapDot,exports.MapWrapper=t.MapWrapper,exports.MarkerCluster=t.MarkerCluster,exports.UpdateMapSettings=t.UpdateMapSettings,exports.createClusterIcon=t.createClusterIcon,exports.customDefaultIcon=t.customDefaultIcon,exports.customTextIcon=t.customTextIcon;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./component.components-CC3IeZon.cjs");exports.CustomZoomControl=t.CustomZoomControl,exports.DEFAULT_MAP_CENTER=t.DEFAULT_MAP_CENTER,exports.DEFAULT_MAP_MAX_ZOOM=t.DEFAULT_MAP_MAX_ZOOM,exports.DEFAULT_MAP_MIN_ZOOM=t.DEFAULT_MAP_MIN_ZOOM,exports.DEFAULT_MAP_THEME=t.DEFAULT_MAP_THEME,exports.DEFAULT_MAP_ZOOM=t.DEFAULT_MAP_ZOOM,exports.MapCluster=t.MapCluster,exports.MapDot=t.MapDot,exports.MapWrapper=t.MapWrapper,exports.MarkerCluster=t.MarkerCluster,exports.UpdateMapSettings=t.UpdateMapSettings,exports.createClusterIcon=t.createClusterIcon,exports.customDefaultIcon=t.customDefaultIcon,exports.customTextIcon=t.customTextIcon;
 //# sourceMappingURL=component-map.cjs.js.map

package/build/component-map.es.js

@@ -1,4 +1,4 @@
-import { C, c, D, a, d, b, M, e, g, f, U, h, j, i } from "./component.components-DX0DVix5.js";
+import { C, c, D, a, d, b, M, e, g, f, U, h, j, i } from "./component.components-C-EEYFsd.js";
 export {
   C as CustomZoomControl,
   c as DEFAULT_MAP_CENTER,

package/build/{component-jPZYT5iL.js → component-mzzOCXSx.js}

@@ -49,20 +49,20 @@ const Stack = (props) => {
   );
 };
 const StackMotion = (props) => {
+  const { style, className, isHover, isRipple, onClick, onDrop, onDragOver, ref, sx } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     StyledStackMotion,
     {
-      ref: props.ref,
-      layout: props.layout,
-      initial: props.initial,
-      animate: props.animate,
-      exit: props.exit,
-      transition: props.transition,
-      onClick: props.onClick,
-      className: props.className,
-      $sx: props.sx,
-      $isHover: props.isHover,
-      $isRipple: props.isRipple,
+      ref,
+      style,
+      onClick,
+      onDrop,
+      onDragOver,
+      className,
+      $sx: sx,
+      $isHover: isHover,
+      $isRipple: isRipple,
+      ...props,
       children: props.children
     }
   );
@@ -73,4 +73,4 @@ export {
   Stack as b,
   StackMotion as c
 };
-//# sourceMappingURL=component-jPZYT5iL.js.map
+//# sourceMappingURL=component-mzzOCXSx.js.map

package/build/component-mzzOCXSx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-mzzOCXSx.js","sources":["../src/components/stack/component.styles.tsx","../src/components/stack/component.tsx"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\n\nimport { addSX } from '@local/styles/sx';\n\nimport { StyledStackProps } from '.';\nimport { addRipple } from '../ripple';\n\nexport const StyledStack = styled.div<StyledStackProps>`\n  display: flex;\n  ${addSX}\n\n  ${(props) =>\n    props.$isHover &&\n    css`\n      transition:\n        background-color ${(props) => props.theme.transition.default},\n        outline 0s;\n      &:hover {\n        background-color: ${(props) => props.theme.palette.black05};\n      }\n    `};\n  ${addRipple};\n`;\n\nexport const StyledStackMotion = styled(motion.div)<StyledStackProps>`\n  display: flex;\n  ${addSX}\n\n  ${(props) =>\n    props.$isHover &&\n    css`\n      transition:\n        background-color ${(props) => props.theme.transition.default},\n        outline 0s;\n      &:hover {\n        background-color: ${(props) => props.theme.palette.black05};\n      }\n    `};\n  ${addRipple};\n`;\n","import { FC } from 'react';\n\nimport { StackMotionProps, StackProps, StyledStack, StyledStackMotion } from '.';\n\nexport const Stack: FC<StackProps> = (props) => {\n  return (\n    <StyledStack\n      ref={props.ref}\n      onClick={props.onClick}\n      onDrop={props.onDrop}\n      onDragOver={props.onDragOver}\n      className={props.className}\n      $sx={props.sx}\n      $isHover={props.isHover}\n      $isRipple={props.isRipple}\n    >\n      {props.children}\n    </StyledStack>\n  );\n};\n\nexport const StackMotion: FC<StackMotionProps> = (props) => {\n  const { style, className, isHover, isRipple, onClick, onDrop, onDragOver, ref, sx } = props;\n  return (\n    <StyledStackMotion\n      ref={ref}\n      style={style}\n      onClick={onClick}\n      onDrop={onDrop}\n      onDragOver={onDragOver}\n      className={className}\n      $sx={sx}\n      $isHover={isHover}\n      $isRipple={isRipple}\n      {...props}\n    >\n      {props.children}\n    </StyledStackMotion>\n  );\n};\n"],"names":["props","jsx"],"mappings":";;;;;;AAQO,MAAM,cAAc,OAAO;AAAA;AAAA,IAE9B,KAAK;AAAA;AAAA,IAEL,CAAC,UACD,MAAM,YACN;AAAA;AAAA,2BAEuB,CAACA,WAAUA,OAAM,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA,4BAGxC,CAACA,WAAUA,OAAM,MAAM,QAAQ,OAAO;AAAA;AAAA,KAE7D;AAAA,IACD,SAAS;AAAA;AAGN,MAAM,oBAAoB,OAAO,OAAO,GAAG;AAAA;AAAA,IAE9C,KAAK;AAAA;AAAA,IAEL,CAAC,UACD,MAAM,YACN;AAAA;AAAA,2BAEuB,CAACA,WAAUA,OAAM,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA,4BAGxC,CAACA,WAAUA,OAAM,MAAM,QAAQ,OAAO;AAAA;AAAA,KAE7D;AAAA,IACD,SAAS;AAAA;ACnCN,MAAM,QAAwB,CAAC,UAAU;AAC9C,SACEC,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,MAAM;AAAA,MACX,SAAS,MAAM;AAAA,MACf,QAAQ,MAAM;AAAA,MACd,YAAY,MAAM;AAAA,MAClB,WAAW,MAAM;AAAA,MACjB,KAAK,MAAM;AAAA,MACX,UAAU,MAAM;AAAA,MAChB,WAAW,MAAM;AAAA,MAEhB,UAAA,MAAM;AAAA,IAAA;AAAA,EAAA;AAGb;AAEO,MAAM,cAAoC,CAAC,UAAU;AAC1D,QAAM,EAAE,OAAO,WAAW,SAAS,UAAU,SAAS,QAAQ,YAAY,KAAK,GAAA,IAAO;AACtF,SACEA,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,MACV,GAAG;AAAA,MAEH,UAAA,MAAM;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/build/component-pagination.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./component.constants-veAUxKBd.cjs");exports.DEFAULT_COMPONENT_PAGINATION_GAP=t.DEFAULT_COMPONENT_PAGINATION_GAP,exports.Pagination=t.Pagination;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./component.constants-D6AJ1xmO.cjs");exports.DEFAULT_COMPONENT_PAGINATION_GAP=t.DEFAULT_COMPONENT_PAGINATION_GAP,exports.Pagination=t.Pagination;
 //# sourceMappingURL=component-pagination.cjs.js.map

package/build/component-pagination.d.ts

@@ -6,6 +6,16 @@ import { FC } from 'react';
 import { PropsWithChildren } from 'react';
 import { Ref } from 'react';
 
+declare type addFontProps = {
+    font?: FontSizeStylesProps;
+};
+
+declare type addOutlineProps = {
+    isReadOnly?: boolean;
+    isDisabledOutline?: boolean;
+    isOutlineBoxShadow?: boolean;
+};
+
 declare interface addSXProps {
     sx?: SXProps;
 }
@@ -58,7 +68,7 @@ declare type ButtonPropsDefault = PropsWithChildren & {
     onClick?: (event: default_2.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     onMouseDown?: (event: default_2.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     type?: 'button' | 'submit' | 'reset';
-} & addSXProps & addSXTypographyProps;
+} & addSXProps & addFontProps & addOutlineProps & addSXTypographyProps;
 
 declare type ButtonPropsIconGroup = ButtonPropsDefault & {
     isIconGroup?: true;
@@ -205,6 +215,13 @@ declare enum ENUM_ICON_REALEBAIL {
     User = 4
 }
 
+declare type FontSizeStylesProps = {
+    size?: TypographyDataProps['size'];
+    weight?: TypographyDataProps['weight'];
+    family?: TypographyDataProps['family'];
+    height?: TypographyDataProps['height'];
+};
+
 declare type IconItemProps<T extends keyof IconTypeMap> = {
     type: T;
     name: IconTypeMap[T];

package/build/component-pagination.es.js

@@ -1,4 +1,4 @@
-import { D, P } from "./component.constants-DjYLZpyY.js";
+import { D, P } from "./component.constants-34RZJIiQ.js";
 export {
   D as DEFAULT_COMPONENT_PAGINATION_GAP,
   P as Pagination

package/build/component-range.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./component.styles-DhAMCZ71.cjs");exports.Range=e.Range,exports.RangeThumb=e.RangeThumb,exports.RangeTrack=e.RangeTrack,exports.RangeWrapper=e.RangeWrapper;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./component.styles-ZU_GyVub.cjs");exports.Range=e.Range,exports.RangeThumb=e.RangeThumb,exports.RangeTrack=e.RangeTrack,exports.RangeWrapper=e.RangeWrapper;
 //# sourceMappingURL=component-range.cjs.js.map

package/build/component-range.d.ts

@@ -1,6 +1,7 @@
 import { AddDollarSign } from '../..';
 import { ClipboardEventHandler } from 'react';
 import { CSSObject } from 'styled-components';
+import { CSSProperties } from 'react';
 import { DefaultTheme } from 'styled-components';
 import { DetailedHTMLProps } from 'react';
 import { FocusEventHandler } from 'react';
@@ -24,13 +25,23 @@ declare interface addErrorProps {
     error?: ErrorMessageProps;
 }
 
+declare type addFontProps = {
+    font?: FontSizeStylesProps;
+};
+
+declare type addOutlineProps = {
+    isReadOnly?: boolean;
+    isDisabledOutline?: boolean;
+    isOutlineBoxShadow?: boolean;
+};
+
 declare interface addSXProps {
     sx?: SXProps;
 }
 
 declare type BaseInputProps = CommonInputProps & (ControlledValue | UncontrolledValue);
 
-declare type CommonInputProps = addErrorProps & addSXProps & {
+declare type CommonInputProps = addErrorProps & addFontProps & addOutlineProps & addSXProps & {
     ref?: Ref<HTMLInputElement | null>;
     name?: string;
     id?: string;
@@ -45,7 +56,6 @@ declare type CommonInputProps = addErrorProps & addSXProps & {
     isNiceNumber?: boolean;
     isDisabled?: boolean;
     isLoading?: boolean;
-    isReadOnly?: boolean;
     isInputEffect?: boolean;
     isRequired?: boolean;
     isCenter?: boolean;
@@ -74,6 +84,13 @@ declare type ErrorMessageProps = {
     isErrorAbsolute?: boolean;
     size?: IThemeSize;
     sx?: addSXProps['sx'];
+} & addFontProps;
+
+declare type FontSizeStylesProps = {
+    size?: TypographyDataProps['size'];
+    weight?: TypographyDataProps['weight'];
+    family?: TypographyDataProps['family'];
+    height?: TypographyDataProps['height'];
 };
 
 declare interface InputChildrenProps extends PropsWithChildren {
@@ -93,7 +110,9 @@ declare type InputStandardProps = BaseInputProps & {
 
 declare type IThemeDevice = 'default' | 'tablet' | 'mobile';
 
-declare type IThemeGenreInput = Record<Extract<IThemeGenreName, 'gray' | 'grayBorder' | 'blackBorder' | 'realebail-white'>, IThemeGenreTypeDefault>;
+declare type IThemeFontFamily = 'Inter' | 'Roboto' | 'Work Sans' | 'Roboto Mono' | 'Manrope';
+
+declare type IThemeGenreInput = Record<Extract<IThemeGenreName, 'gray' | 'grayBorder' | 'blackBorder' | 'realebail-white' | 'bustmarket-gray'>, IThemeGenreTypeDefault>;
 
 declare type IThemeGenreName = 'gray' | 'grayBorder' | 'black' | 'blackBorder' | 'product' | 'productBorder' | 'white' | 'greenTransparent' | 'redTransparent' | 'yellowTransparent' | 'realebail-product' | 'realebail-gray' | 'realebail-white' | 'bustmarket-gray-violet' | 'bustmarket-gray' | 'bustmarket-violet' | 'bustmarket-white-violet';
 
@@ -113,8 +132,12 @@ declare interface IThemeGenreTypeDefault {
     };
 }
 
+declare type IThemePaletteKeys = 'transparent' | 'black100' | 'black80' | 'black60' | 'black50' | 'black40' | 'black10' | 'black05' | 'black04' | 'blackHelena' | 'blackJanice' | 'grayJanice' | 'grayKaren' | 'grayMonica' | 'graySandra' | 'grayPatricia' | 'graySarah' | 'grayStassie' | 'grayAdriana' | 'greenGoogle' | 'grayBarbara' | 'grayStephanie' | 'grayFrances' | 'grayTina' | 'green100' | 'green50' | 'green25' | 'green10' | 'green10Background' | 'whiteStandard' | 'whiteJanice' | 'yellowGoogle' | 'yellow100' | 'yellow50' | 'yellow25' | 'yellow10' | 'yellow10Background' | 'redGoogle' | 'red100' | 'red50' | 'red25' | 'red10' | 'red10Background' | 'blueGoogle' | 'blueRest' | 'blueActive' | 'blueHover' | 'blueFocus' | 'blueBr' | 'blueKaren' | 'blueMonica' | 'violetStephanie' | 'violetJanice' | 'amnezia' | 'inherit' | 'currentColor';
+
 declare type IThemeSize = 'large' | 'largeMedium' | 'medium' | 'mediumSmall' | 'small';
 
+declare type IThemeTypographyWeight = 100 | 300 | 400 | 500 | 700 | 900;
+
 declare const Range_2: (props: RangeProps) => JSX.Element;
 export { Range_2 as Range }
 
@@ -155,9 +178,32 @@ declare type SXProps = ({
 
 declare type TInputGenre = keyof IThemeGenreInput;
 
+declare type TypographyDataProps = TypographyDefaultProps & {
+    size?: number;
+};
+
+declare type TypographyDefaultProps = {
+    align?: CSSProperties['textAlign'];
+    color?: IThemePaletteKeys;
+    cursor?: CSSProperties['cursor'];
+    decoration?: CSSProperties['textDecoration'];
+    family?: IThemeFontFamily;
+    flex?: string;
+    height?: number | string;
+    isHoverUnderlining?: boolean;
+    letterSpacing?: CSSProperties['letterSpacing'];
+    line?: number;
+    overflow?: CSSProperties['overflow'];
+    shadow?: 'shadowPulse';
+    transform?: CSSProperties['textTransform'];
+    weight?: IThemeTypographyWeight;
+    wrap?: CSSProperties['textWrap'];
+    isNoUserSelect?: boolean;
+};
+
 declare type UncontrolledValue = {
-    value?: never;
     defaultValue: string | number | null | undefined;
+    value?: never;
 };
 
 export { }

package/build/component-range.es.js

@@ -1,4 +1,4 @@
-import { R, c, b, a } from "./component.styles-DpgkACgI.js";
+import { R, c, b, a } from "./component.styles-BGYbrzvh.js";
 export {
   R as Range,
   c as RangeThumb,

package/build/component-select.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./component.styles-o7GmI4Ap.cjs");exports.ButtonList=e.ButtonList,exports.ContainerDropdownListOption=e.ContainerDropdownListOption,exports.ContainerSelectListOption=e.ContainerSelectListOption,exports.DropdownList=e.DropdownList,exports.DropdownListOption=e.DropdownListOption,exports.DropdownListOptionIcon=e.DropdownListOptionIcon,exports.DropdownListParent=e.DropdownListParent,exports.Select=e.Select,exports.SelectLanguage=e.SelectLanguage,exports.SelectList=e.SelectList,exports.SelectListOption=e.SelectListOption,exports.SelectMapTheme=e.SelectMapTheme,exports.SelectMonth=e.SelectMonth,exports.SelectMonths=e.SelectMonths,exports.SelectTextArea=e.SelectTextArea,exports.SelectWrapper=e.SelectWrapper,exports.SelectYear=e.SelectYear;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./component.styles-PNgt36ZD.cjs");exports.ButtonList=e.ButtonList,exports.ContainerDropdownListOption=e.ContainerDropdownListOption,exports.ContainerSelectListOption=e.ContainerSelectListOption,exports.DropdownList=e.DropdownList,exports.DropdownListOption=e.DropdownListOption,exports.DropdownListOptionIcon=e.DropdownListOptionIcon,exports.DropdownListParent=e.DropdownListParent,exports.Select=e.Select,exports.SelectLanguage=e.SelectLanguage,exports.SelectList=e.SelectList,exports.SelectListOption=e.SelectListOption,exports.SelectMapTheme=e.SelectMapTheme,exports.SelectMonth=e.SelectMonth,exports.SelectMonths=e.SelectMonths,exports.SelectTextArea=e.SelectTextArea,exports.SelectWrapper=e.SelectWrapper,exports.SelectYear=e.SelectYear;
 //# sourceMappingURL=component-select.cjs.js.map

package/build/component-select.d.ts

@@ -3,6 +3,7 @@ import { addSXProps as addSXProps_2 } from '../../styles/sx';
 import { BaseObject } from 'styled-components/dist/types';
 import { Component } from 'react';
 import { CSSObject } from 'styled-components';
+import { CSSProperties } from 'react';
 import { DefaultTheme } from 'styled-components';
 import { DetailedHTMLProps } from 'react';
 import { FastOmit } from 'styled-components';
@@ -15,7 +16,7 @@ import { IconItemProps } from '../icon';
 import { IconTypeMap } from '../icon';
 import { ISelectItem as ISelectItem_2 } from './component.types';
 import { IStyledComponentBase } from 'styled-components/dist/types';
-import { IThemePaletteKeys } from '../..';
+import { IThemePaletteKeys as IThemePaletteKeys_2 } from '../..';
 import { IThemeSize as IThemeSize_2 } from '../..';
 import { JSX } from 'react/jsx-runtime';
 import { LiHTMLAttributes } from 'react';
@@ -35,6 +36,10 @@ declare interface addErrorProps {
     error?: ErrorMessageProps;
 }
 
+declare type addFontProps = {
+    font?: FontSizeStylesProps;
+};
+
 declare interface addSXProps {
     sx?: SXProps;
 }
@@ -45,7 +50,7 @@ export declare type ButtonListProps = AddDollarSign_2<Pick<SelectProps<ISelectIt
 
 export declare const ContainerDropdownListOption: MemoExoticComponent<(<T extends object & ISelectItem>(props: ContainerDropdownListOptionProps<T>) => JSX.Element)>;
 
-export declare type ContainerDropdownListOptionProps<T extends ISelectItem> = Pick<SelectProps<T>, 'genre' | 'size' | 'isCenter' | 'isNotShowHoverStyle' | 'isBold' | 'isShowDropdownOptionIcon'> & {
+export declare type ContainerDropdownListOptionProps<T extends ISelectItem> = Pick<SelectProps<T>, 'genre' | 'size' | 'isCenter' | 'isNotShowHoverStyle' | 'isBold' | 'isShowDropdownOptionIcon' | 'font'> & {
     item: T;
     isChecked?: boolean;
     isShowScroll?: boolean;
@@ -64,7 +69,7 @@ export declare type ContainerSelectListOptionProps<T extends ISelectItem> = Pick
 
 export declare const DropdownList: IStyledComponentBase<"web", FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 
-export declare const DropdownListOption: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, AddDollarSign<Pick<SelectProps_2<ISelectItem_2>, "size" | "genre" | "isCenter" | "isNotShowHoverStyle" | "isBold"> & {
+export declare const DropdownListOption: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, AddDollarSign<Pick<SelectProps_2<ISelectItem_2>, "size" | "font" | "genre" | "isCenter" | "isNotShowHoverStyle" | "isBold"> & {
 item?: ISelectItem_2;
 isChecked?: boolean;
 isShowScroll?: boolean;
@@ -76,8 +81,8 @@ name: "Menu" | "Radio" | "Square" | "Arrow" | "Heart" | "Close" | "Biometry" | "
 className?: string;
 onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
 size: IThemeSize_2 | "100%";
-primaryColor?: IThemePaletteKeys;
-secondColor?: IThemePaletteKeys;
+primaryColor?: IThemePaletteKeys_2;
+secondColor?: IThemePaletteKeys_2;
 turn?: number;
 order?: number;
 tabIndex?: number;
@@ -89,7 +94,7 @@ export declare type DropdownListOptionIconProps = AddDollarSign_2<Pick<SelectPro
     checked?: boolean;
 }>;
 
-export declare type DropdownListOptionProps = AddDollarSign_2<Pick<SelectProps<ISelectItem>, 'genre' | 'size' | 'isCenter' | 'isNotShowHoverStyle' | 'isBold'> & {
+export declare type DropdownListOptionProps = AddDollarSign_2<Pick<SelectProps<ISelectItem>, 'genre' | 'size' | 'isCenter' | 'isNotShowHoverStyle' | 'isBold' | 'font'> & {
     item?: ISelectItem;
     isChecked?: boolean;
     isShowScroll?: boolean;
@@ -105,6 +110,13 @@ declare type ErrorMessageProps = {
     isErrorAbsolute?: boolean;
     size?: IThemeSize;
     sx?: addSXProps['sx'];
+} & addFontProps;
+
+declare type FontSizeStylesProps = {
+    size?: TypographyDataProps['size'];
+    weight?: TypographyDataProps['weight'];
+    family?: TypographyDataProps['family'];
+    height?: TypographyDataProps['height'];
 };
 
 export declare interface ISelectItem {
@@ -127,6 +139,8 @@ export declare interface ISelectMapThemeOption extends ISelectItem {
 
 declare type IThemeDevice = 'default' | 'tablet' | 'mobile';
 
+declare type IThemeFontFamily = 'Inter' | 'Roboto' | 'Work Sans' | 'Roboto Mono' | 'Manrope';
+
 declare type IThemeGenreName = 'gray' | 'grayBorder' | 'black' | 'blackBorder' | 'product' | 'productBorder' | 'white' | 'greenTransparent' | 'redTransparent' | 'yellowTransparent' | 'realebail-product' | 'realebail-gray' | 'realebail-white' | 'bustmarket-gray-violet' | 'bustmarket-gray' | 'bustmarket-violet' | 'bustmarket-white-violet';
 
 declare type IThemeGenreSelect = Record<Extract<IThemeGenreName, 'gray' | 'grayBorder' | 'blackBorder' | 'realebail-white'>, IThemeGenreTypeSelect>;
@@ -150,8 +164,12 @@ declare interface IThemeGenreTypeSelect {
     };
 }
 
+declare type IThemePaletteKeys = 'transparent' | 'black100' | 'black80' | 'black60' | 'black50' | 'black40' | 'black10' | 'black05' | 'black04' | 'blackHelena' | 'blackJanice' | 'grayJanice' | 'grayKaren' | 'grayMonica' | 'graySandra' | 'grayPatricia' | 'graySarah' | 'grayStassie' | 'grayAdriana' | 'greenGoogle' | 'grayBarbara' | 'grayStephanie' | 'grayFrances' | 'grayTina' | 'green100' | 'green50' | 'green25' | 'green10' | 'green10Background' | 'whiteStandard' | 'whiteJanice' | 'yellowGoogle' | 'yellow100' | 'yellow50' | 'yellow25' | 'yellow10' | 'yellow10Background' | 'redGoogle' | 'red100' | 'red50' | 'red25' | 'red10' | 'red10Background' | 'blueGoogle' | 'blueRest' | 'blueActive' | 'blueHover' | 'blueFocus' | 'blueBr' | 'blueKaren' | 'blueMonica' | 'violetStephanie' | 'violetJanice' | 'amnezia' | 'inherit' | 'currentColor';
+
 declare type IThemeSize = 'large' | 'largeMedium' | 'medium' | 'mediumSmall' | 'small';
 
+declare type IThemeTypographyWeight = 100 | 300 | 400 | 500 | 700 | 900;
+
 declare interface MapTheme {
     attribution: string;
     name: string;
@@ -218,7 +236,7 @@ export declare type SelectMonthsProps = Omit<SelectProps<ISelectItem>, 'option'
     monthsLocale: MonthItem[];
 };
 
-export declare type SelectProps<T extends ISelectItem> = addErrorProps & addSXProps & {
+export declare type SelectProps<T extends ISelectItem> = addErrorProps & addFontProps & addSXProps & {
     id?: string;
     size: IThemeSize;
     genre: TInputSelect;
@@ -298,4 +316,27 @@ declare type SXProps = ({
 
 export declare type TInputSelect = keyof IThemeGenreSelect;
 
+declare type TypographyDataProps = TypographyDefaultProps & {
+    size?: number;
+};
+
+declare type TypographyDefaultProps = {
+    align?: CSSProperties['textAlign'];
+    color?: IThemePaletteKeys;
+    cursor?: CSSProperties['cursor'];
+    decoration?: CSSProperties['textDecoration'];
+    family?: IThemeFontFamily;
+    flex?: string;
+    height?: number | string;
+    isHoverUnderlining?: boolean;
+    letterSpacing?: CSSProperties['letterSpacing'];
+    line?: number;
+    overflow?: CSSProperties['overflow'];
+    shadow?: 'shadowPulse';
+    transform?: CSSProperties['textTransform'];
+    weight?: IThemeTypographyWeight;
+    wrap?: CSSProperties['textWrap'];
+    isNoUserSelect?: boolean;
+};
+
 export { }

package/build/component-select.es.js

@@ -1,4 +1,4 @@
-import { B, C, a, h, i, j, D, S, b, k, l, f, c, d, m, g, e } from "./component.styles-5CVyEjEh.js";
+import { B, C, a, h, i, j, D, S, b, k, l, f, c, d, m, g, e } from "./component.styles-mcm1LgEr.js";
 export {
   B as ButtonList,
   C as ContainerDropdownListOption,

package/build/component-stack.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./component-BV_7tGiu.cjs");exports.Stack=t.Stack,exports.StackMotion=t.StackMotion,exports.StyledStack=t.StyledStack,exports.StyledStackMotion=t.StyledStackMotion;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./component-GKvpOWlO.cjs");exports.Stack=t.Stack,exports.StackMotion=t.StackMotion,exports.StyledStack=t.StyledStack,exports.StyledStackMotion=t.StyledStackMotion;
 //# sourceMappingURL=component-stack.cjs.js.map

package/build/component-stack.d.ts

@@ -9,7 +9,9 @@ import { DragEvent as DragEvent_2 } from 'react';
 import { DragEventHandler } from 'react';
 import { DraggableProps } from 'framer-motion';
 import { FC } from 'react';
+import { FocusHandlers } from 'framer-motion';
 import { ForwardRefComponent } from 'framer-motion';
+import { HoverHandlers } from 'framer-motion';
 import { HTMLAttributes } from 'react';
 import { HTMLMotionProps } from 'framer-motion';
 import { IStyledComponentBase } from 'styled-components/dist/types';
@@ -19,6 +21,7 @@ import { Ref } from 'react';
 import { RefAttributes } from 'react';
 import { StackProps as StackProps_2 } from './component.types';
 import { Substitute } from 'styled-components/dist/types';
+import { TapHandlers } from 'framer-motion';
 
 declare type AddDollarSign_2<T> = {
     [K in keyof T as `$${string & K}`]: T[K];
@@ -34,13 +37,8 @@ export declare const Stack: FC<StackProps>;
 
 export declare const StackMotion: FC<StackMotionProps>;
 
-export declare type StackMotionProps = StackProps & LayoutProps & AnimationProps & DraggableProps & {
+export declare type StackMotionProps = StackProps & LayoutProps & AnimationProps & HoverHandlers & TapHandlers & FocusHandlers & DraggableProps & {
     style?: CSSProperties;
-    className?: string;
-    isHover?: boolean;
-    isRipple?: boolean;
-    onClick?: () => void;
-    ref?: Ref<HTMLDivElement | null>;
 };
 
 export declare interface StackProps extends addSXProps, PropsWithChildren {
@@ -48,8 +46,8 @@ export declare interface StackProps extends addSXProps, PropsWithChildren {
     isHover?: boolean;
     isRipple?: boolean;
     onClick?: () => void;
-    onDrop?: (e: DragEvent_2<HTMLDivElement>) => void;
     onDragOver?: DragEventHandler<HTMLDivElement>;
+    onDrop?: (e: DragEvent_2<HTMLDivElement>) => void;
     ref?: Ref<HTMLDivElement | null>;
 }
 

package/build/component-stack.es.js

@@ -1,4 +1,4 @@
-import { b, c, S, a } from "./component-jPZYT5iL.js";
+import { b, c, S, a } from "./component-mzzOCXSx.js";
 export {
   b as Stack,
   c as StackMotion,