@webiny/admin-ui 6.3.0-beta.4 → 6.4.0-beta.0

package/Input/InputPrimitive.stories.js

@@ -1,183 +1,215 @@
-import React, { useState } from "react";
-import { ReactComponent as NotificationsIcon } from "@webiny/icons/notifications.svg";
-import { ReactComponent as CalendarIcon } from "@webiny/icons/calendar_month.svg";
+import react, { useState } from "react";
+import { ReactComponent } from "@webiny/icons/notifications.svg";
+import { ReactComponent as calendar_month_svg_ReactComponent } from "@webiny/icons/calendar_month.svg";
 import { InputPrimitive } from "./InputPrimitive.js";
 import { Icon } from "../Icon/index.js";
 const meta = {
-  title: "Components/Form Primitives/Input",
-  component: InputPrimitive,
-  argTypes: {
-    onChange: {
-      action: "onChange"
+    title: "Components/Form Primitives/Input",
+    component: InputPrimitive,
+    argTypes: {
+        onChange: {
+            action: "onChange"
+        },
+        onEnter: {
+            action: "onEnter"
+        },
+        onKeyDown: {
+            action: "onKeyDown"
+        },
+        type: {
+            control: "select",
+            options: [
+                "text",
+                "number",
+                "email",
+                "password",
+                "tel",
+                "url",
+                "search",
+                "date",
+                "datetime-local",
+                "month",
+                "week",
+                "time",
+                "color",
+                "file",
+                "checkbox",
+                "radio",
+                "range",
+                "hidden",
+                "button",
+                "submit",
+                "reset",
+                "image"
+            ],
+            defaultValue: "text"
+        }
     },
-    onEnter: {
-      action: "onEnter"
+    parameters: {
+        layout: "padded"
     },
-    onKeyDown: {
-      action: "onKeyDown"
+    render: (args)=>{
+        const [value, setValue] = useState(args.value);
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "w-full"
+        }, /*#__PURE__*/ react.createElement(InputPrimitive, {
+            ...args,
+            value: value,
+            onChange: setValue
+        }), /*#__PURE__*/ react.createElement("div", {
+            className: "mt-4 text-center"
+        }, "Current selected value: ", /*#__PURE__*/ react.createElement("pre", null, value)));
+    }
+};
+const InputPrimitive_stories = meta;
+const Default = {};
+const MediumSize = {
+    args: {
+        placeholder: "Custom placeholder",
+        size: "md"
+    }
+};
+const LargeSize = {
+    args: {
+        placeholder: "Custom placeholder",
+        size: "lg"
+    }
+};
+const ExtraLargeSize = {
+    args: {
+        placeholder: "Custom placeholder",
+        size: "xl"
+    }
+};
+const WithStartIcon = {
+    args: {
+        placeholder: "Custom placeholder",
+        startIcon: /*#__PURE__*/ react.createElement(Icon, {
+            label: "Bell",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        })
+    }
+};
+const WithEndIcon = {
+    args: {
+        placeholder: "Custom placeholder",
+        endIcon: /*#__PURE__*/ react.createElement(Icon, {
+            label: "Calendar",
+            icon: /*#__PURE__*/ react.createElement(calendar_month_svg_ReactComponent, null)
+        })
+    }
+};
+const WithStartAndEndIcons = {
+    args: {
+        placeholder: "Custom placeholder",
+        startIcon: /*#__PURE__*/ react.createElement(Icon, {
+            label: "Bell",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        }),
+        endIcon: /*#__PURE__*/ react.createElement(Icon, {
+            label: "Calendar",
+            icon: /*#__PURE__*/ react.createElement(calendar_month_svg_ReactComponent, null)
+        })
+    }
+};
+const PrimaryVariant = {
+    args: {
+        ...WithStartAndEndIcons.args,
+        variant: "primary",
+        placeholder: "Custom placeholder"
+    }
+};
+const PrimaryVariantDisabled = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
+};
+const PrimaryVariantInvalid = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
+};
+const SecondaryVariant = {
+    args: {
+        ...WithStartAndEndIcons.args,
+        variant: "secondary",
+        placeholder: "Custom placeholder"
+    }
+};
+const SecondaryVariantDisabled = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
+};
+const SecondaryVariantInvalid = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
+};
+const GhostVariant = {
+    args: {
+        ...WithStartAndEndIcons.args,
+        variant: "ghost",
+        placeholder: "Custom placeholder"
+    }
+};
+const GhostVariantDisabled = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
+};
+const GhostVariantInvalid = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
+};
+const GhostNegativeVariant = {
+    args: {
+        ...WithStartAndEndIcons.args,
+        variant: "ghost-negative",
+        placeholder: "Custom placeholder"
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-dark text-neutral-light p-xl"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
+};
+const GhostNegativeVariantDisabled = {
+    args: {
+        ...GhostNegativeVariant.args,
+        disabled: true
     },
-    type: {
-      control: "select",
-      options: ["text", "number", "email", "password", "tel", "url", "search", "date", "datetime-local", "month", "week", "time", "color", "file", "checkbox", "radio", "range", "hidden", "button", "submit", "reset", "image"],
-      defaultValue: "text"
-    }
-  },
-  parameters: {
-    layout: "padded"
-  },
-  render: args => {
-    const [value, setValue] = useState(args.value);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "w-full"
-    }, /*#__PURE__*/React.createElement(InputPrimitive, Object.assign({}, args, {
-      value: value,
-      onChange: setValue
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "mt-4 text-center"
-    }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
-  }
-};
-export default meta;
-export const Default = {};
-export const MediumSize = {
-  args: {
-    placeholder: "Custom placeholder",
-    size: "md"
-  }
-};
-export const LargeSize = {
-  args: {
-    placeholder: "Custom placeholder",
-    size: "lg"
-  }
-};
-export const ExtraLargeSize = {
-  args: {
-    placeholder: "Custom placeholder",
-    size: "xl"
-  }
-};
-export const WithStartIcon = {
-  args: {
-    placeholder: "Custom placeholder",
-    startIcon: /*#__PURE__*/React.createElement(Icon, {
-      label: "Bell",
-      icon: /*#__PURE__*/React.createElement(NotificationsIcon, null)
-    })
-  }
-};
-export const WithEndIcon = {
-  args: {
-    placeholder: "Custom placeholder",
-    endIcon: /*#__PURE__*/React.createElement(Icon, {
-      label: "Calendar",
-      icon: /*#__PURE__*/React.createElement(CalendarIcon, null)
-    })
-  }
-};
-export const WithStartAndEndIcons = {
-  args: {
-    placeholder: "Custom placeholder",
-    startIcon: /*#__PURE__*/React.createElement(Icon, {
-      label: "Bell",
-      icon: /*#__PURE__*/React.createElement(NotificationsIcon, null)
-    }),
-    endIcon: /*#__PURE__*/React.createElement(Icon, {
-      label: "Calendar",
-      icon: /*#__PURE__*/React.createElement(CalendarIcon, null)
-    })
-  }
-};
-export const PrimaryVariant = {
-  args: {
-    ...WithStartAndEndIcons.args,
-    variant: "primary",
-    placeholder: "Custom placeholder"
-  }
-};
-export const PrimaryVariantDisabled = {
-  args: {
-    ...PrimaryVariant.args,
-    disabled: true
-  }
-};
-export const PrimaryVariantInvalid = {
-  args: {
-    ...PrimaryVariant.args,
-    invalid: true
-  }
-};
-export const SecondaryVariant = {
-  args: {
-    ...WithStartAndEndIcons.args,
-    variant: "secondary",
-    placeholder: "Custom placeholder"
-  }
-};
-export const SecondaryVariantDisabled = {
-  args: {
-    ...SecondaryVariant.args,
-    disabled: true
-  }
-};
-export const SecondaryVariantInvalid = {
-  args: {
-    ...SecondaryVariant.args,
-    invalid: true
-  }
-};
-export const GhostVariant = {
-  args: {
-    ...WithStartAndEndIcons.args,
-    variant: "ghost",
-    placeholder: "Custom placeholder"
-  }
-};
-export const GhostVariantDisabled = {
-  args: {
-    ...GhostVariant.args,
-    disabled: true
-  }
-};
-export const GhostVariantInvalid = {
-  args: {
-    ...GhostVariant.args,
-    invalid: true
-  }
-};
-export const GhostNegativeVariant = {
-  args: {
-    ...WithStartAndEndIcons.args,
-    variant: "ghost-negative",
-    placeholder: "Custom placeholder"
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-dark text-neutral-light p-xl"
-  }, /*#__PURE__*/React.createElement(Story, null))]
-};
-export const GhostNegativeVariantDisabled = {
-  args: {
-    ...GhostNegativeVariant.args,
-    disabled: true
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-dark text-neutral-light p-xl"
-  }, /*#__PURE__*/React.createElement(Story, null))]
-};
-export const GhostNegativeVariantInvalid = {
-  args: {
-    ...GhostNegativeVariant.args,
-    invalid: true
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-dark text-neutral-light p-xl"
-  }, /*#__PURE__*/React.createElement(Story, null))]
-};
-export const WithForwardEventOnChange = {
-  args: {
-    ...Default.args,
-    forwardEventOnChange: true
-  }
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-dark text-neutral-light p-xl"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
+};
+const GhostNegativeVariantInvalid = {
+    args: {
+        ...GhostNegativeVariant.args,
+        invalid: true
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-dark text-neutral-light p-xl"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
+};
+const WithForwardEventOnChange = {
+    args: {
+        ...Default.args,
+        forwardEventOnChange: true
+    }
 };
+export default InputPrimitive_stories;
+export { Default, ExtraLargeSize, GhostNegativeVariant, GhostNegativeVariantDisabled, GhostNegativeVariantInvalid, GhostVariant, GhostVariantDisabled, GhostVariantInvalid, LargeSize, MediumSize, PrimaryVariant, PrimaryVariantDisabled, PrimaryVariantInvalid, SecondaryVariant, SecondaryVariantDisabled, SecondaryVariantInvalid, WithEndIcon, WithForwardEventOnChange, WithStartAndEndIcons, WithStartIcon };
 
 //# sourceMappingURL=InputPrimitive.stories.js.map

package/Input/InputPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","ReactComponent","NotificationsIcon","CalendarIcon","InputPrimitive","Icon","meta","title","component","argTypes","onChange","action","onEnter","onKeyDown","type","control","options","defaultValue","parameters","layout","render","args","value","setValue","createElement","className","Object","assign","Default","MediumSize","placeholder","size","LargeSize","ExtraLargeSize","WithStartIcon","startIcon","label","icon","WithEndIcon","endIcon","WithStartAndEndIcons","PrimaryVariant","variant","PrimaryVariantDisabled","disabled","PrimaryVariantInvalid","invalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","decorators","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange","forwardEventOnChange"],"sources":["InputPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as NotificationsIcon } from \"@webiny/icons/notifications.svg\";\nimport { ReactComponent as CalendarIcon } from \"@webiny/icons/calendar_month.svg\";\n\nimport { InputPrimitive } from \"./InputPrimitive.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst meta: Meta<typeof InputPrimitive> = {\n    title: \"Components/Form Primitives/Input\",\n    component: InputPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onEnter: { action: \"onEnter\" },\n        onKeyDown: { action: \"onKeyDown\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <InputPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof InputPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />\n    }\n};\n\nexport const WithEndIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const WithStartAndEndIcons: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />,\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"primary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithForwardEventOnChange: Story = {\n    args: {\n        ...Default.args,\n        forwardEventOnChange: true\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input/InputPrimitive.stories.js","sources":["../../src/Input/InputPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as NotificationsIcon } from \"@webiny/icons/notifications.svg\";\nimport { ReactComponent as CalendarIcon } from \"@webiny/icons/calendar_month.svg\";\n\nimport { InputPrimitive } from \"./InputPrimitive.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst meta: Meta<typeof InputPrimitive> = {\n    title: \"Components/Form Primitives/Input\",\n    component: InputPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onEnter: { action: \"onEnter\" },\n        onKeyDown: { action: \"onKeyDown\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <InputPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof InputPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />\n    }\n};\n\nexport const WithEndIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const WithStartAndEndIcons: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />,\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"primary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...WithStartAndEndIcons.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithForwardEventOnChange: Story = {\n    args: {\n        ...Default.args,\n        forwardEventOnChange: true\n    }\n};\n"],"names":["meta","InputPrimitive","args","value","setValue","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithStartIcon","Icon","NotificationsIcon","WithEndIcon","CalendarIcon","WithStartAndEndIcons","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange"],"mappings":"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"}

package/Input/index.js

@@ -1,4 +1,2 @@
 export * from "./Input.js";
 export * from "./InputPrimitive.js";
-
-//# sourceMappingURL=index.js.map

package/Label/Label.js

@@ -1,67 +1,57 @@
-import React from "react";
-import { Label as LabelPrimitive } from "radix-ui";
-import { cn, makeDecoratable, cva } from "../utils.js";
+import react from "react";
+import { Label } from "radix-ui";
+import { cn, cva, makeDecoratable } from "../utils.js";
 import { LabelDescription, LabelHint, LabelRequired, LabelValue } from "./components/index.js";
 import { useAdminUi } from "../AdminUiProvider/index.js";
-const labelVariants = cva(["inline-flex items-center justify-between w-full text-sm", "text-neutral-primary whitespace-nowrap", "peer-disabled:text-neutral-disabled peer-disabled:cursor-not-allowed"], {
-  variants: {
-    weight: {
-      strong: "font-semibold",
-      light: "font-regular"
+const labelVariants = cva([
+    "inline-flex items-center justify-between w-full text-sm",
+    "text-neutral-primary whitespace-nowrap",
+    "peer-disabled:text-neutral-disabled peer-disabled:cursor-not-allowed"
+], {
+    variants: {
+        weight: {
+            strong: "font-semibold",
+            light: "font-regular"
+        },
+        disabled: {
+            true: "text-neutral-disabled cursor-not-allowed"
+        },
+        invalid: {
+            true: "webiny_label-invalid"
+        }
     },
-    disabled: {
-      true: "text-neutral-disabled cursor-not-allowed"
-    },
-    invalid: {
-      true: "webiny_label-invalid"
+    defaultVariants: {
+        weight: "strong"
     }
-  },
-  defaultVariants: {
-    weight: "strong"
-  }
 });
-const LabelBase = ({
-  className,
-  disabled,
-  description,
-  hint,
-  required,
-  value,
-  text,
-  weight,
-  invalid,
-  ...props
-}) => {
-  const {
-    compileMarkdown
-  } = useAdminUi();
-  if (!text) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(LabelPrimitive.Root, Object.assign({
-    className: cn(labelVariants({
-      weight,
-      disabled,
-      invalid
-    }), className)
-  }, props), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
-    className: "flex items-center gap-xxs"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "webiny_label-text"
-  }, text), description && /*#__PURE__*/React.createElement(LabelDescription, {
-    content: compileMarkdown(description),
-    disabled: disabled
-  }), hint && /*#__PURE__*/React.createElement(LabelHint, {
-    content: compileMarkdown(hint)
-  }), required && /*#__PURE__*/React.createElement(LabelRequired, {
-    disabled: disabled
-  }))), value && /*#__PURE__*/React.createElement(LabelValue, {
-    value: value,
-    weight: weight,
-    disabled: disabled
-  }));
+const LabelBase = ({ className, disabled, description, hint, required, value, text, weight, invalid, ...props })=>{
+    const { compileMarkdown } = useAdminUi();
+    if (!text) return null;
+    return /*#__PURE__*/ react.createElement(Label.Root, {
+        className: cn(labelVariants({
+            weight,
+            disabled,
+            invalid
+        }), className),
+        ...props
+    }, /*#__PURE__*/ react.createElement("span", null, /*#__PURE__*/ react.createElement("span", {
+        className: "flex items-center gap-xxs"
+    }, /*#__PURE__*/ react.createElement("span", {
+        className: "webiny_label-text"
+    }, text), description && /*#__PURE__*/ react.createElement(LabelDescription, {
+        content: compileMarkdown(description),
+        disabled: disabled
+    }), hint && /*#__PURE__*/ react.createElement(LabelHint, {
+        content: compileMarkdown(hint)
+    }), required && /*#__PURE__*/ react.createElement(LabelRequired, {
+        disabled: disabled
+    }))), value && /*#__PURE__*/ react.createElement(LabelValue, {
+        value: value,
+        weight: weight,
+        disabled: disabled
+    }));
 };
-const Label = makeDecoratable("Label", LabelBase);
-export { Label };
+const Label_Label = makeDecoratable("Label", LabelBase);
+export { Label_Label as Label };
 
 //# sourceMappingURL=Label.js.map

package/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Label","LabelPrimitive","cn","makeDecoratable","cva","LabelDescription","LabelHint","LabelRequired","LabelValue","useAdminUi","labelVariants","variants","weight","strong","light","disabled","true","invalid","defaultVariants","LabelBase","className","description","hint","required","value","text","props","compileMarkdown","createElement","Root","Object","assign","content"],"sources":["Label.tsx"],"sourcesContent":["import React from \"react\";\nimport { Label as LabelPrimitive } from \"radix-ui\";\nimport { cn, makeDecoratable, cva, type VariantProps } from \"~/utils.js\";\nimport { LabelDescription, LabelHint, LabelRequired, LabelValue } from \"./components/index.js\";\nimport { useAdminUi } from \"~/AdminUiProvider/index.js\";\n\nconst labelVariants = cva(\n    [\n        \"inline-flex items-center justify-between w-full text-sm\",\n        \"text-neutral-primary whitespace-nowrap\",\n        \"peer-disabled:text-neutral-disabled peer-disabled:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            weight: {\n                strong: \"font-semibold\",\n                light: \"font-regular\"\n            },\n            disabled: {\n                true: \"text-neutral-disabled cursor-not-allowed\"\n            },\n            invalid: {\n                true: \"webiny_label-invalid\"\n            }\n        },\n        defaultVariants: {\n            weight: \"strong\"\n        }\n    }\n);\n\ninterface LabelProps\n    extends\n        Omit<React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, \"children\">,\n        VariantProps<typeof labelVariants> {\n    text: React.ReactNode;\n    value?: React.ReactNode;\n    description?: React.ReactNode;\n    hint?: React.ReactNode;\n    required?: boolean;\n    disabled?: boolean;\n}\n\nconst LabelBase = ({\n    className,\n    disabled,\n    description,\n    hint,\n    required,\n    value,\n    text,\n    weight,\n    invalid,\n    ...props\n}: LabelProps) => {\n    const { compileMarkdown } = useAdminUi();\n\n    if (!text) {\n        return null;\n    }\n\n    return (\n        <LabelPrimitive.Root\n            className={cn(labelVariants({ weight, disabled, invalid }), className)}\n            {...props}\n        >\n            <span>\n                <span className={\"flex items-center gap-xxs\"}>\n                    <span className={\"webiny_label-text\"}>{text}</span>\n                    {description && (\n                        <LabelDescription\n                            content={compileMarkdown(description)}\n                            disabled={disabled}\n                        />\n                    )}\n                    {hint && <LabelHint content={compileMarkdown(hint)} />}\n                    {required && <LabelRequired disabled={disabled} />}\n                </span>\n            </span>\n            {value && <LabelValue value={value} weight={weight} disabled={disabled} />}\n        </LabelPrimitive.Root>\n    );\n};\n\nconst Label = makeDecoratable(\"Label\", LabelBase);\n\nexport { Label, type LabelProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,IAAIC,cAAc,QAAQ,UAAU;AAClD,SAASC,EAAE,EAAEC,eAAe,EAAEC,GAAG;AACjC,SAASC,gBAAgB,EAAEC,SAAS,EAAEC,aAAa,EAAEC,UAAU;AAC/D,SAASC,UAAU;AAEnB,MAAMC,aAAa,GAAGN,GAAG,CACrB,CACI,yDAAyD,EACzD,wCAAwC,EACxC,sEAAsE,CACzE,EACD;EACIO,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,MAAM,EAAE,eAAe;MACvBC,KAAK,EAAE;IACX,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV,CAAC;IACDC,OAAO,EAAE;MACLD,IAAI,EAAE;IACV;EACJ,CAAC;EACDE,eAAe,EAAE;IACbN,MAAM,EAAE;EACZ;AACJ,CACJ,CAAC;AAcD,MAAMO,SAAS,GAAGA,CAAC;EACfC,SAAS;EACTL,QAAQ;EACRM,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,KAAK;EACLC,IAAI;EACJb,MAAM;EACNK,OAAO;EACP,GAAGS;AACK,CAAC,KAAK;EACd,MAAM;IAAEC;EAAgB,CAAC,GAAGlB,UAAU,CAAC,CAAC;EAExC,IAAI,CAACgB,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACI1B,KAAA,CAAA6B,aAAA,CAAC3B,cAAc,CAAC4B,IAAI,EAAAC,MAAA,CAAAC,MAAA;IAChBX,SAAS,EAAElB,EAAE,CAACQ,aAAa,CAAC;MAAEE,MAAM;MAAEG,QAAQ;MAAEE;IAAQ,CAAC,CAAC,EAAEG,SAAS;EAAE,GACnEM,KAAK,gBAET3B,KAAA,CAAA6B,aAAA,4BACI7B,KAAA,CAAA6B,aAAA;IAAMR,SAAS,EAAE;EAA4B,gBACzCrB,KAAA,CAAA6B,aAAA;IAAMR,SAAS,EAAE;EAAoB,GAAEK,IAAW,CAAC,EAClDJ,WAAW,iBACRtB,KAAA,CAAA6B,aAAA,CAACvB,gBAAgB;IACb2B,OAAO,EAAEL,eAAe,CAACN,WAAW,CAAE;IACtCN,QAAQ,EAAEA;EAAS,CACtB,CACJ,EACAO,IAAI,iBAAIvB,KAAA,CAAA6B,aAAA,CAACtB,SAAS;IAAC0B,OAAO,EAAEL,eAAe,CAACL,IAAI;EAAE,CAAE,CAAC,EACrDC,QAAQ,iBAAIxB,KAAA,CAAA6B,aAAA,CAACrB,aAAa;IAACQ,QAAQ,EAAEA;EAAS,CAAE,CAC/C,CACJ,CAAC,EACNS,KAAK,iBAAIzB,KAAA,CAAA6B,aAAA,CAACpB,UAAU;IAACgB,KAAK,EAAEA,KAAM;IAACZ,MAAM,EAAEA,MAAO;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACxD,CAAC;AAE9B,CAAC;AAED,MAAMf,KAAK,GAAGG,eAAe,CAAC,OAAO,EAAEgB,SAAS,CAAC;AAEjD,SAASnB,KAAK","ignoreList":[]}
+{"version":3,"file":"Label/Label.js","sources":["../../src/Label/Label.tsx"],"sourcesContent":["import React from \"react\";\nimport { Label as LabelPrimitive } from \"radix-ui\";\nimport { cn, makeDecoratable, cva, type VariantProps } from \"~/utils.js\";\nimport { LabelDescription, LabelHint, LabelRequired, LabelValue } from \"./components/index.js\";\nimport { useAdminUi } from \"~/AdminUiProvider/index.js\";\n\nconst labelVariants = cva(\n    [\n        \"inline-flex items-center justify-between w-full text-sm\",\n        \"text-neutral-primary whitespace-nowrap\",\n        \"peer-disabled:text-neutral-disabled peer-disabled:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            weight: {\n                strong: \"font-semibold\",\n                light: \"font-regular\"\n            },\n            disabled: {\n                true: \"text-neutral-disabled cursor-not-allowed\"\n            },\n            invalid: {\n                true: \"webiny_label-invalid\"\n            }\n        },\n        defaultVariants: {\n            weight: \"strong\"\n        }\n    }\n);\n\ninterface LabelProps\n    extends\n        Omit<React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, \"children\">,\n        VariantProps<typeof labelVariants> {\n    text: React.ReactNode;\n    value?: React.ReactNode;\n    description?: React.ReactNode;\n    hint?: React.ReactNode;\n    required?: boolean;\n    disabled?: boolean;\n}\n\nconst LabelBase = ({\n    className,\n    disabled,\n    description,\n    hint,\n    required,\n    value,\n    text,\n    weight,\n    invalid,\n    ...props\n}: LabelProps) => {\n    const { compileMarkdown } = useAdminUi();\n\n    if (!text) {\n        return null;\n    }\n\n    return (\n        <LabelPrimitive.Root\n            className={cn(labelVariants({ weight, disabled, invalid }), className)}\n            {...props}\n        >\n            <span>\n                <span className={\"flex items-center gap-xxs\"}>\n                    <span className={\"webiny_label-text\"}>{text}</span>\n                    {description && (\n                        <LabelDescription\n                            content={compileMarkdown(description)}\n                            disabled={disabled}\n                        />\n                    )}\n                    {hint && <LabelHint content={compileMarkdown(hint)} />}\n                    {required && <LabelRequired disabled={disabled} />}\n                </span>\n            </span>\n            {value && <LabelValue value={value} weight={weight} disabled={disabled} />}\n        </LabelPrimitive.Root>\n    );\n};\n\nconst Label = makeDecoratable(\"Label\", LabelBase);\n\nexport { Label, type LabelProps };\n"],"names":["labelVariants","cva","LabelBase","className","disabled","description","hint","required","value","text","weight","invalid","props","compileMarkdown","useAdminUi","LabelPrimitive","cn","LabelDescription","LabelHint","LabelRequired","LabelValue","Label","makeDecoratable"],"mappings":";;;;;AAMA,MAAMA,gBAAgBC,IAClB;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,QAAQ;YACJ,QAAQ;YACR,OAAO;QACX;QACA,UAAU;YACN,MAAM;QACV;QACA,SAAS;YACL,MAAM;QACV;IACJ;IACA,iBAAiB;QACb,QAAQ;IACZ;AACJ;AAeJ,MAAMC,YAAY,CAAC,EACfC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,IAAI,EACJC,QAAQ,EACRC,KAAK,EACLC,IAAI,EACJC,MAAM,EACNC,OAAO,EACP,GAAGC,OACM;IACT,MAAM,EAAEC,eAAe,EAAE,GAAGC;IAE5B,IAAI,CAACL,MACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACM,MAAAA,IAAmB;QAChB,WAAWC,GAAGhB,cAAc;YAAEU;YAAQN;YAAUO;QAAQ,IAAIR;QAC3D,GAAGS,KAAK;qBAET,oBAAC,4BACG,oBAAC;QAAK,WAAW;qBACb,oBAAC;QAAK,WAAW;OAAsBH,OACtCJ,eAAe,WAAfA,GACG,oBAACY,kBAAgBA;QACb,SAASJ,gBAAgBR;QACzB,UAAUD;QAGjBE,QAAQ,WAARA,GAAQ,oBAACY,WAASA;QAAC,SAASL,gBAAgBP;QAC5CC,YAAY,WAAZA,GAAY,oBAACY,eAAaA;QAAC,UAAUf;UAG7CI,SAAS,WAATA,GAAS,oBAACY,YAAUA;QAAC,OAAOZ;QAAO,QAAQE;QAAQ,UAAUN;;AAG1E;AAEA,MAAMiB,cAAQC,gBAAgB,SAASpB"}