@canonical/react-components 1.3.0 → 1.3.1

package/dist-esm/components/Button/Button.js

@@ -0,0 +1,55 @@
+var _excluded = ["appearance", "children", "className", "dense", "disabled", "element", "hasIcon", "inline", "onClick", "small"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+export var ButtonAppearance = {
+  BASE: "base",
+  BRAND: "brand",
+  DEFAULT: "",
+  LINK: "link",
+  NEGATIVE: "negative",
+  POSITIVE: "positive"
+};
+
+/**
+ * The type of the Button props.
+ * @template P - The type of the props if providing a component to `element`
+ */
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Button](https://docs.vanillaframework.io/patterns/buttons/).
+ *
+ * Buttons are clickable elements used to perform an action, they can be used for buttons and link elements.
+ * @template P - The type of the props if providing a component to `element`
+ */
+var Button = _ref => {
+  var {
+      appearance,
+      children,
+      className,
+      dense,
+      disabled,
+      element: Component = "button",
+      hasIcon,
+      inline,
+      onClick,
+      small
+    } = _ref,
+    buttonProps = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames(appearance ? "p-button--".concat(appearance) : "p-button", {
+    "has-icon": hasIcon,
+    "is-dense": dense,
+    "is-disabled": disabled,
+    "is-inline": inline,
+    "is-small": small
+  }, className);
+  var onClickDisabled = e => e.preventDefault();
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classes,
+    onClick: disabled ? onClickDisabled : onClick,
+    "aria-disabled": disabled || undefined
+  }, buttonProps), children);
+};
+export default Button;

package/dist-esm/components/Button/index.js

@@ -0,0 +1 @@
+export { default, ButtonAppearance } from "./Button";

package/dist-esm/components/Card/Card.js

@@ -0,0 +1,45 @@
+var _excluded = ["children", "className", "highlighted", "overlay", "thumbnail", "title"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React, { useId } from "react";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Card](https://docs.vanillaframework.io/patterns/card/).
+ *
+ * There are four card styles available to use in Vanilla: default, header, highlighted and overlay. Our card component will expand to fill the full width of its parent container.
+ */
+
+var Card = _ref => {
+  var {
+      children,
+      className,
+      highlighted,
+      overlay,
+      thumbnail,
+      title
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var titleId = useId();
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "aria-labelledby": title ? titleId : undefined,
+    className: classNames(className, {
+      "p-card": !highlighted && !overlay,
+      "p-card--highlighted": highlighted,
+      "p-card--overlay": overlay
+    }),
+    role: "group"
+  }, props), thumbnail && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
+    className: "p-card__thumbnail",
+    src: thumbnail,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("hr", {
+    className: "u-sv1"
+  })), title && /*#__PURE__*/React.createElement("h3", {
+    className: "p-card__title",
+    id: titleId
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "p-card__content"
+  }, children));
+};
+export default Card;

package/dist-esm/components/Card/index.js

@@ -0,0 +1 @@
+export { default } from "./Card";

package/dist-esm/components/CheckboxInput/CheckableInput/CheckableInput.js

@@ -0,0 +1,35 @@
+var _excluded = ["inputType", "label", "labelClassName", "indeterminate", "inline"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React, { useEffect, useRef, useId } from "react";
+var CheckableInput = _ref => {
+  var {
+      inputType,
+      label,
+      labelClassName,
+      indeterminate = false,
+      inline
+    } = _ref,
+    checkboxProps = _objectWithoutProperties(_ref, _excluded);
+  var inputId = useId();
+  var inputRef = useRef(null);
+  useEffect(() => {
+    inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /*#__PURE__*/React.createElement("label", {
+    className: classNames(labelClassName, "p-".concat(inputType).concat(inline ? "--inline" : ""), {
+      "is-required": checkboxProps.required
+    })
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    "aria-labelledby": inputId,
+    className: "p-".concat(inputType, "__input"),
+    ref: inputRef,
+    type: inputType
+  }, checkboxProps)), /*#__PURE__*/React.createElement("span", {
+    className: "p-".concat(inputType, "__label"),
+    id: inputId
+  }, label));
+};
+export default CheckableInput;

package/dist-esm/components/CheckboxInput/CheckableInput/index.js

@@ -0,0 +1 @@
+export { default } from "./CheckableInput";

package/dist-esm/components/CheckboxInput/CheckboxInput.js

@@ -0,0 +1,24 @@
+var _excluded = ["label", "indeterminate"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import CheckableInput from "./CheckableInput";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Checkbox input](https://docs.vanillaframework.io/base/forms#checkbox).
+ *
+ * Use the checkbox component to select one or more options.
+ */
+var CheckboxInput = _ref => {
+  var {
+      label,
+      indeterminate = false
+    } = _ref,
+    checkboxProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(CheckableInput, _extends({
+    label: label,
+    inputType: "checkbox",
+    indeterminate: indeterminate
+  }, checkboxProps));
+};
+export default CheckboxInput;

package/dist-esm/components/CheckboxInput/index.js

@@ -0,0 +1 @@
+export { default } from "./CheckboxInput";

package/dist-esm/components/Chip/Chip.js

@@ -0,0 +1,81 @@
+var _excluded = ["appearance", "lead", "onClick", "onDismiss", "quoteValue", "selected", "subString", "value"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import { highlightSubString } from "../../utils";
+import classNames from "classnames";
+export var Label = /*#__PURE__*/function (Label) {
+  Label["Dismiss"] = "Dismiss";
+  return Label;
+}({});
+export var ChipType = {
+  CAUTION: "caution",
+  INFORMATION: "information",
+  NEGATIVE: "negative",
+  POSITIVE: "positive"
+};
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Chip](https://vanillaframework.io/docs/patterns/chip).
+ *
+ * It can be used to display a small value attached to a component.
+ */
+var Chip = _ref => {
+  var {
+      appearance,
+      lead = "",
+      onClick,
+      onDismiss,
+      quoteValue,
+      selected,
+      subString = "",
+      value
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // When user tabs over chip and presses Enter or Space key, chip will trigger
+  // click functionality
+  var _onKeyDown = e => {
+    // The " " value is what is returned for the spacebar
+    if (e.key === " " || e.key === "Enter") {
+      if (typeof onClick === "function") {
+        onClick({
+          lead: lead,
+          value: value
+        });
+      }
+    }
+  };
+  var chipValue = highlightSubString(value, subString).text;
+  var chipContent = /*#__PURE__*/React.createElement(React.Fragment, null, lead && /*#__PURE__*/React.createElement("span", {
+    className: "p-chip__lead"
+  }, lead.toUpperCase()), /*#__PURE__*/React.createElement("span", {
+    className: "p-chip__value",
+    dangerouslySetInnerHTML: {
+      __html: quoteValue ? "'".concat(chipValue, "'") : chipValue
+    }
+  }));
+  var chipClassName = classNames({
+    ["p-chip--".concat(appearance)]: !!appearance,
+    "p-chip": !appearance
+  }, props.className);
+  if (onDismiss) {
+    return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+      className: chipClassName
+    }), chipContent, /*#__PURE__*/React.createElement("button", {
+      className: "p-chip__dismiss",
+      onClick: onDismiss,
+      type: "button"
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "p-icon--close"
+    }, Label.Dismiss)));
+  } else {
+    return /*#__PURE__*/React.createElement("button", _extends({}, props, {
+      "aria-pressed": selected,
+      className: chipClassName,
+      onClick: onClick,
+      onKeyDown: e => _onKeyDown(e),
+      type: "button"
+    }), chipContent);
+  }
+};
+export default Chip;

package/dist-esm/components/Chip/index.js

@@ -0,0 +1 @@
+export { default } from "./Chip";

package/dist-esm/components/Code/Code.js

@@ -0,0 +1,49 @@
+import _pt from "prop-types";
+var _excluded = ["children", "className", "inline", "copyable", "numbered"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import CodeSnippet, { CodeSnippetBlockAppearance } from "../CodeSnippet";
+import { IS_DEV } from "../../utils";
+/**
+ * @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
+ */
+var Code = _ref => {
+  var {
+      children,
+      className,
+      inline,
+      copyable,
+      numbered
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (IS_DEV) {
+    console.warn("Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.");
+  }
+  if (inline) {
+    return /*#__PURE__*/React.createElement("code", _extends({
+      className: className
+    }, props), children);
+  } else {
+    var appearance = null;
+    if (numbered) {
+      appearance = CodeSnippetBlockAppearance.NUMBERED;
+    } else if (copyable) {
+      appearance = CodeSnippetBlockAppearance.LINUX_PROMPT;
+    }
+    return /*#__PURE__*/React.createElement(CodeSnippet, {
+      blocks: [{
+        appearance,
+        code: children
+      }]
+    });
+  }
+};
+Code.propTypes = {
+  children: _pt.string.isRequired,
+  inline: _pt.bool,
+  copyable: _pt.bool,
+  numbered: _pt.bool
+};
+export default Code;

package/dist-esm/components/Code/index.js

@@ -0,0 +1 @@
+export { default } from "./Code";

package/dist-esm/components/CodeSnippet/CodeSnippet.js

@@ -0,0 +1,28 @@
+var _excluded = ["className", "blocks"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+import CodeSnippetBlock from "./CodeSnippetBlock";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Code snippet](https://docs.vanillaframework.io/base/code#code-snippet).
+ *
+ * #### Blocks
+ *
+ * A single `CodeSnippet` component can render multiple separate code blocks. Blocks are provided as an array via the `blocks` prop. Each block object defines values of props for each code block of the snippet.
+ */
+export default function CodeSnippet(_ref) {
+  var {
+      className,
+      blocks
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames("p-code-snippet", {
+      "is-bordered": blocks.some(block => block.content)
+    }, className)
+  }, props), blocks.map((blockProps, i) => /*#__PURE__*/React.createElement(CodeSnippetBlock, _extends({
+    key: "code-snippet-block-".concat(i)
+  }, blockProps))));
+}

package/dist-esm/components/CodeSnippet/CodeSnippetBlock.js

@@ -0,0 +1,64 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import classNames from "classnames";
+import React from "react";
+import CodeSnippetDropdown from "./CodeSnippetDropdown";
+export var CodeSnippetBlockAppearance = {
+  LINUX_PROMPT: "linuxPrompt",
+  NUMBERED: "numbered",
+  URL: "url",
+  WINDOWS_PROMPT: "windowsPrompt"
+};
+export default function CodeSnippetBlock(_ref) {
+  var {
+    appearance,
+    code,
+    content,
+    dropdowns,
+    stacked = false,
+    title,
+    wrapLines = false
+  } = _ref;
+  var className = "p-code-snippet__block";
+  var isNumbered = appearance === CodeSnippetBlockAppearance.NUMBERED;
+  var hasIcon = appearance === CodeSnippetBlockAppearance.LINUX_PROMPT || appearance === CodeSnippetBlockAppearance.WINDOWS_PROMPT || appearance === CodeSnippetBlockAppearance.URL;
+  var numberedCode;
+  if (isNumbered) {
+    className += "--numbered";
+
+    // wrap code lines in spans (and preserve the whitespace)
+    var lines;
+    if (Array.isArray(code)) {
+      lines = code;
+    } else if (typeof code === "string") {
+      lines = code.split(/\r?\n/);
+    } else {
+      // If the code is not able to be split over multiple lines, then display
+      // a single line number.
+      lines = [code];
+    }
+    numberedCode = lines.map((line, i) => /*#__PURE__*/React.createElement(React.Fragment, {
+      key: "p-code-snippet__line-".concat(i)
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "p-code-snippet__line"
+    }, line), "\n"));
+  } else if (hasIcon) {
+    className += "--icon";
+  }
+  className = classNames(className, {
+    "is-windows-prompt": appearance === CodeSnippetBlockAppearance.WINDOWS_PROMPT,
+    "is-url": appearance === CodeSnippetBlockAppearance.URL,
+    "is-wrapped": wrapLines
+  });
+  var hasDropdowns = dropdowns && dropdowns.length;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (title || hasDropdowns) && /*#__PURE__*/React.createElement("div", {
+    className: "p-code-snippet__header ".concat(stacked ? "is-stacked" : "")
+  }, /*#__PURE__*/React.createElement("h5", {
+    className: "p-code-snippet__title"
+  }, title), hasDropdowns && /*#__PURE__*/React.createElement("div", {
+    className: "p-code-snippet__dropdowns"
+  }, dropdowns.map((dropdown, i) => /*#__PURE__*/React.createElement(CodeSnippetDropdown, _extends({}, dropdown, {
+    key: "code-snippet-dropdown-".concat(i)
+  }))))), /*#__PURE__*/React.createElement("pre", {
+    className: className
+  }, /*#__PURE__*/React.createElement("code", null, isNumbered ? numberedCode : code)), content);
+}

package/dist-esm/components/CodeSnippet/CodeSnippetDropdown.js

@@ -0,0 +1,27 @@
+var _excluded = ["options", "onChange"],
+  _excluded2 = ["label", "value"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+export default function CodeSnippetDropdown(_ref) {
+  var {
+      options,
+      onChange
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("select", _extends({
+    className: "p-code-snippet__dropdown",
+    onChange: onChange
+  }, props), options.map(_ref2 => {
+    var {
+        label,
+        value
+      } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+    return /*#__PURE__*/React.createElement("option", _extends({
+      value: value,
+      key: value + "" || label
+    }, props), label);
+  }));
+}

package/dist-esm/components/CodeSnippet/index.js

@@ -0,0 +1,2 @@
+export { default } from "./CodeSnippet";
+export { CodeSnippetBlockAppearance } from "./CodeSnippetBlock";

package/dist-esm/components/Col/Col.js

@@ -0,0 +1,38 @@
+var _excluded = ["children", "className", "element", "emptyLarge", "emptyMedium", "emptySmall", "large", "medium", "size", "small"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+export var colSizes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+/**
+ * This is a [React](https://reactjs.org/) component for use within the Vanilla [Grid](https://docs.vanillaframework.io/patterns/grid/).
+ *
+ * Vanilla has a responsive grid using a combination of rows and columns.
+ */
+var Col = _ref => {
+  var {
+      children,
+      className,
+      element: Component = "div",
+      emptyLarge,
+      emptyMedium,
+      emptySmall,
+      large,
+      medium,
+      size,
+      small
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: classNames(className, "col-".concat(size), {
+      ["col-small-".concat(small)]: !!small,
+      ["col-medium-".concat(medium)]: !!medium,
+      ["col-large-".concat(large)]: !!large,
+      ["col-start-small-".concat(emptySmall)]: !!emptySmall,
+      ["col-start-medium-".concat(emptyMedium)]: !!emptyMedium,
+      ["col-start-large-".concat(emptyLarge)]: !!emptyLarge
+    })
+  }, props), children);
+};
+export default Col;

package/dist-esm/components/Col/index.js

@@ -0,0 +1 @@
+export { default, colSizes } from "./Col";

package/dist-esm/components/ConfirmationButton/ConfirmationButton.js

@@ -0,0 +1,63 @@
+var _excluded = ["confirmationModalProps", "onHoverText", "shiftClickEnabled", "showShiftClickHint"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import ActionButton from "../ActionButton";
+import ConfirmationModal from "../ConfirmationModal";
+import usePortal from "react-useportal";
+var generateTitle = title => {
+  if (typeof title === "string") {
+    return title;
+  }
+  if (typeof title === "number") {
+    return title.toString();
+  }
+  return null;
+};
+/**
+ * `ConfirmationButton` is a specialised version of the [ActionButton](?path=/docs/actionbutton--default-story) component that uses a [ConfirmationModal](?path=/docs/confirmationmodal--default-story) to prompt a confirmation from the user before executing an action.
+ */
+export var ConfirmationButton = _ref => {
+  var {
+      confirmationModalProps,
+      onHoverText,
+      shiftClickEnabled = false,
+      showShiftClickHint = false
+    } = _ref,
+    actionButtonProps = _objectWithoutProperties(_ref, _excluded);
+  var {
+    openPortal,
+    closePortal,
+    isOpen,
+    Portal
+  } = usePortal();
+  var handleCancelModal = () => {
+    closePortal();
+    if (confirmationModalProps.close) {
+      confirmationModalProps.close();
+    }
+  };
+  var handleConfirmModal = e => {
+    closePortal();
+    confirmationModalProps.onConfirm(e);
+  };
+  var handleShiftClick = e => {
+    if (e.shiftKey) {
+      confirmationModalProps.onConfirm(e);
+    } else {
+      openPortal(e);
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isOpen && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ConfirmationModal, _extends({}, confirmationModalProps, {
+    close: handleCancelModal,
+    confirmButtonLabel: confirmationModalProps.confirmButtonLabel,
+    onConfirm: handleConfirmModal
+  }), confirmationModalProps.children, showShiftClickHint && /*#__PURE__*/React.createElement("p", {
+    className: "p-text--small u-text--muted u-hide--small"
+  }, "Next time, you can skip this confirmation by holding", " ", /*#__PURE__*/React.createElement("code", null, "SHIFT"), " and clicking the action."))), /*#__PURE__*/React.createElement(ActionButton, _extends({}, actionButtonProps, {
+    onClick: shiftClickEnabled ? handleShiftClick : openPortal,
+    title: generateTitle(onHoverText !== null && onHoverText !== void 0 ? onHoverText : confirmationModalProps.confirmButtonLabel)
+  }), actionButtonProps.children));
+};
+export default ConfirmationButton;

package/dist-esm/components/ConfirmationButton/index.js

@@ -0,0 +1 @@
+export { default } from "./ConfirmationButton";

package/dist-esm/components/ConfirmationModal/ConfirmationModal.js

@@ -0,0 +1,47 @@
+var _excluded = ["cancelButtonLabel", "cancelButtonProps", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm", "confirmButtonLoading", "confirmButtonDisabled", "confirmButtonProps"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+import Button from "../Button";
+import Modal from "../Modal";
+import ActionButton from "../ActionButton";
+/**
+ * `ConfirmationModal` is a specialised version of the [Modal](?path=/docs/modal--default-story) component to prompt a confirmation from the user before executing an action.
+ */
+export var ConfirmationModal = _ref => {
+  var {
+      cancelButtonLabel = "Cancel",
+      cancelButtonProps,
+      children,
+      confirmButtonAppearance = "negative",
+      confirmButtonLabel,
+      confirmExtra,
+      onConfirm,
+      confirmButtonLoading,
+      confirmButtonDisabled,
+      confirmButtonProps
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var handleClick = action => event => {
+    if (!props.shouldPropagateClickEvent) {
+      event.stopPropagation();
+    }
+    if (action) {
+      action(event);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Modal, _extends({
+    buttonRow: /*#__PURE__*/React.createElement(React.Fragment, null, confirmExtra, /*#__PURE__*/React.createElement(Button, _extends({}, cancelButtonProps, {
+      className: "u-no-margin--bottom",
+      onClick: handleClick(props.close)
+    }), cancelButtonLabel), /*#__PURE__*/React.createElement(ActionButton, _extends({}, confirmButtonProps, {
+      appearance: confirmButtonAppearance,
+      className: "u-no-margin--bottom",
+      onClick: handleClick(onConfirm),
+      loading: confirmButtonLoading,
+      disabled: confirmButtonDisabled
+    }), confirmButtonLabel))
+  }, props), children);
+};
+export default ConfirmationModal;

package/dist-esm/components/ConfirmationModal/index.js

@@ -0,0 +1 @@
+export { default } from "./ConfirmationModal";