@canonical/react-components 1.3.1 → 1.3.2

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@canonical/react-components",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "main": "dist/index.js",
-  "module": "dist-esm/index.js",
-  "types": "dist-types/index.d.ts",
+  "module": "dist/index.js",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -96,7 +95,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.5.4",
     "typescript-eslint": "8.4.0",
-    "vanilla-framework": "4.15.0",
+    "vanilla-framework": "4.16.0",
     "wait-on": "8.0.0",
     "webpack": "5.94.0"
   },
@@ -129,12 +128,10 @@
     "vanilla-framework": "^3.15.1 || ^4.0.0"
   },
   "scripts": {
-    "build": "yarn build-cjs && yarn build-declaration && yarn build-esm",
-    "build-base": "rm -rf $OUT_DIR && NODE_ENV=production BABEL_ENV=$BABEL_ENV babel src --out-dir $OUT_DIR --copy-files --no-copy-ignored --extensions '.js,.jsx,.ts,.tsx,.snap' --ignore '**/*.test.ts','**/*.test.tsx','**/*.stories.tsx','**/__snapshots__','src/setupTests.js','src/testing'",
-    "build-cjs": "OUT_DIR=dist BABEL_ENV=cjs yarn run build-base",
-    "build-esm": "OUT_DIR=dist-esm BABEL_ENV=esm yarn run build-base",
-    "build-declaration": "rm -rf dist-types && tsc --project tsconfig.build.json --outDir dist-types && tsc-alias -p tsconfig.build.json --outDir dist-types",
-    "build-watch": "yarn run build-cjs --watch",
+    "build": "rm -rf dist && yarn build-local; yarn build-declaration",
+    "build-local": "NODE_ENV=production babel src --out-dir dist --copy-files --no-copy-ignored --extensions '.js,.jsx,.ts,.tsx,.snap' --ignore '**/*.test.ts','**/*.test.tsx','**/*.stories.tsx','**/__snapshots__','src/setupTests.js','src/testing'",
+    "build-declaration": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build-watch": "yarn run build-local --watch",
     "build-docs": "storybook build -c .storybook -o docs",
     "clean": "rm -rf node_modules dist .out",
     "docs": "storybook dev -p ${PORT:-9009} --no-open",

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

@@ -1,52 +0,0 @@
-var _excluded = ["key"],
-  _excluded2 = ["className", "expanded", "externallyControlled", "onExpandedChange", "sections", "titleElement"];
-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, { useState } from "react";
-import AccordionSection from "./AccordionSection";
-var generateSections = (sections, setExpanded, expanded, titleElement) => sections.map((_ref, i) => {
-  var {
-      key
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(AccordionSection, _extends({
-    expanded: expanded,
-    key: key || i,
-    sectionKey: key === null || key === void 0 ? void 0 : key.toString(),
-    setExpanded: setExpanded,
-    titleElement: titleElement
-  }, props));
-});
-
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Accordion](https://docs.vanillaframework.io/patterns/accordion/).
- *
- * The sidebar accordion, used in listing pages or as navigation, can hold multiple navigation items or to be used as a filter for content.
- */
-var Accordion = _ref2 => {
-  var {
-      className,
-      expanded,
-      externallyControlled,
-      onExpandedChange,
-      sections,
-      titleElement
-    } = _ref2,
-    asideProps = _objectWithoutProperties(_ref2, _excluded2);
-  var [expandedSection, setExpandedSection] = useState(expanded);
-  var setExpanded = (id, title) => {
-    setExpandedSection(id);
-    onExpandedChange && onExpandedChange(id, title);
-  };
-  return /*#__PURE__*/React.createElement("aside", _extends({
-    className: classNames(className, "p-accordion")
-  }, asideProps, {
-    role: "tablist",
-    "aria-multiselectable": "true"
-  }), /*#__PURE__*/React.createElement("ul", {
-    className: "p-accordion__list"
-  }, generateSections(sections, setExpanded, externallyControlled ? expanded : expandedSection, titleElement)));
-};
-export default Accordion;

package/dist-esm/components/Accordion/AccordionSection/AccordionSection.js

@@ -1,47 +0,0 @@
-import React, { useId } from "react";
-var AccordionSection = _ref => {
-  var {
-    content,
-    expanded,
-    onTitleClick,
-    sectionKey,
-    setExpanded,
-    title,
-    titleElement,
-    headingLevel = 3
-  } = _ref;
-  var sectionId = useId();
-  var tabId = useId();
-  var key = sectionKey || sectionId;
-  var isExpanded = expanded === key;
-  var Title = titleElement || "div";
-  return /*#__PURE__*/React.createElement("li", {
-    className: "p-accordion__group"
-  }, /*#__PURE__*/React.createElement(Title, {
-    role: titleElement ? null : "heading",
-    "aria-level": titleElement ? null : headingLevel,
-    className: "p-accordion__heading"
-  }, /*#__PURE__*/React.createElement("button", {
-    "aria-controls": "#".concat(sectionId),
-    "aria-expanded": isExpanded ? "true" : "false",
-    className: "p-accordion__tab",
-    id: tabId,
-    onClick: () => {
-      if (isExpanded) {
-        setExpanded(null, null);
-      } else {
-        setExpanded(key, title);
-      }
-      onTitleClick && onTitleClick(!isExpanded, key);
-    },
-    role: "tab",
-    type: "button"
-  }, title)), /*#__PURE__*/React.createElement("section", {
-    "aria-hidden": isExpanded ? "false" : "true",
-    "aria-labelledby": tabId,
-    className: "p-accordion__panel",
-    id: sectionId,
-    role: "tabpanel"
-  }, content));
-};
-export default AccordionSection;

package/dist-esm/components/Accordion/AccordionSection/index.js

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

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

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

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

@@ -1,106 +0,0 @@
-var _excluded = ["appearance", "children", "className", "disabled", "inline", "loading", "success"];
-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, useState } from "react";
-import Icon from "../Icon";
-export var LOADER_MIN_DURATION = 400; // minimium duration (ms) loader displays
-export var SUCCESS_DURATION = 2000; // duration (ms) success tick is displayed
-
-export var Label = /*#__PURE__*/function (Label) {
-  Label["WAITING"] = "Waiting for action to complete";
-  Label["SUCCESS"] = "Action completed";
-  return Label;
-}({});
-/**
- * This is a not an existing Vanilla component. It can be used to display submitting states for forms or other actions.
- *
- * ActionButton accepts the props from
- * [Button](?path=/docs/components-button--docs) in addition to those in the
- * props table:
- */
-var ActionButton = _ref => {
-  var {
-      appearance,
-      children,
-      className,
-      disabled = false,
-      inline = false,
-      loading = false,
-      success = false
-    } = _ref,
-    buttonProps = _objectWithoutProperties(_ref, _excluded);
-  var [height, setHeight] = useState();
-  var [width, setWidth] = useState();
-  var [showLoader, setShowLoader] = useState(false);
-  var [showSuccess, setShowSuccess] = useState(false);
-  var ref = useRef(null);
-
-  // Set up loader timer
-  useEffect(() => {
-    var loaderTimeout;
-    if (loading) {
-      // Explicitly set button dimensions
-      if (ref.current && !!ref.current.getBoundingClientRect()) {
-        setHeight(ref.current.getBoundingClientRect().height);
-        setWidth(ref.current.getBoundingClientRect().width);
-      }
-      setShowLoader(true);
-    }
-    if (!loading && showLoader) {
-      loaderTimeout = window.setTimeout(() => {
-        setShowLoader(false);
-        if (success) {
-          setShowSuccess(true);
-        }
-      }, LOADER_MIN_DURATION);
-    }
-    if (!loading && !showLoader) {
-      setHeight(null);
-      setWidth(null);
-    }
-    return () => window.clearTimeout(loaderTimeout);
-  }, [loading, showLoader, success]);
-
-  // Set up success timer
-  useEffect(() => {
-    var successTimeout;
-    if (showSuccess) {
-      successTimeout = window.setTimeout(() => {
-        setHeight(null);
-        setWidth(null);
-        setShowSuccess(false);
-      }, SUCCESS_DURATION);
-    }
-    return () => window.clearTimeout(successTimeout);
-  }, [showSuccess]);
-  var buttonClasses = classNames(className, "p-action-button", appearance ? "p-button--".concat(appearance) : "p-button", {
-    "is-processing": showLoader || showSuccess,
-    "is-disabled": disabled,
-    "is-inline": inline
-  });
-  var showIcon = showLoader || showSuccess;
-  var icon = showLoader && "spinner" || showSuccess && "success" || null;
-  var iconLight = appearance === "positive" || appearance === "negative";
-
-  // This component uses the base button element instead of the Button component
-  // as the button requires a ref and Button would have to be updated to use
-  // forwardRef which is not currently supported by components that use
-  // typescript generics.
-  return /*#__PURE__*/React.createElement("button", _extends({
-    className: buttonClasses,
-    disabled: disabled,
-    ref: ref,
-    style: height && width ? {
-      height: "".concat(height, "px"),
-      width: "".concat(width, "px")
-    } : undefined
-  }, buttonProps), showIcon ? /*#__PURE__*/React.createElement(Icon, {
-    "aria-label": showLoader ? Label.WAITING : Label.SUCCESS,
-    className: showLoader ? "u-animation--spin" : null,
-    light: iconLight,
-    name: icon
-  }) : children);
-};
-export default ActionButton;

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

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

package/dist-esm/components/ApplicationLayout/AppAside/AppAside.js

@@ -1,29 +0,0 @@
-var _excluded = ["children", "className", "collapsed", "narrow", "forwardRef", "pinned", "wide"];
-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 classNames from "classnames";
-var AppAside = _ref => {
-  var {
-      children,
-      className,
-      collapsed,
-      narrow,
-      forwardRef,
-      pinned,
-      wide
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("aside", _extends({
-    className: classNames("l-aside", className, {
-      "is-collapsed": collapsed,
-      "is-narrow": narrow,
-      "is-pinned": pinned,
-      "is-wide": wide
-    })
-  }, props, {
-    ref: forwardRef
-  }), children);
-};
-export default AppAside;

package/dist-esm/components/ApplicationLayout/AppAside/index.js

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

package/dist-esm/components/ApplicationLayout/AppMain/AppMain.js

@@ -1,21 +0,0 @@
-var _excluded = ["children", "className"];
-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 classNames from "classnames";
-/**
- * This is a [React](https://reactjs.org/) component for main content area in the Vanilla
- * [Application Layout](https://vanillaframework.io/docs/layouts/application).
- */
-var AppMain = _ref => {
-  var {
-      children,
-      className
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("main", _extends({
-    className: classNames("l-main", className)
-  }, props), children);
-};
-export default AppMain;

package/dist-esm/components/ApplicationLayout/AppMain/index.js

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

package/dist-esm/components/ApplicationLayout/AppNavigation/AppNavigation.js

@@ -1,31 +0,0 @@
-var _excluded = ["children", "className", "collapsed", "pinned"];
-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 classNames from "classnames";
-/**
- * This is a [React](https://reactjs.org/) component for the navigation panel in the Vanilla
- * [Application Layout](https://vanillaframework.io/docs/layouts/application).
- *
- * This component is used to display the left navigation panel. It should be
- * used alongside [`AppNavigationBar`](/docs/components-applicationlayout-appnavigationbar--docs).
- */
-var AppNavigation = _ref => {
-  var {
-      children,
-      className,
-      collapsed,
-      pinned
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("header", _extends({
-    className: classNames("l-navigation", className, {
-      "is-collapsed": collapsed,
-      "is-pinned": pinned
-    })
-  }, props), /*#__PURE__*/React.createElement("div", {
-    className: "l-navigation__drawer"
-  }, children));
-};
-export default AppNavigation;

package/dist-esm/components/ApplicationLayout/AppNavigation/index.js

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

package/dist-esm/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.js

@@ -1,24 +0,0 @@
-var _excluded = ["children", "className"];
-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 classNames from "classnames";
-/**
- * This is a [React](https://reactjs.org/) component for navigation bar in the Vanilla
- * [Application Layout](https://vanillaframework.io/docs/layouts/application).
- *
- * This component is used to display the navigation panel on mobile or small
- * screens. It should be used alongside [`AppNavigation`](/docs/components-applicationlayout-appnavigation--docs).
- */
-var AppNavigationBar = _ref => {
-  var {
-      children,
-      className
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("header", _extends({
-    className: classNames("l-navigation-bar", className)
-  }, props), children);
-};
-export default AppNavigationBar;

package/dist-esm/components/ApplicationLayout/AppNavigationBar/index.js

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

package/dist-esm/components/ApplicationLayout/AppStatus/AppStatus.js

@@ -1,21 +0,0 @@
-var _excluded = ["children", "className"];
-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 classNames from "classnames";
-/**
- * This is a [React](https://reactjs.org/) component for status area in the Vanilla
- * [Application Layout](https://vanillaframework.io/docs/layouts/application).
- */
-var AppStatus = _ref => {
-  var {
-      children,
-      className
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("aside", _extends({
-    className: classNames("l-status", className)
-  }, props), children);
-};
-export default AppStatus;

package/dist-esm/components/ApplicationLayout/AppStatus/index.js

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

package/dist-esm/components/ApplicationLayout/Application/Application.js

@@ -1,22 +0,0 @@
-var _excluded = ["children", "className"];
-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 classNames from "classnames";
-/**
- * This is a [React](https://reactjs.org/) component for the application wrapper in the Vanilla
- * [Application Layout](https://vanillaframework.io/docs/layouts/application).
- */
-var Application = _ref => {
-  var {
-      children,
-      className
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames("l-application", className),
-    role: "presentation"
-  }, props), children);
-};
-export default Application;

package/dist-esm/components/ApplicationLayout/Application/index.js

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

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

@@ -1,113 +0,0 @@
-var _excluded = ["aside", "children", "dark", "logo", "mainClassName", "menuCollapsed", "menuPinned", "navigationBarClassName", "navigationClassName", "navItems", "navLinkComponent", "onCollapseMenu", "onPinMenu", "sideNavigation", "status", "statusClassName"];
-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 classNames from "classnames";
-import { useState } from "react";
-import Panel from "../Panel";
-import SideNavigation from "../SideNavigation";
-import AppMain from "./AppMain";
-import AppNavigation from "./AppNavigation";
-import AppNavigationBar from "./AppNavigationBar";
-import AppStatus from "./AppStatus";
-import Application from "./Application";
-import Button from "../Button";
-import Icon from "../Icon";
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla
- * [Application Layout](https://vanillaframework.io/docs/layouts/application).
- *
- * This component combines the various sub-components that make up the
- * Application Layout to make it easier to consume. For some applications this
- * component maybe not be flexible enough, in which case you may choose to use
- * the sub-components directly. Be aware that the application layout requires a
- * specific structure and states to function correctly so there will be a
- * trade-off when using the sub-components directly.
- */
-var ApplicationLayout = _ref => {
-  var {
-      aside,
-      children,
-      dark = true,
-      logo,
-      mainClassName,
-      menuCollapsed,
-      menuPinned,
-      navigationBarClassName,
-      navigationClassName,
-      navItems,
-      navLinkComponent,
-      onCollapseMenu,
-      onPinMenu,
-      sideNavigation,
-      status,
-      statusClassName
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var [internalMenuPinned, setInternalMenuPinned] = useState(false);
-  var [internalMenuCollapsed, setInternalMenuCollapsed] = useState(true);
-  var menuIsPinned = menuPinned !== null && menuPinned !== void 0 ? menuPinned : internalMenuPinned;
-  var setMenuPinned = onPinMenu !== null && onPinMenu !== void 0 ? onPinMenu : setInternalMenuPinned;
-  var menuIsCollapsed = menuCollapsed !== null && menuCollapsed !== void 0 ? menuCollapsed : internalMenuCollapsed;
-  var setMenuCollapsed = onCollapseMenu !== null && onCollapseMenu !== void 0 ? onCollapseMenu : setInternalMenuCollapsed;
-  return /*#__PURE__*/React.createElement(Application, props, (navItems || sideNavigation) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AppNavigationBar, {
-    className: navigationBarClassName
-  }, /*#__PURE__*/React.createElement(Panel, {
-    dark: dark,
-    logo: logo,
-    toggle: {
-      label: "Menu",
-      onClick: () => setMenuCollapsed(!menuIsCollapsed)
-    }
-  })), /*#__PURE__*/React.createElement(AppNavigation, {
-    className: navigationClassName,
-    collapsed: menuIsCollapsed,
-    pinned: menuIsPinned
-  }, /*#__PURE__*/React.createElement(Panel, {
-    dark: dark,
-    controls: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-      hasIcon: true,
-      appearance: "base",
-      className: classNames("u-no-margin u-hide--medium", {
-        "is-dark": dark
-      }),
-      onClick: evt => {
-        setMenuCollapsed(true);
-        // The menu stays open while its content has focus, so the
-        // close button must blur to actually close the menu.
-        evt.currentTarget.blur();
-      }
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "close",
-      className: classNames({
-        "is-light": dark
-      })
-    }, "Close menu")), /*#__PURE__*/React.createElement(Button, {
-      hasIcon: true,
-      appearance: "base",
-      className: classNames("u-no-margin u-hide--small", {
-        "is-dark": dark
-      }),
-      onClick: () => {
-        setMenuPinned(!menuIsPinned);
-      }
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: menuIsPinned ? "close" : "pin",
-      className: classNames({
-        "is-light": dark
-      })
-    }, menuIsPinned ? "Unpin menu" : "Pin menu"))),
-    controlsClassName: "u-hide--large",
-    stickyHeader: true,
-    logo: logo
-  }, navItems ? /*#__PURE__*/React.createElement(SideNavigation, {
-    dark: dark,
-    items: navItems,
-    linkComponent: navLinkComponent
-  }) : sideNavigation))), /*#__PURE__*/React.createElement(AppMain, {
-    className: mainClassName
-  }, children), aside, status && /*#__PURE__*/React.createElement(AppStatus, {
-    className: statusClassName
-  }, status));
-};
-export default ApplicationLayout;

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

@@ -1,7 +0,0 @@
-export { default } from "./ApplicationLayout";
-export { default as AppAside } from "./AppAside";
-export { default as Application } from "./Application";
-export { default as AppMain } from "./AppMain";
-export { default as AppNavigation } from "./AppNavigation";
-export { default as AppNavigationBar } from "./AppNavigationBar";
-export { default as AppStatus } from "./AppStatus";

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

@@ -1,39 +0,0 @@
-var _excluded = ["className", "nextURL", "nextLabel", "previousURL", "previousLabel"];
-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";
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Article pagination](https://docs.vanillaframework.io/patterns/article-pagination/).
- *
- * The article pagination component should be used to navigate from one article to the next, or previous, in chronological order.
- */
-var ArticlePagination = _ref => {
-  var {
-      className,
-      nextURL,
-      nextLabel,
-      previousURL,
-      previousLabel
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("footer", _extends({
-    className: classNames(className, "p-article-pagination")
-  }, props), previousURL && previousLabel && /*#__PURE__*/React.createElement("a", {
-    className: "p-article-pagination__link--previous",
-    href: previousURL
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "p-article-pagination__label"
-  }, "Previous"), /*#__PURE__*/React.createElement("span", {
-    className: "p-article-pagination__title"
-  }, previousLabel)), nextURL && nextLabel && /*#__PURE__*/React.createElement("a", {
-    className: "p-article-pagination__link--next",
-    href: nextURL
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "p-article-pagination__label"
-  }, "Next"), /*#__PURE__*/React.createElement("span", {
-    className: "p-article-pagination__title"
-  }, nextLabel)));
-};
-export default ArticlePagination;

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

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