@canonical/react-components 1.6.0 → 1.7.0

package/dist/esm/components/Panel/Panel.js

@@ -0,0 +1,89 @@
+var _excluded = ["icon", "iconAlt", "name", "nameAlt", "component"],
+  _excluded2 = ["forwardRef", "children", "className", "contentClassName", "controlsClassName", "controls", "dark", "header", "logo", "stickyHeader", "title", "titleClassName", "titleComponent", "titleId", "toggle", "wrapContent"];
+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";
+import { isReactNode } from "../../utils";
+var generateLogo = logo => {
+  if (isReactNode(logo)) {
+    return logo;
+  }
+  var {
+      icon,
+      iconAlt,
+      name,
+      nameAlt,
+      component: Component = "a"
+    } = logo,
+    props = _objectWithoutProperties(logo, _excluded);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: "p-panel__logo"
+  }, props), /*#__PURE__*/React.createElement("img", {
+    className: "p-panel__logo-icon",
+    src: icon,
+    alt: iconAlt,
+    width: "24",
+    height: "24"
+  }), /*#__PURE__*/React.createElement("img", {
+    className: "p-panel__logo-name is-fading-when-collapsed",
+    src: name,
+    alt: nameAlt,
+    height: "16"
+  }));
+};
+
+/**
+ * This is a [React](https://reactjs.org/) component for panels in the
+ * [Vanilla](https://vanillaframework.io/docs/) layouts.
+ *
+ * The Panel component can be used in many areas of the application layout. It
+ * can be the child element of `AppAside`, `AppMain`, `AppNavigation`, `AppNavigationBar`
+ * and `AppStatus`.
+ */
+var Panel = _ref => {
+  var {
+      forwardRef,
+      children,
+      className,
+      contentClassName,
+      controlsClassName,
+      controls,
+      dark,
+      header,
+      logo,
+      stickyHeader,
+      title,
+      titleClassName,
+      titleComponent: TitleComponent = "h4",
+      titleId,
+      toggle,
+      wrapContent = true
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded2);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: classNames("p-panel", className, {
+      "is-dark": dark
+    }),
+    ref: forwardRef
+  }), logo || title || controls || toggle ? /*#__PURE__*/React.createElement("div", {
+    className: classNames("p-panel__header", {
+      "is-sticky": stickyHeader
+    })
+  }, logo ? generateLogo(logo) : /*#__PURE__*/React.createElement(TitleComponent, {
+    className: classNames("p-panel__title", titleClassName),
+    id: titleId
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: classNames("p-panel__controls", controlsClassName)
+  }, toggle ? /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    tabIndex: 0,
+    className: "p-panel__toggle",
+    onClick: () => toggle.onClick(),
+    onKeyDown: () => toggle.onClick()
+  }, toggle.label) : null, controls)) : header, children && wrapContent ? /*#__PURE__*/React.createElement("div", {
+    className: classNames("p-panel__content", contentClassName)
+  }, children) : children);
+};
+export default Panel;

package/dist/esm/components/Panel/Panel.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Panel from "./Panel";
+declare const meta: Meta<typeof Panel>;
+export default meta;
+type Story = StoryObj<typeof Panel>;
+export declare const Default: Story;
+export declare const Header: Story;
+/**
+ * The logo may be provided as attributes to use the standard logo. If this is
+ * not sufficient the a `ReactNode` can be passed to the `logo` prop instead.
+ */
+export declare const Logo: Story;
+/**
+ * If the default header does not meet your needs then a `ReactNode` can be
+ * passed to the `header` prop to replace the header.
+ */
+export declare const CustomHeader: Story;

package/dist/esm/components/Panel/Panel.stories.js

@@ -0,0 +1,53 @@
+import React from "react";
+import Panel from "./Panel";
+import Button from "../Button";
+import Icon from "../Icon";
+var meta = {
+  component: Panel,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  args: {
+    children: "Panel content",
+    title: "Panel"
+  }
+};
+export var Header = {
+  args: {
+    controls: /*#__PURE__*/React.createElement(Button, {
+      appearance: "positive"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "plus",
+      light: true
+    }), " Create"),
+    title: "Panel title",
+    titleComponent: "h1"
+  }
+};
+
+/**
+ * The logo may be provided as attributes to use the standard logo. If this is
+ * not sufficient the a `ReactNode` can be passed to the `logo` prop instead.
+ */
+export var Logo = {
+  args: {
+    logo: {
+      icon: "https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg",
+      name: "https://assets.ubuntu.com/v1/a85f7947-juju_black-text-only.svg",
+      nameAlt: "Juju"
+    }
+  }
+};
+
+/**
+ * If the default header does not meet your needs then a `ReactNode` can be
+ * passed to the `header` prop to replace the header.
+ */
+export var CustomHeader = {
+  args: {
+    header: /*#__PURE__*/React.createElement("div", {
+      className: "p-panel__header"
+    }, "This header replaces the entire header area")
+  }
+};

package/dist/esm/components/Panel/Panel.test.d.ts

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

package/dist/esm/components/Panel/index.d.ts

@@ -0,0 +1 @@
+export { default, type Props as PanelProps, type LogoDefaultElement as PanelLogoDefaultElement, } from "./Panel";

package/dist/esm/components/Panel/index.js

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

package/dist/esm/components/PasswordToggle/PasswordToggle.d.ts

@@ -0,0 +1,108 @@
+import React from "react";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import type { ClassName, PropsWithSpread } from "../../types";
+export declare enum Label {
+    Hide = "Hide",
+    Show = "Show"
+}
+/**
+ * The props for the Password Toggle component.
+ */
+export type Props = PropsWithSpread<{
+    /**
+     * The content for caution validation.
+     */
+    caution?: ReactNode;
+    /**
+     * Optional class(es) to pass to the input element.
+     */
+    className?: ClassName;
+    /**
+     * The content for error validation.
+     */
+    error?: ReactNode;
+    /**
+     * Help text to show below the field.
+     */
+    help?: ReactNode;
+    /**
+     * The id of the input.
+     */
+    id: string;
+    /**
+     * The label for the field.
+     */
+    label?: ReactNode;
+    /**
+     * Whether the field is read only.
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the field is required.
+     */
+    required?: boolean;
+    /**
+     * The content for success validation.
+     */
+    success?: ReactNode;
+    /**
+     * The content for success validation.
+     */
+    type?: "submit" | "reset" | "button";
+    /**
+     * Optional class(es) to pass to the wrapping Field component
+     */
+    wrapperClassName?: string;
+}, InputHTMLAttributes<HTMLInputElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Password Toggle](https://docs.vanillaframework.io/base/forms/#password-toggle).
+ *
+ * It can be used when an input needs to obscure its value, whilst giving the user a way to reveal it if needed.
+ */
+declare const PasswordToggle: React.ForwardRefExoticComponent<{
+    /**
+     * The content for caution validation.
+     */
+    caution?: ReactNode;
+    /**
+     * Optional class(es) to pass to the input element.
+     */
+    className?: ClassName;
+    /**
+     * The content for error validation.
+     */
+    error?: ReactNode;
+    /**
+     * Help text to show below the field.
+     */
+    help?: ReactNode;
+    /**
+     * The id of the input.
+     */
+    id: string;
+    /**
+     * The label for the field.
+     */
+    label?: ReactNode;
+    /**
+     * Whether the field is read only.
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the field is required.
+     */
+    required?: boolean;
+    /**
+     * The content for success validation.
+     */
+    success?: ReactNode;
+    /**
+     * The content for success validation.
+     */
+    type?: "submit" | "reset" | "button";
+    /**
+     * Optional class(es) to pass to the wrapping Field component
+     */
+    wrapperClassName?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "error" | "label" | "id" | "type" | "readOnly" | "required" | "help" | "success" | "caution" | "wrapperClassName"> & React.RefAttributes<HTMLInputElement>>;
+export default PasswordToggle;

package/dist/esm/components/PasswordToggle/PasswordToggle.js

@@ -0,0 +1,90 @@
+var _excluded = ["caution", "className", "error", "help", "id", "label", "readOnly", "required", "success", "type", "wrapperClassName"];
+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, useState } from "react";
+import Button from "../Button";
+import Field from "../Field";
+import VanillaLabel from "../Label";
+export var Label = /*#__PURE__*/function (Label) {
+  Label["Hide"] = "Hide";
+  Label["Show"] = "Show";
+  return Label;
+}({});
+
+/**
+ * The props for the Password Toggle component.
+ */
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Password Toggle](https://docs.vanillaframework.io/base/forms/#password-toggle).
+ *
+ * It can be used when an input needs to obscure its value, whilst giving the user a way to reveal it if needed.
+ */
+var PasswordToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  var {
+      caution,
+      className,
+      error,
+      help,
+      id,
+      label,
+      readOnly,
+      required,
+      success,
+      type,
+      wrapperClassName
+    } = _ref,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  var [isPassword, setIsPassword] = useState(true);
+  var validationId = useId();
+  var helpId = useId();
+  var hasError = !!error;
+  var defaultPasswordToggleId = useId();
+  var passwordToggleId = id || defaultPasswordToggleId;
+  var togglePassword = () => {
+    if (isPassword) {
+      setIsPassword(false);
+    } else {
+      setIsPassword(true);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Field, {
+    caution: caution,
+    className: wrapperClassName,
+    error: error,
+    help: help,
+    helpId: helpId,
+    required: required,
+    success: success,
+    validationId: validationId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-form-password-toggle"
+  }, /*#__PURE__*/React.createElement(VanillaLabel, {
+    forId: passwordToggleId,
+    required: required
+  }, label), /*#__PURE__*/React.createElement(Button, {
+    appearance: "base",
+    type: type ? type : "button",
+    className: "u-no-margin--bottom",
+    hasIcon: true,
+    "aria-controls": id,
+    "aria-live": "polite",
+    onClick: () => togglePassword()
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "p-form-password-toggle__label"
+  }, isPassword ? Label.Show : Label.Hide), /*#__PURE__*/React.createElement("i", {
+    className: isPassword ? "p-icon--show" : "p-icon--hide"
+  }))), /*#__PURE__*/React.createElement("input", _extends({
+    "aria-describedby": [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" "),
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
+    className: classNames("p-form-validation__input", className),
+    id: passwordToggleId,
+    readOnly: readOnly,
+    ref: ref,
+    type: isPassword ? "password" : "text"
+  }, inputProps)));
+});
+export default PasswordToggle;

package/dist/esm/components/PasswordToggle/PasswordToggle.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import PasswordToggle from "./PasswordToggle";
+declare const meta: Meta<typeof PasswordToggle>;
+export default meta;
+type Story = StoryObj<typeof PasswordToggle>;
+export declare const Default: Story;
+export declare const ReadOnly: Story;
+export declare const Error: Story;
+export declare const Success: Story;
+export declare const Caution: Story;
+export declare const Help: Story;
+export declare const Disabled: Story;

package/dist/esm/components/PasswordToggle/PasswordToggle.stories.js

@@ -0,0 +1,67 @@
+import React from "react";
+import PasswordToggle from "./PasswordToggle";
+var meta = {
+  component: PasswordToggle,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  render: () => /*#__PURE__*/React.createElement(PasswordToggle, {
+    id: "examplePassword1",
+    label: "Password"
+  }),
+  name: "Default"
+};
+export var ReadOnly = {
+  render: () => /*#__PURE__*/React.createElement(PasswordToggle, {
+    id: "examplePassword2",
+    label: "Password",
+    readOnly: true,
+    defaultValue: "password"
+  }),
+  name: "Read only"
+};
+export var Error = {
+  render: () => /*#__PURE__*/React.createElement(PasswordToggle, {
+    error: "This field is required.",
+    id: "examplePassword3",
+    label: "Password",
+    defaultValue: "password"
+  }),
+  name: "Error"
+};
+export var Success = {
+  render: () => /*#__PURE__*/React.createElement(PasswordToggle, {
+    success: "Strong password",
+    id: "examplePassword4",
+    label: "Password",
+    defaultValue: "password"
+  }),
+  name: "Success"
+};
+export var Caution = {
+  render: () => /*#__PURE__*/React.createElement(PasswordToggle, {
+    caution: "Weak password",
+    id: "examplePassword5",
+    label: "Password",
+    defaultValue: "password"
+  }),
+  name: "Caution"
+};
+export var Help = {
+  render: () => /*#__PURE__*/React.createElement(PasswordToggle, {
+    help: "Enter a secure password",
+    id: "examplePassword6",
+    label: "Password"
+  }),
+  name: "Help"
+};
+export var Disabled = {
+  render: () => /*#__PURE__*/React.createElement(PasswordToggle, {
+    disabled: true,
+    id: "examplePassword7",
+    label: "Password",
+    defaultValue: "password"
+  }),
+  name: "Disabled"
+};

package/dist/esm/components/PasswordToggle/PasswordToggle.test.d.ts

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

package/dist/esm/components/PasswordToggle/index.d.ts

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

package/dist/esm/components/PasswordToggle/index.js

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

package/dist/esm/components/RadioInput/RadioInput.d.ts

@@ -0,0 +1,9 @@
+import type { CheckableInputProps } from "../CheckboxInput/CheckableInput";
+export type Props = Omit<CheckableInputProps, "inputType">;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Radio input](https://docs.vanillaframework.io/base/forms#radio-button).
+ *
+ * Use radio buttons to select one of the given set of options.
+ */
+declare const RadioInput: ({ label, ...radioProps }: Props) => JSX.Element;
+export default RadioInput;

package/dist/esm/components/RadioInput/RadioInput.js

@@ -0,0 +1,22 @@
+var _excluded = ["label"];
+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 "../CheckboxInput/CheckableInput";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Radio input](https://docs.vanillaframework.io/base/forms#radio-button).
+ *
+ * Use radio buttons to select one of the given set of options.
+ */
+var RadioInput = _ref => {
+  var {
+      label
+    } = _ref,
+    radioProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(CheckableInput, _extends({
+    inputType: "radio",
+    label: label
+  }, radioProps));
+};
+export default RadioInput;

package/dist/esm/components/RadioInput/RadioInput.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import RadioInput from "./RadioInput";
+declare const meta: Meta<typeof RadioInput>;
+export default meta;
+type Story = StoryObj<typeof RadioInput>;
+export declare const Default: Story;
+export declare const Children: Story;
+export declare const Disabled: Story;
+export declare const Required: Story;
+export declare const Inline: Story;

package/dist/esm/components/RadioInput/RadioInput.stories.js

@@ -0,0 +1,76 @@
+import React from "react";
+import RadioInput from "./RadioInput";
+var meta = {
+  component: RadioInput,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: {
+        type: "text"
+      }
+    },
+    disabled: {
+      control: {
+        type: "boolean"
+      }
+    },
+    required: {
+      control: {
+        type: "boolean"
+      }
+    },
+    inline: {
+      control: {
+        type: "boolean"
+      }
+    },
+    indeterminate: {
+      control: {
+        type: "boolean"
+      }
+    }
+  },
+  args: {
+    label: "RadioInput"
+  }
+};
+export default meta;
+export var Default = {
+  render: () => /*#__PURE__*/React.createElement(RadioInput, {
+    label: "RadioInput"
+  }),
+  name: "Default"
+};
+export var Children = {
+  render: () => /*#__PURE__*/React.createElement(RadioInput, {
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, "I agree to", /*#__PURE__*/React.createElement("a", {
+      href: "http://ubuntu.com/legal"
+    }, "Terms and Conditions")),
+    name: "RadioInput"
+  }),
+  name: "Children"
+};
+export var Disabled = {
+  render: () => /*#__PURE__*/React.createElement(RadioInput, {
+    label: "Disabled",
+    name: "RadioInput",
+    disabled: true
+  }),
+  name: "Disabled"
+};
+export var Required = {
+  render: () => /*#__PURE__*/React.createElement(RadioInput, {
+    label: "Required",
+    name: "RadioInput",
+    required: true
+  }),
+  name: "Required"
+};
+export var Inline = {
+  render: () => /*#__PURE__*/React.createElement(RadioInput, {
+    label: "Inline",
+    name: "RadioInput",
+    inline: true
+  }),
+  name: "Inline"
+};

package/dist/esm/components/RadioInput/RadioInput.test.d.ts

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

package/dist/esm/components/RadioInput/index.d.ts

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

package/dist/esm/components/RadioInput/index.js

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

package/dist/esm/components/Row/Row.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLProps, ReactNode } from "react";
+import type { ClassName, PropsWithSpread } from "../../types";
+export type Props = PropsWithSpread<{
+    /**
+     * The content of the row.
+     */
+    children: ReactNode;
+    /**
+     * Optional class(es) to pass to the wrapping div element.
+     */
+    className?: ClassName;
+}, HTMLProps<HTMLDivElement>>;
+/**
+ * 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.
+ */
+declare const Row: ({ children, className, ...props }: Props) => JSX.Element;
+export default Row;

package/dist/esm/components/Row/Row.js

@@ -0,0 +1,22 @@
+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 classNames from "classnames";
+import React from "react";
+/**
+ * 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 Row = _ref => {
+  var {
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames(className, "row")
+  }, props), children);
+};
+export default Row;

package/dist/esm/components/Row/Row.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Row from "./Row";
+declare const meta: Meta<typeof Row>;
+export default meta;
+type Story = StoryObj<typeof Row>;
+/**
+ * See [Col](?path=/docs/components-col--docs) for grid details.
+ */
+export declare const Default: Story;

package/dist/esm/components/Row/Row.stories.js

@@ -0,0 +1,22 @@
+import Row from "./Row";
+var meta = {
+  component: Row,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    }
+  }
+};
+export default meta;
+/**
+ * See [Col](?path=/docs/components-col--docs) for grid details.
+ */
+export var Default = {
+  name: "Default",
+  args: {
+    children: "children..."
+  }
+};

package/dist/esm/components/Row/Row.test.d.ts

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