@nation-a/ui 0.16.19 → 0.16.21

package/dist/styled-system/styles.css

@@ -2642,19 +2642,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 +2694,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);
 }
@@ -3258,6 +3266,12 @@ html:not(#\#),body:not(#\#) {
   outline-color: var(--colors-border-neutral-default);
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .hover\:bg_black\.100A:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+    background: var(--colors-black-100-a);
+}
+}
+
 @media (hover: hover) and (pointer: fine) {
   .hover\:bg_background\.neuroidPrimary\.selected:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
     background: var(--colors-background-neuroid-primary-selected);
@@ -3348,12 +3362,6 @@ html:not(#\#),body:not(#\#) {
 }
 }
 
-@media (hover: hover) and (pointer: fine) {
-  .hover\:td_underline:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-    text-decoration: underline;
-}
-}
-
 @media (hover: hover) and (pointer: fine) {
   .hover\:c_content\.neutral\.hovered:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
     color: content.neutral.hovered;
@@ -3372,6 +3380,12 @@ html:not(#\#),body:not(#\#) {
 }
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .hover\:dark\:bg_white\.100A:is(:hover, [data-hover]) {
+    background: var(--colors-white-100-a);
+}
+}
+
 @media (hover: hover) and (pointer: fine) {
   .checked\:hover\:bg_content\.neutral\.subtle:is(:hover, [data-hover]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
     background: var(--colors-content-neutral-subtle);

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

@@ -31,6 +31,12 @@ export declare const buttonRecipe: import('../../../styled-system/types').Recipe
                 cursor: "not-allowed";
                 pointerEvents: "none";
             };
+            _hover: {
+                background: "black.100A";
+                _dark: {
+                    background: "white.100A";
+                };
+            };
         };
     };
     color: {
@@ -55,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";
             };
@@ -65,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";
             };
@@ -75,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";
             };
@@ -85,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

@@ -24,7 +24,10 @@ export declare const iconButtonRecipe: import('../../../styled-system/types').Re
                 pointerEvents: "none";
             };
             _hover: {
-                background: "background.neutral.selected";
+                background: "black.100A";
+                _dark: {
+                    background: "white.100A";
+                };
             };
         };
         light: {
@@ -37,7 +40,10 @@ export declare const iconButtonRecipe: import('../../../styled-system/types').Re
                 pointerEvents: "none";
             };
             _hover: {
-                background: "background.neutral.selected";
+                background: "black.100A";
+                _dark: {
+                    background: "white.100A";
+                };
             };
         };
     };
@@ -55,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";
             };
@@ -64,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";
             };
@@ -73,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nation-a/ui",
-  "version": "0.16.19",
+  "version": "0.16.21",
   "type": "module",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/index.cjs",