@okshaun/components 0.4.5 → 0.5.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React__default, { forwardRef, useMemo, createElement, useEffect, useState, useRef, useLayoutEffect, createContext, useContext, useCallback, useSyncExternalStore } from "react";
+import React__default, { forwardRef, useMemo, createElement, useEffect, useState, useRef, createContext, useContext, useCallback, useLayoutEffect, useSyncExternalStore } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 import { b as breakpoints, c as containerSizes } from "./size.primitives-j2MFgtrT.js";
@@ -239,7 +239,7 @@ function normalizeHTMLProps(props) {
   return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));
 }
 normalizeHTMLProps.keys = htmlProps;
-const conditionsStr = "_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,_noscript,_invertedColors,_collapsed,_error,_paused,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,xsToSm,xsToMd,xsToLg,xsToXl,xsTo2xl,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base";
+const conditionsStr = "_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,_noscript,_invertedColors,_deleted,_collapsed,_error,_paused,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,xsToSm,xsToMd,xsToLg,xsToXl,xsTo2xl,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base";
 const conditions = new Set(conditionsStr.split(","));
 const conditionRegex = /^@|&|&$/;
 function isCondition(value) {
@@ -449,38 +449,6 @@ const mergeRecipes = (recipeA, recipeB) => {
     }
   });
 };
-const badgeFn = /* @__PURE__ */ createRecipe("badge", {
-  "variant": "subtle",
-  "size": "md"
-}, []);
-const badgeVariantMap = {
-  "variant": [
-    "solid",
-    "subtle",
-    "outline"
-  ],
-  "size": [
-    "sm",
-    "md",
-    "lg"
-  ]
-};
-const badgeVariantKeys = Object.keys(badgeVariantMap);
-const badge = /* @__PURE__ */ Object.assign(memo(badgeFn.recipeFn), {
-  __recipe__: true,
-  __name__: "badge",
-  __getCompoundVariantCss__: badgeFn.__getCompoundVariantCss__,
-  raw: (props) => props,
-  variantKeys: badgeVariantKeys,
-  variantMap: badgeVariantMap,
-  merge(recipe) {
-    return mergeRecipes(this, recipe);
-  },
-  splitVariantProps(props) {
-    return splitProps$1(props, badgeVariantKeys);
-  },
-  getVariantProps: badgeFn.getVariantProps
-});
 const boxFn = /* @__PURE__ */ createRecipe("box", {}, []);
 const boxVariantMap = {};
 const boxVariantKeys = Object.keys(boxVariantMap);
@@ -1284,6 +1252,99 @@ const toggleInput = /* @__PURE__ */ Object.assign(memo(toggleInputFn.recipeFn),
   },
   getVariantProps: toggleInputFn.getVariantProps
 });
+const badgeDefaultVariants = {
+  "size": "md",
+  "appearance": "danger"
+};
+const badgeCompoundVariants = [
+  {
+    "dot": false,
+    "size": "sm",
+    "css": {
+      "indicator": {
+        "minW": "16",
+        "h": "fit"
+      }
+    }
+  },
+  {
+    "dot": false,
+    "size": "md",
+    "css": {
+      "indicator": {
+        "minW": "20",
+        "h": "fit"
+      }
+    }
+  },
+  {
+    "dot": false,
+    "size": "lg",
+    "css": {
+      "indicator": {
+        "minW": "24",
+        "h": "fit"
+      }
+    }
+  }
+];
+const badgeSlotNames = [
+  [
+    "root",
+    "badge__root"
+  ],
+  [
+    "indicator",
+    "badge__indicator"
+  ]
+];
+const badgeSlotFns = /* @__PURE__ */ badgeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, badgeDefaultVariants, getSlotCompoundVariant(badgeCompoundVariants, slotName))]);
+const badgeFn = memo((props = {}) => {
+  return Object.fromEntries(badgeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const badgeVariantKeys = [
+  "size",
+  "standalone",
+  "dot",
+  "appearance"
+];
+const getVariantProps$9 = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
+const badge = /* @__PURE__ */ Object.assign(badgeFn, {
+  __recipe__: false,
+  __name__: "badge",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: badgeVariantKeys,
+  variantMap: {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "standalone": [
+      "true",
+      "false"
+    ],
+    "dot": [
+      "true",
+      "false"
+    ],
+    "appearance": [
+      "neutral",
+      "subtle",
+      "inverted",
+      "subtle-inverted",
+      "success",
+      "danger",
+      "warning",
+      "info"
+    ]
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, badgeVariantKeys);
+  },
+  getVariantProps: getVariantProps$9
+});
 const buttonDefaultVariants = {
   "appearance": "default",
   "size": "default"
@@ -1382,7 +1443,7 @@ const buttonVariantKeys = [
   "iconBefore",
   "iconAfter"
 ];
-const getVariantProps$6 = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
+const getVariantProps$8 = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
 const button = /* @__PURE__ */ Object.assign(buttonFn, {
   __recipe__: false,
   __name__: "button",
@@ -1412,7 +1473,7 @@ const button = /* @__PURE__ */ Object.assign(buttonFn, {
   splitVariantProps(props) {
     return splitProps$1(props, buttonVariantKeys);
   },
-  getVariantProps: getVariantProps$6
+  getVariantProps: getVariantProps$8
 });
 const iconButtonDefaultVariants = {
   "appearance": "default",
@@ -1437,7 +1498,7 @@ const iconButtonVariantKeys = [
   "appearance",
   "size"
 ];
-const getVariantProps$5 = (variants) => ({ ...iconButtonDefaultVariants, ...compact(variants) });
+const getVariantProps$7 = (variants) => ({ ...iconButtonDefaultVariants, ...compact(variants) });
 const iconButton = /* @__PURE__ */ Object.assign(iconButtonFn, {
   __recipe__: false,
   __name__: "iconButton",
@@ -1460,7 +1521,7 @@ const iconButton = /* @__PURE__ */ Object.assign(iconButtonFn, {
   splitVariantProps(props) {
     return splitProps$1(props, iconButtonVariantKeys);
   },
-  getVariantProps: getVariantProps$5
+  getVariantProps: getVariantProps$7
 });
 const checkboxDefaultVariants = {};
 const checkboxCompoundVariants = [];
@@ -1483,7 +1544,7 @@ const checkboxFn = memo((props = {}) => {
   return Object.fromEntries(checkboxSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const checkboxVariantKeys = [];
-const getVariantProps$4 = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
+const getVariantProps$6 = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
 const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   __recipe__: false,
   __name__: "checkbox",
@@ -1494,7 +1555,7 @@ const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   splitVariantProps(props) {
     return splitProps$1(props, checkboxVariantKeys);
   },
-  getVariantProps: getVariantProps$4
+  getVariantProps: getVariantProps$6
 });
 const radioDefaultVariants = {};
 const radioCompoundVariants = [];
@@ -1517,7 +1578,7 @@ const radioFn = memo((props = {}) => {
   return Object.fromEntries(radioSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const radioVariantKeys = [];
-const getVariantProps$3 = (variants) => ({ ...radioDefaultVariants, ...compact(variants) });
+const getVariantProps$5 = (variants) => ({ ...radioDefaultVariants, ...compact(variants) });
 const radio = /* @__PURE__ */ Object.assign(radioFn, {
   __recipe__: false,
   __name__: "radio",
@@ -1528,7 +1589,7 @@ const radio = /* @__PURE__ */ Object.assign(radioFn, {
   splitVariantProps(props) {
     return splitProps$1(props, radioVariantKeys);
   },
-  getVariantProps: getVariantProps$3
+  getVariantProps: getVariantProps$5
 });
 const tooltipDefaultVariants = {
   "position": "bottom"
@@ -1657,7 +1718,7 @@ const tooltipVariantKeys = [
   "position",
   "caret"
 ];
-const getVariantProps$2 = (variants) => ({ ...tooltipDefaultVariants, ...compact(variants) });
+const getVariantProps$4 = (variants) => ({ ...tooltipDefaultVariants, ...compact(variants) });
 const tooltip = /* @__PURE__ */ Object.assign(tooltipFn, {
   __recipe__: false,
   __name__: "tooltip",
@@ -1687,7 +1748,7 @@ const tooltip = /* @__PURE__ */ Object.assign(tooltipFn, {
   splitVariantProps(props) {
     return splitProps$1(props, tooltipVariantKeys);
   },
-  getVariantProps: getVariantProps$2
+  getVariantProps: getVariantProps$4
 });
 const menuDefaultVariants = {
   "size": "default",
@@ -1748,7 +1809,7 @@ const menuVariantKeys = [
   "size",
   "indicatorPosition"
 ];
-const getVariantProps$1 = (variants) => ({ ...menuDefaultVariants, ...compact(variants) });
+const getVariantProps$3 = (variants) => ({ ...menuDefaultVariants, ...compact(variants) });
 const menu = /* @__PURE__ */ Object.assign(menuFn, {
   __recipe__: false,
   __name__: "menu",
@@ -1769,7 +1830,7 @@ const menu = /* @__PURE__ */ Object.assign(menuFn, {
   splitVariantProps(props) {
     return splitProps$1(props, menuVariantKeys);
   },
-  getVariantProps: getVariantProps$1
+  getVariantProps: getVariantProps$3
 });
 const toggleDefaultVariants = {};
 const toggleCompoundVariants = [];
@@ -1796,7 +1857,7 @@ const toggleFn = memo((props = {}) => {
   return Object.fromEntries(toggleSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const toggleVariantKeys = [];
-const getVariantProps = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
+const getVariantProps$2 = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
 const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   __recipe__: false,
   __name__: "toggle",
@@ -1807,9 +1868,174 @@ const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   splitVariantProps(props) {
     return splitProps$1(props, toggleVariantKeys);
   },
+  getVariantProps: getVariantProps$2
+});
+const chipDefaultVariants = {
+  "size": "default"
+};
+const chipCompoundVariants = [
+  {
+    "size": "default",
+    "before": true,
+    "css": {
+      "container": {
+        "ps": "2"
+      }
+    }
+  },
+  {
+    "size": "default",
+    "after": true,
+    "css": {
+      "container": {
+        "pe": "2"
+      }
+    }
+  },
+  {
+    "size": "small",
+    "before": true,
+    "css": {
+      "container": {
+        "ps": "2"
+      }
+    }
+  },
+  {
+    "size": "small",
+    "after": true,
+    "css": {
+      "container": {
+        "pe": "2"
+      }
+    }
+  },
+  {
+    "size": "large",
+    "before": true,
+    "css": {
+      "container": {
+        "ps": "4"
+      }
+    }
+  },
+  {
+    "size": "large",
+    "after": true,
+    "css": {
+      "container": {
+        "pe": "4"
+      }
+    }
+  }
+];
+const chipSlotNames = [
+  [
+    "container",
+    "chip__container"
+  ],
+  [
+    "icon",
+    "chip__icon"
+  ]
+];
+const chipSlotFns = /* @__PURE__ */ chipSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, chipDefaultVariants, getSlotCompoundVariant(chipCompoundVariants, slotName))]);
+const chipFn = memo((props = {}) => {
+  return Object.fromEntries(chipSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const chipVariantKeys = [
+  "size",
+  "before",
+  "after"
+];
+const getVariantProps$1 = (variants) => ({ ...chipDefaultVariants, ...compact(variants) });
+const chip = /* @__PURE__ */ Object.assign(chipFn, {
+  __recipe__: false,
+  __name__: "chip",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: chipVariantKeys,
+  variantMap: {
+    "size": [
+      "default",
+      "small",
+      "large"
+    ],
+    "before": [
+      "true"
+    ],
+    "after": [
+      "true"
+    ]
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, chipVariantKeys);
+  },
+  getVariantProps: getVariantProps$1
+});
+const avatarDefaultVariants = {
+  "size": "md",
+  "shape": "circle"
+};
+const avatarCompoundVariants = [];
+const avatarSlotNames = [
+  [
+    "root",
+    "avatar__root"
+  ],
+  [
+    "image",
+    "avatar__image"
+  ],
+  [
+    "fallback",
+    "avatar__fallback"
+  ],
+  [
+    "presence",
+    "avatar__presence"
+  ],
+  [
+    "status",
+    "avatar__status"
+  ]
+];
+const avatarSlotFns = /* @__PURE__ */ avatarSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, avatarDefaultVariants, getSlotCompoundVariant(avatarCompoundVariants, slotName))]);
+const avatarFn = memo((props = {}) => {
+  return Object.fromEntries(avatarSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const avatarVariantKeys = [
+  "size",
+  "shape"
+];
+const getVariantProps = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
+const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
+  __recipe__: false,
+  __name__: "avatar",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: avatarVariantKeys,
+  variantMap: {
+    "size": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl",
+      "2xl"
+    ],
+    "shape": [
+      "circle",
+      "square",
+      "hexagon"
+    ]
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, avatarVariantKeys);
+  },
   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,bgLinear,bgRadial,bgConic,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,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,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,backgroundLinear,backgroundRadial,backgroundConic,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,borderBlockStartWidth,borderBlockEndWidth,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,cursor,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,_noscript,_invertedColors,_collapsed,_error,_paused,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,xsToSm,xsToMd,xsToLg,xsToXl,xsTo2xl,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,textStyle";
+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,bgLinear,bgRadial,bgConic,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,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,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,backgroundLinear,backgroundRadial,backgroundConic,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,borderBlockStartWidth,borderBlockEndWidth,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,cursor,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,_noscript,_invertedColors,_deleted,_collapsed,_error,_paused,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,xsToSm,xsToMd,xsToLg,xsToXl,xsTo2xl,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,textStyle";
 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 allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);
@@ -1970,6 +2196,31 @@ const Grid = /* @__PURE__ */ forwardRef(function Grid2(props, ref) {
   const mergedProps = { ref, ...styleProps, ...restProps };
   return createElement(styled.div, mergedProps);
 });
+const wrapConfig = {
+  transform(props) {
+    const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
+    return {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: align,
+      justifyContent: justify,
+      gap,
+      columnGap,
+      rowGap,
+      ...rest
+    };
+  }
+};
+const getWrapStyle = (styles = {}) => {
+  const _styles = getPatternStyles(wrapConfig, styles);
+  return wrapConfig.transform(_styles, patternFns);
+};
+const Wrap = /* @__PURE__ */ forwardRef(function Wrap2(props, ref) {
+  const [patternProps, restProps] = splitProps$1(props, ["gap", "rowGap", "columnGap", "align", "justify"]);
+  const styleProps = getWrapStyle(patternProps);
+  const mergedProps = { ref, ...styleProps, ...restProps };
+  return createElement(styled.div, mergedProps);
+});
 const splitProps = (props) => {
   const [cssProps, otherProps] = splitCssProps(props);
   const { css: cssProp, ...styleProps } = cssProps;
@@ -2383,6 +2634,7 @@ const Button = React.forwardRef(
     disabled,
     iconBefore,
     iconAfter,
+    gap,
     ...props
   }, ref) => {
     const trulyDisabled = loading || disabled;
@@ -2405,7 +2657,7 @@ const Button = React.forwardRef(
         type: asComponent === "button" ? "button" : void 0,
         ...props,
         children: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(HStack, { gap: "4", opacity: loading ? 0 : 1, children: [
+          /* @__PURE__ */ jsxs(HStack, { gap: gap || "4", opacity: loading ? 0 : 1, children: [
             iconBefore && /* @__PURE__ */ jsx(Icon, { name: iconBefore, className: classes.icon }),
             children,
             iconAfter && /* @__PURE__ */ jsx(Icon, { name: iconAfter, className: classes.icon })
@@ -2427,20 +2679,165 @@ const Button = React.forwardRef(
     );
   }
 );
+const animationStyles = {
+  pop: css({
+    animation: "badgePop 200ms ease-out"
+  }),
+  popStandalone: css({
+    animation: "badgePopStandalone 200ms ease-out"
+  })
+};
 const Badge = React.forwardRef(
-  ({ variant, size: size2, className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Box,
+  ({
+    count: count2,
+    showZero = false,
+    overflowCount = 99,
+    appearance = "danger",
+    size: size2 = "md",
+    children,
+    ...props
+  }, ref) => {
+    const [className, otherProps] = splitProps(props);
+    const prevCountRef = React.useRef(count2);
+    const [isAnimating, setIsAnimating] = React.useState(false);
+    React.useEffect(() => {
+      if (count2 !== void 0 && prevCountRef.current !== count2) {
+        if (prevCountRef.current !== void 0) {
+          setIsAnimating(true);
+          const timer = setTimeout(() => setIsAnimating(false), 200);
+          return () => clearTimeout(timer);
+        }
+      }
+      prevCountRef.current = count2;
+    }, [count2]);
+    const isCountMode = count2 !== void 0;
+    const isDotMode = !isCountMode;
+    const isVisible = isDotMode || count2 !== 0 || showZero;
+    const displayCount = isCountMode && count2 !== void 0 ? count2 > overflowCount ? `${overflowCount}+` : count2 : null;
+    const isStandalone = !children;
+    const classes = badge({
+      size: size2,
+      standalone: isStandalone,
+      dot: isDotMode,
+      appearance
+    });
+    const animationClass = isAnimating ? isStandalone ? animationStyles.popStandalone : animationStyles.pop : "";
+    if (!isVisible && !children) {
+      return null;
+    }
+    const indicator = isVisible ? /* @__PURE__ */ jsx("span", { className: cx(classes.indicator, animationClass), children: displayCount }) : null;
+    if (isStandalone) {
+      return /* @__PURE__ */ jsx("span", { ref, className: cx(classes.root, className), ...otherProps, children: indicator });
+    }
+    return /* @__PURE__ */ jsxs("span", { ref, className: cx(classes.root, className), ...otherProps, children: [
+      children,
+      indicator
+    ] });
+  }
+);
+Badge.displayName = "Badge";
+const presenceStyles = {
+  online: css({ bg: "bg.success.bold" }),
+  busy: css({ bg: "bg.danger.bold" }),
+  offline: css({ bg: "bg.neutral.bold" }),
+  focus: css({ bg: "bg.brand.bold" })
+};
+const statusStyles = {
+  approved: css({ bg: "bg.success.bold", color: "icon.inverse" }),
+  declined: css({ bg: "bg.danger.bold", color: "icon.inverse" }),
+  locked: css({ bg: "bg.neutral.bold", color: "icon.inverse" })
+};
+const sizeToStatusIconSize = {
+  xs: "8",
+  sm: "10",
+  md: "12",
+  lg: "14",
+  xl: "16",
+  "2xl": "20"
+};
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 0 || !parts[0]) {
+    return "";
+  }
+  if (parts.length === 1) {
+    return parts[0].charAt(0);
+  }
+  const lastPart = parts[parts.length - 1];
+  return parts[0].charAt(0) + (lastPart ? lastPart.charAt(0) : "");
+}
+const Avatar = React.forwardRef(
+  (props, ref) => {
+    const {
+      src,
+      alt = "",
+      name,
+      size: size2 = "md",
+      shape = "circle",
+      presence,
+      status,
+      fallback,
+      borderColor,
+      ...rest
+    } = props;
+    const [className, otherProps] = splitProps(rest);
+    const [imageError, setImageError] = React.useState(false);
+    const [imageLoaded, setImageLoaded] = React.useState(false);
+    React.useEffect(() => {
+      setImageError(false);
+      setImageLoaded(false);
+    }, [src]);
+    const safeSize = size2;
+    const classes = avatar({ size: safeSize, shape });
+    const showImage = src && !imageError;
+    const initials = name ? getInitials(name) : null;
+    const iconSize = sizeToStatusIconSize[safeSize];
+    return /* @__PURE__ */ jsxs(
+      "span",
       {
-        as: "span",
         ref,
-        className: cx(badge({ variant, size: size2 }), className),
-        ...props,
-        children
+        className: cx(classes.root, className),
+        style: borderColor ? { borderColor } : void 0,
+        ...otherProps,
+        children: [
+          showImage && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt,
+              className: classes.image,
+              onError: () => setImageError(true),
+              onLoad: () => setImageLoaded(true),
+              style: { opacity: imageLoaded ? 1 : 0 }
+            }
+          ),
+          (!showImage || !imageLoaded) && /* @__PURE__ */ jsx("span", { className: classes.fallback, children: fallback || initials || /* @__PURE__ */ jsx(Icon, { name: "user" }) }),
+          presence && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cx(
+                classes.presence,
+                presenceStyles[presence]
+              )
+            }
+          ),
+          status && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cx(classes.status, statusStyles[status]),
+              children: [
+                status === "approved" && /* @__PURE__ */ jsx(Icon, { name: "check", size: iconSize }),
+                status === "declined" && /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize }),
+                status === "locked" && /* @__PURE__ */ jsx(Icon, { name: "lock", size: iconSize })
+              ]
+            }
+          )
+        ]
       }
     );
   }
 );
+Avatar.displayName = "Avatar";
 const IconButton = React.forwardRef(
   ({
     appearance,
@@ -3073,6 +3470,221 @@ const Tag = ({
     }
   );
 };
+const ChipGroupContext = createContext(
+  null
+);
+const useChipGroup = () => {
+  return useContext(ChipGroupContext);
+};
+const chipSizeToIconSize = {
+  small: "20",
+  default: "20",
+  large: "24"
+};
+const Chip = ({
+  size: size2 = "default",
+  children,
+  loading,
+  disabled,
+  deleted,
+  before,
+  after,
+  dismissable,
+  onDismiss,
+  value,
+  gap,
+  onClick,
+  ...props
+}) => {
+  const [className, otherProps] = splitProps(props);
+  const groupContext = useChipGroup();
+  const buttonRef = useRef(null);
+  const isSelectable = value !== void 0 && groupContext !== null;
+  useEffect(() => {
+    if (isSelectable && value && groupContext) {
+      groupContext.registerChip(value, buttonRef);
+      return () => groupContext.unregisterChip(value);
+    }
+  }, [isSelectable, value, groupContext]);
+  const isSelected = isSelectable ? groupContext.type === "single" ? groupContext.value === value : Array.isArray(groupContext.value) && groupContext.value.includes(value) : false;
+  const isMultiSelected = isSelectable && groupContext.type === "multi" && isSelected;
+  const hasBefore = Boolean(before) || isMultiSelected;
+  const hasAfter = Boolean(after) || dismissable;
+  const classes = chip({
+    size: size2,
+    before: hasBefore,
+    after: hasAfter
+  });
+  const iconSize = chipSizeToIconSize[size2];
+  const handleClick = () => {
+    if (dismissable && onDismiss) {
+      onDismiss();
+    } else if (isSelectable && groupContext) {
+      if (groupContext.type === "single") {
+        groupContext.onChange(value);
+      } else {
+        const currentValues = Array.isArray(groupContext.value) ? groupContext.value : [];
+        const newValues = currentValues.includes(value) ? currentValues.filter((v) => v !== value) : [...currentValues, value];
+        groupContext.onChange(newValues);
+      }
+    } else if (onClick) {
+      onClick();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (!isSelectable || !groupContext || !value) return;
+    if (groupContext.type === "single") {
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        groupContext.focusChip("next", value);
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        groupContext.focusChip("prev", value);
+      }
+    }
+  };
+  const childText = typeof children === "string" ? children : void 0;
+  const ariaLabel = dismissable && childText ? `${childText}, dismiss` : void 0;
+  const role = isSelectable ? groupContext.type === "single" ? "radio" : "checkbox" : void 0;
+  const getTabIndex3 = () => {
+    if (!isSelectable || !groupContext) return void 0;
+    if (groupContext.type === "single") {
+      if (isSelected) return 0;
+      const hasSelection = groupContext.value !== void 0 && groupContext.value !== "";
+      if (!hasSelection && groupContext.chipValues[0] === value) return 0;
+      return -1;
+    }
+    return 0;
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      as: "button",
+      ref: buttonRef,
+      className: cx(classes.container, className),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      tabIndex: getTabIndex3(),
+      disabled: disabled ? true : void 0,
+      "aria-disabled": disabled ? true : void 0,
+      "aria-label": ariaLabel,
+      role,
+      "aria-checked": isSelectable ? isSelected : void 0,
+      "data-selected": isSelected ? true : void 0,
+      "data-loading": loading ? true : void 0,
+      "aria-busy": loading ? true : void 0,
+      type: "button",
+      "data-deleted": deleted ? true : void 0,
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ jsxs(HStack, { gap: gap || "4", opacity: loading ? 0 : 1, children: [
+          isMultiSelected && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "check",
+              size: iconSize,
+              className: classes.icon,
+              "aria-hidden": true
+            }
+          ),
+          before,
+          children,
+          dismissable ? /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, className: classes.icon, "aria-hidden": true }) : after
+        ] }),
+        loading && /* @__PURE__ */ jsx(
+          Grid,
+          {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            right: "0",
+            bottom: "0",
+            placeItems: "center",
+            children: /* @__PURE__ */ jsx(Spinner, {})
+          }
+        )
+      ]
+    }
+  );
+};
+const ChipGroup = ({
+  type,
+  value,
+  onChange,
+  children,
+  label: label2,
+  id,
+  name,
+  gap = "2",
+  ...props
+}) => {
+  const role = type === "single" ? "radiogroup" : "group";
+  const chipRefs = useRef(/* @__PURE__ */ new Map());
+  const chipValuesRef = useRef([]);
+  const registerChip = useCallback(
+    (chipValue, ref) => {
+      chipRefs.current.set(chipValue, ref);
+      if (!chipValuesRef.current.includes(chipValue)) {
+        chipValuesRef.current.push(chipValue);
+      }
+    },
+    []
+  );
+  const unregisterChip = useCallback((chipValue) => {
+    chipRefs.current.delete(chipValue);
+    chipValuesRef.current = chipValuesRef.current.filter((v) => v !== chipValue);
+  }, []);
+  const focusChip = useCallback(
+    (direction, currentValue) => {
+      var _a;
+      const values = chipValuesRef.current;
+      const currentIndex = values.indexOf(currentValue);
+      if (currentIndex === -1) return;
+      let nextIndex;
+      if (direction === "next") {
+        nextIndex = currentIndex === values.length - 1 ? 0 : currentIndex + 1;
+      } else {
+        nextIndex = currentIndex === 0 ? values.length - 1 : currentIndex - 1;
+      }
+      const nextValue = values[nextIndex];
+      if (nextValue) {
+        const nextRef = chipRefs.current.get(nextValue);
+        (_a = nextRef == null ? void 0 : nextRef.current) == null ? void 0 : _a.focus();
+        if (type === "single") {
+          onChange(nextValue);
+        }
+      }
+    },
+    [type, onChange]
+  );
+  return /* @__PURE__ */ jsx(
+    ChipGroupContext.Provider,
+    {
+      value: {
+        type,
+        value,
+        onChange,
+        name,
+        registerChip,
+        unregisterChip,
+        focusChip,
+        chipValues: chipValuesRef.current
+      },
+      children: /* @__PURE__ */ jsx(
+        Wrap,
+        {
+          role,
+          "aria-label": label2,
+          "aria-labelledby": id ? `${id}-label` : void 0,
+          id,
+          gap,
+          ...props,
+          children
+        }
+      )
+    }
+  );
+};
 function hasWindow() {
   return typeof window !== "undefined";
 }
@@ -8376,6 +8988,7 @@ function BreakpointIndicator() {
 }
 export {
   Autocomplete,
+  Avatar,
   Badge,
   Box,
   Breadcrumbs,
@@ -8384,6 +8997,8 @@ export {
   Card,
   Checkbox,
   CheckboxInput,
+  Chip,
+  ChipGroup,
   Code,
   Divider,
   Dropdown,