@canonical/react-components 3.9.0 → 3.10.0

package/dist/components/Strip/Strip.js

@@ -8,8 +8,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 var _Col = _interopRequireDefault(require("../Col"));
 var _Row = _interopRequireDefault(require("../Row"));
+const _excluded = ["background", "bordered", "children", "className", "colSize", "dark", "deep", "includeCol", "element", "light", "rowClassName", "shallow", "type"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Strip](https://docs.vanillaframework.io/patterns/strip/).
  *
@@ -17,21 +20,21 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  */
 const Strip = _ref => {
   let {
-    background,
-    bordered = false,
-    children,
-    className,
-    colSize = 12,
-    dark = false,
-    deep = false,
-    includeCol = true,
-    element: Component = "div",
-    light = false,
-    rowClassName,
-    shallow = false,
-    type,
-    ...props
-  } = _ref;
+      background,
+      bordered = false,
+      children,
+      className,
+      colSize = 12,
+      dark = false,
+      deep = false,
+      includeCol = true,
+      element: Component = "div",
+      light = false,
+      rowClassName,
+      shallow = false,
+      type
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(Component, _extends({
     className: (0, _classnames.default)(className, {
       ["p-strip--".concat(type)]: !!type,

package/dist/components/Strip/Strip.stories.js

@@ -82,7 +82,12 @@ const ImageStrip = exports.ImageStrip = {
     src: "https://assets.ubuntu.com/v1/9c74eb2d-logo-canonical-white.svg",
     alt: "Placeholder"
   }))))),
-  name: "Image strip"
+  name: "Image strip",
+  parameters: {
+    percy: {
+      waitForTimeout: 1000 // Wait for 1 second before taking a snapshot to allow the image to load
+    }
+  }
 };
 const BorderedStrip = exports.BorderedStrip = {
   render: () => /*#__PURE__*/_react.default.createElement(_Strip.default, {

package/dist/components/Switch/Switch.js

@@ -7,21 +7,24 @@ exports.default = exports.Switch = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./Switch.scss");
+const _excluded = ["label", "disabled", "help", "helpClassName"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
  */
 const Switch = _ref => {
   let {
-    label,
-    disabled = false,
-    help,
-    helpClassName,
-    ...inputProps
-  } = _ref;
+      label,
+      disabled = false,
+      help,
+      helpClassName
+    } = _ref,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
   const helpId = (0, _react.useId)();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("label", {
     className: "p-switch"

package/dist/components/Table/Table.js

@@ -6,16 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
+const _excluded = ["children", "className", "expanding", "responsive"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const Table = _ref => {
   let {
-    children,
-    className,
-    expanding = false,
-    responsive = false,
-    ...props
-  } = _ref;
+      children,
+      className,
+      expanding = false,
+      responsive = false
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("table", _extends({
     role: "grid",
     className: (0, _classnames.default)(className, {

package/dist/components/TableCell/TableCell.js

@@ -6,18 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
+const _excluded = ["children", "className", "hasOverflow", "expanding", "hidden", "role"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const TableCell = _ref => {
   let {
-    children,
-    className,
-    hasOverflow = false,
-    expanding = false,
-    hidden = false,
-    role = "gridcell",
-    ...props
-  } = _ref;
+      children,
+      className,
+      hasOverflow = false,
+      expanding = false,
+      hidden = false,
+      role = "gridcell"
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("td", _extends({
     role: role,
     "aria-hidden": hidden,

package/dist/components/TableHeader/TableHeader.js

@@ -5,14 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+const _excluded = ["children", "sort"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const TableHeader = _ref => {
   let {
-    children,
-    sort,
-    ...props
-  } = _ref;
+      children,
+      sort
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("th", _extends({
     role: "columnheader",
     "aria-sort": sort

package/dist/components/TablePagination/TablePagination.js

@@ -9,10 +9,13 @@ require("./TablePagination.scss");
 var _TablePaginationControls = _interopRequireDefault(require("./TablePaginationControls"));
 var _utils = require("./utils");
 var _hooks = require("../../hooks");
+const _excluded = ["data", "dataForwardProp", "itemName", "className", "description", "pageLimits", "position", "externallyControlled", "children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
 This is an HOC [React](https://reactjs.org/) component for applying pagination to direct children components. This component is un-opinionated about
 the structure of the input data and can be used with any child component that displays a list of data. However, the styling and behaviour of this component were designed
@@ -36,17 +39,17 @@ to `false`.
  */
 const TablePagination = props => {
   const {
-    data,
-    dataForwardProp = "rows",
-    itemName = "item",
-    className,
-    description,
-    pageLimits = _utils.DEFAULT_PAGE_LIMITS,
-    position = "above",
-    externallyControlled,
-    children,
-    ...divProps
-  } = props;
+      data,
+      dataForwardProp = "rows",
+      itemName = "item",
+      className,
+      description,
+      pageLimits = _utils.DEFAULT_PAGE_LIMITS,
+      position = "above",
+      externallyControlled,
+      children
+    } = props,
+    divProps = _objectWithoutProperties(props, _excluded);
 
   // Safety check to ensure pageSize is a valid option in
   // pageLimits if the component is externally controlled

package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.js

@@ -12,8 +12,11 @@ var _Select = _interopRequireDefault(require("../../Select"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../utils");
+const _excluded = ["className", "currentPage", "description", "displayDescription", "onInputPageChange", "itemName", "nextButtonProps", "onNextPage", "onPageChange", "onPageSizeChange", "onPreviousPage", "pageLimits", "pageSize", "previousButtonProps", "showPageInput", "totalItems", "visibleCount"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 let Label = exports.Label = /*#__PURE__*/function (Label) {
   Label["NEXT_PAGE"] = "Next page";
   Label["PREVIOUS_PAGE"] = "Previous page";
@@ -22,25 +25,25 @@ let Label = exports.Label = /*#__PURE__*/function (Label) {
 }({});
 const TablePaginationControls = _ref => {
   let {
-    className,
-    currentPage,
-    description,
-    displayDescription = true,
-    onInputPageChange,
-    itemName = "row",
-    nextButtonProps,
-    onNextPage,
-    onPageChange,
-    onPageSizeChange,
-    onPreviousPage,
-    pageLimits,
-    pageSize,
-    previousButtonProps,
-    showPageInput = true,
-    totalItems,
-    visibleCount,
-    ...divProps
-  } = _ref;
+      className,
+      currentPage,
+      description,
+      displayDescription = true,
+      onInputPageChange,
+      itemName = "row",
+      nextButtonProps,
+      onNextPage,
+      onPageChange,
+      onPageSizeChange,
+      onPreviousPage,
+      pageLimits,
+      pageSize,
+      previousButtonProps,
+      showPageInput = true,
+      totalItems,
+      visibleCount
+    } = _ref,
+    divProps = _objectWithoutProperties(_ref, _excluded);
   const isSmallScreen = (0, _utils.useFigureSmallScreen)();
   const totalPages = totalItems ? Math.ceil(totalItems / pageSize) : null;
   const descriptionDisplay = (0, _utils.getDescription)({

package/dist/components/TableRow/TableRow.js

@@ -5,13 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+const _excluded = ["children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const TableRow = _ref => {
   let {
-    children,
-    ...trProps
-  } = _ref;
+      children
+    } = _ref,
+    trProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("tr", _extends({
     role: "row"
   }, trProps), children);

package/dist/components/Tabs/Tabs.js

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
+const _excluded = ["active", "className", "component", "label", "listItemClassName"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * This is the [React](https://reactjs.org/) component for Vanilla [Tabs](https://vanillaframework.io/docs/patterns/tabs).
 Tabs organise and allow navigation between groups of content that are related and at the same level
@@ -25,13 +28,13 @@ const Tabs = _ref => {
     className: (0, _classnames.default)("p-tabs__list", listClassName)
   }, links.map((link, i) => {
     const {
-      active,
-      className,
-      component,
-      label,
-      listItemClassName,
-      ...rest
-    } = link;
+        active,
+        className,
+        component,
+        label,
+        listItemClassName
+      } = link,
+      rest = _objectWithoutProperties(link, _excluded);
     const Component = component || "a";
     return /*#__PURE__*/_react.default.createElement("li", {
       className: (0, _classnames.default)("p-tabs__item", listItemClassName),

package/dist/components/Textarea/Textarea.js

@@ -7,10 +7,18 @@ exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _Field = _interopRequireDefault(require("../Field"));
+const _excluded = ["caution", "className", "error", "grow", "help", "id", "label", "labelClassName", "onKeyUp", "onControlEnter", "required", "stacked", "style", "success", "takeFocus", "wrapperClassName"];
 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 && Object.prototype.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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * The props for the Textarea component.
  */
@@ -23,24 +31,24 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const Textarea = _ref => {
   var _props$value;
   let {
-    caution,
-    className,
-    error,
-    grow = false,
-    help,
-    id,
-    label,
-    labelClassName,
-    onKeyUp,
-    onControlEnter,
-    required,
-    stacked,
-    style,
-    success,
-    takeFocus = false,
-    wrapperClassName,
-    ...props
-  } = _ref;
+      caution,
+      className,
+      error,
+      grow = false,
+      help,
+      id,
+      label,
+      labelClassName,
+      onKeyUp,
+      onControlEnter,
+      required,
+      stacked,
+      style,
+      success,
+      takeFocus = false,
+      wrapperClassName
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const textareaRef = (0, _react.useRef)(null);
   const validationId = (0, _react.useId)();
   const helpId = (0, _react.useId)();
@@ -102,13 +110,12 @@ const Textarea = _ref => {
       }
     },
     ref: textareaRef,
-    style: grow && {
+    style: grow && _objectSpread({
       minHeight: "5rem",
       resize: "none",
       overflow: "hidden",
-      boxSizing: "border-box",
-      ...style
-    } || style,
+      boxSizing: "border-box"
+    }, style) || style,
     required: required
   }, props, {
     value: (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : innerValue

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

@@ -30,4 +30,9 @@ export declare const Overlay: {
         children: string;
     };
     render: (args: CardProps) => React.JSX.Element;
+    parameters: {
+        percy: {
+            waitForTimeout: number;
+        };
+    };
 };

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

@@ -44,5 +44,10 @@ export var Overlay = {
   }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
     size: 6,
     emptyLarge: 7
-  }, /*#__PURE__*/React.createElement(Card, args))))
+  }, /*#__PURE__*/React.createElement(Card, args)))),
+  parameters: {
+    percy: {
+      waitForTimeout: 1000 // Wait for 1 second before taking a snapshot to allow the image to load
+    }
+  }
 };

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

@@ -0,0 +1,13 @@
+import { type ReactElement } from "react";
+import { type InputProps } from "../Input";
+import "./PrefixedInput.scss";
+import { PropsWithSpread } from "../../types";
+export type PrefixedInputProps = PropsWithSpread<{
+    /**
+     * The immutable text that appears at the beginning of the input field.
+     * This text is not editable by the user and visually appears inside the input.
+     */
+    immutableText: string;
+}, Omit<InputProps, "type">>;
+declare const PrefixedInput: ({ immutableText, ...props }: PrefixedInputProps) => ReactElement;
+export default PrefixedInput;

package/dist/esm/components/PrefixedInput/PrefixedInput.js

@@ -0,0 +1,57 @@
+var _excluded = ["immutableText"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from "react";
+import { useLayoutEffect, useRef, useCallback } from "react";
+import Input from "../Input";
+import classNames from "classnames";
+import "./PrefixedInput.scss";
+import { useListener } from "../../hooks/useListener";
+
+// export type PrefixedInputProps = Omit<InputProps, "type"> & {
+//   /**
+//    * The immutable text that appears at the beginning of the input field.
+//    * This text is not editable by the user and visually appears inside the input.
+//    */
+//   immutableText: string;
+// };
+
+var PrefixedInput = _ref => {
+  var {
+      immutableText
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var prefixTextRef = useRef(null);
+  var inputWrapperRef = useRef(null);
+  var updatePadding = useCallback(() => {
+    var _inputWrapperRef$curr;
+    var prefixElement = prefixTextRef.current;
+    var inputElement = (_inputWrapperRef$curr = inputWrapperRef.current) === null || _inputWrapperRef$curr === void 0 ? void 0 : _inputWrapperRef$curr.querySelector("input");
+    if (prefixElement && inputElement) {
+      // Adjust the left padding of the input to be the same width as the immutable text.
+      // This displays the user input and the unchangeable text together as one combined string.
+      var prefixWidth = prefixElement.getBoundingClientRect().width;
+      inputElement.style.paddingLeft = "".concat(prefixWidth, "px");
+    }
+  }, []);
+  useListener(window, updatePadding, "resize", true);
+  useLayoutEffect(() => {
+    updatePadding();
+  }, [immutableText, props.label, updatePadding]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("prefixed-input", {
+      "prefixed-input--with-label": !!props.label
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "prefixed-input__text",
+    ref: prefixTextRef
+  }, immutableText), /*#__PURE__*/React.createElement("div", {
+    ref: inputWrapperRef
+  }, /*#__PURE__*/React.createElement(Input, _extends({}, props, {
+    className: classNames("prefixed-input__input", props.className),
+    type: "text",
+    wrapperClassName: classNames("prefixed-input__wrapper", props.wrapperClassName)
+  }))));
+};
+export default PrefixedInput;

package/dist/esm/components/PrefixedInput/PrefixedInput.scss

@@ -0,0 +1,22 @@
+@import "vanilla-framework";
+
+.prefixed-input {
+  position: relative;
+
+  .prefixed-input__input {
+    padding-top: 0.25rem;
+  }
+
+  .prefixed-input__text {
+    padding-left: $spv--large;
+    padding-top: 0.3rem;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  &--with-label {
+    .prefixed-input__text {
+      top: 2.5rem;
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import PrefixedInput from "./PrefixedInput";
+declare const meta: Meta<typeof PrefixedInput>;
+export default meta;
+type Story = StoryObj<typeof PrefixedInput>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const Disabled: Story;
+export declare const WithError: Story;
+export declare const WithHelpText: Story;
+export declare const Required: Story;

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

@@ -0,0 +1,51 @@
+import PrefixedInput from "./PrefixedInput";
+var meta = {
+  component: PrefixedInput,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  args: {
+    immutableText: "https://",
+    placeholder: "example.com"
+  }
+};
+export var WithLabel = {
+  args: {
+    immutableText: "https://",
+    label: "Website URL",
+    placeholder: "example.com"
+  }
+};
+export var Disabled = {
+  args: {
+    immutableText: "@",
+    label: "Username",
+    placeholder: "username",
+    disabled: true
+  }
+};
+export var WithError = {
+  args: {
+    immutableText: "https://",
+    label: "Website URL",
+    placeholder: "example.com",
+    error: "Invalid URL format"
+  }
+};
+export var WithHelpText = {
+  args: {
+    immutableText: "User ID:",
+    label: "User Identifier",
+    placeholder: " Enter user ID",
+    help: "This will be used to identify your account"
+  }
+};
+export var Required = {
+  args: {
+    immutableText: "https://",
+    label: "Website URL",
+    placeholder: "example.com",
+    required: true
+  }
+};

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

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

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

@@ -0,0 +1 @@
+export { default, type PrefixedInputProps } from "./PrefixedInput";

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

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