@hopper-ui/components 1.0.4 → 1.0.5

package/dist/chunk-CP4AWOFU.js

@@ -0,0 +1,81 @@
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { RichIconAvatarImageContext } from './chunk-JWW56J7M.js';
+import { RichIconContext } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./RichIconAvatarImage.module.css#css-module
+var RichIconAvatarImage_module_default = { "hop-RichIconAvatarImage": "RichIconAvatarImage-module__hop-RichIconAvatarImage___oV9WF", "hop-RichIconAvatarImage--xs": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xs___kdGVl", "hop-RichIconAvatarImage--sm": "RichIconAvatarImage-module__hop-RichIconAvatarImage--sm___4WUqP", "hop-RichIconAvatarImage--md": "RichIconAvatarImage-module__hop-RichIconAvatarImage--md___fsiew", "hop-RichIconAvatarImage--lg": "RichIconAvatarImage-module__hop-RichIconAvatarImage--lg___BJtzS", "hop-RichIconAvatarImage--xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--xl___MFhsm", "hop-RichIconAvatarImage--2xl": "RichIconAvatarImage-module__hop-RichIconAvatarImage--2xl___jFtFa", "hop-RichIconAvatarImage__icon": "RichIconAvatarImage-module__hop-RichIconAvatarImage__icon___9-bD3" };
+var GlobalRichIconAvatarImageCssSelector = "hop-RichIconAvatarImage";
+var AvatarToIconSizeAdapter = {
+  xs: "md",
+  sm: "md",
+  md: "lg",
+  lg: "xl",
+  xl: "xl",
+  "2xl": "xl"
+};
+function RichIconAvatarImage(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, RichIconAvatarImageContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    children,
+    className,
+    isDisabled,
+    style,
+    slot,
+    size: sizeValue,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeValue)) != null ? _a : "md";
+  const classNames = clsx(
+    className,
+    GlobalRichIconAvatarImageCssSelector,
+    cssModule(
+      RichIconAvatarImage_module_default,
+      "hop-RichIconAvatarImage",
+      size
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  if (!props["aria-label"] && !props["aria-labelledby"]) {
+    console.warn("An aria-label or aria-labelledby prop is required for accessibility.");
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...otherProps,
+      ref,
+      className: classNames,
+      style: mergedStyles,
+      slot: slot != null ? slot : void 0,
+      role: "img",
+      "data-disabled": isDisabled || void 0,
+      children: /* @__PURE__ */ jsx(
+        SlotProvider,
+        {
+          values: [
+            [RichIconContext, {
+              className: RichIconAvatarImage_module_default["hop-RichIconAvatarImage__icon"],
+              size: AvatarToIconSizeAdapter[size]
+            }]
+          ],
+          children
+        }
+      )
+    }
+  );
+}
+var _RichIconAvatarImage = forwardRef(RichIconAvatarImage);
+_RichIconAvatarImage.displayName = "RichIconAvatarImage";
+
+export { AvatarToIconSizeAdapter, GlobalRichIconAvatarImageCssSelector, _RichIconAvatarImage };

package/dist/{chunk-6MSYEF4W.js → chunk-F7S2I43Y.js}

@@ -9,7 +9,7 @@ import { useContextProps, composeRenderProps, Button } from 'react-aria-componen
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./EmbeddedButton.module.css#css-module
-var EmbeddedButton_module_default = { "hop-EmbeddedButton": "EmbeddedButton-module__hop-EmbeddedButton___OMar5", "hop-EmbeddedButton--md": "EmbeddedButton-module__hop-EmbeddedButton--md___YBpcJ", "hop-EmbeddedButton--lg": "EmbeddedButton-module__hop-EmbeddedButton--lg___dFa3L", "hop-EmbeddedButton__icon": "EmbeddedButton-module__hop-EmbeddedButton__icon___QZTts" };
+var EmbeddedButton_module_default = { "hop-EmbeddedButton": "EmbeddedButton-module__hop-EmbeddedButton___aWxfX", "hop-EmbeddedButton--md": "EmbeddedButton-module__hop-EmbeddedButton--md___MHkDZ", "hop-EmbeddedButton--lg": "EmbeddedButton-module__hop-EmbeddedButton--lg___hXT2I", "hop-EmbeddedButton__icon": "EmbeddedButton-module__hop-EmbeddedButton__icon___XoFBK" };
 var GlobalEmbeddedButtonCssSelector = "hop-EmbeddedButton";
 function EmbeddedButton(props, ref) {
   var _a;

package/dist/chunk-FYDLV5BM.js

@@ -0,0 +1,46 @@
+import { AvatarContext } from './chunk-AES7QBQE.js';
+import { _RichIconAvatarImage } from './chunk-CP4AWOFU.js';
+import { AnonymousRichIcon } from '@hopper-ui/icons';
+import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { useContextProps } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+var GlobalAnonymousAvatarCssSelector = "hop-AnonymousAvatar";
+function AnonymousAvatar(props, ref) {
+  var _a;
+  [props, ref] = useContextProps(props, ref, AvatarContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const {
+    className,
+    size: sizeValue,
+    style,
+    ...otherProps
+  } = ownProps;
+  const size = (_a = useResponsiveValue(sizeValue)) != null ? _a : "md";
+  const classNames = clsx(
+    className,
+    GlobalAnonymousAvatarCssSelector,
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...stylingProps.style,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    _RichIconAvatarImage,
+    {
+      ...otherProps,
+      className: classNames,
+      ref,
+      size,
+      style: mergedStyles,
+      children: /* @__PURE__ */ jsx(AnonymousRichIcon, {})
+    }
+  );
+}
+var _AnonymousAvatar = forwardRef(AnonymousAvatar);
+_AnonymousAvatar.displayName = "AnonymousAvatar";
+
+export { GlobalAnonymousAvatarCssSelector, _AnonymousAvatar };

package/dist/{chunk-OMBQ3J4O.js → chunk-GELM73MQ.js}

@@ -1,12 +1,12 @@
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { _Text } from './chunk-WGDP4ECF.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { _Text } from './chunk-7Q7VIED2.js';
 import { ClearContainerSlots } from './chunk-HXI3MEEK.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
-import { IconListContext } from './chunk-DHVVYSLB.js';
 import { MinusIcon, CheckmarkIcon, IconContext } from '@hopper-ui/icons';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import { forwardRef } from 'react';
@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, Checkbox as Checkbox$1 } from 'rea
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // css-module:./Checkbox.module.css#css-module
-var Checkbox_module_default = { "hop-Checkbox": "Checkbox-module__hop-Checkbox___MrfEd", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___2-ZcA", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___OXH4N", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___TlqDF", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___4NMA8", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___xk3k3", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___2zKRr", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___Ldp1m" };
+var Checkbox_module_default = { "hop-Checkbox": "Checkbox-module__hop-Checkbox___UXMSX", "hop-Checkbox--sm": "Checkbox-module__hop-Checkbox--sm___reHt-", "hop-Checkbox--md": "Checkbox-module__hop-Checkbox--md___TaQ-X", "hop-Checkbox__icon": "Checkbox-module__hop-Checkbox__icon___7Azr1", "hop-Checkbox__icon-list": "Checkbox-module__hop-Checkbox__icon-list___dm1GP", "hop-Checkbox__box": "Checkbox-module__hop-Checkbox__box___TVJjj", "hop-Checkbox__check": "Checkbox-module__hop-Checkbox__check___32rNl", "hop-Checkbox__text": "Checkbox-module__hop-Checkbox__text___dsqyq" };
 var GlobalCheckboxCssSelector = "hop-Checkbox";
 function Checkbox(props, ref) {
   var _a;

package/dist/chunk-GFHBDUJD.js

@@ -0,0 +1,17 @@
+import { getSizingValue } from '@hopper-ui/styled-system';
+
+// src/layout/src/grid-helpers.ts
+function repeat(count, repetition) {
+  return `repeat(${count}, ${Array.isArray(repetition) ? interpolateGridTemplateArray(repetition) : getSizingValue(repetition)})`;
+}
+function minmax(min, max) {
+  return `minmax(${getSizingValue(min)}, ${getSizingValue(max)})`;
+}
+function fitContent(dimension) {
+  return `fit-content(${getSizingValue(dimension)})`;
+}
+function interpolateGridTemplateArray(values) {
+  return values.map((x) => getSizingValue(x)).join(" ");
+}
+
+export { fitContent, minmax, repeat };

package/dist/{chunk-DZTMUFVC.js → chunk-GWEUWPLT.js}

@@ -9,7 +9,7 @@ import { useContextProps, useSlottedContext, InputContext, composeRenderProps, G
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./InputGroup.module.css#css-module
-var InputGroup_module_default = { "hop-InputGroup": "InputGroup-module__hop-InputGroup___CKcpQ", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___hNp-0", "hop-InputGroup--sm": "InputGroup-module__hop-InputGroup--sm___-jfQQ", "hop-InputGroup__input": "InputGroup-module__hop-InputGroup__input___Di67W" };
+var InputGroup_module_default = { "hop-InputGroup": "InputGroup-module__hop-InputGroup___e9z-X", "hop-InputGroup--fluid": "InputGroup-module__hop-InputGroup--fluid___8BiWy", "hop-InputGroup--sm": "InputGroup-module__hop-InputGroup--sm___fqMJ7", "hop-InputGroup__input": "InputGroup-module__hop-InputGroup__input___GP9M7" };
 var GlobalInputGroupCssSelector = "hop-InputGroup";
 function InputGroup(props, ref) {
   var _a, _b;

package/dist/{chunk-GBABMUAI.js → chunk-IIZECZAH.js}

@@ -1,5 +1,5 @@
 import { HelperMessageContext } from './chunk-ESVVLTEN.js';
-import { _Text } from './chunk-WGDP4ECF.js';
+import { _Text } from './chunk-7Q7VIED2.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { InfoIcon } from '@hopper-ui/icons';
 import { useStyledSystem } from '@hopper-ui/styled-system';
@@ -9,7 +9,7 @@ import { useContextProps, FieldErrorContext } from 'react-aria-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // css-module:./HelperMessage.module.css#css-module
-var HelperMessage_module_default = { "hop-HelperMessage": "HelperMessage-module__hop-HelperMessage___VrfVI", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___mVrpO" };
+var HelperMessage_module_default = { "hop-HelperMessage": "HelperMessage-module__hop-HelperMessage___S3jpD", "hop-HelperMessage__icon": "HelperMessage-module__hop-HelperMessage__icon___bbmtR" };
 var GlobalHelperMessageCssSelector = "hop-HelperMessage";
 function HelperMessage(props, ref) {
   const validation = useContext(FieldErrorContext);

package/dist/chunk-JWW56J7M.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+// src/Avatar/src/RichIconAvatarImageContext.ts
+var RichIconAvatarImageContext = createContext({});
+RichIconAvatarImageContext.displayName = "RichIconAvatarImageContext";
+
+export { RichIconAvatarImageContext };

package/dist/{chunk-RCFB4SN4.js → chunk-KOA2CREJ.js}

@@ -1,11 +1,11 @@
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { _Text } from './chunk-WGDP4ECF.js';
-import { TextContext } from './chunk-X6SER3TZ.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
-import { cssModule } from './chunk-KVDXQMWI.js';
-import { SlotProvider } from './chunk-M36KANKC.js';
 import { IconListContext } from './chunk-DHVVYSLB.js';
 import { LinkContext } from './chunk-4VVNSXIB.js';
+import { _Text } from './chunk-7Q7VIED2.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
 import { IconContext } from '@hopper-ui/icons';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import { forwardRef } from 'react';
@@ -13,7 +13,7 @@ import { useContextProps, composeRenderProps, DEFAULT_SLOT, Link as Link$1 } fro
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Link.module.css#css-module
-var Link_module_default = { "hop-Link": "Link-module__hop-Link___aLbeK", "hop-Link--quiet": "Link-module__hop-Link--quiet___7n7m5", "hop-Link--primary": "Link-module__hop-Link--primary___-xcuv", "hop-Link--secondary": "Link-module__hop-Link--secondary___4z2HJ", "hop-Link__icon": "Link-module__hop-Link__icon___Y38KO", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___4UNng", "hop-Link__text": "Link-module__hop-Link__text___RyiFE", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___Z6aUG", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___wmb1h" };
+var Link_module_default = { "hop-Link": "Link-module__hop-Link___UXQIE", "hop-Link--quiet": "Link-module__hop-Link--quiet___wGnRL", "hop-Link--primary": "Link-module__hop-Link--primary___ti1DR", "hop-Link--secondary": "Link-module__hop-Link--secondary___WUbS9", "hop-Link__icon": "Link-module__hop-Link__icon___4hTxA", "hop-Link__icon-list": "Link-module__hop-Link__icon-list___4mwdq", "hop-Link__text": "Link-module__hop-Link__text___zwfdO", "hop-Link__start-icon": "Link-module__hop-Link__start-icon___qb39L", "hop-Link__start-icon-list": "Link-module__hop-Link__start-icon-list___2OqTa" };
 var GlobalLinkCssSelector = "hop-Link";
 var LinkToIconSizeAdapter = {
   inherit: void 0,

package/dist/{chunk-PEPKE5SW.js → chunk-KOJGCQ3F.js}

@@ -1,10 +1,10 @@
 import { ChipContext } from './chunk-WTKIUAHI.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { _Text } from './chunk-WGDP4ECF.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { _Text } from './chunk-7Q7VIED2.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
-import { IconListContext } from './chunk-DHVVYSLB.js';
 import { IconContext } from '@hopper-ui/icons';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import clsx from 'clsx';
@@ -13,7 +13,7 @@ import { useContextProps, DEFAULT_SLOT } from 'react-aria-components';
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./Chip.module.css#css-module
-var Chip_module_default = { "hop-Chip": "Chip-module__hop-Chip___224kd", "hop-Chip--xs": "Chip-module__hop-Chip--xs___vVaFu", "hop-Chip--sm": "Chip-module__hop-Chip--sm___ay2-7", "hop-Chip--md": "Chip-module__hop-Chip--md___bPrjx", "hop-Chip--lg": "Chip-module__hop-Chip--lg___Ep8YA", "hop-Chip--neutral": "Chip-module__hop-Chip--neutral___iuOzW", "hop-Chip--progress": "Chip-module__hop-Chip--progress___TNwPo", "hop-Chip--positive": "Chip-module__hop-Chip--positive___s28s9", "hop-Chip--caution": "Chip-module__hop-Chip--caution___cWFT2", "hop-Chip--negative": "Chip-module__hop-Chip--negative___jBX4e", "hop-Chip--option1": "Chip-module__hop-Chip--option1___O1niF", "hop-Chip--option2": "Chip-module__hop-Chip--option2___a-gEh", "hop-Chip--option3": "Chip-module__hop-Chip--option3___9wALH", "hop-Chip--option4": "Chip-module__hop-Chip--option4___wF9tQ", "hop-Chip--option5": "Chip-module__hop-Chip--option5___zSGD-", "hop-Chip--option6": "Chip-module__hop-Chip--option6___jgB-E", "hop-Chip--inactive": "Chip-module__hop-Chip--inactive___YRaw7", "hop-Chip--disabled": "Chip-module__hop-Chip--disabled___LKrv0", "hop-Chip__icon": "Chip-module__hop-Chip__icon___YPNfW", "hop-Chip__icon-list": "Chip-module__hop-Chip__icon-list___gWAUM", "hop-Chip__text": "Chip-module__hop-Chip__text___XGH1R", "hop-Chip__end-icon": "Chip-module__hop-Chip__end-icon___Gr-pd", "hop-Chip__end-icon-list": "Chip-module__hop-Chip__end-icon-list___OCPtE" };
+var Chip_module_default = { "hop-Chip": "Chip-module__hop-Chip___cxU82", "hop-Chip--xs": "Chip-module__hop-Chip--xs___MPhiR", "hop-Chip--sm": "Chip-module__hop-Chip--sm___OYijB", "hop-Chip--md": "Chip-module__hop-Chip--md___-CMix", "hop-Chip--lg": "Chip-module__hop-Chip--lg___j1jM1", "hop-Chip--neutral": "Chip-module__hop-Chip--neutral___kLtLJ", "hop-Chip--progress": "Chip-module__hop-Chip--progress___5GBF8", "hop-Chip--positive": "Chip-module__hop-Chip--positive___F-3cU", "hop-Chip--caution": "Chip-module__hop-Chip--caution___ezAXo", "hop-Chip--negative": "Chip-module__hop-Chip--negative___SrEHc", "hop-Chip--option1": "Chip-module__hop-Chip--option1___TNAVL", "hop-Chip--option2": "Chip-module__hop-Chip--option2___WFy37", "hop-Chip--option3": "Chip-module__hop-Chip--option3___qYEVE", "hop-Chip--option4": "Chip-module__hop-Chip--option4___MHav7", "hop-Chip--option5": "Chip-module__hop-Chip--option5___Y-i-5", "hop-Chip--option6": "Chip-module__hop-Chip--option6___qTRX9", "hop-Chip--inactive": "Chip-module__hop-Chip--inactive___vSk80", "hop-Chip--disabled": "Chip-module__hop-Chip--disabled___175zy", "hop-Chip__icon": "Chip-module__hop-Chip__icon___yyVQ2", "hop-Chip__icon-list": "Chip-module__hop-Chip__icon-list___fSAV6", "hop-Chip__text": "Chip-module__hop-Chip__text___hO2-Q", "hop-Chip__end-icon": "Chip-module__hop-Chip__end-icon___thI6k", "hop-Chip__end-icon-list": "Chip-module__hop-Chip__end-icon-list___sNXbx" };
 var GlobalChipCssSelector = "hop-Chip";
 var ChipToTextSizeAdapter = {
   xs: "xs",

package/dist/{chunk-LSVXKVG4.js → chunk-KQPY2D3P.js}

@@ -14,7 +14,7 @@ import { useContextProps, composeRenderProps, CheckboxGroup as CheckboxGroup$1 }
 import { jsx } from 'react/jsx-runtime';
 
 // css-module:./CheckboxGroup.module.css#css-module
-var CheckboxGroup_module_default = { "hop-CheckboxGroup": "CheckboxGroup-module__hop-CheckboxGroup___yIO9B", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___ROzTE", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___5T2Lo", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___BZM-X", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___WVEIT", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___O5Smt", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___LRZIN", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___LUFIK", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___PUjTi" };
+var CheckboxGroup_module_default = { "hop-CheckboxGroup": "CheckboxGroup-module__hop-CheckboxGroup___RPSFN", "hop-CheckboxGroup--bordered": "CheckboxGroup-module__hop-CheckboxGroup--bordered___JQ1vq", "hop-CheckboxGroup--sm": "CheckboxGroup-module__hop-CheckboxGroup--sm___toUIA", "hop-CheckboxGroup--md": "CheckboxGroup-module__hop-CheckboxGroup--md___WTdo9", "hop-CheckboxGroup__label": "CheckboxGroup-module__hop-CheckboxGroup__label___03x3Q", "hop-CheckboxGroup__list": "CheckboxGroup-module__hop-CheckboxGroup__list___Q9VIf", "hop-CheckboxGroup__checkbox": "CheckboxGroup-module__hop-CheckboxGroup__checkbox___dEHSn", "hop-CheckboxGroup__error-message": "CheckboxGroup-module__hop-CheckboxGroup__error-message___EKYu4", "hop-CheckboxGroup__helper-message": "CheckboxGroup-module__hop-CheckboxGroup__helper-message___gDUBN" };
 var GlobalCheckboxGroupCssSelector = "hop-CheckboxGroup";
 function CheckboxGroup(props, ref) {
   var _a, _b;

package/dist/{chunk-Y3L6TPP3.js → chunk-LUAIMTPE.js}

@@ -1,15 +1,15 @@
 import { useSlot } from './chunk-H5YTU3U7.js';
 import { useRenderProps } from './chunk-NH3IVMXB.js';
 import { useLocalizedString } from './chunk-H6CDFWVR.js';
-import { _Spinner } from './chunk-Y7XWWUMU.js';
+import { _Spinner } from './chunk-BVGKXCQH.js';
 import { ButtonContext } from './chunk-WMTWFKKP.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { _Text } from './chunk-WGDP4ECF.js';
-import { TextContext } from './chunk-X6SER3TZ.js';
 import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { _Text } from './chunk-7Q7VIED2.js';
+import { TextContext } from './chunk-X6SER3TZ.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
-import { IconListContext } from './chunk-DHVVYSLB.js';
 import { IconContext } from '@hopper-ui/icons';
 import { slot, useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
 import { chain, filterDOMProps, useRouter, shouldClientNavigate } from '@react-aria/utils';
@@ -19,7 +19,7 @@ import { useContextProps, ButtonContext as ButtonContext$1, composeRenderProps,
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // css-module:./Button.module.css#css-module
-var Button_module_default = { "hop-Button": "Button-module__hop-Button___0QG7O", "hop-Button--icon-only": "Button-module__hop-Button--icon-only___nE-Ma", "hop-Button--fluid": "Button-module__hop-Button--fluid___SC33v", "hop-Button--sm": "Button-module__hop-Button--sm___QU3Uy", "hop-Button--primary": "Button-module__hop-Button--primary___YcboG", "hop-Button--md": "Button-module__hop-Button--md___yg8Fl", "hop-Button--secondary": "Button-module__hop-Button--secondary___gylFe", "hop-Button--upsell": "Button-module__hop-Button--upsell___ddBGK", "hop-Button--danger": "Button-module__hop-Button--danger___aosRA", "hop-Button--ghost-danger": "Button-module__hop-Button--ghost-danger___dxJKj", "hop-Button--ghost-secondary": "Button-module__hop-Button--ghost-secondary___CkcMt", "hop-Button--ghost-primary": "Button-module__hop-Button--ghost-primary___qiCJB", "hop-Button__Spinner": "Button-module__hop-Button__Spinner___V265i", "hop-Button__icon": "Button-module__hop-Button__icon___mwjgX", "hop-Button__icon-list": "Button-module__hop-Button__icon-list___5kDpy", "hop-Button__text": "Button-module__hop-Button__text___YEnli", "hop-Button__end-icon": "Button-module__hop-Button__end-icon___1Hzgu", "hop-Button__end-icon-list": "Button-module__hop-Button__end-icon-list___ZjiCH" };
+var Button_module_default = { "hop-Button": "Button-module__hop-Button___omxTR", "hop-Button--icon-only": "Button-module__hop-Button--icon-only___mAijh", "hop-Button--fluid": "Button-module__hop-Button--fluid___tJx6A", "hop-Button--sm": "Button-module__hop-Button--sm___jBmjK", "hop-Button--primary": "Button-module__hop-Button--primary___GiYHc", "hop-Button--md": "Button-module__hop-Button--md___azhbR", "hop-Button--secondary": "Button-module__hop-Button--secondary___W9BWc", "hop-Button--upsell": "Button-module__hop-Button--upsell___RGRcm", "hop-Button--danger": "Button-module__hop-Button--danger___yqtna", "hop-Button--ghost-danger": "Button-module__hop-Button--ghost-danger___I3F3m", "hop-Button--ghost-secondary": "Button-module__hop-Button--ghost-secondary___kosyt", "hop-Button--ghost-primary": "Button-module__hop-Button--ghost-primary___fmoef", "hop-Button__Spinner": "Button-module__hop-Button__Spinner___Ib9EV", "hop-Button__icon": "Button-module__hop-Button__icon___zdZvL", "hop-Button__icon-list": "Button-module__hop-Button__icon-list___QHAI7", "hop-Button__text": "Button-module__hop-Button__text___NfHmc", "hop-Button__end-icon": "Button-module__hop-Button__end-icon___exbfl", "hop-Button__end-icon-list": "Button-module__hop-Button__end-icon-list___yyYdR" };
 var GlobalButtonCssSelector = "hop-Button";
 var additionalButtonHTMLAttributes = /* @__PURE__ */ new Set(["form", "formAction", "formEncType", "formMethod", "formNoValidate", "formTarget", "name", "value"]);
 function useSimulatedRACButton(props, ref) {

package/dist/{chunk-Z3ID4UEE.js → chunk-N77LTZ4U.js}

@@ -1,4 +1,4 @@
-import { Div, getSizingValue } from '@hopper-ui/styled-system';
+import { Div } from '@hopper-ui/styled-system';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -37,19 +37,7 @@ function Grid(props, ref) {
     }
   );
 }
-function repeat(count, repetition) {
-  return `repeat(${count}, ${Array.isArray(repetition) ? interpolateGridTemplateArray(repetition) : getSizingValue(repetition)})`;
-}
-function minmax(min, max) {
-  return `minmax(${getSizingValue(min)}, ${getSizingValue(max)})`;
-}
-function fitContent(dimension) {
-  return `fit-content(${getSizingValue(dimension)})`;
-}
-function interpolateGridTemplateArray(values) {
-  return values.map((x) => getSizingValue(x)).join(" ");
-}
 var _Grid = forwardRef(Grid);
-_Grid.displayName = "Inline";
+_Grid.displayName = "Grid";
 
-export { _Grid, fitContent, minmax, repeat };
+export { _Grid };

package/dist/chunk-NS3XVOQ7.js

@@ -0,0 +1,53 @@
+import { useIsomorphicLayoutEffect } from '@hopper-ui/styled-system';
+import { useState, useRef, useCallback } from 'react';
+
+// src/Avatar/src/useImageFallback.ts
+function useImageFallback(props) {
+  const { src, fallbackSrc, onError, onLoad } = props;
+  const [status, setStatus] = useState(src ? "loading" : "pending");
+  const [imageUrl, setImageUrl] = useState(src != null ? src : "");
+  const imageRef = useRef();
+  const load = useCallback(() => {
+    if (!src) {
+      return;
+    }
+    flush();
+    const image = new Image();
+    image.src = src;
+    setImageUrl(src);
+    image.onload = (event) => {
+      flush();
+      setStatus("loaded");
+      onLoad == null ? void 0 : onLoad(event);
+    };
+    image.onerror = (event) => {
+      if (src !== fallbackSrc && image.src === src && fallbackSrc) {
+        setImageUrl(fallbackSrc);
+        image.src = fallbackSrc;
+      } else {
+        setStatus("failed");
+        flush();
+      }
+      onError == null ? void 0 : onError(event);
+    };
+    imageRef.current = image;
+  }, [src, onLoad, fallbackSrc, onError]);
+  const flush = () => {
+    if (imageRef.current) {
+      imageRef.current.onload = null;
+      imageRef.current.onerror = null;
+      imageRef.current = null;
+    }
+  };
+  useIsomorphicLayoutEffect(() => {
+    if (status === "loading") {
+      load();
+    }
+    return () => {
+      flush();
+    };
+  }, [status, load]);
+  return { imageUrl, status };
+}
+
+export { useImageFallback };

package/dist/{chunk-SWMFTL46.js → chunk-NXNV5JDN.js}

@@ -1,75 +1,82 @@
 import { HeadingContext } from './chunk-TXZ6BMFR.js';
 import { isArray, isDefined, isEmptyArray, isFunction, isNil, isNilOrEmpty, isNull, isNumber, isObject, isPlainObject, isPromise, isString, isUndefined } from './chunk-TIPN4VYD.js';
-import { GlobalTagGroupCssSelector, _TagGroup } from './chunk-FGDSWA7S.js';
+import { GlobalSwitchFieldCssSelector, _SwitchField } from './chunk-THCG3QCD.js';
+import { SwitchFieldContext } from './chunk-H7VJS4MX.js';
+import { GlobalTagGroupCssSelector, _TagGroup } from './chunk-6WWYES56.js';
 import { TagContext } from './chunk-EWMWQ2MC.js';
 import { TagGroupContext } from './chunk-LCAS3YQV.js';
 import { GlobalTagListCssSelector, _TagList } from './chunk-WWRB4K4M.js';
 import { TagListContext } from './chunk-XLKYXKWE.js';
-import { GlobalRadioGroupCssSelector, _RadioGroup } from './chunk-PDYU6DNF.js';
+import { GlobalRadioGroupCssSelector, _RadioGroup } from './chunk-W2SKBBWE.js';
 import { RadioGroupContext } from './chunk-5MBJWRZD.js';
 import { GlobalRadioListCssSelector, _RadioList } from './chunk-NKHMUPAP.js';
 import { RadioListContext } from './chunk-A7TZHALP.js';
-import { GlobalSwitchCssSelector, _Switch } from './chunk-ZAJJD5FY.js';
-import { GlobalSwitchFieldCssSelector, _SwitchField } from './chunk-N745TDH5.js';
-import { SwitchFieldContext } from './chunk-H7VJS4MX.js';
+import { GlobalSwitchCssSelector, _Switch } from './chunk-T6VFQSII.js';
 import { SwitchContext } from './chunk-YHBJAXUY.js';
-import { _Grid, fitContent, minmax, repeat } from './chunk-Z3ID4UEE.js';
+import { _Grid } from './chunk-N77LTZ4U.js';
 import { _Inline } from './chunk-Y7HUXUHX.js';
 import { _Stack } from './chunk-D6UTDI2K.js';
-import { GlobalRadioCssSelector, _Radio } from './chunk-BGESEKEN.js';
-import { GlobalRadioFieldCssSelector, _RadioField } from './chunk-TSXPLL55.js';
-import { RadioContext } from './chunk-FU5CCPLP.js';
+import { fitContent, minmax, repeat } from './chunk-GFHBDUJD.js';
+import { GlobalRadioCssSelector, _Radio } from './chunk-BD53A2LL.js';
+import { GlobalRadioFieldCssSelector, _RadioField } from './chunk-UYVKDU2W.js';
 import { RadioFieldContext } from './chunk-DGLAGYBD.js';
+import { RadioContext } from './chunk-FU5CCPLP.js';
 import { _Content, GlobalContentCssSelector } from './chunk-GXBVNCVP.js';
 import { ContentContext } from './chunk-IXB2WK56.js';
 import { _Flex } from './chunk-TVFC2MJ4.js';
 import { _Footer, GlobalFooterCssSelector } from './chunk-AQITZWYM.js';
 import { FooterContext } from './chunk-I67NHYK4.js';
-import { _Chip, GlobalChipCssSelector } from './chunk-PEPKE5SW.js';
+import { _Chip, GlobalChipCssSelector } from './chunk-KOJGCQ3F.js';
 import { ChipContext } from './chunk-WTKIUAHI.js';
-import { _ErrorMessage, GlobalErrorMessageCssSelector } from './chunk-QJBQRYJS.js';
-import { GlobalHelperMessageCssSelector, _HelperMessage } from './chunk-GBABMUAI.js';
-import { _CheckboxField, GlobalCheckboxFieldCssSelector } from './chunk-XSASR6CK.js';
-import { _CheckboxGroup, GlobalCheckboxGroupCssSelector } from './chunk-LSVXKVG4.js';
+import { _ErrorMessage, GlobalErrorMessageCssSelector } from './chunk-22YUFCHD.js';
+import { GlobalHelperMessageCssSelector, _HelperMessage } from './chunk-IIZECZAH.js';
+import { _CheckboxField, GlobalCheckboxFieldCssSelector } from './chunk-WFPCHFJI.js';
+import { _CheckboxGroup, GlobalCheckboxGroupCssSelector } from './chunk-KQPY2D3P.js';
 import { ErrorMessageContext } from './chunk-ACVMW6YD.js';
 import { HelperMessageContext } from './chunk-ESVVLTEN.js';
 import { CheckboxFieldContext } from './chunk-ZGNK4GWA.js';
 import { CheckboxGroupContext } from './chunk-N7YDPVZL.js';
 import { _CheckboxList, GlobalCheckboxListCssSelector } from './chunk-3LRBUQC2.js';
 import { CheckboxListContext } from './chunk-WDUQUPTE.js';
-import { _ButtonGroup, GlobalButtonGroupCssSelector } from './chunk-HDYG2F3D.js';
+import { _ButtonGroup, GlobalButtonGroupCssSelector } from './chunk-TM6742MU.js';
 import { ButtonGroupContext } from './chunk-VJQ7M2BK.js';
-import { _ClearButton, GlobalClearButtonCssSelector } from './chunk-5GRWAXTT.js';
+import { _ClearButton, GlobalClearButtonCssSelector } from './chunk-P7JRKXBD.js';
 import { ClearButtonContext } from './chunk-DXVKHP4V.js';
-import { _EmbeddedButton, GlobalEmbeddedButtonCssSelector } from './chunk-6MSYEF4W.js';
+import { _EmbeddedButton, GlobalEmbeddedButtonCssSelector } from './chunk-F7S2I43Y.js';
 import { EmbeddedButtonContext } from './chunk-O7IJYNVQ.js';
-import { _Checkbox, GlobalCheckboxCssSelector } from './chunk-OMBQ3J4O.js';
+import { _Checkbox, GlobalCheckboxCssSelector } from './chunk-GELM73MQ.js';
 import { CheckboxContext } from './chunk-2EAZPH3M.js';
-import { _Badge, GlobalBadgeCssSelector } from './chunk-LRXYIR2A.js';
-import { GlobalOverlineTextCssSelector, _OverlineText } from './chunk-BCHUEONM.js';
+import { _Badge, GlobalBadgeCssSelector } from './chunk-WNVTTHBK.js';
+import { GlobalOverlineTextCssSelector, _OverlineText } from './chunk-3IEED7AY.js';
 import { OverlineTextContext } from './chunk-WPNVVGFW.js';
 import { BadgeContext } from './chunk-ZSFJVMJN.js';
-import { _Button, GlobalButtonCssSelector } from './chunk-Y3L6TPP3.js';
+import { _Button, GlobalButtonCssSelector } from './chunk-LUAIMTPE.js';
 import { useSlot } from './chunk-H5YTU3U7.js';
 import { useRenderProps } from './chunk-NH3IVMXB.js';
 import { useLocalizedString } from './chunk-H6CDFWVR.js';
-import { GlobalSpinnerCssSelector, _Spinner } from './chunk-Y7XWWUMU.js';
-import { GlobalLabelCssSelector, _Label } from './chunk-2CKDJG6R.js';
+import { GlobalSpinnerCssSelector, _Spinner } from './chunk-BVGKXCQH.js';
+import { GlobalLabelCssSelector, _Label } from './chunk-5F5CWOM4.js';
 import { LabelContext } from './chunk-QCA3ZR56.js';
 import { SpinnerContext } from './chunk-4ZYV2XLW.js';
 import { ButtonContext } from './chunk-WMTWFKKP.js';
 import { GlobalHopperProviderCssSelector, _HopperProvider } from './chunk-ANVMQBBG.js';
-import { GlobalIconListCssSelector, _IconList } from './chunk-F7HR3VI4.js';
-import { GlobalLinkCssSelector, _Link } from './chunk-RCFB4SN4.js';
+import { GlobalIconListCssSelector, _IconList } from './chunk-3OWQHIJ6.js';
+import { GlobalLinkCssSelector, _Link } from './chunk-KOA2CREJ.js';
 import { isTextOnlyChildren } from './chunk-ZWU6DRRZ.js';
-import { GlobalTextCssSelector, _Text } from './chunk-WGDP4ECF.js';
+import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { IconListContext } from './chunk-DHVVYSLB.js';
+import { LinkContext } from './chunk-4VVNSXIB.js';
+import { _AnonymousAvatar, GlobalAnonymousAvatarCssSelector } from './chunk-FYDLV5BM.js';
+import { _Avatar, AvatarToTextSizeAdapter, GlobalAvatarCssSelector } from './chunk-OPFRM3JC.js';
+import { GlobalTextCssSelector, _Text } from './chunk-7Q7VIED2.js';
 import { ClearContainerSlots, ClearProviders } from './chunk-HXI3MEEK.js';
 import { TextContext } from './chunk-X6SER3TZ.js';
-import { composeClassnameRenderProps } from './chunk-65JPI4FL.js';
+import { _DeletedAvatar, GlobalDeletedAvatarCssSelector } from './chunk-Z33QZKRG.js';
+import { AvatarContext } from './chunk-AES7QBQE.js';
+import { AvatarToIconSizeAdapter, GlobalRichIconAvatarImageCssSelector, _RichIconAvatarImage } from './chunk-CP4AWOFU.js';
 import { cssModule } from './chunk-KVDXQMWI.js';
 import { SlotProvider } from './chunk-M36KANKC.js';
-import { IconListContext } from './chunk-DHVVYSLB.js';
-import { LinkContext } from './chunk-4VVNSXIB.js';
+import { RichIconAvatarImageContext } from './chunk-JWW56J7M.js';
 import { __export, __reExport } from './chunk-2P3A4VVY.js';
 import * as styled_system_star from '@hopper-ui/styled-system';
 import { useStyledSystem, useResponsiveValue } from '@hopper-ui/styled-system';
@@ -82,6 +89,11 @@ import { IconContext } from '@hopper-ui/icons';
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  AnonymousAvatar: () => _AnonymousAvatar,
+  Avatar: () => _Avatar,
+  AvatarContext: () => AvatarContext,
+  AvatarToIconSizeAdapter: () => AvatarToIconSizeAdapter,
+  AvatarToTextSizeAdapter: () => AvatarToTextSizeAdapter,
   Badge: () => _Badge,
   BadgeContext: () => BadgeContext,
   Button: () => _Button,
@@ -104,6 +116,7 @@ __export(src_exports, {
   ClearProviders: () => ClearProviders,
   Content: () => _Content,
   ContentContext: () => ContentContext,
+  DeletedAvatar: () => _DeletedAvatar,
   EmbeddedButton: () => _EmbeddedButton,
   EmbeddedButtonContext: () => EmbeddedButtonContext,
   ErrorMessage: () => _ErrorMessage,
@@ -111,6 +124,8 @@ __export(src_exports, {
   Flex: () => _Flex,
   Footer: () => _Footer,
   FooterContext: () => FooterContext,
+  GlobalAnonymousAvatarCssSelector: () => GlobalAnonymousAvatarCssSelector,
+  GlobalAvatarCssSelector: () => GlobalAvatarCssSelector,
   GlobalBadgeCssSelector: () => GlobalBadgeCssSelector,
   GlobalButtonCssSelector: () => GlobalButtonCssSelector,
   GlobalButtonGroupCssSelector: () => GlobalButtonGroupCssSelector,
@@ -121,6 +136,7 @@ __export(src_exports, {
   GlobalChipCssSelector: () => GlobalChipCssSelector,
   GlobalClearButtonCssSelector: () => GlobalClearButtonCssSelector,
   GlobalContentCssSelector: () => GlobalContentCssSelector,
+  GlobalDeletedAvatarCssSelector: () => GlobalDeletedAvatarCssSelector,
   GlobalEmbeddedButtonCssSelector: () => GlobalEmbeddedButtonCssSelector,
   GlobalErrorMessageCssSelector: () => GlobalErrorMessageCssSelector,
   GlobalFooterCssSelector: () => GlobalFooterCssSelector,
@@ -135,6 +151,7 @@ __export(src_exports, {
   GlobalRadioFieldCssSelector: () => GlobalRadioFieldCssSelector,
   GlobalRadioGroupCssSelector: () => GlobalRadioGroupCssSelector,
   GlobalRadioListCssSelector: () => GlobalRadioListCssSelector,
+  GlobalRichIconAvatarImageCssSelector: () => GlobalRichIconAvatarImageCssSelector,
   GlobalSpinnerCssSelector: () => GlobalSpinnerCssSelector,
   GlobalSwitchCssSelector: () => GlobalSwitchCssSelector,
   GlobalSwitchFieldCssSelector: () => GlobalSwitchFieldCssSelector,
@@ -171,6 +188,8 @@ __export(src_exports, {
   RadioGroupContext: () => RadioGroupContext,
   RadioList: () => _RadioList,
   RadioListContext: () => RadioListContext,
+  RichIconAvatarImage: () => _RichIconAvatarImage,
+  RichIconAvatarImageContext: () => RichIconAvatarImageContext,
   SlotProvider: () => SlotProvider,
   Spinner: () => _Spinner,
   SpinnerContext: () => SpinnerContext,
@@ -211,7 +230,7 @@ __export(src_exports, {
 });
 
 // css-module:./Heading.module.css#css-module
-var Heading_module_default = { "hop-Heading": "Heading-module__hop-Heading___Q3-KC", "hop-Heading--xs": "Heading-module__hop-Heading--xs___7idA2", "hop-Heading--sm": "Heading-module__hop-Heading--sm___tKfS2", "hop-Heading--md": "Heading-module__hop-Heading--md___EZDa1", "hop-Heading--lg": "Heading-module__hop-Heading--lg___wONbp", "hop-Heading--xl": "Heading-module__hop-Heading--xl___jZufr", "hop-Heading--2xl": "Heading-module__hop-Heading--2xl___UHXYW", "hop-Heading--3xl": "Heading-module__hop-Heading--3xl___f817X" };
+var Heading_module_default = { "hop-Heading": "Heading-module__hop-Heading___N6RDM", "hop-Heading--xs": "Heading-module__hop-Heading--xs___PspSb", "hop-Heading--sm": "Heading-module__hop-Heading--sm___I-Ypn", "hop-Heading--md": "Heading-module__hop-Heading--md___bJB6G", "hop-Heading--lg": "Heading-module__hop-Heading--lg___NYsEb", "hop-Heading--xl": "Heading-module__hop-Heading--xl___K-lV8", "hop-Heading--2xl": "Heading-module__hop-Heading--2xl___Uxjjw", "hop-Heading--3xl": "Heading-module__hop-Heading--3xl___YLUEv" };
 var GlobalHeadingCssSelector = "hop-Heading";
 function Heading(props, ref) {
   [props, ref] = useContextProps(props, ref, HeadingContext);
@@ -262,7 +281,7 @@ var H6 = createHeading("h6");
 __reExport(src_exports, styled_system_star);
 
 // css-module:./Tag.module.css#css-module
-var Tag_module_default = { "hop-Tag": "Tag-module__hop-Tag___7-wrs", "hop-Tag--md": "Tag-module__hop-Tag--md___WMt5B", "hop-Tag__icon": "Tag-module__hop-Tag__icon___5WFui", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___bWXWD", "hop-Tag__badge": "Tag-module__hop-Tag__badge___d16x6", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___UFMPy", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___MVzwl", "hop-Tag--lg": "Tag-module__hop-Tag--lg___8WdhU", "hop-Tag__text": "Tag-module__hop-Tag__text___kf8E-", "hop-Badge--secondary": "Tag-module__hop-Badge--secondary___nwORS" };
+var Tag_module_default = { "hop-Tag": "Tag-module__hop-Tag___qFqyh", "hop-Tag--md": "Tag-module__hop-Tag--md___yD2R0", "hop-Tag__icon": "Tag-module__hop-Tag__icon___BuZdB", "hop-Tag__icon-list": "Tag-module__hop-Tag__icon-list___XpdrM", "hop-Tag__badge": "Tag-module__hop-Tag__badge___KsNAZ", "hop-Tag__remove-btn": "Tag-module__hop-Tag__remove-btn___1-nqJ", "hop-Tag__Spinner": "Tag-module__hop-Tag__Spinner___4ylYp", "hop-Tag--lg": "Tag-module__hop-Tag--lg___QYYXG", "hop-Tag__text": "Tag-module__hop-Tag__text___JF8Qt", "hop-Badge--secondary": "Tag-module__hop-Badge--secondary___Hb-el" };
 var GlobalTagCssSelector = "hop-Tag";
 var TagToTextSizeAdapter = {
   md: "xs",