@digital-ai/dot-components 5.1.0 → 5.2.0

package/index.esm.js

@@ -2,8 +2,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { useEffect, useState, useRef, createContext, useMemo, useContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { Typography, Fade, StyledEngineProvider, Tooltip, InputAdornment, InputLabel, TextField, Icon, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Toolbar, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Chip, Autocomplete, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, Snackbar, RadioGroup, Radio, Switch, Skeleton, ButtonGroup, Stepper, Step, StepLabel, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide, Stack } from '@mui/material';
+import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
-import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, css, keyframes } from 'styled-components';
 import '@digital-ai/dot-icons';
 import jwt_decode from 'jwt-decode';
 import '@digital-ai/dot-illustrations';
@@ -42,7 +42,26 @@ const checkIfOverflowPresentInElementTree = element => {
   return false;
 };
 
+const rootClassName$1r = 'dot-typography';
+const StyledTypography = styled(Typography)`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$1r} {
+      &.dot-typography-ai {
+        background: ${theme.palette.figma.gradient.ai};
+        background-clip: text;
+        -webkit-background-clip: text;
+        color: transparent;
+        -webkit-text-fill-color: transparent;
+        width: fit-content;
+      }
+    }
+  `}
+`;
+
 const DotTypography = ({
+  ai,
   ariaLabel,
   ariaLevel,
   ariaRole,
@@ -54,7 +73,7 @@ const DotTypography = ({
   noWrap,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass('dot-typography', className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1r, ai ? 'dot-typography-ai' : '', className);
   useEffect(() => {
     if (ariaRole === 'heading' && !ariaLevel) {
       console.warn('please include ariaLevel when using ariaRole="heading"');
@@ -63,7 +82,7 @@ const DotTypography = ({
       console.warn('DEPRECATED: `noMarginBottom` on `DotTypography` is no longer included');
     }
   }, []);
-  return jsx(Typography, {
+  return jsx(StyledTypography, {
     "aria-label": ariaLabel,
     "aria-level": ariaLevel,
     classes: {
@@ -2679,12 +2698,13 @@ const StyledAvatar = styled(Avatar)`
         height: 105%;
       }
 
-      .dot-i,
-      .dot-typography {
+      .dot-typography:not(.dot-typography-ai),
+      .dot-icon:not(.dot-icon-ai) .dot-i {
         color: ${({
-  color
+  color,
+  style
 }) => {
-  return color ? theme.palette.avatarColors[color].color : theme.palette.avatarColors['default'].color;
+  return (style === null || style === void 0 ? void 0 : style.color) !== undefined ? style.color : color ? theme.palette.avatarColors[color].color : theme.palette.avatarColors['default'].color;
 }};
         margin-bottom: 0;
       }
@@ -2708,6 +2728,7 @@ const StyledAvatar = styled(Avatar)`
 `;
 
 const AvatarContent = ({
+  ai,
   'data-testid': dataTestId,
   iconId,
   imageSrc,
@@ -2739,6 +2760,7 @@ const AvatarContent = ({
   const getIconFontSizeFromAvatarSize = () => size === 'small' ? size : 'medium';
   if (type === 'icon' || type === 'image' && !imageSrc) {
     return jsx(DotIcon, {
+      ai: ai,
       "data-testid": `${dataTestId}-icon`,
       fontSize: getIconFontSizeFromAvatarSize(),
       iconId: iconId || 'user'
@@ -2746,6 +2768,7 @@ const AvatarContent = ({
   }
   if (type === 'text') {
     return jsx(DotTypography, {
+      ai: ai,
       variant: size === 'small' ? 'caption' : getHeadingFromAvatarSize(),
       children: parsedNumber() || parsedText()
     });
@@ -2753,6 +2776,7 @@ const AvatarContent = ({
   return null;
 };
 const DotAvatar = ({
+  ai = false,
   alt,
   ariaLabel,
   ariaRole = 'img',
@@ -2802,6 +2826,7 @@ const DotAvatar = ({
       tabIndex: tooltip ? tabIndex : undefined,
       variant: variant,
       children: jsx(AvatarContent, {
+        ai: ai,
         "data-testid": dataTestId,
         iconId: iconId,
         imageSrc: imageSrc,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/analytics/dashboard-actions/DashboardPublishConfirm.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const dashboardCategoriesContainerClassName = "dashboard-categories-container";
-export declare const InlineMessage: import("styled-components").StyledComponent<({ ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: import("../../typography/Typography").TypographyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const InlineMessage: import("styled-components").StyledComponent<({ ai, ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: import("../../typography/Typography").TypographyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const StyledPublishConfirmDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAppSelectDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAppSelectDotAutoComplete: import("styled-components").StyledComponent<(<T extends import("../..").AutoCompleteOption>({ ListboxComponent, additionalLabelContent, actionItem, ai, aiAction, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, disableCloseOnSelect, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, informationToolTip, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, popperZIndex, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, trimLongOptions, value, warning, }: import("../../auto-complete/AutoComplete").AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element), any, {}, never>;

package/src/lib/components/avatar/Avatar.d.ts

@@ -5,6 +5,8 @@ export type AvatarType = 'image' | 'text' | 'icon';
 export type AvatarVariant = 'circular' | 'square';
 export type AvatarColor = 'default' | 'inherit' | 'green' | 'blue' | 'orange' | 'purple' | 'yellow' | 'red' | 'darkGrey' | 'lightGrey' | 'transparent' | 'white';
 export interface AvatarProps extends CommonProps {
+    /** Apply gradient color to inner content (icon / typography) */
+    ai?: boolean;
     /** Text displayed on hover */
     alt: string;
     /** Color for avatar */
@@ -36,4 +38,4 @@ export interface AvatarProps extends CommonProps {
     /** The shape of the avatar */
     variant?: AvatarVariant;
 }
-export declare const DotAvatar: ({ alt, ariaLabel, ariaRole, className, component, disableInteractive, color, "data-testid": dataTestId, iconId, imageSrc, onClick, number, size, tabIndex, text, type, tooltip, variant, style, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotAvatar: ({ ai, alt, ariaLabel, ariaRole, className, component, disableInteractive, color, "data-testid": dataTestId, iconId, imageSrc, onClick, number, size, tabIndex, text, type, tooltip, variant, style, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/typography/Typography.d.ts

@@ -2,6 +2,8 @@ import { ElementType, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline' | 'inherit';
 export interface TypographyProps extends CommonProps {
+    /** If true, applies a gradient color */
+    ai?: boolean;
     /** When `ariaRole` is `heading` then set a level */
     ariaLevel?: number;
     /** The content of the component. */
@@ -15,4 +17,4 @@ export interface TypographyProps extends CommonProps {
     /** Applies the theme typography styles. */
     variant?: TypographyVariant;
 }
-export declare const DotTypography: ({ ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotTypography: ({ ai, ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: TypographyProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/typography/Typography.styles.d.ts

@@ -0,0 +1,3 @@
+import { TypographyProps } from '@mui/material/Typography';
+export declare const rootClassName = "dot-typography";
+export declare const StyledTypography: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TypographyTypeMap<{}, "span">>, any, TypographyProps, never>;