linear-react-components-ui 1.1.20-beta.2 → 1.1.20-beta.20

package/lib/assets/styles/input.scss

@@ -2,7 +2,7 @@
 @import "fonts.scss";
 @import "colors.scss";
 @import "effects";
-.input-base-component > .labelcontainer {
+.input-base-component > .labelcontainer > .text-content {
   margin: 0; 
   padding: 0;
   line-height: 14px;
@@ -115,7 +115,7 @@
 }
 
 .input-base-component.-skeletonized {
-  > .labelcontainer > .label,
+  > .labelcontainer > .text-content > .label,
   > .hint {
     @extend %skeleton-component;
     color: transparent;

package/lib/assets/styles/popover.scss

@@ -38,4 +38,7 @@
       color: rgb(59, 59, 59);
     }
   }
+  &.-hint {
+    width: 100% !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/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/buttons/DefaultButton.js

@@ -89,8 +89,9 @@ const DefaultButton = _ref => {
     }
     if (dropdown && showIconDropdown) {
       const openDropDownRule = isDropdownOpened ? 'mini_up' : 'mini_down';
+      const dropdownIcon = iconName || openDropDownRule;
       return /*#__PURE__*/_react.default.createElement(_icons.default, {
-        name: openDropDownRule,
+        name: dropdownIcon,
         size: 16,
         customClass: "dropdown-icon",
         pointerEvents: "none",

package/lib/checkbox/index.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _Label = _interopRequireDefault(require("./Label"));
 var _gridlayout = _interopRequireDefault(require("../gridlayout"));
 var _permissionValidations = require("../permissionValidations");
 require("../assets/styles/checkbox.scss");
 var _errorMessage = require("../inputs/errorMessage");
 var _ = require("..");
+var _textContent = _interopRequireDefault(require("../textContent"));
+var _popover = _interopRequireDefault(require("../popover"));
+var _hint = _interopRequireDefault(require("../hint"));
 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; }
@@ -40,7 +42,11 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tooltipWidth = 'auto',
     skeletonize,
     targetRef,
-    errorMessages
+    errorMessages,
+    customClassForLabel,
+    hintPosition = 'below',
+    themePopover = 'light',
+    popoverAlign = 'left'
   } = _ref;
   const [isChecked, setIsChecked] = (0, _react.useState)(checked);
   const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible];
@@ -52,7 +58,7 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }, [checked]);
   const shouldDisable = () => disabled || onDenied.disabled;
   const getProps = () => {
-    if (!onChange || shouldDisable()) return null;
+    if (shouldDisable()) return null;
     const target = {
       checked: !isChecked,
       id,
@@ -61,26 +67,30 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     };
     return {
       onClick: () => {
-        onChange({
-          target
-        });
+        if (!shouldDisable() && !skeletonize) {
+          setIsChecked(!isChecked);
+          onChange === null || onChange === void 0 ? void 0 : onChange({
+            target
+          });
+        }
       },
       onKeyDown: undefined,
       role: 'checkbox',
       tabIndex: -1
     };
   };
-  const renderInput = () => /*#__PURE__*/_react.default.createElement("div", _extends({}, getProps(), {
+  const renderInput = () => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    "data-skeletonized": skeletonize,
     className: "checkbox-component",
-    "data-skeletonized": skeletonize
-  }), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", _extends({
     "data-testid": "checkbox-container",
     className: "inputcontent",
-    onClick: !shouldDisable() && !skeletonize ? () => setIsChecked(!isChecked) : undefined,
-    tabIndex: -1,
-    role: "checkbox",
-    "aria-checked": "false"
-  }, /*#__PURE__*/_react.default.createElement("input", {
+    "aria-checked": isChecked
+  }, getProps()), /*#__PURE__*/_react.default.createElement("input", {
     id: id || undefined,
     ref: r => {
       if (targetRef) targetRef(r);
@@ -98,14 +108,31 @@ const CheckBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_.Icon, {
     size: 12,
     name: "checkmark"
-  })), label && /*#__PURE__*/_react.default.createElement(_Label.default, {
-    label: label,
+  })), label && /*#__PURE__*/_react.default.createElement("div", {
+    className: "description"
+  }, /*#__PURE__*/_react.default.createElement(_textContent.default, {
+    required: required,
+    disabled: shouldDisable(),
+    className: customClassForLabel,
     tooltip: tooltip,
     tooltipWidth: tooltipWidth,
-    tooltipPosition: tooltipPosition,
+    tooltipPosition: tooltipPosition
+  }), label, /*#__PURE__*/_react.default.createElement(_textContent.default, null), /*#__PURE__*/_react.default.createElement(_hint.default, {
     disabled: disabled,
-    hint: hint
-  })), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
+    visible: !!hint && hintPosition === 'below',
+    description: hint,
+    customClass: "hint"
+  }))), !!hint && hintPosition === 'onLabelRight' && !skeletonize && /*#__PURE__*/_react.default.createElement(_popover.default, {
+    theme: themePopover,
+    align: popoverAlign,
+    customClass: "-hint",
+    iconColor: "#03bde2",
+    style: {
+      margin: '0px 5px',
+      height: 'auto',
+      width: 20
+    }
+  }, hint)), /*#__PURE__*/_react.default.createElement(_errorMessage.ErrorMessage, {
     messages: errorMessages
   }));
   if (onDenied.unvisible) return null;

package/lib/checkbox/types.d.ts

@@ -29,6 +29,7 @@ interface ICheckBoxProps {
     children?: ReactElement;
     autofocus?: boolean;
     hint?: string;
+    hintPosition?: 'below' | 'onLabelRight';
     gridLayout?: string;
     permissionAttr?: PermissionAttr | PermissionAttr[];
     tooltip?: string;
@@ -38,6 +39,9 @@ interface ICheckBoxProps {
     targetRef?: (ref: HTMLInputElement | null) => void;
     targetSpanRef?: (ref: HTMLSpanElement | null) => void;
     errorMessages?: string[] | undefined;
+    customClassForLabel?: string;
+    themePopover?: 'light' | 'dark';
+    popoverAlign?: 'right' | 'left';
 }
 
 export { ChangeEvent, ICheckBoxProps };

package/lib/dialog/Custom.js

@@ -30,9 +30,11 @@ const Custom = props => {
   const {
     width = '35%',
     height = 'auto',
-    iconName = null
+    iconName = null,
+    open
   } = props;
   return /*#__PURE__*/_react.default.createElement(_base.default, _extends({
+    open: open,
     width: width,
     height: height
   }, props, {

package/lib/dialog/Question.js

@@ -4,21 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _buttons = _interopRequireWildcard(require("../buttons"));
 var _Custom = _interopRequireDefault(require("./Custom"));
 var _icons = _interopRequireDefault(require("../icons"));
+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; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Question = props => {
   const {
     visible = true,
+    closeOnEsc = false,
     isWaiting,
     onConfirmClick,
     onUnconfirmClick
   } = props;
+  const idUnconfirm = 'botao-unconfirm-click';
   const buttons = [/*#__PURE__*/_react.default.createElement(_buttons.DangerButton, {
     key: "yes-buttom",
     disabled: isWaiting,
@@ -26,14 +28,30 @@ const Question = props => {
     isLoading: isWaiting,
     label: "Sim"
   }), /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    id: idUnconfirm,
     key: "no-buttom",
     disabled: isWaiting,
     onClick: onUnconfirmClick,
     label: "N\xE3o"
   })];
+  (0, _react.useLayoutEffect)(() => {
+    const lastElementActive = document.activeElement;
+    return () => {
+      var _lastElementActive$fo;
+      lastElementActive === null || lastElementActive === void 0 ? void 0 : (_lastElementActive$fo = lastElementActive.focus) === null || _lastElementActive$fo === void 0 ? void 0 : _lastElementActive$fo.call(lastElementActive);
+    };
+  }, [visible]);
+  (0, _react.useEffect)(() => {
+    var _buttonUnconfirm$focu;
+    const buttonUnconfirm = document.getElementById(idUnconfirm);
+    buttonUnconfirm === null || buttonUnconfirm === void 0 ? void 0 : (_buttonUnconfirm$focu = buttonUnconfirm.focus) === null || _buttonUnconfirm$focu === void 0 ? void 0 : _buttonUnconfirm$focu.call(buttonUnconfirm);
+  }, [visible, document.activeElement]);
   if (!visible) return null;
   return /*#__PURE__*/_react.default.createElement(_Custom.default, _extends({}, props, {
+    open: visible,
     buttons: buttons,
+    closeOnEsc: closeOnEsc,
+    handlerClose: onUnconfirmClick,
     icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
       name: "question",
       color: "#3498db",

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/index.js

@@ -21,7 +21,8 @@ const BaseDialog = props => {
     overlay = true,
     closeOnEsc,
     closeOnOutsideClick,
-    wrapperClassName,
+    wrapperClassName = '',
+    className = '',
     children,
     open: openProp,
     onOpenChange,
@@ -42,9 +43,7 @@ const BaseDialog = props => {
       onOpenChange(false);
     } else {
       if (handlerClose) handlerClose();
-      if (onOpenChange) {
-        onOpenChange(false);
-      }
+      if (onOpenChange) onOpenChange(false);
     }
   };
   const handleClickOutside = event => {
@@ -56,7 +55,8 @@ const BaseDialog = props => {
     }
   };
   const handleCloseOnEsc = event => {
-    if (event.key === 'Escape') {
+    if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
+      event.stopPropagation();
       handleClose();
     }
   };
@@ -112,7 +112,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;
@@ -53,6 +56,7 @@ interface IQuestionProps {
     text?: string;
     title?: string;
     zIndex?: number | string;
+    closeOnEsc?: boolean;
 }
 interface ICustomProps {
     icon: ReactElement;
@@ -62,9 +66,39 @@ interface ICustomProps {
     height?: string;
     width?: string;
     iconName?: IconNames | null;
+    open?: boolean;
+    closeOnEsc?: boolean;
+    handlerClose?: () => void;
 }
 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 };

package/lib/dialog/wizard/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = Wizard;
+Object.defineProperty(exports, "Step", {
+  enumerable: true,
+  get: function () {
+    return _step.WizardStep;
+  }
+});
+exports.default = exports.WizardContext = void 0;
+Object.defineProperty(exports, "useWizard", {
+  enumerable: true,
+  get: function () {
+    return _useWizard.useWizard;
+  }
+});
+exports.useWizardContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _form = _interopRequireDefault(require("../form/"));
+var _progressbar = require("./progressbar");
+require("../../assets/styles/wizard.scss");
+var _step = require("./step");
+var _useWizard = require("./useWizard");
+const _excluded = ["children", "controls", "showProgressbar"];
+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; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const WizardContext = exports.WizardContext = /*#__PURE__*/_react.default.createContext(null);
+const useWizardContext = () => _react.default.useContext(WizardContext);
+exports.useWizardContext = useWizardContext;
+function Wizard(_ref) {
+  let {
+      children,
+      controls,
+      showProgressbar = true
+    } = _ref,
+    dialogProps = _objectWithoutProperties(_ref, _excluded);
+  const {
+    currentStep,
+    setTotalSteps
+  } = controls;
+  const steps = _react.default.Children.toArray(children);
+  const stepsTitle = steps.map((step, index) => {
+    return {
+      title: String(step.props.title),
+      number: index + 1,
+      completed: index < currentStep - 1 && index !== currentStep
+    };
+  });
+  const currentStepElement = steps[currentStep - 1];
+  if (!controls || _lodash.default.isEmpty(controls)) throw new Error('Wizard must be have controls by using useWizard hook or creating manually.');
+  (0, _react.useEffect)(() => {
+    setTotalSteps(steps.length);
+  }, [steps.length]);
+  return /*#__PURE__*/_react.default.createElement(WizardContext.Provider, {
+    value: controls
+  }, /*#__PURE__*/_react.default.createElement(_form.default, _extends({
+    className: "wizard-dialog",
+    wrapperClassName: "wizard-wrapper",
+    contentClassName: "wizard-content"
+  }, dialogProps), showProgressbar && /*#__PURE__*/_react.default.createElement(_progressbar.Progressbar, {
+    stepsTitle: stepsTitle
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "wizard-body"
+  }, currentStepElement)));
+}
+var _default = exports.default = Wizard;