@webiny/admin-ui 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

package/Label/components/LabelValue.js

@@ -1,31 +1,27 @@
-import * as React from "react";
 import { cn, cva } from "../../utils.js";
 import { Text } from "../../Text/index.js";
+import * as __rspack_external_react from "react";
 const labelValueVariants = cva("text-neutral-strong", {
-  variants: {
-    weight: {
-      strong: "font-semibold",
-      light: "font-regular"
+    variants: {
+        weight: {
+            strong: "font-semibold",
+            light: "font-regular"
+        },
+        disabled: {
+            true: "text-neutral-disabled"
+        }
     },
-    disabled: {
-      true: "text-neutral-disabled"
+    defaultVariants: {
+        weight: "strong"
     }
-  },
-  defaultVariants: {
-    weight: "strong"
-  }
 });
-const LabelValue = ({
-  value,
-  weight,
-  disabled
-}) => /*#__PURE__*/React.createElement(Text, {
-  size: "sm",
-  className: cn(labelValueVariants({
-    weight,
-    disabled
-  }))
-}, value);
+const LabelValue = ({ value, weight, disabled })=>/*#__PURE__*/ __rspack_external_react.createElement(Text, {
+        size: "sm",
+        className: cn(labelValueVariants({
+            weight,
+            disabled
+        }))
+    }, value);
 export { LabelValue };
 
 //# sourceMappingURL=LabelValue.js.map

package/Label/components/LabelValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","Text","labelValueVariants","variants","weight","strong","light","disabled","true","defaultVariants","LabelValue","value","createElement","size","className"],"sources":["LabelValue.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst labelValueVariants = cva(\"text-neutral-strong\", {\n    variants: {\n        weight: {\n            strong: \"font-semibold\",\n            light: \"font-regular\"\n        },\n        disabled: {\n            true: \"text-neutral-disabled\"\n        }\n    },\n    defaultVariants: {\n        weight: \"strong\"\n    }\n});\n\ninterface LabelValueProps extends VariantProps<typeof labelValueVariants> {\n    value: React.ReactNode;\n}\n\nconst LabelValue = ({ value, weight, disabled }: LabelValueProps) => (\n    <Text size=\"sm\" className={cn(labelValueVariants({ weight, disabled }))}>\n        {value}\n    </Text>\n);\n\nexport { LabelValue, type LabelValueProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,IAAI;AAEb,MAAMC,kBAAkB,GAAGF,GAAG,CAAC,qBAAqB,EAAE;EAClDG,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,MAAM,EAAE,eAAe;MACvBC,KAAK,EAAE;IACX,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbL,MAAM,EAAE;EACZ;AACJ,CAAC,CAAC;AAMF,MAAMM,UAAU,GAAGA,CAAC;EAAEC,KAAK;EAAEP,MAAM;EAAEG;AAA0B,CAAC,kBAC5DT,KAAA,CAAAc,aAAA,CAACX,IAAI;EAACY,IAAI,EAAC,IAAI;EAACC,SAAS,EAAEf,EAAE,CAACG,kBAAkB,CAAC;IAAEE,MAAM;IAAEG;EAAS,CAAC,CAAC;AAAE,GACnEI,KACC,CACT;AAED,SAASD,UAAU","ignoreList":[]}
+{"version":3,"file":"Label/components/LabelValue.js","sources":["../../../src/Label/components/LabelValue.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst labelValueVariants = cva(\"text-neutral-strong\", {\n    variants: {\n        weight: {\n            strong: \"font-semibold\",\n            light: \"font-regular\"\n        },\n        disabled: {\n            true: \"text-neutral-disabled\"\n        }\n    },\n    defaultVariants: {\n        weight: \"strong\"\n    }\n});\n\ninterface LabelValueProps extends VariantProps<typeof labelValueVariants> {\n    value: React.ReactNode;\n}\n\nconst LabelValue = ({ value, weight, disabled }: LabelValueProps) => (\n    <Text size=\"sm\" className={cn(labelValueVariants({ weight, disabled }))}>\n        {value}\n    </Text>\n);\n\nexport { LabelValue, type LabelValueProps };\n"],"names":["labelValueVariants","cva","LabelValue","value","weight","disabled","Text","cn"],"mappings":";;;AAIA,MAAMA,qBAAqBC,IAAI,uBAAuB;IAClD,UAAU;QACN,QAAQ;YACJ,QAAQ;YACR,OAAO;QACX;QACA,UAAU;YACN,MAAM;QACV;IACJ;IACA,iBAAiB;QACb,QAAQ;IACZ;AACJ;AAMA,MAAMC,aAAa,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAAEC,QAAQ,EAAmB,iBAC5D,sCAACC,MAAIA;QAAC,MAAK;QAAK,WAAWC,GAAGP,mBAAmB;YAAEI;YAAQC;QAAS;OAC/DF"}

package/Label/components/index.js

@@ -2,5 +2,3 @@ export * from "./LabelRequired.js";
 export * from "./LabelDescription.js";
 export * from "./LabelHint.js";
 export * from "./LabelValue.js";
-
-//# sourceMappingURL=index.js.map

package/Label/index.js

@@ -1,3 +1 @@
 export * from "./Label.js";
-
-//# sourceMappingURL=index.js.map

package/Link/DefaultLinkComponent.js

@@ -1,11 +1,8 @@
-import React from "react";
-export const DefaultLinkComponent = ({
-  to,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement("a", Object.assign({
-    href: to
-  }, props));
-};
+import react from "react";
+const DefaultLinkComponent = ({ to, ...props })=>/*#__PURE__*/ react.createElement("a", {
+        href: to,
+        ...props
+    });
+export { DefaultLinkComponent };
 
 //# sourceMappingURL=DefaultLinkComponent.js.map

package/Link/DefaultLinkComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","DefaultLinkComponent","to","props","createElement","Object","assign","href"],"sources":["DefaultLinkComponent.tsx"],"sourcesContent":["import React from \"react\";\nimport { LinkComponent } from \"./LinkComponent.js\";\n\nexport const DefaultLinkComponent: LinkComponent = ({ to, ...props }) => {\n    return <a href={to} {...props} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,oBAAmC,GAAGA,CAAC;EAAEC,EAAE;EAAE,GAAGC;AAAM,CAAC,KAAK;EACrE,oBAAOH,KAAA,CAAAI,aAAA,MAAAC,MAAA,CAAAC,MAAA;IAAGC,IAAI,EAAEL;EAAG,GAAKC,KAAK,CAAG,CAAC;AACrC,CAAC","ignoreList":[]}
+{"version":3,"file":"Link/DefaultLinkComponent.js","sources":["../../src/Link/DefaultLinkComponent.tsx"],"sourcesContent":["import React from \"react\";\nimport { LinkComponent } from \"./LinkComponent.js\";\n\nexport const DefaultLinkComponent: LinkComponent = ({ to, ...props }) => {\n    return <a href={to} {...props} />;\n};\n"],"names":["DefaultLinkComponent","to","props"],"mappings":";AAGO,MAAMA,uBAAsC,CAAC,EAAEC,EAAE,EAAE,GAAGC,OAAO,GACzD,WAAP,GAAO,oBAAC;QAAE,MAAMD;QAAK,GAAGC,KAAK"}

package/Link/Link.d.ts

@@ -5,7 +5,7 @@ declare const linkVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "inherit" | null | undefined;
     variant?: "primary" | "secondary" | "primary-negative" | "secondary-negative" | null | undefined;
     underline?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type LinkProps = LinkComponentProps & VariantProps<typeof linkVariants> & {
     disabled?: boolean;
 };

package/Link/Link.js

@@ -1,51 +1,56 @@
-import React from "react";
-import { cva, makeDecoratable, cn } from "../utils.js";
+import react from "react";
+import { cn, cva, makeDecoratable } from "../utils.js";
 import { useAdminUi } from "../index.js";
 const linkVariants = cva("font-sans rounded-xs", {
-  variants: {
-    size: {
-      inherit: "[font-size:inherit]",
-      sm: "text-sm",
-      md: "text-md",
-      lg: "text-lg",
-      xl: "text-xl"
+    variants: {
+        size: {
+            inherit: "[font-size:inherit]",
+            sm: "text-sm",
+            md: "text-md",
+            lg: "text-lg",
+            xl: "text-xl"
+        },
+        variant: {
+            primary: [
+                "text-accent-primary",
+                "focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed"
+            ],
+            secondary: [
+                "text-neutral-primary",
+                "focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed"
+            ],
+            "primary-negative": [
+                "text-accent-primary",
+                "focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong"
+            ],
+            "secondary-negative": [
+                "text-neutral-light",
+                "focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong"
+            ]
+        },
+        underline: {
+            true: "underline hover:no-underline",
+            false: "hover:underline"
+        }
     },
-    variant: {
-      primary: ["text-accent-primary", "focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed"],
-      secondary: ["text-neutral-primary", "focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed"],
-      "primary-negative": ["text-accent-primary", "focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong"],
-      "secondary-negative": ["text-neutral-light", "focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong"]
-    },
-    underline: {
-      true: "underline hover:no-underline",
-      false: "hover:underline"
+    defaultVariants: {
+        size: "inherit",
+        variant: "primary",
+        underline: false
     }
-  },
-  defaultVariants: {
-    size: "inherit",
-    variant: "primary",
-    underline: false
-  }
 });
-function LinkBase({
-  size,
-  variant,
-  underline,
-  className,
-  children,
-  ...rest
-}) {
-  const {
-    linkComponent: LinkComponent
-  } = useAdminUi();
-  return /*#__PURE__*/React.createElement(LinkComponent, Object.assign({}, rest, {
-    className: cn(linkVariants({
-      size,
-      variant,
-      underline
-    }), className)
-  }), children);
+function LinkBase({ size, variant, underline, className, children, ...rest }) {
+    const { linkComponent: LinkComponent } = useAdminUi();
+    return /*#__PURE__*/ react.createElement(LinkComponent, {
+        ...rest,
+        className: cn(linkVariants({
+            size,
+            variant,
+            underline
+        }), className)
+    }, children);
 }
-export const Link = makeDecoratable("Link", LinkBase);
+const Link = makeDecoratable("Link", LinkBase);
+export { Link };
 
 //# sourceMappingURL=Link.js.map

package/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cva","makeDecoratable","cn","useAdminUi","linkVariants","variants","size","inherit","sm","md","lg","xl","variant","primary","secondary","underline","true","false","defaultVariants","LinkBase","className","children","rest","linkComponent","LinkComponent","createElement","Object","assign","Link"],"sources":["Link.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps, makeDecoratable, cn } from \"~/utils.js\";\nimport { useAdminUi } from \"~/index.js\";\nimport { LinkComponentProps } from \"./LinkComponent.js\";\n\nconst linkVariants = cva(\"font-sans rounded-xs\", {\n    variants: {\n        size: {\n            inherit: \"[font-size:inherit]\",\n            sm: \"text-sm\",\n            md: \"text-md\",\n            lg: \"text-lg\",\n            xl: \"text-xl\"\n        },\n        variant: {\n            primary: [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            secondary: [\n                \"text-neutral-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            \"primary-negative\": [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ],\n            \"secondary-negative\": [\n                \"text-neutral-light\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ]\n        },\n        underline: {\n            true: \"underline hover:no-underline\",\n            false: \"hover:underline\"\n        }\n    },\n    defaultVariants: {\n        size: \"inherit\",\n        variant: \"primary\",\n        underline: false\n    }\n});\n\nexport type LinkProps = LinkComponentProps &\n    VariantProps<typeof linkVariants> & {\n        disabled?: boolean;\n    };\n\nfunction LinkBase({ size, variant, underline, className, children, ...rest }: LinkProps) {\n    const { linkComponent: LinkComponent } = useAdminUi();\n    return (\n        <LinkComponent\n            {...rest}\n            className={cn(linkVariants({ size, variant, underline }), className)}\n        >\n            {children}\n        </LinkComponent>\n    );\n}\n\nexport const Link = makeDecoratable(\"Link\", LinkBase);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,EAAqBC,eAAe,EAAEC,EAAE;AACpD,SAASC,UAAU;AAGnB,MAAMC,YAAY,GAAGJ,GAAG,CAAC,sBAAsB,EAAE;EAC7CK,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,OAAO,EAAE,qBAAqB;MAC9BC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,OAAO,EAAE,CACL,qBAAqB,EACrB,uFAAuF,CAC1F;MACDC,SAAS,EAAE,CACP,sBAAsB,EACtB,uFAAuF,CAC1F;MACD,kBAAkB,EAAE,CAChB,qBAAqB,EACrB,uFAAuF,CAC1F;MACD,oBAAoB,EAAE,CAClB,oBAAoB,EACpB,uFAAuF;IAE/F,CAAC;IACDC,SAAS,EAAE;MACPC,IAAI,EAAE,8BAA8B;MACpCC,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,eAAe,EAAE;IACbZ,IAAI,EAAE,SAAS;IACfM,OAAO,EAAE,SAAS;IAClBG,SAAS,EAAE;EACf;AACJ,CAAC,CAAC;AAOF,SAASI,QAAQA,CAAC;EAAEb,IAAI;EAAEM,OAAO;EAAEG,SAAS;EAAEK,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAgB,CAAC,EAAE;EACrF,MAAM;IAAEC,aAAa,EAAEC;EAAc,CAAC,GAAGrB,UAAU,CAAC,CAAC;EACrD,oBACIJ,KAAA,CAAA0B,aAAA,CAACD,aAAa,EAAAE,MAAA,CAAAC,MAAA,KACNL,IAAI;IACRF,SAAS,EAAElB,EAAE,CAACE,YAAY,CAAC;MAAEE,IAAI;MAAEM,OAAO;MAAEG;IAAU,CAAC,CAAC,EAAEK,SAAS;EAAE,IAEpEC,QACU,CAAC;AAExB;AAEA,OAAO,MAAMO,IAAI,GAAG3B,eAAe,CAAC,MAAM,EAAEkB,QAAQ,CAAC","ignoreList":[]}
+{"version":3,"file":"Link/Link.js","sources":["../../src/Link/Link.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps, makeDecoratable, cn } from \"~/utils.js\";\nimport { useAdminUi } from \"~/index.js\";\nimport { LinkComponentProps } from \"./LinkComponent.js\";\n\nconst linkVariants = cva(\"font-sans rounded-xs\", {\n    variants: {\n        size: {\n            inherit: \"[font-size:inherit]\",\n            sm: \"text-sm\",\n            md: \"text-md\",\n            lg: \"text-lg\",\n            xl: \"text-xl\"\n        },\n        variant: {\n            primary: [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            secondary: [\n                \"text-neutral-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-dimmed\"\n            ],\n            \"primary-negative\": [\n                \"text-accent-primary\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ],\n            \"secondary-negative\": [\n                \"text-neutral-light\",\n                \"focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-primary-strong\"\n            ]\n        },\n        underline: {\n            true: \"underline hover:no-underline\",\n            false: \"hover:underline\"\n        }\n    },\n    defaultVariants: {\n        size: \"inherit\",\n        variant: \"primary\",\n        underline: false\n    }\n});\n\nexport type LinkProps = LinkComponentProps &\n    VariantProps<typeof linkVariants> & {\n        disabled?: boolean;\n    };\n\nfunction LinkBase({ size, variant, underline, className, children, ...rest }: LinkProps) {\n    const { linkComponent: LinkComponent } = useAdminUi();\n    return (\n        <LinkComponent\n            {...rest}\n            className={cn(linkVariants({ size, variant, underline }), className)}\n        >\n            {children}\n        </LinkComponent>\n    );\n}\n\nexport const Link = makeDecoratable(\"Link\", LinkBase);\n"],"names":["linkVariants","cva","LinkBase","size","variant","underline","className","children","rest","LinkComponent","useAdminUi","cn","Link","makeDecoratable"],"mappings":";;;AAKA,MAAMA,eAAeC,IAAI,wBAAwB;IAC7C,UAAU;QACN,MAAM;YACF,SAAS;YACT,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,SAAS;YACL,SAAS;gBACL;gBACA;aACH;YACD,WAAW;gBACP;gBACA;aACH;YACD,oBAAoB;gBAChB;gBACA;aACH;YACD,sBAAsB;gBAClB;gBACA;aACH;QACL;QACA,WAAW;YACP,MAAM;YACN,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,MAAM;QACN,SAAS;QACT,WAAW;IACf;AACJ;AAOA,SAASC,SAAS,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,MAAiB;IACnF,MAAM,EAAE,eAAeC,aAAa,EAAE,GAAGC;IACzC,OAAO,WAAP,GACI,oBAACD,eAAAA;QACI,GAAGD,IAAI;QACR,WAAWG,GAAGX,aAAa;YAAEG;YAAMC;YAASC;QAAU,IAAIC;OAEzDC;AAGb;AAEO,MAAMK,OAAOC,gBAAgB,QAAQX"}

package/Link/Link.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 LinkStories from './Link.stories';
+import * as LinkStories from "./Link.stories";
 
 <Meta of={LinkStories} />
 
@@ -15,39 +15,39 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const LinkExample = () => {
-    return (
-        <div>
-            <p>
-                This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
-            </p>
-            <p>
-                <Link to="/settings" variant="secondary" size="lg">
-                    This is a large secondary link
-                </Link>
-            </p>
-            <p>
-                <Link to="/help" underline={true}>
-                    This link is underlined by default
-                </Link>
-            </p>
-        </div>
-    );
-};
+return (
+
+<div>
+  <p>
+    This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
+  </p>
+  <p>
+    <Link to="/settings" variant="secondary" size="lg">
+      This is a large secondary link
+    </Link>
+  </p>
+  <p>
+    <Link to="/help" underline={true}>
+      This link is underlined by default
+    </Link>
+  </p>
+</div>
+); };
 
 export default LinkExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Link/Link.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/Link/Link.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={LinkStories.Documentation} />
@@ -57,23 +57,23 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const LinkExample = () => {
-    return (
-        <div>
-            <p>
-                This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
-            </p>
-            <p>
-                <Link to="/settings" variant="secondary" size="lg">
-                    This is a large secondary link
-                </Link>
-            </p>
-            <p>
-                <Link to="/help" underline={true}>
-                    This link is underlined by default
-                </Link>
-            </p>
-        </div>
-    );
+  return (
+    <div>
+      <p>
+        This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
+      </p>
+      <p>
+        <Link to="/settings" variant="secondary" size="lg">
+          This is a large secondary link
+        </Link>
+      </p>
+      <p>
+        <Link to="/help" underline={true}>
+          This link is underlined by default
+        </Link>
+      </p>
+    </div>
+  );
 };
 
 export default LinkExample;
@@ -88,12 +88,13 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const DefaultLinkExample = () => {
-    return (
-        <Link to="#">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
-        </Link>
-    );
-};
+return (
+
+<Link to="#">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
+  rhoncus.
+</Link>
+); };
 
 export default DefaultLinkExample;
 ` } } />
@@ -107,12 +108,12 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const XlLinkExample = () => {
-    return (
-        <Link to="#" size="xl">
-            Extra large link
-        </Link>
-    );
-};
+return (
+
+<Link to="#" size="xl">
+  Extra large link
+</Link>
+); };
 
 export default XlLinkExample;
 ` } } />
@@ -124,12 +125,12 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const LgLinkExample = () => {
-    return (
-        <Link to="#" size="lg">
-            Large link
-        </Link>
-    );
-};
+return (
+
+<Link to="#" size="lg">
+  Large link
+</Link>
+); };
 
 export default LgLinkExample;
 ` } } />
@@ -141,12 +142,12 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const MdLinkExample = () => {
-    return (
-        <Link to="#" size="md">
-            Medium link
-        </Link>
-    );
-};
+return (
+
+<Link to="#" size="md">
+  Medium link
+</Link>
+); };
 
 export default MdLinkExample;
 ` } } />
@@ -158,12 +159,12 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const SmLinkExample = () => {
-    return (
-        <Link to="#" size="sm">
-            Small link
-        </Link>
-    );
-};
+return (
+
+<Link to="#" size="sm">
+  Small link
+</Link>
+); };
 
 export default SmLinkExample;
 ` } } />
@@ -175,15 +176,15 @@ import React from "react";
 import { Link, Text } from "@webiny/admin-ui";
 
 const InheritedSizeLinkExample = () => {
-    return (
-        <Text>
-            <Text size="lg">
-                Size of this text is set to large, so,&nbsp;
-                <Link to="#">this link's</Link> size is also automatically set to large.
-            </Text>
-        </Text>
-    );
-};
+return (
+
+<Text>
+  <Text size="lg">
+    Size of this text is set to large, so,&nbsp;
+    <Link to="#">this link's</Link> size is also automatically set to large.
+  </Text>
+</Text>
+); };
 
 export default InheritedSizeLinkExample;
 ` } } />
@@ -195,12 +196,12 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const UnderlinedLinkExample = () => {
-    return (
-        <Link to="#" underline={true}>
-            This link is underlined by default
-        </Link>
-    );
-};
+return (
+
+<Link to="#" underline={true}>
+  This link is underlined by default
+</Link>
+); };
 
 export default UnderlinedLinkExample;
 ` } } />
@@ -212,15 +213,18 @@ import React from "react";
 import { Link, Text } from "@webiny/admin-ui";
 
 const PrimaryNegativeLinkExample = () => {
-    return (
-        <div className="bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed">
-            <Text>
-                Lorem <Link to="#" variant="primary-negative">ipsum dolor sit amet</Link>, consectetur adipiscing elit.
-                Fusce tempus tortor eu sapien interdum rhoncus.
-            </Text>
-        </div>
-    );
-};
+return (
+
+<div className="bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed">
+  <Text>
+    Lorem{" "}
+    <Link to="#" variant="primary-negative">
+      ipsum dolor sit amet
+    </Link>
+    , consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+  </Text>
+</div>
+); };
 
 export default PrimaryNegativeLinkExample;
 ` } } />
@@ -232,15 +236,18 @@ import React from "react";
 import { Link, Text } from "@webiny/admin-ui";
 
 const SecondaryNegativeLinkExample = () => {
-    return (
-        <div className="bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed">
-            <Text>
-                Lorem <Link to="#" variant="secondary-negative">ipsum dolor sit amet</Link>, consectetur adipiscing elit.
-                Fusce tempus tortor eu sapien interdum rhoncus.
-            </Text>
-        </div>
-    );
-};
+return (
+
+<div className="bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed">
+  <Text>
+    Lorem{" "}
+    <Link to="#" variant="secondary-negative">
+      ipsum dolor sit amet
+    </Link>
+    , consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+  </Text>
+</div>
+); };
 
 export default SecondaryNegativeLinkExample;
 ` } } />
@@ -248,17 +255,23 @@ export default SecondaryNegativeLinkExample;
 ## Anatomy
 
 ### Primary
-<img src="/images/storybook/link/primary.png" alt="Primary"/>
+
+<img src="/images/storybook/link/primary.png" alt="Primary" />
 
 ### Secondary
-<img src="/images/storybook/link/secondary.png" alt="Secondary"/>
+
+<img src="/images/storybook/link/secondary.png" alt="Secondary" />
 
 ### Sizing
+
 Links inherit font styles of surrounding text.
-<img src="/images/storybook/link/sizing.png" alt="Sizing"/>
+
+<img src="/images/storybook/link/sizing.png" alt="Sizing" />
 
 ### State
-<img src="/images/storybook/link/states.png" alt="State"/>
+
+<img src="/images/storybook/link/states.png" alt="State" />
 
 ## Usage
-<img src="/images/storybook/link/usage.png" alt="Usage"/>
+
+<img src="/images/storybook/link/usage.png" alt="Usage" />