@nation-a/ui 0.7.1 → 0.8.0

package/dist/index.js

@@ -2,6 +2,16 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { forwardRef, useMemo, createElement, createContext as createContext$1, useContext, useRef, useLayoutEffect, useEffect, useState, memo as memo$1, Children, isValidElement, cloneElement, useCallback, useId, useSyncExternalStore } from "react";
 import { flushSync, createPortal, unstable_batchedUpdates } from "react-dom";
+function withPolymorphicComponent(Component) {
+  const PolymorphicComponent = React.forwardRef(
+    (props, ref) => {
+      const { as, ...restProps } = props;
+      return /* @__PURE__ */ jsx(Component, { as, ref, ...restProps });
+    }
+  );
+  PolymorphicComponent.displayName = `withPolymorphic(${Component.displayName || "Component"})`;
+  return PolymorphicComponent;
+}
 function isObject$1(value) {
   return typeof value === "object" && value != null && !Array.isArray(value);
 }
@@ -103,8 +113,8 @@ function mapObject(obj, fn) {
 }
 function toResponsiveObject(values, breakpoints2) {
   return values.reduce(
-    (acc, current, index) => {
-      const key = breakpoints2[index];
+    (acc, current, index2) => {
+      const key = breakpoints2[index2];
       if (current != null) {
         acc[key] = current;
       }
@@ -440,15 +450,15 @@ function sva(config2) {
     getVariantProps
   });
 }
-var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_collapsed,_off,_on,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,textStyle";
+var userGeneratedStr = "css";
 var userGenerated = userGeneratedStr.split(",");
-var cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical";
+var cssPropertiesStr = "";
 var allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);
 var properties = new Map(allCssProperties.map((prop) => [prop, true]));
 var cssPropertySelectorRegex = /&|@/;
-var isCssProperty = /* @__PURE__ */ memo((prop) => {
+var isCssProperty = (prop) => {
   return properties.has(prop) || prop.startsWith("--") || cssPropertySelectorRegex.test(prop);
-});
+};
 const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop);
 const composeShouldForwardProps = (tag, shouldForwardProp2) => tag.__shouldForwardProps__ && shouldForwardProp2 ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp2(propName) : shouldForwardProp2;
 const composeCvaFn = (cvaA, cvaB) => {
@@ -523,6 +533,124 @@ function createJsxFactory() {
   });
 }
 const styled = /* @__PURE__ */ createJsxFactory();
+const boxConfig = {
+  transform(props) {
+    return props;
+  }
+};
+const getBoxStyle = (styles = {}) => {
+  const _styles = getPatternStyles(boxConfig, styles);
+  return boxConfig.transform(_styles, patternFns);
+};
+const Box$1 = /* @__PURE__ */ forwardRef(function Box(props, ref) {
+  const [patternProps, restProps] = splitProps(props, []);
+  const styleProps = getBoxStyle(patternProps);
+  const cssProps = { css: mergeCss(styleProps, props.css) };
+  const mergedProps = { ref, ...restProps, ...cssProps };
+  return createElement(styled.div, mergedProps);
+});
+const flexConfig = {
+  transform(props) {
+    const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
+    return {
+      display: "flex",
+      flexDirection: direction,
+      alignItems: align,
+      justifyContent: justify,
+      flexWrap: wrap2,
+      flexBasis: basis,
+      flexGrow: grow,
+      flexShrink: shrink,
+      ...rest
+    };
+  }
+};
+const getFlexStyle = (styles = {}) => {
+  const _styles = getPatternStyles(flexConfig, styles);
+  return flexConfig.transform(_styles, patternFns);
+};
+const Flex$1 = /* @__PURE__ */ forwardRef(function Flex(props, ref) {
+  const [patternProps, restProps] = splitProps(props, ["align", "justify", "direction", "wrap", "basis", "grow", "shrink"]);
+  const styleProps = getFlexStyle(patternProps);
+  const cssProps = { css: mergeCss(styleProps, props.css) };
+  const mergedProps = { ref, ...restProps, ...cssProps };
+  return createElement(styled.div, mergedProps);
+});
+const stackConfig = {
+  transform(props) {
+    const { align, justify, direction, gap, ...rest } = props;
+    return {
+      display: "flex",
+      flexDirection: direction,
+      alignItems: align,
+      justifyContent: justify,
+      gap,
+      ...rest
+    };
+  },
+  defaultValues: { direction: "column", gap: "10px" }
+};
+const getStackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(stackConfig, styles);
+  return stackConfig.transform(_styles, patternFns);
+};
+const Stack$1 = /* @__PURE__ */ forwardRef(function Stack(props, ref) {
+  const [patternProps, restProps] = splitProps(props, ["align", "justify", "direction", "gap"]);
+  const styleProps = getStackStyle(patternProps);
+  const cssProps = { css: mergeCss(styleProps, props.css) };
+  const mergedProps = { ref, ...restProps, ...cssProps };
+  return createElement(styled.div, mergedProps);
+});
+const vstackConfig = {
+  transform(props) {
+    const { justify, gap, ...rest } = props;
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: justify,
+      gap,
+      flexDirection: "column",
+      ...rest
+    };
+  },
+  defaultValues: { gap: "10px" }
+};
+const getVstackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(vstackConfig, styles);
+  return vstackConfig.transform(_styles, patternFns);
+};
+const VStack$1 = /* @__PURE__ */ forwardRef(function VStack(props, ref) {
+  const [patternProps, restProps] = splitProps(props, ["justify", "gap"]);
+  const styleProps = getVstackStyle(patternProps);
+  const cssProps = { css: mergeCss(styleProps, props.css) };
+  const mergedProps = { ref, ...restProps, ...cssProps };
+  return createElement(styled.div, mergedProps);
+});
+const hstackConfig = {
+  transform(props) {
+    const { justify, gap, ...rest } = props;
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: justify,
+      gap,
+      flexDirection: "row",
+      ...rest
+    };
+  },
+  defaultValues: { gap: "10px" }
+};
+const getHstackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(hstackConfig, styles);
+  return hstackConfig.transform(_styles, patternFns);
+};
+const HStack$1 = /* @__PURE__ */ forwardRef(function HStack(props, ref) {
+  const [patternProps, restProps] = splitProps(props, ["justify", "gap"]);
+  const styleProps = getHstackStyle(patternProps);
+  const cssProps = { css: mergeCss(styleProps, props.css) };
+  const mergedProps = { ref, ...restProps, ...cssProps };
+  return createElement(styled.div, mergedProps);
+});
 const centerConfig = {
   transform(props) {
     const { inline, ...rest } = props;
@@ -538,12 +666,75 @@ const getCenterStyle = (styles = {}) => {
   const _styles = getPatternStyles(centerConfig, styles);
   return centerConfig.transform(_styles, patternFns);
 };
-const Center = /* @__PURE__ */ forwardRef(function Center2(props, ref) {
+const Center$1 = /* @__PURE__ */ forwardRef(function Center(props, ref) {
   const [patternProps, restProps] = splitProps(props, ["inline"]);
   const styleProps = getCenterStyle(patternProps);
-  const mergedProps = { ref, ...styleProps, ...restProps };
+  const cssProps = { css: mergeCss(styleProps, props.css) };
+  const mergedProps = { ref, ...restProps, ...cssProps };
   return createElement(styled.div, mergedProps);
 });
+const gridConfig = {
+  transform(props, { map, isCssUnit: isCssUnit2 }) {
+    const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
+    const getValue = (v2) => isCssUnit2(v2) ? v2 : `token(sizes.${v2}, ${v2})`;
+    return {
+      display: "grid",
+      gridTemplateColumns: columns != null ? map(columns, (v2) => `repeat(${v2}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v2) => `repeat(auto-fit, minmax(${getValue(v2)}, 1fr))`) : void 0,
+      gap,
+      columnGap,
+      rowGap,
+      ...rest
+    };
+  },
+  defaultValues(props) {
+    return { gap: props.columnGap || props.rowGap ? void 0 : "10px" };
+  }
+};
+const getGridStyle = (styles = {}) => {
+  const _styles = getPatternStyles(gridConfig, styles);
+  return gridConfig.transform(_styles, patternFns);
+};
+const Grid$1 = /* @__PURE__ */ forwardRef(function Grid(props, ref) {
+  const [patternProps, restProps] = splitProps(props, ["gap", "columnGap", "rowGap", "columns", "minChildWidth"]);
+  const styleProps = getGridStyle(patternProps);
+  const cssProps = { css: mergeCss(styleProps, props.css) };
+  const mergedProps = { ref, ...restProps, ...cssProps };
+  return createElement(styled.div, mergedProps);
+});
+const gridItemConfig = {
+  transform(props, { map }) {
+    const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
+    const spanFn = (v2) => v2 === "auto" ? v2 : `span ${v2}`;
+    return {
+      gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
+      gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
+      gridColumnStart: colStart,
+      gridColumnEnd: colEnd,
+      gridRowStart: rowStart,
+      gridRowEnd: rowEnd,
+      ...rest
+    };
+  }
+};
+const getGridItemStyle = (styles = {}) => {
+  const _styles = getPatternStyles(gridItemConfig, styles);
+  return gridItemConfig.transform(_styles, patternFns);
+};
+const GridItem$1 = /* @__PURE__ */ forwardRef(function GridItem(props, ref) {
+  const [patternProps, restProps] = splitProps(props, ["colSpan", "rowSpan", "colStart", "rowStart", "colEnd", "rowEnd"]);
+  const styleProps = getGridItemStyle(patternProps);
+  const cssProps = { css: mergeCss(styleProps, props.css) };
+  const mergedProps = { ref, ...restProps, ...cssProps };
+  return createElement(styled.div, mergedProps);
+});
+const Box2 = withPolymorphicComponent(Box$1);
+const Flex2 = withPolymorphicComponent(Flex$1);
+const Grid2 = withPolymorphicComponent(Grid$1);
+const Stack2 = withPolymorphicComponent(Stack$1);
+const VStack2 = withPolymorphicComponent(VStack$1);
+const HStack2 = withPolymorphicComponent(HStack$1);
+const GridItem2 = withPolymorphicComponent(GridItem$1);
+const Center2 = withPolymorphicComponent(Center$1);
 function getErrorMessage(hook, provider) {
   return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
 }
@@ -1722,9 +1913,9 @@ var layerStack = {
   },
   isBelowPointerBlockingLayer(node) {
     var _a;
-    const index = this.indexOf(node);
+    const index2 = this.indexOf(node);
     const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf((_a = this.topMostPointerBlockingLayer()) == null ? void 0 : _a.node) : -1;
-    return index < highestBlockingIndex;
+    return index2 < highestBlockingIndex;
   },
   isTopMost(node) {
     const layer = this.layers[this.count() - 1];
@@ -1747,18 +1938,18 @@ var layerStack = {
     this.branches.push(node);
   },
   remove(node) {
-    const index = this.indexOf(node);
-    if (index < 0) return;
-    if (index < this.count() - 1) {
+    const index2 = this.indexOf(node);
+    if (index2 < 0) return;
+    if (index2 < this.count() - 1) {
       const _layers = this.getNestedLayers(node);
       _layers.forEach((layer) => layer.dismiss());
     }
-    this.layers.splice(index, 1);
+    this.layers.splice(index2, 1);
     node.style.removeProperty("--layer-index");
   },
   removeBranch(node) {
-    const index = this.branches.indexOf(node);
-    if (index >= 0) this.branches.splice(index, 1);
+    const index2 = this.branches.indexOf(node);
+    if (index2 >= 0) this.branches.splice(index2, 1);
   },
   indexOf(node) {
     return this.layers.findIndex((layer) => layer.node === node);
@@ -3907,17 +4098,18 @@ const spinnerRecipe = cva({
   }
 });
 const Spinner = forwardRef((props, ref) => {
-  const { label = "Loading...", color, ...rest } = props;
+  const { color, ...rest } = props;
   const StyledSpinner = styled(ark.div, spinnerRecipe);
   return /* @__PURE__ */ jsx(
     StyledSpinner,
     {
       ref,
       ...rest,
-      borderColor: "inherit",
-      borderBottomColor: "transparent",
-      borderLeftColor: "transparent",
-      children: label && /* @__PURE__ */ jsx(styled.span, { srOnly: true, children: label })
+      css: {
+        borderColor: "inherit",
+        borderBottomColor: "transparent",
+        borderLeftColor: "transparent"
+      }
     }
   );
 });
@@ -4370,32 +4562,41 @@ const buttonRecipe = cva({
     }
   ]
 });
-const Button = forwardRef(
-  ({ loading, disabled, loadingText, children, color, variant, size, radius, ...rest }, ref) => {
-    const StyledButton = styled(ark.button, buttonRecipe);
-    return /* @__PURE__ */ jsx(
-      StyledButton,
-      {
-        disabled,
-        ref,
-        color,
-        variant,
-        size,
-        radius,
-        pointerEvents: loading ? "none" : "auto",
-        ...rest,
-        children: loading ? loadingText || /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Center, { inline: true, position: "absolute", transform: "translate(-50%, -50%)", top: "50%", insetStart: "50%", children: /* @__PURE__ */ jsx(Spinner, { size: size === "xs" || size === "sm" ? "sm" : "md" }) }),
-          /* @__PURE__ */ jsx(styled.span, { opacity: 0, children })
-        ] }) : children
-      }
-    );
-  }
-);
-Button.displayName = "Button";
+const Button = ({ loading, disabled, loadingText, children, color, variant, size, radius, ...rest }) => {
+  const StyledButton = styled(ark.button, buttonRecipe);
+  return /* @__PURE__ */ jsx(
+    StyledButton,
+    {
+      disabled,
+      color,
+      variant,
+      size,
+      radius,
+      css: { pointerEvents: loading ? "none" : "auto" },
+      ...rest,
+      children: loading ? loadingText || /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Center2,
+          {
+            inline: true,
+            css: {
+              position: "absolute",
+              transform: "translate(-50%, -50%)",
+              top: "50%",
+              insetStart: "50%"
+            },
+            children: /* @__PURE__ */ jsx(Spinner, { size: size === "xs" || size === "sm" ? "sm" : "md" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Box2, { as: "span", css: { opacity: 0 }, children })
+      ] }) : children
+    }
+  );
+};
+const index$1 = withPolymorphicComponent(Button);
 const textRecipe = cva({
   base: {
-    color: "content.neutral.default"
+    color: "currentcolor"
   },
   defaultVariants: {
     variant: "body.md"
@@ -4472,7 +4673,7 @@ const Text = forwardRef((props, ref) => {
     label: styled("span", textRecipe)
   };
   const TextComponent = componentMap[textType];
-  return /* @__PURE__ */ jsx(TextComponent, { ref, textStyle: variant, font, ...rest, children });
+  return /* @__PURE__ */ jsx(TextComponent, { ref, css: { textStyle: variant, fontFamily: font }, ...rest, children });
 });
 Text.displayName = "Text";
 const shouldForwardProp = (prop, variantKeys, options = {}) => {
@@ -4813,17 +5014,30 @@ const IconButton = forwardRef(
         color,
         variant,
         size,
-        pointerEvents: loading ? "none" : "auto",
+        css: { pointerEvents: loading ? "none" : "auto" },
         ...rest,
         children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Center, { inline: true, position: "absolute", transform: "translate(-50%, -50%)", top: "50%", insetStart: "50%", children: /* @__PURE__ */ jsx(Spinner, { size: size === "lg" ? "md" : "sm" }) }),
-          /* @__PURE__ */ jsx(styled.span, { opacity: 0, children })
+          /* @__PURE__ */ jsx(
+            Center$1,
+            {
+              inline: true,
+              css: {
+                position: "absolute",
+                transform: "translate(-50%, -50%)",
+                top: "50%",
+                insetStart: "50%"
+              },
+              children: /* @__PURE__ */ jsx(Spinner, { size: size === "lg" ? "md" : "sm" })
+            }
+          ),
+          /* @__PURE__ */ jsx(styled.span, { css: { opacity: 0 }, children })
         ] }) : children
       }
     );
   }
 );
 IconButton.displayName = "IconButton";
+const index = withPolymorphicComponent(IconButton);
 var updateQueue = makeQueue();
 var raf = (fn) => schedule(fn, updateQueue);
 var writeQueue = makeQueue();
@@ -5144,8 +5358,8 @@ function advance(dt) {
   return currentFrame.length > 0;
 }
 function findIndex(arr, test) {
-  const index = arr.findIndex(test);
-  return index < 0 ? arr.length : index;
+  const index2 = arr.findIndex(test);
+  return index2 < 0 ? arr.length : index2;
 }
 var colors2 = {
   transparent: 0,
@@ -7595,8 +7809,8 @@ var SpringRef = () => {
     each(current, (ctrl, i) => ctrl.update(this._getProps(props, ctrl, i)));
     return this;
   };
-  const _getProps = function(arg, ctrl, index) {
-    return is.fun(arg) ? arg(index, ctrl) : arg;
+  const _getProps = function(arg, ctrl, index2) {
+    return is.fun(arg) ? arg(index2, ctrl) : arg;
   };
   SpringRef2._getProps = _getProps;
   return SpringRef2;
@@ -8346,22 +8560,25 @@ const BottomSheetFrame = forwardRef(
       animated.section,
       {
         ref,
-        className: cx(css$1({
-          position: "fixed",
-          touchAction: "pan-y",
-          display: "flex",
-          flexDirection: "column",
-          width: "100%",
-          pointerEvents: "auto",
-          // 제스처 이벤트 허용
-          overflow: "hidden",
-          borderRadius: "40px 40px 0 0",
-          height: "100%",
-          zIndex: 999,
-          backgroundColor: "#ffffff",
-          shadow: "0 -15px 15px 0px rgba(0, 0, 0, 0.05)",
-          willChange: "auto"
-        }), className),
+        className: cx(
+          css$1({
+            position: "fixed",
+            touchAction: "pan-y",
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            pointerEvents: "auto",
+            // 제스처 이벤트 허용
+            overflow: "hidden",
+            borderRadius: "40px 40px 0 0",
+            height: "100%",
+            zIndex: 999,
+            backgroundColor: "#ffffff",
+            shadow: "0 -15px 15px 0px rgba(0, 0, 0, 0.05)",
+            willChange: "auto"
+          }),
+          className
+        ),
         style: {
           bottom: `calc(${initialOpenHeightPx}px - 100dvh)`,
           transform: springs.transform
@@ -8371,42 +8588,70 @@ const BottomSheetFrame = forwardRef(
     );
   }
 );
-const Backdrop = forwardRef(({ onBackdropClick, isBackdropOpen, opacity: bgOpacity }, ref) => {
-  const [springs] = useSpring(() => ({
-    from: { opacity: 0 },
-    to: { opacity: isBackdropOpen ? 1 : 0 },
-    config: {
-      tension: 200,
-      friction: 25,
-      mass: 0.8
-    }
-  }), [isBackdropOpen]);
-  return /* @__PURE__ */ jsx(
-    animated.div,
-    {
-      className: css$1({
-        zIndex: 99,
-        position: "fixed",
-        top: 0,
-        width: "100%",
-        height: "100dvh",
-        willChange: "opacity",
-        overflow: "hidden",
-        touchAction: "none"
+const Backdrop = forwardRef(
+  ({ onBackdropClick, isBackdropOpen, opacity: bgOpacity }, ref) => {
+    const [springs] = useSpring(
+      () => ({
+        from: { opacity: 0 },
+        to: { opacity: isBackdropOpen ? 1 : 0 },
+        config: {
+          tension: 200,
+          friction: 25,
+          mass: 0.8
+        }
       }),
-      style: {
-        backgroundColor: springs.opacity.to((o) => `rgba(0, 0, 0, ${o * bgOpacity})`),
-        opacity: springs.opacity,
-        visibility: isBackdropOpen ? "visible" : "hidden"
-      },
-      onClick: () => onBackdropClick(),
-      ref
-    }
-  );
-});
-const BottomSheetHandle = () => /* @__PURE__ */ jsx("div", { className: css$1({ margin: "22px auto", height: 1.5, minHeight: 1.5, width: "45px", borderRadius: 999, background: "#bebebe" }) });
+      [isBackdropOpen]
+    );
+    return /* @__PURE__ */ jsx(
+      animated.div,
+      {
+        className: css$1({
+          zIndex: 99,
+          position: "fixed",
+          top: 0,
+          width: "100%",
+          height: "100dvh",
+          willChange: "opacity",
+          overflow: "hidden",
+          touchAction: "none"
+        }),
+        style: {
+          backgroundColor: springs.opacity.to((o) => `rgba(0, 0, 0, ${o * bgOpacity})`),
+          opacity: springs.opacity,
+          visibility: isBackdropOpen ? "visible" : "hidden"
+        },
+        onClick: () => onBackdropClick(),
+        ref
+      }
+    );
+  }
+);
+const BottomSheetHandle = () => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: css$1({
+      margin: "22px auto",
+      height: 1.5,
+      minHeight: 1.5,
+      width: "45px",
+      borderRadius: 999,
+      background: "#bebebe"
+    })
+  }
+);
 const BottomSheet = (props) => {
-  const { isOpen = true, onClose, onOpen, children, className = "", snapPercent, bgBlocking = true, backdropOpacity = DEFAULT_BACKDROP_OPACITY, hideHandle = false, expendOnContentDrag = false } = props;
+  const {
+    isOpen = true,
+    onClose,
+    onOpen,
+    children,
+    className = "",
+    snapPercent,
+    bgBlocking = true,
+    backdropOpacity = DEFAULT_BACKDROP_OPACITY,
+    hideHandle = false,
+    expendOnContentDrag = false
+  } = props;
   const { bottomSheetRef, contentRef, snapToMin, springs } = useBottomSheet({
     isOpen,
     onOpen,
@@ -8620,18 +8865,18 @@ const tagRecipe = cva({
     avatar: false
   }
 });
-function CloseOutlineIcon({ size = 24, color = "currentColor", ...props }) {
+function P({ size: C = 24, color: n = "currentColor", ...o }) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
-      width: size,
-      height: size,
+      width: C,
+      height: C,
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       strokeWidth: "0",
-      color,
-      ...props,
+      color: n,
+      ...o,
       children: /* @__PURE__ */ jsx(
         "path",
         {
@@ -8645,14 +8890,28 @@ function CloseOutlineIcon({ size = 24, color = "currentColor", ...props }) {
     }
   );
 }
-const Tag = forwardRef(({ color, background, radius, imageSrc, text, onDeleteClick, ...rest }, ref) => {
-  const StyledTag = styled(ark.div, tagRecipe);
-  return /* @__PURE__ */ jsxs(StyledTag, { color, background, radius, avatar: !!imageSrc, ref, ...rest, children: [
-    imageSrc ? /* @__PURE__ */ jsx(styled.img, { src: imageSrc, width: 8, height: 8, borderRadius: "full", overflow: "hidden", alt: "avatar thumbnail" }) : null,
-    text,
-    onDeleteClick ? /* @__PURE__ */ jsx(CloseOutlineIcon, { size: 12, onClick: onDeleteClick, cursor: "pointer" }) : null
-  ] });
-});
+const Tag = forwardRef(
+  ({ color, background, radius, imageSrc, text, onDeleteClick, ...rest }, ref) => {
+    const StyledTag = styled(ark.div, tagRecipe);
+    return /* @__PURE__ */ jsxs(StyledTag, { color, background, radius, avatar: !!imageSrc, ref, ...rest, children: [
+      imageSrc && /* @__PURE__ */ jsx(
+        styled.img,
+        {
+          src: imageSrc,
+          css: {
+            width: "8",
+            height: "8",
+            borderRadius: "full",
+            overflow: "hidden"
+          },
+          alt: "avatar thumbnail"
+        }
+      ),
+      text,
+      onDeleteClick ? /* @__PURE__ */ jsx(P, { size: 12, onClick: onDeleteClick, cursor: "pointer" }) : null
+    ] });
+  }
+);
 Tag.displayName = "Tag";
 function definePreset(preset2) {
   return preset2;
@@ -8956,14 +9215,22 @@ const preset = definePreset({
 });
 export {
   BottomSheet,
-  Button,
+  Box2 as Box,
+  index$1 as Button,
+  Center2 as Center,
   Dialog,
-  IconButton,
+  Flex2 as Flex,
+  Grid2 as Grid,
+  GridItem2 as GridItem,
+  HStack2 as HStack,
+  index as IconButton,
   Navigation,
   Portal,
   Spinner,
+  Stack2 as Stack,
   Tag,
   Text,
+  VStack2 as VStack,
   preset
 };
 //# sourceMappingURL=index.js.map