@digital-ai/dot-components 3.24.1 → 3.25.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, createContext, useMemo, useContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
-import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Fade, StyledEngineProvider, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, 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, StepContent, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide } from '@mui/material';
+import { Tooltip, InputAdornment, InputLabel, TextField, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, Toolbar, Fade, StyledEngineProvider, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, 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, StepContent, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide } from '@mui/material';
 import '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
@@ -110,227 +110,6 @@ const DotTooltip = ({
   }) : children;
 };
 
-const rootClassName$1k = 'dot-icon';
-const StyledIcon = styled(Icon)`
-  ${({
-  theme
-}) => css`
-    &.${rootClassName$1k} {
-      color: ${theme.palette.figma.icon.black};
-      font-size: 20px;
-
-      &.MuiIcon-fontSizeLarge {
-        font-size: 28px;
-        height: 35px;
-        width: 35px;
-
-        i {
-          height: 28px;
-        }
-      }
-      &.MuiIcon-fontSizeSmall {
-        font-size: 18px;
-
-        i {
-          height: 18px;
-        }
-      }
-
-      i {
-        height: 20px;
-      }
-    }
-  `}
-`;
-
-const DotIcon = ({
-  ariaLabel,
-  ariaRole = 'img',
-  className,
-  'data-testid': dataTestId,
-  fontSize = 'medium',
-  iconId,
-  tooltip
-}) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1k, className);
-  return jsx(DotTooltip, {
-    title: tooltip,
-    children: jsx(StyledIcon, {
-      "aria-hidden": "false",
-      "aria-label": ariaLabel || `${iconId} icon`,
-      classes: {
-        root: rootClasses
-      },
-      "data-testid": dataTestId,
-      fontSize: fontSize,
-      role: ariaRole,
-      children: jsx("i", {
-        "aria-label": ariaLabel || `${iconId} icon`,
-        className: `icon-${iconId} dot-i`,
-        "data-testid": dataTestId && `${dataTestId}-i`,
-        role: ariaRole
-      })
-    })
-  });
-};
-
-const DotTypography = ({
-  ariaLabel,
-  ariaLevel,
-  ariaRole,
-  className,
-  'data-testid': dataTestId,
-  children,
-  component,
-  noMarginBottom,
-  noWrap,
-  variant
-}) => {
-  const rootClasses = useStylesWithRootClass('dot-typography', className);
-  useEffect(() => {
-    if (ariaRole === 'heading' && !ariaLevel) {
-      console.warn('please include ariaLevel when using ariaRole="heading"');
-    }
-    if (noMarginBottom) {
-      console.warn('DEPRECATED: `noMarginBottom` on `DotTypography` is no longer included');
-    }
-  }, []);
-  return jsx(Typography, {
-    "aria-label": ariaLabel,
-    "aria-level": ariaLevel,
-    classes: {
-      root: rootClasses
-    },
-    component: component,
-    "data-testid": dataTestId,
-    noWrap: noWrap,
-    role: ariaRole,
-    style: {
-      marginBottom: noMarginBottom ? 0 : undefined
-    },
-    variant: variant,
-    children: children
-  });
-};
-
-const rootClassName$1j = 'dot-accordion';
-const summaryClassName = 'dot-accordion-summary';
-const detailClassName = 'dot-accordion-details';
-const StyledAccordion = styled(Accordion)`
-  ${({
-  theme
-}) => css`
-    .${detailClassName} {
-      background: ${theme.palette.figma.background.level1.white};
-    }
-
-    &.${rootClassName$1j} .${summaryClassName} {
-      align-items: center;
-      background: ${theme.palette.figma.background.level1.white};
-      color: ${theme.palette.figma.typography.black};
-      display: flex;
-
-      &.Mui-expanded {
-        border-top: 1px solid ${theme.palette.figma.border.default};
-        margin: 0;
-
-        &:before {
-          opacity: 1;
-        }
-      }
-
-      .MuiAccordionSummary-content {
-        align-items: center;
-        gap: ${theme.spacing(1)};
-        width: calc(100% - ${theme.spacing(5)});
-
-        .dot-tooltip {
-          overflow: hidden;
-        }
-      }
-
-      .MuiAccordionSummary-expandIconWrapper {
-        padding: ${theme.spacing(1.5)};
-        margin-right: ${theme.spacing(-1.5)};
-      }
-
-      .MuiTypography-root {
-        margin-bottom: 0;
-      }
-      .MuiTypography-body1 {
-        padding: 2px 0;
-      }
-    }
-  `}
-`;
-
-const DotAccordion = ({
-  actions,
-  ariaLabel,
-  children,
-  className,
-  'data-pendoid': dataPendoId = rootClassName$1j,
-  'data-testid': dataTestId = 'dot-accordion',
-  disabled = false,
-  expanded,
-  hasElevation = false,
-  onChange,
-  square = false,
-  startIcon = null,
-  summary,
-  noWrap = true
-}) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
-  const [elevation, setElevation] = useState();
-  useEffect(() => {
-    if (onChange && expanded === undefined) {
-      console.warn('The use of an `onChange` callback makes this a controlled component but no `expanded` state has been provided. In effect, this makes the component disabled.');
-    }
-  }, []);
-  useEffect(() => {
-    setElevation(hasElevation ? 1 : 0);
-  }, [hasElevation]);
-  return jsxs(StyledAccordion, {
-    "aria-label": ariaLabel,
-    className: rootClasses,
-    "data-pendoid": dataPendoId,
-    "data-testid": dataTestId,
-    disabled: disabled,
-    elevation: elevation,
-    expanded: onChange ? expanded : undefined,
-    onChange: onChange,
-    square: square,
-    children: [jsxs(AccordionSummary, {
-      "aria-label": ariaLabel || summary,
-      classes: {
-        root: summaryClassName
-      },
-      "data-testid": `${dataTestId}-summary`,
-      expandIcon: jsx(DotIcon, {
-        iconId: "chevron-down"
-      }),
-      role: "button",
-      children: [startIcon, jsx(DotTooltip, {
-        "data-testid": "accordion-tooltip",
-        title: noWrap ? summary : '',
-        children: jsx(DotTypography, {
-          noWrap: noWrap,
-          variant: "body1",
-          children: summary
-        })
-      })]
-    }), jsx(AccordionDetails, {
-      classes: {
-        root: detailClassName
-      },
-      "data-testid": `${dataTestId}-details`,
-      children: children
-    }), actions && jsx(AccordionActions, {
-      children: actions
-    })]
-  });
-};
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const formHelperTextRootStyles = theme => css`
   align-items: flex-end;
@@ -396,8 +175,9 @@ const readOnlyStyles = theme => css`
   }
 `;
 
-const rootClassName$1i = 'dot-text-field';
+const rootClassName$1k = 'dot-text-field';
 const rootSelectClassName = 'dot-select-field';
+const wrapperClassName$2 = 'dot-label-wrapper';
 const labelClassName = 'dot-input-label';
 const errorClassName = 'dot-error';
 const warningClassName = 'dot-warning';
@@ -448,7 +228,7 @@ const StyledTextField = styled(TextField)`
   $maxRows,
   $minRows
 }) => css`
-    &.${rootClassName$1i} {
+    &.${rootClassName$1k} {
       .MuiInputBase-root {
         margin-bottom: 0;
       }
@@ -510,7 +290,7 @@ const StyledTextField = styled(TextField)`
       margin-right: ${theme.spacing(2)};
     }
 
-    &.${rootSelectClassName}, &.${rootClassName$1i} {
+    &.${rootSelectClassName}, &.${rootClassName$1k} {
       .${adornmentIconClassName} {
         color: ${theme.palette.figma.icon.black};
         p {
@@ -601,6 +381,231 @@ const StyledTextField = styled(TextField)`
   `}
 `;
 
+const rootClassName$1j = 'dot-icon';
+const StyledIcon = styled(Icon)`
+  ${({
+  theme
+}) => css`
+    &.${rootClassName$1j} {
+      color: ${theme.palette.figma.icon.black};
+      font-size: 20px;
+
+      &.MuiIcon-fontSizeLarge {
+        font-size: 28px;
+        height: 35px;
+        width: 35px;
+
+        i {
+          height: 28px;
+        }
+      }
+      &.MuiIcon-fontSizeSmall {
+        font-size: 18px;
+
+        i {
+          height: 18px;
+        }
+      }
+
+      i {
+        height: 20px;
+      }
+
+      &.${warningClassName} {
+        color: ${theme.palette.figma.warning.normal};
+      }
+    }
+  `}
+`;
+
+const DotIcon = ({
+  ariaLabel,
+  ariaRole = 'img',
+  className,
+  'data-testid': dataTestId,
+  fontSize = 'medium',
+  iconId,
+  tooltip
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$1j, className);
+  return jsx(DotTooltip, {
+    title: tooltip,
+    children: jsx(StyledIcon, {
+      "aria-hidden": "false",
+      "aria-label": ariaLabel || `${iconId} icon`,
+      classes: {
+        root: rootClasses
+      },
+      "data-testid": dataTestId,
+      fontSize: fontSize,
+      role: ariaRole,
+      children: jsx("i", {
+        "aria-label": ariaLabel || `${iconId} icon`,
+        className: `icon-${iconId} dot-i`,
+        "data-testid": dataTestId && `${dataTestId}-i`,
+        role: ariaRole
+      })
+    })
+  });
+};
+
+const DotTypography = ({
+  ariaLabel,
+  ariaLevel,
+  ariaRole,
+  className,
+  'data-testid': dataTestId,
+  children,
+  component,
+  noMarginBottom,
+  noWrap,
+  variant
+}) => {
+  const rootClasses = useStylesWithRootClass('dot-typography', className);
+  useEffect(() => {
+    if (ariaRole === 'heading' && !ariaLevel) {
+      console.warn('please include ariaLevel when using ariaRole="heading"');
+    }
+    if (noMarginBottom) {
+      console.warn('DEPRECATED: `noMarginBottom` on `DotTypography` is no longer included');
+    }
+  }, []);
+  return jsx(Typography, {
+    "aria-label": ariaLabel,
+    "aria-level": ariaLevel,
+    classes: {
+      root: rootClasses
+    },
+    component: component,
+    "data-testid": dataTestId,
+    noWrap: noWrap,
+    role: ariaRole,
+    style: {
+      marginBottom: noMarginBottom ? 0 : undefined
+    },
+    variant: variant,
+    children: children
+  });
+};
+
+const rootClassName$1i = 'dot-accordion';
+const summaryClassName = 'dot-accordion-summary';
+const detailClassName = 'dot-accordion-details';
+const StyledAccordion = styled(Accordion)`
+  ${({
+  theme
+}) => css`
+    .${detailClassName} {
+      background: ${theme.palette.figma.background.level1.white};
+    }
+
+    &.${rootClassName$1i} .${summaryClassName} {
+      align-items: center;
+      background: ${theme.palette.figma.background.level1.white};
+      color: ${theme.palette.figma.typography.black};
+      display: flex;
+
+      &.Mui-expanded {
+        border-top: 1px solid ${theme.palette.figma.border.default};
+        margin: 0;
+
+        &:before {
+          opacity: 1;
+        }
+      }
+
+      .MuiAccordionSummary-content {
+        align-items: center;
+        gap: ${theme.spacing(1)};
+        width: calc(100% - ${theme.spacing(5)});
+
+        .dot-tooltip {
+          overflow: hidden;
+        }
+      }
+
+      .MuiAccordionSummary-expandIconWrapper {
+        padding: ${theme.spacing(1.5)};
+        margin-right: ${theme.spacing(-1.5)};
+      }
+
+      .MuiTypography-root {
+        margin-bottom: 0;
+      }
+      .MuiTypography-body1 {
+        padding: 2px 0;
+      }
+    }
+  `}
+`;
+
+const DotAccordion = ({
+  actions,
+  ariaLabel,
+  children,
+  className,
+  'data-pendoid': dataPendoId = rootClassName$1i,
+  'data-testid': dataTestId = 'dot-accordion',
+  disabled = false,
+  expanded,
+  hasElevation = false,
+  onChange,
+  square = false,
+  startIcon = null,
+  summary,
+  noWrap = true
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$1i, className);
+  const [elevation, setElevation] = useState();
+  useEffect(() => {
+    if (onChange && expanded === undefined) {
+      console.warn('The use of an `onChange` callback makes this a controlled component but no `expanded` state has been provided. In effect, this makes the component disabled.');
+    }
+  }, []);
+  useEffect(() => {
+    setElevation(hasElevation ? 1 : 0);
+  }, [hasElevation]);
+  return jsxs(StyledAccordion, {
+    "aria-label": ariaLabel,
+    className: rootClasses,
+    "data-pendoid": dataPendoId,
+    "data-testid": dataTestId,
+    disabled: disabled,
+    elevation: elevation,
+    expanded: onChange ? expanded : undefined,
+    onChange: onChange,
+    square: square,
+    children: [jsxs(AccordionSummary, {
+      "aria-label": ariaLabel || summary,
+      classes: {
+        root: summaryClassName
+      },
+      "data-testid": `${dataTestId}-summary`,
+      expandIcon: jsx(DotIcon, {
+        iconId: "chevron-down"
+      }),
+      role: "button",
+      children: [startIcon, jsx(DotTooltip, {
+        "data-testid": "accordion-tooltip",
+        title: noWrap ? summary : '',
+        children: jsx(DotTypography, {
+          noWrap: noWrap,
+          variant: "body1",
+          children: summary
+        })
+      })]
+    }), jsx(AccordionDetails, {
+      classes: {
+        root: detailClassName
+      },
+      "data-testid": `${dataTestId}-details`,
+      children: children
+    }), actions && jsx(AccordionActions, {
+      children: actions
+    })]
+  });
+};
+
 const rootClassName$1h = 'dot-action-toolbar';
 const StyledToolbar = styled(Toolbar)`
   ${({
@@ -609,7 +614,7 @@ const StyledToolbar = styled(Toolbar)`
     &.${rootClassName$1h} {
       border-bottom: 1px solid ${theme.palette.figma.border.default};
 
-      .${rootClassName$1i} .MuiInputBase-root {
+      .${rootClassName$1k} .MuiInputBase-root {
         margin-bottom: 0;
       }
     }
@@ -4463,24 +4468,39 @@ const DotInputLabel = ({
   disabled = false,
   error = false,
   id,
+  informationToolTip,
   label,
   required
 }) => {
-  return jsx(StyledInputLabel, {
-    "data-testid": dataTestId,
-    classes: {
-      root: labelClassName
-    },
-    disabled: disabled,
-    error: error,
-    htmlFor: id,
-    required: required,
-    shrink: false,
-    variant: "outlined",
-    children: jsx(DotTypography, {
-      variant: "subtitle2",
-      children: label
-    })
+  const wrapperStyles = {
+    display: 'flex',
+    gap: '4px'
+  };
+  return jsxs("div", {
+    className: wrapperClassName$2,
+    style: wrapperStyles,
+    children: [jsx(StyledInputLabel, {
+      "data-testid": dataTestId,
+      classes: {
+        root: labelClassName
+      },
+      disabled: disabled,
+      error: error,
+      htmlFor: id,
+      required: required,
+      shrink: false,
+      variant: "outlined",
+      children: jsx(DotTypography, {
+        variant: "subtitle2",
+        children: label
+      })
+    }), informationToolTip && jsx(DotIcon, {
+      "data-testid": `${dataTestId}-information-tooltip`,
+      className: warningClassName,
+      iconId: "circle-info-outline",
+      tooltip: informationToolTip,
+      fontSize: "small"
+    })]
   });
 };
 
@@ -4520,7 +4540,7 @@ const DotInputText = ({
   autoFocus,
   className,
   defaultValue,
-  'data-pendoid': dataPendoId = rootClassName$1i,
+  'data-pendoid': dataPendoId = rootClassName$1k,
   'data-testid': dataTestId,
   disabled = false,
   error = false,
@@ -4532,6 +4552,7 @@ const DotInputText = ({
   endIcon,
   endText,
   id,
+  informationToolTip,
   inputRef,
   label,
   max,
@@ -4567,7 +4588,7 @@ const DotInputText = ({
   const internalInputRef = useRef(null);
   const textFieldInputRef = inputRef || internalInputRef;
   const [inputTextState, setInputTextState] = useState(getInitialState(value));
-  const rootStyles = useStylesWithRootClass(rootClassName$1i, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootClassName$1k, hasError, hasWarning, hasSuccess, readOnly && readOnlyClassName$1);
   useEffect(() => {
     if (value !== inputTextState.inputValue) {
       setInputTextState(getInitialState(value, defaultValue));
@@ -4652,7 +4673,8 @@ const DotInputText = ({
       error,
       id,
       label,
-      required
+      required,
+      informationToolTip
     }), jsx(StyledTextField, {
       "$maxRows": maxRows,
       "$minRows": minRows,
@@ -6627,6 +6649,7 @@ const DotAutoComplete = ({
   checkIfOptionDisabled,
   group = false,
   helperText,
+  informationToolTip,
   inputId,
   inputRef,
   inputValue,
@@ -6668,7 +6691,7 @@ const DotAutoComplete = ({
   const preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
   const textFieldWarningClassName = !error && warning && warningClassName;
   const rootClasses = useStylesWithRootClass(rootClassName$X, size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$1i, readOnly && readOnlyClassName$1, textFieldWarningClassName);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$1k, readOnly && readOnlyClassName$1, textFieldWarningClassName);
   const inputRootClasses = useStylesWithRootClass(inputRootClassName, !dense && inputMediumClassName);
   const popperClasses = useStylesWithRootClass(rootClassName$1a, popperClassName);
   let highlightedOption = null;
@@ -6901,7 +6924,8 @@ const DotAutoComplete = ({
             disabled,
             error,
             label,
-            required
+            required,
+            informationToolTip
           }), jsx(StyledTextField, Object.assign({}, params, {
             autoFocus: autoFocus,
             classes: {
@@ -12719,20 +12743,20 @@ const StyledFormContainer = styled.div`
 
       .${rootClassName$N},
         .${rootClassName$P},
-        .${rootClassName$1i},
+        .${rootClassName$1k},
         .${rootSelectClassName},
         .${rootClassName$A},
         .${rootClassName$z} {
         margin: ${theme.spacing(1, 0)};
       }
 
-      label
-        + .${rootClassName$1i},
-        label
+      .${wrapperClassName$2} {
+        + .${rootClassName$1k},
+        .${wrapperClassName$2}
         + .${rootSelectClassName},
-        label
+        .${wrapperClassName$2}
         + .${rootClassName$A},
-        label
+        .${wrapperClassName$2}
         + .${rootClassName$z} {
         margin: ${theme.spacing(0, 0, 1, 0)};
       }
@@ -17588,7 +17612,8 @@ const DotDatePicker = ({
   readOnly = false,
   required = false,
   showDaysOutsideCurrentMonth,
-  value
+  value,
+  informationToolTip
 }) => {
   const displayFormat = format || DEFAULT_DATE_FORMAT;
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
@@ -17663,7 +17688,8 @@ const DotDatePicker = ({
         error,
         id: inputId,
         label,
-        required
+        required,
+        informationToolTip
       }), jsx(StyledDatePicker, {
         "aria-label": ariaLabel,
         autoFocus: autoFocus,
@@ -18945,4 +18971,4 @@ const BoardColumnSummary = ({
   });
 };
 
-export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage };
+export { ApiError$1 as ApiError, BoardStatusProvider, Cell, ColumnStatusProvider, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DashboardView, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, Board as DotBoard, BoardColumn as DotBoardColumn, BoardColumnActionBar as DotBoardColumnActionBar, BoardColumnCollapse as DotBoardColumnCollapse, BoardColumnExpand as DotBoardColumnExpand, BoardColumnHeader as DotBoardColumnHeader, BoardColumnItems as DotBoardColumnItems, BoardColumnSummary as DotBoardColumnSummary, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotChipList, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDetails, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDashboardStatusPill, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotImpactDialog, DotInlineEdit, DotInputLabel, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useBoardStatus, useColumnStatus, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage };

package/package.json

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

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, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, 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, 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, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, 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

@@ -40,6 +40,8 @@ export interface AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOp
     group?: boolean;
     /** The helper text content. */
     helperText?: string;
+    /** Additional information for persistent labels */
+    informationToolTip?: string;
     /** The id for the input field. */
     inputId: string;
     /** pass a ref to the input element */
@@ -96,4 +98,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, inputId, inputRef, inputValue, isOptionEqualToValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, popperClassName, popperPlacement, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
+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, preserveGroupOrder, readOnly, renderGroup, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/date-picker/DatePicker.d.ts

@@ -36,6 +36,8 @@ export interface DatePickerProps extends CommonProps {
     fullWidth?: boolean;
     /** The helper text content. */
     helperText?: ReactNode;
+    /** Additional information for persistent labels */
+    informationToolTip?: string;
     /** Identifies the input element and also used to create label "for" and helper text id attribute */
     inputId: string;
     /** The name of input element */
@@ -80,4 +82,4 @@ export interface DatePickerProps extends CommonProps {
     /** The selected value. Used when the component is controlled. Date in ISO 8601 format, ie: YYYY-MM-DD  */
     value?: string;
 }
-export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disablePortal, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, focusInputOnPopperOpened, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onKeyDown, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotDatePicker: ({ ariaLabel, autoFocus, className, closeOnSelect, "data-pendoid": dataPendoId, "data-testid": dataTestId, defaultValue, disableOpenPicker, disablePast, disablePortal, disabled, displayWeekNumber, displayClearButton, error, fixedWeekNumber, focusInputOnPopperOpened, format, fullWidth, helperText, inputId, inputName, label, locale, maxDate, minDate, onAccept, onBlur, onChange, onClose, onError, onKeyDown, onOpen, open, persistentLabel, readOnly, required, showDaysOutsideCurrentMonth, value, informationToolTip, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -90,6 +90,7 @@ export { DotIllustration } from './illustration/Illustration';
 export { DotImpactDialog } from './impact-dialog/ImpactDialog';
 export { DotInlineEdit } from './inline-edit';
 export { DotInputText } from './input-form-fields/InputText';
+export { DotInputLabel } from './input-form-fields/InputLabel';
 export { DotInputSelect } from './input-form-fields/InputSelect';
 export { DotLink } from './link/Link';
 export { DotList } from './list';

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

@@ -1,6 +1,7 @@
 import { TextField } from '@mui/material';
 export declare const rootClassName = "dot-text-field";
 export declare const rootSelectClassName = "dot-select-field";
+export declare const wrapperClassName = "dot-label-wrapper";
 export declare const labelClassName = "dot-input-label";
 export declare const errorClassName = "dot-error";
 export declare const warningClassName = "dot-warning";

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

@@ -9,9 +9,11 @@ export interface InputLabelProps extends CommonProps {
      * values while it's optional, it is considered required for accessiblity best practice.
      */
     id: string;
+    /** Additional information for persistent labels */
+    informationToolTip?: string;
     /** The label content. */
     label?: string;
     /** If true, the label is displayed as required and the input element` will be required. */
     required?: boolean;
 }
-export declare const DotInputLabel: ({ "data-testid": dataTestId, disabled, error, id, label, required, }: InputLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotInputLabel: ({ "data-testid": dataTestId, disabled, error, id, informationToolTip, label, required, }: InputLabelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -13,6 +13,8 @@ export interface InputTextProps extends InputProps {
     hasDebounce?: boolean;
     /** If true, the input will render resizer in multiline mode. False by default. */
     hasResizer?: boolean;
+    /** Additional information for persistent labels */
+    informationToolTip?: string;
     /** Maximum number of rows for multiline mode. */
     maxRows?: number;
     /** Minimum number of rows for multiline mode. */
@@ -38,4 +40,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, 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: ({ 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;