linear-react-components-ui 1.1.20-beta.12 → 1.1.20-beta.13

package/lib/alerts/BaseAlert.js

@@ -26,7 +26,7 @@ const BaseAlert = _ref => {
       alert.appendChild(messageContainerEl);
     }
     return () => {
-      alert?.removeChild(messageContainerEl);
+      alert === null || alert === void 0 ? void 0 : alert.removeChild(messageContainerEl);
     };
   }, []);
   return /*#__PURE__*/_reactDom.default.createPortal(children, messageContainerEl);

package/lib/alerts/Message.js

@@ -15,7 +15,7 @@ const getClass = _ref => {
     customClass,
     className
   } = _ref;
-  return `${className} ${customClass}`;
+  return "".concat(className, " ").concat(customClass);
 };
 const getIcon = (icon, iconName, color) => {
   if (icon !== null) {

package/lib/assets/styles/button.scss

@@ -104,7 +104,6 @@ $shadow-button-inset-default: inset 0 0 0 1px $default-border-color, $shadow-but
     opacity: 0.7;
     border: solid 1px $font-color-disabled;
     pointer-events: auto;
-    cursor: not-allowed;
   }
   &.-shadowsdisabled {
     box-shadow: none!important;

package/lib/assets/styles/select.scss

@@ -19,6 +19,7 @@
       cursor: pointer;
       display: flex;
       align-items: center;
+      padding: 0 4px;
     }
   }
 
@@ -151,4 +152,4 @@
     font-style: italic;
     font-size: 13px;
   }
-}
+}

package/lib/assets/styles/table.scss

@@ -58,12 +58,16 @@
     &.-noborder {
       border-bottom: 0;
     }
-    &.menu-column {
-      width: 100px;
-      text-align: center;
-      svg {
-        margin-left: 0;
-      }
+  }
+
+  .menu-column {
+    text-align: center; 
+    width: 96px;
+    svg {
+      margin: 0;
+    }
+    span {
+      width: 100%;
     }
   }
 

package/lib/assets/styles/toolbar.scss

@@ -25,6 +25,9 @@
     align-content: center;
     float: right;
     height: 100%;
+    > .input-base-component:has(+.buttonbar) .inputwrapper {
+      border-right-width: 0;
+    }
     > .buttonbar {
       border-radius: 0;
       border-width: 1px;

package/lib/assets/styles/wizard.scss

@@ -0,0 +1,125 @@
+@import "colors.scss";
+
+.wizard-dialog {
+  .wizard-wrapper {
+    .wizard-content {
+      display: flex !important;
+      flex-direction: column;
+      .wizard-progresbar {
+        width: 100%;
+        display: grid;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+        justify-content: space-between;
+        padding: 20px;
+        margin-bottom: 20px;
+        border-bottom: 2px solid $component-border-color;
+        gap: 10px;
+        overflow: hidden;
+        > .title {
+          font-size: 16px;
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          position: relative;
+          flex: 1;
+          text-align: center;
+          &:first-child {
+            .step {
+              align-self: flex-start;
+            }
+            .step-title {
+              align-self: flex-start;
+              text-align: left;
+            }
+            &:before {
+              right: auto;
+              left: 45px;
+            }
+          }
+          &:last-child {
+            .step {
+              align-self: flex-end;
+            }
+            .step-title {
+              align-self: flex-end;
+              text-align: right;
+            }
+            &:after {
+              left: auto;
+              right: 45px;
+            }
+          }
+          &::after, &::before {
+            content: "";
+            position: absolute;
+            height: 2px;
+            background-color: $component-border-color;
+            top: 18px;
+            width: calc(100% - 25px);
+            transition: all 0.2s ease-in-out;
+          }
+          &::after {
+            left: calc(50% + 18px);
+          }
+          &::before {
+            right: calc(50% + 18px);
+          }
+          &[data-completed="true"] {
+            &::after {
+              background-color: $success-color !important;
+            }
+            + .title::before {
+              background-color: $success-color !important;
+            }
+            &:first-child::before {
+              background-color: $success-color !important;
+            }
+            & + .title:after {
+              background-color: $success-color !important;
+            }
+            > .step {
+              > .number {
+                background-color: $success-color;
+                border-color: $success-color;
+              }
+            }
+          }
+          &[data-disabled="true"] .step {
+            opacity: 0.3;
+          }
+          > .step {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 54px;
+            > .number {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 20px;
+              font-weight: 600;
+              width: 36px;
+              height: 36px;
+              border-radius: 100%;
+              color: #fff;
+              background-color: $color-light-dark;
+              z-index: 1;
+              transition: all 0.2s ease-in-out;
+              border: 2px solid $color-light-dark;
+            }
+          }
+          > .step-title {
+            max-width: 150px;
+            overflow: hidden;
+            margin-top: 6px;
+            font-weight: 500;
+            color: $font-color-soft;
+          }
+        }
+      }
+    }
+  }
+}

package/lib/avatar/index.js

@@ -23,8 +23,7 @@ const getClass = _ref => {
     disabled,
     size = 'default'
   } = _ref;
-  return `avatar-component ${className}${disabled && '-disabled'} 
-  ${square && '-square'} ${size && `-${size}`}`;
+  return "avatar-component ".concat(className).concat(disabled && '-disabled', " \n  ").concat(square && '-square', " ").concat(size && "-".concat(size));
 };
 const getIcon = (iconName, icon) => {
   if (icon) {
@@ -71,18 +70,18 @@ const Avatar = props => {
       if (targetRef) targetRef(r);
       dropdownRef.current = r;
     },
-    className: `${getClass(props)} ${customClass}`,
+    className: "".concat(getClass(props), " ").concat(customClass),
     style: _objectSpread({
-      width: `${width}`,
-      height: `${height}`,
-      backgroundColor: `${color}`,
-      cursor: `${dropdown ? 'pointer' : 'normal'}`
+      width: "".concat(width),
+      height: "".concat(height),
+      backgroundColor: "".concat(color),
+      cursor: "".concat(dropdown ? 'pointer' : 'normal')
     }, style)
   }, (iconName || icon) && !src && getIcon(iconName, icon), src && /*#__PURE__*/_react.default.createElement("img", {
     className: "imgavatar",
     style: {
-      width: `${width}`,
-      height: `${height}`
+      width: "".concat(width),
+      height: "".concat(height)
     },
     src: src,
     alt: srcAlt

package/lib/badge/index.js

@@ -18,12 +18,12 @@ const Badge = props => {
     right = '-11px'
   } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `badge-component ${customClass}`
+    className: "badge-component ".concat(customClass)
   }, children, /*#__PURE__*/_react.default.createElement("span", {
-    className: `badge -${color} ${customClassForBadge}`,
+    className: "badge -".concat(color, " ").concat(customClassForBadge),
     style: {
-      top: `${top}`,
-      right: `${right}`
+      top: "".concat(top),
+      right: "".concat(right)
     }
   }, content));
 };

package/lib/buttons/DangerButton.js

@@ -17,7 +17,7 @@ const DangerButton = _ref => {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    customClass: `-danger ${customClass}`
+    customClass: "-danger ".concat(customClass)
   }, rest));
 };
 var _default = exports.default = DangerButton;

package/lib/buttons/DefaultButton.js

@@ -11,7 +11,7 @@ var _withTooltip = _interopRequireWildcard(require("../internals/withTooltip"));
 var _spinner = _interopRequireDefault(require("../spinner"));
 var _withDropdown = _interopRequireDefault(require("../dropdown/withDropdown"));
 var _permissionValidations = require("../permissionValidations");
-const _excluded = ["dropdown", "onClick", "disabled", "iconName", "icon", "targetRef", "tabIndex", "isLoading", "label", "showDropdown", "getDropdownPopup", "isDropdownOpened", "showIconDropdown", "content", "style", "toggleable", "activeIconColor", "iconStyle", "visible", "customClass", "className", "size", "iconAlign", "boxShadow", "transparent", "round", "permissionAttr", "skeletonize", "errorMessage", "isFloatMenu", "dropdownAlign", "customClassForDropdown", "buttonRef", "handlerClose", "onDeniedText", "tooltip", "tooltipWidth", "tooltipPosition"];
+const _excluded = ["dropdown", "onClick", "disabled", "iconName", "icon", "targetRef", "tabIndex", "isLoading", "label", "showDropdown", "getDropdownPopup", "isDropdownOpened", "showIconDropdown", "content", "style", "toggleable", "activeIconColor", "iconStyle", "visible", "customClass", "className", "size", "iconAlign", "boxShadow", "transparent", "round", "permissionAttr", "skeletonize", "errorMessage", "tooltipWidth", "isFloatMenu", "dropdownAlign", "customClassForDropdown", "buttonRef", "onDeniedText"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -54,15 +54,12 @@ const DefaultButton = _ref => {
       permissionAttr,
       skeletonize,
       errorMessage,
+      tooltipWidth,
       isFloatMenu,
       dropdownAlign,
       customClassForDropdown,
       buttonRef,
-      handlerClose,
-      onDeniedText = 'Permissão Negada! Consulte o Administrador do sistema.',
-      tooltip,
-      tooltipWidth,
-      tooltipPosition
+      onDeniedText = 'Permissão Negada! Consulte o Administrador do sistema.'
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
@@ -75,16 +72,7 @@ const DefaultButton = _ref => {
   const {
     handlerSetOnDeniedText
   } = (0, _react.useContext)(_withTooltip.TooltipContext);
-  const getClass = () => `button-component ${className}
-      ${customClass}
-      ${transparent && '-transparent'}
-      ${isDisabled && '-disabled'}
-      ${size && `-${size}`}
-      ${dropdown && !round && 'icon-right'}
-      ${dropdown && round && 'icon-center'}
-      ${iconAlign && !dropdown && `icon-${iconAlign}`}
-      ${boxShadow ? '' : '-shadowsdisabled'}
-      ${round && '-round'}`;
+  const getClass = () => "button-component ".concat(className, "\n      ").concat(customClass, "\n      ").concat(transparent && '-transparent', "\n      ").concat(isDisabled && '-disabled', "\n      ").concat(size && "-".concat(size), "\n      ").concat(dropdown && !round && 'icon-right', "\n      ").concat(dropdown && round && 'icon-center', "\n      ").concat(iconAlign && !dropdown && "icon-".concat(iconAlign), "\n      ").concat(boxShadow ? '' : '-shadowsdisabled', "\n      ").concat(round && '-round');
   const returnPadlockIcon = resultantStyle => /*#__PURE__*/_react.default.createElement(_icons.default, {
     name: "padlock",
     size: 16,
@@ -145,7 +133,7 @@ const DefaultButton = _ref => {
       if (dropdown && showDropdown) showDropdown();
       if (onClick && toggleable) setActiveButton(!activeButton);
     },
-    className: `${getClass()} ${activeButton ? '-toggleable' : ''} ${skeletonize ? '-skeletonized' : ''}`,
+    className: "".concat(getClass(), " ").concat(activeButton ? '-toggleable' : '', " ").concat(skeletonize ? '-skeletonized' : ''),
     ref: r => {
       if (buttonRef) {
         if (!_lodash.default.isFunction(buttonRef)) {

package/lib/buttons/InfoButton.js

@@ -17,7 +17,7 @@ const InfoButton = _ref => {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    customClass: `-info ${customClass}`
+    customClass: "-info ".concat(customClass)
   }, rest));
 };
 var _default = exports.default = InfoButton;

package/lib/buttons/PrimaryButton.js

@@ -17,7 +17,7 @@ const PrimaryButton = _ref => {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    customClass: `-primary ${customClass}`
+    customClass: "-primary ".concat(customClass)
   }, rest));
 };
 var _default = exports.default = PrimaryButton;

package/lib/buttons/SuccessButton.js

@@ -17,7 +17,7 @@ const SuccessButton = _ref => {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, rest, {
-    customClass: `-success ${customClass}`
+    customClass: "-success ".concat(customClass)
   }));
 };
 var _default = exports.default = SuccessButton;

package/lib/buttons/WarningButton.js

@@ -17,7 +17,7 @@ const WarningButton = _ref => {
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, rest, {
-    customClass: `-warning ${customClass}`
+    customClass: "-warning ".concat(customClass)
   }));
 };
 var _default = exports.default = WarningButton;

package/lib/buttons/button_container/index.js

@@ -23,7 +23,7 @@ const ButtonContainer = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "button-container",
-    className: `btn-container ${customClass}`,
+    className: "btn-container ".concat(customClass),
     style: getStyles(style, position)
   }, children);
 };

package/lib/buttons/split_button/index.js

@@ -37,7 +37,7 @@ const SplitButton = props => {
     }
   })), /*#__PURE__*/_react.default.createElement(_DefaultButton.default, _extends({}, splitProps, {
     iconName: "down",
-    customClass: `${customClass} -transparenttext`,
+    customClass: "".concat(customClass, " -transparenttext"),
     iconStyle: {
       marginRight: -7,
       marginLeft: 0

package/lib/buttons/types.d.ts

@@ -41,7 +41,6 @@ interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     customClassForDropdown?: string;
     dropdownAlign?: 'left' | 'right';
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-    handlerClose?: (cb: () => void) => void;
     closeDropdownOnClickOutside?: boolean;
     errorMessage?: string;
     onDeniedText?: string;

package/lib/calendar/base/Day.js

@@ -25,7 +25,7 @@ const Day = _ref => {
     onClick: () => {
       if (handleDateChange) handleDateChange(day);
     },
-    customClass: ` ${(0, _helpers.getDayCssClass)(currentDate, day)} numberdaycalendar`,
+    customClass: " ".concat((0, _helpers.getDayCssClass)(currentDate, day), " numberdaycalendar"),
     label: day.format('D')
   }));
 };

package/lib/calendar/base/Month.js

@@ -21,7 +21,7 @@ const Month = _ref => {
       const week = /*#__PURE__*/_react.default.createElement(_Week.default, {
         currentDate: currentDate,
         weekStartDate: startOfWeek,
-        key: `week-${startOfWeek.format('YYYYMMDD')}`
+        key: "week-".concat(startOfWeek.format('YYYYMMDD'))
       });
       weeks = [...weeks, week];
       weekIndex += 1;

package/lib/calendar/base/helpers.js

@@ -89,8 +89,8 @@ function getCalendarCssClass(_ref) {
     customClass,
     colorStyle
   } = _ref;
-  let cssClass = `calendar-component ${customClass}`;
-  cssClass += ` -${colorStyle}`;
+  let cssClass = "calendar-component ".concat(customClass);
+  cssClass += " -".concat(colorStyle);
   cssClass += unpadding ? ' -unpadding' : '';
   cssClass += drawGridLines ? ' -draw-grid-lines' : '';
   return cssClass;

package/lib/calendar/base/index.js

@@ -71,7 +71,7 @@ const Calendar = props => {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "daynames"
   }, (0, _helpers.dayNames)().map(name => /*#__PURE__*/_react.default.createElement("div", {
-    key: `day-${name}`
+    key: "day-".concat(name)
   }, name))), /*#__PURE__*/_react.default.createElement(_Month.default, {
     currentDate: dataAtual
   })));

package/lib/dialog/Custom.js

@@ -48,7 +48,7 @@ const Custom = props => {
   }, props.text)), props.buttons && props.buttons.length > 0 && /*#__PURE__*/_react.default.createElement(_Footer.default, props, /*#__PURE__*/_react.default.createElement(_buttons.ButtonContainer, {
     position: "right"
   }, props.buttons.map(button => /*#__PURE__*/_react.default.cloneElement(button, {
-    key: `button-${uuid.v1()}`
+    key: "button-".concat(uuid.v1())
   })))));
 };
 var _default = exports.default = Custom;

package/lib/dialog/base/Content.d.ts

@@ -4,6 +4,6 @@ import '../../@types/Align.js';
 import '../../@types/Icon.js';
 import '../../icons/helper.js';
 
-declare const Content: ({ children, styleForContent }: IContentProps) => JSX.Element;
+declare const Content: ({ children, styleForContent, className }: IContentProps) => JSX.Element;
 
 export { Content as default };

package/lib/dialog/base/Content.js

@@ -10,11 +10,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const Content = _ref => {
   let {
     children,
-    styleForContent
+    styleForContent,
+    className = ''
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     id: "modal-dialog-content",
-    className: "dialog-content",
+    className: "dialog-content ".concat(className),
     style: styleForContent
   }, children);
 };

package/lib/dialog/base/Header.js

@@ -46,10 +46,10 @@ const Header = _ref => {
     tabIndex: -1,
     onFocus: () => {},
     onBlur: () => {},
-    ref: formDialogContext?.headerRef,
+    ref: formDialogContext === null || formDialogContext === void 0 ? void 0 : formDialogContext.headerRef,
     className: "dialog-header"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${icon !== null || titleIcon !== null ? 'left' : ''}`
+    className: "".concat(icon !== null || titleIcon !== null ? 'left' : '')
   }, getIcon(titleIcon, icon)), /*#__PURE__*/_react.default.createElement("div", {
     className: "right"
   }, /*#__PURE__*/_react.default.createElement("h5", {

package/lib/dialog/base/index.js

@@ -21,7 +21,8 @@ const BaseDialog = props => {
     overlay = true,
     closeOnEsc,
     closeOnOutsideClick,
-    wrapperClassName,
+    wrapperClassName = '',
+    className = '',
     children,
     open: openProp,
     onOpenChange,
@@ -74,7 +75,7 @@ const BaseDialog = props => {
       let y = positionY <= 0 ? 0 : positionY;
       if (x + width >= window.innerWidth) x = window.innerWidth - width;
       if (y + height >= window.innerHeight) y = window.innerHeight - height;
-      wrapperEl.current.style.transform = `translate(${x}px, ${y}px)`;
+      wrapperEl.current.style.transform = "translate(".concat(x, "px, ").concat(y, "px)");
       wrapperEl.current.style.transition = 'none';
       wrapperEl.current.style.left = '0';
       wrapperEl.current.style.top = '0';
@@ -94,8 +95,9 @@ const BaseDialog = props => {
     }
   };
   const onMouseDown = event => {
+    var _headerRef$current;
     const element = event.target;
-    const isHeader = headerRef?.current?.contains(element);
+    const isHeader = headerRef === null || headerRef === void 0 ? void 0 : (_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.contains(element);
     if (wrapperEl.current && isHeader) setIsDragging(true);
   };
   const onMouseUp = () => {
@@ -111,7 +113,7 @@ const BaseDialog = props => {
     className: "modal-overlay",
     "data-testid": "modal-overlay"
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "dialog",
+    className: "dialog ".concat(className),
     "data-testid": "dialog-component"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: wrapperClassName,

package/lib/dialog/form/index.js

@@ -29,7 +29,10 @@ const ModalForm = props => {
     width = '50%',
     height = '50%',
     content,
-    children
+    children,
+    className = '',
+    wrapperClassName = '',
+    contentClassName = ''
   } = props;
   const headerRef = (0, _react.useRef)(null);
   const context = (0, _react.useContext)(_withFormSecurity.FormSecurityContext);
@@ -56,7 +59,8 @@ const ModalForm = props => {
     width: width,
     height: height
   }, props, {
-    wrapperClassName: "dialog-form-wrapper"
+    wrapperClassName: "dialog-form-wrapper ".concat(wrapperClassName),
+    className: className
   }), props.title && /*#__PURE__*/_react.default.createElement("div", {
     className: "header-form"
   }, /*#__PURE__*/_react.default.createElement(_Header.default, {
@@ -64,7 +68,8 @@ const ModalForm = props => {
     handlerClose: props.handlerClose,
     icon: props.icon
   })), /*#__PURE__*/_react.default.createElement(_Content.default, {
-    styleForContent: _objectSpread(_objectSpread({}, props.styleForContent), overlayStyle)
+    styleForContent: _objectSpread(_objectSpread({}, props.styleForContent), overlayStyle),
+    className: contentClassName
   }, content || children), getSpinner(), showFooter && props.buttons && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_index.ButtonContainer, _extends({}, props, {
     style: _objectSpread({}, overlayStyle)
   }), _react.default.Children.toArray(props.buttons.map(button => {

package/lib/dialog/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties, ReactElement } from 'react';
+import { ReactNode, CSSProperties, ReactElement, Dispatch } from 'react';
 import { TextAlign } from '../@types/Align.js';
 import { IconNames } from '../@types/Icon.js';
 import '../icons/helper.js';
@@ -6,6 +6,7 @@ import '../icons/helper.js';
 interface IContentProps {
     children: ReactNode | ReactNode[];
     styleForContent?: CSSProperties;
+    className?: string;
 }
 interface IFooterProps {
     children: ReactElement | ReactElement[];
@@ -18,10 +19,11 @@ interface IHeaderProps {
     titleIcon?: IconNames;
 }
 interface IBaseProps {
-    wrapperClassName: string;
+    wrapperClassName?: string;
     width?: string;
     height?: string;
     children: ReactNode | ReactNode[];
+    className?: string;
     closeOnEsc?: boolean;
     closeOnOutsideClick?: boolean;
     overlay?: boolean;
@@ -31,7 +33,7 @@ interface IBaseProps {
     onOpenChange?: (open: boolean) => void;
     handlerClose?: () => void;
 }
-interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex' | 'wrapperClassName'> {
+interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex'> {
     buttons?: JSX.Element[];
     styleForContent?: CSSProperties;
     title?: string;
@@ -39,6 +41,7 @@ interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex' | 'wrapperC
     isWaiting?: boolean;
     icon?: JSX.Element;
     content?: ReactNode;
+    contentClassName?: string;
 }
 interface ICommonDialogProps {
     onConfirmClick?: () => void;
@@ -66,5 +69,32 @@ interface ICustomProps {
 interface IFormDialogContext {
     headerRef?: React.RefObject<HTMLDivElement>;
 }
+interface WizardComponentProps extends Omit<IFormProps, 'content'> {
+    children: React.ReactNode;
+    buttons?: JSX.Element[];
+    showProgressbar?: boolean;
+    title?: string;
+    handlerClose?: () => void;
+    controls: WizardControls;
+}
+interface WizardStepComponentProps {
+    children: React.ReactNode;
+    title: string;
+    customClass?: string;
+    customStyle?: CSSProperties;
+}
+interface WizardControls extends Omit<UseWizardReturn, 'controls'> {
+    setTotalSteps: Dispatch<React.SetStateAction<number>>;
+}
+interface UseWizardReturn {
+    changeStep: (nextStep: number) => void;
+    nextStep: () => void;
+    hasNextStep: boolean;
+    previousStep: () => void;
+    hasPreviousStep: boolean;
+    currentStep: number;
+    totalSteps: number;
+    controls: WizardControls;
+}
 
-export { IBaseProps, ICommonDialogProps, IContentProps, ICustomProps, IFooterProps, IFormDialogContext, IFormProps, IHeaderProps, IQuestionProps };
+export { IBaseProps, ICommonDialogProps, IContentProps, ICustomProps, IFooterProps, IFormDialogContext, IFormProps, IHeaderProps, IQuestionProps, UseWizardReturn, WizardComponentProps, WizardControls, WizardStepComponentProps };

package/lib/dialog/wizard/index.d.ts

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { WizardControls, WizardComponentProps } from '../types.js';
+export { WizardStep as Step } from './step.js';
+export { useWizard } from './useWizard.js';
+import '../../@types/Align.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const WizardContext: React__default.Context<WizardControls | null>;
+declare const useWizardContext: () => WizardControls | null;
+declare function Wizard({ children, controls, showProgressbar, ...dialogProps }: Readonly<WizardComponentProps>): JSX.Element;
+
+export { Wizard as Container, WizardContext, Wizard as default, useWizardContext };