@webiny/app-admin 6.0.0-beta.0 → 6.0.0-rc.1

package/components/SimpleForm/SimpleForm.d.ts

@@ -1,25 +1,32 @@
 import * as React from "react";
-interface SimpleFormProps {
+import { type VariantProps } from "@webiny/admin-ui";
+declare const simpleFormInnerVariants: (props?: ({
+    size?: "full" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface SimpleFormProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof simpleFormInnerVariants> {
     children: React.ReactNode;
-    "data-testid"?: string;
     noElevation?: boolean;
     className?: string;
 }
-export declare const SimpleForm: (props: SimpleFormProps) => React.JSX.Element;
-interface SimpleFormHeaderProps {
+export declare const SimpleForm: ({ children, className, size, ...props }: SimpleFormProps) => React.JSX.Element;
+declare const simpleFormHeaderVariants: (props?: ({
+    rounded?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface SimpleFormHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof simpleFormHeaderVariants> {
     title: React.ReactNode;
     icon?: React.ReactElement<any>;
     children?: React.ReactNode;
     ["data-testid"]?: string;
 }
-export declare const SimpleFormHeader: (props: SimpleFormHeaderProps) => React.JSX.Element;
+export declare const SimpleFormHeader: ({ children, icon, title, className, rounded, ...props }: SimpleFormHeaderProps) => React.JSX.Element;
 export interface SimpleFormFooterProps {
     children: React.ReactNode;
     className?: string;
 }
-export declare const SimpleFormFooter: (props: SimpleFormFooterProps) => React.JSX.Element;
+export declare const SimpleFormFooter: ({ children, className }: SimpleFormFooterProps) => React.JSX.Element;
 interface SimpleFormContentProps {
     children: React.ReactNode;
+    className?: string;
 }
-export declare const SimpleFormContent: (props: SimpleFormContentProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const SimpleFormContent: ({ children, className }: SimpleFormContentProps) => React.JSX.Element;
 export {};

package/components/SimpleForm/SimpleForm.js

@@ -1,86 +1,81 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SimpleFormHeader = exports.SimpleFormFooter = exports.SimpleFormContent = exports.SimpleForm = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var React = _interopRequireWildcard(require("react"));
-var _emotion = require("emotion");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _Grid = require("@webiny/ui/Grid");
-var _Typography = require("@webiny/ui/Typography");
-var _Elevation = require("@webiny/ui/Elevation");
-var _Icon = require("@webiny/ui/Icon");
-var _templateObject;
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var SimpleFormContainer = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "ep5jo8l0"
-} : {
-  target: "ep5jo8l0",
-  label: "SimpleFormContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "nlaxp8",
-  styles: "position:relative;margin:17px 50px"
-} : {
-  name: "nlaxp8",
-  styles: "position:relative;margin:17px 50px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNpbXBsZUZvcm0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVM0QiIsImZpbGUiOiJTaW1wbGVGb3JtLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiZW1vdGlvblwiO1xuaW1wb3J0IGNsYXNzTmFtZXMgZnJvbSBcImNsYXNzbmFtZXNcIjtcbmltcG9ydCB7IENlbGwsIEdyaWQgfSBmcm9tIFwiQHdlYmlueS91aS9HcmlkXCI7XG5pbXBvcnQgeyBUeXBvZ3JhcGh5IH0gZnJvbSBcIkB3ZWJpbnkvdWkvVHlwb2dyYXBoeVwiO1xuaW1wb3J0IHsgRWxldmF0aW9uIH0gZnJvbSBcIkB3ZWJpbnkvdWkvRWxldmF0aW9uXCI7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSBcIkB3ZWJpbnkvdWkvSWNvblwiO1xuXG5jb25zdCBTaW1wbGVGb3JtQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgIG1hcmdpbjogXCIxN3B4IDUwcHhcIlxufSk7XG5cbmNvbnN0IGhlYWRlciA9IGNzcyh7XG4gICAgYm9yZGVyQm90dG9tOiBcIjFweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZClcIixcbiAgICBjb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtdGV4dC1wcmltYXJ5LW9uLWJhY2tncm91bmQpXCJcbn0pO1xuXG5jb25zdCB0aXRsZSA9IGNzcyh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIlxufSk7XG5cbmNvbnN0IGFjdGlvbnMgPSBjc3Moe1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcImZsZXgtZW5kXCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIlxufSk7XG5cbmNvbnN0IGljb24gPSBjc3Moe1xuICAgIG1hcmdpblJpZ2h0OiAxNSxcbiAgICBjb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtdGV4dC1wcmltYXJ5LW9uLWJhY2tncm91bmQpXCJcbn0pO1xuXG5jb25zdCBmb290ZXIgPSBjc3NgXG4gICAgZGlzcGxheTogZmxleDtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtZW5kO1xuICAgIGZsZXgtd3JhcDogd3JhcDtcbiAgICBib3JkZXItdG9wOiAxcHggc29saWQgdmFyKC0tbWRjLXRoZW1lLW9uLWJhY2tncm91bmQpO1xuICAgIHBhZGRpbmc6IDI0cHg7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBtaW4taGVpZ2h0OiA1MnB4O1xuICAgIGJ1dHRvbjpsYXN0LW9mLXR5cGUge1xuICAgICAgICBtYXJnaW4tbGVmdDogOHB4O1xuICAgIH1cbmA7XG5cbmludGVyZmFjZSBTaW1wbGVGb3JtUHJvcHMge1xuICAgIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGU7XG4gICAgXCJkYXRhLXRlc3RpZFwiPzogc3RyaW5nO1xuICAgIG5vRWxldmF0aW9uPzogYm9vbGVhbjtcbiAgICBjbGFzc05hbWU/OiBzdHJpbmc7XG59XG5leHBvcnQgY29uc3QgU2ltcGxlRm9ybSA9IChwcm9wczogU2ltcGxlRm9ybVByb3BzKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgICAgPFNpbXBsZUZvcm1Db250YWluZXJcbiAgICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lcyhcIndlYmlueS1kYXRhLWxpc3RcIiwgcHJvcHMuY2xhc3NOYW1lKX1cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPXtwcm9wc1tcImRhdGEtdGVzdGlkXCJdfVxuICAgICAgICA+XG4gICAgICAgICAgICB7cHJvcHMubm9FbGV2YXRpb24gPyBwcm9wcy5jaGlsZHJlbiA6IDxFbGV2YXRpb24gej17MX0+e3Byb3BzLmNoaWxkcmVufTwvRWxldmF0aW9uPn1cbiAgICAgICAgPC9TaW1wbGVGb3JtQ29udGFpbmVyPlxuICAgICk7XG59O1xuXG5pbnRlcmZhY2UgU2ltcGxlRm9ybUhlYWRlclByb3BzIHtcbiAgICB0aXRsZTogUmVhY3QuUmVhY3ROb2RlO1xuICAgIGljb24/OiBSZWFjdC5SZWFjdEVsZW1lbnQ8YW55PjtcbiAgICBjaGlsZHJlbj86IFJlYWN0LlJlYWN0Tm9kZTtcbiAgICBbXCJkYXRhLXRlc3RpZFwiXT86IHN0cmluZztcbn1cbmV4cG9ydCBjb25zdCBTaW1wbGVGb3JtSGVhZGVyID0gKHByb3BzOiBTaW1wbGVGb3JtSGVhZGVyUHJvcHMpID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgICA8R3JpZCBjbGFzc05hbWU9e2hlYWRlcn0gZGF0YS10ZXN0aWQ9e3Byb3BzW1wiZGF0YS10ZXN0aWRcIl19PlxuICAgICAgICAgICAgPENlbGwgc3Bhbj17cHJvcHMuY2hpbGRyZW4gPyA2IDogMTJ9IGNsYXNzTmFtZT17dGl0bGV9PlxuICAgICAgICAgICAgICAgIDxSZWFjdC5GcmFnbWVudD5cbiAgICAgICAgICAgICAgICAgICAge3Byb3BzLmljb24gJiYgPEljb24gY2xhc3NOYW1lPXtpY29ufSBpY29uPXtwcm9wcy5pY29ufSAvPn1cbiAgICAgICAgICAgICAgICAgICAgPFR5cG9ncmFwaHkgdXNlPVwiaGVhZGxpbmU1XCI+e3Byb3BzLnRpdGxlfTwvVHlwb2dyYXBoeT5cbiAgICAgICAgICAgICAgICA8L1JlYWN0LkZyYWdtZW50PlxuICAgICAgICAgICAgPC9DZWxsPlxuICAgICAgICAgICAge3Byb3BzLmNoaWxkcmVuICYmIChcbiAgICAgICAgICAgICAgICA8Q2VsbCBzcGFuPXs2fSBjbGFzc05hbWU9e2FjdGlvbnN9PlxuICAgICAgICAgICAgICAgICAgICB7cHJvcHMuY2hpbGRyZW59XG4gICAgICAgICAgICAgICAgPC9DZWxsPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgPC9HcmlkPlxuICAgICk7XG59O1xuXG5leHBvcnQgaW50ZXJmYWNlIFNpbXBsZUZvcm1Gb290ZXJQcm9wcyB7XG4gICAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbiAgICBjbGFzc05hbWU/OiBzdHJpbmc7XG59XG5leHBvcnQgY29uc3QgU2ltcGxlRm9ybUZvb3RlciA9IChwcm9wczogU2ltcGxlRm9ybUZvb3RlclByb3BzKSA9PiB7XG4gICAgcmV0dXJuIDxkaXYgY2xhc3NOYW1lPXtjbGFzc05hbWVzKGZvb3RlciwgcHJvcHMuY2xhc3NOYW1lKX0+e3Byb3BzLmNoaWxkcmVufTwvZGl2Pjtcbn07XG5cbmludGVyZmFjZSBTaW1wbGVGb3JtQ29udGVudFByb3BzIHtcbiAgICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xufVxuXG5leHBvcnQgY29uc3QgU2ltcGxlRm9ybUNvbnRlbnQgPSAocHJvcHM6IFNpbXBsZUZvcm1Db250ZW50UHJvcHMpID0+IHtcbiAgICByZXR1cm4gcHJvcHMuY2hpbGRyZW4gYXMgdW5rbm93biBhcyBSZWFjdC5SZWFjdEVsZW1lbnQ7XG59O1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var header = (0, _emotion.css)({
-  borderBottom: "1px solid var(--mdc-theme-on-background)",
-  color: "var(--mdc-theme-text-primary-on-background)"
-});
-var title = (0, _emotion.css)({
-  display: "flex",
-  alignItems: "center"
-});
-var actions = (0, _emotion.css)({
-  display: "flex",
-  justifyContent: "flex-end",
-  alignItems: "center"
+import * as React from "react";
+import { cn, cva, Grid, Heading, Icon } from "@webiny/admin-ui";
+const simpleFormInnerVariants = cva("mx-auto", {
+  variants: {
+    size: {
+      md: "max-w-[640px]",
+      lg: "max-w-[800px]",
+      full: "max-w-full"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
 });
-var icon = (0, _emotion.css)({
-  marginRight: 15,
-  color: "var(--mdc-theme-text-primary-on-background)"
-});
-var footer = (0, _emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    border-top: 1px solid var(--mdc-theme-on-background);\n    padding: 24px;\n    box-sizing: border-box;\n    min-height: 52px;\n    button:last-of-type {\n        margin-left: 8px;\n    }\n"])));
-var SimpleForm = exports.SimpleForm = function SimpleForm(props) {
-  return /*#__PURE__*/React.createElement(SimpleFormContainer, {
-    className: (0, _classnames.default)("webiny-data-list", props.className),
-    "data-testid": props["data-testid"]
-  }, props.noElevation ? props.children : /*#__PURE__*/React.createElement(_Elevation.Elevation, {
-    z: 1
-  }, props.children));
+export const SimpleForm = ({
+  children,
+  className,
+  size,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: cn(["webiny-data-list", "mx-auto p-lg", "relative"], className)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn(simpleFormInnerVariants({
+      size
+    }))
+  }, children));
 };
-var SimpleFormHeader = exports.SimpleFormHeader = function SimpleFormHeader(props) {
-  return /*#__PURE__*/React.createElement(_Grid.Grid, {
-    className: header,
+const simpleFormHeaderVariants = cva("p-md pl-lg border-sm border-neutral-dimmed-darker", {
+  variants: {
+    rounded: {
+      true: "rounded-t-3xl"
+    }
+  },
+  defaultVariants: {
+    rounded: true
+  }
+});
+export const SimpleFormHeader = ({
+  children,
+  icon,
+  title,
+  className,
+  rounded,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(simpleFormHeaderVariants({
+      rounded
+    }), className),
     "data-testid": props["data-testid"]
-  }, /*#__PURE__*/React.createElement(_Grid.Cell, {
-    span: props.children ? 6 : 12,
-    className: title
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, props.icon && /*#__PURE__*/React.createElement(_Icon.Icon, {
-    className: icon,
-    icon: props.icon
-  }), /*#__PURE__*/React.createElement(_Typography.Typography, {
-    use: "headline5"
-  }, props.title))), props.children && /*#__PURE__*/React.createElement(_Grid.Cell, {
-    span: 6,
-    className: actions
-  }, props.children));
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: children ? 6 : 12
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement(Icon, {
+    label: title,
+    icon: icon
+  }), /*#__PURE__*/React.createElement(Heading, {
+    level: 4,
+    className: "truncate"
+  }, title))), /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 6
+  }, children) : null)));
 };
-var SimpleFormFooter = exports.SimpleFormFooter = function SimpleFormFooter(props) {
+export const SimpleFormFooter = ({
+  children,
+  className
+}) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)(footer, props.className)
-  }, props.children);
+    className: cn("p-lg pt-none border-sm border-t-none border-neutral-dimmed-darker rounded-b-3xl", "flex justify-end gap-sm", className)
+  }, children);
 };
-var SimpleFormContent = exports.SimpleFormContent = function SimpleFormContent(props) {
-  return props.children;
+export const SimpleFormContent = ({
+  children,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn("p-lg border-sm border-y-none border-neutral-dimmed-darker", className)
+  }, children);
 };
 
 //# sourceMappingURL=SimpleForm.js.map

package/components/SimpleForm/SimpleForm.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_emotion","_classnames","_interopRequireDefault","_Grid","_Typography","_Elevation","_Icon","_templateObject","_EMOTION_STRINGIFIED_CSS_ERROR__","SimpleFormContainer","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","header","css","borderBottom","color","title","display","alignItems","actions","justifyContent","icon","marginRight","footer","_taggedTemplateLiteral2","SimpleForm","exports","props","createElement","className","classNames","noElevation","children","Elevation","z","SimpleFormHeader","Grid","Cell","span","Fragment","Icon","Typography","use","SimpleFormFooter","SimpleFormContent"],"sources":["SimpleForm.tsx"],"sourcesContent":["import * as React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { Elevation } from \"@webiny/ui/Elevation\";\nimport { Icon } from \"@webiny/ui/Icon\";\n\nconst SimpleFormContainer = styled(\"div\")({\n    position: \"relative\",\n    margin: \"17px 50px\"\n});\n\nconst header = css({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst title = css({\n    display: \"flex\",\n    alignItems: \"center\"\n});\n\nconst actions = css({\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    alignItems: \"center\"\n});\n\nconst icon = css({\n    marginRight: 15,\n    color: \"var(--mdc-theme-text-primary-on-background)\"\n});\n\nconst footer = css`\n    display: flex;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    border-top: 1px solid var(--mdc-theme-on-background);\n    padding: 24px;\n    box-sizing: border-box;\n    min-height: 52px;\n    button:last-of-type {\n        margin-left: 8px;\n    }\n`;\n\ninterface SimpleFormProps {\n    children: React.ReactNode;\n    \"data-testid\"?: string;\n    noElevation?: boolean;\n    className?: string;\n}\nexport const SimpleForm = (props: SimpleFormProps) => {\n    return (\n        <SimpleFormContainer\n            className={classNames(\"webiny-data-list\", props.className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            {props.noElevation ? props.children : <Elevation z={1}>{props.children}</Elevation>}\n        </SimpleFormContainer>\n    );\n};\n\ninterface SimpleFormHeaderProps {\n    title: React.ReactNode;\n    icon?: React.ReactElement<any>;\n    children?: React.ReactNode;\n    [\"data-testid\"]?: string;\n}\nexport const SimpleFormHeader = (props: SimpleFormHeaderProps) => {\n    return (\n        <Grid className={header} data-testid={props[\"data-testid\"]}>\n            <Cell span={props.children ? 6 : 12} className={title}>\n                <React.Fragment>\n                    {props.icon && <Icon className={icon} icon={props.icon} />}\n                    <Typography use=\"headline5\">{props.title}</Typography>\n                </React.Fragment>\n            </Cell>\n            {props.children && (\n                <Cell span={6} className={actions}>\n                    {props.children}\n                </Cell>\n            )}\n        </Grid>\n    );\n};\n\nexport interface SimpleFormFooterProps {\n    children: React.ReactNode;\n    className?: string;\n}\nexport const SimpleFormFooter = (props: SimpleFormFooterProps) => {\n    return <div className={classNames(footer, props.className)}>{props.children}</div>;\n};\n\ninterface SimpleFormContentProps {\n    children: React.ReactNode;\n}\n\nexport const SimpleFormContent = (props: SimpleFormContentProps) => {\n    return props.children as unknown as React.ReactElement;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","Grid","Heading","Icon","simpleFormInnerVariants","variants","size","md","lg","full","defaultVariants","SimpleForm","children","className","props","createElement","Object","assign","simpleFormHeaderVariants","rounded","true","SimpleFormHeader","icon","title","Column","span","Fragment","label","level","SimpleFormFooter","SimpleFormContent"],"sources":["SimpleForm.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, Grid, Heading, Icon, type VariantProps } from \"@webiny/admin-ui\";\n\nconst simpleFormInnerVariants = cva(\"mx-auto\", {\n    variants: {\n        size: {\n            md: \"max-w-[640px]\",\n            lg: \"max-w-[800px]\",\n            full: \"max-w-full\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\"\n    }\n});\n\ninterface SimpleFormProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof simpleFormInnerVariants> {\n    children: React.ReactNode;\n    noElevation?: boolean;\n    className?: string;\n}\n\nexport const SimpleForm = ({ children, className, size, ...props }: SimpleFormProps) => {\n    return (\n        <div {...props} className={cn([\"webiny-data-list\", \"mx-auto p-lg\", \"relative\"], className)}>\n            <div className={cn(simpleFormInnerVariants({ size }))}>{children}</div>\n        </div>\n    );\n};\n\nconst simpleFormHeaderVariants = cva(\"p-md pl-lg border-sm border-neutral-dimmed-darker\", {\n    variants: {\n        rounded: {\n            true: \"rounded-t-3xl\"\n        }\n    },\n    defaultVariants: {\n        rounded: true\n    }\n});\n\ninterface SimpleFormHeaderProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\">,\n        VariantProps<typeof simpleFormHeaderVariants> {\n    title: React.ReactNode;\n    icon?: React.ReactElement<any>;\n    children?: React.ReactNode;\n    [\"data-testid\"]?: string;\n}\n\nexport const SimpleFormHeader = ({\n    children,\n    icon,\n    title,\n    className,\n    rounded,\n    ...props\n}: SimpleFormHeaderProps) => {\n    return (\n        <div\n            className={cn(simpleFormHeaderVariants({ rounded }), className)}\n            data-testid={props[\"data-testid\"]}\n        >\n            <Grid>\n                <Grid.Column span={children ? 6 : 12}>\n                    <>\n                        {icon && <Icon label={title as string} icon={icon} />}\n                        <Heading level={4} className={\"truncate\"}>\n                            {title}\n                        </Heading>\n                    </>\n                </Grid.Column>\n                <>{children ? <Grid.Column span={6}>{children}</Grid.Column> : null}</>\n            </Grid>\n        </div>\n    );\n};\n\nexport interface SimpleFormFooterProps {\n    children: React.ReactNode;\n    className?: string;\n}\n\nexport const SimpleFormFooter = ({ children, className }: SimpleFormFooterProps) => {\n    return (\n        <div\n            className={cn(\n                \"p-lg pt-none border-sm border-t-none border-neutral-dimmed-darker rounded-b-3xl\",\n                \"flex justify-end gap-sm\",\n                className\n            )}\n        >\n            {children}\n        </div>\n    );\n};\n\ninterface SimpleFormContentProps {\n    children: React.ReactNode;\n    className?: string;\n}\n\nexport const SimpleFormContent = ({ children, className }: SimpleFormContentProps) => {\n    return (\n        <div className={cn(\"p-lg border-sm border-y-none border-neutral-dimmed-darker\", className)}>\n            {children}\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/SimpleForm/index.d.ts

@@ -1 +1 @@
-export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from "./SimpleForm";
+export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from "./SimpleForm.js";

package/components/SimpleForm/index.js

@@ -1,32 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "SimpleForm", {
-  enumerable: true,
-  get: function get() {
-    return _SimpleForm.SimpleForm;
-  }
-});
-Object.defineProperty(exports, "SimpleFormContent", {
-  enumerable: true,
-  get: function get() {
-    return _SimpleForm.SimpleFormContent;
-  }
-});
-Object.defineProperty(exports, "SimpleFormFooter", {
-  enumerable: true,
-  get: function get() {
-    return _SimpleForm.SimpleFormFooter;
-  }
-});
-Object.defineProperty(exports, "SimpleFormHeader", {
-  enumerable: true,
-  get: function get() {
-    return _SimpleForm.SimpleFormHeader;
-  }
-});
-var _SimpleForm = require("./SimpleForm");
+export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from "./SimpleForm.js";
 
 //# sourceMappingURL=index.js.map

package/components/SimpleForm/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_SimpleForm","require"],"sources":["index.ts"],"sourcesContent":["export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from \"./SimpleForm\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA","ignoreList":[]}
+{"version":3,"names":["SimpleForm","SimpleFormHeader","SimpleFormFooter","SimpleFormContent"],"sources":["index.ts"],"sourcesContent":["export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from \"./SimpleForm.js\";\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,iBAAiB","ignoreList":[]}

package/components/SimpleUI/InputField.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare type OnKeyDownProps = React.SyntheticEvent<HTMLInputElement, Event> & React.KeyboardEvent<HTMLInputElement>;
+export type OnKeyDownProps = React.SyntheticEvent<HTMLInputElement, Event> & React.KeyboardEvent<HTMLInputElement>;
 interface InputBoxProps {
     value?: string | number;
     onChange?: (value: any) => void;

package/components/SimpleUI/InputField.js

@@ -1,19 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _emotion = require("emotion");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
-var _Typography = require("@webiny/ui/Typography");
-var _FormElementMessage = require("@webiny/ui/FormElementMessage");
-var _excluded = ["className", "value", "onChange", "onKeyDown", "label", "description", "validation", "defaultValue"];
-var inputStyle = (0, _emotion.css)({
+import React from "react";
+import { css } from "emotion";
+import classNames from "classnames";
+import omit from "lodash/omit.js";
+import { Typography } from "@webiny/ui/Typography/index.js";
+import { FormElementMessage } from "@webiny/ui/FormElementMessage/index.js";
+const inputStyle = css({
   boxSizing: "border-box",
   border: "1px solid var(--mdc-theme-on-background)",
   width: "100%",
@@ -46,58 +37,59 @@ var inputStyle = (0, _emotion.css)({
     margin: 0
   }
 });
-var labelStyle = (0, _emotion.css)({
+const labelStyle = css({
   marginBottom: 8,
   padding: "0px 8px",
   "& span": {
     color: "var(--mdc-theme-text-primary-on-background)"
   }
 });
-var getValue = function getValue(params) {
-  var value = params.value,
-    defaultValue = params.defaultValue,
-    type = params.type;
+const getValue = params => {
+  const {
+    value,
+    defaultValue,
+    type
+  } = params;
   if (type === "number") {
     return isNaN(value) ? defaultValue : value;
   }
   return value || defaultValue;
 };
-var InputField = function InputField(_ref) {
-  var className = _ref.className,
-    value = _ref.value,
-    _onChange = _ref.onChange,
-    onKeyDown = _ref.onKeyDown,
-    label = _ref.label,
-    description = _ref.description,
-    _ref$validation = _ref.validation,
-    validation = _ref$validation === void 0 ? {
-      isValid: true
-    } : _ref$validation,
-    _ref$defaultValue = _ref.defaultValue,
-    defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && /*#__PURE__*/_react.default.createElement("div", {
+const InputField = ({
+  className,
+  value,
+  onChange,
+  onKeyDown,
+  label,
+  description,
+  validation = {
+    isValid: true
+  },
+  defaultValue = "",
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
     className: labelStyle
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+  }, /*#__PURE__*/React.createElement(Typography, {
     use: "body2"
-  }, label)), /*#__PURE__*/_react.default.createElement("input", Object.assign({
-    className: (0, _classnames.default)(inputStyle, className),
+  }, label)), /*#__PURE__*/React.createElement("input", Object.assign({
+    className: classNames(inputStyle, className),
     value: getValue({
-      value: value,
+      value,
       type: props.type || "string",
-      defaultValue: defaultValue
+      defaultValue
     }),
     onKeyDown: onKeyDown,
-    onChange: function onChange(ev) {
-      if (!_onChange) {
+    onChange: ev => {
+      if (!onChange) {
         return;
       }
-      _onChange((ev.target.value || "").toLowerCase());
+      onChange((ev.target.value || "").toLowerCase());
     }
-  }, (0, _omit.default)(props, "validate"))), validation.isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+  }, omit(props, "validate"))), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
     error: true
-  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
 };
-var _default = exports.default = /*#__PURE__*/_react.default.memo(InputField);
+export default /*#__PURE__*/React.memo(InputField);
 
 //# sourceMappingURL=InputField.js.map

package/components/SimpleUI/InputField.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_emotion","_classnames","_omit","_Typography","_FormElementMessage","_excluded","inputStyle","css","boxSizing","border","width","height","padding","textAlign","minHeight","backgroundColor","transition","opacity","cursor","WebkitAppearance","margin","labelStyle","marginBottom","color","getValue","params","value","defaultValue","type","isNaN","InputField","_ref","className","onChange","onKeyDown","label","description","_ref$validation","validation","isValid","_ref$defaultValue","props","_objectWithoutProperties2","default","createElement","Fragment","Typography","use","Object","assign","classNames","ev","target","toLowerCase","omit","FormElementMessage","error","message","_default","exports","React","memo"],"sources":["InputField.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport omit from \"lodash/omit\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\n\nconst inputStyle = css({\n    boxSizing: \"border-box\",\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: \"4px 8px\",\n    textAlign: \"left\",\n    minHeight: 32,\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    transition: \"150ms all ease-in-out\",\n    \"&:focus:not(:disabled)\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&:hover:not(:disabled)\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&:disabled\": {\n        opacity: 0.5,\n        cursor: \"not-allowed\"\n    },\n\n    \"&.text-center\": {\n        textAlign: \"center\",\n        padding: 4\n    },\n\n    \"&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0\n    },\n    \"&::-webkit-outer-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0\n    }\n});\n\nconst labelStyle = css({\n    marginBottom: 8,\n    padding: \"0px 8px\",\n    \"& span\": {\n        color: \"var(--mdc-theme-text-primary-on-background)\"\n    }\n});\n\ninterface GetValueParams {\n    value: string | number | undefined;\n    defaultValue: string | number;\n    type: \"number\" | \"string\";\n}\nconst getValue = (params: GetValueParams): string => {\n    const { value, defaultValue, type } = params;\n    if (type === \"number\") {\n        return (isNaN(value as number) ? defaultValue : value) as string;\n    }\n    return (value || defaultValue) as string;\n};\n\nexport type OnKeyDownProps = React.SyntheticEvent<HTMLInputElement, Event> &\n    React.KeyboardEvent<HTMLInputElement>;\n\ninterface InputBoxProps {\n    value?: string | number;\n    onChange?: (value: any) => void;\n    onKeyDown?: (e: OnKeyDownProps) => any;\n    defaultValue?: string | number;\n    type?: \"string\" | \"number\";\n    [key: string]: any;\n}\nconst InputField = ({\n    className,\n    value,\n    onChange,\n    onKeyDown,\n    label,\n    description,\n    validation = { isValid: true },\n    defaultValue = \"\",\n    ...props\n}: InputBoxProps) => {\n    return (\n        <React.Fragment>\n            {label && (\n                <div className={labelStyle}>\n                    <Typography use={\"body2\"}>{label}</Typography>\n                </div>\n            )}\n            <input\n                className={classNames(inputStyle, className)}\n                value={getValue({\n                    value,\n                    type: props.type || \"string\",\n                    defaultValue\n                })}\n                onKeyDown={onKeyDown}\n                onChange={ev => {\n                    if (!onChange) {\n                        return;\n                    }\n                    onChange((ev.target.value || \"\").toLowerCase());\n                }}\n                {...omit(props, \"validate\")}\n            />\n            {validation.isValid === false && (\n                <FormElementMessage error>{validation.message}</FormElementMessage>\n            )}\n            {validation.isValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default React.memo(InputField);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","css","classNames","omit","Typography","FormElementMessage","inputStyle","boxSizing","border","width","height","padding","textAlign","minHeight","backgroundColor","transition","opacity","cursor","WebkitAppearance","margin","labelStyle","marginBottom","color","getValue","params","value","defaultValue","type","isNaN","InputField","className","onChange","onKeyDown","label","description","validation","isValid","props","createElement","Fragment","use","Object","assign","ev","target","toLowerCase","error","message","memo"],"sources":["InputField.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport omit from \"lodash/omit.js\";\nimport { Typography } from \"@webiny/ui/Typography/index.js\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage/index.js\";\n\nconst inputStyle = css({\n    boxSizing: \"border-box\",\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: \"4px 8px\",\n    textAlign: \"left\",\n    minHeight: 32,\n    backgroundColor: \"var(--mdc-theme-surface)\",\n    transition: \"150ms all ease-in-out\",\n    \"&:focus:not(:disabled)\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&:hover:not(:disabled)\": {\n        backgroundColor: \"var(--mdc-theme-on-background)\"\n    },\n    \"&:disabled\": {\n        opacity: 0.5,\n        cursor: \"not-allowed\"\n    },\n\n    \"&.text-center\": {\n        textAlign: \"center\",\n        padding: 4\n    },\n\n    \"&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0\n    },\n    \"&::-webkit-outer-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0\n    }\n});\n\nconst labelStyle = css({\n    marginBottom: 8,\n    padding: \"0px 8px\",\n    \"& span\": {\n        color: \"var(--mdc-theme-text-primary-on-background)\"\n    }\n});\n\ninterface GetValueParams {\n    value: string | number | undefined;\n    defaultValue: string | number;\n    type: \"number\" | \"string\";\n}\nconst getValue = (params: GetValueParams): string => {\n    const { value, defaultValue, type } = params;\n    if (type === \"number\") {\n        return (isNaN(value as number) ? defaultValue : value) as string;\n    }\n    return (value || defaultValue) as string;\n};\n\nexport type OnKeyDownProps = React.SyntheticEvent<HTMLInputElement, Event> &\n    React.KeyboardEvent<HTMLInputElement>;\n\ninterface InputBoxProps {\n    value?: string | number;\n    onChange?: (value: any) => void;\n    onKeyDown?: (e: OnKeyDownProps) => any;\n    defaultValue?: string | number;\n    type?: \"string\" | \"number\";\n    [key: string]: any;\n}\nconst InputField = ({\n    className,\n    value,\n    onChange,\n    onKeyDown,\n    label,\n    description,\n    validation = { isValid: true },\n    defaultValue = \"\",\n    ...props\n}: InputBoxProps) => {\n    return (\n        <React.Fragment>\n            {label && (\n                <div className={labelStyle}>\n                    <Typography use={\"body2\"}>{label}</Typography>\n                </div>\n            )}\n            <input\n                className={classNames(inputStyle, className)}\n                value={getValue({\n                    value,\n                    type: props.type || \"string\",\n                    defaultValue\n                })}\n                onKeyDown={onKeyDown}\n                onChange={ev => {\n                    if (!onChange) {\n                        return;\n                    }\n                    onChange((ev.target.value || \"\").toLowerCase());\n                }}\n                {...omit(props, \"validate\")}\n            />\n            {validation.isValid === false && (\n                <FormElementMessage error>{validation.message}</FormElementMessage>\n            )}\n            {validation.isValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default React.memo(InputField);\n"],"mappings":"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","ignoreList":[]}

package/components/SingleImageUpload.d.ts

@@ -1,6 +1,7 @@
-import * as React from "react";
-import { FileManagerFileItem } from "../index";
-import { FormComponentProps } from "@webiny/ui/types";
+import React from "react";
+import type { FileManagerFileItem } from "../index.js";
+import type { FormComponentProps } from "@webiny/ui/types.js";
+import { type FilePickerProps } from "@webiny/admin-ui";
 export interface SingleImageUploadProps extends FormComponentProps {
     /**
      * Accept types
@@ -32,7 +33,7 @@ export interface SingleImageUploadProps extends FormComponentProps {
      * It is marked as `optional` because this component is often used in conjunction with <Bind>, which injects the
      * `onChange` into its child element. In that case, that prop is not passed by the developer.
      */
-    onChange?: (value: FileManagerFileItem | null) => void;
+    onChange?: (value: Pick<FileManagerFileItem, "id" | "src"> | null) => void;
     /**
      * Optional custom props, passed to the preview image.
      */
@@ -43,13 +44,25 @@ export interface SingleImageUploadProps extends FormComponentProps {
     includeFileMeta?: boolean;
     /**
      * Is the wrapper round?
+     * @deprecated Provide a custom `renderImagePreview` instead.
      */
     round?: boolean;
     /**
-     * Define the properties that are returned on file(s) selection.
-     * @deprecated Pick the desired file attributes in the `onChange` callback, or `beforeChange` on the `<Bind>` element.
+     * Render the image preview.
      */
-    onChangePick?: string[];
+    renderFilePreview?: FilePickerProps["renderFilePreview"];
+    /**
+     * Render the trigger button.
+     */
+    renderTrigger?: FilePickerProps["renderTrigger"];
+    /**
+     * Component type.
+     */
+    type?: FilePickerProps["type"];
+    /**
+     * Component variant.
+     */
+    variant?: FilePickerProps["variant"];
 }
 declare const SingleImageUpload: (props: SingleImageUploadProps) => React.JSX.Element;
 export default SingleImageUpload;