@canonical/react-components 1.6.0 → 1.7.0

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/CodeSnippet.stories.d.ts

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from "@storybook/react";
+import CodeSnippet from "./CodeSnippet";
+declare const meta: Meta<typeof CodeSnippet>;
+export default meta;
+type Story = StoryObj<typeof CodeSnippet>;
+export declare const Default: Story;
+/**
+ * Use the `title` prop to add a title to a code block.
+ */
+export declare const Title: Story;
+/**
+ * Pass an array of `blocks` to render multiple code blocks (for example input and output) within a single code snippet.
+ */
+export declare const MultipleBlocks: Story;
+/**
+ * Use `appearance` to control the visual aspects of the code block. `"numbered"` appearance will add line numbers in the code blocks.
+ * Values of `"linuxPrompt"`, `"windowsPrompt"`, `"url"` will add a relevant icon in the code block.
+ */
+export declare const Appearance: Story;
+/**
+ * Set `wrapLines` prop to `true` to enable line wrapping inside the code block.
+ */
+export declare const WrapLines: Story;
+/**
+ * Dropdown select menus can be added to the headers of code blocks to allow users to choose one of the options. The dropdowns options are passed via `dropdowns` property in the block options object.
+ *
+ * With the `options` being an array of option properties compatible with the `Select` options (`[{ label: string, value: string | number }]`).
+ */
+export declare const Dropdown: Story;
+/**
+ * Multiple dropdowns can be passed in if needed.
+ */
+export declare const Dropdowns: Story;
+/**
+ * If multiple dropdowns may overlap with long title you can use `stacked` variant, by setting the relevant property on code block options.
+ */
+export declare const DropdownsStacked: Story;
+/**
+ * Custom elements can be passed to a CodeBlock via the `content` prop. In these cases, a border will be added around the entire code snippet to visually associate the content with the code block.
+ */
+export declare const Content: Story;
+/**
+ * It's possible to pass JSX instead of strings to the `code` parameter, either as a single element or an array (e.g. if you want to display line numbers).
+ */
+export declare const JsxCodeElements: Story;

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

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

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

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

package/dist/esm/components/CodeSnippet/CodeSnippetBlock.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import type { Props as CodeSnippetDropdownProps } from "./CodeSnippetDropdown";
+import type { ValueOf } from "../../types";
+export declare const CodeSnippetBlockAppearance: {
+    readonly LINUX_PROMPT: "linuxPrompt";
+    readonly NUMBERED: "numbered";
+    readonly URL: "url";
+    readonly WINDOWS_PROMPT: "windowsPrompt";
+};
+export type Props = {
+    /**
+     * The appearance of the code block.
+     */
+    appearance?: ValueOf<typeof CodeSnippetBlockAppearance>;
+    /**
+     * The code snippet to display.
+     */
+    code: ReactNode;
+    /**
+     * Content to show below the code snippet.
+     */
+    content?: ReactNode;
+    /**
+     * A list of dropdowns to display in the header.
+     */
+    dropdowns?: CodeSnippetDropdownProps[];
+    /**
+     * Whether the title should display stacked on top of the dropdowns.
+     */
+    stacked?: boolean;
+    /**
+     * The title of the code block.
+     */
+    title?: string;
+    /**
+     * Whether to enable line wrapping inside the code block.
+     */
+    wrapLines?: boolean;
+};
+export default function CodeSnippetBlock({ appearance, code, content, dropdowns, stacked, title, wrapLines, }: Props): JSX.Element;

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.d.ts

@@ -0,0 +1,18 @@
+import type { ChangeEventHandler, HTMLProps } from "react";
+export type DropdownOptionProps = {
+    /**
+     * The label of the dropdown option.
+     */
+    label: string;
+} & HTMLProps<HTMLOptionElement>;
+export type Props = {
+    /**
+     * Function for handling the select value changing.
+     */
+    onChange: ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Options to pass to the select.
+     */
+    options: DropdownOptionProps[];
+} & HTMLProps<HTMLSelectElement>;
+export default function CodeSnippetDropdown({ options, onChange, ...props }: Props): JSX.Element;

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.d.ts

@@ -0,0 +1,5 @@
+export { default } from "./CodeSnippet";
+export type { Props as CodeSnippetProps } from "./CodeSnippet";
+export { CodeSnippetBlockAppearance } from "./CodeSnippetBlock";
+export type { Props as CodeSnippetBlockProps } from "./CodeSnippetBlock";
+export type { Props as CodeSnippetDropdownProps } from "./CodeSnippetDropdown";

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.d.ts

@@ -0,0 +1,53 @@
+import type { ElementType, HTMLProps, ReactNode } from "react";
+import type { ClassName, PropsWithSpread } from "../../types";
+export type ColSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export declare const colSizes: ColSize[];
+export type Props = PropsWithSpread<{
+    /**
+     * The content of the column.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class(es) to pass to the wrapping element.
+     */
+    className?: ClassName;
+    /**
+     * Optional element type to give the wrapper if not "div".
+     */
+    element?: ElementType;
+    /**
+     * The number of columns to skip before starting on large screens.
+     */
+    emptyLarge?: ColSize;
+    /**
+     * The number of columns to skip before starting on medium screens.
+     */
+    emptyMedium?: ColSize;
+    /**
+     * The number of columns to skip before starting on small screens.
+     */
+    emptySmall?: ColSize;
+    /**
+     * Override for the number of columns the content occupies on large screens.
+     */
+    large?: ColSize;
+    /**
+     * Override for the number of columns the content occupies on medium screens.
+     */
+    medium?: ColSize;
+    /**
+     * The number of columns the content occupies.
+     */
+    size: ColSize;
+    /**
+     * Override for the number of columns the content occupies on small screens.
+     */
+    small?: ColSize;
+}, HTMLProps<HTMLElement>>;
+/**
+ * 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 Col: ({ children, className, element: Component, emptyLarge, emptyMedium, emptySmall, large, medium, size, small, ...props }: Props) => JSX.Element;
+export default Col;

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/Col.stories.d.ts

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