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

package/Label/components/LabelRequired.js

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { cn, cva } from "../../utils";
-const labelRequiredVariants = cva("wby-text-destructive-primary", {
+import { cn, cva } from "../../utils.js";
+const labelRequiredVariants = cva("text-destructive-primary", {
   variants: {
     disabled: {
-      true: "wby-text-destructive-muted"
+      true: "text-destructive-muted"
     }
   }
 });

package/Label/components/LabelRequired.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","labelRequiredVariants","variants","disabled","true","LabelRequired","createElement","className"],"sources":["LabelRequired.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst labelRequiredVariants = cva(\"wby-text-destructive-primary\", {\n    variants: {\n        disabled: {\n            true: \"wby-text-destructive-muted\"\n        }\n    }\n});\n\ntype LabelRequiredProps = VariantProps<typeof labelRequiredVariants>;\n\nconst LabelRequired = ({ disabled }: LabelRequiredProps) => (\n    <span className={cn(labelRequiredVariants({ disabled }))}>{\"*\"}</span>\n);\n\nexport { LabelRequired, type LabelRequiredProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,qBAAqB,GAAGD,GAAG,CAAC,8BAA8B,EAAE;EAC9DE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAIF,MAAMC,aAAa,GAAGA,CAAC;EAAEF;AAA6B,CAAC,kBACnDL,KAAA,CAAAQ,aAAA;EAAMC,SAAS,EAAER,EAAE,CAACE,qBAAqB,CAAC;IAAEE;EAAS,CAAC,CAAC;AAAE,GAAE,GAAU,CACxE;AAED,SAASE,aAAa","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","labelRequiredVariants","variants","disabled","true","LabelRequired","createElement","className"],"sources":["LabelRequired.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst labelRequiredVariants = cva(\"text-destructive-primary\", {\n    variants: {\n        disabled: {\n            true: \"text-destructive-muted\"\n        }\n    }\n});\n\ntype LabelRequiredProps = VariantProps<typeof labelRequiredVariants>;\n\nconst LabelRequired = ({ disabled }: LabelRequiredProps) => (\n    <span className={cn(labelRequiredVariants({ disabled }))}>{\"*\"}</span>\n);\n\nexport { LabelRequired, type LabelRequiredProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,qBAAqB,GAAGD,GAAG,CAAC,0BAA0B,EAAE;EAC1DE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAIF,MAAMC,aAAa,GAAGA,CAAC;EAAEF;AAA6B,CAAC,kBACnDL,KAAA,CAAAQ,aAAA;EAAMC,SAAS,EAAER,EAAE,CAACE,qBAAqB,CAAC;IAAEE;EAAS,CAAC,CAAC;AAAE,GAAE,GAAU,CACxE;AAED,SAASE,aAAa","ignoreList":[]}

package/Label/components/LabelValue.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const labelValueVariants: (props?: ({
     weight?: "strong" | "light" | null | undefined;
     disabled?: boolean | null | undefined;

package/Label/components/LabelValue.js

@@ -1,14 +1,14 @@
 import * as React from "react";
-import { cn, cva } from "../../utils";
-import { Text } from "../../Text";
-const labelValueVariants = cva("wby-text-neutral-strong", {
+import { cn, cva } from "../../utils.js";
+import { Text } from "../../Text/index.js";
+const labelValueVariants = cva("text-neutral-strong", {
   variants: {
     weight: {
-      strong: "wby-font-semibold",
-      light: "wby-font-regular"
+      strong: "font-semibold",
+      light: "font-regular"
     },
     disabled: {
-      true: "wby-text-neutral-disabled"
+      true: "text-neutral-disabled"
     }
   },
   defaultVariants: {

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\";\nimport { Text } from \"~/Text\";\n\nconst labelValueVariants = cva(\"wby-text-neutral-strong\", {\n    variants: {\n        weight: {\n            strong: \"wby-font-semibold\",\n            light: \"wby-font-regular\"\n        },\n        disabled: {\n            true: \"wby-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,yBAAyB,EAAE;EACtDG,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,MAAM,EAAE,mBAAmB;MAC3BC,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,"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":[]}

package/Label/components/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./LabelRequired";
-export * from "./LabelDescription";
-export * from "./LabelHint";
-export * from "./LabelValue";
+export * from "./LabelRequired.js";
+export * from "./LabelDescription.js";
+export * from "./LabelHint.js";
+export * from "./LabelValue.js";

package/Label/components/index.js

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

package/Label/components/index.js.map

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

package/Label/index.d.ts

@@ -1 +1 @@
-export * from "./Label";
+export * from "./Label.js";

package/Label/index.js

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

package/Label/index.js.map

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

package/Link/DefaultLinkComponent.d.ts

@@ -0,0 +1,2 @@
+import { LinkComponent } from "./LinkComponent.js";
+export declare const DefaultLinkComponent: LinkComponent;

package/Link/DefaultLinkComponent.js

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

package/Link/DefaultLinkComponent.js.map

@@ -0,0 +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":[]}

package/Link/Link.d.ts

@@ -1,31 +1,32 @@
 import React from "react";
-import { type VariantProps } from "../utils";
-import { type LinkProps as WebinyReactRouterLinkProps } from "@webiny/react-router";
+import { type VariantProps } from "../utils.js";
+import { LinkComponentProps } from "./LinkComponent.js";
 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").ClassProp) | undefined) => string;
-interface LinkProps extends WebinyReactRouterLinkProps, VariantProps<typeof linkVariants> {
+} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+export type LinkProps = LinkComponentProps & VariantProps<typeof linkVariants> & {
     disabled?: boolean;
-}
-declare const Link: (({ size, variant, underline, className, children, ...rest }: LinkProps) => React.JSX.Element) & {
-    original: ({ size, variant, underline, className, children, ...rest }: LinkProps) => React.JSX.Element;
+};
+declare function LinkBase({ size, variant, underline, className, children, ...rest }: LinkProps): React.JSX.Element;
+export declare const Link: typeof LinkBase & {
+    original: typeof LinkBase;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ size, variant, underline, className, children, ...rest }: LinkProps) => React.JSX.Element) & {
-        original: ({ size, variant, underline, className, children, ...rest }: LinkProps) => React.JSX.Element;
+    original: typeof LinkBase & {
+        original: typeof LinkBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ size, variant, underline, className, children, ...rest }: LinkProps) => React.JSX.Element) & {
-        original: ({ size, variant, underline, className, children, ...rest }: LinkProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof LinkBase & {
+        original: typeof LinkBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
-export { Link, type LinkProps };
+export {};

package/Link/Link.js

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

package/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cva","makeDecoratable","cn","Link","WebinyReactRouterLink","linkVariants","variants","size","inherit","sm","md","lg","xl","variant","primary","secondary","underline","true","false","defaultVariants","LinkBase","className","children","rest","createElement","Object","assign"],"sources":["Link.tsx"],"sourcesContent":["import React from \"react\";\nimport { cva, type VariantProps, makeDecoratable, cn } from \"~/utils\";\nimport {\n    Link as WebinyReactRouterLink,\n    type LinkProps as WebinyReactRouterLinkProps\n} from \"@webiny/react-router\";\n\nconst linkVariants = cva(\"wby-font-sans wby-rounded-xs\", {\n    variants: {\n        size: {\n            inherit: \"[font-size:inherit]\",\n            sm: \"wby-text-sm\",\n            md: \"wby-text-md\",\n            lg: \"wby-text-lg\",\n            xl: \"wby-text-xl\"\n        },\n        variant: {\n            primary: [\n                \"wby-text-accent-primary\",\n                \"focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-dimmed\"\n            ],\n            secondary: [\n                \"wby-text-neutral-primary\",\n                \"focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-dimmed\"\n            ],\n            \"primary-negative\": [\n                \"wby-text-accent-primary\",\n                \"focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-strong\"\n            ],\n            \"secondary-negative\": [\n                \"wby-text-neutral-light\",\n                \"focus-visible:wby-outline-none focus-visible:wby-ring-[2px] focus-visible:wby-ring-primary-strong\"\n            ]\n        },\n        underline: {\n            true: \"wby-underline hover:wby-no-underline\",\n            false: \"hover:wby-underline\"\n        }\n    },\n    defaultVariants: {\n        size: \"inherit\",\n        variant: \"primary\",\n        underline: false\n    }\n});\n\ninterface LinkProps extends WebinyReactRouterLinkProps, VariantProps<typeof linkVariants> {\n    disabled?: boolean;\n}\n\nconst LinkBase = ({ size, variant, underline, className, children, ...rest }: LinkProps) => {\n    return (\n        <WebinyReactRouterLink\n            {...rest}\n            className={cn(linkVariants({ size, variant, underline }), className)}\n        >\n            {children}\n        </WebinyReactRouterLink>\n    );\n};\n\nconst Link = makeDecoratable(\"link\", LinkBase);\n\nexport { Link, type LinkProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,EAAqBC,eAAe,EAAEC,EAAE;AACpD,SACIC,IAAI,IAAIC,qBAAqB,QAE1B,sBAAsB;AAE7B,MAAMC,YAAY,GAAGL,GAAG,CAAC,8BAA8B,EAAE;EACrDM,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,OAAO,EAAE,qBAAqB;MAC9BC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,OAAO,EAAE,CACL,yBAAyB,EACzB,mGAAmG,CACtG;MACDC,SAAS,EAAE,CACP,0BAA0B,EAC1B,mGAAmG,CACtG;MACD,kBAAkB,EAAE,CAChB,yBAAyB,EACzB,mGAAmG,CACtG;MACD,oBAAoB,EAAE,CAClB,wBAAwB,EACxB,mGAAmG;IAE3G,CAAC;IACDC,SAAS,EAAE;MACPC,IAAI,EAAE,sCAAsC;MAC5CC,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,eAAe,EAAE;IACbZ,IAAI,EAAE,SAAS;IACfM,OAAO,EAAE,SAAS;IAClBG,SAAS,EAAE;EACf;AACJ,CAAC,CAAC;AAMF,MAAMI,QAAQ,GAAGA,CAAC;EAAEb,IAAI;EAAEM,OAAO;EAAEG,SAAS;EAAEK,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAgB,CAAC,KAAK;EACxF,oBACIxB,KAAA,CAAAyB,aAAA,CAACpB,qBAAqB,EAAAqB,MAAA,CAAAC,MAAA,KACdH,IAAI;IACRF,SAAS,EAAEnB,EAAE,CAACG,YAAY,CAAC;MAAEE,IAAI;MAAEM,OAAO;MAAEG;IAAU,CAAC,CAAC,EAAEK,SAAS;EAAE,IAEpEC,QACkB,CAAC;AAEhC,CAAC;AAED,MAAMnB,IAAI,GAAGF,eAAe,CAAC,MAAM,EAAEmB,QAAQ,CAAC;AAE9C,SAASjB,IAAI","ignoreList":[]}
+{"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":[]}

package/Link/Link.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as LinkStories from './Link.stories';
 
@@ -213,7 +213,7 @@ import { Link, Text } from "@webiny/admin-ui";
 
 const PrimaryNegativeLinkExample = () => {
     return (
-        <div className="wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed">
+        <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.
@@ -233,7 +233,7 @@ import { Link, Text } from "@webiny/admin-ui";
 
 const SecondaryNegativeLinkExample = () => {
     return (
-        <div className="wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed">
+        <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.
@@ -261,4 +261,4 @@ Links inherit font styles of surrounding text.
 <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"/>

package/Link/Link.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Link } from "./Link";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { Link } from "./Link.js";
 declare const meta: Meta<typeof Link>;
 export default meta;
 type Story = StoryObj<typeof Link>;

package/Link/Link.stories.js

@@ -1,11 +1,25 @@
 import React from "react";
-import { BrowserRouter } from "@webiny/react-router";
-import { Link } from "./Link";
-import { Text } from "../Text";
+import { Link } from "./Link.js";
+import { Text } from "../Text/index.js";
+import { AdminUiProvider } from "../AdminUiProvider/index.js";
+const NoopLinkComponent = ({
+  to,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("a", Object.assign({
+    href: to
+  }, props, {
+    onClick: e => {
+      e.preventDefault();
+    }
+  }));
+};
 const meta = {
   title: "Components/Link",
   component: Link,
-  decorators: [Story => /*#__PURE__*/React.createElement(BrowserRouter, null, /*#__PURE__*/React.createElement(Story, null))],
+  decorators: [Story => /*#__PURE__*/React.createElement(AdminUiProvider, {
+    linkComponent: NoopLinkComponent
+  }, /*#__PURE__*/React.createElement(Story, null))],
   argTypes: {
     size: {
       control: "select",
@@ -73,7 +87,7 @@ export const WithUnderline = {
 };
 export const PrimaryNegative = {
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed"
+    className: "bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed"
   }, /*#__PURE__*/React.createElement(Story, null))],
   render: args => {
     return /*#__PURE__*/React.createElement(Text, null, "Lorem ", /*#__PURE__*/React.createElement(Link, args, "ipsum dolor sit amet"), ", consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.");
@@ -85,7 +99,7 @@ export const PrimaryNegative = {
 };
 export const SecondaryNegative = {
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed"
+    className: "bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed"
   }, /*#__PURE__*/React.createElement(Story, null))],
   render: args => {
     return /*#__PURE__*/React.createElement(Text, null, "Lorem ", /*#__PURE__*/React.createElement(Link, args, "ipsum dolor sit amet"), ", consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.");

package/Link/Link.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","BrowserRouter","Link","Text","meta","title","component","decorators","Story","createElement","argTypes","size","control","options","variant","Default","args","to","children","LinkXl","LinkLg","LinkMd","LinkSm","InheritedSize","name","render","linkProps","WithUnderline","underline","PrimaryNegative","className","SecondaryNegative","Documentation","disabled","description","defaultValue"],"sources":["Link.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { BrowserRouter } from \"@webiny/react-router\";\nimport { Link } from \"./Link\";\nimport { Text } from \"~/Text\";\n\nconst meta: Meta<typeof Link> = {\n    title: \"Components/Link\",\n    component: Link,\n    decorators: [\n        (Story: React.ComponentType) => (\n            <BrowserRouter>\n                <Story />\n            </BrowserRouter>\n        )\n    ],\n    argTypes: {\n        size: { control: \"select\", options: [\"sm\", \"md\", \"lg\", \"xl\"] },\n        variant: { control: \"select\", options: [\"primary\", \"secondary\"] }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Link>;\n\nexport const Default: Story = {\n    args: {\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkXl: Story = {\n    args: {\n        size: \"xl\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkLg: Story = {\n    args: {\n        size: \"lg\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkMd: Story = {\n    args: {\n        size: \"md\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkSm: Story = {\n    args: {\n        size: \"sm\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const InheritedSize: Story = {\n    name: \"Link with inherited size\",\n    render: linkProps => {\n        return (\n            <Text>\n                <Text size=\"lg\">\n                    Size of this text is set to large, so,&nbsp;\n                    <Link {...linkProps}>this link&apos;s</Link> size is also automatically set to\n                    large.\n                </Text>\n            </Text>\n        );\n    },\n    args: {\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const WithUnderline: Story = {\n    args: {\n        underline: true,\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const PrimaryNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ],\n    render: args => {\n        return (\n            <Text>\n                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.\n                Fusce tempus tortor eu sapien interdum rhoncus.\n            </Text>\n        );\n    },\n    args: {\n        ...Default.args,\n        variant: \"primary-negative\"\n    }\n};\n\nexport const SecondaryNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-[#25292e] wby-p-[300px] wby-rounded-[5px] wby-text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ],\n    render: args => {\n        return (\n            <Text>\n                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.\n                Fusce tempus tortor eu sapien interdum rhoncus.\n            </Text>\n        );\n    },\n    args: {\n        ...Default.args,\n        variant: \"secondary-negative\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        to: \"#\",\n        variant: \"primary\",\n        size: \"md\",\n        underline: false,\n        disabled: false,\n        children: \"This is a link\"\n    },\n    argTypes: {\n        to: {\n            description:\n                \"The URL or path the link points to. If it’s a relative path, you can pass it as-is—it will automatically resolve based on the parent route. For a full URL, be sure to pass the complete address starting with `https://...`\",\n            control: \"text\",\n            defaultValue: \"#\"\n        },\n        variant: {\n            description: \"Visual style of the link\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"primary-negative\", \"secondary-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size of the link text\",\n            control: \"select\",\n            options: [\"inherit\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"inherit\"\n        },\n        underline: {\n            description: \"Whether the link should be underlined by default\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        disabled: {\n            description: \"Whether the link is disabled\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        children: {\n            description: \"The content of the link. It can be any valid React node.\",\n            control: \"text\",\n            defaultValue: \"This is a link\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Link","Text","AdminUiProvider","NoopLinkComponent","to","props","createElement","Object","assign","href","onClick","e","preventDefault","meta","title","component","decorators","Story","linkComponent","argTypes","size","control","options","variant","Default","args","children","LinkXl","LinkLg","LinkMd","LinkSm","InheritedSize","name","render","linkProps","WithUnderline","underline","PrimaryNegative","className","SecondaryNegative","Documentation","disabled","description","defaultValue"],"sources":["Link.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Link } from \"./Link.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { AdminUiProvider } from \"~/AdminUiProvider/index.js\";\nimport { LinkComponentProps } from \"~/Link/LinkComponent.js\";\n\nconst NoopLinkComponent = ({ to, ...props }: LinkComponentProps) => {\n    return (\n        <a\n            href={to}\n            {...props}\n            onClick={e => {\n                e.preventDefault();\n            }}\n        />\n    );\n};\n\nconst meta: Meta<typeof Link> = {\n    title: \"Components/Link\",\n    component: Link,\n    decorators: [\n        (Story: React.ComponentType) => (\n            <AdminUiProvider linkComponent={NoopLinkComponent}>\n                <Story />\n            </AdminUiProvider>\n        )\n    ],\n    argTypes: {\n        size: { control: \"select\", options: [\"sm\", \"md\", \"lg\", \"xl\"] },\n        variant: { control: \"select\", options: [\"primary\", \"secondary\"] }\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Link>;\n\nexport const Default: Story = {\n    args: {\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkXl: Story = {\n    args: {\n        size: \"xl\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkLg: Story = {\n    args: {\n        size: \"lg\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkMd: Story = {\n    args: {\n        size: \"md\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const LinkSm: Story = {\n    args: {\n        size: \"sm\",\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const InheritedSize: Story = {\n    name: \"Link with inherited size\",\n    render: linkProps => {\n        return (\n            <Text>\n                <Text size=\"lg\">\n                    Size of this text is set to large, so,&nbsp;\n                    <Link {...linkProps}>this link&apos;s</Link> size is also automatically set to\n                    large.\n                </Text>\n            </Text>\n        );\n    },\n    args: {\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const WithUnderline: Story = {\n    args: {\n        underline: true,\n        to: \"#\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const PrimaryNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ],\n    render: args => {\n        return (\n            <Text>\n                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.\n                Fusce tempus tortor eu sapien interdum rhoncus.\n            </Text>\n        );\n    },\n    args: {\n        ...Default.args,\n        variant: \"primary-negative\"\n    }\n};\n\nexport const SecondaryNegative: Story = {\n    decorators: [\n        Story => (\n            <div className=\"bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ],\n    render: args => {\n        return (\n            <Text>\n                Lorem <Link {...args}>ipsum dolor sit amet</Link>, consectetur adipiscing elit.\n                Fusce tempus tortor eu sapien interdum rhoncus.\n            </Text>\n        );\n    },\n    args: {\n        ...Default.args,\n        variant: \"secondary-negative\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        to: \"#\",\n        variant: \"primary\",\n        size: \"md\",\n        underline: false,\n        disabled: false,\n        children: \"This is a link\"\n    },\n    argTypes: {\n        to: {\n            description:\n                \"The URL or path the link points to. If it’s a relative path, you can pass it as-is—it will automatically resolve based on the parent route. For a full URL, be sure to pass the complete address starting with `https://...`\",\n            control: \"text\",\n            defaultValue: \"#\"\n        },\n        variant: {\n            description: \"Visual style of the link\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"primary-negative\", \"secondary-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size of the link text\",\n            control: \"select\",\n            options: [\"inherit\", \"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"inherit\"\n        },\n        underline: {\n            description: \"Whether the link should be underlined by default\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        disabled: {\n            description: \"Whether the link is disabled\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        children: {\n            description: \"The content of the link. It can be any valid React node.\",\n            control: \"text\",\n            defaultValue: \"This is a link\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Link/LinkComponent.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type BaseAnchorAttributes = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">;
+export type LinkComponentProps = BaseAnchorAttributes & {
+    to: string;
+};
+export type LinkComponent = React.ComponentType<LinkComponentProps>;
+export {};

package/Link/LinkComponent.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=LinkComponent.js.map

package/Link/LinkComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["LinkComponent.tsx"],"sourcesContent":["import React from \"react\";\n\ntype BaseAnchorAttributes = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\">;\n\nexport type LinkComponentProps = BaseAnchorAttributes & {\n    to: string;\n};\n\nexport type LinkComponent = React.ComponentType<LinkComponentProps>;\n"],"mappings":"","ignoreList":[]}

package/Link/index.d.ts

@@ -1 +1,3 @@
-export * from "./Link";
+export * from "./DefaultLinkComponent.js";
+export * from "./Link.js";
+export * from "./LinkComponent.js";

package/Link/index.js

@@ -1,3 +1,5 @@
-export * from "./Link";
+export * from "./DefaultLinkComponent.js";
+export * from "./Link.js";
+export * from "./LinkComponent.js";
 
 //# sourceMappingURL=index.js.map

package/Link/index.js.map

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

package/List/List.d.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { type VariantProps } from "../utils";
-import { type ListItemProps } from "./components";
+import { type VariantProps } from "../utils.js";
+import { type ListItemProps } from "./components/index.js";
 declare const listVariants: (props?: ({
     variant?: "container" | "underline" | null | undefined;
     background?: "base" | "transparent" | "light" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
 interface ListProps extends VariantProps<typeof listVariants>, Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     children: React.ReactNode;
 }
@@ -21,104 +21,104 @@ declare const List: (({ children, variant, background, className, ...props }: Li
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element) & {
         original: ({ children, variant, background, className, ...props }: ListProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
-    Item: (({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
-        original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
+    Item: (({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
+        original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     } & {
-        original: (({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
-            original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
+        original: (({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
+            original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         };
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
-            original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element) & {
+            original: ({ actions, children, className, description, activated, disabled, selected, handle, icon, colorMark, sidePadding, onClick, title, ...props }: ListItemProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     } & {
-        Action: ((props: import("../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
-            original: (props: import("../Button/IconButton").IconButtonProps) => React.JSX.Element;
+        Action: ((props: import("./components/ListItemAction.js").ListItemActionProps) => React.JSX.Element) & {
+            original: (props: import("./components/ListItemAction.js").ListItemActionProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: ((props: import("../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
-                original: (props: import("../Button/IconButton").IconButtonProps) => React.JSX.Element;
+            original: ((props: import("./components/ListItemAction.js").ListItemActionProps) => React.JSX.Element) & {
+                original: (props: import("./components/ListItemAction.js").ListItemActionProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
-                original: (props: import("../Button/IconButton").IconButtonProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./components/ListItemAction.js").ListItemActionProps) => React.JSX.Element) & {
+                original: (props: import("./components/ListItemAction.js").ListItemActionProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         } & {
-            Separator: ((props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
-                original: (props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element;
+            Separator: ((props: import("./components/ListItemSeparator.js").ListItemSeparatorProps) => React.JSX.Element) & {
+                original: (props: import("./components/ListItemSeparator.js").ListItemSeparatorProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             } & {
-                original: ((props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
-                    original: (props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element;
+                original: ((props: import("./components/ListItemSeparator.js").ListItemSeparatorProps) => React.JSX.Element) & {
+                    original: (props: import("./components/ListItemSeparator.js").ListItemSeparatorProps) => React.JSX.Element;
                     originalName: string;
                     displayName: string;
                 };
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
-                    original: (props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element;
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./components/ListItemSeparator.js").ListItemSeparatorProps) => React.JSX.Element) & {
+                    original: (props: import("./components/ListItemSeparator.js").ListItemSeparatorProps) => React.JSX.Element;
                     originalName: string;
                     displayName: string;
                 }>) => (props: unknown) => React.JSX.Element;
             };
         };
-        Handle: ((props: import("./components/ListItemHandle").ListItemHandleProps) => React.JSX.Element) & {
-            original: (props: import("./components/ListItemHandle").ListItemHandleProps) => React.JSX.Element;
+        Handle: ((props: import("./components/ListItemHandle.js").ListItemHandleProps) => React.JSX.Element) & {
+            original: (props: import("./components/ListItemHandle.js").ListItemHandleProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: ((props: import("./components/ListItemHandle").ListItemHandleProps) => React.JSX.Element) & {
-                original: (props: import("./components/ListItemHandle").ListItemHandleProps) => React.JSX.Element;
+            original: ((props: import("./components/ListItemHandle.js").ListItemHandleProps) => React.JSX.Element) & {
+                original: (props: import("./components/ListItemHandle.js").ListItemHandleProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("./components/ListItemHandle").ListItemHandleProps) => React.JSX.Element) & {
-                original: (props: import("./components/ListItemHandle").ListItemHandleProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("./components/ListItemHandle.js").ListItemHandleProps) => React.JSX.Element) & {
+                original: (props: import("./components/ListItemHandle.js").ListItemHandleProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        Icon: ((props: import("../Icon/Icon").IconProps) => React.JSX.Element) & {
-            original: (props: import("../Icon/Icon").IconProps) => 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("../Icon/Icon").IconProps) => React.JSX.Element) & {
-                original: (props: import("../Icon/Icon").IconProps) => React.JSX.Element;
+            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").ComponentDecorator<((props: import("../Icon/Icon").IconProps) => React.JSX.Element) & {
-                original: (props: import("../Icon/Icon").IconProps) => React.JSX.Element;
+            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;