onekijs-ui 0.19.21 → 0.19.22

package/dist/index.module.js

@@ -763,10 +763,12 @@ const iconCircleKeyFrame = 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 css `
     height: ${cssHeight};
     width: ${cssWidth};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     display: inline-flex;
     align-items: center;
 
@@ -818,9 +820,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 }) => css `
+  ${({ width = '24px', height = '24px', color: cssColor = 'inherit', visible = true, marginLeft: ml = '0', marginRight: mr = '0' }) => css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('inline-flex')};
     ${alignItems('center')};
     ${color(cssColor)}
@@ -1698,7 +1702,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' }) => 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' }) => 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' }) => 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' }) => 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' }) => 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 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 = useFormDecorator(name, {
         Displayer: (displayerProps) => {
             return React.createElement(FormCardDisplayer, { ...displayerProps, name: typeof cardProps.title === 'string' ? cardProps.title : titlelize(name) });
@@ -1747,7 +1937,10 @@ const FormCard = ({ name, ...cardProps }) => {
         return null;
     }
     return (React.createElement(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 }) => {
@@ -2098,9 +2291,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' }) => css `
+  ${({ width = '24px', height = '24px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
@@ -2376,31 +2571,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' }) => 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' }) => css `
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
-    .o-icon-success-svg {
-      display: inline-block;
-      fill: currentColor;
-    }
   `}
 `;
 
@@ -3827,9 +4005,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' }) => css `
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
@@ -3866,9 +4046,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' }) => css `
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
@@ -3898,9 +4080,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' }) => css `
+  ${({ width, height, color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
@@ -3920,6 +4104,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;
@@ -3931,25 +4117,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' }) => 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 },
@@ -3957,9 +4124,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' }) => css `
+  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor', marginLeft: ml = '0', marginRight: mr = '0' }) => css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     .o-icon-file-svg {
@@ -3976,9 +4145,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' }) => css `
+  ${({ width = '24px', height = '24px', color: cssColor = 'currentColor', marginLeft: ml = '0', marginRight: mr = '0' }) => css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     .o-icon-folder-svg {
@@ -3994,9 +4165,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' }) => css `
+  ${({ width, height, color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
@@ -4123,9 +4296,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' }) => css `
+  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor', marginLeft: ml = '0', marginRight: mr = '0' }) => css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     .o-icon-hide-svg {
@@ -4142,9 +4317,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' }) => css `
+  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor', marginLeft: ml = '0', marginRight: mr = '0' }) => css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     .o-icon-show-svg {
@@ -5603,9 +5780,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' }) => css `
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css `
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
@@ -5616,64 +5795,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' }) => 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' }) => 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' }) => 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;
@@ -11452,7 +11573,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,
@@ -11488,6 +11609,7 @@ const Step = ({ title, active = false, disabled = false, visible = true, closabl
     return (React.createElement(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)));
 };
 
@@ -12461,5 +12583,5 @@ const TailwindTheme = (props) => {
     return React.createElement(BaseTheme, { theme: tailwindTheme(), ...props });
 };
 
-export { Accordion, AccordionComponent, AccordionContainer, AccordionPanel, ArraySelectComponent, ArrayTreeComponent, ArrayTreeSelectComponent, BaseTheme, BreakpointKeys, Button, Card, CardComponent, CardTitle, Checkbox, CheckboxCellComponent, CheckboxComponent, CloseAllIcon, Col, ColorKeys, ControlledSelectComponent, ControlledTimerComponent, ControlledWizardComponent, ControllerTreeComponent, CrossIcon, Dashboard, DashboardBody, DashboardContainer, DashboardFooter, DashboardHeader, DashboardKeys, DashboardLeft, DashboardOverlay, DashboardRight, DashboardService, DashboardServiceContext, DashboardStateContext, DashboardToggler, DefaultCellComponent, DefaultFormCellDisplayer as DefaultCellDisplayer, DefaultSelectBroker, Dropdown, DropdownButton, DropdownComponent, DropdownList, ErrorIcon, ExpandedCellComponent, FieldDescription, FieldDescriptionComponent, FieldDisplayer, FieldHelp, FieldHelpComponent, FieldLayout, FieldLayoutComponent, FileIcon, FolderIcon, FontFamiliesKeys, FontLineHeightKeys, FontSizeKeys, FontSpacingKeys, FontWeightKeys, FormCard, FormCardDisplayer, FormCheckbox, FormInput, FormSelect$1 as FormSelect, FormStep, FormTable, FormTableItemDisplayer, FormTableValueDisplayer$1 as FormTableValueDisplayer, FormTextarea, HelpIcon, Input, InputCellComponent, InputComponent, Label, List, ListItemComponent$1 as ListItemComponent, ListItemContent, ListStatus, LoadingIcon, LoadingItem$1 as LoadingItem, MenuIcon, Modal, ModalComponent, NotificationComponent, Notifications, NotificationsComponent, Password, PasswordComponent$1 as PasswordComponent, Properties, PropertiesComponent, Property, RadiusKeys, RefreshIcon, Row, SearchIcon, Select, SelectCellComponent, SelectComponent$1 as SelectComponent, SelectIconComponent, SelectInputComponent$1 as SelectInputComponent, SelectNotFoundComponent, SelectOptionComponent$1 as SelectOptionComponent, SelectService$1 as SelectService, SelectTokensComponent$1 as SelectTokensComponent, ShadowKeys, SizeKeys, SpacingKeys, Step, StepTitle, SubmitButton, SuccessIcon, Tab, TabTitle, Table, TableBodyRowComponent, TableFilterOperatorComponent, TableInputFilterComponent, TableNumberFilterComponent, TableTextFilterComponent, Tabs, Tag, TagComponent, TailwindTheme, Textarea, TextareaCellComponent, TextareaComponent, Timer, TimerComponent, TogglerIcon, Tooltip, Tree, TreeBodyComponent, TreeComponent$1 as TreeComponent, TreeConfigContext, TreeItemComponent$1 as TreeItemComponent, TreeItemContent, TreeItemToggler, TreeListComponent, TreeSelect, TreeSelectComponent$1 as TreeSelectComponent, TreeService$1 as TreeService, TreeServiceContext, TreeStateContext, TshirtKeys, UncontrolledTimerComponent, UncontrolledWizardComponent, VirtualTreeBodyComponent, VirtualTreeListComponent, Wizard, WizardComponent, WizardContainer, WizardModal, WizardModalComponent, WizardService, WizardSummary, WizardSummaryComponent, accordionStyle, addClassname, addStyle, alignContent, alignItems, alignSelf, animation, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationTimingFunction, appearance, applyOpacity, aspectRatio, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundOpacity, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize, baseTheme, booleanFormatter, border, borderBottom, borderBottomColor, borderBottomLeftRadius, borderBottomOpacity, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderImage, borderImageOutset, borderImageRepeat, borderImageSlice, borderImageSource, borderImageWidth, borderLeft, borderLeftColor, borderLeftOpacity, borderLeftStyle, borderLeftWidth, borderOpacity, borderRadius, borderRight, borderRightColor, borderRightOpacity, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopOpacity, borderTopRightRadius, borderTopStyle, borderTopWidth, borderWidth, bottom, boxShadow, boxSizing, breakAfter, breakBefore, breakInside, buttonStyle, captionSide, cardStyle, caretColor, checkboxColumn, checkboxStyle, clear, colStyle, color, colorFormatter, columnCount, columnFill, columnGap, columnRule, columnRuleColor, columnRuleStyle, columnRuleWidth, columnSpan, columnWidth, columns, container, cssProperty, cursor, darken, dashboardOverlayStyle, defaultCellSerializer, defaultTreeQueryEngine, deriveColor, display, dropdownButtonStyle, dropdownStyle, emptyCells, enumColumn, enumFormatter, escapeCsvValue, fieldDescriptionStyle, fieldDisplayerStyle, fieldHelpStyle, fieldStyle, fill, filterListStyle, findSelectItem, findSelectItemIndex, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, float, font, fontFamily, fontFeatureSettings, fontKerning, fontLanguageOverride, fontOpticalSizing, fontSize, fontSizeAdjust, fontStretch, fontStyle, fontSynthesis, fontVariant, fontVariantAlternates, fontVariantCaps, fontVariantEastAsian, fontVariantLigatures, fontVariantNumeric, fontVariantPosition, fontVariationSettings, fontWeight, gap, grid, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnEnd, gridColumnGap, gridColumnStart, gridGap, gridRow, gridRowEnd, gridRowGap, gridRowStart, gridTemplate, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, hexToRgb, hyphens, iconHeight, iconWidth, imageRendering, inputColumn, justifyContent, justifySelf, left, letterSpacing, lighten, lineHeight, lineHeightStep, linkColumn, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, maxHeight, maxWidth, maxWidthPopperModifier, minHeight, minWidth, minWidthPopperModifier, modalStyle, notifcationsStyle, numberColumn, objectFit, objectPosition, opacity, order, orphans, outline, outlineColor, outlineOffset, outlineStyle, outlineWidth, overflow, overflowBlock, overflowInline, overflowWrap, overflowX, overflowY, overscrollBehavior, overscrollBehaviorBlock, overscrollBehaviorInline, overscrollBehaviorX, overscrollBehaviorY, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, passwordStyle, perspective, perspectiveOrigin, placeContent, placeItems, placeSelf, pointerEvents, position, preflight, propertiesStyle, pxFormatter, resize, rgbToHex, right, rotate, rowGap, rowStyle, sameWidthPopperModifier, scale, selectColumn, shouldCheckSelect, stroke, strokeWidth, tableLayout, tableStyle, tagStyle, tailwindPalette, tailwindTheme, textAlign, textColumn, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textEmphasis, textEmphasisColor, textEmphasisPosition, textEmphasisStyle, textIdent, textJustify, textOpacity, textOverflow, textShadow, textTransform, textUnderlineOffset, textUnderlinePosition, textareaColumn, themeFormatter, timerStyle, titlelize, toCss, top, touchAction, transform, transformOrigin, transition, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, useCheckboxColumn, useClickOutside, useColumns, useDashboard, useDashboardHorizontalPanel, useDashboardService, useDashboardState, useDashboardVerticalPanel, useDashoardBodyPanel, useDropdown, useEnumColumn, useFieldLayout, useFocusOutside, useFormTableContext, useInputColumn$1 as useInputColumn, useLinkColumn, useListController, useInputColumn as useNumberColumn, useSelectColumn, useSelectController, useSelectService, useTab, useTableController, useTableService, useTabsController, useTabsService, useTabsState, useTextColumn, useTextareaColumn, useTreeConfig, useTreeController, useTreeInitialState, useTreeItemContext, useTreeSelectController, useTreeService, useTreeState, userSelect, verticalAlign, visibility, whiteSpace, widows, width, wizardModalStyle, wizardStyle, wizardSummaryStyle, wordBreak, wordSpacing, zIndex, zoom };
+export { Accordion, AccordionComponent, AccordionContainer, AccordionPanel, Alert, AlertComponent, ArraySelectComponent, ArrayTreeComponent, ArrayTreeSelectComponent, BaseTheme, BreakpointKeys, Button, Card, CardComponent, CardTitle, Checkbox, CheckboxCellComponent, CheckboxComponent, CloseAllIcon, Col, ColorKeys, ControlledSelectComponent, ControlledTimerComponent, ControlledWizardComponent, ControllerTreeComponent, CrossIcon, Dashboard, DashboardBody, DashboardContainer, DashboardFooter, DashboardHeader, DashboardKeys, DashboardLeft, DashboardOverlay, DashboardRight, DashboardService, DashboardServiceContext, DashboardStateContext, DashboardToggler, DefaultCellComponent, DefaultFormCellDisplayer as DefaultCellDisplayer, DefaultSelectBroker, Dropdown, DropdownButton, DropdownComponent, DropdownList, ErrorIcon, ExpandedCellComponent, FieldDescription, FieldDescriptionComponent, FieldDisplayer, FieldHelp, FieldHelpComponent, FieldLayout, FieldLayoutComponent, FileIcon, FolderIcon, FontFamiliesKeys, FontLineHeightKeys, FontSizeKeys, FontSpacingKeys, FontWeightKeys, FormCard, FormCardDisplayer, FormCheckbox, FormInput, FormSelect$1 as FormSelect, FormStep, FormTable, FormTableItemDisplayer, FormTableValueDisplayer$1 as FormTableValueDisplayer, FormTextarea, HelpIcon, Input, InputCellComponent, InputComponent, Label, List, ListItemComponent$1 as ListItemComponent, ListItemContent, ListStatus, LoadingIcon, LoadingItem$1 as LoadingItem, MenuIcon, Modal, ModalComponent, NotificationComponent, Notifications, NotificationsComponent, Password, PasswordComponent$1 as PasswordComponent, Properties, PropertiesComponent, Property, RadiusKeys, RefreshIcon, Row, SearchIcon, Select, SelectCellComponent, SelectComponent$1 as SelectComponent, SelectIconComponent, SelectInputComponent$1 as SelectInputComponent, SelectNotFoundComponent, SelectOptionComponent$1 as SelectOptionComponent, SelectService$1 as SelectService, SelectTokensComponent$1 as SelectTokensComponent, ShadowKeys, SizeKeys, SpacingKeys, Step, StepTitle, SubmitButton, SuccessIcon, Tab, TabTitle, Table, TableBodyRowComponent, TableFilterOperatorComponent, TableInputFilterComponent, TableNumberFilterComponent, TableTextFilterComponent, Tabs, Tag, TagComponent, TailwindTheme, Textarea, TextareaCellComponent, TextareaComponent, Timer, TimerComponent, TogglerIcon, Tooltip, Tree, TreeBodyComponent, TreeComponent$1 as TreeComponent, TreeConfigContext, TreeItemComponent$1 as TreeItemComponent, TreeItemContent, TreeItemToggler, TreeListComponent, TreeSelect, TreeSelectComponent$1 as TreeSelectComponent, TreeService$1 as TreeService, TreeServiceContext, TreeStateContext, TshirtKeys, UncontrolledTimerComponent, UncontrolledWizardComponent, VirtualTreeBodyComponent, VirtualTreeListComponent, Wizard, WizardComponent, WizardContainer, WizardModal, WizardModalComponent, WizardService, WizardSummary, WizardSummaryComponent, accordionStyle, addClassname, addStyle, alertStyle, alignContent, alignItems, alignSelf, animation, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationTimingFunction, appearance, applyOpacity, aspectRatio, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundOpacity, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize, baseTheme, booleanFormatter, border, borderBottom, borderBottomColor, borderBottomLeftRadius, borderBottomOpacity, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderImage, borderImageOutset, borderImageRepeat, borderImageSlice, borderImageSource, borderImageWidth, borderLeft, borderLeftColor, borderLeftOpacity, borderLeftStyle, borderLeftWidth, borderOpacity, borderRadius, borderRight, borderRightColor, borderRightOpacity, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopOpacity, borderTopRightRadius, borderTopStyle, borderTopWidth, borderWidth, bottom, boxShadow, boxSizing, breakAfter, breakBefore, breakInside, buttonStyle, captionSide, cardStyle, caretColor, checkboxColumn, checkboxStyle, clear, colStyle, color, colorFormatter, columnCount, columnFill, columnGap, columnRule, columnRuleColor, columnRuleStyle, columnRuleWidth, columnSpan, columnWidth, columns, container, cssProperty, cursor, darken, dashboardOverlayStyle, defaultCellSerializer, defaultTreeQueryEngine, deriveColor, display, dropdownButtonStyle, dropdownStyle, emptyCells, enumColumn, enumFormatter, escapeCsvValue, fieldDescriptionStyle, fieldDisplayerStyle, fieldHelpStyle, fieldStyle, fill, filterListStyle, findSelectItem, findSelectItemIndex, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, float, font, fontFamily, fontFeatureSettings, fontKerning, fontLanguageOverride, fontOpticalSizing, fontSize, fontSizeAdjust, fontStretch, fontStyle, fontSynthesis, fontVariant, fontVariantAlternates, fontVariantCaps, fontVariantEastAsian, fontVariantLigatures, fontVariantNumeric, fontVariantPosition, fontVariationSettings, fontWeight, gap, grid, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnEnd, gridColumnGap, gridColumnStart, gridGap, gridRow, gridRowEnd, gridRowGap, gridRowStart, gridTemplate, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, hexToRgb, hyphens, iconHeight, iconWidth, imageRendering, inputColumn, justifyContent, justifySelf, left, letterSpacing, lighten, lineHeight, lineHeightStep, linkColumn, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, maxHeight, maxWidth, maxWidthPopperModifier, minHeight, minWidth, minWidthPopperModifier, modalStyle, notifcationsStyle, numberColumn, objectFit, objectPosition, opacity, order, orphans, outline, outlineColor, outlineOffset, outlineStyle, outlineWidth, overflow, overflowBlock, overflowInline, overflowWrap, overflowX, overflowY, overscrollBehavior, overscrollBehaviorBlock, overscrollBehaviorInline, overscrollBehaviorX, overscrollBehaviorY, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, passwordStyle, perspective, perspectiveOrigin, placeContent, placeItems, placeSelf, pointerEvents, position, preflight, propertiesStyle, pxFormatter, resize, rgbToHex, right, rotate, rowGap, rowStyle, sameWidthPopperModifier, scale, selectColumn, shouldCheckSelect, stroke, strokeWidth, tableLayout, tableStyle, tagStyle, tailwindPalette, tailwindTheme, textAlign, textColumn, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textEmphasis, textEmphasisColor, textEmphasisPosition, textEmphasisStyle, textIdent, textJustify, textOpacity, textOverflow, textShadow, textTransform, textUnderlineOffset, textUnderlinePosition, textareaColumn, themeFormatter, timerStyle, titlelize, toCss, top, touchAction, transform, transformOrigin, transition, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, useCheckboxColumn, useClickOutside, useColumns, useDashboard, useDashboardHorizontalPanel, useDashboardService, useDashboardState, useDashboardVerticalPanel, useDashoardBodyPanel, useDropdown, useEnumColumn, useFieldLayout, useFocusOutside, useFormTableContext, useInputColumn$1 as useInputColumn, useLinkColumn, useListController, useInputColumn as useNumberColumn, useSelectColumn, useSelectController, useSelectService, useTab, useTableController, useTableService, useTabsController, useTabsService, useTabsState, useTextColumn, useTextareaColumn, useTreeConfig, useTreeController, useTreeInitialState, useTreeItemContext, useTreeSelectController, useTreeService, useTreeState, userSelect, verticalAlign, visibility, whiteSpace, widows, width, wizardModalStyle, wizardStyle, wizardSummaryStyle, wordBreak, wordSpacing, zIndex, zoom };
 //# sourceMappingURL=index.module.js.map