@canonical/react-components 1.2.5 → 1.3.1

package/dist/components/CodeSnippet/CodeSnippet.stories.js

@@ -1,279 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WrapLines = exports.Title = exports.MultipleBlocks = exports.JsxCodeElements = exports.DropdownsStacked = exports.Dropdowns = exports.Dropdown = exports.Default = exports.Content = exports.Appearance = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _CodeSnippet = _interopRequireDefault(require("./CodeSnippet"));
-var _CodeSnippetBlock = require("./CodeSnippetBlock");
-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; }
-const meta = {
-  component: _CodeSnippet.default,
-  tags: ["autodocs"],
-  argTypes: {
-    className: {
-      control: {
-        type: "text"
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
-    blocks: [{
-      code: "Mode: all Settings: maas_url=http://192.168.122.1:5240/MAAS"
-    }]
-  }),
-  name: "Default"
-};
-
-/**
- * Use the `title` prop to add a title to a code block.
- */
-const Title = exports.Title = {
-  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
-    blocks: [{
-      title: "Output",
-      code: "Mode: all Settings: maas_url=http://192.168.122.1:5240/MAAS"
-    }]
-  }),
-  name: "Title"
-};
-
-/**
- * Pass an array of `blocks` to render multiple code blocks (for example input and output) within a single code snippet.
- */
-const MultipleBlocks = exports.MultipleBlocks = {
-  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
-    blocks: [{
-      title: "JavaScript",
-      code: "console.log('Vanilla');"
-    }, {
-      title: "Output",
-      code: "Vanilla"
-    }]
-  }),
-  name: "Multiple blocks"
-};
-
-/**
- * Use `appearance` to control the visual aspects of the code block. `"numbered"` appearance will add line numbers in the code blocks.
- * Values of `"linuxPrompt"`, `"windowsPrompt"`, `"url"` will add a relevant icon in the code block.
- */
-const Appearance = exports.Appearance = {
-  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
-    blocks: [{
-      title: "Install on Linux",
-      appearance: _CodeSnippetBlock.CodeSnippetBlockAppearance.LINUX_PROMPT,
-      code: "snap install toto"
-    }, {
-      title: "Install on Windows",
-      appearance: _CodeSnippetBlock.CodeSnippetBlockAppearance.WINDOWS_PROMPT,
-      code: "snap install toto"
-    }, {
-      title: "Get from the Store",
-      appearance: _CodeSnippetBlock.CodeSnippetBlockAppearance.URL,
-      code: "http://snapcraft.io/toto"
-    }]
-  }),
-  name: "Appearance"
-};
-
-/**
- * Set `wrapLines` prop to `true` to enable line wrapping inside the code block.
- */
-const WrapLines = exports.WrapLines = {
-  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
-    blocks: [{
-      appearance: _CodeSnippetBlock.CodeSnippetBlockAppearance.NUMBERED,
-      wrapLines: true,
-      code: "#!/bin/bash\nset -eu . $CONJURE_UP_SPELLSDIR/sdk/common.sh\nif [[ \"$JUJU_PROVIDERTYPE\" == \"lxd\" ]]; then\n  debug \"Running pre-deploy for $CONJURE_UP_SPELL\"\n  sed \"s/##MODEL##/$JUJU_MODEL/\" $(scriptPath)/lxd-profile.yaml | lxc profile edit \"juju-$JUJU_MODEL\" || exposeResult \"Failed to set profile\" $? \"false\"\nfi\nexposeResult \"Successful pre-deploy.\" 0 \"true\""
-    }]
-  }),
-  name: "Wrap lines"
-};
-
-/**
- * Dropdown select menus can be added to the headers of code blocks to allow users to choose one of the options. The dropdowns options are passed via `dropdowns` property in the block options object.
- *
- * With the `options` being an array of option properties compatible with the `Select` options (`[{ label: string, value: string | number }]`).
- */
-const Dropdown = exports.Dropdown = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [lang, setLang] = (0, _react.useState)("html");
-    const code = {
-      js: "console.log(\"Example 1\");",
-      css: ".p-heading--2 { color: red; }",
-      html: "<h1 class=\"p-heading--2\">How to use code snippets</h1>"
-    };
-    return /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
-      blocks: [{
-        code: code[lang],
-        dropdowns: [{
-          options: [{
-            value: "js",
-            label: "JS"
-          }, {
-            value: "css",
-            label: "CSS"
-          }, {
-            value: "html",
-            label: "HTML"
-          }],
-          value: lang,
-          onChange: event => {
-            setLang(event.target.value);
-          }
-        }]
-      }]
-    });
-  },
-  name: "Dropdown"
-};
-
-/**
- * Multiple dropdowns can be passed in if needed.
- */
-const Dropdowns = exports.Dropdowns = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [channel, setChannel] = (0, _react.useState)("stable");
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [snap, setSnap] = (0, _react.useState)("firefox");
-    const code = "sudo snap install ".concat(snap, " ").concat(channel === "stable" ? "" : "--" + channel);
-    return /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
-      blocks: [{
-        title: "Install snap",
-        code: code,
-        dropdowns: [{
-          options: [{
-            value: "stable",
-            label: "stable"
-          }, {
-            value: "candidate",
-            label: "candidate"
-          }, {
-            value: "beta",
-            label: "beta"
-          }, {
-            value: "edge",
-            label: "edge"
-          }],
-          value: channel,
-          onChange: event => {
-            setChannel(event.target.value);
-          }
-        }, {
-          options: [{
-            value: "firefox",
-            label: "Firefox"
-          }, {
-            value: "gimp",
-            label: "Gimp"
-          }, {
-            value: "vlc",
-            label: "VLC"
-          }],
-          value: snap,
-          onChange: event => {
-            setSnap(event.target.value);
-          }
-        }]
-      }]
-    });
-  },
-  name: "Dropdowns"
-};
-
-/**
- * If multiple dropdowns may overlap with long title you can use `stacked` variant, by setting the relevant property on code block options.
- */
-const DropdownsStacked = exports.DropdownsStacked = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [channel, setChannel] = (0, _react.useState)("stable");
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [snap, setSnap] = (0, _react.useState)("firefox");
-    const code = "sudo snap install ".concat(snap, " ").concat(channel === "stable" ? "" : "--" + channel);
-    return /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
-      blocks: [{
-        title: "Install Firefox, Gimp or VLC as a snap from different channels using command line",
-        code: code,
-        stacked: true,
-        dropdowns: [{
-          options: [{
-            value: "stable",
-            label: "stable"
-          }, {
-            value: "candidate",
-            label: "candidate"
-          }, {
-            value: "beta",
-            label: "beta"
-          }, {
-            value: "edge",
-            label: "edge"
-          }],
-          value: channel,
-          onChange: event => {
-            setChannel(event.target.value);
-          }
-        }, {
-          options: [{
-            value: "firefox",
-            label: "Firefox"
-          }, {
-            value: "gimp",
-            label: "Gimp"
-          }, {
-            value: "vlc",
-            label: "VLC"
-          }],
-          value: snap,
-          onChange: event => {
-            setSnap(event.target.value);
-          }
-        }]
-      }]
-    });
-  },
-  name: "DropdownsStacked"
-};
-
-/**
- * Custom elements can be passed to a CodeBlock via the `content` prop. In these cases, a border will be added around the entire code snippet to visually associate the content with the code block.
- */
-const Content = exports.Content = {
-  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
-    blocks: [{
-      title: "With embedded iframe",
-      code: "<iframe src='./iframe.html?viewMode=story&id=components-button--default&args='></iframe>",
-      content: /*#__PURE__*/_react.default.createElement("iframe", {
-        title: "iframe",
-        src: "./iframe.html?viewMode=story&id=components-button--default&args="
-      })
-    }]
-  }),
-  name: "Content"
-};
-
-/**
- * It's possible to pass JSX instead of strings to the `code` parameter, either as a single element or an array (e.g. if you want to display line numbers).
- */
-const JsxCodeElements = exports.JsxCodeElements = {
-  render: () => /*#__PURE__*/_react.default.createElement(_CodeSnippet.default, {
-    blocks: [{
-      code: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("strong", null, "snap"), "install", /*#__PURE__*/_react.default.createElement("a", {
-        href: "#test"
-      }, "toto"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("strong", null, "apt"), "install", /*#__PURE__*/_react.default.createElement("a", {
-        href: "#test"
-      }, "toto"))
-    }]
-  }),
-  name: "JSX code elements"
-};

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

@@ -1,11 +0,0 @@
-import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
-import Col from "./Col";
-declare const Template: (args: any) => React.JSX.Element;
-declare const meta: Meta<typeof Template>;
-export default meta;
-type Story = StoryObj<typeof Col>;
-export declare const Default: Story;
-export declare const Grid: Story;
-export declare const NestedColumns: Story;
-export declare const EmptyColumns: Story;

package/dist/components/Col/Col.stories.js

@@ -1,154 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.NestedColumns = exports.Grid = exports.EmptyColumns = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Col = _interopRequireDefault(require("./Col"));
-var _Row = _interopRequireDefault(require("../Row"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Template = args => {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "grid-demo"
-  }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, args)));
-};
-const meta = {
-  component: _Col.default,
-  render: Template,
-  tags: ["autodocs"],
-  argTypes: {
-    children: {
-      control: {
-        type: "text"
-      }
-    },
-    size: {
-      control: {
-        type: "range",
-        min: 1,
-        max: 12,
-        step: 1
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    children: "Hi, I'm Col.",
-    size: 12
-  }
-};
-const Grid = exports.Grid = {
-  render: () => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "grid-demo"
-    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 12
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-12"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 11
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-11")), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 1
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-1"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 10
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-10")), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 2
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-2"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 9
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-9")), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 3
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-3"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 8
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-8")), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 4
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-4"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 7
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-7")), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 5
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-5"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 6
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-6")), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 6
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-6"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 5
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-5")), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 7
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-7"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 4
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-4")), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 8
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-8"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 3
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-3")), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 9
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-9"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 2
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-2")), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 10
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-10"))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 1
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-1")), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 11
-    }, /*#__PURE__*/_react.default.createElement("span", null, ".col-11"))));
-  },
-  name: "Grid"
-};
-const NestedColumns = exports.NestedColumns = {
-  render: () => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "grid-demo"
-    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      small: 4,
-      medium: 6,
-      size: 12
-    }, "col-small-4 .col-medium-6 .col-12", /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      small: 3,
-      medium: 3,
-      size: 9
-    }, "col-small-3 .col-medium-3 .col-9", /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      small: 1,
-      medium: 1,
-      size: 2
-    }, "col-small-1 col-medium-1 col-2"), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      small: 1,
-      medium: 1,
-      size: 3
-    }, "col-small-1 col-medium-1 col-2"), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      small: 1,
-      medium: 1,
-      size: 3
-    }, "col-small-1 col-medium-1 col-2"))), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      small: 1,
-      medium: 3,
-      size: 3
-    }, "col-small-2 col-medium-3 col-3")))));
-  },
-  name: "Nested columns"
-};
-const EmptyColumns = exports.EmptyColumns = {
-  render: () => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "grid-demo"
-    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 8
-    }, ".col-8"), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 4
-    }, ".col-4")), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 7
-    }, ".col-7"), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 4
-    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 3,
-      emptyLarge: 2
-    }, "col-3 col-start-large-2 inside col-4")))), /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 7
-    }, ".col-7"), /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 4
-    }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-      size: 3
-    }, "col-3 inside col-4")))));
-  },
-  name: "Empty columns"
-};

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

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

package/dist/components/ConfirmationButton/ConfirmationButton.stories.js

@@ -1,108 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.IconOnly = exports.IconAndLabel = exports.Default = exports.BaseAppearance = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _ConfirmationButton = _interopRequireDefault(require("./ConfirmationButton"));
-var _Icon = _interopRequireWildcard(require("../Icon"));
-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; }
-const doNothing = () => {};
-const meta = {
-  component: _ConfirmationButton.default,
-  tags: ["autodocs"]
-};
-const Default = exports.Default = {
-  render: () => /*#__PURE__*/_react.default.createElement(_ConfirmationButton.default, {
-    confirmationModalProps: {
-      title: "Confirm delete",
-      confirmButtonLabel: "Delete",
-      onConfirm: doNothing,
-      children: /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")
-    }
-  }, "Delete"),
-  name: "Default"
-};
-var _default = exports.default = meta;
-const IconAndLabel = exports.IconAndLabel = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [isLoading, setLoading] = (0, _react.useState)(false);
-    const brieflyLoad = () => {
-      setLoading(true);
-      setTimeout(() => setLoading(false), 2000);
-    };
-    return /*#__PURE__*/_react.default.createElement(_ConfirmationButton.default, {
-      confirmationModalProps: {
-        title: "Confirm delete",
-        confirmButtonLabel: "Delete",
-        onConfirm: brieflyLoad,
-        children: /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")
-      },
-      className: "has-icon",
-      disabled: isLoading,
-      loading: isLoading,
-      shiftClickEnabled: true,
-      showShiftClickHint: true
-    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      name: _Icon.ICONS.delete
-    }), /*#__PURE__*/_react.default.createElement("span", null, "Delete"));
-  },
-  name: "Icon and label"
-};
-const IconOnly = exports.IconOnly = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [isLoading, setLoading] = (0, _react.useState)(false);
-    const brieflyLoad = () => {
-      setLoading(true);
-      setTimeout(() => setLoading(false), 2000);
-    };
-    return /*#__PURE__*/_react.default.createElement(_ConfirmationButton.default, {
-      confirmationModalProps: {
-        title: "Confirm delete",
-        confirmButtonLabel: "Delete",
-        onConfirm: brieflyLoad,
-        children: /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")
-      },
-      className: "has-icon",
-      disabled: isLoading,
-      loading: isLoading,
-      shiftClickEnabled: true,
-      showShiftClickHint: true
-    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      name: _Icon.ICONS.delete
-    }));
-  },
-  name: "Icon only"
-};
-const BaseAppearance = exports.BaseAppearance = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [isLoading, setLoading] = (0, _react.useState)(false);
-    const brieflyLoad = () => {
-      setLoading(true);
-      setTimeout(() => setLoading(false), 2000);
-    };
-    return /*#__PURE__*/_react.default.createElement(_ConfirmationButton.default, {
-      appearance: "base",
-      confirmationModalProps: {
-        title: "Confirm delete",
-        confirmButtonLabel: "Delete",
-        onConfirm: brieflyLoad,
-        children: /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")
-      },
-      className: "has-icon",
-      disabled: isLoading,
-      loading: isLoading,
-      shiftClickEnabled: true,
-      showShiftClickHint: true
-    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      name: _Icon.ICONS.delete
-    }));
-  },
-  name: "Base appearance"
-};

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

@@ -1,18 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import ConfirmationModal from "./ConfirmationModal";
-declare const meta: Meta<typeof ConfirmationModal>;
-export default meta;
-type Story = StoryObj<typeof ConfirmationModal>;
-export declare const Default: Story;
-/**
- * The title is optional, and the content is fully customisable.
- */
-export declare const NoTitle: Story;
-/**
- * The appearance of the confirm button can be any of the `Button`'s appearance values.
- */
-export declare const Positive: Story;
-/**
- * Extra elements can be added to the button row.
- */
-export declare const Extra: Story;