@webiny/admin-ui 6.2.0 → 6.3.0-beta.1

package/Heading/Heading.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as HeadingStories from './Heading.stories';
+import * as HeadingStories from "./Heading.stories";
 
 <Meta of={HeadingStories} />
 
@@ -15,23 +15,23 @@ import React from "react";
 import { Heading } from "@webiny/admin-ui";
 
 const HeadingExample = () => {
-    return <Heading level={1}>This is a heading</Heading>;
+return <Heading level={1}>This is a heading</Heading>;
 };
 
 export default HeadingExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Heading/Heading.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/Heading/Heading.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={HeadingStories.Documentation} />
@@ -41,7 +41,7 @@ import React from "react";
 import { Heading } from "@webiny/admin-ui";
 
 const HeadingExample = () => {
-    return <Heading level={1}>This is a heading</Heading>;
+  return <Heading level={1}>This is a heading</Heading>;
 };
 
 export default HeadingExample;
@@ -58,17 +58,17 @@ import React from "react";
 import { Heading } from "@webiny/admin-ui";
 
 const Heading1Example = () => {
-    return (
-        <Heading level={1}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
-        </Heading>
-    );
-};
+return (
+
+<Heading level={1}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
+  rhoncus.
+</Heading>
+); };
 
 export default Heading1Example;
 ` } } />
 
-
 ### Heading Level 2
 
 Used for major section headings.
@@ -78,12 +78,13 @@ import React from "react";
 import { Heading } from "@webiny/admin-ui";
 
 const Heading2Example = () => {
-    return (
-        <Heading level={2}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
-        </Heading>
-    );
-};
+return (
+
+<Heading level={2}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
+  rhoncus.
+</Heading>
+); };
 
 export default Heading2Example;
 ` } } />
@@ -97,12 +98,13 @@ import React from "react";
 import { Heading } from "@webiny/admin-ui";
 
 const Heading3Example = () => {
-    return (
-        <Heading level={3}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
-        </Heading>
-    );
-};
+return (
+
+<Heading level={3}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
+  rhoncus.
+</Heading>
+); };
 
 export default Heading3Example;
 ` } } />
@@ -116,12 +118,13 @@ import React from "react";
 import { Heading } from "@webiny/admin-ui";
 
 const Heading4Example = () => {
-    return (
-        <Heading level={4}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
-        </Heading>
-    );
-};
+return (
+
+<Heading level={4}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
+  rhoncus.
+</Heading>
+); };
 
 export default Heading4Example;
 ` } } />
@@ -135,12 +138,13 @@ import React from "react";
 import { Heading } from "@webiny/admin-ui";
 
 const Heading5Example = () => {
-    return (
-        <Heading level={5}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
-        </Heading>
-    );
-};
+return (
+
+<Heading level={5}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
+  rhoncus.
+</Heading>
+); };
 
 export default Heading5Example;
 ` } } />
@@ -154,12 +158,13 @@ import React from "react";
 import { Heading } from "@webiny/admin-ui";
 
 const Heading6Example = () => {
-    return (
-        <Heading level={6}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
-        </Heading>
-    );
-};
+return (
+
+<Heading level={6}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
+  rhoncus.
+</Heading>
+); };
 
 export default Heading6Example;
 ` } } />
@@ -173,12 +178,12 @@ import React from "react";
 import { Heading } from "@webiny/admin-ui";
 
 const AsExample = () => {
-    return (
-        <Heading level={2} as="h1">
-            This is visually a Heading level 2, but semantically an h1
-        </Heading>
-    );
-};
+return (
+
+<Heading level={2} as="h1">
+  This is visually a Heading level 2, but semantically an h1
+</Heading>
+); };
 
 export default AsExample;
 ` } } />

package/Icon/Icon.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "../utils.js";
 declare const iconVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xs" | null | undefined;
     color?: "accent" | "inherit" | "neutral-light" | "neutral-strong" | "neutral-strong-transparent" | "neutral-base" | "neutral-negative" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface IconProps extends Omit<React.HTMLAttributes<HTMLOrSVGElement>, "color">, VariantProps<typeof iconVariants> {
     label: string;
     icon: React.ReactNode;

package/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","AccessibleIcon","cn","cva","makeDecoratable","iconVariants","variants","size","xs","sm","md","lg","color","inherit","accent","defaultVariants","IconBase","props","label","icon","className","rest","createElement","Root","cloneElement","Icon"],"sources":["Icon.tsx"],"sourcesContent":["import React from \"react\";\nimport { AccessibleIcon } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst iconVariants = cva(\"shrink-0\", {\n    variants: {\n        size: {\n            xs: \"size-sm-extra\",\n            sm: \"size-md\",\n            md: \"size-md-plus\",\n            lg: \"size-lg\"\n        },\n        color: {\n            inherit: \"fill-inherit text-inherit\",\n            accent: \"fill-accent-default text-accent-default\",\n            \"neutral-light\": \"fill-neutral-strong text-neutral-strong\",\n            \"neutral-strong\": \"fill-neutral-xstrong text-neutral-xstrong\",\n            \"neutral-strong-transparent\": \"fill-neutral-xstrong/30 text-neutral-xstrong/30\",\n            \"neutral-base\": \"fill-neutral-base text-neutral-base\",\n            \"neutral-negative\": \"fill-neutral-base/50 text-neutral-base/50\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\",\n        color: \"inherit\"\n    }\n});\n\ninterface IconProps\n    extends Omit<React.HTMLAttributes<HTMLOrSVGElement>, \"color\">,\n        VariantProps<typeof iconVariants> {\n    label: string;\n    icon: React.ReactNode;\n}\n\nconst IconBase = (props: IconProps) => {\n    const { label, icon, color, size, className, ...rest } = props;\n    return (\n        <AccessibleIcon.Root label={label}>\n            {/* @ts-expect-error */}\n            {React.cloneElement(icon, {\n                ...rest,\n                className: cn(iconVariants({ color, size }), className)\n            })}\n        </AccessibleIcon.Root>\n    );\n};\n\nconst Icon = makeDecoratable(\"Icon\", IconBase);\n\nexport { Icon, type IconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe;AAEjC,MAAMC,YAAY,GAAGF,GAAG,CAAC,UAAU,EAAE;EACjCG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,eAAe;MACnBC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,cAAc;MAClBC,EAAE,EAAE;IACR,CAAC;IACDC,KAAK,EAAE;MACHC,OAAO,EAAE,2BAA2B;MACpCC,MAAM,EAAE,yCAAyC;MACjD,eAAe,EAAE,yCAAyC;MAC1D,gBAAgB,EAAE,2CAA2C;MAC7D,4BAA4B,EAAE,iDAAiD;MAC/E,cAAc,EAAE,qCAAqC;MACrD,kBAAkB,EAAE;IACxB;EACJ,CAAC;EACDC,eAAe,EAAE;IACbR,IAAI,EAAE,IAAI;IACVK,KAAK,EAAE;EACX;AACJ,CAAC,CAAC;AASF,MAAMI,QAAQ,GAAIC,KAAgB,IAAK;EACnC,MAAM;IAAEC,KAAK;IAAEC,IAAI;IAAEP,KAAK;IAAEL,IAAI;IAAEa,SAAS;IAAE,GAAGC;EAAK,CAAC,GAAGJ,KAAK;EAC9D,oBACIjB,KAAA,CAAAsB,aAAA,CAACrB,cAAc,CAACsB,IAAI;IAACL,KAAK,EAAEA;EAAM,gBAE7BlB,KAAK,CAACwB,YAAY,CAACL,IAAI,EAAE;IACtB,GAAGE,IAAI;IACPD,SAAS,EAAElB,EAAE,CAACG,YAAY,CAAC;MAAEO,KAAK;MAAEL;IAAK,CAAC,CAAC,EAAEa,SAAS;EAC1D,CAAC,CACgB,CAAC;AAE9B,CAAC;AAED,MAAMK,IAAI,GAAGrB,eAAe,CAAC,MAAM,EAAEY,QAAQ,CAAC;AAE9C,SAASS,IAAI","ignoreList":[]}
+{"version":3,"names":["React","AccessibleIcon","cn","cva","makeDecoratable","iconVariants","variants","size","xs","sm","md","lg","color","inherit","accent","defaultVariants","IconBase","props","label","icon","className","rest","createElement","Root","cloneElement","Icon"],"sources":["Icon.tsx"],"sourcesContent":["import React from \"react\";\nimport { AccessibleIcon } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst iconVariants = cva(\"shrink-0\", {\n    variants: {\n        size: {\n            xs: \"size-sm-extra\",\n            sm: \"size-md\",\n            md: \"size-md-plus\",\n            lg: \"size-lg\"\n        },\n        color: {\n            inherit: \"fill-inherit text-inherit\",\n            accent: \"fill-accent-default text-accent-default\",\n            \"neutral-light\": \"fill-neutral-strong text-neutral-strong\",\n            \"neutral-strong\": \"fill-neutral-xstrong text-neutral-xstrong\",\n            \"neutral-strong-transparent\": \"fill-neutral-xstrong/30 text-neutral-xstrong/30\",\n            \"neutral-base\": \"fill-neutral-base text-neutral-base\",\n            \"neutral-negative\": \"fill-neutral-base/50 text-neutral-base/50\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\",\n        color: \"inherit\"\n    }\n});\n\ninterface IconProps\n    extends\n        Omit<React.HTMLAttributes<HTMLOrSVGElement>, \"color\">,\n        VariantProps<typeof iconVariants> {\n    label: string;\n    icon: React.ReactNode;\n}\n\nconst IconBase = (props: IconProps) => {\n    const { label, icon, color, size, className, ...rest } = props;\n    return (\n        <AccessibleIcon.Root label={label}>\n            {/* @ts-expect-error */}\n            {React.cloneElement(icon, {\n                ...rest,\n                className: cn(iconVariants({ color, size }), className)\n            })}\n        </AccessibleIcon.Root>\n    );\n};\n\nconst Icon = makeDecoratable(\"Icon\", IconBase);\n\nexport { Icon, type IconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe;AAEjC,MAAMC,YAAY,GAAGF,GAAG,CAAC,UAAU,EAAE;EACjCG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,eAAe;MACnBC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,cAAc;MAClBC,EAAE,EAAE;IACR,CAAC;IACDC,KAAK,EAAE;MACHC,OAAO,EAAE,2BAA2B;MACpCC,MAAM,EAAE,yCAAyC;MACjD,eAAe,EAAE,yCAAyC;MAC1D,gBAAgB,EAAE,2CAA2C;MAC7D,4BAA4B,EAAE,iDAAiD;MAC/E,cAAc,EAAE,qCAAqC;MACrD,kBAAkB,EAAE;IACxB;EACJ,CAAC;EACDC,eAAe,EAAE;IACbR,IAAI,EAAE,IAAI;IACVK,KAAK,EAAE;EACX;AACJ,CAAC,CAAC;AAUF,MAAMI,QAAQ,GAAIC,KAAgB,IAAK;EACnC,MAAM;IAAEC,KAAK;IAAEC,IAAI;IAAEP,KAAK;IAAEL,IAAI;IAAEa,SAAS;IAAE,GAAGC;EAAK,CAAC,GAAGJ,KAAK;EAC9D,oBACIjB,KAAA,CAAAsB,aAAA,CAACrB,cAAc,CAACsB,IAAI;IAACL,KAAK,EAAEA;EAAM,gBAE7BlB,KAAK,CAACwB,YAAY,CAACL,IAAI,EAAE;IACtB,GAAGE,IAAI;IACPD,SAAS,EAAElB,EAAE,CAACG,YAAY,CAAC;MAAEO,KAAK;MAAEL;IAAK,CAAC,CAAC,EAAEa,SAAS;EAC1D,CAAC,CACgB,CAAC;AAE9B,CAAC;AAED,MAAMK,IAAI,GAAGrB,eAAe,CAAC,MAAM,EAAEY,QAAQ,CAAC;AAE9C,SAASS,IAAI","ignoreList":[]}

package/Icon/Icon.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as IconStories from './Icon.stories';
+import * as IconStories from "./Icon.stories";
 
 <Meta of={IconStories} />
 
@@ -16,30 +16,25 @@ import { Icon } from "@webiny/admin-ui";
 import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const IconExample = () => {
-    return (
-        <Icon
-            icon={<CloseIcon />}
-            label="Close icon"
-            size="md"
-            color="accent"
-        />
-    );
-};
+return (
+
+<Icon icon={<CloseIcon />} label="Close icon" size="md" color="accent" />
+); };
 
 export default IconExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Icon/Icon.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/Icon/Icon.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={IconStories.Documentation} />
@@ -50,14 +45,7 @@ import { Icon } from "@webiny/admin-ui";
 import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const IconExample = () => {
-    return (
-        <Icon
-            icon={<CloseIcon />}
-            label="Close icon"
-            size="md"
-            color="accent"
-        />
-    );
+  return <Icon icon={<CloseIcon />} label="Close icon" size="md" color="accent" />;
 };
 
 export default IconExample;
@@ -73,15 +61,10 @@ import { Icon } from "@webiny/admin-ui";
 import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const DefaultIconExample = () => {
-    return (
-        <Icon
-            icon={<CloseIcon />}
-            label="This is an icon"
-            size="md"
-            color="accent"
-        />
-    );
-};
+return (
+
+<Icon icon={<CloseIcon />} label="This is an icon" size="md" color="accent" />
+); };
 
 export default DefaultIconExample;
 ` } } />
@@ -96,19 +79,15 @@ import { Icon } from "@webiny/admin-ui";
 import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const InheritColorIconExample = () => {
-    return (
-        <div className="fill-success">
-            <Icon
-                icon={<CloseIcon />}
-                label="This is an icon"
-                size="md"
-                color="inherit"
-            />
-        </div>
-    );
-};
+return (
+
+<div className="fill-success">
+  <Icon icon={<CloseIcon />} label="This is an icon" size="md" color="inherit" />
+</div>
+); };
 
     export default InheritColorIconExample;
+
 ` } } />
 
 #### Accent Color
@@ -119,15 +98,10 @@ import { Icon } from "@webiny/admin-ui";
 import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const AccentIconExample = () => {
-    return (
-        <Icon
-            icon={<CloseIcon />}
-            label="This is an icon"
-            size="md"
-            color="accent"
-        />
-    );
-};
+return (
+
+<Icon icon={<CloseIcon />} label="This is an icon" size="md" color="accent" />
+); };
 
 export default AccentIconExample;
 ` } } />
@@ -140,17 +114,13 @@ import { Icon } from "@webiny/admin-ui";
 import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const NeutralLightIconExample = () => {
-    return (
-        <Icon
-            icon={<CloseIcon />}
-            label="This is an icon"
-            size="md"
-            color="neutral-light"
-        />
-    );
-};
+return (
+
+<Icon icon={<CloseIcon />} label="This is an icon" size="md" color="neutral-light" />
+); };
 
     export default NeutralLightIconExample;
+
 ` } } />
 
 #### Neutral Strong Color
@@ -161,17 +131,13 @@ import { Icon } from "@webiny/admin-ui";
 import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const NeutralStrongIconExample = () => {
-    return (
-        <Icon
-            icon={<CloseIcon />}
-            label="This is an icon"
-            size="md"
-            color="neutral-strong"
-        />
-    );
-};
+return (
+
+<Icon icon={<CloseIcon />} label="This is an icon" size="md" color="neutral-strong" />
+); };
 
         export default NeutralStrongIconExample;
+
 ` } } />
 
 #### Neutral Strong Transparent Color
@@ -182,17 +148,12 @@ import { Icon } from "@webiny/admin-ui";
 import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const NeutralStrongTransparentIconExample = () => {
-    return (
-        <div className="bg-neutral-disabled p-3xl rounded-md">
-            <Icon
-                icon={<CloseIcon />}
-                label="This is an icon"
-                size="md"
-                color="neutral-strong-transparent"
-            />
-        </div>
-    );
-};
+return (
+
+<div className="bg-neutral-disabled p-3xl rounded-md">
+  <Icon icon={<CloseIcon />} label="This is an icon" size="md" color="neutral-strong-transparent" />
+</div>
+); };
 
 export default NeutralStrongTransparentIconExample;
 ` } } />
@@ -205,19 +166,15 @@ import { Icon } from "@webiny/admin-ui";
 import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const NeutralBaseIconExample = () => {
-    return (
-        <div className="bg-neutral-dark p-3xl rounded-md">
-            <Icon
-                icon={<CloseIcon />}
-                label="This is an icon"
-                size="md"
-                color="neutral-base"
-            />
-        </div>
-    );
-};
+return (
+
+<div className="bg-neutral-dark p-3xl rounded-md">
+  <Icon icon={<CloseIcon />} label="This is an icon" size="md" color="neutral-base" />
+</div>
+); };
 
     export default NeutralBaseIconExample;
+
 ` } } />
 
 #### Neutral Negative Color
@@ -228,19 +185,15 @@ import { Icon } from "@webiny/admin-ui";
 import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const NeutralNegativeIconExample = () => {
-    return (
-        <div className="bg-neutral-dark p-3xl rounded-md">
-            <Icon
-                icon={<CloseIcon />}
-                label="This is an icon"
-                size="md"
-                color="neutral-negative"
-            />
-        </div>
-    );
-};
+return (
+
+<div className="bg-neutral-dark p-3xl rounded-md">
+  <Icon icon={<CloseIcon />} label="This is an icon" size="md" color="neutral-negative" />
+</div>
+); };
 
         export default NeutralNegativeIconExample;
+
 ` } } />
 
 ### Size Variants
@@ -253,15 +206,10 @@ import { Icon } from "@webiny/admin-ui";
 import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const XsIconExample = () => {
-    return (
-        <Icon
-            icon={<CloseIcon />}
-            label="This is an icon"
-            size="xs"
-            color="accent"
-        />
-    );
-};
+return (
+
+<Icon icon={<CloseIcon />} label="This is an icon" size="xs" color="accent" />
+); };
 
 export default XsIconExample;
 ` } } />
@@ -274,15 +222,10 @@ import { Icon } from "@webiny/admin-ui";
 import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const SmIconExample = () => {
-    return (
-        <Icon
-            icon={<CloseIcon />}
-            label="This is an icon"
-            size="sm"
-            color="accent"
-        />
-    );
-};
+return (
+
+<Icon icon={<CloseIcon />} label="This is an icon" size="sm" color="accent" />
+); };
 
 export default SmIconExample;
 ` } } />
@@ -295,15 +238,10 @@ import { Icon } from "@webiny/admin-ui";
 import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const MdIconExample = () => {
-    return (
-        <Icon
-            icon={<CloseIcon />}
-            label="This is an icon"
-            size="md"
-            color="accent"
-        />
-    );
-};
+return (
+
+<Icon icon={<CloseIcon />} label="This is an icon" size="md" color="accent" />
+); };
 
 export default MdIconExample;
 ` } } />
@@ -316,16 +254,10 @@ import { Icon } from "@webiny/admin-ui";
 import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";
 
 const LgIconExample = () => {
-    return (
-        <Icon
-            icon={<CloseIcon />}
-            label="This is an icon"
-            size="lg"
-            color="accent"
-        />
-    );
-};
+return (
+
+<Icon icon={<CloseIcon />} label="This is an icon" size="lg" color="accent" />
+); };
 
 export default LgIconExample;
 ` } } />
-