@digital-ai/dot-components 4.19.2 → 4.20.0

package/index.esm.js

@@ -185,23 +185,58 @@ const yA400 = '#ffe2a4';
 const yA700 = '#ffda8b';
 //Purple
 //https://zeroheight.com/4a9ac476a/p/22005a-color/t/48416f
-const p50 = '#f3e4ee';
-const p100 = '#e0bbd4';
-const p200 = '#cc8eb8';
-const p300 = '#b8609c';
-const p400 = '#a83e86';
-const p500 = '#991c71';
-const p600 = '#911969';
-const p700 = '#86145e';
-const p800 = '#7c1154';
-const p900 = '#6b0942';
+const p50 = '#f5e9fb';
+const p100 = '#ebd4f7';
+const p200 = '#d7aaee';
+const p300 = '#c37fe6';
+const p400 = '#af54de';
+const p500 = '#9e2fd7';
+const p600 = '#7c21ab';
+const p700 = '#5d1980';
+const p800 = '#3e1155';
+const p900 = '#2e0c40';
 const pA100 = '#ff9cd1';
 const pA200 = '#ff69b9';
 const pA400 = '#ff36a2';
 const pA700 = '#ff1d96';
+//Pink
+//https://zeroheight.com/4a9ac476a/p/22005a-color/t/a49f524b62
+const pi50 = '#fce9f6';
+const pi100 = '#f8d3ee';
+const pi200 = '#f1a7dc';
+const pi300 = '#eb7acb';
+const pi400 = '#e44eb9';
+const pi500 = '#dd22a8';
+const pi600 = '#b11b86';
+const pi700 = '#851465';
+const pi800 = '#580e43';
+const pi900 = '#2c0722';
+//Violet
+const v50 = '#ede8fd';
+const v100 = '#dbd1fa';
+const v200 = '#b6a3f5';
+const v300 = '#9275f0';
+const v400 = '#704aec';
+const v500 = '#4c1de7';
+const v600 = '#3a13b9';
+const v700 = '#2c0f8a';
+const v800 = '#1d0a5c';
+const v900 = '#0f052e';
 const selectedGray = 'rgba(0, 0, 0, 0.12)';
 const lightSelectedGray = 'rgba(0, 0, 0, 0.08)';
 const hoverGray = 'rgba(0, 0, 0, 0.04)';
+// AI gradient for dark theme
+const aiNormalDark = `linear-gradient(134deg, ${pi200} 18.22%, ${p200} 68.6%, ${v200} 118.99%)`;
+const aiActiveDark = `linear-gradient(134deg, ${pi200} 18.22%, ${p200} 68.6%, ${v200} 118.99%)`;
+const aiElevatedDark = `linear-gradient(134deg, ${pi50} 18.22%, ${p200} 68.6%, ${v200} 118.99%)`;
+const aiLightDark = `linear-gradient(134deg, ${pi700} 18.22%, ${p700} 68.6%, ${v700} 118.99%)`;
+const aiAutoCompleteBorderDark = `linear-gradient(134deg, ${pi200} 18.22%, ${p200} 68.6%, ${pi300} 118.99%)`;
+// AI gradient for light theme
+const aiNormalLight = `linear-gradient(134deg, ${pi500} 18.22%, ${p500} 68.6%, ${v400} 118.99%)`;
+const aiActiveLight = `linear-gradient(134deg, ${pi400} 18.22%, ${p400} 68.6%, ${v400} 118.99%)`;
+const aiElevatedLight = `linear-gradient(134deg, ${pi600} 18.22%, ${p600} 68.6%, ${v600} 118.99%)`;
+const aiLightLight = `linear-gradient(134deg, ${pi50} 18.22%, ${p50} 68.6%, ${v50} 118.99%)`;
+const aiAutoCompleteBorderLight = `linear-gradient(134deg, ${pi500} 18.22%, ${p500} 68.6%, ${pi300} 118.99%)`;
 
 var lightThemeColors = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -308,12 +343,50 @@ var lightThemeColors = /*#__PURE__*/Object.freeze({
   pA200: pA200,
   pA400: pA400,
   pA700: pA700,
+  pi50: pi50,
+  pi100: pi100,
+  pi200: pi200,
+  pi300: pi300,
+  pi400: pi400,
+  pi500: pi500,
+  pi600: pi600,
+  pi700: pi700,
+  pi800: pi800,
+  pi900: pi900,
+  v50: v50,
+  v100: v100,
+  v200: v200,
+  v300: v300,
+  v400: v400,
+  v500: v500,
+  v600: v600,
+  v700: v700,
+  v800: v800,
+  v900: v900,
   selectedGray: selectedGray,
   lightSelectedGray: lightSelectedGray,
-  hoverGray: hoverGray
+  hoverGray: hoverGray,
+  aiNormalDark: aiNormalDark,
+  aiActiveDark: aiActiveDark,
+  aiElevatedDark: aiElevatedDark,
+  aiLightDark: aiLightDark,
+  aiAutoCompleteBorderDark: aiAutoCompleteBorderDark,
+  aiNormalLight: aiNormalLight,
+  aiActiveLight: aiActiveLight,
+  aiElevatedLight: aiElevatedLight,
+  aiLightLight: aiLightLight,
+  aiAutoCompleteBorderLight: aiAutoCompleteBorderLight
 });
 
 const lightFigmaColors = {
+  aiPink: {
+    active: pi400,
+    elevated: pi600,
+    light: pi50,
+    normal: pi500,
+    ripple: pi300,
+    rippleLight: pi200
+  },
   appToolbar: {
     background: n700,
     btnHover: n900
@@ -349,6 +422,13 @@ const lightFigmaColors = {
   disabled: {
     normal: n50
   },
+  gradient: {
+    active: aiActiveLight,
+    ai: aiAutoCompleteBorderLight,
+    elevated: aiElevatedLight,
+    light: aiLightLight,
+    normal: aiNormalLight
+  },
   graph: {
     alert: {
       error: r500,
@@ -461,6 +541,14 @@ const lightFigmaColors = {
   }
 };
 const darkFigmaColors = {
+  aiPink: {
+    active: pi200,
+    elevated: pi50,
+    light: pi700,
+    normal: pi200,
+    ripple: pi300,
+    rippleLight: pi200
+  },
   appToolbar: {
     background: n700,
     btnHover: n900
@@ -496,6 +584,13 @@ const darkFigmaColors = {
   disabled: {
     normal: n500
   },
+  gradient: {
+    active: aiActiveDark,
+    ai: aiAutoCompleteBorderDark,
+    elevated: aiElevatedDark,
+    light: aiLightDark,
+    normal: aiNormalDark
+  },
   graph: {
     alert: {
       error: r200,
@@ -1299,6 +1394,7 @@ const fieldsetClassName = 'MuiOutlinedInput-notchedOutline';
 const readOnlyClassName$1 = 'read-only';
 const resizerClassName = 'with-resizer';
 const ROW_HEIGHT = 37;
+const inputAiClassName$1 = 'dot-input-ai';
 const StyledAdornment = styled(InputAdornment)`
   .dot-icon {
     ${adornmentIconStyles()};
@@ -1499,6 +1595,17 @@ 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;
+        }
+      }
+
       .MuiOutlinedInput-adornedStart {
         padding-left: 12px;
 
@@ -1515,6 +1622,7 @@ const StyledTextField = styled(TextField)`
 `;
 
 const rootClassName$1n = 'dot-icon';
+const aiIconClassName = 'dot-icon-ai';
 const StyledIcon = styled(Icon)`
   ${({
   theme
@@ -1523,13 +1631,17 @@ const StyledIcon = styled(Icon)`
       color: ${theme.palette.figma.icon.black};
       font-size: 20px;
 
+      i {
+        height: 20px;
+        width: 20px;
+      }
+
       &.MuiIcon-fontSizeLarge {
-        font-size: 28px;
-        height: 35px;
-        width: 35px;
+        font-size: 24px;
 
         i {
-          height: 28px;
+          height: 24px;
+          width: 24px;
         }
       }
       &.MuiIcon-fontSizeSmall {
@@ -1537,16 +1649,19 @@ const StyledIcon = styled(Icon)`
 
         i {
           height: 18px;
+          width: 18px;
         }
       }
 
-      i {
-        height: 20px;
-      }
-
       &.${warningClassName} {
         color: ${theme.palette.figma.warning.normal};
       }
+
+      &.${aiIconClassName} {
+        background: ${theme.palette.figma.gradient.normal};
+        color: transparent;
+        -webkit-background-clip: text;
+      }
     }
   `}
 `;
@@ -1559,9 +1674,10 @@ const DotIcon = ({
   disableInteractive,
   fontSize = 'medium',
   iconId,
-  tooltip
+  tooltip,
+  ai = false
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1n, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$1n, className, ai ? aiIconClassName : '');
   return jsx(DotTooltip, {
     disableInteractive: disableInteractive,
     childrenDisplayStyle: "inline-block",
@@ -2723,6 +2839,71 @@ const StyledButton = styled(Button)`
         border-color: ${theme.palette.figma.border.defaultButton};
       }
 
+      &.MuiButton-ai {
+        color: ${theme.palette.figma.typography.white};
+        background: ${theme.palette.figma.gradient.normal};
+
+        &:hover {
+          background: ${theme.palette.figma.gradient.elevated};
+        }
+        &:active {
+          background-color: ${theme.palette.figma.gradient.active};
+        }
+        .dot-icon {
+          color: ${theme.palette.figma.icon.white};
+        }
+        &.Mui-disabled {
+          background: ${theme.palette.figma.disabled.normal};
+          border-color: ${theme.palette.figma.border.defaultButton};
+        }
+      }
+
+      &.MuiButton-ai-outlined {
+        color: ${theme.palette.figma.gradient.normal};
+
+        ${theme.name === 'light' && css`
+          background-image: linear-gradient(white, white),
+            ${theme.palette.figma.gradient.normal};
+          border: 2px solid transparent;
+        `}
+        ${theme.name === 'dark' && css`
+          border: 2px solid ${theme.palette.figma.aiPink.active};
+        `}
+
+        background-clip: padding-box, border-box;
+        background-origin: border-box;
+
+        &:hover {
+          ${theme.name === 'light' && css`
+            background-image: linear-gradient(
+                ${theme.palette.figma.aiPink.light},
+                ${theme.palette.figma.aiPink.light}
+              ),
+              ${theme.palette.figma.gradient.normal};
+            border: 2px solid transparent;
+          `}
+        }
+        &:active {
+          background-color: ${theme.palette.figma.neutral.active};
+        }
+
+        .dot-icon {
+          background: ${theme.palette.figma.gradient.normal};
+          background-clip: text;
+          color: transparent;
+        }
+      }
+
+      &.MuiButton-ai-outlined {
+        background-color: ${theme.palette.figma.neutral.normal};
+        color: ${theme.palette.figma.aiPink.normal};
+
+        &.Mui-disabled {
+          background: ${theme.palette.figma.disabled.normal};
+          border-color: ${theme.palette.figma.border.defaultButton};
+        }
+      }
+
       &.MuiButton-text {
         background-color: transparent;
       }
@@ -2802,6 +2983,14 @@ const DotButton = forwardRef(({
       color = 'inherit';
       variant = 'text';
       break;
+    case 'ai':
+      color = 'primary';
+      variant = 'ai';
+      break;
+    case 'ai-outlined':
+      color = 'inherit';
+      variant = 'ai-outlined';
+      break;
   }
   return jsx(DotTooltip, {
     childrenDisplayStyle: "inline-block",
@@ -3694,6 +3883,29 @@ const StyledIconButton = styled(IconButton)`
       ${color === 'default' ? css`
               color: ${theme.palette.figma.icon.black};
             ` : ''}
+
+      &.MuiIconButton-colorAi{
+        color: ${theme.palette.figma.icon.white};
+        background: ${theme.palette.figma.gradient.normal};
+             
+        &:hover {
+          background: ${theme.palette.figma.gradient.elevated};
+        }
+        &:active {
+          background-color: ${theme.palette.figma.gradient.ripple};
+        }
+        &:focus {
+          background-color: ${theme.palette.figma.gradient.active};
+        }
+        .dot-icon {
+          color: ${theme.palette.figma.icon.white};
+        }
+        &.Mui-disabled {
+          background: ${theme.palette.figma.disabled.normal};
+          border: 1px solid ${theme.palette.figma.border.defaultButton};
+        }
+      }
+
       font-size: inherit;
       padding: 10px;
 
@@ -3719,11 +3931,15 @@ const StyledIconButton = styled(IconButton)`
 
       &.shape-square {
         border-radius: 4px;
-        border: 1px solid ${theme.palette.figma.border.defaultButton};
         padding: ${theme.spacing(1)};
+        ${color !== 'ai' ? css`
+                border: 1px solid ${theme.palette.figma.border.defaultButton};
+              ` : ''}
 
         &:active {
-          background: ${theme.palette.figma.toggleTabs.bckg};
+          ${color !== 'ai' ? css`
+                  background: ${theme.palette.figma.toggleTabs.bckg};
+                ` : ''}          
         }
       }
 
@@ -4667,6 +4883,7 @@ const getInitialState = (value, defaultValue) => ({
   inputValue: value || defaultValue || ''
 });
 const DotInputText = ({
+  ai = false,
   autoComplete = 'off',
   autoFocus,
   className,
@@ -4715,11 +4932,12 @@ const DotInputText = ({
   const hasError = error && errorClassName;
   const hasWarning = !error && warning && warningClassName;
   const hasSuccess = !error && !warning && success && successClassName;
+  const isAiEnabled = ai && inputAiClassName$1;
   const hasEndAdornmentIcon = endIcon || error || hasWarning || hasSuccess;
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$1o, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$1o, hasError, hasWarning, hasSuccess, isAiEnabled, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -6699,6 +6917,7 @@ const DotChip = ({
 const rootClassName$Z = 'dot-autocomplete';
 const inputRootClassName = 'dot-input-root';
 const inputMediumClassName = 'dot-input-medium';
+const inputAiClassName = 'dot-input-ai';
 const StyledAutocomplete = styled(Autocomplete)`
   ${({
   theme
@@ -6737,6 +6956,19 @@ 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;
+      }
+    }
   `}
 `;
 
@@ -6809,6 +7041,8 @@ const DEFAULT_ACTION_ITEM_TEXT = 'Add new item';
 const DotAutoComplete = ({
   ListboxComponent,
   actionItem,
+  ai = false,
+  aiAction,
   ariaLabel,
   autoFocus,
   autoHighlight,
@@ -6875,7 +7109,7 @@ const DotAutoComplete = ({
   const popperOpen = !readOnly && (open || isOpened);
   const preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
   const textFieldWarningClassName = !error && warning && warningClassName;
-  const rootClasses = getRootClassNames(className, size);
+  const rootClasses = useStylesWithRootClass(getRootClassNames(className, size), ai ? inputAiClassName : '');
   const textFieldRootClasses = getTextFieldRootClassNames(textFieldWarningClassName, readOnly);
   const inputRootClasses = getInputRootClassNames(dense);
   const popperClasses = useStylesWithRootClass(rootClassName$1d, popperClassName);
@@ -6915,6 +7149,9 @@ const DotAutoComplete = ({
     event.relatedTarget !== actionItemRef.current && setIsOpened(false);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   };
+  const handleAiAction = useCallback(inputText => {
+    aiAction === null || aiAction === void 0 ? void 0 : aiAction(inputText);
+  }, [aiAction]);
   const onActionButtonClick = () => {
     setIsOpened(false);
     textFieldInput.focus();
@@ -7046,6 +7283,20 @@ const DotAutoComplete = ({
       }), getInputAdornment(), nativeEndAdornment]
     });
   };
+  const renderAISendAdornment = params => {
+    const {
+      inputProps
+    } = params;
+    return jsx(DotIconButton, {
+      iconId: "send-airplane",
+      tooltip: "Send",
+      "data-testid": dataTestId && `${dataTestId}-send-airplane-icon`,
+      shape: "square",
+      color: "ai",
+      disabled: !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.value),
+      onClick: () => handleAiAction(inputProps === null || inputProps === void 0 ? void 0 : inputProps.value.toString())
+    });
+  };
   const renderTrimmedLongOptions = (props, option) => {
     const key = 'id' in option ? option.id : option.title;
     return jsx(DotTooltip, {
@@ -7064,6 +7315,15 @@ const DotAutoComplete = ({
   const handleRenderOption = (props, option, state) => {
     return renderOption ? renderOption(props, option, state) : renderTrimmedLongOptions(props, option);
   };
+  const getEndAdornment = params => {
+    if (ai) {
+      return renderAISendAdornment(params);
+    }
+    if (!readOnly) {
+      return renderEndAdornment(params.InputProps.endAdornment);
+    }
+    return undefined;
+  };
   return jsx(StyledAutocomplete, {
     PopperComponent: DotPopper,
     "aria-label": ariaLabel,
@@ -7150,7 +7410,7 @@ const DotAutoComplete = ({
               htmlFor: inputId
             },
             InputProps: Object.assign(Object.assign({}, params.InputProps), {
-              endAdornment: !readOnly ? renderEndAdornment(params.InputProps.endAdornment) : undefined
+              endAdornment: getEndAdornment(params)
             }),
             inputRef: textFieldRef,
             label: persistentLabel ? null : label,
@@ -12415,11 +12675,14 @@ const inProgressEditMessage = 'This is a published dashboard. Changes will not b
 // in_progress_changes object itself, which will have parent_id set.
 // The Dashboard Table/Grid will always give the parent dashboard, while in the editor we will be dealing with the
 // in_progress_changes object.  This function accounts for both cases
-const dashboardLocked = (dashboard, userId) => {
-  if (dashboard.in_progress_changes) {
-    return dashboard.in_progress_changes.author_id !== userId;
-  } else if (dashboard.parent_id) {
-    return dashboard.author_id !== userId;
+const dashboardLocked = (dashboard, user) => {
+  if (user) {
+    if (dashboard.in_progress_changes) {
+      return dashboard.in_progress_changes.author_id !== user.id;
+    } else if (dashboard.parent_id) {
+      return dashboard.author_id !== user.id;
+    }
+    return false;
   }
   return false;
 };
@@ -12491,7 +12754,7 @@ function DotDashboardOptionsMenu({
   const isDraft = !dashboard.parent_id && dashboard.lifecycle_state === DashboardView.lifecycle_state.DRAFT;
   const isPublished = dashboard.parent_id || dashboard.lifecycle_state === DashboardView.lifecycle_state.PUBLISHED;
   const menuItems = [];
-  if (!isEdit && onViewMode && !dashboard.is_ootb_dashboard && !dashboardLocked(dashboard, currentUser.id)) {
+  if (!isEdit && onViewMode && !dashboard.is_ootb_dashboard && !dashboardLocked(dashboard, currentUser)) {
     menuItems.push({
       children: jsx(DotButton, {
         ariaLabel: "Edit dashboard",
@@ -12504,7 +12767,7 @@ function DotDashboardOptionsMenu({
       key: 'edit'
     });
   }
-  if (onUpdatedProperties && !dashboard.is_ootb_dashboard && !dashboardLocked(dashboard, currentUser.id)) {
+  if (onUpdatedProperties && !dashboard.is_ootb_dashboard && !dashboardLocked(dashboard, currentUser)) {
     let menuItem = jsx(DotButton, {
       ariaLabel: "Edit dashboard properties",
       className: isEdit ? 'disabled-menu-item' : '',
@@ -12555,7 +12818,7 @@ function DotDashboardOptionsMenu({
       key: 'duplicate'
     });
   }
-  if (onStartDelete && !dashboard.is_ootb_dashboard && !dashboardLocked(dashboard, currentUser.id)) {
+  if (onStartDelete && !dashboard.is_ootb_dashboard && !dashboardLocked(dashboard, currentUser)) {
     menuItems.push({
       children: jsx(DotButton, {
         ariaLabel: "Delete dashboard",
@@ -12692,7 +12955,7 @@ function DotDashboardOptionsMenu({
       open: isEditPropertiesDialogOpen,
       onClose: handleCloseEditProperties,
       onSubmit: handleSubmitEditProperties,
-      editDashboard: editInProgressByUser(dashboard, currentUser.id) && dashboard.in_progress_changes ? dashboard.in_progress_changes : dashboard
+      editDashboard: currentUser && editInProgressByUser(dashboard, currentUser.id) && dashboard.in_progress_changes ? dashboard.in_progress_changes : dashboard
     }), jsx(DotIconButton, {
       className: "expand-button",
       "data-testid": "card-header-action-button",

package/package.json

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

package/src/lib/components/BaseButtonProps.d.ts

@@ -1,7 +1,7 @@
 import { MouseEvent, KeyboardEvent, ReactNode } from 'react';
 import { CommonProps } from './CommonProps';
 import { TooltipPlacement } from './tooltip';
-export type ButtonType = 'destructive' | 'primary' | 'outlined' | 'text';
+export type ButtonType = 'destructive' | 'primary' | 'outlined' | 'text' | 'ai' | 'ai-outlined';
 export type ButtonSize = 'small' | 'medium' | 'large';
 export interface BaseButtonProps extends CommonProps {
     /** If true, the button will be focused **/

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

@@ -2,5 +2,5 @@ export declare const dashboardCategoriesContainerClassName = "dashboard-categori
 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 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, actionItem, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, 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>;
+export declare const StyledAppSelectDotAutoComplete: import("styled-components").StyledComponent<(<T extends import("../..").AutoCompleteOption>({ ListboxComponent, actionItem, ai, aiAction, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, 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>;
 export declare const StyledAppSelectAutoCompleteOption: import("styled-components").StyledComponent<"li", any, {}, never>;

package/src/lib/components/auto-complete/AutoComplete.d.ts

@@ -13,6 +13,10 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     ListboxComponent?: JSXElementConstructor<HTMLAttributes<HTMLElement>>;
     /** Action button as the last element on the menu **/
     actionItem?: ActionItem;
+    /** If true, applies a gradient color to the border */
+    ai?: boolean;
+    /** Event callback */
+    aiAction?: (inputText: string) => void;
     /** This prop helps users to fill forms faster */
     autoFocus?: boolean;
     /** If true, the first option is automatically highlighted. */
@@ -102,4 +106,4 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     /** If true, the label will be displayed in a warning state. */
     warning?: boolean;
 }
-export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, 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, }: AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DotAutoComplete: <T extends AutoCompleteOption>({ ListboxComponent, actionItem, ai, aiAction, ariaLabel, autoFocus, autoHighlight, className, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, dense, 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, }: AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/auto-complete/AutoComplete.styles.d.ts

@@ -2,4 +2,5 @@ import { Autocomplete } from '@mui/material';
 export declare const rootClassName = "dot-autocomplete";
 export declare const inputRootClassName = "dot-input-root";
 export declare const inputMediumClassName = "dot-input-medium";
+export declare const inputAiClassName = "dot-input-ai";
 export declare const StyledAutocomplete: import("styled-components").StyledComponent<typeof Autocomplete, any, {}, never>;

package/src/lib/components/button/IconButton.d.ts

@@ -2,7 +2,7 @@ import { MouseEvent, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
 import { IconFontSize } from '../icon/Icon';
 import { TooltipPlacement } from '../tooltip';
-export type IconButtonColor = 'default' | 'inherit' | 'primary' | 'secondary';
+export type IconButtonColor = 'default' | 'inherit' | 'primary' | 'secondary' | 'ai';
 export type IconButtonSize = 'small' | 'medium';
 export type IconButtonShape = 'circle' | 'square';
 export interface CommonIconButtonProps extends CommonProps {

package/src/lib/components/icon/Icon.d.ts

@@ -1,6 +1,8 @@
 import { CommonProps } from '../CommonProps';
-export type IconFontSize = 'small' | 'medium';
+export type IconFontSize = 'small' | 'medium' | 'large';
 export interface IconProps extends CommonProps {
+    /** If true, applies a gradient color to the icon */
+    ai?: boolean;
     /** If true, makes a tooltip not interactive, so it will close when the user hovers over the tooltip before the leaveDelay is expired. */
     disableInteractive?: boolean;
     /** Determines the size of the icon and spacing around it */
@@ -10,4 +12,4 @@ export interface IconProps extends CommonProps {
     /** Tooltip text displayed on hover */
     tooltip?: string;
 }
-export declare const DotIcon: ({ ariaLabel, ariaRole, className, "data-testid": dataTestId, disableInteractive, fontSize, iconId, tooltip, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotIcon: ({ ariaLabel, ariaRole, className, "data-testid": dataTestId, disableInteractive, fontSize, iconId, tooltip, ai, }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/icon/Icon.styles.d.ts

@@ -1,5 +1,6 @@
 import '@digital-ai/dot-icons';
 export declare const rootClassName = "dot-icon";
+export declare const aiIconClassName = "dot-icon-ai";
 export declare const StyledIcon: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").IconTypeMap<{}, "span">> & {
     muiName: string;
 }, any, {}, never>;

package/src/lib/components/icon/index.d.ts

@@ -0,0 +1,2 @@
+export { DotIcon } from './Icon';
+export type { IconProps, IconFontSize } from './Icon';

package/src/lib/components/index.d.ts

@@ -15,6 +15,7 @@ export type { DialogButtonProps, SubmitButtonProps } from './dialog/Dialog';
 export type { DrawerAnchor } from './drawer/Drawer';
 export type { DynamicFormProps } from './dynamic-form/DynamicForm';
 export type { ConditionFunction, ControlClickHandler, DisabledConditionFunction, DisabledControlCondition, DynamicFormConfig, DynamicFormControl, DynamicFormControlProps, DynamicFormControlType, DynamicFormOutputData, DynamicFormSectionProps, DynamicFormState, DynamicFormStateItem, FieldValidation, } from './dynamic-form/models';
+export type { IconFontSize, IconProps } from './icon';
 export type { InputTextProps } from './input-form-fields/InputText';
 export type { InputSelectProps, InputSelectOption, OptionType, } from './input-form-fields/InputSelect';
 export type { LinkUnderline } from './link/Link';
@@ -95,7 +96,7 @@ export { DotEmptyFilterState } from './empty-state/EmptyFilterState';
 export { DotForm } from './form/Form';
 export { DotFormGroup } from './form-group/FormGroup';
 export { DotDynamicForm } from './dynamic-form/DynamicForm';
-export { DotIcon } from './icon/Icon';
+export { DotIcon } from './icon';
 export { DotIllustration } from './illustration/Illustration';
 export { DotImpactDialog } from './impact-dialog/ImpactDialog';
 export { DotInlineEdit } from './inline-edit';

package/src/lib/components/input-form-fields/InputFormFields.propTypes.d.ts

@@ -2,6 +2,8 @@ import { ChangeEvent, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'react';
 import { CommonProps } from '../CommonProps';
 export type inputSizeOptions = 'small' | 'medium';
 export interface InputProps extends CommonProps {
+    /** If true, applies no border  */
+    ai?: boolean;
     /** This prop helps users to fill forms faster */
     autoFocus?: boolean;
     /** default value of the input element */

package/src/lib/components/input-form-fields/InputFormFields.styles.d.ts

@@ -11,6 +11,7 @@ export declare const fieldsetClassName = "MuiOutlinedInput-notchedOutline";
 export declare const readOnlyClassName = "read-only";
 export declare const resizerClassName = "with-resizer";
 export declare const ROW_HEIGHT = 37;
+export declare const inputAiClassName = "dot-input-ai";
 interface StyledTextFieldProps {
     $maxRows?: number;
     $minRows?: number;

package/src/lib/components/input-form-fields/InputText.d.ts

@@ -3,6 +3,8 @@ import { InputProps } from './InputFormFields.propTypes';
 export declare const DELAY_MS = 300;
 export type endAdornmentIconType = 'warning' | 'error' | 'check';
 export interface InputTextProps extends InputProps {
+    /** If true, applies no border  */
+    ai?: boolean;
     /** The HTML autocomplete property to pass along to the input tag. Used for
      controlling autofill behavior in forms. This property follows this HTML spec:
      https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
@@ -40,4 +42,4 @@ export interface EndIconProps {
     success?: boolean;
     warning?: boolean;
 }
-export declare const DotInputText: ({ autoComplete, autoFocus, className, defaultValue, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, hasResizer, helperText, endIcon, endText, id, informationToolTip, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onClear, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotInputText: ({ ai, autoComplete, autoFocus, className, defaultValue, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, hasResizer, helperText, endIcon, endText, id, informationToolTip, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onClear, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: InputTextProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/search/Search.styles.d.ts

@@ -1,2 +1,2 @@
 export declare const rootClassName = "dot-search";
-export declare const StyledSearch: import("styled-components").StyledComponent<({ autoComplete, autoFocus, className, defaultValue, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, hasResizer, helperText, endIcon, endText, id, informationToolTip, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onClear, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: import("../input-form-fields/InputText").InputTextProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const StyledSearch: import("styled-components").StyledComponent<({ ai, autoComplete, autoFocus, className, defaultValue, "data-pendoid": dataPendoId, "data-testid": dataTestId, disabled, error, endAdornmentTooltip, fullWidth, hasDebounce, hasResizer, helperText, endIcon, endText, id, informationToolTip, inputRef, label, max, maxLength, maxRows, min, minLength, minRows, multiline, name, onBlur, onChange, onClear, onFocus, onKeyDown, onMouseUp, persistentLabel, placeholder, readOnly, required, shrink, startIcon, size, success, type, value, warning, }: import("../input-form-fields/InputText").InputTextProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

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

@@ -20,6 +20,17 @@ declare module '@mui/material/styles/createPalette' {
         purple?: PaletteColorOptions;
     }
 }
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        ai: true;
+        'ai-outlined': true;
+    }
+}
+declare module '@mui/material/IconButton' {
+    interface IconButtonPropsColorOverrides {
+        ai: true;
+    }
+}
 export type ThemeOptions = 'light' | 'dark';
 export declare const typographyOptions: TypographyOptions;
 export declare const breakpointOptions: BreakpointOptions;

package/src/lib/theme-provider/colors/light-theme-colors.d.ts

@@ -87,20 +87,50 @@ export declare const yA100 = "#ffffff";
 export declare const yA200 = "#fff2d7";
 export declare const yA400 = "#ffe2a4";
 export declare const yA700 = "#ffda8b";
-export declare const p50 = "#f3e4ee";
-export declare const p100 = "#e0bbd4";
-export declare const p200 = "#cc8eb8";
-export declare const p300 = "#b8609c";
-export declare const p400 = "#a83e86";
-export declare const p500 = "#991c71";
-export declare const p600 = "#911969";
-export declare const p700 = "#86145e";
-export declare const p800 = "#7c1154";
-export declare const p900 = "#6b0942";
+export declare const p50 = "#f5e9fb";
+export declare const p100 = "#ebd4f7";
+export declare const p200 = "#d7aaee";
+export declare const p300 = "#c37fe6";
+export declare const p400 = "#af54de";
+export declare const p500 = "#9e2fd7";
+export declare const p600 = "#7c21ab";
+export declare const p700 = "#5d1980";
+export declare const p800 = "#3e1155";
+export declare const p900 = "#2e0c40";
 export declare const pA100 = "#ff9cd1";
 export declare const pA200 = "#ff69b9";
 export declare const pA400 = "#ff36a2";
 export declare const pA700 = "#ff1d96";
+export declare const pi50 = "#fce9f6";
+export declare const pi100 = "#f8d3ee";
+export declare const pi200 = "#f1a7dc";
+export declare const pi300 = "#eb7acb";
+export declare const pi400 = "#e44eb9";
+export declare const pi500 = "#dd22a8";
+export declare const pi600 = "#b11b86";
+export declare const pi700 = "#851465";
+export declare const pi800 = "#580e43";
+export declare const pi900 = "#2c0722";
+export declare const v50 = "#ede8fd";
+export declare const v100 = "#dbd1fa";
+export declare const v200 = "#b6a3f5";
+export declare const v300 = "#9275f0";
+export declare const v400 = "#704aec";
+export declare const v500 = "#4c1de7";
+export declare const v600 = "#3a13b9";
+export declare const v700 = "#2c0f8a";
+export declare const v800 = "#1d0a5c";
+export declare const v900 = "#0f052e";
 export declare const selectedGray = "rgba(0, 0, 0, 0.12)";
 export declare const lightSelectedGray = "rgba(0, 0, 0, 0.08)";
 export declare const hoverGray = "rgba(0, 0, 0, 0.04)";
+export declare const aiNormalDark: string;
+export declare const aiActiveDark: string;
+export declare const aiElevatedDark: string;
+export declare const aiLightDark: string;
+export declare const aiAutoCompleteBorderDark: string;
+export declare const aiNormalLight: string;
+export declare const aiActiveLight: string;
+export declare const aiElevatedLight: string;
+export declare const aiLightLight: string;
+export declare const aiAutoCompleteBorderLight: string;

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

@@ -27,6 +27,14 @@ export interface BreakpointOptions {
     };
 }
 export interface FigmaTheme {
+    aiPink: {
+        active: string;
+        elevated: string;
+        light: string;
+        normal: string;
+        ripple: string;
+        rippleLight: string;
+    };
     appToolbar: {
         background: string;
         btnHover: string;
@@ -62,6 +70,13 @@ export interface FigmaTheme {
     disabled: {
         normal: string;
     };
+    gradient: {
+        active: string;
+        ai: string;
+        elevated: string;
+        light: string;
+        normal: string;
+    };
     graph: {
         alert: {
             error: string;