@datarobot/design-system 28.11.0 → 29.1.0

package/cjs/tour/components/tour-footer.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TourFooter = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _faChevronRight = require("@fortawesome/pro-regular-svg-icons/faChevronRight");
-var _faChevronLeft = require("@fortawesome/pro-regular-svg-icons/faChevronLeft");
-var _faCheck = require("@fortawesome/pro-regular-svg-icons/faCheck");
+var _faChevronRight = require("@fortawesome/free-solid-svg-icons/faChevronRight");
+var _faChevronLeft = require("@fortawesome/free-solid-svg-icons/faChevronLeft");
+var _faCheck = require("@fortawesome/free-solid-svg-icons/faCheck");
 var _button = require("../../button");
 var _useTranslation = require("../../hooks/use-translation");
 var _jsxRuntime = require("react/jsx-runtime");

package/cjs/typeahead/typeahead.d.ts

@@ -76,11 +76,16 @@ export type TypeaheadProps = {
     optionalLabelText?: string;
     autoFocus?: boolean;
     noItemsText?: string;
+    /**
+     * By default, on select won't be invoked if the label of selected option is the same as defaultValue
+     * but there are cases when we do want to call it anyway. In that cases this prop should be set to true
+     */
+    shouldCallOnSelectWithOldValue?: boolean;
 };
 /** Searchable select
  * [CAPITALIZATION] Use sentence case for options, label, and input text. Do not end with ellipses (...).
  * @midnight-gray-supported
  * @alpine-light-supported
  */
-declare function Typeahead({ defaultValue, onSearch, optionComponent, OptionList, onBlur, onKeyDown, onClear, onSelect, onDelete, searchFields, placement, options, items, optionId, optionLabel, isMultiSelect, focused, isTouched, forceShowAllOnFocus, showAllOnFocus, isDisabled, disabledInfo, isRequired, isOptional, isClearable, optionalLabelText, handleFocus, placeholder, containerRef, inputRef: inputRefProp, helperTextPosition, testId, id, label, labelTestId, ariaLabel, validity, validationTestId, asyncValidation, labelIcon, labelIconTooltipText, labelIconTestId, dropdownContentClass, wrapperClass, fieldClass, helperText, autoComplete, keepInvalidText, formatSearchValue, className, autoFocus, noItemsText, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;
+declare function Typeahead({ defaultValue, onSearch, optionComponent, OptionList, onBlur, onKeyDown, onClear, onSelect, onDelete, searchFields, placement, options, items, optionId, optionLabel, isMultiSelect, focused, isTouched, forceShowAllOnFocus, showAllOnFocus, isDisabled, disabledInfo, isRequired, isOptional, isClearable, optionalLabelText, handleFocus, placeholder, containerRef, inputRef: inputRefProp, helperTextPosition, testId, id, label, labelTestId, ariaLabel, validity, validationTestId, asyncValidation, labelIcon, labelIconTooltipText, labelIconTestId, dropdownContentClass, wrapperClass, fieldClass, helperText, autoComplete, keepInvalidText, formatSearchValue, className, autoFocus, noItemsText, shouldCallOnSelectWithOldValue, }: TypeaheadProps): import("react/jsx-runtime").JSX.Element;
 export default Typeahead;

package/cjs/typeahead/typeahead.js

@@ -80,7 +80,8 @@ function Typeahead({
   formatSearchValue,
   className,
   autoFocus = false,
-  noItemsText
+  noItemsText,
+  shouldCallOnSelectWithOldValue = false
 }) {
   const {
     t
@@ -125,7 +126,7 @@ function Typeahead({
     }
     if (isMultiSelect) {
       onSelect(option);
-    } else if (String(option?.[optionLabel]) !== defaultValue) {
+    } else if (String(option?.[optionLabel]) !== defaultValue || shouldCallOnSelectWithOldValue) {
       onSelect(option);
     }
     setIsTouched(true);

package/cjs/zoom-controls/zoom-controls.d.ts

@@ -1,4 +1,5 @@
 import { MouseEvent } from 'react';
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import './zoom-controls.less';
 export type ZoomControlsProps = {
     currentZoom: number;
@@ -13,9 +14,12 @@ export type ZoomControlsProps = {
     zoomInText?: string;
     zoomOutText?: string;
     resetText?: string;
+    zoomInIcon?: IconLookup;
+    zoomOutIcon?: IconLookup;
+    resetIcon?: IconLookup;
 };
 /** Zoom is used on graphs if you need to increase or decrease data visualization
  *  @midnight-gray-supported
  *  @alpine-light-supported
  *  */
-export default function ZoomControls({ currentZoom, onZoomIn, onZoomOut, onZoomReset, className, minZoomFactor, maxZoomFactor, testId, hidden, zoomInText, zoomOutText, resetText, }: ZoomControlsProps): import("react/jsx-runtime").JSX.Element | null;
+export default function ZoomControls({ currentZoom, onZoomIn, onZoomOut, onZoomReset, className, minZoomFactor, maxZoomFactor, testId, hidden, zoomInText, zoomOutText, resetText, zoomInIcon, zoomOutIcon, resetIcon, }: ZoomControlsProps): import("react/jsx-runtime").JSX.Element | null;

package/cjs/zoom-controls/zoom-controls.js

@@ -7,7 +7,7 @@ exports.default = ZoomControls;
 var _react = _interopRequireDefault(require("react"));
 var _faMagnifyingGlassPlus = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlassPlus");
 var _faMagnifyingGlassMinus = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlassMinus");
-var _faMagnifyingGlassArrowsRotate = require("@fortawesome/pro-solid-svg-icons/faMagnifyingGlassArrowsRotate");
+var _faArrowsRotate = require("@fortawesome/free-solid-svg-icons/faArrowsRotate");
 var _fontAwesomeIcon = require("../font-awesome-icon");
 var _button = require("../button");
 var _useTranslation = require("../hooks/use-translation");
@@ -31,7 +31,10 @@ function ZoomControls({
   hidden = false,
   zoomInText,
   zoomOutText,
-  resetText
+  resetText,
+  zoomInIcon = _faMagnifyingGlassPlus.faMagnifyingGlassPlus,
+  zoomOutIcon = _faMagnifyingGlassMinus.faMagnifyingGlassMinus,
+  resetIcon = _faArrowsRotate.faArrowsRotate
 }) {
   const {
     t
@@ -56,7 +59,7 @@ function ZoomControls({
       "aria-label": zoomInTextWithDefault,
       tooltipPlacement: _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
-        icon: _faMagnifyingGlassPlus.faMagnifyingGlassPlus
+        icon: zoomInIcon
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
       className: "button command zoom-item",
@@ -69,7 +72,7 @@ function ZoomControls({
       "aria-label": zoomOutTextWithDefault,
       tooltipPlacement: _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
-        icon: _faMagnifyingGlassMinus.faMagnifyingGlassMinus
+        icon: zoomOutIcon
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
       className: "button command zoom-item",
@@ -82,7 +85,7 @@ function ZoomControls({
       "aria-label": resetTextWithDefault,
       tooltipPlacement: _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
-        icon: _faMagnifyingGlassArrowsRotate.faMagnifyingGlassArrowsRotate
+        icon: resetIcon
       })
     })]
   });

package/esm/alert/alert.js

@@ -2,7 +2,7 @@ import React, { cloneElement, useState } from 'react';
 import cls from 'classnames';
 import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
 import { faCircleInfo } from '@fortawesome/free-solid-svg-icons/faCircleInfo';
-import { faCircleXmark } from '@fortawesome/pro-solid-svg-icons/faCircleXmark';
+import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
 import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons/faCircleExclamation';
 import { faBolt } from '@fortawesome/free-solid-svg-icons/faBolt';
 import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';

package/esm/closable-tabs/closable-tabs.js

@@ -2,7 +2,7 @@ import React, { useState, useCallback } from 'react';
 import classNames from 'classnames';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { faPlus } from '@fortawesome/pro-solid-svg-icons/faPlus';
+import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { ClosableTab } from './closable-tab';
 import { useTranslation } from '../hooks/use-translation';
 import { Button, ACCENT_TYPES, BUTTON_SIZES, BUTTON_TOOLTIP_PLACEMENT_TYPES } from '../button';

package/esm/datetime-range-picker/datetime-range-picker-button.js

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { faArrowRight } from '@fortawesome/pro-solid-svg-icons/faArrowRight';
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
 import { FontAwesomeIcon } from '../font-awesome-icon';
 import DropdownMenuTrigger from '../dropdown-menu/dropdown-menu-trigger';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/datetime-range-picker/datetime-range-picker-input.js

@@ -1,5 +1,5 @@
 import React, { forwardRef, useCallback } from 'react';
-import { faArrowRight } from '@fortawesome/pro-solid-svg-icons/faArrowRight';
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
 import { faCalendar } from '@fortawesome/free-regular-svg-icons/faCalendar';
 import { FontAwesomeIcon } from '../font-awesome-icon';
 import { Input } from '../input';

package/esm/export-button/export-button.d.ts

@@ -1,8 +1,10 @@
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import { ButtonProps } from '../button';
 type ExportButtonProps = ButtonProps & {
     onExport: () => void;
     exportText?: string;
+    icon?: IconLookup;
 };
 /** An export action indicator. */
-export declare const ExportButton: ({ onExport, isDisabled, testId, tooltipText, exportText, tooltipDocsLink, tooltipPlacement, }: ExportButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ExportButton: ({ onExport, isDisabled, testId, tooltipText, exportText, tooltipDocsLink, tooltipPlacement, icon, }: ExportButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/export-button/export-button.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { faArrowFromBottom } from '@fortawesome/pro-solid-svg-icons/faArrowFromBottom';
+import { faArrowUpFromBracket } from '@fortawesome/free-solid-svg-icons/faArrowUpFromBracket';
 import { Button, ACCENT_TYPES } from '../button';
 import { useTranslation } from '../hooks/use-translation';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,7 +11,8 @@ export const ExportButton = ({
   tooltipText,
   exportText,
   tooltipDocsLink = null,
-  tooltipPlacement
+  tooltipPlacement,
+  icon = faArrowUpFromBracket
 }) => {
   const {
     t
@@ -22,7 +23,7 @@ export const ExportButton = ({
     onClick: onExport,
     isDisabled: isDisabled,
     className: "graph-export-button",
-    leftIcon: faArrowFromBottom,
+    leftIcon: icon,
     testId: testId,
     "aria-label": exportText || t('Export'),
     tooltipText: tooltipText ?? t('Download information related to this visualization'),

package/esm/floating-panel/floating-panel-dock-button.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { faThumbtackSlash } from '@fortawesome/pro-solid-svg-icons/faThumbtackSlash';
+import { faThumbtackSlash } from '@fortawesome/free-solid-svg-icons/faThumbtackSlash';
 import { faThumbtack } from '@fortawesome/free-solid-svg-icons/faThumbtack';
 import { Button, ACCENT_TYPES } from '../button';
 import { useTranslation } from '../hooks';

package/esm/floating-panel/floating-panel-drag-handle.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 export type FloatingPanelDragHandleProps = {
-    children?: React.ReactNode;
+    dragIcon: IconLookup;
 };
-export declare function FloatingPanelDragHandle({ children, }: FloatingPanelDragHandleProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatingPanelDragHandle({ dragIcon, }: FloatingPanelDragHandleProps): import("react/jsx-runtime").JSX.Element;

package/esm/floating-panel/floating-panel-drag-handle.js

@@ -1,15 +1,14 @@
 import React, { useContext } from 'react';
-import { faGripDotsVertical } from '@fortawesome/pro-solid-svg-icons/faGripDotsVertical';
 import { FontAwesomeIcon } from '../font-awesome-icon';
 import { useTranslation } from '../hooks';
 import { FloatingPanelContext } from './constants';
 import { DraggableArea } from './draggable-area';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function FloatingPanelDragHandle({
-  children
+  dragIcon
 }) {
-  const content = children || /*#__PURE__*/_jsx(FontAwesomeIcon, {
-    icon: faGripDotsVertical
+  const content = /*#__PURE__*/_jsx(FontAwesomeIcon, {
+    icon: dragIcon
   });
   const {
     t

package/esm/floating-panel/floating-panel-header.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import type { PanelState } from './types';
 type FloatingPanelHeaderProps = {
     onClose: (State: PanelState) => void;
@@ -6,6 +7,7 @@ type FloatingPanelHeaderProps = {
     setIsDocked: (docked: boolean) => void;
     actions?: React.ReactNode;
     getPosition: () => PanelState;
+    dragIcon: IconLookup;
 };
 export declare const FloatingPanelHeader: React.ForwardRefExoticComponent<FloatingPanelHeaderProps & React.RefAttributes<HTMLElement>>;
 export {};

package/esm/floating-panel/floating-panel-header.js

@@ -11,7 +11,8 @@ export const FloatingPanelHeader = /*#__PURE__*/forwardRef(({
   onClose,
   isDocked,
   setIsDocked,
-  getPosition
+  getPosition,
+  dragIcon
 }, ref) => {
   const {
     t
@@ -19,7 +20,9 @@ export const FloatingPanelHeader = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/_jsxs("header", {
     ref: ref,
     className: "floating-panel-header",
-    children: [/*#__PURE__*/_jsx(FloatingPanelDragHandle, {}), /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(FloatingPanelDragHandle, {
+      dragIcon: dragIcon
+    }), /*#__PURE__*/_jsxs("div", {
       className: "actions",
       children: [actions, /*#__PURE__*/_jsx(FloatingPanelDockButton, {
         isDocked: isDocked,

package/esm/floating-panel/floating-panel.d.ts

@@ -1,5 +1,6 @@
 import React, { Dispatch, SetStateAction } from 'react';
 import { Modifier, Placement } from '@popperjs/core';
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import './floating-panel.less';
 import type { ElementReference, PanelState } from './types';
 export type FloatingPanelProps = {
@@ -56,6 +57,10 @@ export type FloatingPanelProps = {
      * Aria label for the floating panel
      */
     ariaLabel?: string;
+    /**
+     * Font awesome component for the drag handle
+     */
+    dragIcon?: IconLookup;
 };
 /**
  * Floating panel
@@ -63,4 +68,4 @@ export type FloatingPanelProps = {
  * @uxr-only-supported
  * @alpine-light-supported
  */
-export declare function FloatingPanel({ children, minHeight, minWidth, maxWidth, maxHeight, anchorEl, dockEl, pageContentEl, initialState, testId, placement, popperModifiers, onClose, actions, ...props }: FloatingPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatingPanel({ children, minHeight, minWidth, maxWidth, maxHeight, anchorEl, dockEl, pageContentEl, initialState, testId, placement, popperModifiers, onClose, actions, dragIcon, ...props }: FloatingPanelProps): import("react/jsx-runtime").JSX.Element;

package/esm/floating-panel/floating-panel.js

@@ -2,6 +2,7 @@ import ReactDOM from 'react-dom';
 import React, { useLayoutEffect, useRef } from 'react';
 import classnames from 'classnames';
 import { createPopper } from '@popperjs/core';
+import { faGripVertical } from '@fortawesome/free-solid-svg-icons/faGripVertical';
 import { OFFSET_MODIFIER } from '../react-popper';
 import { useTranslation } from '../hooks';
 import { FloatingPanelContext, resizeHandles, getHtmlElement } from './constants';
@@ -32,6 +33,7 @@ export function FloatingPanel({
   popperModifiers = [OFFSET_MODIFIER],
   onClose = noop,
   actions,
+  dragIcon = faGripVertical,
   ...props
 }) {
   const containerElement = getHtmlElement(dockEl) || document.getElementById('floating-panel-root') || document.body;
@@ -115,7 +117,8 @@ export function FloatingPanel({
         getPosition: getPosition,
         isDocked: isDocked,
         setIsDocked: setIsDocked,
-        actions: actions
+        actions: actions,
+        dragIcon: dragIcon
       }), /*#__PURE__*/_jsx("div", {
         id: "floating-panel-content",
         className: "floating-panel-content",

package/esm/inline-edit/inline-edit.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo, useRef, useLayoutEffect } from 're
 import cls from 'classnames';
 import uniqueId from 'lodash-es/uniqueId';
 import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
-import { faSquareExclamation } from '@fortawesome/pro-solid-svg-icons/faSquareExclamation';
+import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons/faCircleNotch';
 import { FontAwesomeIcon } from '../font-awesome-icon';
 import { Input } from '../input';
@@ -146,7 +146,7 @@ export default function InlineEdit({
     shouldDisplayControls: true,
     onSubmit: onFormSubmit,
     onCancel: handleCancel,
-    rightIcon: hasError ? faSquareExclamation : null,
+    rightIcon: hasError ? faCircleXmark : null,
     iconTooltipText: isMultiline ? textareaProps.validity?.value?.toString() : inputProps.validity?.value?.toString(),
     submitAriaLabel,
     cancelAriaLabel

package/esm/message/index.d.ts

@@ -1,3 +1,3 @@
-import { Message, MESSAGE_TYPES, MESSAGE_SIZES, MESSAGE_ICON_PLACEMENT } from './message';
+import { Message, MESSAGE_TYPES, MESSAGE_SIZES, MESSAGE_ICON_PLACEMENT, MESSAGE_ICONS } from './message';
 export type { MessageProps, MessageTypes, MessageSize, MessageIconPlacementTypes, } from './message';
-export { Message, MESSAGE_TYPES, MESSAGE_SIZES, MESSAGE_ICON_PLACEMENT };
+export { Message, MESSAGE_TYPES, MESSAGE_SIZES, MESSAGE_ICON_PLACEMENT, MESSAGE_ICONS, };

package/esm/message/index.js

@@ -1,2 +1,2 @@
-import { Message, MESSAGE_TYPES, MESSAGE_SIZES, MESSAGE_ICON_PLACEMENT } from './message';
-export { Message, MESSAGE_TYPES, MESSAGE_SIZES, MESSAGE_ICON_PLACEMENT };
+import { Message, MESSAGE_TYPES, MESSAGE_SIZES, MESSAGE_ICON_PLACEMENT, MESSAGE_ICONS } from './message';
+export { Message, MESSAGE_TYPES, MESSAGE_SIZES, MESSAGE_ICON_PLACEMENT, MESSAGE_ICONS };

package/esm/message/message.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import './message.less';
 import { ValueOf } from '../types';
 export declare const MESSAGE_TYPES: {
@@ -22,6 +23,19 @@ export declare const MESSAGE_SIZES: {
 export type MessageTypes = ValueOf<typeof MESSAGE_TYPES>;
 export type MessageSize = ValueOf<typeof MESSAGE_SIZES>;
 export type MessageIconPlacementTypes = ValueOf<typeof MESSAGE_ICON_PLACEMENT>;
+export declare const MESSAGE_ICONS: {
+    disabled: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    info: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    "success-info": import("@fortawesome/fontawesome-common-types").IconDefinition;
+    warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    error: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    success: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    "in-progress": import("@fortawesome/fontawesome-common-types").IconDefinition;
+    expired: import("@fortawesome/fontawesome-common-types").IconDefinition;
+};
+type Icons = {
+    [key: string]: IconLookup;
+};
 export type MessageProps = {
     children: ReactNode;
     className?: string;
@@ -33,10 +47,12 @@ export type MessageProps = {
     size?: MessageSize;
     id?: string;
     iconPlacement?: string;
+    icons?: Icons;
 };
 /** Simple component to show a message with an appropriate icon
  * [CAPITALIZATION] Sentence case, full sentence, end in period
  * @midnight-gray-supported
  * @alpine-light-supported
  */
-export declare function Message({ children, className, testId, type, isCentered, isStatus, size, id, iconPlacement, }: MessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function Message({ children, className, testId, type, isCentered, isStatus, size, id, iconPlacement, icons, }: MessageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/message/message.js

@@ -3,10 +3,9 @@ import classNames from 'classnames';
 import { faBan } from '@fortawesome/free-solid-svg-icons/faBan';
 import { faCircleInfo } from '@fortawesome/free-solid-svg-icons/faCircleInfo';
 import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons/faCircleExclamation';
-import { faCircleXmark } from '@fortawesome/pro-solid-svg-icons/faCircleXmark';
+import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
 import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons/faCircleNotch';
-import { faCircleExclamationCheck } from '@fortawesome/pro-solid-svg-icons/faCircleExclamationCheck';
 import { FontAwesomeIcon } from '../font-awesome-icon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const MESSAGE_TYPES = {
@@ -27,52 +26,63 @@ export const MESSAGE_SIZES = {
   SM: 'sm',
   MD: 'md'
 };
-function getMessageConfig(type) {
+export const MESSAGE_ICONS = {
+  [MESSAGE_TYPES.DISABLED]: faBan,
+  [MESSAGE_TYPES.INFO]: faCircleInfo,
+  [MESSAGE_TYPES.SUCCESS_INFO]: faCircleCheck,
+  [MESSAGE_TYPES.WARNING]: faCircleExclamation,
+  [MESSAGE_TYPES.ERROR]: faCircleXmark,
+  [MESSAGE_TYPES.SUCCESS]: faCircleCheck,
+  [MESSAGE_TYPES.IN_PROGRESS]: faCircleNotch,
+  [MESSAGE_TYPES.EXPIRED]: faCircleExclamation
+};
+function getMessageConfig(icons, type) {
+  const icon = type ? icons[type] : icons[MESSAGE_TYPES.INFO];
   switch (type) {
     case MESSAGE_TYPES.DISABLED:
       return {
-        icon: faBan,
+        icon,
         className: 'disabled'
       };
     case MESSAGE_TYPES.INFO:
       return {
-        icon: faCircleInfo,
+        icon,
         className: 'info'
       };
     case MESSAGE_TYPES.SUCCESS_INFO:
       return {
-        icon: faCircleCheck,
+        icon,
         className: 'info'
       };
     case MESSAGE_TYPES.WARNING:
       return {
-        icon: faCircleExclamation,
+        icon,
         className: 'warning'
       };
     case MESSAGE_TYPES.ERROR:
       return {
-        icon: faCircleXmark,
+        icon,
         className: 'error',
         role: 'alert'
       };
     case MESSAGE_TYPES.SUCCESS:
       return {
-        icon: faCircleCheck,
+        icon,
         className: 'success'
       };
     case MESSAGE_TYPES.IN_PROGRESS:
       return {
-        icon: faCircleNotch,
+        icon,
         className: 'in-progress'
       };
     case MESSAGE_TYPES.EXPIRED:
       return {
-        icon: faCircleExclamationCheck,
+        icon,
         className: 'expired'
       };
     default:
       return {
-        icon: faCircleInfo,
+        icon,
         className: 'info'
       };
   }
@@ -86,14 +96,15 @@ export function Message({
   children,
   className,
   testId,
-  type,
+  type = MESSAGE_TYPES.INFO,
   isCentered = false,
   isStatus = false,
   size = 'md',
   id,
-  iconPlacement = MESSAGE_ICON_PLACEMENT.LEFT
+  iconPlacement = MESSAGE_ICON_PLACEMENT.LEFT,
+  icons = MESSAGE_ICONS
 }) {
-  const messageConfig = getMessageConfig(type);
+  const messageConfig = getMessageConfig(icons, type);
   const icon = /*#__PURE__*/_jsx(FontAwesomeIcon, {
     icon: messageConfig.icon,
     spin: type === MESSAGE_TYPES.IN_PROGRESS

package/esm/notification-popup/notification-popup.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import { faCircleInfo } from '@fortawesome/free-solid-svg-icons/faCircleInfo';
 import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
-import { faCircleXmark } from '@fortawesome/pro-solid-svg-icons/faCircleXmark';
+import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
 import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons/faCircleExclamation';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
 import { Button, ACCENT_TYPES } from '../button';

package/esm/pagination-new/pagination-new.js

@@ -1,7 +1,7 @@
 import React, { memo, useMemo, useState, useEffect } from 'react';
 import uniqueId from 'lodash-es/uniqueId';
-import { faChevronLeft } from '@fortawesome/pro-solid-svg-icons/faChevronLeft';
-import { faChevronRight } from '@fortawesome/pro-solid-svg-icons/faChevronRight';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 import { PagesButtons } from './pages-buttons';
 import { ACCENT_TYPES, Button } from '../button';
 import { DropdownMenu } from '../dropdown-menu';

package/esm/scheduler/button-switcher.d.ts

@@ -1,3 +1,4 @@
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import { SimpleSchedulerModalTexts } from './constants';
 export type ButtonSwitcherProps = {
     showAdvancedScheduler: boolean;
@@ -9,5 +10,6 @@ export type ButtonSwitcherProps = {
     isDisabled?: boolean;
     switchToSimpleTriggerId?: string;
     switchToAdvancedTriggerId?: string;
+    icon: IconLookup;
 };
-export declare function ButtonSwitcher({ showAdvancedScheduler, advancedSchedulerToggleButtonText, onUseAdvancedScheduler, simpleSchedulerModalTexts, simpleSchedulerToggleButtonText, onUseSimpleScheduler, isDisabled, switchToSimpleTriggerId, switchToAdvancedTriggerId, }: ButtonSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonSwitcher({ showAdvancedScheduler, advancedSchedulerToggleButtonText, onUseAdvancedScheduler, simpleSchedulerModalTexts, simpleSchedulerToggleButtonText, onUseSimpleScheduler, isDisabled, switchToSimpleTriggerId, switchToAdvancedTriggerId, icon, }: ButtonSwitcherProps): import("react/jsx-runtime").JSX.Element;

package/esm/scheduler/button-switcher.js

@@ -1,6 +1,4 @@
 import React, { useState } from 'react';
-import { faGear } from '@fortawesome/free-solid-svg-icons/faGear';
-import { faSlidersHSquare } from '@fortawesome/pro-solid-svg-icons/faSlidersHSquare';
 import { Button, ACCENT_TYPES } from '../button';
 import { Modal } from '../modal';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -13,7 +11,8 @@ export function ButtonSwitcher({
   onUseSimpleScheduler,
   isDisabled = false,
   switchToSimpleTriggerId = 'switch-to-simple-scheduler-container',
-  switchToAdvancedTriggerId = 'switch-to-advanced-scheduler-container'
+  switchToAdvancedTriggerId = 'switch-to-advanced-scheduler-container',
+  icon
 }) {
   const [showUseSimpleSchedulerAlert, setShowUseSimpleSchedulerAlert] = useState(false);
   if (showAdvancedScheduler) {
@@ -23,7 +22,7 @@ export function ButtonSwitcher({
         id: switchToSimpleTriggerId,
         className: "margin-top-2",
         accentType: ACCENT_TYPES.COMMAND,
-        leftIcon: faSlidersHSquare,
+        leftIcon: icon,
         onClick: () => {
           setShowUseSimpleSchedulerAlert(true);
         },
@@ -57,7 +56,7 @@ export function ButtonSwitcher({
     id: switchToAdvancedTriggerId,
     className: "margin-top-2",
     accentType: ACCENT_TYPES.COMMAND,
-    leftIcon: faGear,
+    leftIcon: icon,
     onClick: onUseAdvancedScheduler,
     testId: "use-advanced-scheduler-button",
     isDisabled: isDisabled,

package/esm/scheduler/scheduler.d.ts

@@ -1,3 +1,4 @@
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import { Schedule, DateItem, Months, LabelTexts, ScheduleValidity, SWITCHER_TYPES, SimpleSchedulerModalTexts, AdvancedSchedulerInfoTexts, TabTexts } from './constants';
 import { ValueOf } from '../types';
 import './scheduler.less';
@@ -25,10 +26,12 @@ export type SchedulerProps = {
     switcherType?: ValueOf<typeof SWITCHER_TYPES>;
     selectedTabKey?: string;
     tabTexts?: TabTexts;
+    advancedSchedulerSwitcherIcon?: IconLookup;
+    simpleSchedulerSwitcherIcon?: IconLookup;
 };
 /**
  * Scheduler is form for cron jobs configuration
  * @midnight-gray-supported
  * @alpine-light-supported
  */
-export declare function Scheduler({ onUpdateSchedule, initialSchedule, testId, isDisabled, frequencyOptions: frequencyOptionsParams, daysOfWeek: daysOfWeekParams, months: monthsParams, validateArrayOfRangedNumbersOrAll: validateArrayOfRangedNumbersOrAllParams, simpleSchedulerToggleButtonText: simpleSchedulerToggleButtonTextParams, advancedSchedulerToggleButtonText: advancedSchedulerToggleButtonTextParams, simpleSchedulerModalTexts: simpleSchedulerModalTextsParams, labelTexts: labelTextsParams, advancedSchedulerInfoTexts: advancedSchedulerInfoTextsParams, validationTexts: validationTextsParams, switcherType, selectedTabKey, tabTexts: tabTextsParams, }: SchedulerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Scheduler({ onUpdateSchedule, initialSchedule, testId, isDisabled, frequencyOptions: frequencyOptionsParams, daysOfWeek: daysOfWeekParams, months: monthsParams, validateArrayOfRangedNumbersOrAll: validateArrayOfRangedNumbersOrAllParams, simpleSchedulerToggleButtonText: simpleSchedulerToggleButtonTextParams, advancedSchedulerToggleButtonText: advancedSchedulerToggleButtonTextParams, simpleSchedulerModalTexts: simpleSchedulerModalTextsParams, labelTexts: labelTextsParams, advancedSchedulerInfoTexts: advancedSchedulerInfoTextsParams, validationTexts: validationTextsParams, switcherType, selectedTabKey, tabTexts: tabTextsParams, advancedSchedulerSwitcherIcon, simpleSchedulerSwitcherIcon, }: SchedulerProps): import("react/jsx-runtime").JSX.Element;

package/esm/scheduler/scheduler.js

@@ -1,5 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import isEqual from 'lodash-es/isEqual';
+import { faGear } from '@fortawesome/free-solid-svg-icons/faGear';
+import { faSliders } from '@fortawesome/free-solid-svg-icons/faSliders';
 import { WithButtonSwitcherSchedulerContainer } from './with-button-switcher-scheduler-container';
 import { WithTabsSwitcherSchedulerContainer } from './with-tabs-switcher-scheduler-container';
 import { DEFAULT_SCHEDULE, useDaysOfWeek, useMonths, useFrequencyOptions, SWITCHER_TYPES, useDefaultTexts } from './constants';
@@ -27,7 +29,9 @@ export function Scheduler({
   validationTexts: validationTextsParams,
   switcherType = SWITCHER_TYPES.BUTTON,
   selectedTabKey,
-  tabTexts: tabTextsParams
+  tabTexts: tabTextsParams,
+  advancedSchedulerSwitcherIcon = faGear,
+  simpleSchedulerSwitcherIcon = faSliders
 }) {
   // Get translated constants from hooks
   const defaultDaysOfWeek = useDaysOfWeek();
@@ -110,7 +114,9 @@ export function Scheduler({
       onUseSimpleScheduler: onUseSimpleScheduler,
       onUseAdvancedScheduler: () => {
         setShowAdvancedScheduler(true);
-      }
+      },
+      advancedSchedulerSwitcherIcon: advancedSchedulerSwitcherIcon,
+      simpleSchedulerSwitcherIcon: simpleSchedulerSwitcherIcon
     }), switcherType === SWITCHER_TYPES.TABS && /*#__PURE__*/_jsx(WithTabsSwitcherSchedulerContainer, {
       onUpdateSchedule: handleUpdateSchedule,
       isDisabled: isDisabled,

package/esm/scheduler/with-button-switcher-scheduler-container.d.ts

@@ -1,3 +1,4 @@
+import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import { SimpleSchedulerModalTexts, ContainerProps } from './constants';
 export type WithButtonSwitcherSchedulerContainerProps = ContainerProps & {
     showAdvancedScheduler: boolean;
@@ -5,5 +6,7 @@ export type WithButtonSwitcherSchedulerContainerProps = ContainerProps & {
     advancedSchedulerToggleButtonText: string;
     simpleSchedulerModalTexts: SimpleSchedulerModalTexts;
     onUseAdvancedScheduler: () => void;
+    advancedSchedulerSwitcherIcon: IconLookup;
+    simpleSchedulerSwitcherIcon: IconLookup;
 };
-export declare function WithButtonSwitcherSchedulerContainer({ showAdvancedScheduler, onUpdateSchedule, isDisabled, validationTexts, initialSchedule, schedulerKey, validateArrayOfRangedNumbersOrAll, simpleSchedulerToggleButtonText, advancedSchedulerToggleButtonText, simpleSchedulerModalTexts, advancedSchedulerInfoTexts, labelTexts, frequencyOptions, daysOfWeek, months, onUseSimpleScheduler, onUseAdvancedScheduler, }: WithButtonSwitcherSchedulerContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function WithButtonSwitcherSchedulerContainer({ showAdvancedScheduler, onUpdateSchedule, isDisabled, validationTexts, initialSchedule, schedulerKey, validateArrayOfRangedNumbersOrAll, simpleSchedulerToggleButtonText, advancedSchedulerToggleButtonText, simpleSchedulerModalTexts, advancedSchedulerInfoTexts, labelTexts, frequencyOptions, daysOfWeek, months, onUseSimpleScheduler, onUseAdvancedScheduler, advancedSchedulerSwitcherIcon, simpleSchedulerSwitcherIcon, }: WithButtonSwitcherSchedulerContainerProps): import("react/jsx-runtime").JSX.Element;