@webiny/admin-ui 6.3.0 → 6.4.0-beta.0

package/Button/Button.stories.js

@@ -1,146 +1,154 @@
-import React from "react";
-import { ReactComponent as PencilIcon } from "@webiny/icons/edit.svg";
+import react from "react";
+import { ReactComponent } from "@webiny/icons/edit.svg";
 import { Button } from "./Button.js";
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: "Components/Button",
-  component: Button,
-  argTypes: {
-    variant: {
-      description: "Type",
-      control: "select",
-      options: ["primary", "secondary", "tertiary", "ghost", "ghost-negative"],
-      defaultValue: "primary"
-    },
-    size: {
-      description: "Size",
-      control: "select",
-      options: ["sm", "md", "lg", "xl"],
-      defaultValue: "md"
-    },
-    text: {
-      description: "Label",
-      control: "text",
-      defaultValue: "Button"
-    },
-    disabled: {
-      control: "boolean",
-      defaultValue: false
-    },
-    icon: {
-      description: "Please refer to the 'With Icon' button example below for details."
-    },
-    iconPosition: {
-      description: "Please refer to the 'With Icon' button example below for details.",
-      control: "select",
-      defaultValue: "start",
-      options: ["start", "end"]
-    },
-    asChild: {
-      description: "Please refer to the 'As Child' button example below for details."
-    },
-    // Note: after upgrading to Storybook 8.X, use `fn`from `@storybook/test` to spy on the onClick argument.
-    onClick: {
-      action: "onClick"
+    title: "Components/Button",
+    component: Button,
+    argTypes: {
+        variant: {
+            description: "Type",
+            control: "select",
+            options: [
+                "primary",
+                "secondary",
+                "tertiary",
+                "ghost",
+                "ghost-negative"
+            ],
+            defaultValue: "primary"
+        },
+        size: {
+            description: "Size",
+            control: "select",
+            options: [
+                "sm",
+                "md",
+                "lg",
+                "xl"
+            ],
+            defaultValue: "md"
+        },
+        text: {
+            description: "Label",
+            control: "text",
+            defaultValue: "Button"
+        },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        },
+        icon: {
+            description: "Please refer to the 'With Icon' button example below for details."
+        },
+        iconPosition: {
+            description: "Please refer to the 'With Icon' button example below for details.",
+            control: "select",
+            defaultValue: "start",
+            options: [
+                "start",
+                "end"
+            ]
+        },
+        asChild: {
+            description: "Please refer to the 'As Child' button example below for details."
+        },
+        onClick: {
+            action: "onClick"
+        }
     }
-  }
 };
-export default meta;
-export const Primary = {
-  args: {
-    variant: "primary",
-    text: "Button"
-  }
+const Button_stories = meta;
+const Primary = {
+    args: {
+        variant: "primary",
+        text: "Button"
+    }
 };
-export const Secondary = {
-  args: {
-    ...Primary.args,
-    variant: "secondary"
-  }
+const Secondary = {
+    args: {
+        ...Primary.args,
+        variant: "secondary"
+    }
 };
-export const Tertiary = {
-  args: {
-    ...Primary.args,
-    variant: "tertiary"
-  }
+const Tertiary = {
+    args: {
+        ...Primary.args,
+        variant: "tertiary"
+    }
 };
-export const Ghost = {
-  args: {
-    ...Primary.args,
-    variant: "ghost"
-  }
+const Ghost = {
+    args: {
+        ...Primary.args,
+        variant: "ghost"
+    }
 };
-export const GhostNegative = {
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-[#25292e] p-[50px] rounded-[5px]"
-  }, /*#__PURE__*/React.createElement(Story, null))],
-  args: {
-    ...Primary.args,
-    variant: "ghost-negative"
-  }
+const GhostNegative = {
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-[#25292e] p-[50px] rounded-[5px]"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ],
+    args: {
+        ...Primary.args,
+        variant: "ghost-negative"
+    }
 };
-export const Small = {
-  args: {
-    ...Primary.args,
-    size: "sm"
-  }
+const Small = {
+    args: {
+        ...Primary.args,
+        size: "sm"
+    }
 };
-export const Medium = {
-  args: {
-    ...Primary.args,
-    size: "md"
-  }
+const Medium = {
+    args: {
+        ...Primary.args,
+        size: "md"
+    }
 };
-export const Large = {
-  args: {
-    ...Primary.args,
-    size: "lg"
-  }
+const Large = {
+    args: {
+        ...Primary.args,
+        size: "lg"
+    }
 };
-export const ExtraLarge = {
-  args: {
-    ...Primary.args,
-    size: "xl"
-  }
+const ExtraLarge = {
+    args: {
+        ...Primary.args,
+        size: "xl"
+    }
 };
-export const WithIcon = {
-  args: {
-    ...Primary.args,
-    icon: /*#__PURE__*/React.createElement(PencilIcon, null)
-  }
+const WithIcon = {
+    args: {
+        ...Primary.args,
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+    }
 };
-export const WithIconPositionEnd = {
-  args: {
-    ...Primary.args,
-    icon: /*#__PURE__*/React.createElement(PencilIcon, null),
-    iconPosition: "end"
-  }
+const WithIconPositionEnd = {
+    args: {
+        ...Primary.args,
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        iconPosition: "end"
+    }
 };
-export const WithAsChild = {
-  args: {
-    ...Primary.args,
-    asChild: true,
-    text: /*#__PURE__*/React.createElement("span", null, "Button")
-  }
+const WithAsChild = {
+    args: {
+        ...Primary.args,
+        asChild: true,
+        text: /*#__PURE__*/ react.createElement("span", null, "Button")
+    }
 };
-
-/* The Documentation story is created for the Docs page.
- * The description column for the `iconPosition` and `icon` props displays
- * an extra dash (-), and the formatting breaks unless defined in the story.
- * Hence, this Documentation story was created.
- */
-
-export const Documentation = {
-  args: {
-    variant: "primary",
-    text: "Button",
-    size: "md",
-    disabled: false,
-    icon: "",
-    iconPosition: "start",
-    asChild: false
-  }
+const Documentation = {
+    args: {
+        variant: "primary",
+        text: "Button",
+        size: "md",
+        disabled: false,
+        icon: "",
+        iconPosition: "start",
+        asChild: false
+    }
 };
+export default Button_stories;
+export { Documentation, ExtraLarge, Ghost, GhostNegative, Large, Medium, Primary, Secondary, Small, Tertiary, WithAsChild, WithIcon, WithIconPositionEnd };
 
 //# sourceMappingURL=Button.stories.js.map

package/Button/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","PencilIcon","Button","meta","title","component","argTypes","variant","description","control","options","defaultValue","size","text","disabled","icon","iconPosition","asChild","onClick","action","Primary","args","Secondary","Tertiary","Ghost","GhostNegative","decorators","Story","createElement","className","Small","Medium","Large","ExtraLarge","WithIcon","WithIconPositionEnd","WithAsChild","Documentation"],"sources":["Button.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as PencilIcon } from \"@webiny/icons/edit.svg\";\nimport { Button } from \"./Button.js\";\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta: Meta<typeof Button> = {\n    title: \"Components/Button\",\n    component: Button,\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        text: {\n            description: \"Label\",\n            control: \"text\",\n            defaultValue: \"Button\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the 'With Icon' button example below for details.\"\n        },\n        iconPosition: {\n            description: \"Please refer to the 'With Icon' button example below for details.\",\n            control: \"select\",\n            defaultValue: \"start\",\n            options: [\"start\", \"end\"]\n        },\n        asChild: {\n            description: \"Please refer to the 'As Child' button example below for details.\"\n        },\n        // Note: after upgrading to Storybook 8.X, use `fn`from `@storybook/test` to spy on the onClick argument.\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Button>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\"\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        (Story: any) => (\n            <div className=\"bg-[#25292e] p-[50px] rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />\n    }\n};\n\nexport const WithIconPositionEnd: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />,\n        iconPosition: \"end\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        text: <span>Button</span>\n    }\n};\n\n/* The Documentation story is created for the Docs page.\n * The description column for the `iconPosition` and `icon` props displays\n * an extra dash (-), and the formatting breaks unless defined in the story.\n * Hence, this Documentation story was created.\n */\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\",\n        size: \"md\",\n        disabled: false,\n        icon: \"\",\n        iconPosition: \"start\",\n        asChild: false\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Button/Button.stories.js","sources":["../../src/Button/Button.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as PencilIcon } from \"@webiny/icons/edit.svg\";\nimport { Button } from \"./Button.js\";\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta: Meta<typeof Button> = {\n    title: \"Components/Button\",\n    component: Button,\n    argTypes: {\n        variant: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        size: {\n            description: \"Size\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        text: {\n            description: \"Label\",\n            control: \"text\",\n            defaultValue: \"Button\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        },\n        icon: {\n            description: \"Please refer to the 'With Icon' button example below for details.\"\n        },\n        iconPosition: {\n            description: \"Please refer to the 'With Icon' button example below for details.\",\n            control: \"select\",\n            defaultValue: \"start\",\n            options: [\"start\", \"end\"]\n        },\n        asChild: {\n            description: \"Please refer to the 'As Child' button example below for details.\"\n        },\n        // Note: after upgrading to Storybook 8.X, use `fn`from `@storybook/test` to spy on the onClick argument.\n        onClick: { action: \"onClick\" }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Button>;\n\nexport const Primary: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\"\n    }\n};\n\nexport const Secondary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const Tertiary: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"tertiary\"\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        ...Primary.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostNegative: Story = {\n    decorators: [\n        (Story: any) => (\n            <div className=\"bg-[#25292e] p-[50px] rounded-[5px]\">\n                <Story />\n            </div>\n        )\n    ],\n    args: {\n        ...Primary.args,\n        variant: \"ghost-negative\"\n    }\n};\n\nexport const Small: Story = {\n    args: {\n        ...Primary.args,\n        size: \"sm\"\n    }\n};\n\nexport const Medium: Story = {\n    args: {\n        ...Primary.args,\n        size: \"md\"\n    }\n};\n\nexport const Large: Story = {\n    args: {\n        ...Primary.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLarge: Story = {\n    args: {\n        ...Primary.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />\n    }\n};\n\nexport const WithIconPositionEnd: Story = {\n    args: {\n        ...Primary.args,\n        icon: <PencilIcon />,\n        iconPosition: \"end\"\n    }\n};\n\nexport const WithAsChild: Story = {\n    args: {\n        ...Primary.args,\n        asChild: true,\n        text: <span>Button</span>\n    }\n};\n\n/* The Documentation story is created for the Docs page.\n * The description column for the `iconPosition` and `icon` props displays\n * an extra dash (-), and the formatting breaks unless defined in the story.\n * Hence, this Documentation story was created.\n */\n\nexport const Documentation: Story = {\n    args: {\n        variant: \"primary\",\n        text: \"Button\",\n        size: \"md\",\n        disabled: false,\n        icon: \"\",\n        iconPosition: \"start\",\n        asChild: false\n    }\n};\n"],"names":["meta","Button","Primary","Secondary","Tertiary","Ghost","GhostNegative","Story","Small","Medium","Large","ExtraLarge","WithIcon","PencilIcon","WithIconPositionEnd","WithAsChild","Documentation"],"mappings":";;;AAMA,MAAMA,OAA4B;IAC9B,OAAO;IACP,WAAWC;IACX,UAAU;QACN,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAW;gBAAa;gBAAY;gBAAS;aAAiB;YACxE,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAM;gBAAM;gBAAM;aAAK;YACjC,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,SAAS;YACT,cAAc;QAClB;QACA,MAAM;YACF,aAAa;QACjB;QACA,cAAc;YACV,aAAa;YACb,SAAS;YACT,cAAc;YACd,SAAS;gBAAC;gBAAS;aAAM;QAC7B;QACA,SAAS;YACL,aAAa;QACjB;QAEA,SAAS;YAAE,QAAQ;QAAU;IACjC;AACJ;AAEA,uBAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,SAAS;QACT,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,WAAkB;IAC3B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMG,QAAe;IACxB,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMI,gBAAuB;IAChC,YAAY;QACR,CAACC,QAAAA,WAAAA,GACG,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;IACD,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAMM,QAAe;IACxB,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMO,SAAgB;IACzB,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMQ,QAAe;IACxB,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMS,aAAoB;IAC7B,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMU,WAAkB;IAC3B,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACW,gBAAUA;IACrB;AACJ;AAEO,MAAMC,sBAA6B;IACtC,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,MAAM,WAAN,GAAM,oBAACW,gBAAUA;QACjB,cAAc;IAClB;AACJ;AAEO,MAAME,cAAqB;IAC9B,MAAM;QACF,GAAGb,QAAQ,IAAI;QACf,SAAS;QACT,MAAM,WAAN,GAAM,oBAAC,cAAK;IAChB;AACJ;AAQO,MAAMc,gBAAuB;IAChC,MAAM;QACF,SAAS;QACT,MAAM;QACN,MAAM;QACN,UAAU;QACV,MAAM;QACN,cAAc;QACd,SAAS;IACb;AACJ"}

package/Button/CopyButton.js

@@ -1,23 +1,20 @@
-import React, { useCallback } from "react";
-import { ReactComponent as CopyToClipboardIcon } from "@webiny/icons/content_copy.svg";
+import react, { useCallback } from "react";
+import { ReactComponent } from "@webiny/icons/content_copy.svg";
 import { Button } from "./Button.js";
 import { makeDecoratable } from "../utils.js";
-const CopyButtonBase = props => {
-  const {
-    value,
-    onCopy,
-    ...rest
-  } = props;
-  const copyToClipboard = useCallback(() => {
-    navigator.clipboard.writeText(value);
-    if (typeof onCopy === "function") {
-      onCopy();
-    }
-  }, [value]);
-  return /*#__PURE__*/React.createElement(Button, Object.assign({}, rest, {
-    onClick: copyToClipboard,
-    icon: /*#__PURE__*/React.createElement(CopyToClipboardIcon, null)
-  }));
+const CopyButtonBase = (props)=>{
+    const { value, onCopy, ...rest } = props;
+    const copyToClipboard = useCallback(()=>{
+        navigator.clipboard.writeText(value);
+        if ("function" == typeof onCopy) onCopy();
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ react.createElement(Button, {
+        ...rest,
+        onClick: copyToClipboard,
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+    });
 };
 const CopyButton = makeDecoratable("CopyButton", CopyButtonBase);
 export { CopyButton };

package/Button/CopyButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","ReactComponent","CopyToClipboardIcon","Button","makeDecoratable","CopyButtonBase","props","value","onCopy","rest","copyToClipboard","navigator","clipboard","writeText","createElement","Object","assign","onClick","icon","CopyButton"],"sources":["CopyButton.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as CopyToClipboardIcon } from \"@webiny/icons/content_copy.svg\";\nimport type { ButtonProps } from \"./Button.js\";\nimport { Button } from \"./Button.js\";\nimport { makeDecoratable } from \"../utils.js\";\n\ninterface CopyButtonProps extends ButtonProps {\n    /**\n     * Value to copy to clipboard.\n     */\n    value: string;\n\n    /**\n     * Callback function that is executed after the value is copied to the clipboard.\n     */\n    onCopy?: () => void;\n}\n\nconst CopyButtonBase = (props: CopyButtonProps) => {\n    const { value, onCopy, ...rest } = props;\n\n    const copyToClipboard = useCallback(() => {\n        navigator.clipboard.writeText(value);\n        if (typeof onCopy === \"function\") {\n            onCopy();\n        }\n    }, [value]);\n\n    return <Button {...rest} onClick={copyToClipboard} icon={<CopyToClipboardIcon />} />;\n};\n\nconst CopyButton = makeDecoratable(\"CopyButton\", CopyButtonBase);\n\nexport { CopyButton, type CopyButtonProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,cAAc,IAAIC,mBAAmB,QAAQ,gCAAgC;AAEtF,SAASC,MAAM;AACf,SAASC,eAAe;AAcxB,MAAMC,cAAc,GAAIC,KAAsB,IAAK;EAC/C,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAExC,MAAMI,eAAe,GAAGV,WAAW,CAAC,MAAM;IACtCW,SAAS,CAACC,SAAS,CAACC,SAAS,CAACN,KAAK,CAAC;IACpC,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;MAC9BA,MAAM,CAAC,CAAC;IACZ;EACJ,CAAC,EAAE,CAACD,KAAK,CAAC,CAAC;EAEX,oBAAOR,KAAA,CAAAe,aAAA,CAACX,MAAM,EAAAY,MAAA,CAAAC,MAAA,KAAKP,IAAI;IAAEQ,OAAO,EAAEP,eAAgB;IAACQ,IAAI,eAAEnB,KAAA,CAAAe,aAAA,CAACZ,mBAAmB,MAAE;EAAE,EAAE,CAAC;AACxF,CAAC;AAED,MAAMiB,UAAU,GAAGf,eAAe,CAAC,YAAY,EAAEC,cAAc,CAAC;AAEhE,SAASc,UAAU","ignoreList":[]}
+{"version":3,"file":"Button/CopyButton.js","sources":["../../src/Button/CopyButton.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { ReactComponent as CopyToClipboardIcon } from \"@webiny/icons/content_copy.svg\";\nimport type { ButtonProps } from \"./Button.js\";\nimport { Button } from \"./Button.js\";\nimport { makeDecoratable } from \"../utils.js\";\n\ninterface CopyButtonProps extends ButtonProps {\n    /**\n     * Value to copy to clipboard.\n     */\n    value: string;\n\n    /**\n     * Callback function that is executed after the value is copied to the clipboard.\n     */\n    onCopy?: () => void;\n}\n\nconst CopyButtonBase = (props: CopyButtonProps) => {\n    const { value, onCopy, ...rest } = props;\n\n    const copyToClipboard = useCallback(() => {\n        navigator.clipboard.writeText(value);\n        if (typeof onCopy === \"function\") {\n            onCopy();\n        }\n    }, [value]);\n\n    return <Button {...rest} onClick={copyToClipboard} icon={<CopyToClipboardIcon />} />;\n};\n\nconst CopyButton = makeDecoratable(\"CopyButton\", CopyButtonBase);\n\nexport { CopyButton, type CopyButtonProps };\n"],"names":["CopyButtonBase","props","value","onCopy","rest","copyToClipboard","useCallback","navigator","Button","CopyToClipboardIcon","CopyButton","makeDecoratable"],"mappings":";;;;AAkBA,MAAMA,iBAAiB,CAACC;IACpB,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGC,MAAM,GAAGH;IAEnC,MAAMI,kBAAkBC,YAAY;QAChCC,UAAU,SAAS,CAAC,SAAS,CAACL;QAC9B,IAAI,AAAkB,cAAlB,OAAOC,QACPA;IAER,GAAG;QAACD;KAAM;IAEV,OAAO,WAAP,GAAO,oBAACM,QAAMA;QAAE,GAAGJ,IAAI;QAAE,SAASC;QAAiB,oBAAM,oBAACI,gBAAmBA;;AACjF;AAEA,MAAMC,aAAaC,gBAAgB,cAAcX"}

package/Button/IconButton.js

@@ -1,94 +1,129 @@
-import React from "react";
+import react from "react";
 import { Slot } from "radix-ui";
 import { cn, cva, makeDecoratable } from "../utils.js";
 const iconButtonWrapperVariants = cva("inline-block", {
-  variants: {
-    disabled: {
-      true: "cursor-not-allowed"
+    variants: {
+        disabled: {
+            true: "cursor-not-allowed"
+        }
     }
-  }
 });
-const iconButtonVariants = cva(["border-transparent rounded flex shrink-0 items-center justify-center ring-offset-background transition-colors cursor-pointer", "[&_svg]:pointer-events-none [&_svg]:shrink-0", "[&_img]:pointer-events-none [&_img]:shrink-0", "aria-disabled:pointer-events-none", "focus-visible:outline-none focus-visible:border-accent-default"], {
-  variants: {
-    variant: {
-      primary: ["bg-primary fill-neutral-base", "hover:bg-primary-strong", "active:bg-primary-xstrong", "aria-disabled:bg-primary-disabled", "focus-visible:ring-lg focus-visible:ring-primary-dimmed"],
-      secondary: ["bg-neutral-dimmed fill-neutral-xstrong", "hover:bg-neutral-muted", "active:bg-neutral-strong", "aria-disabled:bg-neutral-disabled aria-disabled:fill-neutral-strong", "focus-visible:ring-lg focus-visible:ring-primary-dimmed"],
-      tertiary: ["bg-neutral-base border-neutral-muted fill-neutral-xstrong", "hover:bg-neutral-light", "active:bg-neutral-muted", "aria-disabled:bg-neutral-disabled aria-disabled:fill-neutral-strong aria-disabled:border-neutral-dimmed", "focus-visible:ring-lg focus-visible:ring-primary-dimmed"],
-      ghost: ["bg-transparent fill-neutral-xstrong", "hover:bg-neutral-dark/5", "active:bg-neutral-muted", "aria-disabled:fill-neutral-strong hover:aria-disabled:bg-transparent active:aria-disabled:bg-transparent"],
-      "ghost-negative": ["bg-transparent fill-neutral-base", "hover:bg-neutral-base/20", "active:bg-neutral-base/30", "focus-visible:border-neutral-base!", "aria-disabled:fill-neutral-base aria-disabled:opacity-50 hover:aria-disabled:bg-transparent active:aria-disabled:bg-transparent"]
+const iconButtonVariants = cva([
+    "border-transparent rounded flex shrink-0 items-center justify-center ring-offset-background transition-colors cursor-pointer",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "[&_img]:pointer-events-none [&_img]:shrink-0",
+    "aria-disabled:pointer-events-none",
+    "focus-visible:outline-none focus-visible:border-accent-default"
+], {
+    variants: {
+        variant: {
+            primary: [
+                "bg-primary fill-neutral-base",
+                "hover:bg-primary-strong",
+                "active:bg-primary-xstrong",
+                "aria-disabled:bg-primary-disabled",
+                "focus-visible:ring-lg focus-visible:ring-primary-dimmed"
+            ],
+            secondary: [
+                "bg-neutral-dimmed fill-neutral-xstrong",
+                "hover:bg-neutral-muted",
+                "active:bg-neutral-strong",
+                "aria-disabled:bg-neutral-disabled aria-disabled:fill-neutral-strong",
+                "focus-visible:ring-lg focus-visible:ring-primary-dimmed"
+            ],
+            tertiary: [
+                "bg-neutral-base border-neutral-muted fill-neutral-xstrong",
+                "hover:bg-neutral-light",
+                "active:bg-neutral-muted",
+                "aria-disabled:bg-neutral-disabled aria-disabled:fill-neutral-strong aria-disabled:border-neutral-dimmed",
+                "focus-visible:ring-lg focus-visible:ring-primary-dimmed"
+            ],
+            ghost: [
+                "bg-transparent fill-neutral-xstrong",
+                "hover:bg-neutral-dark/5",
+                "active:bg-neutral-muted",
+                "aria-disabled:fill-neutral-strong hover:aria-disabled:bg-transparent active:aria-disabled:bg-transparent"
+            ],
+            "ghost-negative": [
+                "bg-transparent fill-neutral-base",
+                "hover:bg-neutral-base/20",
+                "active:bg-neutral-base/30",
+                "focus-visible:border-neutral-base!",
+                "aria-disabled:fill-neutral-base aria-disabled:opacity-50 hover:aria-disabled:bg-transparent active:aria-disabled:bg-transparent"
+            ]
+        },
+        size: {
+            xxs: "border-sm rounded-xs size-sm-extra [&_svg]:size-md [&_img]:size-md",
+            xs: "border-sm rounded-xs size-md [&_svg]:size-md [&_img]:size-md",
+            sm: "border-sm rounded-sm",
+            md: "border-sm rounded-md",
+            lg: "border-sm rounded-md",
+            xl: "border-md rounded-lg p-[calc(var(--padding-md)-(var(--border-width-md)))] [&_svg]:size-lg [&_img]:size-lg"
+        },
+        iconSize: {
+            default: "",
+            lg: ""
+        }
     },
-    size: {
-      xxs: "border-sm rounded-xs size-sm-extra [&_svg]:size-md [&_img]:size-md",
-      xs: "border-sm rounded-xs size-md [&_svg]:size-md [&_img]:size-md",
-      sm: "border-sm rounded-sm",
-      md: "border-sm rounded-md",
-      lg: "border-sm rounded-md",
-      xl: "border-md rounded-lg p-[calc(var(--padding-md)-(var(--border-width-md)))] [&_svg]:size-lg [&_img]:size-lg"
-    },
-    iconSize: {
-      default: "",
-      lg: ""
+    compoundVariants: [
+        {
+            size: "xl",
+            variant: "ghost",
+            className: "focus-visible:border-md"
+        },
+        {
+            size: "sm",
+            iconSize: "default",
+            className: "p-[calc(var(--padding-xs)-var(--border-width-sm))] [&_svg]:size-md [&_img]:size-md"
+        },
+        {
+            size: "sm",
+            iconSize: "lg",
+            className: "p-[calc(var(--padding-xxs)-var(--border-width-sm))] [&_svg]:size-md-plus [&_img]:size-md-plus"
+        },
+        {
+            size: "md",
+            iconSize: "default",
+            className: "p-[calc(var(--padding-sm)-var(--border-width-sm))] [&_svg]:size-md [&_img]:size-md"
+        },
+        {
+            size: "md",
+            iconSize: "lg",
+            className: "p-[calc(var(--padding-xs)-var(--border-width-sm))] [&_svg]:size-lg [&_img]:size-lg"
+        },
+        {
+            size: "lg",
+            iconSize: "default",
+            className: "p-[calc(var(--padding-sm-plus)-var(--border-width-sm))] [&_svg]:size-md-plus [&_img]:size-md-plus"
+        },
+        {
+            size: "lg",
+            iconSize: "lg",
+            className: "p-[calc(var(--padding-sm)-var(--border-width-sm))] [&_svg]:size-lg [&_img]:size-lg"
+        }
+    ],
+    defaultVariants: {
+        variant: "primary",
+        size: "md",
+        iconSize: "default"
     }
-  },
-  compoundVariants: [{
-    size: "xl",
-    variant: "ghost",
-    className: "focus-visible:border-md"
-  }, {
-    size: "sm",
-    iconSize: "default",
-    className: "p-[calc(var(--padding-xs)-var(--border-width-sm))] [&_svg]:size-md [&_img]:size-md"
-  }, {
-    size: "sm",
-    iconSize: "lg",
-    className: "p-[calc(var(--padding-xxs)-var(--border-width-sm))] [&_svg]:size-md-plus [&_img]:size-md-plus"
-  }, {
-    size: "md",
-    iconSize: "default",
-    className: "p-[calc(var(--padding-sm)-var(--border-width-sm))] [&_svg]:size-md [&_img]:size-md"
-  }, {
-    size: "md",
-    iconSize: "lg",
-    className: "p-[calc(var(--padding-xs)-var(--border-width-sm))] [&_svg]:size-lg [&_img]:size-lg"
-  }, {
-    size: "lg",
-    iconSize: "default",
-    className: "p-[calc(var(--padding-sm-plus)-var(--border-width-sm))] [&_svg]:size-md-plus [&_img]:size-md-plus"
-  }, {
-    size: "lg",
-    iconSize: "lg",
-    className: "p-[calc(var(--padding-sm)-var(--border-width-sm))] [&_svg]:size-lg [&_img]:size-lg"
-  }],
-  defaultVariants: {
-    variant: "primary",
-    size: "md",
-    iconSize: "default"
-  }
 });
-const DecoratableIconButton = ({
-  className,
-  variant,
-  size,
-  icon,
-  iconSize,
-  asChild = false,
-  disabled,
-  ...props
-}) => {
-  const Comp = asChild ? Slot.Root : "button";
-  return /*#__PURE__*/React.createElement("span", {
-    className: cn(iconButtonWrapperVariants({
-      disabled
-    }))
-  }, /*#__PURE__*/React.createElement(Comp, Object.assign({}, props, {
-    className: cn(iconButtonVariants({
-      variant,
-      size,
-      iconSize
-    }), className),
-    disabled: disabled,
-    "aria-disabled": disabled
-  }), icon));
+const DecoratableIconButton = ({ className, variant, size, icon, iconSize, asChild = false, disabled, ...props })=>{
+    const Comp = asChild ? Slot.Root : "button";
+    return /*#__PURE__*/ react.createElement("span", {
+        className: cn(iconButtonWrapperVariants({
+            disabled
+        }))
+    }, /*#__PURE__*/ react.createElement(Comp, {
+        ...props,
+        className: cn(iconButtonVariants({
+            variant,
+            size,
+            iconSize
+        }), className),
+        disabled: disabled,
+        "aria-disabled": disabled
+    }, icon));
 };
 const IconButton = makeDecoratable("IconButton", DecoratableIconButton);
 export { IconButton, iconButtonVariants };