@canonical/react-components 1.5.0 → 1.7.0

package/dist/components/ApplicationLayout/AppStatus/AppStatus.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ApplicationLayout/Application/Application.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Application from "./Application";
+declare const meta: Meta<typeof Application>;
+export default meta;
+type Story = StoryObj<typeof Application>;
+export declare const Default: Story;

package/dist/components/ApplicationLayout/Application/Application.stories.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _Application = _interopRequireDefault(require("./Application"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _Application.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {}
+};

package/dist/components/ApplicationLayout/Application/Application.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ApplicationLayout/ApplicationLayout.stories.d.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ApplicationLayout from "./ApplicationLayout";
+declare const meta: Meta<typeof ApplicationLayout>;
+export default meta;
+type Story = StoryObj<typeof ApplicationLayout>;
+export declare const Default: Story;
+/**
+ * The pinned and collapsed states can be handled externally if you need access
+ * to these outside the application layout.
+ */
+export declare const ExternalStates: Story;
+/**
+ * Menu items can either be provided as an array given to `navItems` or when
+ * more control is needed then by proving `sideNavigation`.
+ *
+ * For more details about how to provide navigation items see the
+ * [`SideNavigation`](/docs/components-sidenavigation--docs) docs.
+ */
+export declare const Navigation: Story;
+/**
+ * App navigation can also be completely opted out of, for some
+ * particular scenarios (e.g. login page, error pages).
+ */
+export declare const NoNavigation: Story;

package/dist/components/ApplicationLayout/ApplicationLayout.stories.js

@@ -0,0 +1,232 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.NoNavigation = exports.Navigation = exports.ExternalStates = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Form = _interopRequireDefault(require("../Form"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Row = _interopRequireDefault(require("../Row"));
+var _Col = _interopRequireDefault(require("../Col"));
+var _ApplicationLayout = _interopRequireDefault(require("./ApplicationLayout"));
+var _AppAside = _interopRequireDefault(require("./AppAside"));
+var _Panel = _interopRequireDefault(require("../Panel"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _SideNavigation = _interopRequireDefault(require("../SideNavigation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable react-hooks/rules-of-hooks */
+
+const meta = {
+  component: _ApplicationLayout.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => {
+    const [showAside, setShowAside] = (0, _react.useState)(true);
+    const [asidePinned, setAsidePinned] = (0, _react.useState)(false);
+    return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.default, {
+      logo: {
+        icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+        name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
+        nameAlt: "JAAS",
+        href: "/"
+      },
+      navItems: [{
+        items: [{
+          icon: "drag",
+          label: "Models",
+          href: "/models"
+        }, {
+          icon: "menu",
+          label: "Controllers",
+          href: "/controllers"
+        }, {
+          icon: "user",
+          label: "Permissions",
+          href: "/users"
+        }]
+      }],
+      aside: showAside ? /*#__PURE__*/_react.default.createElement(_AppAside.default, {
+        pinned: asidePinned
+      }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+        title: "Aside panel",
+        controls: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+          onClick: () => setAsidePinned(!asidePinned),
+          dense: true,
+          className: "u-no-margin"
+        }, "Pin aside"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+          appearance: "base",
+          className: "u-no-margin--bottom",
+          hasIcon: true,
+          onClick: () => {
+            setShowAside(false);
+            setAsidePinned(false);
+          }
+        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          name: "close"
+        }, "Close")))
+      }, /*#__PURE__*/_react.default.createElement(_Form.default, {
+        stacked: true
+      }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+        label: "Full name",
+        type: "text",
+        name: "fullName",
+        autoComplete: "name",
+        stacked: true
+      }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+        label: "Username",
+        type: "text",
+        name: "username-stacked",
+        autoComplete: "username",
+        "aria-describedby": "exampleHelpTextMessage",
+        stacked: true,
+        help: "30 characters or fewer."
+      }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+        type: "text",
+        label: "Email address",
+        "aria-invalid": "true",
+        name: "username-stackederror",
+        autoComplete: "email",
+        required: true,
+        error: "This field is required.",
+        stacked: true
+      }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+        label: "Address line 1",
+        type: "text",
+        name: "address-optional-stacked",
+        autoComplete: "address-line1",
+        stacked: true
+      }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+        label: "Address line 2",
+        type: "text",
+        name: "address-optional-stacked",
+        autoComplete: "address-line3",
+        stacked: true
+      }), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+        size: 12
+      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+        appearance: "positive",
+        className: "u-float-right",
+        name: "add-details"
+      }, "Add details")))))) : null,
+      status: /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: () => setShowAside(!showAside),
+        dense: true,
+        appearance: "base",
+        className: "u-no-margin"
+      }, "Toggle aside")
+    }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      title: "Application Layout"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 12
+    }, "Content"))));
+  }
+};
+
+/**
+ * The pinned and collapsed states can be handled externally if you need access
+ * to these outside the application layout.
+ */
+const ExternalStates = exports.ExternalStates = {
+  render: () => {
+    const [menuPinned, setMenuPinned] = (0, _react.useState)(false);
+    const [menuCollapsed, setMenuCollapsed] = (0, _react.useState)(true);
+    return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.default, {
+      menuPinned: menuPinned,
+      onPinMenu: setMenuPinned,
+      menuCollapsed: menuCollapsed,
+      onCollapseMenu: setMenuCollapsed,
+      logo: {
+        icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+        name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
+        nameAlt: "JAAS",
+        href: "/"
+      },
+      navItems: [{
+        items: [{
+          icon: "drag",
+          label: "Models",
+          href: "/models"
+        }, {
+          icon: "menu",
+          label: "Controllers",
+          href: "/controllers"
+        }, {
+          icon: "user",
+          label: "Permissions",
+          href: "/users"
+        }]
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      title: "Application Layout"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 12
+    }, "Content"))));
+  }
+};
+
+/**
+ * Menu items can either be provided as an array given to `navItems` or when
+ * more control is needed then by proving `sideNavigation`.
+ *
+ * For more details about how to provide navigation items see the
+ * [`SideNavigation`](/docs/components-sidenavigation--docs) docs.
+ */
+const Navigation = exports.Navigation = {
+  render: () => {
+    const [menuPinned, setMenuPinned] = (0, _react.useState)(false);
+    const [menuCollapsed, setMenuCollapsed] = (0, _react.useState)(true);
+    return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.default, {
+      menuPinned: menuPinned,
+      onPinMenu: setMenuPinned,
+      menuCollapsed: menuCollapsed,
+      onCollapseMenu: setMenuCollapsed,
+      logo: {
+        icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+        name: "https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg",
+        nameAlt: "JAAS",
+        href: "/"
+      },
+      sideNavigation: /*#__PURE__*/_react.default.createElement(_SideNavigation.default, {
+        items: [{
+          items: [{
+            icon: "drag",
+            label: "Models",
+            href: "/models"
+          }, {
+            icon: "menu",
+            label: "Controllers",
+            href: "/controllers"
+          }, {
+            icon: "user",
+            label: "Permissions",
+            href: "/users"
+          }]
+        }]
+      })
+    }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      title: "Application Layout"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 12
+    }, "Content"))));
+  }
+};
+
+/**
+ * App navigation can also be completely opted out of, for some
+ * particular scenarios (e.g. login page, error pages).
+ */
+const NoNavigation = exports.NoNavigation = {
+  render: () => {
+    return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.default, null, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+      title: "Application Layout with no navigation"
+    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
+      size: 12
+    }, "Content"))));
+  }
+};

package/dist/components/ApplicationLayout/ApplicationLayout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ArticlePagination/ArticlePagination.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ArticlePagination from "./ArticlePagination";
+declare const meta: Meta<typeof ArticlePagination>;
+export default meta;
+type Story = StoryObj<typeof ArticlePagination>;
+export declare const Default: Story;

package/dist/components/ArticlePagination/ArticlePagination.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _ArticlePagination = _interopRequireDefault(require("./ArticlePagination"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _ArticlePagination.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    nextLabel: "Consectetur adipisicing elit",
+    nextURL: "#next",
+    previousLabel: "Lorem ipsum dolor sit amet",
+    previousURL: "#previous"
+  }
+};

package/dist/components/ArticlePagination/ArticlePagination.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Badge/Badge.stories.d.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Badge from "./Badge";
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Default: Story;
+export declare const ColourCoding: Story;
+/**
+ * When the amount of items is only relevant for small values, this variant should be used. When the value grows further than 999, the badge should show "999+".
+ */
+export declare const UndefinedLargeNumber: Story;
+/**
+ * When the value of the badge represents a type of information where differences between large amounts of items are relevant, it should include a decimal unit prefix and round the value.
+ */
+export declare const RoundedLargeNumber: Story;

package/dist/components/Badge/Badge.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.UndefinedLargeNumber = exports.RoundedLargeNumber = exports.Default = exports.ColourCoding = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Badge = _interopRequireWildcard(require("./Badge"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _Badge.default,
+  tags: ["autodocs"],
+  argTypes: {
+    badgeType: {
+      control: {
+        options: _Badge.BadgeType,
+        type: "select"
+      }
+    }
+  },
+  args: {
+    badgeType: _Badge.BadgeType.UNDEFINED_LARGE_NUMBER
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    value: 9
+  }
+};
+const ColourCoding = exports.ColourCoding = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Badge.default, {
+    value: 9,
+    isNegative: true
+  }),
+  name: "Colour Coding"
+};
+
+/**
+ * When the amount of items is only relevant for small values, this variant should be used. When the value grows further than 999, the badge should show "999+".
+ */
+const UndefinedLargeNumber = exports.UndefinedLargeNumber = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Badge.default, {
+    value: 1000,
+    badgeType: _Badge.BadgeType.UNDEFINED_LARGE_NUMBER
+  }),
+  name: "Undefined Large Number"
+};
+
+/**
+ * When the value of the badge represents a type of information where differences between large amounts of items are relevant, it should include a decimal unit prefix and round the value.
+ */
+const RoundedLargeNumber = exports.RoundedLargeNumber = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Badge.default, {
+    value: 1234,
+    badgeType: _Badge.BadgeType.ROUNDED_LARGE_NUMBER
+  }),
+  name: "Rounded Large Number"
+};

package/dist/components/Badge/Badge.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Button/Button.stories.d.ts

@@ -0,0 +1,32 @@
+import { HTMLProps } from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import Button from "./Button";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story<P = null> = StoryObj<typeof Button<P>>;
+export declare const Default: Story;
+export declare const DefaultDisabled: Story;
+export declare const Base: Story;
+export declare const BaseDisabled: Story;
+export declare const Link: {
+    name: string;
+    args: {
+        children: string;
+        appearance: string;
+        element: string;
+        href: string;
+    };
+};
+export declare const LinkDisabled: Story<HTMLProps<HTMLAnchorElement>>;
+export declare const Positive: Story;
+export declare const PositiveDisabled: Story;
+export declare const Negative: Story;
+export declare const NegativeDisabled: Story;
+export declare const Brand: Story;
+export declare const BrandDisabled: Story;
+export declare const Inline: Story;
+export declare const Dense: Story;
+export declare const Small: Story;
+export declare const Icon: Story;
+export declare const IconText: Story;
+export declare const IconWithTooltip: Story;

package/dist/components/Button/Button.stories.js

@@ -0,0 +1,180 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Small = exports.PositiveDisabled = exports.Positive = exports.NegativeDisabled = exports.Negative = exports.LinkDisabled = exports.Link = exports.Inline = exports.IconWithTooltip = exports.IconText = exports.Icon = exports.Dense = exports.DefaultDisabled = exports.Default = exports.BrandDisabled = exports.Brand = exports.BaseDisabled = exports.Base = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _Button = _interopRequireWildcard(require("./Button"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _Button.default,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    },
+    appearance: {
+      control: {
+        options: _Button.ButtonAppearance,
+        type: "select"
+      }
+    }
+  },
+  args: {
+    children: "Click me!",
+    appearance: _Button.ButtonAppearance.DEFAULT
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    children: "Button"
+  }
+};
+const DefaultDisabled = exports.DefaultDisabled = {
+  name: "Default disabled",
+  args: {
+    children: "Button",
+    disabled: true
+  }
+};
+const Base = exports.Base = {
+  name: "Base",
+  args: {
+    children: "Base button",
+    appearance: "base"
+  }
+};
+const BaseDisabled = exports.BaseDisabled = {
+  name: "Base disabled",
+  args: {
+    children: "Base button disabled",
+    appearance: "base",
+    disabled: true
+  }
+};
+const Link = exports.Link = {
+  name: "Link",
+  args: {
+    children: "Link button",
+    appearance: "base",
+    element: "a",
+    href: "#test"
+  }
+};
+const LinkDisabled = exports.LinkDisabled = {
+  name: "Link disabled",
+  args: {
+    children: "Link button disabled",
+    appearance: "base",
+    element: "a",
+    href: "#test",
+    disabled: true
+  }
+};
+const Positive = exports.Positive = {
+  name: "Positive",
+  args: {
+    children: "Positive button",
+    appearance: "positive"
+  }
+};
+const PositiveDisabled = exports.PositiveDisabled = {
+  name: "Positive disabled",
+  args: {
+    children: "Positive button disabled",
+    appearance: "positive",
+    disabled: true
+  }
+};
+const Negative = exports.Negative = {
+  name: "Negative",
+  args: {
+    children: "Negative button",
+    appearance: "negative"
+  }
+};
+const NegativeDisabled = exports.NegativeDisabled = {
+  name: "Negative disabled",
+  args: {
+    children: "Negative button disabled",
+    appearance: "negative",
+    disabled: true
+  }
+};
+const Brand = exports.Brand = {
+  name: "Brand",
+  args: {
+    children: "Brand button",
+    appearance: "brand"
+  }
+};
+const BrandDisabled = exports.BrandDisabled = {
+  name: "Brand disabled",
+  args: {
+    children: "Brand button disabled",
+    appearance: "brand",
+    disabled: true
+  }
+};
+const Inline = exports.Inline = {
+  render: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, "Everything you need to get started with Vanilla."), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    appearance: "neutral",
+    inline: true
+  }, "Inline button")),
+  name: "Inline"
+};
+const Dense = exports.Dense = {
+  render: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, "Everything you need to get started with Vanilla."), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    dense: true
+  }, "Dense button")),
+  name: "Dense"
+};
+const Small = exports.Small = {
+  render: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    small: true
+  }, "Small button"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    small: true,
+    dense: true
+  }, "Small dense button")),
+  name: "Small"
+};
+const Icon = exports.Icon = {
+  name: "Icon",
+  args: {
+    children: /*#__PURE__*/_react.default.createElement("i", {
+      className: "p-icon--plus"
+    }),
+    hasIcon: true
+  }
+};
+const IconText = exports.IconText = {
+  name: "Icon & text",
+  args: {
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("i", {
+      className: "p-icon--plus"
+    }), " ", /*#__PURE__*/_react.default.createElement("span", null, "Button with icon & text")),
+    hasIcon: true
+  }
+};
+const IconWithTooltip = exports.IconWithTooltip = {
+  name: "Disabled with tooltip",
+  args: {
+    children: "Disabled button with a tooltip",
+    disabled: true
+  },
+  render: args => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      paddingTop: "3rem"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    message: "This button is disabled"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, args)))
+};

package/dist/components/Button/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Card/Card.stories.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import Card from "./";
+declare const meta: Meta<typeof Card>;
+export default meta;
+export declare const Default: {
+    args: {
+        title: string;
+        children: string;
+    };
+};
+export declare const Header: {
+    args: {
+        title: string;
+        thumbnail: string;
+        children: string;
+    };
+};
+export declare const Highlighted: {
+    args: {
+        highlighted: boolean;
+        title: string;
+        children: string;
+    };
+};
+export declare const Overlay: {
+    args: {
+        title: string;
+        overlay: boolean;
+        children: string;
+    };
+    render: (args: any) => React.JSX.Element;
+};