onekijs-ui 0.19.21 → 0.19.22

package/dist/components/alert/components/AlertComponent.d.ts

@@ -0,0 +1,4 @@
+import { FCC } from 'onekijs-framework';
+import { AlertProps } from '../typings';
+declare const AlertComponent: FCC<AlertProps>;
+export default AlertComponent;

package/dist/components/alert/index.d.ts

@@ -0,0 +1,2 @@
+declare const Alert: import("styled-components").StyledComponent<import("onekijs-framework").FCC<import("./typings").AlertProps>, import("styled-components").DefaultTheme, {}, never>;
+export default Alert;

package/dist/components/alert/style.d.ts

@@ -0,0 +1,4 @@
+import { ComponentStyle } from '../../styles/typings';
+import { AlertProps } from './typings';
+declare const alertStyle: ComponentStyle<AlertProps>;
+export default alertStyle;

package/dist/components/alert/typings.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SpacingPropertyTheme, StylableProps } from '../../styles/typings';
+import { IconProps } from '../icon/typings';
+export type AlertProps = StylableProps & {
+    kind?: 'success' | 'info' | 'warning' | 'error' | 'debug';
+    icon?: boolean;
+    IconComponent?: React.FC<IconProps>;
+    marginBottom?: SpacingPropertyTheme;
+    marginTop?: SpacingPropertyTheme;
+    size?: 'small' | 'medium' | 'large';
+};

package/dist/components/card/typings.d.ts

@@ -21,4 +21,5 @@ export type CardTitleProps = {
 };
 export type FormCardProps = CardProps & FormDecoratorOptions & {
     name: string;
+    help?: ReactNode;
 };

package/dist/components/icon/CrossIcon.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
-declare const CrossIcon: import("styled-components").StyledComponent<React.FC<React.InputHTMLAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+import { IconProps } from './typings';
+declare const CrossIcon: import("styled-components").StyledComponent<React.FC<IconProps>, import("styled-components").DefaultTheme, {}, never>;
 export default CrossIcon;

package/dist/components/icon/typings.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { Property } from 'csstype';
-import { ColorPropertyTheme } from '../../styles/typings';
+import { ColorPropertyTheme, SpacingPropertyTheme, TLength } from '../../styles/typings';
 export type IconProps = React.InputHTMLAttributes<HTMLDivElement> & {
     color?: ColorPropertyTheme | Property.Color;
+    marginRight?: SpacingPropertyTheme | Property.MarginRight<TLength>;
+    marginLeft?: SpacingPropertyTheme | Property.MarginLeft<TLength>;
 };
 export type TogglerIconProps = IconProps & {
     open?: boolean;

package/dist/components/wizard/typings.d.ts

@@ -10,6 +10,7 @@ export type ControlledWizardProps = WizardProps & {
 export type StepProps = TabProps & {
     optional?: boolean;
     showTitle?: boolean;
+    help?: ReactNode;
     onTouch?: () => void;
 };
 export type FormStepProps = StepProps & {

package/dist/index.d.ts

@@ -158,6 +158,10 @@ export { default as useTableController } from './components/table/hooks/useTable
 export { default as useTableService } from './components/table/hooks/useTableService';
 export { default as useTextColumn } from './components/table/hooks/useTextColumn';
 export { default as useTextareaColumn } from './components/table/hooks/useTextareaColumn';
+export { default as AlertComponent } from './components/alert/components/AlertComponent';
+export { default as Alert } from './components/alert';
+export { default as alertStyle } from './components/alert/style';
+export { AlertProps } from './components/alert/typings';
 export { default as FormCardDisplayer } from './components/card/FormCardDisplayer';
 export { filterListStyle, tableStyle } from './components/table/style';
 export { ArrayTableProps, Cell, CheckboxColumn, CheckboxColumnOptions, ControllerTableProps, EnumColumnOptions, FormCellDisplayerProps, FormTableContext, FormTableItemDisplayerProps, FormTableProps, TableValueDisplayerProps, InputColumn, InputColumnOptions, LinkColumnOptions, SelectCell, SelectColumn, SelectColumnOptions, TableBodyCellProps, TableBodyProps, TableBodyRowProps, TableCellDisplayerProps, TableColumn, TableColumnComputedWidth, TableColumnOptions, TableColumnSpec, TableColumnWidth, TableColumnsState, TableConfig, TableController, TableExpandedProps, TableFilterOperator, TableFilterOperatorProps, TableFooterCellProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TableItem, TableItemAdaptee, TableItemAdapter, TableItems, TableNotFoundProps, TableProps, TableRowHandler, TableSortProps, TableState, TextareaColumn, TextareaColumnOptions, UseTableController, UseTableOptions, TableCellSerializer, TableSerializerFormat } from './components/table/typings';

package/dist/index.js

@@ -765,10 +765,12 @@ const iconCircleKeyFrame = styled.keyframes `
     transform: rotate(360deg);
   }
 `;
-const iconStyle = ({ width: cssWidth = '16px', height: cssHeight = '16px', color: cssColor = 'primary', }) => {
+const iconStyle = ({ width: cssWidth = '16px', height: cssHeight = '16px', color: cssColor = 'primary', marginLeft: ml = '0', marginRight: mr = '0', }) => {
     return styled.css `
     height: ${cssHeight};
     width: ${cssWidth};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     display: inline-flex;
     align-items: center;
 
@@ -820,9 +822,11 @@ const IconComponent$9 = ({ className, onClick, open, loading, model = 'arrow', c
     }
 };
 const TogglerIcon = styled(IconComponent$9) `
-  ${({ width = '24px', height = '24px', color: cssColor = 'inherit', visible = true }) => styled.css `
+  ${({ width = '24px', height = '24px', color: cssColor = 'inherit', visible = true, marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('inline-flex')};
     ${alignItems('center')};
     ${color(cssColor)}
@@ -1700,7 +1704,193 @@ const FormCardDisplayer = styled(FormCardDisplayerComponent) `
   ${formCardDisplayerStyle}
 `;
 
-const FormCard = ({ name, ...cardProps }) => {
+const InfoIconComponent = (props) => {
+    return (React.createElement("div", { ...props },
+        React.createElement("svg", { className: "o-icon-info-svg", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.568 1.031A6.8 6.8 0 0 1 12.76 3.05a7.06 7.06 0 0 1 .46 9.39 6.85 6.85 0 0 1-8.58 1.74 7 7 0 0 1-3.12-3.5 7.12 7.12 0 0 1-.23-4.71 7 7 0 0 1 2.77-3.79 6.8 6.8 0 0 1 4.508-1.149zM9.04 13.88a5.89 5.89 0 0 0 3.41-2.07 6.07 6.07 0 0 0-.4-8.06 5.82 5.82 0 0 0-7.43-.74 6.06 6.06 0 0 0 .5 10.29 5.81 5.81 0 0 0 3.92.58zM7.375 6h1.25V5h-1.25v1zm1.25 1v4h-1.25V7h1.25z" }))));
+};
+var InfoIcon = styled(InfoIconComponent) `
+  ${({ width = '16px', height = '16px', color: cssColor = 'info', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
+    width: ${width};
+    height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    .o-icon-info-svg {
+      display: inline-block;
+      ${fill('currentColor')}
+    }
+  `}
+`;
+
+const DebugIconComponent = (props) => {
+    return (React.createElement("div", { ...props },
+        React.createElement("svg", { className: "o-icon-debug-svg", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" },
+            React.createElement("path", { d: "M3.463 12.86l-.005-.07.005.07zm7.264.69l-3.034-3.049 1.014-1.014 3.209 3.225 3.163-3.163 1.014 1.014-3.034 3.034 3.034 3.05-1.014 1.014-3.209-3.225L8.707 17.6l-1.014-1.014 3.034-3.034z" }),
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.933 5.003V6h1.345l2.843-2.842 1.014 1.014-2.692 2.691.033.085a13.75 13.75 0 0 1 .885 4.912c0 .335-.011.667-.034.995l-.005.075h3.54v1.434h-3.72l-.01.058c-.303 1.653-.891 3.16-1.692 4.429l-.06.094 3.423 3.44-1.017 1.012-3.274-3.29-.099.11c-1.479 1.654-3.395 2.646-5.483 2.646-2.12 0-4.063-1.023-5.552-2.723l-.098-.113-3.209 3.208-1.014-1.014 3.366-3.365-.059-.095c-.772-1.25-1.34-2.725-1.636-4.34l-.01-.057H0V12.93h3.538l-.005-.075a14.23 14.23 0 0 1-.034-.995c0-1.743.31-3.39.863-4.854l.032-.084-2.762-2.776L2.65 3.135 5.5 6h1.427v-.997a5.003 5.003 0 0 1 10.006 0zm-8.572 0V6H15.5v-.997a3.569 3.569 0 0 0-7.138 0zm9.8 2.522l-.034-.09H5.733l-.034.09a12.328 12.328 0 0 0-.766 4.335c0 2.76.862 5.201 2.184 6.92 1.32 1.716 3.036 2.649 4.813 2.649 1.777 0 3.492-.933 4.813-2.65 1.322-1.718 2.184-4.16 2.184-6.919 0-1.574-.28-3.044-.766-4.335z" }))));
+};
+var DebugIcon = styled(DebugIconComponent) `
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
+    width: ${width};
+    height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    .o-icon-debug-svg {
+      display: inline-block;
+      fill: currentColor;
+    }
+  `}
+`;
+
+const ErrorIconComponent = (props) => {
+    return (React.createElement("div", { ...props },
+        React.createElement("svg", { className: "o-icon-error-svg", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.6 1c1.6.1 3.1.9 4.2 2 1.3 1.4 2 3.1 2 5.1 0 1.6-.6 3.1-1.6 4.4-1 1.2-2.4 2.1-4 2.4-1.6.3-3.2.1-4.6-.7-1.4-.8-2.5-2-3.1-3.5C.9 9.2.8 7.5 1.3 6c.5-1.6 1.4-2.9 2.8-3.8C5.4 1.3 7 .9 8.6 1zm.5 12.9c1.3-.3 2.5-1 3.4-2.1.8-1.1 1.3-2.4 1.2-3.8 0-1.6-.6-3.2-1.7-4.3-1-1-2.2-1.6-3.6-1.7-1.3-.1-2.7.2-3.8 1-1.1.8-1.9 1.9-2.3 3.3-.4 1.3-.4 2.7.2 4 .6 1.3 1.5 2.3 2.7 3 1.2.7 2.6.9 3.9.6zM7.9 7.5L10.3 5l.7.7-2.4 2.5 2.4 2.5-.7.7-2.4-2.5-2.4 2.5-.7-.7 2.4-2.5-2.4-2.5.7-.7 2.4 2.5z" }))));
+};
+var ErrorIcon = styled(ErrorIconComponent) `
+  ${({ width = '16px', height = '16px', color: cssColor = 'danger', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
+    width: ${width};
+    height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    .o-icon-error-svg {
+      display: inline-block;
+      fill: currentColor;
+    }
+  `}
+`;
+
+const WarningIconComponent = (props) => {
+    return (React.createElement("div", { ...props },
+        React.createElement("svg", { className: "o-icon-warning-svg", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28L2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z" }))));
+};
+var WarningIcon = styled(WarningIconComponent) `
+  ${({ width = '16px', height = '16px', color: cssColor = 'warning', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
+    .o-icon-warning-svg {
+      display: inline-block;
+      fill: currentColor;
+    }
+  `}
+`;
+
+const SuccessIconComponent = (props) => {
+    return (React.createElement("div", { ...props },
+        React.createElement("svg", { className: "o-icon-success-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16", fill: "currentColor" },
+            React.createElement("path", { fillRule: "evenodd", d: "M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" }))));
+};
+var SuccessIcon = styled(SuccessIconComponent) `
+  ${({ width = '16px', height = '16px', color: cssColor = 'success', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
+    .o-icon-success-svg {
+      display: inline-block;
+      fill: currentColor;
+    }
+  `}
+`;
+
+const getDefautltIconComponent = (kind) => {
+    switch (kind) {
+        case 'debug':
+            return DebugIcon;
+        case 'error':
+            return ErrorIcon;
+        case 'warning':
+            return WarningIcon;
+        case 'success':
+            return SuccessIcon;
+        default:
+            return InfoIcon;
+    }
+};
+const getIconSize = (size) => {
+    switch (size) {
+        case 'small':
+            return '24px';
+        case 'large':
+            return '48px';
+        default:
+            return '36px';
+    }
+};
+const AlertComponent = ({ kind = 'info', icon = true, IconComponent, className, children, size, }) => {
+    if (IconComponent === undefined) {
+        IconComponent = getDefautltIconComponent(kind);
+    }
+    return (React.createElement("div", { className: addClassname(`g-alert g-alert-${kind}`, className) },
+        icon && React.createElement(IconComponent, { width: getIconSize(size), height: getIconSize(size), marginRight: '20px', marginLeft: '20px' }),
+        React.createElement("div", null, children)));
+};
+
+const getBackgroundColor = (kind) => {
+    switch (kind) {
+        case 'success': return 'green-100';
+        case 'info': return 'blue-100';
+        case 'warning': return 'orange-200';
+        case 'error': return 'red-100';
+        default: return 'lighter';
+    }
+};
+const getBorderColor = (kind) => {
+    switch (kind) {
+        case 'success': return 'success';
+        case 'info': return 'info';
+        case 'warning': return 'warning';
+        case 'error': return 'danger';
+        default: return 'darker';
+    }
+};
+const getFontColor = (kind) => {
+    switch (kind) {
+        case 'success': return 'green-800';
+        case 'info': return 'blue-800';
+        case 'warning': return 'orange-800';
+        case 'error': return 'red-800';
+        default: return 'darkest';
+    }
+};
+const alertStyle = ({ kind = 'info', marginTop: mTop = '0px', marginBottom: mBottom = '0px', size = 'medium' }) => {
+    return styled.css `
+    ${display('flex')}
+    ${alignItems('center')}
+    ${backgroundColor(getBackgroundColor(kind))}
+    ${borderColor(getBorderColor(kind))}
+    ${color(getFontColor(kind))}
+    ${padding(size === 'large' ? 'lg' : size === 'small' ? 'sm' : 'md')}
+    ${borderStyle('solid')}
+    ${borderWidth('1px')}
+    ${borderRadius('sm')}
+    ${marginTop(mTop)}
+    ${marginBottom(mBottom)}
+  `;
+};
+
+const Alert = styled(AlertComponent) `
+  ${alertStyle}
+`;
+
+const FormCard = ({ name, help, children, ...cardProps }) => {
     const decorator = onekijsFramework.useFormDecorator(name, {
         Displayer: (displayerProps) => {
             return React.createElement(FormCardDisplayer, { ...displayerProps, name: typeof cardProps.title === 'string' ? cardProps.title : titlelize(name) });
@@ -1749,7 +1939,10 @@ const FormCard = ({ name, ...cardProps }) => {
         return null;
     }
     return (React.createElement(onekijsFramework.FormContext.Provider, { value: fieldContainer.context },
-        React.createElement(Card, { ...cardProps, open: !metadata.disabled, onToggle: () => (metadata.disabled ? form.enable(decorator.name) : form.disable(decorator.name)) })));
+        React.createElement(Card, { ...cardProps, open: !metadata.disabled, onToggle: () => (metadata.disabled ? form.enable(decorator.name) : form.disable(decorator.name)) },
+            React.createElement(React.Fragment, null,
+                help && React.createElement(Alert, { kind: "info", size: "small", marginBottom: "2xl" }, help),
+                children))));
 };
 
 const CheckboxComponent = ({ label, className = '', onChange, value = false, bordered = true, status, ...checkboxProps }) => {
@@ -2100,9 +2293,11 @@ const IconComponent$8 = ({ className, onClick, style }) => {
             React.createElement("path", { d: "M235 339h42v42h-42zM276.8 318h-41.6c0-67 62.4-62.2 62.4-103.8 0-22.9-18.7-41.7-41.6-41.7S214.4 192 214.4 214h-41.6c0-46 37.2-83 83.2-83s83.2 37.1 83.2 83.1c0 52-62.4 57.9-62.4 103.9z" }))));
 };
 var HelpIcon = styled(IconComponent$8) `
-  ${({ width = '24px', height = '24px', color: cssColor = 'inherit' }) => styled.css `
+  ${({ width = '24px', height = '24px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
@@ -2378,31 +2573,14 @@ const RemoveIcon = ({ className, onClick }) => {
             React.createElement("path", { fill: "currentColor", d: "M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z" }))));
 };
 var RemoveIcon$1 = styled(RemoveIcon) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => styled.css `
-    width: ${width};
-    height: ${height};
-    ${display('flex')};
-    ${alignItems('center')};
-    ${color(cssColor)}
-  `}
-`;
-
-const SuccessIconComponent = (props) => {
-    return (React.createElement("div", { ...props },
-        React.createElement("svg", { className: "o-icon-success-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16", fill: "currentColor" },
-            React.createElement("path", { fillRule: "evenodd", d: "M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" }))));
-};
-var SuccessIcon = styled(SuccessIconComponent) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'success' }) => styled.css `
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
-    .o-icon-success-svg {
-      display: inline-block;
-      fill: currentColor;
-    }
   `}
 `;
 
@@ -3829,9 +4007,11 @@ const IconComponent$7 = (props) => {
             React.createElement("rect", { y: "80", width: "100", height: "15", rx: "15", ry: "15" }))));
 };
 var MenuIcon = styled(IconComponent$7) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => styled.css `
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
@@ -3868,9 +4048,11 @@ const RefreshIconComponent = (props) => {
             React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }))));
 };
 var RefreshIcon = styled(RefreshIconComponent) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => styled.css `
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
@@ -3900,9 +4082,11 @@ const IconComponent$6 = ({ className, onClick }) => {
             React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5 3l1-1h7l1 1v7l-1 1h-2v2l-1 1H3l-1-1V6l1-1h2V3zm1 2h4l1 1v4h2V3H6v2zm4 1H3v7h7V6z" }))));
 };
 var CloseAllIcon = styled(IconComponent$6) `
-  ${({ width, height, color: cssColor = 'inherit' }) => styled.css `
+  ${({ width, height, color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
@@ -3922,6 +4106,8 @@ const IconComponent$5 = ({ className }) => {
 const CrossIcon = styled(IconComponent$5) `
   width: ${(props) => props.width || '32px'};
   height: ${(props) => props.height || '32px'};
+  margin-top: ${(props) => props.marginRight || '0px'};
+  margin-left: ${(props) => props.marginLeft || '0px'};
   .o-icon-close-svg {
     display: inline-block;
     stroke-width: 0;
@@ -3933,25 +4119,6 @@ const CrossIcon = styled(IconComponent$5) `
   }
 `;
 
-const ErrorIconComponent = (props) => {
-    return (React.createElement("div", { ...props },
-        React.createElement("svg", { className: "o-icon-error-svg", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" },
-            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.6 1c1.6.1 3.1.9 4.2 2 1.3 1.4 2 3.1 2 5.1 0 1.6-.6 3.1-1.6 4.4-1 1.2-2.4 2.1-4 2.4-1.6.3-3.2.1-4.6-.7-1.4-.8-2.5-2-3.1-3.5C.9 9.2.8 7.5 1.3 6c.5-1.6 1.4-2.9 2.8-3.8C5.4 1.3 7 .9 8.6 1zm.5 12.9c1.3-.3 2.5-1 3.4-2.1.8-1.1 1.3-2.4 1.2-3.8 0-1.6-.6-3.2-1.7-4.3-1-1-2.2-1.6-3.6-1.7-1.3-.1-2.7.2-3.8 1-1.1.8-1.9 1.9-2.3 3.3-.4 1.3-.4 2.7.2 4 .6 1.3 1.5 2.3 2.7 3 1.2.7 2.6.9 3.9.6zM7.9 7.5L10.3 5l.7.7-2.4 2.5 2.4 2.5-.7.7-2.4-2.5-2.4 2.5-.7-.7 2.4-2.5-2.4-2.5.7-.7 2.4 2.5z" }))));
-};
-var ErrorIcon = styled(ErrorIconComponent) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'danger' }) => styled.css `
-    width: ${width};
-    height: ${height};
-    ${display('flex')};
-    ${alignItems('center')};
-    ${color(cssColor)}
-    .o-icon-error-svg {
-      display: inline-block;
-      fill: currentColor;
-    }
-  `}
-`;
-
 const IconComponent$4 = (props) => {
     const className = addClassname('o-icon-file', props.className);
     return (React.createElement("div", { ...props, className: className },
@@ -3959,9 +4126,11 @@ const IconComponent$4 = (props) => {
             React.createElement("path", { d: "M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z" }))));
 };
 var FileIcon = styled(IconComponent$4) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor' }) => styled.css `
+  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     .o-icon-file-svg {
@@ -3978,9 +4147,11 @@ const IconComponent$3 = (props) => {
             React.createElement("path", { d: "M20,6h-8l-2-2H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z" }))));
 };
 var FolderIcon = styled(IconComponent$3) `
-  ${({ width = '24px', height = '24px', color: cssColor = 'currentColor' }) => styled.css `
+  ${({ width = '24px', height = '24px', color: cssColor = 'currentColor', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     .o-icon-folder-svg {
@@ -3996,9 +4167,11 @@ const IconComponent$2 = ({ className, onClick }) => {
             React.createElement("path", { d: "M115.97,101.597L88.661,74.286c4.64-7.387,7.333-16.118,7.333-25.488c0-26.509-21.49-47.996-47.998-47.996\n\t\tS0,22.289,0,48.798c0,26.51,21.487,47.995,47.996,47.995c10.197,0,19.642-3.188,27.414-8.605l26.984,26.986\n\t\tc1.875,1.873,4.333,2.806,6.788,2.806c2.458,0,4.913-0.933,6.791-2.806C119.72,111.423,119.72,105.347,115.97,101.597z\n\t\t M47.996,81.243c-17.917,0-32.443-14.525-32.443-32.443s14.526-32.444,32.443-32.444c17.918,0,32.443,14.526,32.443,32.444\n\t\tS65.914,81.243,47.996,81.243z" }))));
 };
 var SearchIcon = styled(IconComponent$2) `
-  ${({ width, height, color: cssColor = 'inherit' }) => styled.css `
+  ${({ width, height, color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
@@ -4125,9 +4298,11 @@ const IconComponent$1 = (props) => {
             React.createElement("path", { d: "M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z" }))));
 };
 var HideIcon = styled(IconComponent$1) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor' }) => styled.css `
+  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     .o-icon-hide-svg {
@@ -4144,9 +4319,11 @@ const IconComponent = (props) => {
             React.createElement("path", { d: "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" }))));
 };
 var ShowIcon = styled(IconComponent) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor' }) => styled.css `
+  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     .o-icon-show-svg {
@@ -5605,9 +5782,11 @@ const CloseIconComponent = (props) => {
             React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z" }))));
 };
 var CloseIcon = styled(CloseIconComponent) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => styled.css `
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => styled.css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
@@ -5618,64 +5797,6 @@ var CloseIcon = styled(CloseIconComponent) `
   `}
 `;
 
-const DebugIconComponent = (props) => {
-    return (React.createElement("div", { ...props },
-        React.createElement("svg", { className: "o-icon-debug-svg", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" },
-            React.createElement("path", { d: "M3.463 12.86l-.005-.07.005.07zm7.264.69l-3.034-3.049 1.014-1.014 3.209 3.225 3.163-3.163 1.014 1.014-3.034 3.034 3.034 3.05-1.014 1.014-3.209-3.225L8.707 17.6l-1.014-1.014 3.034-3.034z" }),
-            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.933 5.003V6h1.345l2.843-2.842 1.014 1.014-2.692 2.691.033.085a13.75 13.75 0 0 1 .885 4.912c0 .335-.011.667-.034.995l-.005.075h3.54v1.434h-3.72l-.01.058c-.303 1.653-.891 3.16-1.692 4.429l-.06.094 3.423 3.44-1.017 1.012-3.274-3.29-.099.11c-1.479 1.654-3.395 2.646-5.483 2.646-2.12 0-4.063-1.023-5.552-2.723l-.098-.113-3.209 3.208-1.014-1.014 3.366-3.365-.059-.095c-.772-1.25-1.34-2.725-1.636-4.34l-.01-.057H0V12.93h3.538l-.005-.075a14.23 14.23 0 0 1-.034-.995c0-1.743.31-3.39.863-4.854l.032-.084-2.762-2.776L2.65 3.135 5.5 6h1.427v-.997a5.003 5.003 0 0 1 10.006 0zm-8.572 0V6H15.5v-.997a3.569 3.569 0 0 0-7.138 0zm9.8 2.522l-.034-.09H5.733l-.034.09a12.328 12.328 0 0 0-.766 4.335c0 2.76.862 5.201 2.184 6.92 1.32 1.716 3.036 2.649 4.813 2.649 1.777 0 3.492-.933 4.813-2.65 1.322-1.718 2.184-4.16 2.184-6.919 0-1.574-.28-3.044-.766-4.335z" }))));
-};
-var DebugIcon = styled(DebugIconComponent) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => styled.css `
-    width: ${width};
-    height: ${height};
-    ${display('flex')};
-    ${alignItems('center')};
-    ${color(cssColor)}
-    .o-icon-debug-svg {
-      display: inline-block;
-      fill: currentColor;
-    }
-  `}
-`;
-
-const InfoIconComponent = (props) => {
-    return (React.createElement("div", { ...props },
-        React.createElement("svg", { className: "o-icon-success-svg", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" },
-            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.568 1.031A6.8 6.8 0 0 1 12.76 3.05a7.06 7.06 0 0 1 .46 9.39 6.85 6.85 0 0 1-8.58 1.74 7 7 0 0 1-3.12-3.5 7.12 7.12 0 0 1-.23-4.71 7 7 0 0 1 2.77-3.79 6.8 6.8 0 0 1 4.508-1.149zM9.04 13.88a5.89 5.89 0 0 0 3.41-2.07 6.07 6.07 0 0 0-.4-8.06 5.82 5.82 0 0 0-7.43-.74 6.06 6.06 0 0 0 .5 10.29 5.81 5.81 0 0 0 3.92.58zM7.375 6h1.25V5h-1.25v1zm1.25 1v4h-1.25V7h1.25z" }))));
-};
-var InfoIcon = styled(InfoIconComponent) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'info' }) => styled.css `
-    width: ${width};
-    height: ${height};
-    ${display('flex')};
-    ${alignItems('center')};
-    ${color(cssColor)}
-    .o-icon-info-svg {
-      display: inline-block;
-      fill: currentColor;
-    }
-  `}
-`;
-
-const WarningIconComponent = (props) => {
-    return (React.createElement("div", { ...props },
-        React.createElement("svg", { className: "o-icon-warning-svg", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor" },
-            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28L2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z" }))));
-};
-var WarningIcon = styled(WarningIconComponent) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'warning' }) => styled.css `
-    width: ${width};
-    height: ${height};
-    ${display('flex')};
-    ${alignItems('center')};
-    ${color(cssColor)}
-    .o-icon-warning-svg {
-      display: inline-block;
-      fill: currentColor;
-    }
-  `}
-`;
-
 const defaultFormat = (ttlMs) => Math.ceil(ttlMs / 1000);
 const ControlledTimerComponent = ({ autoStart = true, className, controller, format = defaultFormat, }) => {
     const { timeMs, ttlMs } = controller.state;
@@ -11454,7 +11575,7 @@ const useStep = (props) => {
     return step;
 };
 
-const Step = ({ title, active = false, disabled = false, visible = true, closable = false, children, icon, uid, optional = false, showTitle = true, className, onTouch, }) => {
+const Step = ({ title, active = false, disabled = false, visible = true, closable = false, children, icon, uid, optional = false, showTitle = true, className, onTouch, help, }) => {
     const { animate, forwardOnly } = useWizardState();
     const step = useStep({
         title,
@@ -11490,6 +11611,7 @@ const Step = ({ title, active = false, disabled = false, visible = true, closabl
     return (React.createElement(reactTransitionGroup.CSSTransition, { in: true, timeout: animate, appear: true, onEnter: onEnter, onEntering: onEntering },
         React.createElement("div", { className: addClassname('o-step-content', className) },
             showTitle && React.createElement("div", { className: "o-step-content-title" }, title),
+            help && React.createElement(Alert, { kind: "info", marginBottom: 'lg' }, help),
             children)));
 };
 
@@ -12467,6 +12589,8 @@ exports.Accordion = Accordion;
 exports.AccordionComponent = AccordionComponent;
 exports.AccordionContainer = AccordionContainer;
 exports.AccordionPanel = AccordionPanel;
+exports.Alert = Alert;
+exports.AlertComponent = AlertComponent;
 exports.ArraySelectComponent = ArraySelectComponent;
 exports.ArrayTreeComponent = ArrayTreeComponent;
 exports.ArrayTreeSelectComponent = ArrayTreeSelectComponent;
@@ -12607,6 +12731,7 @@ exports.WizardSummaryComponent = WizardSummaryComponent;
 exports.accordionStyle = accordionStyle;
 exports.addClassname = addClassname;
 exports.addStyle = addStyle;
+exports.alertStyle = alertStyle;
 exports.alignContent = alignContent;
 exports.alignItems = alignItems;
 exports.alignSelf = alignSelf;