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

package/Table/components/Direction.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { ReactComponent as ArrowDown } from "@webiny/icons/keyboard_arrow_up.svg";
-import { Icon } from "../../Icon";
-import { cn, cva } from "../../utils";
-const directionVariants = cva("wby-inline", {
+import { Icon } from "../../Icon/index.js";
+import { cn, cva } from "../../utils.js";
+const directionVariants = cva("inline", {
   variants: {
     direction: {
-      asc: "wby-rotate-0",
-      desc: "wby-rotate-180"
+      asc: "rotate-0",
+      desc: "rotate-180"
     }
   }
 });

package/Table/components/Direction.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","ArrowDown","Icon","cn","cva","directionVariants","variants","direction","asc","desc","Direction","className","createElement","size","icon","label","color"],"sources":["Direction.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/keyboard_arrow_up.svg\";\nimport { Icon } from \"~/Icon\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst directionVariants = cva(\"wby-inline\", {\n    variants: {\n        direction: {\n            asc: \"wby-rotate-0\",\n            desc: \"wby-rotate-180\"\n        }\n    }\n});\n\ninterface DirectionProps\n    extends React.HTMLAttributes<HTMLSpanElement>,\n        VariantProps<typeof directionVariants> {}\n\nconst Direction = ({ className, direction }: DirectionProps) => {\n    if (!direction) {\n        return null;\n    }\n\n    return (\n        <Icon\n            className={cn(directionVariants({ direction }), className)}\n            size=\"sm\"\n            icon={<ArrowDown />}\n            label={\"Sort column\"}\n            color={\"neutral-strong\"}\n        />\n    );\n};\n\nexport { Direction, type DirectionProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,SAAS,QAAQ,qCAAqC;AACjF,SAASC,IAAI;AACb,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,iBAAiB,GAAGD,GAAG,CAAC,YAAY,EAAE;EACxCE,QAAQ,EAAE;IACNC,SAAS,EAAE;MACPC,GAAG,EAAE,cAAc;MACnBC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAMF,MAAMC,SAAS,GAAGA,CAAC;EAAEC,SAAS;EAAEJ;AAA0B,CAAC,KAAK;EAC5D,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,IAAI;EACf;EAEA,oBACIR,KAAA,CAAAa,aAAA,CAACV,IAAI;IACDS,SAAS,EAAER,EAAE,CAACE,iBAAiB,CAAC;MAAEE;IAAU,CAAC,CAAC,EAAEI,SAAS,CAAE;IAC3DE,IAAI,EAAC,IAAI;IACTC,IAAI,eAAEf,KAAA,CAAAa,aAAA,CAACX,SAAS,MAAE,CAAE;IACpBc,KAAK,EAAE,aAAc;IACrBC,KAAK,EAAE;EAAiB,CAC3B,CAAC;AAEV,CAAC;AAED,SAASN,SAAS","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","ArrowDown","Icon","cn","cva","directionVariants","variants","direction","asc","desc","Direction","className","createElement","size","icon","label","color"],"sources":["Direction.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/keyboard_arrow_up.svg\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst directionVariants = cva(\"inline\", {\n    variants: {\n        direction: {\n            asc: \"rotate-0\",\n            desc: \"rotate-180\"\n        }\n    }\n});\n\ninterface DirectionProps\n    extends React.HTMLAttributes<HTMLSpanElement>,\n        VariantProps<typeof directionVariants> {}\n\nconst Direction = ({ className, direction }: DirectionProps) => {\n    if (!direction) {\n        return null;\n    }\n\n    return (\n        <Icon\n            className={cn(directionVariants({ direction }), className)}\n            size=\"sm\"\n            icon={<ArrowDown />}\n            label={\"Sort column\"}\n            color={\"neutral-strong\"}\n        />\n    );\n};\n\nexport { Direction, type DirectionProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,SAAS,QAAQ,qCAAqC;AACjF,SAASC,IAAI;AACb,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,iBAAiB,GAAGD,GAAG,CAAC,QAAQ,EAAE;EACpCE,QAAQ,EAAE;IACNC,SAAS,EAAE;MACPC,GAAG,EAAE,UAAU;MACfC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAMF,MAAMC,SAAS,GAAGA,CAAC;EAAEC,SAAS;EAAEJ;AAA0B,CAAC,KAAK;EAC5D,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,IAAI;EACf;EAEA,oBACIR,KAAA,CAAAa,aAAA,CAACV,IAAI;IACDS,SAAS,EAAER,EAAE,CAACE,iBAAiB,CAAC;MAAEE;IAAU,CAAC,CAAC,EAAEI,SAAS,CAAE;IAC3DE,IAAI,EAAC,IAAI;IACTC,IAAI,eAAEf,KAAA,CAAAa,aAAA,CAACX,SAAS,MAAE,CAAE;IACpBc,KAAK,EAAE,aAAc;IACrBC,KAAK,EAAE;EAAiB,CAC3B,CAAC;AAEV,CAAC;AAED,SAASN,SAAS","ignoreList":[]}

package/Table/components/Footer.js

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { cn } from "../../utils";
+import { cn } from "../../utils.js";
 const Footer = ({
   className,
   ...props
 }) => /*#__PURE__*/React.createElement("tfoot", Object.assign({
-  className: cn("wby-border-t wby-bg-muted/50 wby-font-medium [&>tr]:last:wby-border-b-0", className)
+  className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)
 }, props));
 export { Footer };
 

package/Table/components/Footer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","Footer","className","props","createElement","Object","assign"],"sources":["Footer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"~/utils\";\n\nconst Footer = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (\n    <tfoot\n        className={cn(\n            \"wby-border-t wby-bg-muted/50 wby-font-medium [&>tr]:last:wby-border-b-0\",\n            className\n        )}\n        {...props}\n    />\n);\n\nexport { Footer };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE;AAEX,MAAMC,MAAM,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAAqD,CAAC,kBAClFJ,KAAA,CAAAK,aAAA,UAAAC,MAAA,CAAAC,MAAA;EACIJ,SAAS,EAAEF,EAAE,CACT,yEAAyE,EACzEE,SACJ;AAAE,GACEC,KAAK,CACZ,CACJ;AAED,SAASF,MAAM","ignoreList":[]}
+{"version":3,"names":["React","cn","Footer","className","props","createElement","Object","assign"],"sources":["Footer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"~/utils.js\";\n\nconst Footer = ({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (\n    <tfoot\n        className={cn(\"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\", className)}\n        {...props}\n    />\n);\n\nexport { Footer };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE;AAEX,MAAMC,MAAM,GAAGA,CAAC;EAAEC,SAAS;EAAE,GAAGC;AAAqD,CAAC,kBAClFJ,KAAA,CAAAK,aAAA,UAAAC,MAAA,CAAAC,MAAA;EACIJ,SAAS,EAAEF,EAAE,CAAC,yDAAyD,EAAEE,SAAS;AAAE,GAChFC,KAAK,CACZ,CACJ;AAED,SAASF,MAAM","ignoreList":[]}

package/Table/components/Head.js

@@ -1,11 +1,11 @@
 import * as React from "react";
-import { cn } from "../../utils";
+import { cn } from "../../utils.js";
 const Head = ({
   className,
   children,
   ...props
 }) => /*#__PURE__*/React.createElement("th", Object.assign({
-  className: cn(["wby-box-border wby-relative wby-px-md wby-py-sm wby-text-sm wby-text-left wby-align-middle wby-font-normal wby-text-neutral-strong wby-fill-neutral-xstrong", "hover:wby-bg-neutral-subtle", "wby-overflow-hidden wby-whitespace-nowrap wby-truncate", "[&:has([role=checkbox])]:wby-pl-lg", "wby-text-0 wby-leading-none"], className)
+  className: cn(["box-border relative px-md py-sm text-sm text-left align-middle font-normal text-neutral-strong fill-neutral-xstrong", "hover:bg-neutral-subtle", "overflow-hidden whitespace-nowrap truncate", "[&:has([role=checkbox])]:pl-lg", "leading-none"], className)
 }, props), children);
 export { Head };
 

package/Table/components/Head.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","Head","className","children","props","createElement","Object","assign"],"sources":["Head.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"~/utils\";\n\nconst Head = ({ className, children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) => (\n    <th\n        className={cn(\n            [\n                \"wby-box-border wby-relative wby-px-md wby-py-sm wby-text-sm wby-text-left wby-align-middle wby-font-normal wby-text-neutral-strong wby-fill-neutral-xstrong\",\n                \"hover:wby-bg-neutral-subtle\",\n                \"wby-overflow-hidden wby-whitespace-nowrap wby-truncate\",\n                \"[&:has([role=checkbox])]:wby-pl-lg\",\n                \"wby-text-0 wby-leading-none\"\n            ],\n            className\n        )}\n        {...props}\n    >\n        {children}\n    </th>\n);\n\nexport { Head };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE;AAEX,MAAMC,IAAI,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAoD,CAAC,kBACzFL,KAAA,CAAAM,aAAA,OAAAC,MAAA,CAAAC,MAAA;EACIL,SAAS,EAAEF,EAAE,CACT,CACI,6JAA6J,EAC7J,6BAA6B,EAC7B,wDAAwD,EACxD,oCAAoC,EACpC,6BAA6B,CAChC,EACDE,SACJ;AAAE,GACEE,KAAK,GAERD,QACD,CACP;AAED,SAASF,IAAI","ignoreList":[]}
+{"version":3,"names":["React","cn","Head","className","children","props","createElement","Object","assign"],"sources":["Head.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"~/utils.js\";\n\nconst Head = ({ className, children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) => (\n    <th\n        className={cn(\n            [\n                \"box-border relative px-md py-sm text-sm text-left align-middle font-normal text-neutral-strong fill-neutral-xstrong\",\n                \"hover:bg-neutral-subtle\",\n                \"overflow-hidden whitespace-nowrap truncate\",\n                \"[&:has([role=checkbox])]:pl-lg\",\n                \"leading-none\"\n            ],\n            className\n        )}\n        {...props}\n    >\n        {children}\n    </th>\n);\n\nexport { Head };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE;AAEX,MAAMC,IAAI,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAoD,CAAC,kBACzFL,KAAA,CAAAM,aAAA,OAAAC,MAAA,CAAAC,MAAA;EACIL,SAAS,EAAEF,EAAE,CACT,CACI,qHAAqH,EACrH,yBAAyB,EACzB,4CAA4C,EAC5C,gCAAgC,EAChC,cAAc,CACjB,EACDE,SACJ;AAAE,GACEE,KAAK,GAERD,QACD,CACP;AAED,SAASF,IAAI","ignoreList":[]}

package/Table/components/Header.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const headerVariants: (props?: ({
     sticky?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/Table/components/Header.js

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { cn, cva } from "../../utils";
-const headerVariants = cva("[&_tr]:hover:wby-bg-transparent", {
+import { cn, cva } from "../../utils.js";
+const headerVariants = cva("[&_tr]:hover:bg-transparent", {
   variants: {
     sticky: {
-      true: "[&_tr]:wby-bg-white [&_tr]:hover:wby-bg-white wby-sticky wby-top-0"
+      true: "[&_tr]:bg-white [&_tr]:hover:bg-white sticky top-0"
     }
   }
 });

package/Table/components/Header.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","headerVariants","variants","sticky","true","Header","className","props","createElement","Object","assign"],"sources":["Header.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst headerVariants = cva(\"[&_tr]:hover:wby-bg-transparent\", {\n    variants: {\n        sticky: {\n            true: \"[&_tr]:wby-bg-white [&_tr]:hover:wby-bg-white wby-sticky wby-top-0\"\n        }\n    }\n});\n\ninterface HeaderProps\n    extends React.HTMLAttributes<HTMLTableSectionElement>,\n        VariantProps<typeof headerVariants> {}\n\nconst Header = ({ className, sticky, ...props }: HeaderProps) => (\n    <thead className={cn(headerVariants({ sticky }), className)} {...props} />\n);\n\nexport { Header, type HeaderProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,cAAc,GAAGD,GAAG,CAAC,iCAAiC,EAAE;EAC1DE,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAMF,MAAMC,MAAM,GAAGA,CAAC;EAAEC,SAAS;EAAEH,MAAM;EAAE,GAAGI;AAAmB,CAAC,kBACxDT,KAAA,CAAAU,aAAA,UAAAC,MAAA,CAAAC,MAAA;EAAOJ,SAAS,EAAEP,EAAE,CAACE,cAAc,CAAC;IAAEE;EAAO,CAAC,CAAC,EAAEG,SAAS;AAAE,GAAKC,KAAK,CAAG,CAC5E;AAED,SAASF,MAAM","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","headerVariants","variants","sticky","true","Header","className","props","createElement","Object","assign"],"sources":["Header.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst headerVariants = cva(\"[&_tr]:hover:bg-transparent\", {\n    variants: {\n        sticky: {\n            true: \"[&_tr]:bg-white [&_tr]:hover:bg-white sticky top-0\"\n        }\n    }\n});\n\ninterface HeaderProps\n    extends React.HTMLAttributes<HTMLTableSectionElement>,\n        VariantProps<typeof headerVariants> {}\n\nconst Header = ({ className, sticky, ...props }: HeaderProps) => (\n    <thead className={cn(headerVariants({ sticky }), className)} {...props} />\n);\n\nexport { Header, type HeaderProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,cAAc,GAAGD,GAAG,CAAC,6BAA6B,EAAE;EACtDE,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,IAAI,EAAE;IACV;EACJ;AACJ,CAAC,CAAC;AAMF,MAAMC,MAAM,GAAGA,CAAC;EAAEC,SAAS;EAAEH,MAAM;EAAE,GAAGI;AAAmB,CAAC,kBACxDT,KAAA,CAAAU,aAAA,UAAAC,MAAA,CAAAC,MAAA;EAAOJ,SAAS,EAAEP,EAAE,CAACE,cAAc,CAAC;IAAEE;EAAO,CAAC,CAAC,EAAEG,SAAS;AAAE,GAAKC,KAAK,CAAG,CAC5E;AAED,SAASF,MAAM","ignoreList":[]}

package/Table/components/Resizer.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const resizerVariants: (props?: ({
     isResizing?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/Table/components/Resizer.js

@@ -1,9 +1,9 @@
 import React from "react";
-import { cn, cva } from "../../utils";
-const resizerVariants = cva(["wby-absolute wby-right-0 wby-top-0 wby-w-md wby-h-full wby-border-r-md wby-border-r-accent-default wby-cursor-col-resize wby-select-none wby-touch-none", "wby-opacity-0 wby-bg-transparent", "hover:wby-opacity-100"], {
+import { cn, cva } from "../../utils.js";
+const resizerVariants = cva(["absolute right-0 top-0 w-md h-full border-r-md border-r-accent-default cursor-col-resize select-none touch-none", "opacity-0 bg-transparent", "hover:opacity-100"], {
   variants: {
     isResizing: {
-      true: "wby-opacity-100"
+      true: "opacity-100"
     }
   }
 });

package/Table/components/Resizer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","resizerVariants","variants","isResizing","true","Resizer","className","props","createElement","Object","assign"],"sources":["Resizer.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst resizerVariants = cva(\n    [\n        \"wby-absolute wby-right-0 wby-top-0 wby-w-md wby-h-full wby-border-r-md wby-border-r-accent-default wby-cursor-col-resize wby-select-none wby-touch-none\",\n        \"wby-opacity-0 wby-bg-transparent\",\n        \"hover:wby-opacity-100\"\n    ],\n    {\n        variants: {\n            isResizing: {\n                true: \"wby-opacity-100\"\n            }\n        }\n    }\n);\n\ninterface ResizerProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof resizerVariants> {}\n\nconst Resizer = ({ className, isResizing, ...props }: ResizerProps) => (\n    <div className={cn(resizerVariants({ isResizing }), className)} {...props} />\n);\n\nexport { Resizer, type ResizerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,eAAe,GAAGD,GAAG,CACvB,CACI,yJAAyJ,EACzJ,kCAAkC,EAClC,uBAAuB,CAC1B,EACD;EACIE,QAAQ,EAAE;IACNC,UAAU,EAAE;MACRC,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAMD,MAAMC,OAAO,GAAGA,CAAC;EAAEC,SAAS;EAAEH,UAAU;EAAE,GAAGI;AAAoB,CAAC,kBAC9DT,KAAA,CAAAU,aAAA,QAAAC,MAAA,CAAAC,MAAA;EAAKJ,SAAS,EAAEP,EAAE,CAACE,eAAe,CAAC;IAAEE;EAAW,CAAC,CAAC,EAAEG,SAAS;AAAE,GAAKC,KAAK,CAAG,CAC/E;AAED,SAASF,OAAO","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","resizerVariants","variants","isResizing","true","Resizer","className","props","createElement","Object","assign"],"sources":["Resizer.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst resizerVariants = cva(\n    [\n        \"absolute right-0 top-0 w-md h-full border-r-md border-r-accent-default cursor-col-resize select-none touch-none\",\n        \"opacity-0 bg-transparent\",\n        \"hover:opacity-100\"\n    ],\n    {\n        variants: {\n            isResizing: {\n                true: \"opacity-100\"\n            }\n        }\n    }\n);\n\ninterface ResizerProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof resizerVariants> {}\n\nconst Resizer = ({ className, isResizing, ...props }: ResizerProps) => (\n    <div className={cn(resizerVariants({ isResizing }), className)} {...props} />\n);\n\nexport { Resizer, type ResizerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,eAAe,GAAGD,GAAG,CACvB,CACI,iHAAiH,EACjH,0BAA0B,EAC1B,mBAAmB,CACtB,EACD;EACIE,QAAQ,EAAE;IACNC,UAAU,EAAE;MACRC,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAMD,MAAMC,OAAO,GAAGA,CAAC;EAAEC,SAAS;EAAEH,UAAU;EAAE,GAAGI;AAAoB,CAAC,kBAC9DT,KAAA,CAAAU,aAAA,QAAAC,MAAA,CAAAC,MAAA;EAAKJ,SAAS,EAAEP,EAAE,CAACE,eAAe,CAAC;IAAEE;EAAW,CAAC,CAAC,EAAEG,SAAS;AAAE,GAAKC,KAAK,CAAG,CAC/E;AAED,SAASF,OAAO","ignoreList":[]}

package/Table/components/Row.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const rowVariants: (props?: ({
     selected?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/Table/components/Row.js

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { cn, cva } from "../../utils";
-const rowVariants = cva("wby-border-neutral-dimmed wby-border-solid wby-border-b-sm wby-transition-colors hover:wby-bg-neutral-subtle", {
+import { cn, cva } from "../../utils.js";
+const rowVariants = cva("border-neutral-dimmed border-solid border-b-sm transition-colors hover:bg-neutral-subtle", {
   variants: {
     selected: {
-      true: "wby-bg-neutral-light"
+      true: "bg-neutral-light"
     }
   }
 });

package/Table/components/Row.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","rowVariants","variants","selected","true","Row","className","props","createElement","Object","assign"],"sources":["Row.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\n\nconst rowVariants = cva(\n    \"wby-border-neutral-dimmed wby-border-solid wby-border-b-sm wby-transition-colors hover:wby-bg-neutral-subtle\",\n    {\n        variants: {\n            selected: {\n                true: \"wby-bg-neutral-light\"\n            }\n        }\n    }\n);\n\ninterface RowProps\n    extends React.HTMLAttributes<HTMLTableRowElement>,\n        VariantProps<typeof rowVariants> {}\n\nconst Row = ({ className, selected, ...props }: RowProps) => (\n    <tr className={cn(rowVariants({ selected }), className)} {...props} />\n);\n\nexport { Row, type RowProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,WAAW,GAAGD,GAAG,CACnB,8GAA8G,EAC9G;EACIE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAMD,MAAMC,GAAG,GAAGA,CAAC;EAAEC,SAAS;EAAEH,QAAQ;EAAE,GAAGI;AAAgB,CAAC,kBACpDT,KAAA,CAAAU,aAAA,OAAAC,MAAA,CAAAC,MAAA;EAAIJ,SAAS,EAAEP,EAAE,CAACE,WAAW,CAAC;IAAEE;EAAS,CAAC,CAAC,EAAEG,SAAS;AAAE,GAAKC,KAAK,CAAG,CACxE;AAED,SAASF,GAAG","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","rowVariants","variants","selected","true","Row","className","props","createElement","Object","assign"],"sources":["Row.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst rowVariants = cva(\n    \"border-neutral-dimmed border-solid border-b-sm transition-colors hover:bg-neutral-subtle\",\n    {\n        variants: {\n            selected: {\n                true: \"bg-neutral-light\"\n            }\n        }\n    }\n);\n\ninterface RowProps\n    extends React.HTMLAttributes<HTMLTableRowElement>,\n        VariantProps<typeof rowVariants> {}\n\nconst Row = ({ className, selected, ...props }: RowProps) => (\n    <tr className={cn(rowVariants({ selected }), className)} {...props} />\n);\n\nexport { Row, type RowProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,WAAW,GAAGD,GAAG,CACnB,0FAA0F,EAC1F;EACIE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAMD,MAAMC,GAAG,GAAGA,CAAC;EAAEC,SAAS;EAAEH,QAAQ;EAAE,GAAGI;AAAgB,CAAC,kBACpDT,KAAA,CAAAU,aAAA,OAAAC,MAAA,CAAAC,MAAA;EAAIJ,SAAS,EAAEP,EAAE,CAACE,WAAW,CAAC;IAAEE;EAAS,CAAC,CAAC,EAAEG,SAAS;AAAE,GAAKC,KAAK,CAAG,CACxE;AAED,SAASF,GAAG","ignoreList":[]}

package/Table/components/index.d.ts

@@ -1,9 +1,9 @@
-export * from "./Body";
-export * from "./Caption";
-export * from "./Cell";
-export * from "./Direction";
-export * from "./Footer";
-export * from "./Head";
-export * from "./Header";
-export * from "./Resizer";
-export * from "./Row";
+export * from "./Body.js";
+export * from "./Caption.js";
+export * from "./Cell.js";
+export * from "./Direction.js";
+export * from "./Footer.js";
+export * from "./Head.js";
+export * from "./Header.js";
+export * from "./Resizer.js";
+export * from "./Row.js";

package/Table/components/index.js

@@ -1,11 +1,11 @@
-export * from "./Body";
-export * from "./Caption";
-export * from "./Cell";
-export * from "./Direction";
-export * from "./Footer";
-export * from "./Head";
-export * from "./Header";
-export * from "./Resizer";
-export * from "./Row";
+export * from "./Body.js";
+export * from "./Caption.js";
+export * from "./Cell.js";
+export * from "./Direction.js";
+export * from "./Footer.js";
+export * from "./Head.js";
+export * from "./Header.js";
+export * from "./Resizer.js";
+export * from "./Row.js";
 
 //# sourceMappingURL=index.js.map

package/Table/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Body\";\nexport * from \"./Caption\";\nexport * from \"./Cell\";\nexport * from \"./Direction\";\nexport * from \"./Footer\";\nexport * from \"./Head\";\nexport * from \"./Header\";\nexport * from \"./Resizer\";\nexport * from \"./Row\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Body.js\";\nexport * from \"./Caption.js\";\nexport * from \"./Cell.js\";\nexport * from \"./Direction.js\";\nexport * from \"./Footer.js\";\nexport * from \"./Head.js\";\nexport * from \"./Header.js\";\nexport * from \"./Resizer.js\";\nexport * from \"./Row.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/Table/index.d.ts

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

package/Table/index.js

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

package/Table/index.js.map

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

package/Tabs/Tabs.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { type VariantProps } from "../utils";
-import type { TabProps, tabListVariants } from "./components";
+import { type VariantProps } from "../utils.js";
+import type { TabProps, tabListVariants } from "./components/index.js";
 interface TabsProps extends Omit<TabsPrimitive.TabsProps, "children"> {
     tabs: React.ReactElement<TabProps>[];
     size?: VariantProps<typeof tabListVariants>["size"];
@@ -21,7 +21,7 @@ declare const Tabs: (({ defaultValue: initialValue, size, spacing, separator, ta
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element) & {
         original: ({ defaultValue: initialValue, size, spacing, separator, tabs: tabComponents, ...props }: TabsProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
@@ -40,7 +40,7 @@ declare const Tabs: (({ defaultValue: initialValue, size, spacing, separator, ta
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: TabProps) => null) & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: TabProps) => null) & {
             original: (props: TabProps) => null;
             originalName: string;
             displayName: string;

package/Tabs/Tabs.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { makeDecoratable, withStaticProps } from "../utils";
-import { Content, List, Tab, TabsContext, Trigger } from "./components";
+import { makeDecoratable, withStaticProps } from "../utils.js";
+import { Content, List, Tab, TabsContext, Trigger } from "./components/index.js";
 const Root = TabsPrimitive.Root;
 const DecoratableTabs = ({
   defaultValue: initialValue,

package/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","useState","Tabs","TabsPrimitive","makeDecoratable","withStaticProps","Content","List","Tab","TabsContext","Trigger","Root","DecoratableTabs","defaultValue","initialValue","size","spacing","separator","tabs","tabComponents","props","setTabs","find","tab","disabled","visible","value","triggers","createElement","key","map","id","join","icon","text","trigger","contents","content","className","context","addTab","existingIndex","findIndex","slice","removeTab","filter","Object","assign","Provider","BaseTabs"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { makeDecoratable, type VariantProps, withStaticProps } from \"~/utils\";\nimport type { ITabsContext, TabItem, TabProps, tabListVariants } from \"./components\";\nimport { Content, List, Tab, TabsContext, Trigger } from \"./components\";\n\nconst Root = TabsPrimitive.Root;\n\ninterface TabsProps extends Omit<TabsPrimitive.TabsProps, \"children\"> {\n    tabs: React.ReactElement<TabProps>[];\n    size?: VariantProps<typeof tabListVariants>[\"size\"];\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    separator?: VariantProps<typeof tabListVariants>[\"separator\"];\n}\n\nconst DecoratableTabs = ({\n    defaultValue: initialValue,\n    size,\n    spacing,\n    separator,\n    tabs: tabComponents,\n    ...props\n}: TabsProps) => {\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const defaultValue = useMemo(() => {\n        // `defaultValue` prop works only at first render so we need to use the `tabComponents` instead of the `TabItems`\n        return (\n            initialValue ||\n            tabComponents.find(tab => !tab.props.disabled && tab.props.visible !== false)?.props\n                .value\n        );\n    }, [initialValue, tabComponents]);\n\n    const triggers = useMemo(\n        () => (\n            // We need to generate a key like this to trigger a proper component re-render when child tabs change.\n            <List\n                key={tabs.map(tab => tab.id).join(\";\")}\n                size={size}\n                spacing={spacing}\n                separator={separator}\n            >\n                {tabs.map(tab => (\n                    <Trigger\n                        data-testid={tab[\"data-testid\"]}\n                        disabled={tab.disabled}\n                        icon={tab.icon}\n                        key={tab.id}\n                        size={size}\n                        text={tab.trigger}\n                        value={tab.value}\n                        visible={tab.visible}\n                    />\n                ))}\n            </List>\n        ),\n        [tabs, size, spacing]\n    );\n\n    const contents = useMemo(\n        () =>\n            tabs.map(tab => (\n                <Content\n                    key={tab.id}\n                    value={tab.value}\n                    content={tab.content}\n                    spacing={tab.spacing ?? spacing}\n                    className={tab.className}\n                />\n            )),\n        [tabs, spacing]\n    );\n\n    const context: ITabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.value === props.value);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id === id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <Root {...props} defaultValue={defaultValue}>\n            {triggers}\n            {contents}\n            <TabsContext.Provider value={context}>{tabComponents}</TabsContext.Provider>\n        </Root>\n    );\n};\n\nconst BaseTabs = makeDecoratable(\"Tabs\", DecoratableTabs);\n\nconst Tabs = withStaticProps(BaseTabs, {\n    Tab\n});\n\nexport { Tabs, type TabsProps };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","useState","Tabs","TabsPrimitive","makeDecoratable","withStaticProps","Content","List","Tab","TabsContext","Trigger","Root","DecoratableTabs","defaultValue","initialValue","size","spacing","separator","tabs","tabComponents","props","setTabs","find","tab","disabled","visible","value","triggers","createElement","key","map","id","join","icon","text","trigger","contents","content","className","context","addTab","existingIndex","findIndex","slice","removeTab","filter","Object","assign","Provider","BaseTabs"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { makeDecoratable, type VariantProps, withStaticProps } from \"~/utils.js\";\nimport type { ITabsContext, TabItem, TabProps, tabListVariants } from \"./components/index.js\";\nimport { Content, List, Tab, TabsContext, Trigger } from \"./components/index.js\";\n\nconst Root = TabsPrimitive.Root;\n\ninterface TabsProps extends Omit<TabsPrimitive.TabsProps, \"children\"> {\n    tabs: React.ReactElement<TabProps>[];\n    size?: VariantProps<typeof tabListVariants>[\"size\"];\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    separator?: VariantProps<typeof tabListVariants>[\"separator\"];\n}\n\nconst DecoratableTabs = ({\n    defaultValue: initialValue,\n    size,\n    spacing,\n    separator,\n    tabs: tabComponents,\n    ...props\n}: TabsProps) => {\n    const [tabs, setTabs] = useState<TabItem[]>([]);\n\n    const defaultValue = useMemo(() => {\n        // `defaultValue` prop works only at first render so we need to use the `tabComponents` instead of the `TabItems`\n        return (\n            initialValue ||\n            tabComponents.find(tab => !tab.props.disabled && tab.props.visible !== false)?.props\n                .value\n        );\n    }, [initialValue, tabComponents]);\n\n    const triggers = useMemo(\n        () => (\n            // We need to generate a key like this to trigger a proper component re-render when child tabs change.\n            <List\n                key={tabs.map(tab => tab.id).join(\";\")}\n                size={size}\n                spacing={spacing}\n                separator={separator}\n            >\n                {tabs.map(tab => (\n                    <Trigger\n                        data-testid={tab[\"data-testid\"]}\n                        disabled={tab.disabled}\n                        icon={tab.icon}\n                        key={tab.id}\n                        size={size}\n                        text={tab.trigger}\n                        value={tab.value}\n                        visible={tab.visible}\n                    />\n                ))}\n            </List>\n        ),\n        [tabs, size, spacing]\n    );\n\n    const contents = useMemo(\n        () =>\n            tabs.map(tab => (\n                <Content\n                    key={tab.id}\n                    value={tab.value}\n                    content={tab.content}\n                    spacing={tab.spacing ?? spacing}\n                    className={tab.className}\n                />\n            )),\n        [tabs, spacing]\n    );\n\n    const context: ITabsContext = useMemo(\n        () => ({\n            addTab(props) {\n                setTabs(tabs => {\n                    const existingIndex = tabs.findIndex(tab => tab.value === props.value);\n                    if (existingIndex > -1) {\n                        return [\n                            ...tabs.slice(0, existingIndex),\n                            props,\n                            ...tabs.slice(existingIndex + 1)\n                        ];\n                    }\n                    return [...tabs, props];\n                });\n            },\n            removeTab(id) {\n                setTabs(tabs => tabs.filter(tab => tab.id === id));\n            }\n        }),\n        [setTabs]\n    );\n\n    return (\n        <Root {...props} defaultValue={defaultValue}>\n            {triggers}\n            {contents}\n            <TabsContext.Provider value={context}>{tabComponents}</TabsContext.Provider>\n        </Root>\n    );\n};\n\nconst BaseTabs = makeDecoratable(\"Tabs\", DecoratableTabs);\n\nconst Tabs = withStaticProps(BaseTabs, {\n    Tab\n});\n\nexport { Tabs, type TabsProps };\n"],"mappings":"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","ignoreList":[]}

package/Tabs/Tabs.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as Tabs from './Tabs.stories';
 
@@ -492,4 +492,4 @@ export default WithHiddenTabExample;
 <img src="/images/storybook/tabs/tab-group.png" alt="Tab Group"/>
 
 ## Usage
-<img src="/images/storybook/tabs/usage.png" alt="Usage"/>
+<img src="/images/storybook/tabs/usage.png" alt="Usage"/>

package/Tabs/Tabs.stories.d.ts

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

package/Tabs/Tabs.stories.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { ReactComponent as PersonIcon } from "@webiny/icons/person.svg";
 import { ReactComponent as LockIcon } from "@webiny/icons/lock.svg";
-import { Tabs } from "./Tabs";
+import { Tabs } from "./Tabs.js";
 const meta = {
   title: "Components/Tabs",
   component: Tabs,
@@ -235,12 +235,10 @@ export const Documentation = {
       control: "text"
     },
     value: {
-      description: "The controlled value of the active tab, please refer to the example code for details.",
-      control: "none"
+      description: "The controlled value of the active tab, please refer to the example code for details."
     },
     tabs: {
-      description: "The tabs to render, please refer to the example code for details.",
-      control: "none"
+      description: "The tabs to render, please refer to the example code for details."
     }
   }
 };

package/Tabs/Tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","ReactComponent","PersonIcon","LockIcon","Tabs","meta","title","component","parameters","layout","Default","args","tabs","createElement","Tab","key","value","trigger","content","SizeSmall","size","SizeMedium","SizeLarge","SizeExtraLarge","SpacingExtraSmall","spacing","SpacingSmall","SpacingMedium","SpacingLarge","SpacingExtraLarge","SpacingDoubleExtraLarge","WithSeparator","separator","WithDefaultValue","defaultValue","WithControlledValue","render","setValue","Object","assign","onValueChange","WithIcons","icon","WithDisabledTab","disabled","WithHiddenTab","visible","WithCustomTabSpacing","Documentation","JSON","stringify","undefined","argTypes","description","control","options"],"sources":["Tabs.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as PersonIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/lock.svg\";\nimport { Tabs } from \"./Tabs\";\n\nconst meta: Meta<typeof Tabs> = {\n    title: \"Components/Tabs\",\n    component: Tabs,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tabs>;\n\nexport const Default: Story = {\n    args: {\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const SpacingExtraSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xs\"\n    }\n};\n\nexport const SpacingSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\"\n    }\n};\n\nexport const SpacingMedium: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"md\"\n    }\n};\n\nexport const SpacingLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"lg\"\n    }\n};\n\nexport const SpacingExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xl\"\n    }\n};\n\nexport const SpacingDoubleExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xxl\"\n    }\n};\n\nexport const WithSeparator: Story = {\n    args: {\n        ...Default.args,\n        separator: true\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        defaultValue: \"password\"\n    }\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"password\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <Tabs {...args} value={value} onValueChange={setValue} />;\n    }\n};\n\nexport const WithIcons: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                icon={<PersonIcon />}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n                icon={<LockIcon />}\n            />\n        ]\n    }\n};\n\nexport const WithDisabledTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                disabled={true}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithHiddenTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                visible={false}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithCustomTabSpacing: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Tab with custom spacing XXL - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                spacing={\"xxl\"}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Tab with inherited spacing - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\n// Update the Documentation story to properly handle control changes\nexport const Documentation: Story = {\n    render: args => {\n        // Force re-render when args change by using a key\n        return <Tabs key={JSON.stringify(args)} {...args} />;\n    },\n    args: {\n        size: \"md\",\n        spacing: \"lg\",\n        separator: true,\n        defaultValue: \"account\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - This tab contains account settings and personal information. Users can update their profile details, change email address, and manage notification preferences.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"security\"}\n                value={\"security\"}\n                trigger={\"Security\"}\n                content={\n                    \"Security content - This tab contains security settings. Users can change their password, enable two-factor authentication, and review recent account activity.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"preferences\"}\n                value={\"preferences\"}\n                trigger={\"Preferences\"}\n                content={\n                    \"Preferences content - This tab contains user preferences. Users can customize the interface, set language preferences, and configure other application settings.\"\n                }\n            />\n        ],\n        value: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the tabs\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        spacing: {\n            description: \"Spacing around the tabs and content\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\"],\n            defaultValue: \"lg\"\n        },\n        separator: {\n            description:\n                \"Whether to show a separator line below the tabs, by default it's `false`.\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        defaultValue: {\n            description: \"The value of the tab that should be active by default\",\n            control: \"text\"\n        },\n        value: {\n            description:\n                \"The controlled value of the active tab, please refer to the example code for details.\",\n            control: \"none\"\n        },\n        tabs: {\n            description: \"The tabs to render, please refer to the example code for details.\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","ReactComponent","PersonIcon","LockIcon","Tabs","meta","title","component","parameters","layout","Default","args","tabs","createElement","Tab","key","value","trigger","content","SizeSmall","size","SizeMedium","SizeLarge","SizeExtraLarge","SpacingExtraSmall","spacing","SpacingSmall","SpacingMedium","SpacingLarge","SpacingExtraLarge","SpacingDoubleExtraLarge","WithSeparator","separator","WithDefaultValue","defaultValue","WithControlledValue","render","setValue","Object","assign","onValueChange","WithIcons","icon","WithDisabledTab","disabled","WithHiddenTab","visible","WithCustomTabSpacing","Documentation","JSON","stringify","undefined","argTypes","description","control","options"],"sources":["Tabs.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as PersonIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/lock.svg\";\nimport { Tabs } from \"./Tabs.js\";\n\nconst meta: Meta<typeof Tabs> = {\n    title: \"Components/Tabs\",\n    component: Tabs,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tabs>;\n\nexport const Default: Story = {\n    args: {\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const SpacingExtraSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xs\"\n    }\n};\n\nexport const SpacingSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\"\n    }\n};\n\nexport const SpacingMedium: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"md\"\n    }\n};\n\nexport const SpacingLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"lg\"\n    }\n};\n\nexport const SpacingExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xl\"\n    }\n};\n\nexport const SpacingDoubleExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xxl\"\n    }\n};\n\nexport const WithSeparator: Story = {\n    args: {\n        ...Default.args,\n        separator: true\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        defaultValue: \"password\"\n    }\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"password\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <Tabs {...args} value={value} onValueChange={setValue} />;\n    }\n};\n\nexport const WithIcons: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                icon={<PersonIcon />}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n                icon={<LockIcon />}\n            />\n        ]\n    }\n};\n\nexport const WithDisabledTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                disabled={true}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithHiddenTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                visible={false}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithCustomTabSpacing: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Tab with custom spacing XXL - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                spacing={\"xxl\"}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Tab with inherited spacing - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\n// Update the Documentation story to properly handle control changes\nexport const Documentation: Story = {\n    render: args => {\n        // Force re-render when args change by using a key\n        return <Tabs key={JSON.stringify(args)} {...args} />;\n    },\n    args: {\n        size: \"md\",\n        spacing: \"lg\",\n        separator: true,\n        defaultValue: \"account\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - This tab contains account settings and personal information. Users can update their profile details, change email address, and manage notification preferences.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"security\"}\n                value={\"security\"}\n                trigger={\"Security\"}\n                content={\n                    \"Security content - This tab contains security settings. Users can change their password, enable two-factor authentication, and review recent account activity.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"preferences\"}\n                value={\"preferences\"}\n                trigger={\"Preferences\"}\n                content={\n                    \"Preferences content - This tab contains user preferences. Users can customize the interface, set language preferences, and configure other application settings.\"\n                }\n            />\n        ],\n        value: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the tabs\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        spacing: {\n            description: \"Spacing around the tabs and content\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\"],\n            defaultValue: \"lg\"\n        },\n        separator: {\n            description:\n                \"Whether to show a separator line below the tabs, by default it's `false`.\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        defaultValue: {\n            description: \"The value of the tab that should be active by default\",\n            control: \"text\"\n        },\n        value: {\n            description:\n                \"The controlled value of the active tab, please refer to the example code for details.\"\n        },\n        tabs: {\n            description: \"The tabs to render, please refer to the example code for details.\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Tabs/components/Content.d.ts

@@ -1,6 +1,6 @@
 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 tabContentVariants: (props?: ({
     spacing?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/Tabs/components/Content.js

@@ -1,19 +1,19 @@
 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",
+import { cn, cva } from "../../utils.js";
+const tabContentVariants = cva(["bg-neutral-base", "rounded-lg", "focus-visible:outline-none focus-visible:ring-lg focus-visible: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"], {
+"data-[state=inactive]: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"
+      xs: "p-xs",
+      sm: "p-sm",
+      md: "p-md",
+      lg: "p-lg",
+      xl: "p-xl",
+      xxl: "p-xxl"
     }
   }
 });

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,"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.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"],"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,iBAAiB,EACjB,YAAY,EACZ,oFAAoF;AACpF;AACA;AACA;AACA,8BAA8B,CACjC,EACD;EACIE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,EAAE,EAAE,MAAM;MACVC,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":[]}

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.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,"names":["createContext","TabsContext","undefined"],"sources":["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"],"mappings":"AAAA,SAASA,aAAa,QAAQ,OAAO;AAQrC,MAAMC,WAAW,gBAAGD,aAAa,CAA2BE,SAAS,CAAC;AAEtE,SAASD,WAAW","ignoreList":[]}

package/Tabs/components/List.d.ts

@@ -1,6 +1,6 @@
 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;

package/Tabs/components/List.js

@@ -1,24 +1,24 @@
 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", {
+import { cn, cva } from "../../utils.js";
+const tabListVariants = cva("w-full inline-flex items-center justify-start", {
   variants: {
     size: {
-      sm: "wby-gap-sm",
-      md: "wby-gap-sm",
-      lg: "wby-gap-sm-extra",
-      xl: "wby-gap-md"
+      sm: "gap-sm",
+      md: "gap-sm",
+      lg: "gap-sm-extra",
+      xl: "gap-md"
     },
     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"
+      xs: "px-xs",
+      sm: "px-sm",
+      md: "px-md",
+      lg: "px-lg",
+      xl: "px-xl",
+      xxl: "px-xxl"
     },
     separator: {
-      true: "wby-border-solid wby-border-b-sm wby-border-neutral-dimmed"
+      true: "border-solid border-b-sm border-neutral-dimmed"
     }
   },
   defaultVariants: {

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,"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.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"],"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,+CAA+C,EAAE;EACzEE,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,cAAc;MAClBC,EAAE,EAAE;IACR,CAAC;IACDC,OAAO,EAAE;MACLC,EAAE,EAAE,OAAO;MACXL,EAAE,EAAE,OAAO;MACXC,EAAE,EAAE,OAAO;MACXC,EAAE,EAAE,OAAO;MACXC,EAAE,EAAE,OAAO;MACXG,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":[]}