@webiny/admin-ui 6.0.0-alpha.4 → 6.0.0-rc.0

package/Button/IconButton.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","AddIcon","IconButton","meta","title","component","tags","argTypes","variant","description","control","options","defaultValue","size","iconSize","disabled","icon","onClick","action","Primary","args","createElement","Secondary","Tertiary","Ghost","GhostNegative","decorators","Story","className","DoubleExtraSmall","ExtraSmall","Small","SmallWithLargeIcon","Medium","MediumWithLargeIcon","Large","LargeWithLargeIcon","ExtraLarge","WithAsChild","asChild","Documentation"],"sources":["IconButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { IconButton } from \"./IconButton\";\n\nconst meta: Meta<typeof IconButton> = {\n    title: \"Components/Icon Button\",\n    component: IconButton,\n    tags: [\"!autodocs\"],\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        iconSize: {\n            description: \"Icon Size\",\n            control: \"select\",\n            options: [\"default\", \"lg\"],\n            defaultValue: \"default\"\n        },\n        disabled: {\n            description: \"State\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the example above for usage information.\",\n            control: \"none\"\n        },\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof IconButton>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        icon: <AddIcon />\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const DoubleExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xxs\"\n    }\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const SmallWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const MediumWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const LargeWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        icon: (\n            <span>\n                <AddIcon />\n            </span>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        size: \"md\",\n        disabled: false,\n        icon: <AddIcon />,\n        iconSize: \"default\"\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","AddIcon","IconButton","meta","title","component","tags","argTypes","variant","description","control","options","defaultValue","size","iconSize","disabled","icon","onClick","action","Primary","args","createElement","Secondary","Tertiary","Ghost","GhostNegative","decorators","Story","className","DoubleExtraSmall","ExtraSmall","Small","SmallWithLargeIcon","Medium","MediumWithLargeIcon","Large","LargeWithLargeIcon","ExtraLarge","WithAsChild","asChild","Documentation"],"sources":["IconButton.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { IconButton } from \"./IconButton.js\";\n\nconst meta: Meta<typeof IconButton> = {\n    title: \"Components/Icon Button\",\n    component: IconButton,\n    tags: [\"!autodocs\"],\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        iconSize: {\n            description: \"Icon Size\",\n            control: \"select\",\n            options: [\"default\", \"lg\"],\n            defaultValue: \"default\"\n        },\n        disabled: {\n            description: \"State\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the example above for usage information.\"\n        },\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof IconButton>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        icon: <AddIcon />\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const DoubleExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xxs\"\n    }\n};\n\nexport const ExtraSmall: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xs\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const SmallWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const MediumWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const LargeWithLargeIcon: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\",\n        iconSize: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        icon: (\n            <span>\n                <AddIcon />\n            </span>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        size: \"md\",\n        disabled: false,\n        icon: <AddIcon />,\n        iconSize: \"default\"\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Button/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./Button";
-export * from "./CopyButton";
-export * from "./IconButton";
+export * from "./Button.js";
+export * from "./CopyButton.js";
+export * from "./IconButton.js";

package/Button/index.js

@@ -1,5 +1,5 @@
-export * from "./Button";
-export * from "./CopyButton";
-export * from "./IconButton";
+export * from "./Button.js";
+export * from "./CopyButton.js";
+export * from "./IconButton.js";
 
 //# sourceMappingURL=index.js.map

package/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Button\";\nexport * from \"./CopyButton\";\nexport * from \"./IconButton\";\n"],"mappings":"AAAA;AACA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Button.js\";\nexport * from \"./CopyButton.js\";\nexport * from \"./IconButton.js\";\n"],"mappings":"AAAA;AACA;AACA","ignoreList":[]}

package/Card/Card.d.ts

@@ -1,30 +1,114 @@
-import React from "react";
-import { type VariantProps } from "../utils";
-import type { cardRootVariants } from "./components";
-import { type CardRootProps } from "./components";
-interface CardProps extends CardRootProps, VariantProps<typeof cardRootVariants> {
+import * as React from "react";
+import { CardContent } from "./components/CardContent.js";
+interface CardProps extends Omit<React.ComponentPropsWithoutRef<typeof CardContent>, "title"> {
     title?: React.ReactNode;
+    icon?: React.ReactElement;
     description?: React.ReactNode;
+    padding?: "sm" | "md" | "lg";
+    bodyPadding?: boolean;
+    variant?: "default" | "accent";
+    elevation?: "none" | "small" | "medium" | "large";
+    size?: "sm" | "md";
+    cornerSize?: "md" | "lg";
     actions?: React.ReactNode;
-    options?: React.ReactNode;
+    actionsPosition?: "header" | "footer";
+    actionsSize?: "sm" | "md";
+    info?: React.ReactNode;
+    children: React.ReactNode;
 }
-declare const Card: ((props: CardProps) => React.JSX.Element) & {
-    original: (props: CardProps) => React.JSX.Element;
+declare const Card: {
+    (props: CardProps): React.JSX.Element;
+    displayName: string;
+} & {
+    original: {
+        (props: CardProps): React.JSX.Element;
+        displayName: string;
+    };
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: CardProps) => React.JSX.Element) & {
-        original: (props: CardProps) => React.JSX.Element;
+    original: {
+        (props: CardProps): React.JSX.Element;
+        displayName: string;
+    } & {
+        original: {
+            (props: CardProps): React.JSX.Element;
+            displayName: string;
+        };
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: CardProps) => React.JSX.Element) & {
-        original: (props: CardProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<{
+        (props: CardProps): React.JSX.Element;
+        displayName: string;
+    } & {
+        original: {
+            (props: CardProps): React.JSX.Element;
+            displayName: string;
+        };
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
+} & {
+    ConfirmAction: ((props: import("../index.js").ButtonProps) => React.JSX.Element) & {
+        original: (props: import("../index.js").ButtonProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("../index.js").ButtonProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").ButtonProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("../index.js").ButtonProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").ButtonProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+    CancelAction: ((props: import("../index.js").ButtonProps) => React.JSX.Element) & {
+        original: (props: import("../index.js").ButtonProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("../index.js").ButtonProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").ButtonProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("../index.js").ButtonProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").ButtonProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
+    Icon: ((props: import("../index.js").IconProps) => React.JSX.Element) & {
+        original: (props: import("../index.js").IconProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    } & {
+        original: ((props: import("../index.js").IconProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").IconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        };
+        originalName: string;
+        displayName: string;
+    } & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("../index.js").IconProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").IconProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        }>) => (props: unknown) => React.JSX.Element;
+    };
 };
 export { Card, type CardProps };

package/Card/Card.js

@@ -1,24 +1,25 @@
-import React from "react";
-import { makeDecoratable } from "../utils";
-import { CardFooter, CardHeader, CardRoot } from "./components";
+import * as React from "react";
+import { makeDecoratable, withStaticProps } from "../utils.js";
+import { CardContent } from "./components/CardContent.js";
+import { CardHeader } from "./components/CardHeader.js";
+import { CardBody } from "./components/CardBody.js";
+import { CardFooter } from "./components/CardFooter.js";
+import { Icon } from "./components/Icon.js";
+import { ConfirmAction } from "./components/ConfirmAction.js";
+import { CancelAction } from "./components/CancelAction.js";
+import { CardPropsProvider } from "./components/CardPropsProvider.js";
 const CardBase = props => {
-  const {
-    title,
-    description,
-    actions,
-    children,
-    options,
-    ...rest
-  } = props;
-  return /*#__PURE__*/React.createElement(CardRoot, rest, /*#__PURE__*/React.createElement(CardHeader, {
-    title: title,
-    description: description,
-    options: options
-  }), children, /*#__PURE__*/React.createElement(CardFooter, {
-    actions: actions
-  }));
+  return /*#__PURE__*/React.createElement(CardPropsProvider, {
+    props: props
+  }, /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(CardHeader, null), /*#__PURE__*/React.createElement(CardBody, null), /*#__PURE__*/React.createElement(CardFooter, null)));
 };
-const Card = makeDecoratable("Card", CardBase);
+CardBase.displayName = "Card";
+const DecoratableCard = makeDecoratable("Card", CardBase);
+const Card = withStaticProps(DecoratableCard, {
+  ConfirmAction,
+  CancelAction,
+  Icon
+});
 export { Card };
 
 //# sourceMappingURL=Card.js.map

package/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","CardFooter","CardHeader","CardRoot","CardBase","props","title","description","actions","children","options","rest","createElement","Card"],"sources":["Card.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, type VariantProps } from \"~/utils\";\nimport type { cardRootVariants } from \"./components\";\nimport { CardFooter, CardHeader, CardRoot, type CardRootProps } from \"./components\";\n\ninterface CardProps extends CardRootProps, VariantProps<typeof cardRootVariants> {\n    title?: React.ReactNode;\n    description?: React.ReactNode;\n    actions?: React.ReactNode;\n    options?: React.ReactNode;\n}\n\nconst CardBase = (props: CardProps) => {\n    const { title, description, actions, children, options, ...rest } = props;\n\n    return (\n        <CardRoot {...rest}>\n            <CardHeader title={title} description={description} options={options} />\n            {children}\n            <CardFooter actions={actions} />\n        </CardRoot>\n    );\n};\n\nconst Card = makeDecoratable(\"Card\", CardBase);\n\nexport { Card, type CardProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AAExB,SAASC,UAAU,EAAEC,UAAU,EAAEC,QAAQ;AASzC,MAAMC,QAAQ,GAAIC,KAAgB,IAAK;EACnC,MAAM;IAAEC,KAAK;IAAEC,WAAW;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,OAAO;IAAE,GAAGC;EAAK,CAAC,GAAGN,KAAK;EAEzE,oBACIN,KAAA,CAAAa,aAAA,CAACT,QAAQ,EAAKQ,IAAI,eACdZ,KAAA,CAAAa,aAAA,CAACV,UAAU;IAACI,KAAK,EAAEA,KAAM;IAACC,WAAW,EAAEA,WAAY;IAACG,OAAO,EAAEA;EAAQ,CAAE,CAAC,EACvED,QAAQ,eACTV,KAAA,CAAAa,aAAA,CAACX,UAAU;IAACO,OAAO,EAAEA;EAAQ,CAAE,CACzB,CAAC;AAEnB,CAAC;AAED,MAAMK,IAAI,GAAGb,eAAe,CAAC,MAAM,EAAEI,QAAQ,CAAC;AAE9C,SAASS,IAAI","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","withStaticProps","CardContent","CardHeader","CardBody","CardFooter","Icon","ConfirmAction","CancelAction","CardPropsProvider","CardBase","props","createElement","displayName","DecoratableCard","Card"],"sources":["Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { CardContent } from \"./components/CardContent.js\";\nimport { CardHeader } from \"~/Card/components/CardHeader.js\";\nimport { CardBody } from \"~/Card/components/CardBody.js\";\nimport { CardFooter } from \"~/Card/components/CardFooter.js\";\nimport { Icon } from \"./components/Icon.js\";\nimport { ConfirmAction } from \"./components/ConfirmAction.js\";\nimport { CancelAction } from \"./components/CancelAction.js\";\nimport { CardPropsProvider } from \"~/Card/components/CardPropsProvider.js\";\n\ninterface CardProps extends Omit<React.ComponentPropsWithoutRef<typeof CardContent>, \"title\"> {\n    title?: React.ReactNode;\n    icon?: React.ReactElement;\n    description?: React.ReactNode;\n    padding?: \"sm\" | \"md\" | \"lg\";\n    bodyPadding?: boolean;\n    variant?: \"default\" | \"accent\";\n    elevation?: \"none\" | \"small\" | \"medium\" | \"large\";\n    size?: \"sm\" | \"md\";\n    cornerSize?: \"md\" | \"lg\";\n    actions?: React.ReactNode;\n    actionsPosition?: \"header\" | \"footer\";\n    actionsSize?: \"sm\" | \"md\";\n    info?: React.ReactNode;\n    children: React.ReactNode;\n}\n\nconst CardBase = (props: CardProps) => {\n    return (\n        <CardPropsProvider props={props}>\n            <CardContent>\n                <CardHeader />\n                <CardBody />\n                <CardFooter />\n            </CardContent>\n        </CardPropsProvider>\n    );\n};\n\nCardBase.displayName = \"Card\";\n\nconst DecoratableCard = makeDecoratable(\"Card\", CardBase);\n\nconst Card = withStaticProps(DecoratableCard, {\n    ConfirmAction,\n    CancelAction,\n    Icon\n});\n\nexport { Card, type CardProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe;AACzC,SAASC,WAAW;AACpB,SAASC,UAAU;AACnB,SAASC,QAAQ;AACjB,SAASC,UAAU;AACnB,SAASC,IAAI;AACb,SAASC,aAAa;AACtB,SAASC,YAAY;AACrB,SAASC,iBAAiB;AAmB1B,MAAMC,QAAQ,GAAIC,KAAgB,IAAK;EACnC,oBACIZ,KAAA,CAAAa,aAAA,CAACH,iBAAiB;IAACE,KAAK,EAAEA;EAAM,gBAC5BZ,KAAA,CAAAa,aAAA,CAACV,WAAW,qBACRH,KAAA,CAAAa,aAAA,CAACT,UAAU,MAAE,CAAC,eACdJ,KAAA,CAAAa,aAAA,CAACR,QAAQ,MAAE,CAAC,eACZL,KAAA,CAAAa,aAAA,CAACP,UAAU,MAAE,CACJ,CACE,CAAC;AAE5B,CAAC;AAEDK,QAAQ,CAACG,WAAW,GAAG,MAAM;AAE7B,MAAMC,eAAe,GAAGd,eAAe,CAAC,MAAM,EAAEU,QAAQ,CAAC;AAEzD,MAAMK,IAAI,GAAGd,eAAe,CAACa,eAAe,EAAE;EAC1CP,aAAa;EACbC,YAAY;EACZF;AACJ,CAAC,CAAC;AAEF,SAASS,IAAI","ignoreList":[]}

package/Card/Card.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as CardStories from './Card.stories';
+import * as CardStories from "./Card.stories";
 
 <Meta of={CardStories} />
 
@@ -16,112 +16,113 @@ import { Card, Button, IconButton, Icon } from '@webiny/admin-ui';
 import { ReactComponent as MoreVertical } from "@webiny/icons/more_vert.svg";
 
 const CardExample = () => {
-    return (
-        <Card
-            title="Card title"
-            description="Card description"
-            padding="standard"
-            elevation="sm"
-            borderRadius="md"
-            actions={
-                <>
-                    <Button variant="secondary" text="Cancel" />
-                    <Button variant="primary" text="Confirm" />
-                </>
-            }
-            options={
-                <IconButton
-                    variant={"ghost"}
-                    icon={<Icon icon={<MoreVertical />} label={"More options"} />}
-                    size={"sm"}
-                    iconSize={"lg"}
-                    onClick={() => alert("Custom action button clicked.")}
-                />
-            }
-        >
-            This is card content. Anything can go in here.
-        </Card>
-    );
-};
-
-export default CardExample;
+return (
+
+<Card
+  title="Card title"
+  description="Card description"
+  padding="standard"
+  elevation="sm"
+  borderRadius="md"
+  actions={
+    <>
+      <Button variant="secondary" text="Cancel" />
+      <Button variant="primary" text="Confirm" />
+    </>
+  }
+  options={
+    <IconButton
+      variant={"ghost"}
+      icon={<Icon icon={<MoreVertical />} label={"More options"} />}
+      size={"sm"}
+      iconSize={"lg"}
+      onClick={() => alert("Custom action button clicked.")}
+    />
+  }
+>
+  This is card content. Anything can go in here.
+</Card>
+); };
+
+    export default CardExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Card/Card.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Card/Card.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={CardStories.Documentation} />
 
 ```tsx
-import React from 'react';
-import { Card, Button, IconButton, Icon } from '@webiny/admin-ui';
+import React from "react";
+import { Card, Button, IconButton, Icon } from "@webiny/admin-ui";
 import { ReactComponent as MoreVertical } from "@webiny/icons/more_vert.svg";
 
 const CardExample = () => {
-    return (
-        <Card
-            title="Card title"
-            description="Card description"
-            padding="standard"
-            elevation="sm"
-            borderRadius="md"
-            actions={
-                <>
-                    <Button variant="secondary" text="Cancel" />
-                    <Button variant="primary" text="Confirm" />
-                </>
-            }
-            options={
-                <IconButton
-                    variant={"ghost"}
-                    icon={<Icon icon={<MoreVertical />} label={"More options"} />}
-                    size={"sm"}
-                    iconSize={"lg"}
-                    onClick={() => alert("Custom action button clicked.")}
-                />
-            }
-        >
-            This is card content. Anything can go in here.
-        </Card>
-    );
+  return (
+    <Card
+      title="Card title"
+      description="Card description"
+      padding="standard"
+      elevation="sm"
+      borderRadius="md"
+      actions={
+        <>
+          <Button variant="secondary" text="Cancel" />
+          <Button variant="primary" text="Confirm" />
+        </>
+      }
+      options={
+        <IconButton
+          variant={"ghost"}
+          icon={<Icon icon={<MoreVertical />} label={"More options"} />}
+          size={"sm"}
+          iconSize={"lg"}
+          onClick={() => alert("Custom action button clicked.")}
+        />
+      }
+    >
+      This is card content. Anything can go in here.
+    </Card>
+  );
 };
 
 export default CardExample;
 ```
 
-
 ## Anatomy
 
 ### Construction
+
 Depending on the content type and card usage, there are several elevation options available.
 
-<img src="/images/storybook/card/construction.png" alt="Construction"/>
+<img src="/images/storybook/card/construction.png" alt="Construction" />
 
 ### Elevation
 
-<img src="/images/storybook/card/elevation.png" alt="Elevation"/>
+<img src="/images/storybook/card/elevation.png" alt="Elevation" />
 
 ### Radius
+
 Depending on the content type and card usage, there are three basic paddings options to consider. Border radius can vary from 4px - 12px
 
-<img src="/images/storybook/card/radius.png" alt="Radius"/>
+<img src="/images/storybook/card/radius.png" alt="Radius" />
 
 ### Padding
 
-<img src="/images/storybook/card/padding.png" alt="Padding"/>
+<img src="/images/storybook/card/padding.png" alt="Padding" />
 
 ## Usage
 
 ### Stacked
 
-<img src="/images/storybook/card/stacked.png" alt="Stacked"/>
+<img src="/images/storybook/card/stacked.png" alt="Stacked" />

package/Card/Card.stories.d.ts

@@ -1,14 +1,22 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Card } from "./Card";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { Card } from "./Card.js";
 declare const meta: Meta<typeof Card>;
 export default meta;
 type Story = StoryObj<typeof Card>;
 export declare const Default: Story;
-export declare const NoTitleDescriptionActionsHeaderAndFooter: Story;
-export declare const WithMorePadding: Story;
-export declare const WithMoreElevation: Story;
-export declare const NoElevation: Story;
-export declare const NoBorderRadius: Story;
-export declare const WithOptions: Story;
+export declare const SmallSize: Story;
+export declare const PaddingSmall: Story;
+export declare const PaddingMedium: Story;
+export declare const PaddingLarge: Story;
 export declare const WithActions: Story;
+export declare const WithHeaderActions: Story;
+export declare const WithSmallHeaderActions: Story;
+export declare const WithLargeCorners: Story;
+export declare const AccentVariant: Story;
+export declare const DropdownMenuInCard: Story;
+export declare const WithSmallElevation: Story;
+export declare const WithMediumElevation: Story;
+export declare const WithLargeElevation: Story;
+export declare const WithIcon: Story;
+export declare const WithTabs: Story;
 export declare const Documentation: Story;