@canonical/react-components 1.6.0 → 1.7.0

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

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

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

@@ -0,0 +1,33 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import Card from "./";
+declare const meta: Meta<typeof Card>;
+export default meta;
+export declare const Default: {
+    args: {
+        title: string;
+        children: string;
+    };
+};
+export declare const Header: {
+    args: {
+        title: string;
+        thumbnail: string;
+        children: string;
+    };
+};
+export declare const Highlighted: {
+    args: {
+        highlighted: boolean;
+        title: string;
+        children: string;
+    };
+};
+export declare const Overlay: {
+    args: {
+        title: string;
+        overlay: boolean;
+        children: string;
+    };
+    render: (args: any) => React.JSX.Element;
+};

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

@@ -0,0 +1,48 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from "react";
+import Card from "./";
+import Col from "../Col";
+import Row from "../Row";
+var meta = {
+  component: Card,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  args: {
+    title: "We'd love to have you join us as a partner.",
+    children: "If you are an independent software vendor or bundle author, it's easy to apply. You can find out more below."
+  }
+};
+export var Header = {
+  args: {
+    title: "Raspberry Pi2 and Pi3",
+    thumbnail: "https://assets.ubuntu.com/v1/dca2e4c4-raspberry-logo.png",
+    children: "For fun, for education and for profit, the RPi makes device development personal and entertaining. With support for both the Pi2 and the new Pi3, Ubuntu Core supports the world’s most beloved board."
+  }
+};
+export var Highlighted = {
+  args: _objectSpread(_objectSpread({}, Default.args), {}, {
+    highlighted: true
+  })
+};
+export var Overlay = {
+  args: {
+    title: "Web browsing",
+    overlay: true,
+    children: "Renowned for speed and security, Ubuntu and Firefox make browsing\nthe web a pleasure again. Ubuntu also includes Chrome, Opera and\nother browsers that can be installed from the Ubuntu Software\nCentre."
+  },
+  render: args => /*#__PURE__*/React.createElement("section", {
+    className: "p-strip--image is-light",
+    style: {
+      backgroundImage: "url('https://assets.ubuntu.com/v1/0a98afcd-screenshot_desktop.jpg')"
+    }
+  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    size: 6,
+    emptyLarge: 7
+  }, /*#__PURE__*/React.createElement(Card, args))))
+};

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

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

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

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

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

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

package/dist/esm/components/CheckboxInput/CheckableInput/CheckableInput.d.ts

@@ -0,0 +1,27 @@
+import { HTMLProps } from "react";
+import type { ReactNode } from "react";
+import type { PropsWithSpread } from "../../../types";
+export type Props = PropsWithSpread<{
+    /**
+     * The type of the input element.
+     */
+    inputType: "radio" | "checkbox";
+    /**
+     * The label for the input element.
+     */
+    label: ReactNode;
+    /**
+     * Optional class(es) to pass to the label element.
+     */
+    labelClassName?: string;
+    /**
+     * Whether the input element should display in indeterminate state.
+     */
+    indeterminate?: boolean;
+    /**
+     * Ensures the input and the label text are properly aligned with other inline text.
+     */
+    inline?: boolean;
+}, Omit<HTMLProps<HTMLInputElement>, "type">>;
+declare const CheckableInput: ({ inputType, label, labelClassName, indeterminate, inline, ...checkboxProps }: Props) => JSX.Element;
+export default CheckableInput;

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

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

package/dist/esm/components/CheckboxInput/CheckableInput/CheckableInput.test.d.ts

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

package/dist/esm/components/CheckboxInput/CheckableInput/index.d.ts

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

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+import CheckboxInput from "./CheckboxInput";
+declare const meta: Meta<typeof CheckboxInput>;
+export default meta;
+type Story = StoryObj<typeof CheckboxInput>;
+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;
+export declare const Indeterminate: Story;

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

@@ -0,0 +1,77 @@
+import React from "react";
+import CheckboxInput from "./CheckboxInput";
+var meta = {
+  component: CheckboxInput,
+  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: "CheckboxInput"
+  }
+};
+export default meta;
+export var Default = {
+  name: "Default"
+};
+export var Children = {
+  render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, "I agree to", /*#__PURE__*/React.createElement("a", {
+      href: "http://ubuntu.com/legal"
+    }, "Terms and Conditions")),
+    name: "CheckboxInput"
+  }),
+  name: "Label with child elements"
+};
+export var Disabled = {
+  render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
+    label: "Disabled",
+    disabled: true
+  }),
+  name: "Disabled"
+};
+export var Required = {
+  render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
+    label: "Required",
+    required: true
+  }),
+  name: "Required"
+};
+export var Inline = {
+  render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
+    label: "Inline",
+    inline: true
+  }),
+  name: "Inline"
+};
+export var Indeterminate = {
+  render: () => /*#__PURE__*/React.createElement(CheckboxInput, {
+    label: "Indeterminate",
+    indeterminate: true
+  }),
+  name: "Indeterminate"
+};

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

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

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

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

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

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

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

@@ -0,0 +1,56 @@
+import type { MouseEvent, HTMLProps } from "react";
+import { ValueOf, PropsWithSpread } from "../../types";
+export declare enum Label {
+    Dismiss = "Dismiss"
+}
+export declare const ChipType: {
+    readonly CAUTION: "caution";
+    readonly INFORMATION: "information";
+    readonly NEGATIVE: "negative";
+    readonly POSITIVE: "positive";
+};
+export type Props = PropsWithSpread<{
+    /**
+     * The appearance of the chip.
+     */
+    appearance?: ValueOf<typeof ChipType>;
+    /**
+     * The lead for the chip.
+     */
+    lead?: string;
+    /**
+     * Function for handling chip div click event.
+     */
+    onClick?: (event: MouseEvent<HTMLButtonElement> | {
+        lead: string;
+        value: string;
+    }) => void;
+    /**
+     * Function for handling dismissing a chip.
+     */
+    onDismiss?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Whether the chip is selected.
+     */
+    selected?: boolean;
+    /**
+     * A substring to emphasise if it is part of the chip's value,
+     * e.g. "sit" => poSITive
+     */
+    subString?: string;
+    /**
+     * Whether to wrap the value in quotation marks.
+     */
+    quoteValue?: boolean;
+    /**
+     * The value of the chip.
+     */
+    value: string;
+}, HTMLProps<HTMLButtonElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Chip](https://vanillaframework.io/docs/patterns/chip).
+ *
+ * It can be used to display a small value attached to a component.
+ */
+declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, ...props }: Props) => JSX.Element;
+export default Chip;

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

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

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Chip from "./Chip";
+declare const meta: Meta<typeof Chip>;
+export default meta;
+type Story = StoryObj<typeof Chip>;
+export declare const Default: Story;
+export declare const LeadValue: Story;
+export declare const Appearance: Story;
+export declare const Dismissible: Story;

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

@@ -0,0 +1,38 @@
+import React from "react";
+import Chip from "./Chip";
+var meta = {
+  component: Chip,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    value: "Default"
+  }
+};
+export var LeadValue = {
+  render: () => /*#__PURE__*/React.createElement(Chip, {
+    lead: "Owner",
+    value: "Bob"
+  }),
+  name: "Lead-value"
+};
+export var Appearance = {
+  render: () => /*#__PURE__*/React.createElement(Chip, {
+    lead: "Type",
+    value: "Positive",
+    appearance: "positive"
+  }),
+  name: "Appearance"
+};
+export var Dismissible = {
+  render: () => /*#__PURE__*/React.createElement(Chip, {
+    lead: "Owner",
+    value: "Bob",
+    onDismiss: () => {
+      console.log("onDismiss called");
+    }
+  }),
+  name: "Dismissible"
+};

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import type { ClassName } from "../../types";
+export type Props = {
+    children: string;
+    className?: ClassName;
+    inline?: boolean;
+    copyable?: boolean;
+    numbered?: boolean;
+};
+/**
+ * @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
+ */
+declare const Code: ({ children, className, inline, copyable, numbered, ...props }: Props) => JSX.Element;
+export default Code;

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { HTMLProps } from "react";
+import type { Props as CodeSnippetBlockProps } from "./CodeSnippetBlock";
+import type { ClassName, PropsWithSpread } from "../../types";
+export type Props = PropsWithSpread<{
+    /**
+     * Optional class(es) to pass to the wrapping div element.
+     */
+    className?: ClassName;
+    /**
+     * A list of code blocks to display.
+     */
+    blocks: CodeSnippetBlockProps[];
+}, HTMLProps<HTMLDivElement>>;
+/**
+ * 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({ className, blocks, ...props }: Props): JSX.Element;