@webiny/admin-ui 0.0.0-unstable.eb196ccd2f → 0.0.0-unstable.eb81deee7e

package/Tabs/components/Content.js

@@ -1,33 +1,30 @@
-import * as React from "react";
-import { Tabs as TabsPrimitive } from "radix-ui";
-import { cn, cva } from "../../utils";
-const tabContentVariants = cva(["wby-bg-transparent", "focus-visible:wby-outline-none focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed",
-// By default, the inner content is removed by the DOM when the tab becomes inactive.
-// This is a problem when we need to keep track of the state inside a tab content, such as forms.
-//  We are force-mounting the tab content and this class ensures the content is hidden, but not removed from the DOM.
-"data-[state=inactive]:wby-hidden"], {
-  variants: {
-    spacing: {
-      xs: "wby-p-xs",
-      sm: "wby-p-sm",
-      md: "wby-p-md",
-      lg: "wby-p-lg",
-      xl: "wby-p-xl",
-      xxl: "wby-p-xxl"
+import { Tabs } from "radix-ui";
+import { cn, cva } from "../../utils.js";
+import * as __rspack_external_react from "react";
+const tabContentVariants = cva([
+    "bg-neutral-base",
+    "rounded-lg",
+    "focus-visible:outline-none focus-visible:ring-lg focus-visible:ring-primary-dimmed",
+    "data-[state=inactive]:hidden"
+], {
+    variants: {
+        spacing: {
+            xs: "p-xs",
+            sm: "p-sm",
+            md: "p-md",
+            lg: "p-lg",
+            xl: "p-xl",
+            xxl: "p-xxl"
+        }
     }
-  }
 });
-const Content = ({
-  className,
-  content,
-  spacing,
-  ...props
-}) => /*#__PURE__*/React.createElement(TabsPrimitive.Content, Object.assign({
-  className: cn(tabContentVariants({
-    spacing
-  }), className),
-  forceMount: true
-}, props), content);
+const Content = ({ className, content, spacing, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Tabs.Content, {
+        className: cn(tabContentVariants({
+            spacing
+        }), className),
+        forceMount: true,
+        ...props
+    }, content);
 export { Content };
 
 //# sourceMappingURL=Content.js.map

package/Tabs/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tabs","TabsPrimitive","cn","cva","tabContentVariants","variants","spacing","xs","sm","md","lg","xl","xxl","Content","className","content","props","createElement","Object","assign","forceMount"],"sources":["Content.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst tabContentVariants = cva(\n    [\n        \"wby-bg-transparent\",\n        \"focus-visible:wby-outline-none focus-visible:wby-ring-lg focus-visible:wby-ring-primary-dimmed\",\n        // By default, the inner content is removed by the DOM when the tab becomes inactive.\n        // This is a problem when we need to keep track of the state inside a tab content, such as forms.\n        //  We are force-mounting the tab content and this class ensures the content is hidden, but not removed from the DOM.\n        \"data-[state=inactive]:wby-hidden\"\n    ],\n    {\n        variants: {\n            spacing: {\n                xs: \"wby-p-xs\",\n                sm: \"wby-p-sm\",\n                md: \"wby-p-md\",\n                lg: \"wby-p-lg\",\n                xl: \"wby-p-xl\",\n                xxl: \"wby-p-xxl\"\n            }\n        }\n    }\n);\n\ntype ContentProps = Omit<TabsPrimitive.TabsContentProps, \"children\" | \"content\"> &\n    VariantProps<typeof tabContentVariants> & {\n        content: React.ReactNode;\n    };\n\nconst Content = ({ className, content, spacing, ...props }: ContentProps) => (\n    <TabsPrimitive.Content\n        className={cn(tabContentVariants({ spacing }), className)}\n        forceMount={true}\n        {...props}\n    >\n        {content}\n    </TabsPrimitive.Content>\n);\n\nexport { Content, type ContentProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,IAAIC,aAAa,QAAQ,UAAU;AAChD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,kBAAkB,GAAGD,GAAG,CAC1B,CACI,oBAAoB,EACpB,gGAAgG;AAChG;AACA;AACA;AACA,kCAAkC,CACrC,EACD;EACIE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,EAAE,EAAE,UAAU;MACdC,EAAE,EAAE,UAAU;MACdC,EAAE,EAAE,UAAU;MACdC,EAAE,EAAE,UAAU;MACdC,EAAE,EAAE,UAAU;MACdC,GAAG,EAAE;IACT;EACJ;AACJ,CACJ,CAAC;AAOD,MAAMC,OAAO,GAAGA,CAAC;EAAEC,SAAS;EAAEC,OAAO;EAAET,OAAO;EAAE,GAAGU;AAAoB,CAAC,kBACpEjB,KAAA,CAAAkB,aAAA,CAAChB,aAAa,CAACY,OAAO,EAAAK,MAAA,CAAAC,MAAA;EAClBL,SAAS,EAAEZ,EAAE,CAACE,kBAAkB,CAAC;IAAEE;EAAQ,CAAC,CAAC,EAAEQ,SAAS,CAAE;EAC1DM,UAAU,EAAE;AAAK,GACbJ,KAAK,GAERD,OACkB,CAC1B;AAED,SAASF,OAAO","ignoreList":[]}
+{"version":3,"file":"Tabs/components/Content.js","sources":["../../../src/Tabs/components/Content.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst tabContentVariants = cva(\n    [\n        \"bg-neutral-base\",\n        \"rounded-lg\",\n        \"focus-visible:outline-none focus-visible:ring-lg focus-visible:ring-primary-dimmed\",\n        // By default, the inner content is removed by the DOM when the tab becomes inactive.\n        // This is a problem when we need to keep track of the state inside a tab content, such as forms.\n        //  We are force-mounting the tab content and this class ensures the content is hidden, but not removed from the DOM.\n        \"data-[state=inactive]:hidden\"\n    ],\n    {\n        variants: {\n            spacing: {\n                xs: \"p-xs\",\n                sm: \"p-sm\",\n                md: \"p-md\",\n                lg: \"p-lg\",\n                xl: \"p-xl\",\n                xxl: \"p-xxl\"\n            }\n        }\n    }\n);\n\ntype ContentProps = Omit<TabsPrimitive.TabsContentProps, \"children\" | \"content\"> &\n    VariantProps<typeof tabContentVariants> & {\n        content: React.ReactNode;\n    };\n\nconst Content = ({ className, content, spacing, ...props }: ContentProps) => (\n    <TabsPrimitive.Content\n        className={cn(tabContentVariants({ spacing }), className)}\n        forceMount={true}\n        {...props}\n    >\n        {content}\n    </TabsPrimitive.Content>\n);\n\nexport { Content, type ContentProps };\n"],"names":["tabContentVariants","cva","Content","className","content","spacing","props","TabsPrimitive","cn"],"mappings":";;;AAIA,MAAMA,qBAAqBC,IACvB;IACI;IACA;IACA;IAIA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,KAAK;QACT;IACJ;AACJ;AAQJ,MAAMC,UAAU,CAAC,EAAEC,SAAS,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGC,OAAqB,iBACpE,sCAACC,KAAAA,OAAqB;QAClB,WAAWC,GAAGR,mBAAmB;YAAEK;QAAQ,IAAIF;QAC/C,YAAY;QACX,GAAGG,KAAK;OAERF"}

package/Tabs/components/Context.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { TabItem } from "./Tab";
+import type { TabItem } from "./Tab.js";
 interface ITabsContext {
     addTab(props: TabItem): void;
     removeTab(id: string): void;

package/Tabs/components/Context.js

@@ -1,5 +1,5 @@
 import { createContext } from "react";
-const TabsContext = /*#__PURE__*/createContext(undefined);
+const TabsContext = /*#__PURE__*/ createContext(void 0);
 export { TabsContext };
 
 //# sourceMappingURL=Context.js.map

package/Tabs/components/Context.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","TabsContext","undefined"],"sources":["Context.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { TabItem } from \"./Tab\";\n\ninterface ITabsContext {\n    addTab(props: TabItem): void;\n    removeTab(id: string): void;\n}\n\nconst TabsContext = createContext<ITabsContext | undefined>(undefined);\n\nexport { TabsContext, type ITabsContext };\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,OAAO;AAQrC,MAAMC,WAAW,gBAAGD,aAAa,CAA2BE,SAAS,CAAC;AAEtE,SAASD,WAAW","ignoreList":[]}
+{"version":3,"file":"Tabs/components/Context.js","sources":["../../../src/Tabs/components/Context.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport type { TabItem } from \"./Tab.js\";\n\ninterface ITabsContext {\n    addTab(props: TabItem): void;\n    removeTab(id: string): void;\n}\n\nconst TabsContext = createContext<ITabsContext | undefined>(undefined);\n\nexport { TabsContext, type ITabsContext };\n"],"names":["TabsContext","createContext","undefined"],"mappings":";AAQA,MAAMA,cAAc,WAAHA,GAAGC,cAAwCC"}

package/Tabs/components/List.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const tabListVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-    spacing?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | null | undefined;
+    spacing?: "lg" | "md" | "sm" | "xl" | "xs" | "xxl" | null | undefined;
     separator?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ListProps = TabsPrimitive.TabsListProps & VariantProps<typeof tabListVariants>;
 declare const List: ({ className, spacing, size, separator, ...props }: ListProps) => React.JSX.Element;
 export { List, type ListProps, tabListVariants };

package/Tabs/components/List.js

@@ -1,43 +1,38 @@
-import * as React from "react";
-import { Tabs as TabsPrimitive } from "radix-ui";
-import { cn, cva } from "../../utils";
-const tabListVariants = cva("wby-w-full wby-inline-flex wby-items-center wby-justify-start", {
-  variants: {
-    size: {
-      sm: "wby-gap-sm",
-      md: "wby-gap-sm",
-      lg: "wby-gap-sm-extra",
-      xl: "wby-gap-md"
+import { Tabs } from "radix-ui";
+import { cn, cva } from "../../utils.js";
+import * as __rspack_external_react from "react";
+const tabListVariants = cva("w-full inline-flex items-center justify-start", {
+    variants: {
+        size: {
+            sm: "gap-sm",
+            md: "gap-sm",
+            lg: "gap-sm-extra",
+            xl: "gap-md"
+        },
+        spacing: {
+            xs: "px-xs",
+            sm: "px-sm",
+            md: "px-md",
+            lg: "px-lg",
+            xl: "px-xl",
+            xxl: "px-xxl"
+        },
+        separator: {
+            true: "border-solid border-b-sm border-neutral-dimmed"
+        }
     },
-    spacing: {
-      xs: "wby-px-xs",
-      sm: "wby-px-sm",
-      md: "wby-px-md",
-      lg: "wby-px-lg",
-      xl: "wby-px-xl",
-      xxl: "wby-px-xxl"
-    },
-    separator: {
-      true: "wby-border-solid wby-border-b-sm wby-border-neutral-dimmed"
+    defaultVariants: {
+        size: "sm"
     }
-  },
-  defaultVariants: {
-    size: "sm"
-  }
 });
-const List = ({
-  className,
-  spacing,
-  size,
-  separator,
-  ...props
-}) => /*#__PURE__*/React.createElement(TabsPrimitive.List, Object.assign({
-  className: cn(tabListVariants({
-    spacing,
-    size,
-    separator
-  }), className)
-}, props));
+const List = ({ className, spacing, size, separator, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Tabs.List, {
+        className: cn(tabListVariants({
+            spacing,
+            size,
+            separator
+        }), className),
+        ...props
+    });
 export { List, tabListVariants };
 
 //# sourceMappingURL=List.js.map

package/Tabs/components/List.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tabs","TabsPrimitive","cn","cva","tabListVariants","variants","size","sm","md","lg","xl","spacing","xs","xxl","separator","true","defaultVariants","List","className","props","createElement","Object","assign"],"sources":["List.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst tabListVariants = cva(\"wby-w-full wby-inline-flex wby-items-center wby-justify-start\", {\n    variants: {\n        size: {\n            sm: \"wby-gap-sm\",\n            md: \"wby-gap-sm\",\n            lg: \"wby-gap-sm-extra\",\n            xl: \"wby-gap-md\"\n        },\n        spacing: {\n            xs: \"wby-px-xs\",\n            sm: \"wby-px-sm\",\n            md: \"wby-px-md\",\n            lg: \"wby-px-lg\",\n            xl: \"wby-px-xl\",\n            xxl: \"wby-px-xxl\"\n        },\n        separator: {\n            true: \"wby-border-solid wby-border-b-sm wby-border-neutral-dimmed\"\n        }\n    },\n    defaultVariants: {\n        size: \"sm\"\n    }\n});\n\ntype ListProps = TabsPrimitive.TabsListProps & VariantProps<typeof tabListVariants>;\n\nconst List = ({ className, spacing, size, separator, ...props }: ListProps) => (\n    <TabsPrimitive.List\n        className={cn(tabListVariants({ spacing, size, separator }), className)}\n        {...props}\n    />\n);\n\nexport { List, type ListProps, tabListVariants };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,IAAIC,aAAa,QAAQ,UAAU;AAChD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,eAAe,GAAGD,GAAG,CAAC,+DAA+D,EAAE;EACzFE,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE,kBAAkB;MACtBC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,EAAE,EAAE,WAAW;MACfL,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfG,GAAG,EAAE;IACT,CAAC;IACDC,SAAS,EAAE;MACPC,IAAI,EAAE;IACV;EACJ,CAAC;EACDC,eAAe,EAAE;IACbV,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAIF,MAAMW,IAAI,GAAGA,CAAC;EAAEC,SAAS;EAAEP,OAAO;EAAEL,IAAI;EAAEQ,SAAS;EAAE,GAAGK;AAAiB,CAAC,kBACtEpB,KAAA,CAAAqB,aAAA,CAACnB,aAAa,CAACgB,IAAI,EAAAI,MAAA,CAAAC,MAAA;EACfJ,SAAS,EAAEhB,EAAE,CAACE,eAAe,CAAC;IAAEO,OAAO;IAAEL,IAAI;IAAEQ;EAAU,CAAC,CAAC,EAAEI,SAAS;AAAE,GACpEC,KAAK,CACZ,CACJ;AAED,SAASF,IAAI,EAAkBb,eAAe","ignoreList":[]}
+{"version":3,"file":"Tabs/components/List.js","sources":["../../../src/Tabs/components/List.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst tabListVariants = cva(\"w-full inline-flex items-center justify-start\", {\n    variants: {\n        size: {\n            sm: \"gap-sm\",\n            md: \"gap-sm\",\n            lg: \"gap-sm-extra\",\n            xl: \"gap-md\"\n        },\n        spacing: {\n            xs: \"px-xs\",\n            sm: \"px-sm\",\n            md: \"px-md\",\n            lg: \"px-lg\",\n            xl: \"px-xl\",\n            xxl: \"px-xxl\"\n        },\n        separator: {\n            true: \"border-solid border-b-sm border-neutral-dimmed\"\n        }\n    },\n    defaultVariants: {\n        size: \"sm\"\n    }\n});\n\ntype ListProps = TabsPrimitive.TabsListProps & VariantProps<typeof tabListVariants>;\n\nconst List = ({ className, spacing, size, separator, ...props }: ListProps) => (\n    <TabsPrimitive.List\n        className={cn(tabListVariants({ spacing, size, separator }), className)}\n        {...props}\n    />\n);\n\nexport { List, type ListProps, tabListVariants };\n"],"names":["tabListVariants","cva","List","className","spacing","size","separator","props","TabsPrimitive","cn"],"mappings":";;;AAIA,MAAMA,kBAAkBC,IAAI,iDAAiD;IACzE,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,SAAS;YACL,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,KAAK;QACT;QACA,WAAW;YACP,MAAM;QACV;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAIA,MAAMC,OAAO,CAAC,EAAEC,SAAS,EAAEC,OAAO,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGC,OAAkB,iBACtE,sCAACC,KAAAA,IAAkB;QACf,WAAWC,GAAGT,gBAAgB;YAAEI;YAASC;YAAMC;QAAU,IAAIH;QAC5D,GAAGI,KAAK"}

package/Tabs/components/Tab.d.ts

@@ -1,6 +1,6 @@
 import type React from "react";
-import { type VariantProps } from "../../utils";
-import type { tabListVariants } from "./List";
+import { type VariantProps } from "../../utils.js";
+import type { tabListVariants } from "./List.js";
 interface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "content"> {
     value: string;
     trigger: React.ReactNode;
@@ -14,21 +14,22 @@ interface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"
 interface TabItem extends TabProps {
     id: string;
 }
-declare const Tab: ((props: TabProps) => null) & {
-    original: (props: TabProps) => null;
+declare const DecoratableTab: (props: TabProps) => null;
+declare const Tab: typeof DecoratableTab & {
+    original: typeof DecoratableTab;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: TabProps) => null) & {
-        original: (props: TabProps) => null;
+    original: typeof DecoratableTab & {
+        original: typeof DecoratableTab;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: TabProps) => null) & {
-        original: (props: TabProps) => null;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableTab & {
+        original: typeof DecoratableTab;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Tabs/components/Tab.js

@@ -1,22 +1,20 @@
 import { useContext, useEffect, useRef } from "react";
-import { makeDecoratable, generateId } from "../../utils";
-import { TabsContext } from "./Context";
-const DecoratableTab = props => {
-  const tabsContext = useContext(TabsContext);
-  const idRef = useRef(generateId());
-  useEffect(() => {
-    tabsContext.addTab({
-      ...props,
-      id: idRef.current,
-      visible: props.visible ?? true
-    });
-  }, [props]);
-  useEffect(() => {
-    return () => {
-      return tabsContext.removeTab(idRef.current);
-    };
-  }, []);
-  return null;
+import { generateId, makeDecoratable } from "../../utils.js";
+import { TabsContext } from "./Context.js";
+const DecoratableTab = (props)=>{
+    const tabsContext = useContext(TabsContext);
+    const idRef = useRef(generateId());
+    useEffect(()=>{
+        tabsContext.addTab({
+            ...props,
+            id: idRef.current,
+            visible: props.visible ?? true
+        });
+    }, [
+        props
+    ]);
+    useEffect(()=>()=>tabsContext.removeTab(idRef.current), []);
+    return null;
 };
 const Tab = makeDecoratable("Tab", DecoratableTab);
 export { Tab };

package/Tabs/components/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["useContext","useEffect","useRef","makeDecoratable","generateId","TabsContext","DecoratableTab","props","tabsContext","idRef","addTab","id","current","visible","removeTab","Tab"],"sources":["Tab.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useContext, useEffect, useRef } from \"react\";\nimport { makeDecoratable, generateId, type VariantProps } from \"~/utils\";\nimport { TabsContext } from \"./Context\";\nimport type { tabListVariants } from \"./List\";\n\ninterface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\" | \"content\"> {\n    value: string;\n    trigger: React.ReactNode;\n    content: React.ReactNode;\n    icon?: React.ReactElement;\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    disabled?: boolean;\n    visible?: boolean;\n    \"data-testid\"?: string;\n}\n\ninterface TabItem extends TabProps {\n    id: string;\n}\n\nconst DecoratableTab = (props: TabProps) => {\n    const tabsContext = useContext(TabsContext);\n    const idRef = useRef(generateId());\n\n    useEffect(() => {\n        tabsContext!.addTab({ ...props, id: idRef.current, visible: props.visible ?? true });\n    }, [props]);\n\n    useEffect(() => {\n        return () => {\n            return tabsContext!.removeTab(idRef.current);\n        };\n    }, []);\n\n    return null;\n};\n\nconst Tab = makeDecoratable(\"Tab\", DecoratableTab);\n\nexport { Tab, type TabProps, type TabItem };\n"],"mappings":"AACA,SAASA,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACrD,SAASC,eAAe,EAAEC,UAAU;AACpC,SAASC,WAAW;AAkBpB,MAAMC,cAAc,GAAIC,KAAe,IAAK;EACxC,MAAMC,WAAW,GAAGR,UAAU,CAACK,WAAW,CAAC;EAC3C,MAAMI,KAAK,GAAGP,MAAM,CAACE,UAAU,CAAC,CAAC,CAAC;EAElCH,SAAS,CAAC,MAAM;IACZO,WAAW,CAAEE,MAAM,CAAC;MAAE,GAAGH,KAAK;MAAEI,EAAE,EAAEF,KAAK,CAACG,OAAO;MAAEC,OAAO,EAAEN,KAAK,CAACM,OAAO,IAAI;IAAK,CAAC,CAAC;EACxF,CAAC,EAAE,CAACN,KAAK,CAAC,CAAC;EAEXN,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACT,OAAOO,WAAW,CAAEM,SAAS,CAACL,KAAK,CAACG,OAAO,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC;AAED,MAAMG,GAAG,GAAGZ,eAAe,CAAC,KAAK,EAAEG,cAAc,CAAC;AAElD,SAASS,GAAG","ignoreList":[]}
+{"version":3,"file":"Tabs/components/Tab.js","sources":["../../../src/Tabs/components/Tab.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useContext, useEffect, useRef } from \"react\";\nimport { makeDecoratable, generateId, type VariantProps } from \"~/utils.js\";\nimport { TabsContext } from \"./Context.js\";\nimport type { tabListVariants } from \"./List.js\";\n\ninterface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\" | \"content\"> {\n    value: string;\n    trigger: React.ReactNode;\n    content: React.ReactNode;\n    icon?: React.ReactElement;\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    disabled?: boolean;\n    visible?: boolean;\n    \"data-testid\"?: string;\n}\n\ninterface TabItem extends TabProps {\n    id: string;\n}\n\nconst DecoratableTab = (props: TabProps) => {\n    const tabsContext = useContext(TabsContext);\n    const idRef = useRef(generateId());\n\n    useEffect(() => {\n        tabsContext!.addTab({ ...props, id: idRef.current, visible: props.visible ?? true });\n    }, [props]);\n\n    useEffect(() => {\n        return () => {\n            return tabsContext!.removeTab(idRef.current);\n        };\n    }, []);\n\n    return null;\n};\n\nconst Tab = makeDecoratable(\"Tab\", DecoratableTab);\n\nexport { Tab, type TabProps, type TabItem };\n"],"names":["DecoratableTab","props","tabsContext","useContext","TabsContext","idRef","useRef","generateId","useEffect","Tab","makeDecoratable"],"mappings":";;;AAqBA,MAAMA,iBAAiB,CAACC;IACpB,MAAMC,cAAcC,WAAWC;IAC/B,MAAMC,QAAQC,OAAOC;IAErBC,UAAU;QACNN,YAAa,MAAM,CAAC;YAAE,GAAGD,KAAK;YAAE,IAAII,MAAM,OAAO;YAAE,SAASJ,MAAM,OAAO,IAAI;QAAK;IACtF,GAAG;QAACA;KAAM;IAEVO,UAAU,IACC,IACIN,YAAa,SAAS,CAACG,MAAM,OAAO,GAEhD,EAAE;IAEL,OAAO;AACX;AAEA,MAAMI,MAAMC,gBAAgB,OAAOV"}

package/Tabs/components/Trigger.d.ts

@@ -1,14 +1,15 @@
 import * as React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const tabTriggerVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | null | undefined;
     visible?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type TriggerProps = Omit<TabsPrimitive.TabsTriggerProps, "children"> & VariantProps<typeof tabTriggerVariants> & {
     text: React.ReactNode;
     icon?: React.ReactElement;
+    loading?: boolean;
     "data-testid"?: string;
 };
-declare const Trigger: ({ className, size, icon, text, visible, ...props }: TriggerProps) => React.JSX.Element;
+declare const Trigger: ({ className, size, icon, text, visible, loading, ...props }: TriggerProps) => React.JSX.Element;
 export { Trigger, type TriggerProps };

package/Tabs/components/Trigger.js

@@ -1,58 +1,67 @@
-import * as React from "react";
-import { Tabs as TabsPrimitive } from "radix-ui";
-import { cn, cva } from "../../utils";
-import { Icon } from "../../Icon";
-const tabTriggerVariants = cva(["wby-group wby-inline-flex wby-items-center wby-justify-center wby-whitespace-nowrap wby-outline-none wby-transition-all", "wby-text-neutral-strong hover:text-neutral-primary", "wby-border-b-md wby-border-transparent wby-border-solid", "data-[state=active]:wby-border-accent-default data-[state=active]:wby-text-neutral-primary", "disabled:wby-pointer-events-none disabled:!wby-text-neutral-disabled disabled:!wby-fill-neutral-disabled disabled:!wby-border-transparent"], {
-  variants: {
-    size: {
-      sm: "wby-text-sm wby-h-[40px]",
-      md: "wby-text-md wby-h-[48px]",
-      lg: "wby-text-lg wby-h-[56px]",
-      xl: "wby-text-xl wby-h-[64px]"
+import { Tabs } from "radix-ui";
+import { cn, cva } from "../../utils.js";
+import { Icon } from "../../Icon/index.js";
+import { Skeleton } from "../../Skeleton/index.js";
+import * as __rspack_external_react from "react";
+const tabTriggerVariants = cva([
+    "group inline-flex items-center justify-center whitespace-nowrap outline-none transition-all",
+    "text-neutral-strong hover:text-neutral-primary",
+    "border-b-md border-transparent border-solid",
+    "data-[state=active]:border-accent-default data-[state=active]:text-neutral-primary",
+    "disabled:pointer-events-none disabled:text-neutral-disabled! disabled:fill-neutral-disabled! disabled:border-transparent!"
+], {
+    variants: {
+        size: {
+            sm: "text-sm h-[40px]",
+            md: "text-md h-xxl",
+            lg: "text-lg h-[56px]",
+            xl: "text-xl h-3xl"
+        },
+        visible: {
+            false: "hidden"
+        }
     },
-    visible: {
-      false: "wby-hidden"
+    defaultVariants: {
+        size: "sm"
     }
-  },
-  defaultVariants: {
-    size: "sm"
-  }
 });
-const innerTabTriggerVariants = cva(["wby-inline-flex wby-items-center wby-justify-start wby-gap-xs", "group-hover:wby-bg-neutral-dimmed", "group-focus-visible:wby-ring-lg group-focus-visible:wby-ring-primary-dimmed"], {
-  variants: {
-    size: {
-      sm: "wby-rounded-sm wby-p-xs",
-      md: "wby-rounded-sm wby-px-xs wby-py-xs-plus",
-      lg: "wby-rounded-sm wby-px-xs-plus wby-py-sm-plus",
-      xl: "wby-rounded-lg wby-px-sm wby-py-sm-plus"
+const innerTabTriggerVariants = cva([
+    "inline-flex items-center justify-start gap-xs",
+    "group-hover:bg-neutral-dimmed",
+    "group-focus-visible:ring-lg group-focus-visible:ring-primary-dimmed"
+], {
+    variants: {
+        size: {
+            sm: "rounded-sm p-xs",
+            md: "rounded-sm px-xs py-xs-plus",
+            lg: "rounded-sm px-xs-plus py-sm-plus",
+            xl: "rounded-lg px-sm py-sm-plus"
+        }
+    },
+    defaultVariants: {
+        size: "sm"
     }
-  },
-  defaultVariants: {
-    size: "sm"
-  }
 });
-const Trigger = ({
-  className,
-  size,
-  icon,
-  text,
-  visible,
-  ...props
-}) => /*#__PURE__*/React.createElement(TabsPrimitive.Trigger, Object.assign({
-  className: cn(tabTriggerVariants({
-    size,
-    visible
-  }), className)
-}, props), /*#__PURE__*/React.createElement("div", {
-  className: cn(innerTabTriggerVariants({
-    size
-  }))
-}, icon && /*#__PURE__*/React.createElement(Icon, {
-  icon: icon,
-  size: "sm",
-  label: String(text),
-  color: "neutral-light"
-}), text));
+const Trigger = ({ className, size, icon, text, visible, loading, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Tabs.Trigger, {
+        className: cn(tabTriggerVariants({
+            size,
+            visible
+        }), className),
+        ...props
+    }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: cn(innerTabTriggerVariants({
+            size
+        }))
+    }, loading ? /*#__PURE__*/ __rspack_external_react.createElement(Skeleton, {
+        type: "text",
+        size: "md",
+        className: "w-[64px]"
+    }) : /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, icon && /*#__PURE__*/ __rspack_external_react.createElement(Icon, {
+        icon: icon,
+        size: "sm",
+        label: String(text),
+        color: "neutral-light"
+    }), text)));
 export { Trigger };
 
 //# sourceMappingURL=Trigger.js.map

package/Tabs/components/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tabs","TabsPrimitive","cn","cva","Icon","tabTriggerVariants","variants","size","sm","md","lg","xl","visible","false","defaultVariants","innerTabTriggerVariants","Trigger","className","icon","text","props","createElement","Object","assign","label","String","color"],"sources":["Trigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\nimport { Icon } from \"~/Icon\";\n\nconst tabTriggerVariants = cva(\n    [\n        \"wby-group wby-inline-flex wby-items-center wby-justify-center wby-whitespace-nowrap wby-outline-none wby-transition-all\",\n        \"wby-text-neutral-strong hover:text-neutral-primary\",\n        \"wby-border-b-md wby-border-transparent wby-border-solid\",\n        \"data-[state=active]:wby-border-accent-default data-[state=active]:wby-text-neutral-primary\",\n        \"disabled:wby-pointer-events-none disabled:!wby-text-neutral-disabled disabled:!wby-fill-neutral-disabled disabled:!wby-border-transparent\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"wby-text-sm wby-h-[40px]\",\n                md: \"wby-text-md wby-h-[48px]\",\n                lg: \"wby-text-lg wby-h-[56px]\",\n                xl: \"wby-text-xl wby-h-[64px]\"\n            },\n            visible: {\n                false: \"wby-hidden\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\nconst innerTabTriggerVariants = cva(\n    [\n        \"wby-inline-flex wby-items-center wby-justify-start wby-gap-xs\",\n        \"group-hover:wby-bg-neutral-dimmed\",\n        \"group-focus-visible:wby-ring-lg group-focus-visible:wby-ring-primary-dimmed\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"wby-rounded-sm wby-p-xs\",\n                md: \"wby-rounded-sm wby-px-xs wby-py-xs-plus\",\n                lg: \"wby-rounded-sm wby-px-xs-plus wby-py-sm-plus\",\n                xl: \"wby-rounded-lg wby-px-sm wby-py-sm-plus\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\ntype TriggerProps = Omit<TabsPrimitive.TabsTriggerProps, \"children\"> &\n    VariantProps<typeof tabTriggerVariants> & {\n        text: React.ReactNode;\n        icon?: React.ReactElement;\n        \"data-testid\"?: string;\n    };\n\nconst Trigger = ({ className, size, icon, text, visible, ...props }: TriggerProps) => (\n    <TabsPrimitive.Trigger\n        className={cn(tabTriggerVariants({ size, visible }), className)}\n        {...props}\n    >\n        <div className={cn(innerTabTriggerVariants({ size }))}>\n            {icon && <Icon icon={icon} size={\"sm\"} label={String(text)} color={\"neutral-light\"} />}\n            {text}\n        </div>\n    </TabsPrimitive.Trigger>\n);\n\nexport { Trigger, type TriggerProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,IAAIC,aAAa,QAAQ,UAAU;AAChD,SAASC,EAAE,EAAEC,GAAG;AAChB,SAASC,IAAI;AAEb,MAAMC,kBAAkB,GAAGF,GAAG,CAC1B,CACI,yHAAyH,EACzH,oDAAoD,EACpD,yDAAyD,EACzD,4FAA4F,EAC5F,2IAA2I,CAC9I,EACD;EACIG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,0BAA0B;MAC9BC,EAAE,EAAE,0BAA0B;MAC9BC,EAAE,EAAE,0BAA0B;MAC9BC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,IAAI,EAAE;EACV;AACJ,CACJ,CAAC;AAED,MAAMQ,uBAAuB,GAAGZ,GAAG,CAC/B,CACI,+DAA+D,EAC/D,mCAAmC,EACnC,6EAA6E,CAChF,EACD;EACIG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,yBAAyB;MAC7BC,EAAE,EAAE,yCAAyC;MAC7CC,EAAE,EAAE,8CAA8C;MAClDC,EAAE,EAAE;IACR;EACJ,CAAC;EACDG,eAAe,EAAE;IACbP,IAAI,EAAE;EACV;AACJ,CACJ,CAAC;AASD,MAAMS,OAAO,GAAGA,CAAC;EAAEC,SAAS;EAAEV,IAAI;EAAEW,IAAI;EAAEC,IAAI;EAAEP,OAAO;EAAE,GAAGQ;AAAoB,CAAC,kBAC7ErB,KAAA,CAAAsB,aAAA,CAACpB,aAAa,CAACe,OAAO,EAAAM,MAAA,CAAAC,MAAA;EAClBN,SAAS,EAAEf,EAAE,CAACG,kBAAkB,CAAC;IAAEE,IAAI;IAAEK;EAAQ,CAAC,CAAC,EAAEK,SAAS;AAAE,GAC5DG,KAAK,gBAETrB,KAAA,CAAAsB,aAAA;EAAKJ,SAAS,EAAEf,EAAE,CAACa,uBAAuB,CAAC;IAAER;EAAK,CAAC,CAAC;AAAE,GACjDW,IAAI,iBAAInB,KAAA,CAAAsB,aAAA,CAACjB,IAAI;EAACc,IAAI,EAAEA,IAAK;EAACX,IAAI,EAAE,IAAK;EAACiB,KAAK,EAAEC,MAAM,CAACN,IAAI,CAAE;EAACO,KAAK,EAAE;AAAgB,CAAE,CAAC,EACrFP,IACA,CACc,CAC1B;AAED,SAASH,OAAO","ignoreList":[]}
+{"version":3,"file":"Tabs/components/Trigger.js","sources":["../../../src/Tabs/components/Trigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { Skeleton } from \"~/Skeleton/index.js\";\n\nconst tabTriggerVariants = cva(\n    [\n        \"group inline-flex items-center justify-center whitespace-nowrap outline-none transition-all\",\n        \"text-neutral-strong hover:text-neutral-primary\",\n        \"border-b-md border-transparent border-solid\",\n        \"data-[state=active]:border-accent-default data-[state=active]:text-neutral-primary\",\n        \"disabled:pointer-events-none disabled:text-neutral-disabled! disabled:fill-neutral-disabled! disabled:border-transparent!\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"text-sm h-[40px]\",\n                md: \"text-md h-xxl\",\n                lg: \"text-lg h-[56px]\",\n                xl: \"text-xl h-3xl\"\n            },\n            visible: {\n                false: \"hidden\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\nconst innerTabTriggerVariants = cva(\n    [\n        \"inline-flex items-center justify-start gap-xs\",\n        \"group-hover:bg-neutral-dimmed\",\n        \"group-focus-visible:ring-lg group-focus-visible:ring-primary-dimmed\"\n    ],\n    {\n        variants: {\n            size: {\n                sm: \"rounded-sm p-xs\",\n                md: \"rounded-sm px-xs py-xs-plus\",\n                lg: \"rounded-sm px-xs-plus py-sm-plus\",\n                xl: \"rounded-lg px-sm py-sm-plus\"\n            }\n        },\n        defaultVariants: {\n            size: \"sm\"\n        }\n    }\n);\n\ntype TriggerProps = Omit<TabsPrimitive.TabsTriggerProps, \"children\"> &\n    VariantProps<typeof tabTriggerVariants> & {\n        text: React.ReactNode;\n        icon?: React.ReactElement;\n        loading?: boolean;\n        \"data-testid\"?: string;\n    };\n\nconst Trigger = ({ className, size, icon, text, visible, loading, ...props }: TriggerProps) => (\n    <TabsPrimitive.Trigger\n        className={cn(tabTriggerVariants({ size, visible }), className)}\n        {...props}\n    >\n        <div className={cn(innerTabTriggerVariants({ size }))}>\n            {loading ? (\n                <Skeleton type={\"text\"} size={\"md\"} className={\"w-[64px]\"} />\n            ) : (\n                <>\n                    {icon && (\n                        <Icon\n                            icon={icon}\n                            size={\"sm\"}\n                            label={String(text)}\n                            color={\"neutral-light\"}\n                        />\n                    )}\n                    {text}\n                </>\n            )}\n        </div>\n    </TabsPrimitive.Trigger>\n);\n\nexport { Trigger, type TriggerProps };\n"],"names":["tabTriggerVariants","cva","innerTabTriggerVariants","Trigger","className","size","icon","text","visible","loading","props","TabsPrimitive","cn","Skeleton","Icon","String"],"mappings":";;;;;AAMA,MAAMA,qBAAqBC,IACvB;IACI;IACA;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,SAAS;YACL,OAAO;QACX;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAGJ,MAAMC,0BAA0BD,IAC5B;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,MAAM;YACF,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAWJ,MAAME,UAAU,CAAC,EAAEC,SAAS,EAAEC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGC,OAAqB,iBACtF,sCAACC,KAAAA,OAAqB;QAClB,WAAWC,GAAGZ,mBAAmB;YAAEK;YAAMG;QAAQ,IAAIJ;QACpD,GAAGM,KAAK;qBAET,sCAAC;QAAI,WAAWE,GAAGV,wBAAwB;YAAEG;QAAK;OAC7CI,UAAU,WAAVA,GACG,sCAACI,UAAQA;QAAC,MAAM;QAAQ,MAAM;QAAM,WAAW;uBAE/C,8EACKP,QAAQ,WAARA,GACG,sCAACQ,MAAIA;QACD,MAAMR;QACN,MAAM;QACN,OAAOS,OAAOR;QACd,OAAO;QAGdA"}

package/Tabs/components/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./Content";
-export * from "./Context";
-export * from "./List";
-export * from "./Tab";
-export * from "./Trigger";
+export * from "./Content.js";
+export * from "./Context.js";
+export * from "./List.js";
+export * from "./Tab.js";
+export * from "./Trigger.js";

package/Tabs/components/index.js

@@ -1,7 +1,5 @@
-export * from "./Content";
-export * from "./Context";
-export * from "./List";
-export * from "./Tab";
-export * from "./Trigger";
-
-//# sourceMappingURL=index.js.map
+export * from "./Content.js";
+export * from "./Context.js";
+export * from "./List.js";
+export * from "./Tab.js";
+export * from "./Trigger.js";

package/Tabs/index.d.ts

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

package/Tabs/index.js

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

package/Tag/Tag.d.ts

@@ -1,33 +1,37 @@
 import * as React from "react";
-import { type VariantProps } from "../utils";
+import { type VariantProps } from "../utils.js";
 declare const tagVariants: (props?: ({
     isInteractive?: boolean | null | undefined;
     isDismissible?: boolean | null | undefined;
     isDisabled?: boolean | null | undefined;
-    variant?: "accent" | "neutral-light" | "neutral-strong" | "neutral-base" | "success" | "warning" | "neutral-base-outline" | "neutral-muted" | "neutral-xstrong" | "neutral-dark" | "accent-light" | "success-light" | "destructive" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+    variant?: "accent" | "accent-light" | "destructive" | "neutral-base" | "neutral-base-outline" | "neutral-dark" | "neutral-light" | "neutral-muted" | "neutral-strong" | "neutral-xstrong" | "success" | "success-light" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "content">, VariantProps<typeof tagVariants> {
     content: React.ReactNode;
     onDismiss?: (event: React.SyntheticEvent<HTMLSpanElement>) => void;
     dismissIconElement?: React.ReactElement;
     dismissIconLabel?: string;
+    swatchColor?: string;
+    swatchColorIcon?: boolean;
+    icon?: React.ReactElement | null;
     disabled?: boolean;
 }
-declare const Tag: (({ className, variant, content, onClick, onDismiss, dismissIconElement, dismissIconLabel, disabled, ...props }: TagProps) => React.JSX.Element) & {
-    original: ({ className, variant, content, onClick, onDismiss, dismissIconElement, dismissIconLabel, disabled, ...props }: TagProps) => React.JSX.Element;
+declare const DecoratableTag: (props: TagProps) => React.JSX.Element;
+declare const Tag: typeof DecoratableTag & {
+    original: typeof DecoratableTag;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, variant, content, onClick, onDismiss, dismissIconElement, dismissIconLabel, disabled, ...props }: TagProps) => React.JSX.Element) & {
-        original: ({ className, variant, content, onClick, onDismiss, dismissIconElement, dismissIconLabel, disabled, ...props }: TagProps) => React.JSX.Element;
+    original: typeof DecoratableTag & {
+        original: typeof DecoratableTag;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, variant, content, onClick, onDismiss, dismissIconElement, dismissIconLabel, disabled, ...props }: TagProps) => React.JSX.Element) & {
-        original: ({ className, variant, content, onClick, onDismiss, dismissIconElement, dismissIconLabel, disabled, ...props }: TagProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableTag & {
+        original: typeof DecoratableTag;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;