@nation-a/ui 0.10.3 → 0.10.5

package/dist/styled-system/styles.css

@@ -1023,8 +1023,8 @@ html:not(#\#),body:not(#\#) {
   height: 100%;
 }
 
-.z_999:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  z-index: 999;
+.z_modal:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  z-index: var(--z-index-modal);
 }
 
 .bx-sh_0_-15px_15px_0px_rgba\(0\,_0\,_0\,_0\.05\):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1035,8 +1035,8 @@ html:not(#\#),body:not(#\#) {
   will-change: auto;
 }
 
-.z_99:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  z-index: 99;
+.z_overlay:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  z-index: var(--z-index-overlay);
 }
 
 .h_100dvh:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -1306,18 +1306,10 @@ html:not(#\#),body:not(#\#) {
   width: 100vw;
 }
 
-.z_overlay:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  z-index: var(--z-index-overlay);
-}
-
 .ov_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   overflow: auto;
 }
 
-.z_modal:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  z-index: var(--z-index-modal);
-}
-
 .p_4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   padding: var(--spacing-4);
 }
@@ -1976,8 +1968,8 @@ html:not(#\#),body:not(#\#) {
   row-gap: var(--spacing-10);
 }
 
-.bg-c_\#ffffff:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  background-color: #ffffff;
+.bg-c_surface\.layer_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background-color: var(--colors-surface-layer_1);
 }
 
 .top_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2059,10 +2051,6 @@ html:not(#\#),body:not(#\#) {
   left: var(--spacing-0);
 }
 
-.bg-c_surface\.layer_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  background-color: var(--colors-surface-layer_1);
-}
-
 .top_4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   top: var(--spacing-4);
 }

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

@@ -4,7 +4,7 @@ export type ButtonProps = HTMLStyledProps<'button'> & ButtonVariantProps & {
     loading?: boolean;
     loadingText?: React.ReactNode;
 };
-declare const _default: <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: {
+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<{
     form?: string | undefined | undefined;
@@ -296,5 +296,5 @@ declare const _default: <C extends "symbol" | "object" | "a" | "abbr" | "address
     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"> & {
     ref?: import('react').Ref<import('react').ElementRef<C>> | undefined;
-}) => React.ReactElement;
+}) => React.ReactElement)>;
 export default _default;

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

@@ -3,9 +3,9 @@ import { IconButtonVariantProps } from './icon-button.recipe';
 export type IconButtonProps = HTMLStyledProps<'button'> & IconButtonVariantProps & {
     loading?: boolean;
 };
-declare const _default: <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: {
+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"> & {
     ref?: import('react').Ref<import('react').ElementRef<C>> | undefined;
-}) => React.ReactElement;
+}) => React.ReactElement)>;
 export default _default;

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

@@ -8,5 +8,5 @@ export type InputProps = Assign<HTMLStyledProps<'input'>, InputVariantProps> & {
     description?: string;
     textLimit?: number;
 };
-declare const Input: import('react').ForwardRefExoticComponent<Omit<InputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
-export default Input;
+declare const _default: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<InputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>>;
+export default _default;

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

@@ -6,5 +6,5 @@ export type TagProps = Assign<HTMLStyledProps<'div'>, TagVariantProps> & {
     text: string;
     onDeleteClick?: () => void;
 };
-declare const Tag: import('react').ForwardRefExoticComponent<Omit<TagProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export default Tag;
+declare const _default: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<TagProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>>;
+export default _default;

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

@@ -10,5 +10,5 @@ export type TextAreaProps = Assign<HTMLStyledProps<'textarea'>, InputVariantProp
     textLimit?: number;
     showTextCount?: boolean;
 };
-declare const Textarea: import('react').ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
-export default Textarea;
+declare const _default: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nation-a/ui",
-  "version": "0.10.3",
+  "version": "0.10.5",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",