@canonical/react-components 1.2.4 → 1.3.0

package/README.md

@@ -1,14 +1,14 @@
 # React components for Vanilla Framework
 ![CI](https://github.com/canonical/react-components/workflows/CI/badge.svg?branch=main)
 
-This is a collection of components designed to be the way to consume [Vanilla Framework](http://vanillaframework.io) when using React.
+This is a collection of components designed to be the way to consume [Vanilla Framework](http://vanillaframework.io) when using React. The library exposes both a CJS and an ESM build.
 
  **[Storybook](https://canonical.github.io/react-components/)** contains component docs with usage instructions.
 
 
 ## Requirements
 
-Canonical react components currently require that your build is configured with [sass-loader](https://github.com/webpack-contrib/sass-loader) (or equivalent), to compile sass.
+Canonical react components currently require that your build is configured with [sass-loader](https://github.com/webpack-contrib/sass-loader) (or equivalent), to compile Sass.
 
 ## Install
 

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@canonical/react-components",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "main": "dist/index.js",
-  "module": "dist/index.js",
+  "module": "dist-esm/index.js",
+  "types": "dist-types/index.d.ts",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -126,10 +127,12 @@
     "vanilla-framework": "^3.15.1 || ^4.0.0"
   },
   "scripts": {
-    "build": "rm -rf dist && yarn build-local; yarn build-declaration",
-    "build-local": "NODE_ENV=production babel src --out-dir dist --copy-files --extensions '.js,.jsx,.ts,.tsx'",
-    "build-declaration": "tsc --project tsconfig.json && tsc-alias -p tsconfig.json",
-    "build-watch": "yarn run build-local --watch",
+    "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-docs": "storybook build -c .storybook -o docs",
     "clean": "rm -rf node_modules dist .out",
     "docs": "storybook dev -p ${PORT:-9009} --no-open",

package/dist/components/Accordion/Accordion.d.ts

@@ -1,46 +0,0 @@
-import { HTMLProps } from "react";
-import type { AccordionHeadings, AccordionSectionProps } from "./AccordionSection";
-import type { ClassName, PropsWithSpread } from "../../types";
-export type Section = AccordionSectionProps & {
-    /**
-     * An optional key for the section component. It will also be
-     * used to track which section is selected.
-     */
-    key?: string | number;
-};
-export type Props = PropsWithSpread<{
-    /**
-     * Optional classes applied to the parent element.
-     */
-    className?: ClassName;
-    /**
-     * An optional value to set the expanded section. The value must match a
-     * section key. This value will only set the expanded section on first render
-     * if externallyControlled is not set to `true`.
-     */
-    expanded?: string;
-    /**
-     * Whether the expanded section will be controlled via external state.
-     */
-    externallyControlled?: boolean;
-    /**
-     * Optional function that is called when the expanded section is changed.
-     * The function is provided the section title or null.
-     */
-    onExpandedChange?: (id: string, title: string) => void;
-    /**
-     * An array of sections and content.
-     */
-    sections: Section[];
-    /**
-     * Optional string describing heading element that should be used for the section titles.
-     */
-    titleElement?: AccordionHeadings;
-}, HTMLProps<HTMLElement>>;
-/**
- * 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.
- */
-declare const Accordion: ({ className, expanded, externallyControlled, onExpandedChange, sections, titleElement, ...asideProps }: Props) => JSX.Element;
-export default Accordion;

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

@@ -1,18 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Accordion from "./Accordion";
-declare const meta: Meta<typeof Accordion>;
-export default meta;
-type Story = StoryObj<typeof Accordion>;
-export declare const Default: Story;
-/**
- * The expanded accordion section can be controlled by external state.
- */
-export declare const ExternalState: Story;
-/**
- * `titleElement` prop can be used to define heading element for section titles.
- */
-export declare const Headings: Story;
-/**
- * The `title` prop can be a `ReactNode`, allowing a higher degree of customisation of the section titles.
- */
-export declare const CustomHeadings: Story;

package/dist/components/Accordion/Accordion.stories.js

@@ -1,117 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Headings = exports.ExternalState = exports.Default = exports.CustomHeadings = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Accordion = _interopRequireDefault(require("./Accordion"));
-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: _Accordion.default,
-  tags: ["autodocs"],
-  argTypes: {
-    sections: {
-      control: {
-        disable: true
-      }
-    },
-    externallyControlled: {
-      control: {
-        disable: true
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    sections: [{
-      title: "Advanced topics",
-      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Charm bundles"), /*#__PURE__*/_react.default.createElement("p", null, "Machine authentication"), /*#__PURE__*/_react.default.createElement("p", null, "Migrating models"), /*#__PURE__*/_react.default.createElement("p", null, "Using storage"), /*#__PURE__*/_react.default.createElement("p", null, "Working with actions"), /*#__PURE__*/_react.default.createElement("p", null, "Working with resources"), /*#__PURE__*/_react.default.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/_react.default.createElement("p", null, "Tools"))
-    }, {
-      title: "Networking",
-      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Working offline"), /*#__PURE__*/_react.default.createElement("p", null, "Fan container networking"), /*#__PURE__*/_react.default.createElement("p", null, "Network spaces"))
-    }, {
-      title: "Miscellaneous",
-      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Juju GUI"), /*#__PURE__*/_react.default.createElement("p", null, "CentOS support"), /*#__PURE__*/_react.default.createElement("p", null, "Collecting Juju metrics"))
-    }]
-  }
-};
-
-/**
- * The expanded accordion section can be controlled by external state.
- */
-const ExternalState = exports.ExternalState = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [expandedSection, setExpandedSection] = (0, _react.useState)();
-    return /*#__PURE__*/_react.default.createElement(_Accordion.default, {
-      expanded: expandedSection,
-      externallyControlled: true,
-      onExpandedChange: setExpandedSection,
-      sections: [{
-        title: "Advanced topics",
-        key: "advanced-topics",
-        content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Charm bundles"), /*#__PURE__*/_react.default.createElement("p", null, "Machine authentication"), /*#__PURE__*/_react.default.createElement("p", null, "Migrating models"), /*#__PURE__*/_react.default.createElement("p", null, "Using storage"), /*#__PURE__*/_react.default.createElement("p", null, "Working with actions"), /*#__PURE__*/_react.default.createElement("p", null, "Working with resources"), /*#__PURE__*/_react.default.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/_react.default.createElement("p", null, "Tools"))
-      }, {
-        title: "Networking",
-        key: "networking",
-        content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Working offline"), /*#__PURE__*/_react.default.createElement("p", null, "Fan container networking"), /*#__PURE__*/_react.default.createElement("p", null, "Network spaces"))
-      }, {
-        title: "Miscellaneous",
-        key: "miscellaneous",
-        content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Juju GUI"), /*#__PURE__*/_react.default.createElement("p", null, "CentOS support"), /*#__PURE__*/_react.default.createElement("p", null, "Collecting Juju metrics"))
-      }]
-    });
-  },
-  name: "External state"
-};
-
-/**
- * `titleElement` prop can be used to define heading element for section titles.
- */
-const Headings = exports.Headings = {
-  name: "Headings",
-  args: {
-    sections: [{
-      title: "Advanced topics",
-      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Charm bundles"), /*#__PURE__*/_react.default.createElement("p", null, "Machine authentication"), /*#__PURE__*/_react.default.createElement("p", null, "Migrating models"), /*#__PURE__*/_react.default.createElement("p", null, "Using storage"), /*#__PURE__*/_react.default.createElement("p", null, "Working with actions"), /*#__PURE__*/_react.default.createElement("p", null, "Working with resources"), /*#__PURE__*/_react.default.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/_react.default.createElement("p", null, "Tools"))
-    }, {
-      title: "Networking",
-      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Working offline"), /*#__PURE__*/_react.default.createElement("p", null, "Fan container networking"), /*#__PURE__*/_react.default.createElement("p", null, "Network spaces"))
-    }, {
-      title: "Miscellaneous",
-      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Juju GUI"), /*#__PURE__*/_react.default.createElement("p", null, "CentOS support"), /*#__PURE__*/_react.default.createElement("p", null, "Collecting Juju metrics"))
-    }],
-    titleElement: "h3"
-  }
-};
-
-/**
- * The `title` prop can be a `ReactNode`, allowing a higher degree of customisation of the section titles.
- */
-const CustomHeadings = exports.CustomHeadings = {
-  args: {
-    sections: [{
-      title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Advanced topics", " ", /*#__PURE__*/_react.default.createElement("span", {
-        className: "u-text--muted p-text--small"
-      }, "optional")),
-      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Charm bundles"), /*#__PURE__*/_react.default.createElement("p", null, "Machine authentication"), /*#__PURE__*/_react.default.createElement("p", null, "Migrating models"), /*#__PURE__*/_react.default.createElement("p", null, "Using storage"), /*#__PURE__*/_react.default.createElement("p", null, "Working with actions"), /*#__PURE__*/_react.default.createElement("p", null, "Working with resources"), /*#__PURE__*/_react.default.createElement("p", null, "Cloud image metadata"), /*#__PURE__*/_react.default.createElement("p", null, "Tools"))
-    }, {
-      title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Networking", " ", /*#__PURE__*/_react.default.createElement("span", {
-        className: "u-text--muted p-text--small"
-      }, "optional")),
-      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Working offline"), /*#__PURE__*/_react.default.createElement("p", null, "Fan container networking"), /*#__PURE__*/_react.default.createElement("p", null, "Network spaces"))
-    }, {
-      title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Miscellaneous", " ", /*#__PURE__*/_react.default.createElement("span", {
-        className: "u-text--muted p-text--small"
-      }, "optional")),
-      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Juju GUI"), /*#__PURE__*/_react.default.createElement("p", null, "CentOS support"), /*#__PURE__*/_react.default.createElement("p", null, "Collecting Juju metrics"))
-    }],
-    titleElement: "h3"
-  }
-};

package/dist/components/Accordion/AccordionSection/AccordionSection.d.ts

@@ -1,34 +0,0 @@
-import type { ReactNode } from "react";
-import type { Headings } from "../../../types";
-export type AccordionHeadings = Exclude<Headings, "h1">;
-export type Props = {
-    /**
-     * The content of the section.
-     */
-    content?: ReactNode;
-    /**
-     * An optional value to set the expanded section. The value must match a
-     * section key.
-     */
-    expanded?: string | null;
-    headingLevel?: number;
-    /**
-     * An optional click event when the title is clicked.
-     */
-    onTitleClick?: (expanded: boolean, key: string) => void;
-    /**
-     * An optional key to be used to track which section is selected.
-     */
-    sectionKey?: string;
-    setExpanded?: (key: string | null, title: ReactNode | null) => void;
-    /**
-     * The title of the section.
-     */
-    title?: ReactNode;
-    /**
-     * Optional string describing heading element that should be used for the section titles.
-     */
-    titleElement?: AccordionHeadings;
-};
-declare const AccordionSection: ({ content, expanded, onTitleClick, sectionKey, setExpanded, title, titleElement, headingLevel, }: Props) => JSX.Element;
-export default AccordionSection;

package/dist/components/Accordion/AccordionSection/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./AccordionSection";
-export type { Props as AccordionSectionProps, AccordionHeadings, } from "./AccordionSection";

package/dist/components/Accordion/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./Accordion";
-export type { Props as AccordionProps } from "./Accordion";

package/dist/components/ActionButton/ActionButton.d.ts

@@ -1,48 +0,0 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
-import type { ButtonProps } from "../Button";
-import type { ClassName, PropsWithSpread } from "../../types";
-export declare const LOADER_MIN_DURATION = 400;
-export declare const SUCCESS_DURATION = 2000;
-export declare enum Label {
-    WAITING = "Waiting for action to complete",
-    SUCCESS = "Action completed"
-}
-export type Props = PropsWithSpread<{
-    /**
-     * The appearance of the button.
-     */
-    appearance?: ButtonProps["appearance"];
-    /**
-     * The content of the button.
-     */
-    children?: ReactNode;
-    /**
-     * Optional class(es) to pass to the button element.
-     */
-    className?: ClassName;
-    /**
-     * Whether the button should be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Whether the button should display inline.
-     */
-    inline?: boolean;
-    /**
-     * Whether the button should be in the loading state.
-     */
-    loading?: boolean;
-    /**
-     * Whether the button should be in the success state.
-     */
-    success?: boolean;
-}, ButtonHTMLAttributes<HTMLButtonElement>>;
-/**
- * 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:
- */
-declare const ActionButton: ({ appearance, children, className, disabled, inline, loading, success, ...buttonProps }: Props) => JSX.Element;
-export default ActionButton;

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

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

package/dist/components/ActionButton/ActionButton.stories.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Loading = exports.Default = void 0;
-var _ActionButton = _interopRequireDefault(require("./ActionButton"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _ActionButton.default,
-  tags: ["autodocs"],
-  argTypes: {
-    children: {
-      control: {
-        type: "text"
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    appearance: "positive",
-    children: "Click me!"
-  }
-};
-const Loading = exports.Loading = {
-  name: "Loading",
-  args: {
-    appearance: "positive",
-    loading: true,
-    disabled: true,
-    children: "Click me!"
-  }
-};

package/dist/components/ActionButton/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./ActionButton";
-export type { Props as ActionButtonProps } from "./ActionButton";

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

@@ -1,33 +0,0 @@
-import React from "react";
-import type { PropsWithSpread } from "../../../types";
-import { type HTMLProps, type PropsWithChildren } from "react";
-export type Props = PropsWithSpread<{
-    /**
-     * Whether the aside panel should be collapsed. Toggling this state will animate
-     * the panel open or closed.
-     */
-    collapsed?: boolean;
-    /**
-     * The panel content.
-     */
-    children?: PropsWithChildren["children"];
-    /**
-     * A ref that will be passed to the wrapping `<aside>` element.
-     */
-    forwardRef?: React.Ref<HTMLElement> | null;
-    /**
-     * Whether the aside panel should be narrow.
-     */
-    narrow?: boolean;
-    /**
-     * Whether the aside panel should be pinned. When pinned the panel will appear
-     * beside the main content, instead of above it.
-     */
-    pinned?: boolean;
-    /**
-     * Whether the aside panel should be wide.
-     */
-    wide?: boolean;
-}, HTMLProps<HTMLElement>>;
-declare const AppAside: ({ children, className, collapsed, narrow, forwardRef, pinned, wide, ...props }: Props) => React.JSX.Element;
-export default AppAside;

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

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import AppAside from "./AppAside";
-declare const meta: Meta<typeof AppAside>;
-export default meta;
-type Story = StoryObj<typeof AppAside>;
-/**
- * In most common cases an `AppAside` should contain a `<Panel>` to display the
- * content as intended in the application layout.
- *
- * `AppAside` should be a direct child of an `<Application>` or passed to the
- * application layout `<ApplicationLayout aside={<AppAside .../>}>`.
- */
-export declare const Default: Story;

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

@@ -1,116 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Application = _interopRequireDefault(require("../Application"));
-var _AppMain = _interopRequireDefault(require("../AppMain"));
-var _Button = _interopRequireDefault(require("../../Button"));
-var _Col = _interopRequireDefault(require("../../Col"));
-var _Form = _interopRequireDefault(require("../../Form"));
-var _Icon = _interopRequireDefault(require("../../Icon"));
-var _Input = _interopRequireDefault(require("../../Input"));
-var _Panel = _interopRequireDefault(require("../../Panel"));
-var _Row = _interopRequireDefault(require("../../Row"));
-var _AppAside = _interopRequireDefault(require("./AppAside"));
-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; }
-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); } /* eslint-disable react-hooks/rules-of-hooks */
-const meta = {
-  component: _AppAside.default,
-  tags: ["autodocs"],
-  argTypes: {
-    children: {
-      control: false
-    }
-  }
-};
-var _default = exports.default = meta;
-/**
- * In most common cases an `AppAside` should contain a `<Panel>` to display the
- * content as intended in the application layout.
- *
- * `AppAside` should be a direct child of an `<Application>` or passed to the
- * application layout `<ApplicationLayout aside={<AppAside .../>}>`.
- */
-const Default = exports.Default = {
-  render: args => {
-    const [pinned, setPinned] = (0, _react.useState)(false);
-    const [width, setWidth] = (0, _react.useState)(null);
-    const [collapsed, setCollapsed] = (0, _react.useState)(false);
-    return /*#__PURE__*/_react.default.createElement(_Application.default, null, /*#__PURE__*/_react.default.createElement(_AppMain.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Scroll to the right to see the panel."), /*#__PURE__*/_react.default.createElement(_Button.default, {
-      onClick: () => setCollapsed(false)
-    }, "Open"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-      onClick: () => setWidth("narrow")
-    }, "Narrow"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-      onClick: () => setWidth(null)
-    }, "Default"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-      onClick: () => setWidth("wide")
-    }, "Wide")), /*#__PURE__*/_react.default.createElement(_AppAside.default, _extends({}, args, {
-      pinned: pinned,
-      wide: width === "wide",
-      narrow: width === "narrow",
-      collapsed: collapsed
-    }), /*#__PURE__*/_react.default.createElement(_Panel.default, {
-      controls: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
-        onClick: () => setPinned(!pinned),
-        dense: true,
-        className: "u-no-margin--bottom"
-      }, "Pin"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-        appearance: "base",
-        className: "u-no-margin--bottom",
-        hasIcon: true,
-        onClick: () => setCollapsed(!collapsed)
-      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        name: "close"
-      }, "Close"))),
-      title: "App aside"
-    }, /*#__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")))))));
-  }
-};

package/dist/components/ApplicationLayout/AppAside/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./AppAside";
-export type { Props as AppAsideProps } from "./AppAside";

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

@@ -1,14 +0,0 @@
-import React from "react";
-import type { HTMLProps, PropsWithChildren } from "react";
-export type Props = {
-    /**
-     * The main content.
-     */
-    children?: PropsWithChildren["children"];
-} & HTMLProps<HTMLDivElement>;
-/**
- * This is a [React](https://reactjs.org/) component for main content area in the Vanilla
- * [Application Layout](https://vanillaframework.io/docs/layouts/application).
- */
-declare const AppMain: ({ children, className, ...props }: Props) => React.JSX.Element;
-export default AppMain;

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

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import AppMain from "./AppMain";
-declare const meta: Meta<typeof AppMain>;
-export default meta;
-type Story = StoryObj<typeof AppMain>;
-/**
- * In most common cases an `AppMain` should contain a `<Panel>` to display the
- * content as intended in the application layout.
- *
- * `AppMain` should be a direct child of an `<Application>` or when using `ApplicationLayout`
- * it will automatically wrap the component's children.
- */
-export declare const Default: Story;
-export declare const Content: Story;

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

@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = exports.Content = void 0;
-var _Application = _interopRequireDefault(require("../Application"));
-var _Button = _interopRequireDefault(require("../../Button"));
-var _react = _interopRequireDefault(require("react"));
-var _Panel = _interopRequireDefault(require("../../Panel"));
-var _AppMain = _interopRequireDefault(require("./AppMain"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _AppMain.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-/**
- * In most common cases an `AppMain` should contain a `<Panel>` to display the
- * content as intended in the application layout.
- *
- * `AppMain` should be a direct child of an `<Application>` or when using `ApplicationLayout`
- * it will automatically wrap the component's children.
- */
-const Default = exports.Default = {
-  args: {
-    children: "AppMain"
-  }
-};
-const Content = exports.Content = {
-  render: args => {
-    return /*#__PURE__*/_react.default.createElement(_Application.default, null, /*#__PURE__*/_react.default.createElement(_AppMain.default, args, /*#__PURE__*/_react.default.createElement(_Panel.default, {
-      controls: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
-        appearance: "positive",
-        onClick: () => {},
-        className: "u-no-margin--bottom"
-      }, "Add"), /*#__PURE__*/_react.default.createElement(_Button.default, {
-        appearance: "negative",
-        onClick: () => {},
-        className: "u-no-margin--bottom"
-      }, "Delete")),
-      title: "App main"
-    }, /*#__PURE__*/_react.default.createElement("p", null, "App main content."), /*#__PURE__*/_react.default.createElement("p", null, "Scroll to the right to see the controls."))));
-  }
-};

package/dist/components/ApplicationLayout/AppMain/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./AppMain";
-export type { Props as AppMainProps } from "./AppMain";