@nation-a/ui 0.16.20 → 0.16.22

package/dist/styled-system/styles.css

@@ -1056,6 +1056,14 @@ html:not(#\#),body:not(#\#) {
   font-size: 16px;
 }
 
+.textStyle_en\.label\.caption\.10\.regular:not(#\#):not(#\#):not(#\#):not(#\#) {
+  letter-spacing: var(--letter-spacings-3xl);
+  font-family: var(--fonts-dm-sans);
+  font-weight: var(--font-weights-regular);
+  line-height: 120%;
+  font-size: 10px;
+}
+
 .textStyle_en\.label\.caption\.10\.semibold:not(#\#):not(#\#):not(#\#):not(#\#) {
   letter-spacing: var(--letter-spacings-3xl);
   font-family: var(--fonts-dm-sans);
@@ -1064,6 +1072,14 @@ html:not(#\#),body:not(#\#) {
   font-size: 10px;
 }
 
+.textStyle_en\.label\.caption\.12\.regular:not(#\#):not(#\#):not(#\#):not(#\#) {
+  letter-spacing: var(--letter-spacings-3xl);
+  font-family: var(--fonts-dm-sans);
+  font-weight: var(--font-weights-regular);
+  line-height: 120%;
+  font-size: 12px;
+}
+
 .textStyle_en\.label\.caption\.12\.semibold:not(#\#):not(#\#):not(#\#):not(#\#) {
   letter-spacing: var(--letter-spacings-3xl);
   font-family: var(--fonts-dm-sans);
@@ -1199,6 +1215,14 @@ html:not(#\#),body:not(#\#) {
   font-size: 16px;
 }
 
+.textStyle_kr\.label\.caption\.10\.regular:not(#\#):not(#\#):not(#\#):not(#\#) {
+  letter-spacing: var(--letter-spacings-3xl);
+  font-family: var(--fonts-pretendard);
+  font-weight: var(--font-weights-regular);
+  line-height: 120%;
+  font-size: 10px;
+}
+
 .textStyle_kr\.label\.caption\.10\.semibold:not(#\#):not(#\#):not(#\#):not(#\#) {
   letter-spacing: var(--letter-spacings-3xl);
   font-family: var(--fonts-pretendard);
@@ -1207,6 +1231,14 @@ html:not(#\#),body:not(#\#) {
   font-size: 10px;
 }
 
+.textStyle_kr\.label\.caption\.12\.regular:not(#\#):not(#\#):not(#\#):not(#\#) {
+  letter-spacing: var(--letter-spacings-3xl);
+  font-family: var(--fonts-pretendard);
+  font-weight: var(--font-weights-regular);
+  line-height: 120%;
+  font-size: 12px;
+}
+
 .textStyle_kr\.label\.caption\.12\.semibold:not(#\#):not(#\#):not(#\#):not(#\#) {
   letter-spacing: var(--letter-spacings-3xl);
   font-family: var(--fonts-pretendard);
@@ -2642,19 +2674,19 @@ html:not(#\#),body:not(#\#) {
   background: transparent;
 }
 
-.\[\&_\:where\(svg\)\]\:w_20px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :where(svg) {
+.\[\&\:not\(\[data-preserve-icon-size\=\"true\"\]\)_svg\]\:w_20px:not([data-preserve-icon-size="true"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) svg {
   width: 20px;
 }
 
-.\[\&_\:where\(svg\)\]\:h_20px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :where(svg) {
+.\[\&\:not\(\[data-preserve-icon-size\=\"true\"\]\)_svg\]\:h_20px:not([data-preserve-icon-size="true"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) svg {
   height: 20px;
 }
 
-.\[\&_\:where\(svg\)\]\:w_24px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :where(svg) {
+.\[\&\:not\(\[data-preserve-icon-size\=\"true\"\]\)_svg\]\:w_24px:not([data-preserve-icon-size="true"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) svg {
   width: 24px;
 }
 
-.\[\&_\:where\(svg\)\]\:h_24px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :where(svg) {
+.\[\&\:not\(\[data-preserve-icon-size\=\"true\"\]\)_svg\]\:h_24px:not([data-preserve-icon-size="true"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) svg {
   height: 24px;
 }
 
@@ -2694,6 +2726,14 @@ html:not(#\#),body:not(#\#) {
   animation: var(--animations-dialog-out);
 }
 
+.\[\&_\:where\(svg\)\]\:w_24px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :where(svg) {
+  width: 24px;
+}
+
+.\[\&_\:where\(svg\)\]\:h_24px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :where(svg) {
+  height: 24px;
+}
+
 .\[\&_input\,_\&_textarea\]\:ring_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) input,.\[\&_input\,_\&_textarea\]\:ring_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) textarea {
   outline: var(--borders-none);
 }
@@ -3354,12 +3394,6 @@ html:not(#\#),body:not(#\#) {
 }
 }
 
-@media (hover: hover) and (pointer: fine) {
-  .hover\:c_content\.neutral\.hovered:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-    color: content.neutral.hovered;
-}
-}
-
 @media (hover: hover) and (pointer: fine) {
   .hover\:bd-c_content\.neutral\.subtle:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
     border-color: var(--colors-content-neutral-subtle);

package/dist/styled-system/types/prop-type.d.ts

@@ -208,7 +208,7 @@ export interface UtilityValues {
 	debug: boolean;
 	containerName: CssProperties["containerName"];
 	colorPalette: "neutral" | "black" | "white" | "red" | "orange" | "blue" | "green" | "purple" | "ohre" | "cyan" | "yellow" | "v3" | "content" | "content.neutral" | "content.neuroidPrimary" | "content.danger" | "content.warning" | "content.success" | "content.informative" | "content.zoltarinaPrimary" | "content.heydPrimary" | "content.static" | "content.static.white" | "content.static.black" | "content.heybeePrimary" | "content.neutralInverse" | "background" | "background.neutral" | "background.neuroidPrimary" | "background.neuroidSecondary" | "background.danger" | "background.warning" | "background.success" | "background.informative" | "background.zoltarinaPrimary" | "background.zoltarinaSecondary" | "background.heydPrimary" | "background.heydSecondary" | "background.static" | "background.static.whiteAlpha" | "background.static.blackAlpha" | "background.heybeePrimary" | "background.neutralInverse" | "background.v3" | "surface" | "shadow" | "scrim" | "skeleton" | "border" | "border.neutral" | "border.neuroidPrimary" | "border.danger" | "border.warning" | "border.success" | "border.informative" | "border.zoltarinaPrimary" | "border.heydPrimary" | "border.heybeePrimary";
-	textStyle: "body.md" | "body.lg" | "body.sm" | "label.sm" | "label.md" | "title.sm" | "title.md" | "title.lg" | "headline.sm" | "headline.md" | "display.md" | "display.lg" | "en.title.main.22.bold" | "en.title.main.24.bold" | "en.title.main.30.bold" | "en.title.main.56.bold" | "en.title.sub.16.bold" | "en.title.sub.18.bold" | "en.title.sub.20.bold" | "en.text.chat.14.bold" | "en.text.chat.14.regular" | "en.text.chat.16.bold" | "en.text.chat.16.regular" | "en.text.body.14.bold" | "en.text.body.14.regular" | "en.text.body.16.bold" | "en.text.body.16.regular" | "en.label.caption.10.semibold" | "en.label.caption.12.semibold" | "en.label.caption.14.semibold" | "kr.title.main.22.bold" | "kr.title.main.24.bold" | "kr.title.main.30.bold" | "kr.title.main.56.bold" | "kr.title.sub.16.bold" | "kr.title.sub.18.bold" | "kr.title.sub.20.bold" | "kr.text.chat.14.bold" | "kr.text.chat.14.regular" | "kr.text.chat.16.bold" | "kr.text.chat.16.regular" | "kr.text.body.14.bold" | "kr.text.body.14.regular" | "kr.text.body.16.bold" | "kr.text.body.16.regular" | "kr.label.caption.10.semibold" | "kr.label.caption.12.semibold" | "kr.label.caption.14.semibold";
+	textStyle: "body.md" | "body.lg" | "body.sm" | "label.sm" | "label.md" | "title.sm" | "title.md" | "title.lg" | "headline.sm" | "headline.md" | "display.md" | "display.lg" | "en.title.main.22.bold" | "en.title.main.24.bold" | "en.title.main.30.bold" | "en.title.main.56.bold" | "en.title.sub.16.bold" | "en.title.sub.18.bold" | "en.title.sub.20.bold" | "en.text.chat.14.bold" | "en.text.chat.14.regular" | "en.text.chat.16.bold" | "en.text.chat.16.regular" | "en.text.body.14.bold" | "en.text.body.14.regular" | "en.text.body.16.bold" | "en.text.body.16.regular" | "en.label.caption.10.regular" | "en.label.caption.10.semibold" | "en.label.caption.12.regular" | "en.label.caption.12.semibold" | "en.label.caption.14.semibold" | "kr.title.main.22.bold" | "kr.title.main.24.bold" | "kr.title.main.30.bold" | "kr.title.main.56.bold" | "kr.title.sub.16.bold" | "kr.title.sub.18.bold" | "kr.title.sub.20.bold" | "kr.text.chat.14.bold" | "kr.text.chat.14.regular" | "kr.text.chat.16.bold" | "kr.text.chat.16.regular" | "kr.text.body.14.bold" | "kr.text.body.14.regular" | "kr.text.body.16.bold" | "kr.text.body.16.regular" | "kr.label.caption.10.regular" | "kr.label.caption.10.semibold" | "kr.label.caption.12.regular" | "kr.label.caption.12.semibold" | "kr.label.caption.14.semibold";
 }
 
 

package/dist/types/components/Button/Button.stories.d.ts

@@ -7,3 +7,4 @@ export declare const DefaultButton: Story;
 export declare const SolidButton: Story;
 export declare const OutlineButton: Story;
 export declare const LightButton: Story;
+export declare const PreserveIconSizeExample: Story;

package/dist/types/components/Button/button.recipe.d.ts

@@ -61,7 +61,7 @@ export declare const buttonRecipe: import('../../../styled-system/types').Recipe
             textStyle: "label.sm";
             px: "8px";
             gap: number;
-            '& :where(svg)': {
+            '&:not([data-preserve-icon-size="true"]) svg': {
                 width: "20px";
                 height: "20px";
             };
@@ -71,7 +71,7 @@ export declare const buttonRecipe: import('../../../styled-system/types').Recipe
             textStyle: "label.sm";
             px: "16px";
             gap: number;
-            '& :where(svg)': {
+            '&:not([data-preserve-icon-size="true"]) svg': {
                 width: "20px";
                 height: "20px";
             };
@@ -81,7 +81,7 @@ export declare const buttonRecipe: import('../../../styled-system/types').Recipe
             textStyle: "label.md";
             px: "20px";
             gap: number;
-            '& :where(svg)': {
+            '&:not([data-preserve-icon-size="true"]) svg': {
                 width: "24px";
                 height: "24px";
             };
@@ -91,7 +91,7 @@ export declare const buttonRecipe: import('../../../styled-system/types').Recipe
             textStyle: "body.lg";
             px: "28px";
             gap: number;
-            '& :where(svg)': {
+            '&:not([data-preserve-icon-size="true"]) svg': {
                 width: "24px";
                 height: "24px";
             };

package/dist/types/components/Button/index.d.ts

@@ -3,6 +3,8 @@ import { ButtonVariantProps } from './button.recipe';
 export type ButtonProps = HTMLStyledProps<'button'> & ButtonVariantProps & {
     loading?: boolean;
     loadingText?: React.ReactNode;
+    /** 아이콘 컴포넌트의 size prop을 우선시할지 여부 (기본값: false) */
+    preserveIconSize?: boolean;
 };
 declare const _default: import('react').MemoExoticComponent<(<C extends "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import('react').ComponentType<any> = "button">(props: {
     as?: C | undefined;
@@ -296,7 +298,9 @@ declare const _default: import('react').MemoExoticComponent<(<C extends "symbol"
 } & {
     loading?: boolean;
     loadingText?: React.ReactNode;
-}, "ref"> & Omit<import('react').PropsWithoutRef<import('react').ComponentProps<C>>, "as" | "key" | "radius" | keyof import('react').ButtonHTMLAttributes<HTMLButtonElement> | "loading" | "size" | "css" | "variant" | "fullWidth" | "loadingText"> & {
+    /** 아이콘 컴포넌트의 size prop을 우선시할지 여부 (기본값: false) */
+    preserveIconSize?: boolean;
+}, "ref"> & Omit<import('react').PropsWithoutRef<import('react').ComponentProps<C>>, "as" | "key" | "radius" | keyof import('react').ButtonHTMLAttributes<HTMLButtonElement> | "loading" | "size" | "css" | "variant" | "fullWidth" | "loadingText" | "preserveIconSize"> & {
     ref?: import('react').Ref<import('react').ElementRef<C>> | undefined;
 }) => React.ReactElement)>;
 export default _default;

package/dist/types/components/IconButton/IconButton.stories.d.ts

@@ -8,3 +8,4 @@ export declare const SolidIconButton: Story;
 export declare const OutlineIconButton: Story;
 export declare const LightIconButton: Story;
 export declare const LoadingIconButton: Story;
+export declare const PreserveIconSizeExample: Story;

package/dist/types/components/IconButton/icon-button.recipe.d.ts

@@ -61,7 +61,7 @@ export declare const iconButtonRecipe: import('../../../styled-system/types').Re
             h: number;
             w: number;
             p: "4px";
-            '& :where(svg)': {
+            '&:not([data-preserve-icon-size="true"]) svg': {
                 width: "20px";
                 height: "20px";
             };
@@ -70,7 +70,7 @@ export declare const iconButtonRecipe: import('../../../styled-system/types').Re
             h: number;
             w: number;
             p: "4px";
-            '& :where(svg)': {
+            '&:not([data-preserve-icon-size="true"]) svg': {
                 width: "24px";
                 height: "24px";
             };
@@ -79,7 +79,7 @@ export declare const iconButtonRecipe: import('../../../styled-system/types').Re
             h: number;
             w: number;
             p: "8px";
-            '& :where(svg)': {
+            '&:not([data-preserve-icon-size="true"]) svg': {
                 width: "24px";
                 height: "24px";
             };

package/dist/types/components/IconButton/index.d.ts

@@ -2,10 +2,12 @@ import { HTMLStyledProps } from '../../../styled-system/jsx';
 import { IconButtonVariantProps } from './icon-button.recipe';
 export type IconButtonProps = HTMLStyledProps<'button'> & IconButtonVariantProps & {
     loading?: boolean;
+    /** 아이콘 컴포넌트의 size prop을 우선시할지 여부 (기본값: false) */
+    preserveIconSize?: boolean;
 };
 declare const _default: import('react').MemoExoticComponent<(<C extends "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import('react').ComponentType<any> = "button">(props: {
     as?: C | undefined;
-} & Omit<Omit<IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "ref"> & Omit<import('react').PropsWithoutRef<import('react').ComponentProps<C>>, "as" | "key" | keyof import('react').ButtonHTMLAttributes<HTMLButtonElement> | "loading" | "size" | "css" | "variant"> & {
+} & Omit<Omit<IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "ref"> & Omit<import('react').PropsWithoutRef<import('react').ComponentProps<C>>, "as" | "key" | keyof import('react').ButtonHTMLAttributes<HTMLButtonElement> | "loading" | "size" | "css" | "variant" | "preserveIconSize"> & {
     ref?: import('react').Ref<import('react').ElementRef<C>> | undefined;
 }) => React.ReactElement)>;
 export default _default;

package/dist/types/components/Text/index.d.ts

@@ -273,7 +273,7 @@ declare const Text: import('react').ForwardRefExoticComponent<Omit<{
     part?: string | undefined | undefined;
     ref?: import('react').Ref<HTMLParagraphElement> | undefined;
 } & import('../../../styled-system/types').WithCss & {
-    variant?: "label.sm" | "body.md" | "body.lg" | "body.sm" | "label.md" | "title.sm" | "title.md" | "title.lg" | "headline.sm" | "headline.md" | "display.md" | "display.lg" | "title.main.22.bold" | "title.main.24.bold" | "title.main.30.bold" | "title.main.56.bold" | "title.sub.16.bold" | "title.sub.18.bold" | "title.sub.20.bold" | "text.chat.14.bold" | "text.chat.14.regular" | "text.chat.16.bold" | "text.chat.16.regular" | "text.body.14.bold" | "text.body.14.regular" | "text.body.16.bold" | "text.body.16.regular" | "label.caption.10.semibold" | "label.caption.12.semibold" | "label.caption.14.semibold" | undefined;
+    variant?: "label.sm" | "body.md" | "body.lg" | "body.sm" | "label.md" | "title.sm" | "title.md" | "title.lg" | "headline.sm" | "headline.md" | "display.md" | "display.lg" | "title.main.22.bold" | "title.main.24.bold" | "title.main.30.bold" | "title.main.56.bold" | "title.sub.16.bold" | "title.sub.18.bold" | "title.sub.20.bold" | "text.chat.14.bold" | "text.chat.14.regular" | "text.chat.16.bold" | "text.chat.16.regular" | "text.body.14.bold" | "text.body.14.regular" | "text.body.16.bold" | "text.body.16.regular" | "label.caption.10.semibold" | "label.caption.10.regular" | "label.caption.12.semibold" | "label.caption.12.regular" | "label.caption.14.semibold" | undefined;
     language?: "en" | "ko" | undefined;
     font?: "freeman" | "dmSans" | "pretendard" | "notoSans" | "inter" | undefined;
 }, "ref"> & import('react').RefAttributes<HTMLParagraphElement>>;

package/dist/types/components/Text/text.recipe.d.ts

@@ -66,7 +66,9 @@ export declare const textRecipe: import('../../../styled-system/types').RecipeRu
         'text.body.16.bold': {};
         'text.body.16.regular': {};
         'label.caption.10.semibold': {};
+        'label.caption.10.regular': {};
         'label.caption.12.semibold': {};
+        'label.caption.12.regular': {};
         'label.caption.14.semibold': {};
     };
     language: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nation-a/ui",
-  "version": "0.16.20",
+  "version": "0.16.22",
   "type": "module",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/index.cjs",
@@ -22,8 +22,8 @@
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.5.2",
     "react-lottie": "^1.2.10",
-    "@nation-a/icons": "0.4.0",
-    "@nation-a/tokens": "0.4.1"
+    "@nation-a/icons": "0.4.1",
+    "@nation-a/tokens": "0.4.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3",