@digital-ai/dot-components 5.1.0 → 5.3.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: {
@@ -447,7 +466,7 @@ const lightFigmaColors = {
     }
   },
   icon: {
-    black: n700,
+    gray: n400,
     disabled: n300,
     white: n0
   },
@@ -609,7 +628,7 @@ const darkFigmaColors = {
     }
   },
   icon: {
-    black: n100,
+    gray: n100,
     disabled: n400,
     white: n700
   },
@@ -852,7 +871,7 @@ const avatarColors = {
     backgroundColor: lightFigmaColors.typography.gray
   },
   default: {
-    color: lightFigmaColors.icon.black,
+    color: lightFigmaColors.icon.gray,
     backgroundColor: lightFigmaColors.background.level1.deep
   },
   green: {
@@ -907,7 +926,7 @@ const darkTheme = createTheme({
         backgroundColor: darkFigmaColors.typography.gray
       },
       default: {
-        color: darkFigmaColors.icon.black,
+        color: darkFigmaColors.icon.gray,
         backgroundColor: darkFigmaColors.background.level1.deep
       },
       green: {
@@ -1474,22 +1493,27 @@ const StyledTextField = styled(TextField)`
           &.MuiInputBase-adornedStart {
             padding-left: ${theme.spacing(1.5)};
           }
+
           &.MuiInputBase-adornedEnd {
             padding-right: ${theme.spacing(1)};
           }
         }
       }
+
       .MuiInputBase-input {
         box-sizing: content-box;
       }
+
       .MuiOutlinedInput-input {
         padding: 18px ${InputProps.endAdornment ? '0px' : '12px'} 18px
           ${InputProps.startAdornment ? '0px' : '12px'};
+
         &::placeholder {
           opacity: 1;
           color: ${theme.palette.figma.typography.gray};
         }
       }
+
       .MuiInputBase-inputSizeSmall {
         padding-top: 10.5px;
         padding-bottom: 10.5px;
@@ -1552,7 +1576,8 @@ const StyledTextField = styled(TextField)`
 
     &.${rootSelectClassName}, &.${rootClassName$1q} {
       .${adornmentIconClassName} {
-        color: ${theme.palette.figma.icon.black};
+        color: ${theme.palette.figma.icon.gray};
+
         p {
           font-size: ${theme.typography.body2.fontSize}px;
           margin: 0;
@@ -1595,8 +1620,12 @@ const StyledTextField = styled(TextField)`
         right: ${InputProps.endAdornment ? `44px` : `12px`};
       }
 
+      &.${inputAiClassName$1} .${fieldsetClassName} {
+        border-color: ${theme.palette.figma.aiPink.elevated};
+      }
+
       &.${successClassName} {
-        .MuiOutlinedInput-notchedOutline {
+        .${fieldsetClassName} {
           border-color: ${theme.palette.figma.success.normal};
         }
 
@@ -1606,7 +1635,7 @@ const StyledTextField = styled(TextField)`
       }
 
       &.${errorClassName} {
-        .MuiOutlinedInput-notchedOutline {
+        .${fieldsetClassName} {
           border-color: ${theme.palette.figma.destructive.normal};
         }
 
@@ -1616,7 +1645,7 @@ const StyledTextField = styled(TextField)`
       }
 
       &.${warningClassName} {
-        .MuiOutlinedInput-notchedOutline {
+        .${fieldsetClassName} {
           border-color: ${theme.palette.figma.warning.normal};
         }
 
@@ -1625,21 +1654,6 @@ const StyledTextField = styled(TextField)`
         }
       }
 
-      &.${inputAiClassName$1} {
-        color: ${theme.palette.figma.typography.white};
-        background: ${theme.palette.figma.gradient.normal};
-        border: 1px solid transparent;
-        border-radius: 4px;
-
-        .MuiOutlinedInput-root .${fieldsetClassName} {
-          border: none;
-        }
-      }
-
-      .ai-text-clear-icon {
-        right: 36px;
-        position: relative;
-      }
       .MuiOutlinedInput-adornedStart {
         padding-left: 12px;
 
@@ -1662,7 +1676,7 @@ const StyledIcon = styled(Icon)`
   theme
 }) => css`
     &.${rootClassName$1p} {
-      color: ${theme.palette.figma.icon.black};
+      color: ${theme.palette.figma.icon.gray};
       font-size: 20px;
 
       i {
@@ -2670,7 +2684,7 @@ const StyledAvatar = styled(Avatar)`
       border: 0px;
       &:focus-visible {
         box-shadow: 0px 0px 0px 3px ${theme.palette.figma.icon.white},
-          0px 0px 0px 5px ${theme.palette.figma.icon.black};
+          0px 0px 0px 5px ${theme.palette.figma.icon.gray};
         outline: 0;
       }
 
@@ -2679,12 +2693,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 +2723,7 @@ const StyledAvatar = styled(Avatar)`
 `;
 
 const AvatarContent = ({
+  ai,
   'data-testid': dataTestId,
   iconId,
   imageSrc,
@@ -2739,6 +2755,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 +2763,7 @@ const AvatarContent = ({
   }
   if (type === 'text') {
     return jsx(DotTypography, {
+      ai: ai,
       variant: size === 'small' ? 'caption' : getHeadingFromAvatarSize(),
       children: parsedNumber() || parsedText()
     });
@@ -2753,6 +2771,7 @@ const AvatarContent = ({
   return null;
 };
 const DotAvatar = ({
+  ai = false,
   alt,
   ariaLabel,
   ariaRole = 'img',
@@ -2802,6 +2821,7 @@ const DotAvatar = ({
       tabIndex: tooltip ? tabIndex : undefined,
       variant: variant,
       children: jsx(AvatarContent, {
+        ai: ai,
         "data-testid": dataTestId,
         iconId: iconId,
         imageSrc: imageSrc,
@@ -2856,7 +2876,7 @@ const StyledButton = styled(Button)`
         }
 
         .dot-icon {
-          color: ${theme.palette.figma.icon.black};
+          color: ${theme.palette.figma.icon.gray};
         }
       }
 
@@ -3148,7 +3168,7 @@ const StyledList = styled(List)`
         background: ${theme.palette.figma.background.level0.componentsBackground};
 
         .dot-icon {
-          color: ${theme.palette.figma.icon.black};
+          color: ${theme.palette.figma.icon.gray};
         }
 
         &.${nestedListClassName} .${listItemRootClass} {
@@ -3910,13 +3930,13 @@ const StyledIconButton = styled(IconButton)`
               color: inherit;
             ` : ''}
       ${color === 'default' ? css`
-              color: ${theme.palette.figma.icon.black};
+              color: ${theme.palette.figma.icon.gray};
             ` : ''}
 
       &.MuiIconButton-colorAi{
         color: ${theme.palette.figma.icon.white};
         background: ${theme.palette.figma.gradient.normal};
-             
+
         &:hover {
           background: ${theme.palette.figma.gradient.elevated};
         }
@@ -3968,7 +3988,7 @@ const StyledIconButton = styled(IconButton)`
         &:active {
           ${color !== 'ai' ? css`
                   background: ${theme.palette.figma.toggleTabs.bckg};
-                ` : ''}          
+                ` : ''}
         }
       }
 
@@ -4292,7 +4312,7 @@ const styledListItemElement = elementType => {
         }
 
         .dot-icon i:before {
-          color: ${theme.palette.figma.icon.black};
+          color: ${theme.palette.figma.icon.gray};
         }
 
         .left-border-with-arrow {
@@ -4961,7 +4981,7 @@ const DotInputText = ({
   const hasError = error && errorClassName;
   const hasWarning = !error && warning && warningClassName;
   const hasSuccess = !error && !warning && success && successClassName;
-  const isAiEnabled = ai && inputAiClassName$1;
+  const isAiEnabled = !error && !warning && !success && ai && inputAiClassName$1;
   const hasEndAdornmentIcon = endIcon || error || hasWarning || hasSuccess;
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
@@ -5940,7 +5960,7 @@ const StyledSidebar = styled.aside`
 
           &:focus-visible {
             box-shadow: 0 0 0 2px ${theme.palette.figma.icon.white},
-              0 0 0 4px ${theme.palette.figma.icon.black};
+              0 0 0 4px ${theme.palette.figma.icon.gray};
           }
         }
 
@@ -6018,7 +6038,7 @@ const StyledSidebar = styled.aside`
               margin: 0;
 
               i:before {
-                color: ${theme.palette.figma.typography.gray};
+                color: ${theme.palette.figma.icon.gray};
               }
             }
           }
@@ -6387,6 +6407,7 @@ const DotSidebar = ({
         placement: "right",
         children: jsx(DotIconButton, {
           ariaLabel: "collapse sidebar navigation",
+          color: "default",
           "data-testid": "toggle-nav",
           iconId: isOpen ? 'push-left' : 'push-right',
           iconSize: "small",
@@ -6597,7 +6618,7 @@ const StyledAppToolbar = styled.header`
         height: 40px;
         button.dot-avatar:focus-visible {
           box-shadow: 0px 0px 0px 3px ${theme.palette.figma.icon.white},
-            0px 0px 0px 5px ${theme.palette.figma.icon.black};
+            0px 0px 0px 5px ${theme.palette.figma.icon.gray};
         }
       }
     }
@@ -6794,7 +6815,7 @@ const StyledChip = styled(Chip)`
       color: ${theme.palette.figma.typography.black};
 
       .dot-icon i {
-        color: ${theme.palette.figma.icon.black};
+        color: ${theme.palette.figma.icon.gray};
         height: auto;
       }
 
@@ -6866,7 +6887,7 @@ const StyledChip = styled(Chip)`
         }
 
         .MuiChip-deleteIcon:hover {
-          color: ${theme.palette.figma.icon.black};
+          color: ${theme.palette.figma.icon.gray};
         }
       }
 
@@ -6988,15 +7009,8 @@ const StyledAutocomplete = styled(Autocomplete)`
     }
 
     &.${inputAiClassName} {
-      color: ${theme.palette.figma.typography.white};
-      background: ${theme.palette.figma.gradient.ai};
-      border: 2px solid transparent;
-      border-radius: 4px;
-      .MuiOutlinedInput-root {
-        padding: 8px;
-      }
       .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
-        border: none;
+        border-color: ${theme.palette.figma.aiPink.elevated};
       }
     }
   `}
@@ -7147,7 +7161,8 @@ const DotAutoComplete = ({
   const isActionItemDefined = onActionItemClick !== undefined;
   const popperOpen = !readOnly && (open || isOpened);
   const textFieldWarningClassName = !error && warning && warningClassName;
-  const rootClasses = useStylesWithRootClass(getRootClassNames(className, size), ai ? inputAiClassName : '');
+  const isAiEnabled = !error && !warning && ai;
+  const rootClasses = useStylesWithRootClass(getRootClassNames(className, size), isAiEnabled ? inputAiClassName : '');
   const textFieldRootClasses = getTextFieldRootClassNames(textFieldWarningClassName, readOnly);
   const inputRootClasses = getInputRootClassNames(dense);
   const popperClasses = useStylesWithRootClass(rootClassName$1f, popperClassName);
@@ -7273,7 +7288,7 @@ const DotAutoComplete = ({
   // Create handler only if 'onInputChange' or 'actionItem' prop is defined
   // Custom input change handler for AI mode
   const handleInputChange = (event, currentInputValue, reason) => {
-    if (isActionItemDefined || ai) {
+    if (isActionItemDefined || isAiEnabled) {
       setInputText(currentInputValue); // fallback for action item
     }
     onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, currentInputValue, reason);
@@ -7364,7 +7379,7 @@ const DotAutoComplete = ({
     return renderOption ? renderOption(props, option, state) : renderTrimmedLongOptions(props, option);
   };
   const getEndAdornment = params => {
-    if (ai) {
+    if (isAiEnabled) {
       return renderAISendAdornment;
     }
     if (!readOnly) {
@@ -7385,6 +7400,7 @@ const DotAutoComplete = ({
     defaultValue: getDefaultAutoCompleteValue(multiple, defaultValue),
     disableCloseOnSelect: disableCloseOnSelect,
     disabled: disabled,
+    disableClearable: isAiEnabled,
     filterOptions: filterOptions,
     filterSelectedOptions: filterSelectedOptions,
     freeSolo: freesolo,
@@ -7457,7 +7473,7 @@ const DotAutoComplete = ({
               id: inputId,
               className: useStylesWithRootClass(inputProps.className, 'dot-input'),
               readOnly,
-              value: ai ? inputText : inputProps.value
+              value: isAiEnabled ? inputText : inputProps.value
             }),
             InputLabelProps: {
               htmlFor: inputId
@@ -7475,7 +7491,7 @@ const DotAutoComplete = ({
                 event.preventDefault();
                 (_a = actionItemRef === null || actionItemRef === void 0 ? void 0 : actionItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
               }
-              if (event.key === 'Enter' && ai) {
+              if (event.key === 'Enter' && isAiEnabled) {
                 event.stopPropagation();
                 event.preventDefault();
                 handleAiAction(inputText);
@@ -7653,7 +7669,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
       }
       .MuiBreadcrumbs-li,
       .separator {
-        color: ${theme.palette.figma.icon.black};
+        color: ${theme.palette.figma.typography.black};
         margin: 0;
         white-space: nowrap;
       }
@@ -8023,7 +8039,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
       }
 
       .dot-icon {
-        color: ${theme.palette.figma.icon.black};
+        color: ${theme.palette.figma.icon.gray};
         display: flex;
 
         + p {
@@ -15544,7 +15560,7 @@ const StyledNavigationRail = styled.div`
         border-right: 3px solid transparent;
 
         .dot-icon {
-          color: ${theme.palette.figma.icon.black};
+          color: ${theme.palette.figma.icon.gray};
         }
 
         &.selected,
@@ -15679,7 +15695,7 @@ const StyledSplitButtonGroup = styled(ButtonGroup)`
           border-left: none;
 
           .dot-icon {
-            color: ${theme.palette.figma.icon.black};
+            color: ${theme.palette.figma.icon.gray};
           }
         }
       }
@@ -15899,7 +15915,7 @@ const StyledStepper = styled.div`
 
             &.active:not(&.completed):not(&.in-progress) {
               .dot-avatar i:before {
-                color: ${theme.palette.figma.icon.black};
+                color: ${theme.palette.figma.icon.gray};
               }
             }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "5.1.0",
+  "version": "5.3.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>;

package/src/lib/theme-provider/interfaces.d.ts

@@ -95,8 +95,8 @@ export interface FigmaTheme {
         };
     };
     icon: {
-        black: string;
         disabled: string;
+        gray: string;
         white: string;
     };
     illustrations: {