@uniformdev/design-system 19.186.2-alpha.14 → 19.186.4-alpha.29

package/dist/esm/index.js

@@ -50,6 +50,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           --purple-rain-600: #6340a9;
 
           /* raspberry spectrum*/
+          --raspberry-beret-50: #fefafc;
           --raspberry-beret-100: #ffbee1;
           --raspberry-beret-200: #ff94ce;
           --raspberry-beret-300: #ff6aba;
@@ -11824,6 +11825,9 @@ var avatarImageStyles = css19`
   height: 100%;
   object-fit: cover;
 `;
+var avatarSize2xsStyles = css19`
+  width: 1rem;
+`;
 var avatarSizeXsStyles = css19`
   width: 1.5rem;
 `;
@@ -11837,20 +11841,26 @@ var avatarSizeLgStyles = css19`
   width: 3rem;
 `;
 var avatarSizeXlStyles = css19`
-  width: 3.5rem;
+  width: 4rem;
+`;
+var avatarSize2xlStyles = css19`
+  width: 5rem;
 `;
 
 // src/components/Avatar/Avatar.tsx
 import { jsx as jsx20, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
 var avatarSizeStylesMap = {
+  "2xs": avatarSize2xsStyles,
   xs: avatarSizeXsStyles,
   sm: avatarSizeSmStyles,
   md: avatarSizeMdStyles,
   lg: avatarSizeLgStyles,
-  xl: avatarSizeXlStyles
+  xl: avatarSizeXlStyles,
+  "2xl": avatarSize2xlStyles
 };
-var Avatar = ({ src, label = "", children, size = "md", ...props }) => {
-  return /* @__PURE__ */ jsx20(Tooltip, { title: label, children: /* @__PURE__ */ jsxs8("div", { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
+var Avatar = ({ src, label = "", children, size = "md", as = "div", ...props }) => {
+  const Element = as;
+  return /* @__PURE__ */ jsx20(Tooltip, { title: label, children: /* @__PURE__ */ jsxs8(Element, { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
     !src ? null : /* @__PURE__ */ jsx20("img", { role: "presentation", src, css: avatarImageStyles }),
     children
   ] }) });
@@ -12357,7 +12367,7 @@ var menuItem = (textTheme, forceActive) => css26`
   align-items: center;
   border-radius: var(--rounded-base);
   background: none;
-  color: ${textTheme === "base" ? "var(--typography-base)" : "var(--brand-secondary-5)"};
+  color: ${textTheme === "base" ? "var(--typography-base)" : textTheme === "accent-alt" ? "var(--accent-alt-dark)" : "var(--brand-secondary-5)"};
   display: flex;
   padding: var(--spacing-3);
   font-weight: var(--fw-regular);
@@ -16409,6 +16419,7 @@ var DrawerContentInner = css59`
   height: 100%;
   overflow-y: auto;
   ${scrollbarStyles}
+  border-radius: var(--rounded-base);
 `;
 var DrawerContentBtnGroup = css59`
   display: flex;
@@ -18170,10 +18181,10 @@ var loader = css77`
   display: inline-flex;
   justify-content: center;
 `;
-function loadingDot(size) {
+function loadingDot(size, backgroundColor) {
   const dotSize = size === "lg" ? 8 : 4;
   return css77`
-    background-color: var(--gray-700);
+    background-color: ${backgroundColor};
     display: block;
     border-radius: var(--rounded-full);
     animation: ${bounceFade(size)} 0.75s infinite ease-in-out;
@@ -18198,11 +18209,13 @@ function loadingDot(size) {
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
 import { jsx as jsx98, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
-var LoadingIndicator = ({
-  size = "lg",
-  ...props
-}) => {
-  const dotStyle = loadingDot(size);
+var cssColorMap = {
+  gray: "var(--gray-700)",
+  "accent-alt": "var(--accent-alt-dark)"
+};
+var LoadingIndicator = ({ size = "lg", color = "gray", ...props }) => {
+  const cssColor = cssColorMap[color];
+  const dotStyle = loadingDot(size, cssColor);
   return /* @__PURE__ */ jsxs63("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
     /* @__PURE__ */ jsx98("span", { css: dotStyle }),
     /* @__PURE__ */ jsx98("span", { css: dotStyle }),
@@ -22952,7 +22965,7 @@ var editorContainer = css101`
   }
 
   &[style*='height:'] {
-    min-height: 50px;
+    min-height: calc(3rem + (2 * var(--spacing-sm)));
     max-height: unset;
   }
 `;
@@ -22972,7 +22985,7 @@ var editorPlaceholder = css101`
   left: calc(var(--spacing-sm) + 1px);
   pointer-events: none;
   position: absolute;
-  top: var(--spacing-sm);
+  top: calc(1rem + var(--spacing-sm));
   user-select: none;
 `;
 var editorInput = css101`

package/dist/index.d.mts

@@ -20211,17 +20211,22 @@ type AnimationFileProps = LottieComponentProps & {
  */
 declare const AnimationFile: ({ label, loop, autoplay, width, height, ...props }: AnimationFileProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type AvatarSizeProp = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarSizeProp = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type AvatarProps = {
     src?: string;
     label?: string;
     size?: AvatarSizeProp;
-} & React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * The HTML element to render the component as.
+     * @default 'div'
+     */
+    as?: 'div' | 'button';
+} & React.HTMLAttributes<HTMLDivElement | HTMLButtonElement>;
 /**
  * @description A component to render rounded avatars of a user or an app.
  * @example <Avatar>AB</Avatar>
  */
-declare const Avatar: ({ src, label, children, size, ...props }: AvatarProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ src, label, children, size, as, ...props }: AvatarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type AvatarGroupProps = {
     /**
@@ -22565,13 +22570,15 @@ type ScrollableListItemProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> &
  */
 declare const ScrollableListItem: ({ buttonText, icon, active, disableShadow, ...props }: ScrollableListItemProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type LoadingIndicatorProps = {
+    color?: 'gray' | 'accent-alt';
+    size?: 'lg' | 'sm';
+} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
 /**
  * Loading Indicator
  * @example <LoadingIndicator />
  */
-declare const LoadingIndicator: ({ size, ...props }: HTMLAttributes<HTMLDivElement> & {
-    size?: "lg" | "sm";
-}) => _emotion_react_jsx_runtime.JSX.Element;
+declare const LoadingIndicator: ({ size, color, ...props }: LoadingIndicatorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface LoadingOverlayProps {
     /** sets whether to display the loading overlay components */
@@ -22696,7 +22703,7 @@ type MenuGroupProps = {
 };
 declare const MenuGroup: ({ title, children }: MenuGroupProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type MenuItemTextThemeProps = 'base' | 'red';
+type MenuItemTextThemeProps = 'base' | 'red' | 'accent-alt';
 type MenuItemProps = MenuItemProps$1 & {
     /**
      * Sets child elements within the component.

package/dist/index.d.ts

@@ -20211,17 +20211,22 @@ type AnimationFileProps = LottieComponentProps & {
  */
 declare const AnimationFile: ({ label, loop, autoplay, width, height, ...props }: AnimationFileProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type AvatarSizeProp = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarSizeProp = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type AvatarProps = {
     src?: string;
     label?: string;
     size?: AvatarSizeProp;
-} & React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * The HTML element to render the component as.
+     * @default 'div'
+     */
+    as?: 'div' | 'button';
+} & React.HTMLAttributes<HTMLDivElement | HTMLButtonElement>;
 /**
  * @description A component to render rounded avatars of a user or an app.
  * @example <Avatar>AB</Avatar>
  */
-declare const Avatar: ({ src, label, children, size, ...props }: AvatarProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ src, label, children, size, as, ...props }: AvatarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type AvatarGroupProps = {
     /**
@@ -22565,13 +22570,15 @@ type ScrollableListItemProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> &
  */
 declare const ScrollableListItem: ({ buttonText, icon, active, disableShadow, ...props }: ScrollableListItemProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type LoadingIndicatorProps = {
+    color?: 'gray' | 'accent-alt';
+    size?: 'lg' | 'sm';
+} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
 /**
  * Loading Indicator
  * @example <LoadingIndicator />
  */
-declare const LoadingIndicator: ({ size, ...props }: HTMLAttributes<HTMLDivElement> & {
-    size?: "lg" | "sm";
-}) => _emotion_react_jsx_runtime.JSX.Element;
+declare const LoadingIndicator: ({ size, color, ...props }: LoadingIndicatorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface LoadingOverlayProps {
     /** sets whether to display the loading overlay components */
@@ -22696,7 +22703,7 @@ type MenuGroupProps = {
 };
 declare const MenuGroup: ({ title, children }: MenuGroupProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type MenuItemTextThemeProps = 'base' | 'red';
+type MenuItemTextThemeProps = 'base' | 'red' | 'accent-alt';
 type MenuItemProps = MenuItemProps$1 & {
     /**
      * Sets child elements within the component.

package/dist/index.js

@@ -1676,6 +1676,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           --purple-rain-600: #6340a9;
 
           /* raspberry spectrum*/
+          --raspberry-beret-50: #fefafc;
           --raspberry-beret-100: #ffbee1;
           --raspberry-beret-200: #ff94ce;
           --raspberry-beret-300: #ff6aba;
@@ -13510,6 +13511,9 @@ var avatarImageStyles = import_react27.css`
   height: 100%;
   object-fit: cover;
 `;
+var avatarSize2xsStyles = import_react27.css`
+  width: 1rem;
+`;
 var avatarSizeXsStyles = import_react27.css`
   width: 1.5rem;
 `;
@@ -13523,20 +13527,26 @@ var avatarSizeLgStyles = import_react27.css`
   width: 3rem;
 `;
 var avatarSizeXlStyles = import_react27.css`
-  width: 3.5rem;
+  width: 4rem;
+`;
+var avatarSize2xlStyles = import_react27.css`
+  width: 5rem;
 `;
 
 // src/components/Avatar/Avatar.tsx
 var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
 var avatarSizeStylesMap = {
+  "2xs": avatarSize2xsStyles,
   xs: avatarSizeXsStyles,
   sm: avatarSizeSmStyles,
   md: avatarSizeMdStyles,
   lg: avatarSizeLgStyles,
-  xl: avatarSizeXlStyles
+  xl: avatarSizeXlStyles,
+  "2xl": avatarSize2xlStyles
 };
-var Avatar = ({ src, label = "", children, size = "md", ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tooltip, { title: label, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
+var Avatar = ({ src, label = "", children, size = "md", as = "div", ...props }) => {
+  const Element = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tooltip, { title: label, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Element, { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
     !src ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", { role: "presentation", src, css: avatarImageStyles }),
     children
   ] }) });
@@ -14065,7 +14075,7 @@ var menuItem = (textTheme, forceActive) => import_react34.css`
   align-items: center;
   border-radius: var(--rounded-base);
   background: none;
-  color: ${textTheme === "base" ? "var(--typography-base)" : "var(--brand-secondary-5)"};
+  color: ${textTheme === "base" ? "var(--typography-base)" : textTheme === "accent-alt" ? "var(--accent-alt-dark)" : "var(--brand-secondary-5)"};
   display: flex;
   padding: var(--spacing-3);
   font-weight: var(--fw-regular);
@@ -18203,6 +18213,7 @@ var DrawerContentInner = import_react85.css`
   height: 100%;
   overflow-y: auto;
   ${scrollbarStyles}
+  border-radius: var(--rounded-base);
 `;
 var DrawerContentBtnGroup = import_react85.css`
   display: flex;
@@ -20018,10 +20029,10 @@ var loader = import_react111.css`
   display: inline-flex;
   justify-content: center;
 `;
-function loadingDot(size) {
+function loadingDot(size, backgroundColor) {
   const dotSize = size === "lg" ? 8 : 4;
   return import_react111.css`
-    background-color: var(--gray-700);
+    background-color: ${backgroundColor};
     display: block;
     border-radius: var(--rounded-full);
     animation: ${bounceFade(size)} 0.75s infinite ease-in-out;
@@ -20046,11 +20057,13 @@ function loadingDot(size) {
 
 // src/components/LoadingIndicator/LoadingIndicator.tsx
 var import_jsx_runtime98 = require("@emotion/react/jsx-runtime");
-var LoadingIndicator = ({
-  size = "lg",
-  ...props
-}) => {
-  const dotStyle = loadingDot(size);
+var cssColorMap = {
+  gray: "var(--gray-700)",
+  "accent-alt": "var(--accent-alt-dark)"
+};
+var LoadingIndicator = ({ size = "lg", color = "gray", ...props }) => {
+  const cssColor = cssColorMap[color];
+  const dotStyle = loadingDot(size, cssColor);
   return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { css: dotStyle }),
     /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { css: dotStyle }),
@@ -24794,7 +24807,7 @@ var editorContainer = import_react158.css`
   }
 
   &[style*='height:'] {
-    min-height: 50px;
+    min-height: calc(3rem + (2 * var(--spacing-sm)));
     max-height: unset;
   }
 `;
@@ -24814,7 +24827,7 @@ var editorPlaceholder = import_react158.css`
   left: calc(var(--spacing-sm) + 1px);
   pointer-events: none;
   position: absolute;
-  top: var(--spacing-sm);
+  top: calc(1rem + var(--spacing-sm));
   user-select: none;
 `;
 var editorInput = import_react158.css`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.186.2-alpha.14+2868049c36",
+  "version": "19.186.4-alpha.29+03de47b2a8",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,8 +24,8 @@
     "@storybook/react": "8.0.10",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@uniformdev/canvas": "^19.186.2-alpha.14+2868049c36",
-    "@uniformdev/richtext": "^19.186.2-alpha.14+2868049c36",
+    "@uniformdev/canvas": "^19.186.4-alpha.29+03de47b2a8",
+    "@uniformdev/richtext": "^19.186.4-alpha.29+03de47b2a8",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.38",
@@ -77,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2868049c365d370abc91762e89dc845c61c02b78"
+  "gitHead": "03de47b2a82e853fe3a989a5a60f352c74ed2777"
 }