@digital-ai/dot-components 5.2.0 → 5.3.0

package/index.esm.js

@@ -466,7 +466,7 @@ const lightFigmaColors = {
     }
   },
   icon: {
-    black: n700,
+    gray: n400,
     disabled: n300,
     white: n0
   },
@@ -628,7 +628,7 @@ const darkFigmaColors = {
     }
   },
   icon: {
-    black: n100,
+    gray: n100,
     disabled: n400,
     white: n700
   },
@@ -871,7 +871,7 @@ const avatarColors = {
     backgroundColor: lightFigmaColors.typography.gray
   },
   default: {
-    color: lightFigmaColors.icon.black,
+    color: lightFigmaColors.icon.gray,
     backgroundColor: lightFigmaColors.background.level1.deep
   },
   green: {
@@ -926,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: {
@@ -1493,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;
@@ -1571,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;
@@ -1614,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};
         }
 
@@ -1625,7 +1635,7 @@ const StyledTextField = styled(TextField)`
       }
 
       &.${errorClassName} {
-        .MuiOutlinedInput-notchedOutline {
+        .${fieldsetClassName} {
           border-color: ${theme.palette.figma.destructive.normal};
         }
 
@@ -1635,7 +1645,7 @@ const StyledTextField = styled(TextField)`
       }
 
       &.${warningClassName} {
-        .MuiOutlinedInput-notchedOutline {
+        .${fieldsetClassName} {
           border-color: ${theme.palette.figma.warning.normal};
         }
 
@@ -1644,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;
 
@@ -1681,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 {
@@ -2689,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;
       }
 
@@ -2881,7 +2876,7 @@ const StyledButton = styled(Button)`
         }
 
         .dot-icon {
-          color: ${theme.palette.figma.icon.black};
+          color: ${theme.palette.figma.icon.gray};
         }
       }
 
@@ -3173,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} {
@@ -3935,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};
         }
@@ -3993,7 +3988,7 @@ const StyledIconButton = styled(IconButton)`
         &:active {
           ${color !== 'ai' ? css`
                   background: ${theme.palette.figma.toggleTabs.bckg};
-                ` : ''}          
+                ` : ''}
         }
       }
 
@@ -4317,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 {
@@ -4986,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;
@@ -5965,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};
           }
         }
 
@@ -6043,7 +6038,7 @@ const StyledSidebar = styled.aside`
               margin: 0;
 
               i:before {
-                color: ${theme.palette.figma.typography.gray};
+                color: ${theme.palette.figma.icon.gray};
               }
             }
           }
@@ -6412,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",
@@ -6622,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};
         }
       }
     }
@@ -6819,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;
       }
 
@@ -6891,7 +6887,7 @@ const StyledChip = styled(Chip)`
         }
 
         .MuiChip-deleteIcon:hover {
-          color: ${theme.palette.figma.icon.black};
+          color: ${theme.palette.figma.icon.gray};
         }
       }
 
@@ -7013,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};
       }
     }
   `}
@@ -7172,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);
@@ -7298,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);
@@ -7389,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) {
@@ -7410,6 +7400,7 @@ const DotAutoComplete = ({
     defaultValue: getDefaultAutoCompleteValue(multiple, defaultValue),
     disableCloseOnSelect: disableCloseOnSelect,
     disabled: disabled,
+    disableClearable: isAiEnabled,
     filterOptions: filterOptions,
     filterSelectedOptions: filterSelectedOptions,
     freeSolo: freesolo,
@@ -7482,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
@@ -7500,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);
@@ -7678,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;
       }
@@ -8048,7 +8039,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
       }
 
       .dot-icon {
-        color: ${theme.palette.figma.icon.black};
+        color: ${theme.palette.figma.icon.gray};
         display: flex;
 
         + p {
@@ -15569,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,
@@ -15704,7 +15695,7 @@ const StyledSplitButtonGroup = styled(ButtonGroup)`
           border-left: none;
 
           .dot-icon {
-            color: ${theme.palette.figma.icon.black};
+            color: ${theme.palette.figma.icon.gray};
           }
         }
       }
@@ -15924,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.2.0",
+  "version": "5.3.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

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: {