@carbon/ibm-products 2.30.0 → 2.31.0-alpha.5

package/lib/components/Nav/NavItemLink.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../node_modules/prop-types/index.js');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["element"];
+var NavItemLink = /*#__PURE__*/React__default["default"].forwardRef(function NavItemLink(props, ref) {
+  var element = props.element,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement(element, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+    ref: ref
+  }));
+});
+NavItemLink.displayName = 'NavItemLink';
+NavItemLink.propTypes = {
+  /** @type {elementType} The base element to use to build the link. Defaults to `a`, can also accept alternative tag names or custom components like `Link` from `react-router`. */
+  element: index["default"].elementType
+};
+NavItemLink.defaultProps = {
+  element: 'a'
+};
+var NavItemLink$1 = NavItemLink;
+
+exports["default"] = NavItemLink$1;

package/lib/components/Nav/NavList.d.ts

@@ -0,0 +1,4 @@
+export const blockClass: string;
+export let NavList: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export default NavList;
+import React from 'react';

package/lib/components/Nav/NavList.js

@@ -0,0 +1,179 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cx = require('classnames');
+var index = require('../../node_modules/prop-types/index.js');
+var NavItem = require('./NavItem.js');
+var settings = require('../../settings.js');
+var bucket2 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-2.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var componentName = 'NavList';
+var blockClass = "".concat(settings.pkg.prefix, "--nav-list");
+
+// Default values for props
+var defaults = {
+  activeHref: '#',
+  className: '',
+  children: null,
+  id: '',
+  isExpandedOnPageload: false,
+  onItemClick: function onItemClick() {},
+  onListClick: function onListClick() {},
+  tabIndex: 0,
+  title: '',
+  icon: '',
+  navigationItemTitle: ''
+};
+var NavList = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var _ref$activeHref = _ref.activeHref,
+    activeHref = _ref$activeHref === void 0 ? defaults.activeHref : _ref$activeHref,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? defaults.children : _ref$children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? defaults.className : _ref$className,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? defaults.icon : _ref$icon,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? defaults.id : _ref$id,
+    _ref$isExpandedOnPage = _ref.isExpandedOnPageload,
+    isExpandedOnPageload = _ref$isExpandedOnPage === void 0 ? defaults.isExpandedOnPageload : _ref$isExpandedOnPage,
+    _ref$navigationItemTi = _ref.navigationItemTitle,
+    navigationItemTitle = _ref$navigationItemTi === void 0 ? defaults.navigationItemTitle : _ref$navigationItemTi,
+    _ref$onItemClick = _ref.onItemClick,
+    onItemClick = _ref$onItemClick === void 0 ? defaults.onItemClick : _ref$onItemClick,
+    _ref$onListClick = _ref.onListClick,
+    onListClick = _ref$onListClick === void 0 ? defaults.onListClick : _ref$onListClick,
+    _ref$tabIndex = _ref.tabIndex,
+    tabIndex = _ref$tabIndex === void 0 ? defaults.tabIndex : _ref$tabIndex,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? defaults.title : _ref$title;
+  var _useState = React.useState(isExpandedOnPageload),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  React.useEffect(function () {
+    var hrefs = React__default["default"].Children.toArray(children).filter(function (_ref2) {
+      var childProps = _ref2.props;
+      return childProps.href && childProps.href.length > 0;
+    }).map(function (_ref3) {
+      var childProps = _ref3.props;
+      return childProps.href;
+    });
+    setOpen(hrefs.includes(activeHref) || isExpandedOnPageload);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  /**
+   * Closes the list.
+   */
+  var close = function close() {
+    if (open) {
+      setOpen(false);
+    }
+  };
+
+  /**
+   * Handles toggling the list.
+   * @param {SyntheticEvent} event The event fired when the list is toggled.
+   */
+  var toggle = function toggle(event) {
+    var which = event.which,
+      type = event.type;
+
+    // Enter (13) and spacebar (32).
+    if (which === 13 || which === 32 || type === 'click') {
+      if (!open) {
+        onListClick(id);
+      }
+      setOpen(!open);
+    }
+  };
+
+  // Expose external function calls to the parent component
+  React.useImperativeHandle(ref, function () {
+    return {
+      close: close,
+      isExpandedOnPageload: isExpandedOnPageload
+    };
+  });
+  var newChildren = React__default["default"].Children.map(children, function (child, index) {
+    return /*#__PURE__*/React__default["default"].createElement(NavItem["default"], _rollupPluginBabelHelpers["extends"]({}, child.props, {
+      key: "".concat(NavItem.blockClass, "--").concat(index),
+      onClick: function onClick(event, href) {
+        var _child$props$onClick, _child$props;
+        onItemClick(event, href);
+        (_child$props$onClick = (_child$props = child.props).onClick) === null || _child$props$onClick === void 0 || _child$props$onClick.call(_child$props, event);
+      },
+      activeHref: activeHref,
+      tabIndex: open ? 0 : -1
+    }));
+  });
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    ref: ref,
+    className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(NavItem.blockClass, "--expanded"), open)),
+    tabIndex: tabIndex,
+    onClick: toggle,
+    onKeyDown: toggle,
+    role: "menuitem"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(NavItem.blockClass, "__link")
+  }, icon && /*#__PURE__*/React__default["default"].createElement("img", {
+    alt: navigationItemTitle,
+    className: "".concat(NavItem.blockClass, "__img"),
+    src: icon
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(NavItem.blockClass, "__content")
+  }, title), /*#__PURE__*/React__default["default"].createElement(bucket2.ChevronDown, {
+    className: "".concat(blockClass, "__icon")
+  })), /*#__PURE__*/React__default["default"].createElement("ul", {
+    "aria-label": title,
+    "aria-hidden": !open,
+    className: "".concat(blockClass, " ").concat(blockClass, "--nested"),
+    role: "menu"
+  }, newChildren));
+});
+NavList.propTypes = {
+  /** @type {string} Hypertext reference for active page. */
+  activeHref: index.propTypesExports.string,
+  /** @type {Node} Child elements. */
+  children: index.propTypesExports.node,
+  /** @type {string} Extra classes to add. */
+  className: index.propTypesExports.string,
+  /** @type {string} Icon of a list. */
+  icon: index.propTypesExports.string,
+  /** @type {string} ID of a list. */
+  id: index.propTypesExports.string,
+  /** @type {boolean} State of a list. */
+  isExpandedOnPageload: index.propTypesExports.bool,
+  /** @type {boolean} Title of nav. */
+  navigationItemTitle: index.propTypesExports.string,
+  /** @type {Function} Click handler for an item. */
+  onItemClick: index.propTypesExports.func,
+  /** @type {Function} Click handler for a list. */
+  onListClick: index.propTypesExports.func,
+  /** @type {number} `tabindex` of an item. */
+  tabIndex: index.propTypesExports.number,
+  /** @type {string} Label of the list. */
+  title: index.propTypesExports.string
+};
+NavList.displayName = componentName;
+var NavList$1 = NavList;
+
+exports.NavList = NavList;
+exports.blockClass = blockClass;
+exports["default"] = NavList$1;

package/lib/components/Nav/index.d.ts

@@ -0,0 +1,3 @@
+export { Nav } from "./Nav";
+export { NavList } from "./NavList";
+export { NavItem } from "./NavItem";

package/lib/components/Tearsheet/TearsheetShell.js

@@ -43,9 +43,13 @@ var maxDepth = 3;
 // happens when a tearsheet opens or closes. The 'open' array contains one
 // handler per OPEN tearsheet ordered from lowest to highest in visual z-order.
 // The 'all' array contains all the handlers for open and closed tearsheets.
+// The 'sizes' array contains an array of the sizes for every stacked tearsheet.
+// This is so we can opt-out of including the stacking scale effect when there
+// are stacked tearsheets with mixed sizes (ie, using wide and narrow together)
 var stack = {
   open: [],
-  all: []
+  all: [],
+  sizes: []
 };
 
 // these props are only applicable when size='wide'
@@ -156,6 +160,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
 
     // Register this tearsheet's stack change callback/listener.
     stack.all.push(handleStackChange);
+    stack.sizes.push(size);
 
     // If the tearsheet is mounting with open=true or open is changing from
     // false to true to open it then append its notification callback to
@@ -172,6 +177,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
     return function cleanup() {
       // Remove the notification callback from the all handlers array.
       stack.all.splice(stack.all.indexOf(handleStackChange), 1);
+      stack.sizes.splice(stack.sizes.indexOf(size), 1);
 
       // Remove the notification callback from the open handlers array, if
       // it's there, and notify all open tearsheets that the stacking has
@@ -182,7 +188,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
         notify();
       }
     };
-  }, [open]);
+  }, [open, size]);
   function handleFocus() {
     // If something within us is receiving focus but we are not the topmost
     // stacked tearsheet, transfer focus to the topmost tearsheet instead
@@ -198,14 +204,23 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
 
     // Include an ActionSet if and only if one or more actions is given.
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
+    var areAllSameSizeVariant = function areAllSameSizeVariant() {
+      return new Set(stack.sizes).size === 1;
+    };
+    var setScaleValues = function setScaleValues() {
+      if (!areAllSameSizeVariant()) {
+        return _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), 1), "--".concat(bc, "--stacking-scale-factor-double"), 1);
+      }
+      return _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width);
+    };
     return renderPortalUse( /*#__PURE__*/React__default["default"].createElement(react.ComposedModal, _rollupPluginBabelHelpers["extends"]({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent.getNodeTextContent(title),
       className: cx__default["default"](bc, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
       depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
       slug: slug,
-      style: _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width),
-      containerClassName: cx__default["default"]("".concat(bc, "__container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower')),
+      style: setScaleValues(),
+      containerClassName: cx__default["default"]("".concat(bc, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !areAllSameSizeVariant())),
       onClose: onClose,
       open: open,
       selectorPrimaryFocus: selectorPrimaryFocus,
@@ -333,9 +348,9 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    * **Note:** This prop is only required if a close icon is shown, i.e. if
    * there are a no navigation actions and/or hasCloseIcon is true.
    */
-  closeIconDescription: index["default"].string.isRequired.if(function (_ref3) {
-    var actions = _ref3.actions,
-      hasCloseIcon = _ref3.hasCloseIcon;
+  closeIconDescription: index["default"].string.isRequired.if(function (_ref4) {
+    var actions = _ref4.actions,
+      hasCloseIcon = _ref4.hasCloseIcon;
     return tearsheetHasCloseIcon(actions, hasCloseIcon);
   }),
   /**

package/lib/components/index.d.ts

@@ -44,6 +44,7 @@ export { Decorator } from "./Decorator";
 export { DescriptionList } from "./DescriptionList";
 export { FullPageError } from "./FullPageError";
 export { SearchBar } from "./SearchBar";
+export { Nav } from "./Nav";
 export { StringFormatter } from "./StringFormatter";
 export { UserAvatar } from "./UserAvatar";
 export { StatusIndicator } from "./StatusIndicator";

package/lib/global/js/package-settings.d.ts

@@ -75,6 +75,7 @@ declare namespace defaults {
         let EditTearsheetNarrow: boolean;
         let EditFullPage: boolean;
         let EditUpdateCards: boolean;
+        let Nav: boolean;
         let BigNumbers: boolean;
         let TruncatedList: boolean;
         let DelimitedList: boolean;

package/lib/global/js/package-settings.js

@@ -78,6 +78,7 @@ var defaults = {
     EditTearsheetNarrow: false,
     EditFullPage: false,
     EditUpdateCards: false,
+    Nav: false,
     BigNumbers: false,
     TruncatedList: false,
     DelimitedList: false,

package/lib/index.js

@@ -113,6 +113,7 @@ var Decorator = require('./components/Decorator/Decorator.js');
 var DescriptionList = require('./components/DescriptionList/DescriptionList.js');
 var FullPageError = require('./components/FullPageError/FullPageError.js');
 var SearchBar = require('./components/SearchBar/SearchBar.js');
+var Nav = require('./components/Nav/Nav.js');
 var StringFormatter = require('./components/StringFormatter/StringFormatter.js');
 var UserAvatar = require('./components/UserAvatar/UserAvatar.js');
 var StatusIndicator = require('./components/StatusIndicator/StatusIndicator.js');
@@ -467,6 +468,10 @@ Object.defineProperty(exports, 'SearchBar', {
 	enumerable: true,
 	get: function () { return SearchBar.SearchBar; }
 });
+Object.defineProperty(exports, 'Nav', {
+	enumerable: true,
+	get: function () { return Nav.Nav; }
+});
 Object.defineProperty(exports, 'StringFormatter', {
 	enumerable: true,
 	get: function () { return StringFormatter.StringFormatter; }

package/lib/node_modules/@carbon/icon-helpers/es/index.js

@@ -0,0 +1,145 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+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 _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;
+}
+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 _toPrimitive(input, hint) {
+  if (_rollupPluginBabelHelpers["typeof"](input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_rollupPluginBabelHelpers["typeof"](res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _rollupPluginBabelHelpers["typeof"](key) === "symbol" ? key : String(key);
+}
+var _excluded = ["width", "height", "viewBox"],
+  _excluded2 = ["tabindex"];
+/**
+ * Copyright IBM Corp. 2018, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var defaultAttributes = {
+  // Reference:
+  // https://github.com/IBM/carbon-components-react/issues/1392
+  // https://github.com/PolymerElements/iron-iconset-svg/pull/47
+  // `focusable` is a string attribute which is why we do not use a boolean here
+  focusable: 'false',
+  preserveAspectRatio: 'xMidYMid meet'
+};
+
+/**
+ * Get supplementary HTML attributes for a given <svg> element based on existing
+ * attributes.
+ */
+function getAttributes() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    width = _ref.width,
+    height = _ref.height,
+    _ref$viewBox = _ref.viewBox,
+    viewBox = _ref$viewBox === void 0 ? "0 0 ".concat(width, " ").concat(height) : _ref$viewBox,
+    attributes = _objectWithoutProperties(_ref, _excluded);
+  var tabindex = attributes.tabindex,
+    rest = _objectWithoutProperties(attributes, _excluded2);
+  var iconAttributes = _objectSpread2(_objectSpread2(_objectSpread2({}, defaultAttributes), rest), {}, {
+    width: width,
+    height: height,
+    viewBox: viewBox
+  });
+
+  // TODO: attributes.title assumes that the consumer will implement <title> and
+  // correctly set `aria-labelledby`.
+  if (iconAttributes['aria-label'] || iconAttributes['aria-labelledby'] || iconAttributes.title) {
+    iconAttributes.role = 'img';
+
+    // Reference:
+    // https://allyjs.io/tutorials/focusing-in-svg.html
+    if (tabindex !== undefined && tabindex !== null) {
+      iconAttributes.focusable = 'true';
+      iconAttributes.tabindex = tabindex;
+    }
+  } else {
+    iconAttributes['aria-hidden'] = true;
+  }
+  return iconAttributes;
+}
+
+exports.defaultAttributes = defaultAttributes;
+exports.getAttributes = getAttributes;

package/lib/node_modules/@carbon/icons-react/es/Icon.js

@@ -0,0 +1,81 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../icon-helpers/es/index.js');
+var index$1 = require('../../../prop-types/index.js');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["className", "children", "tabIndex", "xmlns", "preserveAspectRatio"],
+  _excluded2 = ["tabindex"];
+
+/**
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Icon = /*#__PURE__*/React__default["default"].forwardRef(function Icon(_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    tabIndex = _ref.tabIndex,
+    _ref$xmlns = _ref.xmlns,
+    xmlns = _ref$xmlns === void 0 ? 'http://www.w3.org/2000/svg' : _ref$xmlns,
+    _ref$preserveAspectRa = _ref.preserveAspectRatio,
+    preserveAspectRatio = _ref$preserveAspectRa === void 0 ? 'xMidYMid meet' : _ref$preserveAspectRa,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _getAttributes = index.getAttributes(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+      tabindex: tabIndex
+    })),
+    tabindex = _getAttributes.tabindex,
+    attrs = _rollupPluginBabelHelpers.objectWithoutProperties(_getAttributes, _excluded2);
+  var props = attrs;
+  if (className) {
+    props.className = className;
+  }
+  if (tabindex !== undefined && tabindex !== null) {
+    if (typeof tabindex === 'number') {
+      props.tabIndex = tabindex;
+    } else {
+      props.tabIndex = Number(tabIndex);
+    }
+  }
+  if (ref) {
+    props.ref = ref;
+  }
+  if (xmlns) {
+    props.xmlns = xmlns;
+  }
+  if (preserveAspectRatio) {
+    props.preserveAspectRatio = preserveAspectRatio;
+  }
+  return /*#__PURE__*/React__default["default"].createElement('svg', props, children);
+});
+Icon.displayName = 'Icon';
+Icon.propTypes = {
+  'aria-hidden': index$1["default"].oneOfType([index$1["default"].bool, index$1["default"].oneOf(['true', 'false'])]),
+  'aria-label': index$1["default"].string,
+  'aria-labelledby': index$1["default"].string,
+  children: index$1["default"].node,
+  className: index$1["default"].string,
+  height: index$1["default"].oneOfType([index$1["default"].number, index$1["default"].string]),
+  preserveAspectRatio: index$1["default"].string,
+  tabIndex: index$1["default"].oneOfType([index$1["default"].number, index$1["default"].string]),
+  viewBox: index$1["default"].string,
+  width: index$1["default"].oneOfType([index$1["default"].number, index$1["default"].string]),
+  xmlns: index$1["default"].string
+};
+
+exports["default"] = Icon;