@webiny/app-admin 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/components/SimpleForm/SimpleForm.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
 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;
+    size?: "full" | "md" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SimpleFormProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof simpleFormInnerVariants> {
     children: React.ReactNode;
     noElevation?: boolean;
@@ -11,7 +11,7 @@ interface SimpleFormProps extends React.HTMLAttributes<HTMLDivElement>, VariantP
 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;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SimpleFormHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof simpleFormHeaderVariants> {
     title: React.ReactNode;
     icon?: React.ReactElement<any>;

package/components/SimpleForm/SimpleForm.js

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { cn, cva, Grid, Heading, Icon } from "@webiny/admin-ui";
-const simpleFormInnerVariants = cva("wby-mx-auto", {
+const simpleFormInnerVariants = cva("mx-auto", {
   variants: {
     size: {
-      md: "wby-max-w-[640px]",
-      lg: "wby-max-w-[800px]",
-      full: "wby-max-w-full"
+      md: "max-w-[640px]",
+      lg: "max-w-[800px]",
+      xl: "max-w-[1200px]",
+      full: "max-w-full"
     }
   },
   defaultVariants: {
@@ -19,17 +20,17 @@ export const SimpleForm = ({
   ...props
 }) => {
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: cn(["webiny-data-list", "wby-mx-auto wby-p-lg", "wby-relative"], className)
+    className: cn(["webiny-data-list", "mx-auto p-lg", "relative"], className)
   }), /*#__PURE__*/React.createElement("div", {
     className: cn(simpleFormInnerVariants({
       size
     }))
   }, children));
 };
-const simpleFormHeaderVariants = cva("wby-p-md wby-pl-lg wby-border-sm wby-border-neutral-dimmed-darker", {
+const simpleFormHeaderVariants = cva("p-md pl-lg border-sm border-neutral-dimmed-darker", {
   variants: {
     rounded: {
-      true: "wby-rounded-t-3xl"
+      true: "rounded-t-3xl"
     }
   },
   defaultVariants: {
@@ -56,7 +57,7 @@ export const SimpleFormHeader = ({
     icon: icon
   }), /*#__PURE__*/React.createElement(Heading, {
     level: 4,
-    className: "wby-truncate"
+    className: "truncate"
   }, title))), /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement(Grid.Column, {
     span: 6
   }, children) : null)));
@@ -66,7 +67,7 @@ export const SimpleFormFooter = ({
   className
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: cn("wby-p-lg wby-pt-none wby-border-sm wby-border-t-none wby-border-neutral-dimmed-darker wby-rounded-b-3xl", "wby-flex wby-justify-end wby-gap-sm", className)
+    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);
 };
 export const SimpleFormContent = ({
@@ -74,7 +75,7 @@ export const SimpleFormContent = ({
   className
 }) => {
   return /*#__PURE__*/React.createElement("div", {
-    className: cn("wby-p-lg wby-border-sm wby-border-y-none wby-border-neutral-dimmed-darker", className)
+    className: cn("p-lg border-sm border-y-none border-neutral-dimmed-darker", className)
   }, children);
 };
 

package/components/SimpleForm/SimpleForm.js.map

@@ -1 +1 @@
-{"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(\"wby-mx-auto\", {\n    variants: {\n        size: {\n            md: \"wby-max-w-[640px]\",\n            lg: \"wby-max-w-[800px]\",\n            full: \"wby-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\n            {...props}\n            className={cn([\"webiny-data-list\", \"wby-mx-auto wby-p-lg\", \"wby-relative\"], className)}\n        >\n            <div className={cn(simpleFormInnerVariants({ size }))}>{children}</div>\n        </div>\n    );\n};\n\nconst simpleFormHeaderVariants = cva(\n    \"wby-p-md wby-pl-lg wby-border-sm wby-border-neutral-dimmed-darker\",\n    {\n        variants: {\n            rounded: {\n                true: \"wby-rounded-t-3xl\"\n            }\n        },\n        defaultVariants: {\n            rounded: true\n        }\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={\"wby-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                \"wby-p-lg wby-pt-none wby-border-sm wby-border-t-none wby-border-neutral-dimmed-darker wby-rounded-b-3xl\",\n                \"wby-flex wby-justify-end wby-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\n            className={cn(\n                \"wby-p-lg wby-border-sm wby-border-y-none wby-border-neutral-dimmed-darker\",\n                className\n            )}\n        >\n            {children}\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","Grid","Heading","Icon","simpleFormInnerVariants","variants","size","md","lg","xl","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            xl: \"max-w-[1200px]\",\n            full: \"max-w-full\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\"\n    }\n});\n\ninterface SimpleFormProps\n    extends React.HTMLAttributes<HTMLDivElement>, 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\n        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,3 +1,3 @@
-export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from "./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","SimpleFormHeader","SimpleFormFooter","SimpleFormContent"],"sources":["index.ts"],"sourcesContent":["export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from \"./SimpleForm\";\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,iBAAiB","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.js

@@ -1,48 +1,24 @@
+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)."; }
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 import classNames from "classnames";
-import omit from "lodash/omit";
-import { Typography } from "@webiny/ui/Typography";
-import { FormElementMessage } from "@webiny/ui/FormElementMessage";
-const inputStyle = css({
-  boxSizing: "border-box",
-  border: "1px solid var(--mdc-theme-on-background)",
-  width: "100%",
-  height: "100%",
-  padding: "4px 8px",
-  textAlign: "left",
-  minHeight: 32,
-  backgroundColor: "var(--mdc-theme-surface)",
-  transition: "150ms all ease-in-out",
-  "&:focus:not(:disabled)": {
-    backgroundColor: "var(--mdc-theme-on-background)"
-  },
-  "&:hover:not(:disabled)": {
-    backgroundColor: "var(--mdc-theme-on-background)"
-  },
-  "&:disabled": {
-    opacity: 0.5,
-    cursor: "not-allowed"
-  },
-  "&.text-center": {
-    textAlign: "center",
-    padding: 4
-  },
-  "&::-webkit-inner-spin-button": {
-    WebkitAppearance: "none",
-    margin: 0
-  },
-  "&::-webkit-outer-spin-button": {
-    WebkitAppearance: "none",
-    margin: 0
-  }
+import omit from "lodash/omit.js";
+import { Text, FormComponentErrorMessage, FormComponentNote } from "@webiny/admin-ui";
+const inputStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+  name: "182fb6",
+  styles: "box-sizing:border-box;border:1px solid var(--mdc-theme-on-background);width:100%;height:100%;padding:4px 8px;text-align:left;min-height:32px;background-color:var(--mdc-theme-surface);transition:150ms all ease-in-out;&:focus:not(:disabled){background-color:var(--mdc-theme-on-background);}&:hover:not(:disabled){background-color:var(--mdc-theme-on-background);}&:disabled{opacity:0.5;cursor:not-allowed;}&.text-center{text-align:center;padding:4px;}&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}"
+} : {
+  name: "k732d4-inputStyle",
+  styles: "box-sizing:border-box;border:1px solid var(--mdc-theme-on-background);width:100%;height:100%;padding:4px 8px;text-align:left;min-height:32px;background-color:var(--mdc-theme-surface);transition:150ms all ease-in-out;&:focus:not(:disabled){background-color:var(--mdc-theme-on-background);}&:hover:not(:disabled){background-color:var(--mdc-theme-on-background);}&:disabled{opacity:0.5;cursor:not-allowed;}&.text-center{text-align:center;padding:4px;}&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;};label:inputStyle;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklucHV0RmllbGQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1tQiIsImZpbGUiOiJJbnB1dEZpZWxkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcbmltcG9ydCBjbGFzc05hbWVzIGZyb20gXCJjbGFzc25hbWVzXCI7XG5pbXBvcnQgb21pdCBmcm9tIFwibG9kYXNoL29taXQuanNcIjtcbmltcG9ydCB7IFRleHQsIEZvcm1Db21wb25lbnRFcnJvck1lc3NhZ2UsIEZvcm1Db21wb25lbnROb3RlIH0gZnJvbSBcIkB3ZWJpbnkvYWRtaW4tdWlcIjtcblxuY29uc3QgaW5wdXRTdHlsZSA9IGNzcyh7XG4gICAgYm94U2l6aW5nOiBcImJvcmRlci1ib3hcIixcbiAgICBib3JkZXI6IFwiMXB4IHNvbGlkIHZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKVwiLFxuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBoZWlnaHQ6IFwiMTAwJVwiLFxuICAgIHBhZGRpbmc6IFwiNHB4IDhweFwiLFxuICAgIHRleHRBbGlnbjogXCJsZWZ0XCIsXG4gICAgbWluSGVpZ2h0OiAzMixcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLXN1cmZhY2UpXCIsXG4gICAgdHJhbnNpdGlvbjogXCIxNTBtcyBhbGwgZWFzZS1pbi1vdXRcIixcbiAgICBcIiY6Zm9jdXM6bm90KDpkaXNhYmxlZClcIjoge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLW9uLWJhY2tncm91bmQpXCJcbiAgICB9LFxuICAgIFwiJjpob3Zlcjpub3QoOmRpc2FibGVkKVwiOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZClcIlxuICAgIH0sXG4gICAgXCImOmRpc2FibGVkXCI6IHtcbiAgICAgICAgb3BhY2l0eTogMC41LFxuICAgICAgICBjdXJzb3I6IFwibm90LWFsbG93ZWRcIlxuICAgIH0sXG5cbiAgICBcIiYudGV4dC1jZW50ZXJcIjoge1xuICAgICAgICB0ZXh0QWxpZ246IFwiY2VudGVyXCIsXG4gICAgICAgIHBhZGRpbmc6IDRcbiAgICB9LFxuXG4gICAgXCImOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uXCI6IHtcbiAgICAgICAgV2Via2l0QXBwZWFyYW5jZTogXCJub25lXCIsXG4gICAgICAgIG1hcmdpbjogMFxuICAgIH0sXG4gICAgXCImOjotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uXCI6IHtcbiAgICAgICAgV2Via2l0QXBwZWFyYW5jZTogXCJub25lXCIsXG4gICAgICAgIG1hcmdpbjogMFxuICAgIH1cbn0pO1xuXG5jb25zdCBsYWJlbFN0eWxlID0gY3NzKHtcbiAgICBtYXJnaW5Cb3R0b206IDgsXG4gICAgcGFkZGluZzogXCIwcHggOHB4XCIsXG4gICAgXCImIHNwYW5cIjoge1xuICAgICAgICBjb2xvcjogXCJ2YXIoLS1tZGMtdGhlbWUtdGV4dC1wcmltYXJ5LW9uLWJhY2tncm91bmQpXCJcbiAgICB9XG59KTtcblxuaW50ZXJmYWNlIEdldFZhbHVlUGFyYW1zIHtcbiAgICB2YWx1ZTogc3RyaW5nIHwgbnVtYmVyIHwgdW5kZWZpbmVkO1xuICAgIGRlZmF1bHRWYWx1ZTogc3RyaW5nIHwgbnVtYmVyO1xuICAgIHR5cGU6IFwibnVtYmVyXCIgfCBcInN0cmluZ1wiO1xufVxuY29uc3QgZ2V0VmFsdWUgPSAocGFyYW1zOiBHZXRWYWx1ZVBhcmFtcyk6IHN0cmluZyA9PiB7XG4gICAgY29uc3QgeyB2YWx1ZSwgZGVmYXVsdFZhbHVlLCB0eXBlIH0gPSBwYXJhbXM7XG4gICAgaWYgKHR5cGUgPT09IFwibnVtYmVyXCIpIHtcbiAgICAgICAgcmV0dXJuIChpc05hTih2YWx1ZSBhcyBudW1iZXIpID8gZGVmYXVsdFZhbHVlIDogdmFsdWUpIGFzIHN0cmluZztcbiAgICB9XG4gICAgcmV0dXJuICh2YWx1ZSB8fCBkZWZhdWx0VmFsdWUpIGFzIHN0cmluZztcbn07XG5cbmV4cG9ydCB0eXBlIE9uS2V5RG93blByb3BzID0gUmVhY3QuU3ludGhldGljRXZlbnQ8SFRNTElucHV0RWxlbWVudCwgRXZlbnQ+ICZcbiAgICBSZWFjdC5LZXlib2FyZEV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+O1xuXG5pbnRlcmZhY2UgSW5wdXRCb3hQcm9wcyB7XG4gICAgdmFsdWU/OiBzdHJpbmcgfCBudW1iZXI7XG4gICAgb25DaGFuZ2U/OiAodmFsdWU6IGFueSkgPT4gdm9pZDtcbiAgICBvbktleURvd24/OiAoZTogT25LZXlEb3duUHJvcHMpID0+IGFueTtcbiAgICBkZWZhdWx0VmFsdWU/OiBzdHJpbmcgfCBudW1iZXI7XG4gICAgdHlwZT86IFwic3RyaW5nXCIgfCBcIm51bWJlclwiO1xuICAgIFtrZXk6IHN0cmluZ106IGFueTtcbn1cbmNvbnN0IElucHV0RmllbGQgPSAoe1xuICAgIGNsYXNzTmFtZSxcbiAgICB2YWx1ZSxcbiAgICBvbkNoYW5nZSxcbiAgICBvbktleURvd24sXG4gICAgbGFiZWwsXG4gICAgZGVzY3JpcHRpb24sXG4gICAgdmFsaWRhdGlvbiA9IHsgaXNWYWxpZDogdHJ1ZSB9LFxuICAgIGRlZmF1bHRWYWx1ZSA9IFwiXCIsXG4gICAgLi4ucHJvcHNcbn06IElucHV0Qm94UHJvcHMpID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgICA8UmVhY3QuRnJhZ21lbnQ+XG4gICAgICAgICAgICB7bGFiZWwgJiYgKFxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtsYWJlbFN0eWxlfT5cbiAgICAgICAgICAgICAgICAgICAgPFRleHQgc2l6ZT17XCJzbVwifT57bGFiZWx9PC9UZXh0PlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lcyhpbnB1dFN0eWxlLCBjbGFzc05hbWUpfVxuICAgICAgICAgICAgICAgIHZhbHVlPXtnZXRWYWx1ZSh7XG4gICAgICAgICAgICAgICAgICAgIHZhbHVlLFxuICAgICAgICAgICAgICAgICAgICB0eXBlOiBwcm9wcy50eXBlIHx8IFwic3RyaW5nXCIsXG4gICAgICAgICAgICAgICAgICAgIGRlZmF1bHRWYWx1ZVxuICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICAgIG9uS2V5RG93bj17b25LZXlEb3dufVxuICAgICAgICAgICAgICAgIG9uQ2hhbmdlPXtldiA9PiB7XG4gICAgICAgICAgICAgICAgICAgIGlmICghb25DaGFuZ2UpIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICBvbkNoYW5nZSgoZXYudGFyZ2V0LnZhbHVlIHx8IFwiXCIpLnRvTG93ZXJDYXNlKCkpO1xuICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgey4uLm9taXQocHJvcHMsIFwidmFsaWRhdGVcIil9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgICAge3ZhbGlkYXRpb24uaXNWYWxpZCA9PT0gZmFsc2UgJiYgKFxuICAgICAgICAgICAgICAgIDxGb3JtQ29tcG9uZW50RXJyb3JNZXNzYWdlIHRleHQ9e3ZhbGlkYXRpb24ubWVzc2FnZX0gaW52YWxpZD17dHJ1ZX0gLz5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICB7dmFsaWRhdGlvbi5pc1ZhbGlkICE9PSBmYWxzZSAmJiBkZXNjcmlwdGlvbiAmJiAoXG4gICAgICAgICAgICAgICAgPEZvcm1Db21wb25lbnROb3RlIHRleHQ9e2Rlc2NyaXB0aW9ufSAvPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgPC9SZWFjdC5GcmFnbWVudD5cbiAgICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgUmVhY3QubWVtbyhJbnB1dEZpZWxkKTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const labelStyle = css({
-  marginBottom: 8,
-  padding: "0px 8px",
-  "& span": {
-    color: "var(--mdc-theme-text-primary-on-background)"
-  }
+const labelStyle = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+  name: "9dnmsz",
+  styles: "margin-bottom:8px;padding:0px 8px;& span{color:var(--mdc-theme-text-primary-on-background);}"
+} : {
+  name: "1yl4ooa-labelStyle",
+  styles: "margin-bottom:8px;padding:0px 8px;& span{color:var(--mdc-theme-text-primary-on-background);};label:labelStyle;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklucHV0RmllbGQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDbUIiLCJmaWxlIjoiSW5wdXRGaWVsZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vY3NzXCI7XG5pbXBvcnQgY2xhc3NOYW1lcyBmcm9tIFwiY2xhc3NuYW1lc1wiO1xuaW1wb3J0IG9taXQgZnJvbSBcImxvZGFzaC9vbWl0LmpzXCI7XG5pbXBvcnQgeyBUZXh0LCBGb3JtQ29tcG9uZW50RXJyb3JNZXNzYWdlLCBGb3JtQ29tcG9uZW50Tm90ZSB9IGZyb20gXCJAd2ViaW55L2FkbWluLXVpXCI7XG5cbmNvbnN0IGlucHV0U3R5bGUgPSBjc3Moe1xuICAgIGJveFNpemluZzogXCJib3JkZXItYm94XCIsXG4gICAgYm9yZGVyOiBcIjFweCBzb2xpZCB2YXIoLS1tZGMtdGhlbWUtb24tYmFja2dyb3VuZClcIixcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgICBwYWRkaW5nOiBcIjRweCA4cHhcIixcbiAgICB0ZXh0QWxpZ246IFwibGVmdFwiLFxuICAgIG1pbkhlaWdodDogMzIsXG4gICAgYmFja2dyb3VuZENvbG9yOiBcInZhcigtLW1kYy10aGVtZS1zdXJmYWNlKVwiLFxuICAgIHRyYW5zaXRpb246IFwiMTUwbXMgYWxsIGVhc2UtaW4tb3V0XCIsXG4gICAgXCImOmZvY3VzOm5vdCg6ZGlzYWJsZWQpXCI6IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcInZhcigtLW1kYy10aGVtZS1vbi1iYWNrZ3JvdW5kKVwiXG4gICAgfSxcbiAgICBcIiY6aG92ZXI6bm90KDpkaXNhYmxlZClcIjoge1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLW9uLWJhY2tncm91bmQpXCJcbiAgICB9LFxuICAgIFwiJjpkaXNhYmxlZFwiOiB7XG4gICAgICAgIG9wYWNpdHk6IDAuNSxcbiAgICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCJcbiAgICB9LFxuXG4gICAgXCImLnRleHQtY2VudGVyXCI6IHtcbiAgICAgICAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICAgICAgICBwYWRkaW5nOiA0XG4gICAgfSxcblxuICAgIFwiJjo6LXdlYmtpdC1pbm5lci1zcGluLWJ1dHRvblwiOiB7XG4gICAgICAgIFdlYmtpdEFwcGVhcmFuY2U6IFwibm9uZVwiLFxuICAgICAgICBtYXJnaW46IDBcbiAgICB9LFxuICAgIFwiJjo6LXdlYmtpdC1vdXRlci1zcGluLWJ1dHRvblwiOiB7XG4gICAgICAgIFdlYmtpdEFwcGVhcmFuY2U6IFwibm9uZVwiLFxuICAgICAgICBtYXJnaW46IDBcbiAgICB9XG59KTtcblxuY29uc3QgbGFiZWxTdHlsZSA9IGNzcyh7XG4gICAgbWFyZ2luQm90dG9tOiA4LFxuICAgIHBhZGRpbmc6IFwiMHB4IDhweFwiLFxuICAgIFwiJiBzcGFuXCI6IHtcbiAgICAgICAgY29sb3I6IFwidmFyKC0tbWRjLXRoZW1lLXRleHQtcHJpbWFyeS1vbi1iYWNrZ3JvdW5kKVwiXG4gICAgfVxufSk7XG5cbmludGVyZmFjZSBHZXRWYWx1ZVBhcmFtcyB7XG4gICAgdmFsdWU6IHN0cmluZyB8IG51bWJlciB8IHVuZGVmaW5lZDtcbiAgICBkZWZhdWx0VmFsdWU6IHN0cmluZyB8IG51bWJlcjtcbiAgICB0eXBlOiBcIm51bWJlclwiIHwgXCJzdHJpbmdcIjtcbn1cbmNvbnN0IGdldFZhbHVlID0gKHBhcmFtczogR2V0VmFsdWVQYXJhbXMpOiBzdHJpbmcgPT4ge1xuICAgIGNvbnN0IHsgdmFsdWUsIGRlZmF1bHRWYWx1ZSwgdHlwZSB9ID0gcGFyYW1zO1xuICAgIGlmICh0eXBlID09PSBcIm51bWJlclwiKSB7XG4gICAgICAgIHJldHVybiAoaXNOYU4odmFsdWUgYXMgbnVtYmVyKSA/IGRlZmF1bHRWYWx1ZSA6IHZhbHVlKSBhcyBzdHJpbmc7XG4gICAgfVxuICAgIHJldHVybiAodmFsdWUgfHwgZGVmYXVsdFZhbHVlKSBhcyBzdHJpbmc7XG59O1xuXG5leHBvcnQgdHlwZSBPbktleURvd25Qcm9wcyA9IFJlYWN0LlN5bnRoZXRpY0V2ZW50PEhUTUxJbnB1dEVsZW1lbnQsIEV2ZW50PiAmXG4gICAgUmVhY3QuS2V5Ym9hcmRFdmVudDxIVE1MSW5wdXRFbGVtZW50PjtcblxuaW50ZXJmYWNlIElucHV0Qm94UHJvcHMge1xuICAgIHZhbHVlPzogc3RyaW5nIHwgbnVtYmVyO1xuICAgIG9uQ2hhbmdlPzogKHZhbHVlOiBhbnkpID0+IHZvaWQ7XG4gICAgb25LZXlEb3duPzogKGU6IE9uS2V5RG93blByb3BzKSA9PiBhbnk7XG4gICAgZGVmYXVsdFZhbHVlPzogc3RyaW5nIHwgbnVtYmVyO1xuICAgIHR5cGU/OiBcInN0cmluZ1wiIHwgXCJudW1iZXJcIjtcbiAgICBba2V5OiBzdHJpbmddOiBhbnk7XG59XG5jb25zdCBJbnB1dEZpZWxkID0gKHtcbiAgICBjbGFzc05hbWUsXG4gICAgdmFsdWUsXG4gICAgb25DaGFuZ2UsXG4gICAgb25LZXlEb3duLFxuICAgIGxhYmVsLFxuICAgIGRlc2NyaXB0aW9uLFxuICAgIHZhbGlkYXRpb24gPSB7IGlzVmFsaWQ6IHRydWUgfSxcbiAgICBkZWZhdWx0VmFsdWUgPSBcIlwiLFxuICAgIC4uLnByb3BzXG59OiBJbnB1dEJveFByb3BzKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgICAgPFJlYWN0LkZyYWdtZW50PlxuICAgICAgICAgICAge2xhYmVsICYmIChcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17bGFiZWxTdHlsZX0+XG4gICAgICAgICAgICAgICAgICAgIDxUZXh0IHNpemU9e1wic21cIn0+e2xhYmVsfTwvVGV4dD5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICA8aW5wdXRcbiAgICAgICAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZXMoaW5wdXRTdHlsZSwgY2xhc3NOYW1lKX1cbiAgICAgICAgICAgICAgICB2YWx1ZT17Z2V0VmFsdWUoe1xuICAgICAgICAgICAgICAgICAgICB2YWx1ZSxcbiAgICAgICAgICAgICAgICAgICAgdHlwZTogcHJvcHMudHlwZSB8fCBcInN0cmluZ1wiLFxuICAgICAgICAgICAgICAgICAgICBkZWZhdWx0VmFsdWVcbiAgICAgICAgICAgICAgICB9KX1cbiAgICAgICAgICAgICAgICBvbktleURvd249e29uS2V5RG93bn1cbiAgICAgICAgICAgICAgICBvbkNoYW5nZT17ZXYgPT4ge1xuICAgICAgICAgICAgICAgICAgICBpZiAoIW9uQ2hhbmdlKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICByZXR1cm47XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgb25DaGFuZ2UoKGV2LnRhcmdldC52YWx1ZSB8fCBcIlwiKS50b0xvd2VyQ2FzZSgpKTtcbiAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgIHsuLi5vbWl0KHByb3BzLCBcInZhbGlkYXRlXCIpfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIHt2YWxpZGF0aW9uLmlzVmFsaWQgPT09IGZhbHNlICYmIChcbiAgICAgICAgICAgICAgICA8Rm9ybUNvbXBvbmVudEVycm9yTWVzc2FnZSB0ZXh0PXt2YWxpZGF0aW9uLm1lc3NhZ2V9IGludmFsaWQ9e3RydWV9IC8+XG4gICAgICAgICAgICApfVxuICAgICAgICAgICAge3ZhbGlkYXRpb24uaXNWYWxpZCAhPT0gZmFsc2UgJiYgZGVzY3JpcHRpb24gJiYgKFxuICAgICAgICAgICAgICAgIDxGb3JtQ29tcG9uZW50Tm90ZSB0ZXh0PXtkZXNjcmlwdGlvbn0gLz5cbiAgICAgICAgICAgICl9XG4gICAgICAgIDwvUmVhY3QuRnJhZ21lbnQ+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFJlYWN0Lm1lbW8oSW5wdXRGaWVsZCk7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const getValue = params => {
   const {
@@ -70,8 +46,8 @@ const InputField = ({
 }) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
     className: labelStyle
-  }, /*#__PURE__*/React.createElement(Typography, {
-    use: "body2"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "sm"
   }, label)), /*#__PURE__*/React.createElement("input", Object.assign({
     className: classNames(inputStyle, className),
     value: getValue({
@@ -86,9 +62,12 @@ const InputField = ({
       }
       onChange((ev.target.value || "").toLowerCase());
     }
-  }, omit(props, "validate"))), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
-    error: true
-  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+  }, omit(props, "validate"))), validation.isValid === false && /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validation.message,
+    invalid: true
+  }), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormComponentNote, {
+    text: description
+  }));
 };
 export default /*#__PURE__*/React.memo(InputField);
 

package/components/SimpleUI/InputField.js.map

@@ -1 +1 @@
-{"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\";\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","Text","FormComponentErrorMessage","FormComponentNote","inputStyle","process","env","NODE_ENV","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","labelStyle","getValue","params","value","defaultValue","type","isNaN","InputField","className","onChange","onKeyDown","label","description","validation","isValid","props","createElement","Fragment","size","Object","assign","ev","target","toLowerCase","text","message","invalid","memo"],"sources":["InputField.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"@emotion/css\";\nimport classNames from \"classnames\";\nimport omit from \"lodash/omit.js\";\nimport { Text, FormComponentErrorMessage, FormComponentNote } from \"@webiny/admin-ui\";\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                    <Text size={\"sm\"}>{label}</Text>\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                <FormComponentErrorMessage text={validation.message} invalid={true} />\n            )}\n            {validation.isValid !== false && description && (\n                <FormComponentNote text={description} />\n            )}\n        </React.Fragment>\n    );\n};\n\nexport default React.memo(InputField);\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,QAAQ,cAAc;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,IAAI,MAAM,gBAAgB;AACjC,SAASC,IAAI,EAAEC,yBAAyB,EAAEC,iBAAiB,QAAQ,kBAAkB;AAErF,MAAMC,UAAU,gBAAGN,GAAG,CAAAO,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,CAkCrB,CAAC;AAEF,MAAMC,UAAU,gBAAGd,GAAG,CAAAO,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,QAAA,EAAAC;AAAA,CAMrB,CAAC;AAOF,MAAME,QAAQ,GAAIC,MAAsB,IAAa;EACjD,MAAM;IAAEC,KAAK;IAAEC,YAAY;IAAEC;EAAK,CAAC,GAAGH,MAAM;EAC5C,IAAIG,IAAI,KAAK,QAAQ,EAAE;IACnB,OAAQC,KAAK,CAACH,KAAe,CAAC,GAAGC,YAAY,GAAGD,KAAK;EACzD;EACA,OAAQA,KAAK,IAAIC,YAAY;AACjC,CAAC;AAaD,MAAMG,UAAU,GAAGA,CAAC;EAChBC,SAAS;EACTL,KAAK;EACLM,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,WAAW;EACXC,UAAU,GAAG;IAAEC,OAAO,EAAE;EAAK,CAAC;EAC9BV,YAAY,GAAG,EAAE;EACjB,GAAGW;AACQ,CAAC,KAAK;EACjB,oBACI9B,KAAA,CAAA+B,aAAA,CAAC/B,KAAK,CAACgC,QAAQ,QACVN,KAAK,iBACF1B,KAAA,CAAA+B,aAAA;IAAKR,SAAS,EAAER;EAAW,gBACvBf,KAAA,CAAA+B,aAAA,CAAC3B,IAAI;IAAC6B,IAAI,EAAE;EAAK,GAAEP,KAAY,CAC9B,CACR,eACD1B,KAAA,CAAA+B,aAAA,UAAAG,MAAA,CAAAC,MAAA;IACIZ,SAAS,EAAErB,UAAU,CAACK,UAAU,EAAEgB,SAAS,CAAE;IAC7CL,KAAK,EAAEF,QAAQ,CAAC;MACZE,KAAK;MACLE,IAAI,EAAEU,KAAK,CAACV,IAAI,IAAI,QAAQ;MAC5BD;IACJ,CAAC,CAAE;IACHM,SAAS,EAAEA,SAAU;IACrBD,QAAQ,EAAEY,EAAE,IAAI;MACZ,IAAI,CAACZ,QAAQ,EAAE;QACX;MACJ;MACAA,QAAQ,CAAC,CAACY,EAAE,CAACC,MAAM,CAACnB,KAAK,IAAI,EAAE,EAAEoB,WAAW,CAAC,CAAC,CAAC;IACnD;EAAE,GACEnC,IAAI,CAAC2B,KAAK,EAAE,UAAU,CAAC,CAC9B,CAAC,EACDF,UAAU,CAACC,OAAO,KAAK,KAAK,iBACzB7B,KAAA,CAAA+B,aAAA,CAAC1B,yBAAyB;IAACkC,IAAI,EAAEX,UAAU,CAACY,OAAQ;IAACC,OAAO,EAAE;EAAK,CAAE,CACxE,EACAb,UAAU,CAACC,OAAO,KAAK,KAAK,IAAIF,WAAW,iBACxC3B,KAAA,CAAA+B,aAAA,CAACzB,iBAAiB;IAACiC,IAAI,EAAEZ;EAAY,CAAE,CAE/B,CAAC;AAEzB,CAAC;AAED,4BAAe3B,KAAK,CAAC0C,IAAI,CAACpB,UAAU,CAAC","ignoreList":[]}

package/components/SingleImageUpload.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import type { FileManagerFileItem } from "../index";
-import type { FormComponentProps } from "@webiny/ui/types";
+import type { FileManagerFileItem } from "../index.js";
+import type { FormComponentProps } from "@webiny/admin-ui";
 import { type FilePickerProps } from "@webiny/admin-ui";
 export interface SingleImageUploadProps extends FormComponentProps {
     /**
@@ -33,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.
      */
@@ -47,11 +47,6 @@ export interface SingleImageUploadProps extends FormComponentProps {
      * @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.
-     */
-    onChangePick?: string[];
     /**
      * Render the image preview.
      */

package/components/SingleImageUpload.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { FileManager } from "./..";
+import { FileManager } from "../index.js";
 import { FileItem, FilePicker } from "@webiny/admin-ui";
 const SingleImageUpload = props => {
   const {

package/components/SingleImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","FileManager","FileItem","FilePicker","SingleImageUpload","props","accept","className","description","disabled","includeFileMeta","label","maxSize","renderFilePreview","renderTrigger","validation","value","variant","type","onChange","id","src","createElement","images","render","showFileManager","Fragment","createFromUrl","onSelectItem","onRemoveItem"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { FileManagerFileItem } from \"~/index\";\nimport { FileManager } from \"~/index\";\nimport type { FormComponentProps } from \"@webiny/ui/types\";\nimport { FileItem, FilePicker, type FilePickerProps } from \"@webiny/admin-ui\";\n\nexport interface SingleImageUploadProps extends FormComponentProps {\n    /**\n     * Accept types\n     */\n    accept?: string[];\n\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Is component disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Description beneath the image.\n     */\n    description?: React.ReactNode;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\n    /**\n     * Define file's max allowed size (default is \"10mb\").\n     * Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n     */\n    maxSize?: number | string;\n\n    /**\n     * onChange callback when a file is set or unset.\n     * It is marked as `optional` because this component is often used in conjunction with <Bind>, which injects the\n     * `onChange` into its child element. In that case, that prop is not passed by the developer.\n     */\n    onChange?: (value: FileManagerFileItem | null) => void;\n\n    /**\n     * Optional custom props, passed to the preview image.\n     */\n    imagePreviewProps?: any;\n\n    /**\n     * By default, file meta is not included in the data passed to `onChange`. If you need it, set this flag to true.\n     */\n    includeFileMeta?: boolean;\n\n    /**\n     * Is the wrapper round?\n     * @deprecated Provide a custom `renderImagePreview` instead.\n     */\n    round?: boolean;\n\n    /**\n     * Define the properties that are returned on file(s) selection.\n     * @deprecated Pick the desired file attributes in the `onChange` callback, or `beforeChange` on the `<Bind>` element.\n     */\n    onChangePick?: string[];\n\n    /**\n     * Render the image preview.\n     */\n    renderFilePreview?: FilePickerProps[\"renderFilePreview\"];\n\n    /**\n     * Render the trigger button.\n     */\n    renderTrigger?: FilePickerProps[\"renderTrigger\"];\n\n    /**\n     * Component type.\n     */\n    type?: FilePickerProps[\"type\"];\n\n    /**\n     * Component variant.\n     */\n    variant?: FilePickerProps[\"variant\"];\n}\n\nconst SingleImageUpload = (props: SingleImageUploadProps) => {\n    const {\n        accept,\n        className,\n        description,\n        disabled,\n        includeFileMeta = false,\n        label,\n        maxSize,\n        renderFilePreview,\n        renderTrigger,\n        validation,\n        value,\n        variant,\n        type\n    } = props;\n\n    const onChange = useCallback(\n        (value: FileManagerFileItem | null) => {\n            if (!props.onChange) {\n                return;\n            }\n\n            if (value && !includeFileMeta) {\n                props.onChange({ id: value.id, src: value.src });\n                return;\n            }\n\n            if (value && includeFileMeta) {\n                props.onChange(value);\n                return;\n            }\n\n            props.onChange(null);\n        },\n        [props.onChange]\n    );\n\n    return (\n        <FileManager\n            onChange={onChange}\n            accept={accept}\n            images={!accept}\n            maxSize={maxSize}\n            render={({ showFileManager }) => (\n                <>\n                    <FilePicker\n                        label={label}\n                        description={description}\n                        validation={validation}\n                        className={className}\n                        disabled={disabled}\n                        value={value ? FileItem.createFromUrl(value.src) : null}\n                        onSelectItem={showFileManager}\n                        onRemoveItem={() => onChange(null)}\n                        renderFilePreview={renderFilePreview}\n                        renderTrigger={renderTrigger}\n                        variant={variant}\n                        type={type}\n                    />\n                </>\n            )}\n        />\n    );\n};\n\nexport default SingleImageUpload;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAE1C,SAASC,WAAW;AAEpB,SAASC,QAAQ,EAAEC,UAAU,QAA8B,kBAAkB;AAoF7E,MAAMC,iBAAiB,GAAIC,KAA6B,IAAK;EACzD,MAAM;IACFC,MAAM;IACNC,SAAS;IACTC,WAAW;IACXC,QAAQ;IACRC,eAAe,GAAG,KAAK;IACvBC,KAAK;IACLC,OAAO;IACPC,iBAAiB;IACjBC,aAAa;IACbC,UAAU;IACVC,KAAK;IACLC,OAAO;IACPC;EACJ,CAAC,GAAGb,KAAK;EAET,MAAMc,QAAQ,GAAGnB,WAAW,CACvBgB,KAAiC,IAAK;IACnC,IAAI,CAACX,KAAK,CAACc,QAAQ,EAAE;MACjB;IACJ;IAEA,IAAIH,KAAK,IAAI,CAACN,eAAe,EAAE;MAC3BL,KAAK,CAACc,QAAQ,CAAC;QAAEC,EAAE,EAAEJ,KAAK,CAACI,EAAE;QAAEC,GAAG,EAAEL,KAAK,CAACK;MAAI,CAAC,CAAC;MAChD;IACJ;IAEA,IAAIL,KAAK,IAAIN,eAAe,EAAE;MAC1BL,KAAK,CAACc,QAAQ,CAACH,KAAK,CAAC;MACrB;IACJ;IAEAX,KAAK,CAACc,QAAQ,CAAC,IAAI,CAAC;EACxB,CAAC,EACD,CAACd,KAAK,CAACc,QAAQ,CACnB,CAAC;EAED,oBACIpB,KAAA,CAAAuB,aAAA,CAACrB,WAAW;IACRkB,QAAQ,EAAEA,QAAS;IACnBb,MAAM,EAAEA,MAAO;IACfiB,MAAM,EAAE,CAACjB,MAAO;IAChBM,OAAO,EAAEA,OAAQ;IACjBY,MAAM,EAAEA,CAAC;MAAEC;IAAgB,CAAC,kBACxB1B,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAuB,aAAA,CAACnB,UAAU;MACPQ,KAAK,EAAEA,KAAM;MACbH,WAAW,EAAEA,WAAY;MACzBO,UAAU,EAAEA,UAAW;MACvBR,SAAS,EAAEA,SAAU;MACrBE,QAAQ,EAAEA,QAAS;MACnBO,KAAK,EAAEA,KAAK,GAAGd,QAAQ,CAACyB,aAAa,CAACX,KAAK,CAACK,GAAG,CAAC,GAAG,IAAK;MACxDO,YAAY,EAAEH,eAAgB;MAC9BI,YAAY,EAAEA,CAAA,KAAMV,QAAQ,CAAC,IAAI,CAAE;MACnCN,iBAAiB,EAAEA,iBAAkB;MACrCC,aAAa,EAAEA,aAAc;MAC7BG,OAAO,EAAEA,OAAQ;MACjBC,IAAI,EAAEA;IAAK,CACd,CACH;EACJ,CACL,CAAC;AAEV,CAAC;AAED,eAAed,iBAAiB","ignoreList":[]}
+{"version":3,"names":["React","useCallback","FileManager","FileItem","FilePicker","SingleImageUpload","props","accept","className","description","disabled","includeFileMeta","label","maxSize","renderFilePreview","renderTrigger","validation","value","variant","type","onChange","id","src","createElement","images","render","showFileManager","Fragment","createFromUrl","onSelectItem","onRemoveItem"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport type { FileManagerFileItem } from \"~/index.js\";\nimport { FileManager } from \"~/index.js\";\nimport type { FormComponentProps } from \"@webiny/admin-ui\";\nimport { FileItem, FilePicker, type FilePickerProps } from \"@webiny/admin-ui\";\n\nexport interface SingleImageUploadProps extends FormComponentProps {\n    /**\n     * Accept types\n     */\n    accept?: string[];\n\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Is component disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Description beneath the image.\n     */\n    description?: React.ReactNode;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\n    /**\n     * Define file's max allowed size (default is \"10mb\").\n     * Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n     */\n    maxSize?: number | string;\n\n    /**\n     * onChange callback when a file is set or unset.\n     * It is marked as `optional` because this component is often used in conjunction with <Bind>, which injects the\n     * `onChange` into its child element. In that case, that prop is not passed by the developer.\n     */\n    onChange?: (value: Pick<FileManagerFileItem, \"id\" | \"src\"> | null) => void;\n\n    /**\n     * Optional custom props, passed to the preview image.\n     */\n    imagePreviewProps?: any;\n\n    /**\n     * By default, file meta is not included in the data passed to `onChange`. If you need it, set this flag to true.\n     */\n    includeFileMeta?: boolean;\n\n    /**\n     * Is the wrapper round?\n     * @deprecated Provide a custom `renderImagePreview` instead.\n     */\n    round?: boolean;\n\n    /**\n     * Render the image preview.\n     */\n    renderFilePreview?: FilePickerProps[\"renderFilePreview\"];\n\n    /**\n     * Render the trigger button.\n     */\n    renderTrigger?: FilePickerProps[\"renderTrigger\"];\n\n    /**\n     * Component type.\n     */\n    type?: FilePickerProps[\"type\"];\n\n    /**\n     * Component variant.\n     */\n    variant?: FilePickerProps[\"variant\"];\n}\n\nconst SingleImageUpload = (props: SingleImageUploadProps) => {\n    const {\n        accept,\n        className,\n        description,\n        disabled,\n        includeFileMeta = false,\n        label,\n        maxSize,\n        renderFilePreview,\n        renderTrigger,\n        validation,\n        value,\n        variant,\n        type\n    } = props;\n\n    const onChange = useCallback(\n        (value: FileManagerFileItem | null) => {\n            if (!props.onChange) {\n                return;\n            }\n\n            if (value && !includeFileMeta) {\n                props.onChange({ id: value.id, src: value.src });\n                return;\n            }\n\n            if (value && includeFileMeta) {\n                props.onChange(value);\n                return;\n            }\n\n            props.onChange(null);\n        },\n        [props.onChange]\n    );\n\n    return (\n        <FileManager\n            onChange={onChange}\n            accept={accept}\n            images={!accept}\n            maxSize={maxSize}\n            render={({ showFileManager }) => (\n                <>\n                    <FilePicker\n                        label={label}\n                        description={description}\n                        validation={validation}\n                        className={className}\n                        disabled={disabled}\n                        value={value ? FileItem.createFromUrl(value.src) : null}\n                        onSelectItem={showFileManager}\n                        onRemoveItem={() => onChange(null)}\n                        renderFilePreview={renderFilePreview}\n                        renderTrigger={renderTrigger}\n                        variant={variant}\n                        type={type}\n                    />\n                </>\n            )}\n        />\n    );\n};\n\nexport default SingleImageUpload;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAE1C,SAASC,WAAW;AAEpB,SAASC,QAAQ,EAAEC,UAAU,QAA8B,kBAAkB;AA8E7E,MAAMC,iBAAiB,GAAIC,KAA6B,IAAK;EACzD,MAAM;IACFC,MAAM;IACNC,SAAS;IACTC,WAAW;IACXC,QAAQ;IACRC,eAAe,GAAG,KAAK;IACvBC,KAAK;IACLC,OAAO;IACPC,iBAAiB;IACjBC,aAAa;IACbC,UAAU;IACVC,KAAK;IACLC,OAAO;IACPC;EACJ,CAAC,GAAGb,KAAK;EAET,MAAMc,QAAQ,GAAGnB,WAAW,CACvBgB,KAAiC,IAAK;IACnC,IAAI,CAACX,KAAK,CAACc,QAAQ,EAAE;MACjB;IACJ;IAEA,IAAIH,KAAK,IAAI,CAACN,eAAe,EAAE;MAC3BL,KAAK,CAACc,QAAQ,CAAC;QAAEC,EAAE,EAAEJ,KAAK,CAACI,EAAE;QAAEC,GAAG,EAAEL,KAAK,CAACK;MAAI,CAAC,CAAC;MAChD;IACJ;IAEA,IAAIL,KAAK,IAAIN,eAAe,EAAE;MAC1BL,KAAK,CAACc,QAAQ,CAACH,KAAK,CAAC;MACrB;IACJ;IAEAX,KAAK,CAACc,QAAQ,CAAC,IAAI,CAAC;EACxB,CAAC,EACD,CAACd,KAAK,CAACc,QAAQ,CACnB,CAAC;EAED,oBACIpB,KAAA,CAAAuB,aAAA,CAACrB,WAAW;IACRkB,QAAQ,EAAEA,QAAS;IACnBb,MAAM,EAAEA,MAAO;IACfiB,MAAM,EAAE,CAACjB,MAAO;IAChBM,OAAO,EAAEA,OAAQ;IACjBY,MAAM,EAAEA,CAAC;MAAEC;IAAgB,CAAC,kBACxB1B,KAAA,CAAAuB,aAAA,CAAAvB,KAAA,CAAA2B,QAAA,qBACI3B,KAAA,CAAAuB,aAAA,CAACnB,UAAU;MACPQ,KAAK,EAAEA,KAAM;MACbH,WAAW,EAAEA,WAAY;MACzBO,UAAU,EAAEA,UAAW;MACvBR,SAAS,EAAEA,SAAU;MACrBE,QAAQ,EAAEA,QAAS;MACnBO,KAAK,EAAEA,KAAK,GAAGd,QAAQ,CAACyB,aAAa,CAACX,KAAK,CAACK,GAAG,CAAC,GAAG,IAAK;MACxDO,YAAY,EAAEH,eAAgB;MAC9BI,YAAY,EAAEA,CAAA,KAAMV,QAAQ,CAAC,IAAI,CAAE;MACnCN,iBAAiB,EAAEA,iBAAkB;MACrCC,aAAa,EAAEA,aAAc;MAC7BG,OAAO,EAAEA,OAAQ;MACjBC,IAAI,EAAEA;IAAK,CACd,CACH;EACJ,CACL,CAAC;AAEV,CAAC;AAED,eAAed,iBAAiB","ignoreList":[]}

package/components/SplitView/SplitView.d.ts

@@ -1,13 +1,13 @@
 import * as React from "react";
 import type { ColumnProps } from "@webiny/admin-ui";
-import type { PanelProps, PanelGroupProps } from "../ResizablePanels";
-interface SplitViewProps extends Omit<PanelGroupProps, "direction" | "id" | "autoSaveId"> {
-    layoutId?: string | null;
+import type { PanelProps, PanelGroupProps } from "../../components/ResizablePanels/index.js";
+interface SplitViewProps extends Omit<PanelGroupProps, "id"> {
+    namespace?: string;
 }
-declare const SplitView: ({ children, className, layoutId, ...props }: SplitViewProps) => React.JSX.Element;
+export declare const SplitView: ({ children, className, namespace, ...props }: SplitViewProps) => React.JSX.Element;
 interface SplitViewPanelProps extends Omit<PanelProps, "id"> {
     span?: ColumnProps["span"];
 }
-declare const LeftPanel: ({ children, className, ...props }: SplitViewPanelProps) => React.JSX.Element;
-declare const RightPanel: ({ children, className, ...props }: SplitViewPanelProps) => React.JSX.Element;
-export { SplitView, LeftPanel, RightPanel };
+export declare const LeftPanel: ({ children, className, ...props }: SplitViewPanelProps) => React.JSX.Element;
+export declare const RightPanel: ({ children, className, ...props }: SplitViewPanelProps) => React.JSX.Element;
+export {};

package/components/SplitView/SplitView.js

@@ -1,17 +1,24 @@
 import * as React from "react";
 import { cn, Separator } from "@webiny/admin-ui";
-import { Panel, PanelGroup, PanelResizeHandle } from "../ResizablePanels";
-const SplitView = ({
+import { Panel, PanelGroup, PanelResizeHandle } from "../ResizablePanels/index.js";
+import { useLocalStorage, useLocalStorageValue } from "@webiny/app";
+import { useCallback } from "react";
+export const SplitView = ({
   children,
   className,
-  layoutId,
+  namespace = "splitView",
   ...props
 }) => {
+  const localStorage = useLocalStorage();
+  const layout = useLocalStorageValue(namespace);
+  const saveLayout = useCallback(layout => {
+    localStorage.set(`${namespace}/panels`, layout);
+  }, [localStorage, namespace]);
   return /*#__PURE__*/React.createElement(PanelGroup, Object.assign({
-    direction: "horizontal",
-    id: "splitView",
-    autoSaveId: layoutId,
-    className: cn("webiny-split-view", className)
+    id: namespace,
+    defaultLayout: layout,
+    className: cn("webiny-split-view", className),
+    onLayoutChanged: saveLayout
   }, props), children);
 };
 
@@ -20,7 +27,7 @@ const getDefaultSize = span => {
   const spanValue = typeof span === "number" && span > 0 && span <= 12 ? span : 6;
   return spanValue / 12 * 100;
 };
-const LeftPanel = ({
+export const LeftPanel = ({
   children,
   className,
   ...props
@@ -31,11 +38,13 @@ const LeftPanel = ({
     minSize: 10,
     id: "leftPanel",
     className: cn("webiny-split-view__right-panel", className)
-  }, props), children), /*#__PURE__*/React.createElement(PanelResizeHandle, null, /*#__PURE__*/React.createElement(Separator, {
+  }, props), children), /*#__PURE__*/React.createElement(PanelResizeHandle, {
+    className: "outline-0"
+  }, /*#__PURE__*/React.createElement(Separator, {
     orientation: "vertical"
   })));
 };
-const RightPanel = ({
+export const RightPanel = ({
   children,
   className,
   ...props
@@ -45,13 +54,12 @@ const RightPanel = ({
     defaultSize: defaultSize,
     minSize: 30,
     id: "rightPanel",
-    className: cn("!wby-overflow-scroll webiny-split-view__right-panel", className)
+    className: cn("overflow-scroll! webiny-split-view__right-panel", className)
   }, props, {
     style: {
       overflowY: "scroll"
     }
   }), children);
 };
-export { SplitView, LeftPanel, RightPanel };
 
 //# sourceMappingURL=SplitView.js.map

package/components/SplitView/SplitView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","Separator","Panel","PanelGroup","PanelResizeHandle","SplitView","children","className","layoutId","props","createElement","Object","assign","direction","id","autoSaveId","getDefaultSize","span","spanValue","LeftPanel","defaultSize","Fragment","minSize","orientation","RightPanel","style","overflowY"],"sources":["SplitView.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ColumnProps } from \"@webiny/admin-ui\";\nimport { cn, Separator } from \"@webiny/admin-ui\";\nimport type { PanelProps, PanelGroupProps } from \"~/components/ResizablePanels\";\nimport { Panel, PanelGroup, PanelResizeHandle } from \"~/components/ResizablePanels\";\n\ninterface SplitViewProps extends Omit<PanelGroupProps, \"direction\" | \"id\" | \"autoSaveId\"> {\n    layoutId?: string | null;\n}\n\nconst SplitView = ({ children, className, layoutId, ...props }: SplitViewProps) => {\n    return (\n        <PanelGroup\n            direction=\"horizontal\"\n            id=\"splitView\"\n            autoSaveId={layoutId}\n            className={cn(\"webiny-split-view\", className)}\n            {...props}\n        >\n            {children}\n        </PanelGroup>\n    );\n};\n\n// Get the default size for the panel:\nconst getDefaultSize = (span: ColumnProps[\"span\"]) => {\n    const spanValue = typeof span === \"number\" && span > 0 && span <= 12 ? span : 6;\n    return (spanValue / 12) * 100;\n};\n\ninterface SplitViewPanelProps extends Omit<PanelProps, \"id\"> {\n    span?: ColumnProps[\"span\"];\n}\n\nconst LeftPanel = ({ children, className, ...props }: SplitViewPanelProps) => {\n    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 5);\n\n    return (\n        <>\n            <Panel\n                defaultSize={defaultSize}\n                minSize={10}\n                id=\"leftPanel\"\n                className={cn(\"webiny-split-view__right-panel\", className)}\n                {...props}\n            >\n                {children}\n            </Panel>\n            <PanelResizeHandle>\n                <Separator orientation={\"vertical\"} />\n            </PanelResizeHandle>\n        </>\n    );\n};\n\nconst RightPanel = ({ children, className, ...props }: SplitViewPanelProps) => {\n    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 7);\n\n    return (\n        <Panel\n            defaultSize={defaultSize}\n            minSize={30}\n            id=\"rightPanel\"\n            className={cn(\"!wby-overflow-scroll webiny-split-view__right-panel\", className)}\n            {...props}\n            style={{ overflowY: \"scroll\" }}\n        >\n            {children}\n        </Panel>\n    );\n};\n\nexport { SplitView, LeftPanel, RightPanel };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,EAAE,EAAEC,SAAS,QAAQ,kBAAkB;AAEhD,SAASC,KAAK,EAAEC,UAAU,EAAEC,iBAAiB;AAM7C,MAAMC,SAAS,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAsB,CAAC,KAAK;EAC/E,oBACIV,KAAA,CAAAW,aAAA,CAACP,UAAU,EAAAQ,MAAA,CAAAC,MAAA;IACPC,SAAS,EAAC,YAAY;IACtBC,EAAE,EAAC,WAAW;IACdC,UAAU,EAAEP,QAAS;IACrBD,SAAS,EAAEP,EAAE,CAAC,mBAAmB,EAAEO,SAAS;EAAE,GAC1CE,KAAK,GAERH,QACO,CAAC;AAErB,CAAC;;AAED;AACA,MAAMU,cAAc,GAAIC,IAAyB,IAAK;EAClD,MAAMC,SAAS,GAAG,OAAOD,IAAI,KAAK,QAAQ,IAAIA,IAAI,GAAG,CAAC,IAAIA,IAAI,IAAI,EAAE,GAAGA,IAAI,GAAG,CAAC;EAC/E,OAAQC,SAAS,GAAG,EAAE,GAAI,GAAG;AACjC,CAAC;AAMD,MAAMC,SAAS,GAAGA,CAAC;EAAEb,QAAQ;EAAEC,SAAS;EAAE,GAAGE;AAA2B,CAAC,KAAK;EAC1E,MAAMW,WAAW,GAAGX,KAAK,CAACW,WAAW,IAAIJ,cAAc,CAACP,KAAK,CAACQ,IAAI,IAAI,CAAC,CAAC;EAExE,oBACIlB,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAsB,QAAA,qBACItB,KAAA,CAAAW,aAAA,CAACR,KAAK,EAAAS,MAAA,CAAAC,MAAA;IACFQ,WAAW,EAAEA,WAAY;IACzBE,OAAO,EAAE,EAAG;IACZR,EAAE,EAAC,WAAW;IACdP,SAAS,EAAEP,EAAE,CAAC,gCAAgC,EAAEO,SAAS;EAAE,GACvDE,KAAK,GAERH,QACE,CAAC,eACRP,KAAA,CAAAW,aAAA,CAACN,iBAAiB,qBACdL,KAAA,CAAAW,aAAA,CAACT,SAAS;IAACsB,WAAW,EAAE;EAAW,CAAE,CACtB,CACrB,CAAC;AAEX,CAAC;AAED,MAAMC,UAAU,GAAGA,CAAC;EAAElB,QAAQ;EAAEC,SAAS;EAAE,GAAGE;AAA2B,CAAC,KAAK;EAC3E,MAAMW,WAAW,GAAGX,KAAK,CAACW,WAAW,IAAIJ,cAAc,CAACP,KAAK,CAACQ,IAAI,IAAI,CAAC,CAAC;EAExE,oBACIlB,KAAA,CAAAW,aAAA,CAACR,KAAK,EAAAS,MAAA,CAAAC,MAAA;IACFQ,WAAW,EAAEA,WAAY;IACzBE,OAAO,EAAE,EAAG;IACZR,EAAE,EAAC,YAAY;IACfP,SAAS,EAAEP,EAAE,CAAC,qDAAqD,EAAEO,SAAS;EAAE,GAC5EE,KAAK;IACTgB,KAAK,EAAE;MAAEC,SAAS,EAAE;IAAS;EAAE,IAE9BpB,QACE,CAAC;AAEhB,CAAC;AAED,SAASD,SAAS,EAAEc,SAAS,EAAEK,UAAU","ignoreList":[]}
+{"version":3,"names":["React","cn","Separator","Panel","PanelGroup","PanelResizeHandle","useLocalStorage","useLocalStorageValue","useCallback","SplitView","children","className","namespace","props","localStorage","layout","saveLayout","set","createElement","Object","assign","id","defaultLayout","onLayoutChanged","getDefaultSize","span","spanValue","LeftPanel","defaultSize","Fragment","minSize","orientation","RightPanel","style","overflowY"],"sources":["SplitView.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { ColumnProps } from \"@webiny/admin-ui\";\nimport { cn, Separator } from \"@webiny/admin-ui\";\nimport type { PanelProps, PanelGroupProps } from \"~/components/ResizablePanels/index.js\";\nimport {\n    Panel,\n    PanelGroup,\n    PanelResizeHandle,\n    type Layout\n} from \"~/components/ResizablePanels/index.js\";\nimport { useLocalStorage, useLocalStorageValue } from \"@webiny/app\";\nimport { useCallback } from \"react\";\n\ninterface SplitViewProps extends Omit<PanelGroupProps, \"id\"> {\n    namespace?: string;\n}\n\nexport const SplitView = ({\n    children,\n    className,\n    namespace = \"splitView\",\n    ...props\n}: SplitViewProps) => {\n    const localStorage = useLocalStorage();\n\n    const layout = useLocalStorageValue<Layout>(namespace);\n\n    const saveLayout = useCallback(\n        (layout: Layout) => {\n            localStorage.set(`${namespace}/panels`, layout);\n        },\n        [localStorage, namespace]\n    );\n\n    return (\n        <PanelGroup\n            id={namespace}\n            defaultLayout={layout}\n            className={cn(\"webiny-split-view\", className)}\n            onLayoutChanged={saveLayout}\n            {...props}\n        >\n            {children}\n        </PanelGroup>\n    );\n};\n\n// Get the default size for the panel:\nconst getDefaultSize = (span: ColumnProps[\"span\"]) => {\n    const spanValue = typeof span === \"number\" && span > 0 && span <= 12 ? span : 6;\n    return (spanValue / 12) * 100;\n};\n\ninterface SplitViewPanelProps extends Omit<PanelProps, \"id\"> {\n    span?: ColumnProps[\"span\"];\n}\n\nexport const LeftPanel = ({ children, className, ...props }: SplitViewPanelProps) => {\n    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 5);\n\n    return (\n        <>\n            <Panel\n                defaultSize={defaultSize}\n                minSize={10}\n                id=\"leftPanel\"\n                className={cn(\"webiny-split-view__right-panel\", className)}\n                {...props}\n            >\n                {children}\n            </Panel>\n            <PanelResizeHandle className={\"outline-0\"}>\n                <Separator orientation={\"vertical\"} />\n            </PanelResizeHandle>\n        </>\n    );\n};\n\nexport const RightPanel = ({ children, className, ...props }: SplitViewPanelProps) => {\n    const defaultSize = props.defaultSize ?? getDefaultSize(props.span || 7);\n\n    return (\n        <Panel\n            defaultSize={defaultSize}\n            minSize={30}\n            id=\"rightPanel\"\n            className={cn(\"overflow-scroll! webiny-split-view__right-panel\", className)}\n            {...props}\n            style={{ overflowY: \"scroll\" }}\n        >\n            {children}\n        </Panel>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,EAAE,EAAEC,SAAS,QAAQ,kBAAkB;AAEhD,SACIC,KAAK,EACLC,UAAU,EACVC,iBAAiB;AAGrB,SAASC,eAAe,EAAEC,oBAAoB,QAAQ,aAAa;AACnE,SAASC,WAAW,QAAQ,OAAO;AAMnC,OAAO,MAAMC,SAAS,GAAGA,CAAC;EACtBC,QAAQ;EACRC,SAAS;EACTC,SAAS,GAAG,WAAW;EACvB,GAAGC;AACS,CAAC,KAAK;EAClB,MAAMC,YAAY,GAAGR,eAAe,CAAC,CAAC;EAEtC,MAAMS,MAAM,GAAGR,oBAAoB,CAASK,SAAS,CAAC;EAEtD,MAAMI,UAAU,GAAGR,WAAW,CACzBO,MAAc,IAAK;IAChBD,YAAY,CAACG,GAAG,CAAC,GAAGL,SAAS,SAAS,EAAEG,MAAM,CAAC;EACnD,CAAC,EACD,CAACD,YAAY,EAAEF,SAAS,CAC5B,CAAC;EAED,oBACIZ,KAAA,CAAAkB,aAAA,CAACd,UAAU,EAAAe,MAAA,CAAAC,MAAA;IACPC,EAAE,EAAET,SAAU;IACdU,aAAa,EAAEP,MAAO;IACtBJ,SAAS,EAAEV,EAAE,CAAC,mBAAmB,EAAEU,SAAS,CAAE;IAC9CY,eAAe,EAAEP;EAAW,GACxBH,KAAK,GAERH,QACO,CAAC;AAErB,CAAC;;AAED;AACA,MAAMc,cAAc,GAAIC,IAAyB,IAAK;EAClD,MAAMC,SAAS,GAAG,OAAOD,IAAI,KAAK,QAAQ,IAAIA,IAAI,GAAG,CAAC,IAAIA,IAAI,IAAI,EAAE,GAAGA,IAAI,GAAG,CAAC;EAC/E,OAAQC,SAAS,GAAG,EAAE,GAAI,GAAG;AACjC,CAAC;AAMD,OAAO,MAAMC,SAAS,GAAGA,CAAC;EAAEjB,QAAQ;EAAEC,SAAS;EAAE,GAAGE;AAA2B,CAAC,KAAK;EACjF,MAAMe,WAAW,GAAGf,KAAK,CAACe,WAAW,IAAIJ,cAAc,CAACX,KAAK,CAACY,IAAI,IAAI,CAAC,CAAC;EAExE,oBACIzB,KAAA,CAAAkB,aAAA,CAAAlB,KAAA,CAAA6B,QAAA,qBACI7B,KAAA,CAAAkB,aAAA,CAACf,KAAK,EAAAgB,MAAA,CAAAC,MAAA;IACFQ,WAAW,EAAEA,WAAY;IACzBE,OAAO,EAAE,EAAG;IACZT,EAAE,EAAC,WAAW;IACdV,SAAS,EAAEV,EAAE,CAAC,gCAAgC,EAAEU,SAAS;EAAE,GACvDE,KAAK,GAERH,QACE,CAAC,eACRV,KAAA,CAAAkB,aAAA,CAACb,iBAAiB;IAACM,SAAS,EAAE;EAAY,gBACtCX,KAAA,CAAAkB,aAAA,CAAChB,SAAS;IAAC6B,WAAW,EAAE;EAAW,CAAE,CACtB,CACrB,CAAC;AAEX,CAAC;AAED,OAAO,MAAMC,UAAU,GAAGA,CAAC;EAAEtB,QAAQ;EAAEC,SAAS;EAAE,GAAGE;AAA2B,CAAC,KAAK;EAClF,MAAMe,WAAW,GAAGf,KAAK,CAACe,WAAW,IAAIJ,cAAc,CAACX,KAAK,CAACY,IAAI,IAAI,CAAC,CAAC;EAExE,oBACIzB,KAAA,CAAAkB,aAAA,CAACf,KAAK,EAAAgB,MAAA,CAAAC,MAAA;IACFQ,WAAW,EAAEA,WAAY;IACzBE,OAAO,EAAE,EAAG;IACZT,EAAE,EAAC,YAAY;IACfV,SAAS,EAAEV,EAAE,CAAC,iDAAiD,EAAEU,SAAS;EAAE,GACxEE,KAAK;IACToB,KAAK,EAAE;MAAEC,SAAS,EAAE;IAAS;EAAE,IAE9BxB,QACE,CAAC;AAEhB,CAAC","ignoreList":[]}

package/components/SplitView/index.d.ts

@@ -1 +1 @@
-export { SplitView, LeftPanel, RightPanel } from "./SplitView";
+export { SplitView, LeftPanel, RightPanel } from "./SplitView.js";

package/components/SplitView/index.js

@@ -1,3 +1,3 @@
-export { SplitView, LeftPanel, RightPanel } from "./SplitView";
+export { SplitView, LeftPanel, RightPanel } from "./SplitView.js";
 
 //# sourceMappingURL=index.js.map

package/components/SplitView/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["SplitView","LeftPanel","RightPanel"],"sources":["index.ts"],"sourcesContent":["export { SplitView, LeftPanel, RightPanel } from \"./SplitView\";\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,SAAS,EAAEC,UAAU","ignoreList":[]}
+{"version":3,"names":["SplitView","LeftPanel","RightPanel"],"sources":["index.ts"],"sourcesContent":["export { SplitView, LeftPanel, RightPanel } from \"./SplitView.js\";\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,SAAS,EAAEC,UAAU","ignoreList":[]}

package/components/TeamAutocomplete/graphql.d.ts

@@ -0,0 +1 @@
+export declare const LIST_TEAMS: import("graphql").DocumentNode;

package/components/TeamAutocomplete/graphql.js

@@ -0,0 +1,18 @@
+import gql from "graphql-tag";
+export const LIST_TEAMS = gql`
+    query listTeams {
+        security {
+            teams: listTeams {
+                data {
+                    id
+                    slug
+                    name
+                    description
+                    createdOn
+                }
+            }
+        }
+    }
+`;
+
+//# sourceMappingURL=graphql.js.map

package/components/TeamAutocomplete/graphql.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["gql","LIST_TEAMS"],"sources":["graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\n\nexport const LIST_TEAMS = gql`\n    query listTeams {\n        security {\n            teams: listTeams {\n                data {\n                    id\n                    slug\n                    name\n                    description\n                    createdOn\n                }\n            }\n        }\n    }\n`;\n"],"mappings":"AAAA,OAAOA,GAAG,MAAM,aAAa;AAE7B,OAAO,MAAMC,UAAU,GAAGD,GAAG;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/components/TeamAutocomplete/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { AutoComplete } from "@webiny/admin-ui";
+type TeamAutocompleteProps = Omit<React.ComponentProps<typeof AutoComplete>, "options" | "onValueChange"> & {
+    onChange?: (value: string) => void;
+};
+export declare const TeamAutocomplete: ({ onChange, value, ...props }: TeamAutocompleteProps) => React.JSX.Element;
+export {};

package/components/TeamAutocomplete/index.js

@@ -0,0 +1,27 @@
+import React, { useMemo, useCallback } from "react";
+import { AutoComplete } from "@webiny/admin-ui";
+import { LIST_TEAMS } from "./graphql.js";
+import { useQuery } from "@apollo/react-hooks";
+export const TeamAutocomplete = ({
+  onChange,
+  value,
+  ...props
+}) => {
+  const {
+    data,
+    loading
+  } = useQuery(LIST_TEAMS);
+  const rawOptions = loading || !data ? [] : data.security.teams.data;
+  const options = useMemo(() => rawOptions.map(team => ({
+    label: team.name,
+    value: team.id
+  })), [rawOptions]);
+  const onValueChange = useCallback(id => onChange?.(id), [onChange]);
+  return /*#__PURE__*/React.createElement(AutoComplete, Object.assign({}, props, {
+    options: options,
+    value: loading ? undefined : value,
+    onValueChange: onValueChange
+  }));
+};
+
+//# sourceMappingURL=index.js.map

package/components/TeamAutocomplete/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","useCallback","AutoComplete","LIST_TEAMS","useQuery","TeamAutocomplete","onChange","value","props","data","loading","rawOptions","security","teams","options","map","team","label","name","id","onValueChange","createElement","Object","assign","undefined"],"sources":["index.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from \"react\";\nimport { AutoComplete } from \"@webiny/admin-ui\";\nimport { LIST_TEAMS } from \"./graphql.js\";\nimport { useQuery } from \"@apollo/react-hooks\";\n\ntype TeamAutocompleteProps = Omit<\n    React.ComponentProps<typeof AutoComplete>,\n    \"options\" | \"onValueChange\"\n> & {\n    onChange?: (value: string) => void;\n};\n\nexport const TeamAutocomplete = ({ onChange, value, ...props }: TeamAutocompleteProps) => {\n    const { data, loading } = useQuery(LIST_TEAMS);\n    const rawOptions = loading || !data ? [] : data.security.teams.data;\n\n    const options = useMemo(\n        () => rawOptions.map((team: any) => ({ label: team.name, value: team.id })),\n        [rawOptions]\n    );\n\n    const onValueChange = useCallback((id: string) => onChange?.(id), [onChange]);\n\n    return (\n        <AutoComplete\n            {...props}\n            options={options}\n            value={loading ? undefined : (value as string | undefined)}\n            onValueChange={onValueChange}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,WAAW,QAAQ,OAAO;AACnD,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,UAAU;AACnB,SAASC,QAAQ,QAAQ,qBAAqB;AAS9C,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAA6B,CAAC,KAAK;EACtF,MAAM;IAAEC,IAAI;IAAEC;EAAQ,CAAC,GAAGN,QAAQ,CAACD,UAAU,CAAC;EAC9C,MAAMQ,UAAU,GAAGD,OAAO,IAAI,CAACD,IAAI,GAAG,EAAE,GAAGA,IAAI,CAACG,QAAQ,CAACC,KAAK,CAACJ,IAAI;EAEnE,MAAMK,OAAO,GAAGd,OAAO,CACnB,MAAMW,UAAU,CAACI,GAAG,CAAEC,IAAS,KAAM;IAAEC,KAAK,EAAED,IAAI,CAACE,IAAI;IAAEX,KAAK,EAAES,IAAI,CAACG;EAAG,CAAC,CAAC,CAAC,EAC3E,CAACR,UAAU,CACf,CAAC;EAED,MAAMS,aAAa,GAAGnB,WAAW,CAAEkB,EAAU,IAAKb,QAAQ,GAAGa,EAAE,CAAC,EAAE,CAACb,QAAQ,CAAC,CAAC;EAE7E,oBACIP,KAAA,CAAAsB,aAAA,CAACnB,YAAY,EAAAoB,MAAA,CAAAC,MAAA,KACLf,KAAK;IACTM,OAAO,EAAEA,OAAQ;IACjBP,KAAK,EAAEG,OAAO,GAAGc,SAAS,GAAIjB,KAA6B;IAC3Da,aAAa,EAAEA;EAAc,EAChC,CAAC;AAEV,CAAC","ignoreList":[]}

package/components/TeamsMultiAutocomplete/graphql.d.ts

@@ -0,0 +1 @@
+export declare const LIST_TEAMS: import("graphql").DocumentNode;

package/components/TeamsMultiAutocomplete/graphql.js

@@ -0,0 +1,23 @@
+import gql from "graphql-tag";
+export const LIST_TEAMS = gql`
+    query listTeams {
+        security {
+            teams: listTeams {
+                data {
+                    id
+                    slug
+                    name
+                    description
+                    createdOn
+                }
+                error {
+                    data
+                    message
+                    code
+                }
+            }
+        }
+    }
+`;
+
+//# sourceMappingURL=graphql.js.map