@carbon-labs/react-ui-shell 0.60.0 → 0.62.0

package/es/node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js

@@ -6,9 +6,9 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React from 'react';
+import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
-import cx from '../../../../../../_virtual/index.js';
+import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { usePrefix, Tooltip } from '@carbon/react';
@@ -29,7 +29,7 @@ const componentName = 'UserAvatar';
  * TODO: A description of the component.
  */
 
-let UserAvatar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+let UserAvatar = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     // The component props, in alphabetical order (for consistency).
     backgroundColor = 'order-1-cyan',
@@ -71,21 +71,21 @@ let UserAvatar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       size: iconSize[size]
     };
     if (image) {
-      return /*#__PURE__*/React.createElement("img", {
+      return /*#__PURE__*/React__default.createElement("img", {
         alt: imageDescription,
         src: image,
         className: `${blockClass}__photo ${blockClass}__photo--${size}`
       });
     }
     if (RenderIcon) {
-      return /*#__PURE__*/React.createElement(RenderIcon, iconProps);
+      return /*#__PURE__*/React__default.createElement(RenderIcon, iconProps);
     }
     if (name) {
       return formatInitials();
     }
-    return /*#__PURE__*/React.createElement(User, iconProps);
+    return /*#__PURE__*/React__default.createElement(User, iconProps);
   };
-  const Avatar = () => /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+  const Avatar = () => /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
     className,
@@ -99,13 +99,13 @@ let UserAvatar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: ref
   }, getDevtoolsProps(componentName)), getItem());
   if (tooltipText) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
       align: tooltipAlignment,
       label: tooltipText,
       className: `${blockClass}__tooltip ${carbonPrefix}--icon-tooltip`
-    }, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(Avatar, null)));
+    }, /*#__PURE__*/React__default.createElement(TooltipTrigger, null, /*#__PURE__*/React__default.createElement(Avatar, null)));
   }
-  return /*#__PURE__*/React.createElement(Avatar, null);
+  return /*#__PURE__*/React__default.createElement(Avatar, null);
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/es/node_modules/@carbon/ibm-products/es/components/_Canary/Canary.js

@@ -6,9 +6,9 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React from 'react';
+import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
-import cx from '../../../../../../_virtual/index.js';
+import cx from 'classnames';
 import pkg from '../../global/js/package-settings.js';
 import { CodeSnippet } from '@carbon/react';
 
@@ -31,11 +31,11 @@ import { pkg } from '@carbon/ibm-products';
 // NOTE: must happen before component is first used
 pkg.component.${componentName} = true;
 `;
-  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className)
-  }), /*#__PURE__*/React.createElement("h2", null, "This component ", /*#__PURE__*/React.createElement("strong", null, componentName), " is not ready yet."), _p || (_p = /*#__PURE__*/React.createElement("p", null, "To enable it, initialize package flags before the component is first used.")), _br || (_br = /*#__PURE__*/React.createElement("br", null)), _p2 || (_p2 = /*#__PURE__*/React.createElement("p", null, "e.g. in main.js")), /*#__PURE__*/React.createElement(CodeSnippet, {
+  }), /*#__PURE__*/React__default.createElement("h2", null, "This component ", /*#__PURE__*/React__default.createElement("strong", null, componentName), " is not ready yet."), _p || (_p = /*#__PURE__*/React__default.createElement("p", null, "To enable it, initialize package flags before the component is first used.")), _br || (_br = /*#__PURE__*/React__default.createElement("br", null)), _p2 || (_p2 = /*#__PURE__*/React__default.createElement("p", null, "e.g. in main.js")), /*#__PURE__*/React__default.createElement(CodeSnippet, {
     type: "multi"
-  }, instructions), _br2 || (_br2 = /*#__PURE__*/React.createElement("br", null)), _p3 || (_p3 = /*#__PURE__*/React.createElement("p", null, "View a live example on", ' ', /*#__PURE__*/React.createElement("a", {
+  }, instructions), _br2 || (_br2 = /*#__PURE__*/React__default.createElement("br", null)), _p3 || (_p3 = /*#__PURE__*/React__default.createElement("p", null, "View a live example on", ' ', /*#__PURE__*/React__default.createElement("a", {
     href: "https://codesandbox.io/s/example-component-olif5?file=/src/config.js"
   }, "codesandbox"), ".")));
 };

package/es/node_modules/@carbon/ibm-products/es/settings.js

@@ -6,7 +6,7 @@
  */
 
 import pkg$1 from './global/js/package-settings.js';
-import React from 'react';
+import React__default from 'react';
 import pconsole from './global/js/utils/pconsole.js';
 import { Canary } from './components/_Canary/Canary.js';
 
@@ -30,7 +30,7 @@ pkg$1.logDeprecated = (component, name) => {
 pkg$1.checkComponentEnabled = (component, name) => {
   if (component.render) {
     // The component is a forward-ref, so make a stub forward-ref.
-    const forward = /*#__PURE__*/React.forwardRef((props, ref) => {
+    const forward = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       pkg$1.logDeprecated(component, name); // may log don't care about result
       // Replace the stub's render fn so this test only happens once.
       return (forward.render = pkg$1.isComponentEnabled(name) || !pkg$1.isComponentPublic(name) ?

package/es/prop-types/deprecate.js

@@ -17,7 +17,7 @@ import { warning } from '../internal/warning.js';
 
 const didWarnAboutDeprecation = {};
 function deprecate(propType, message) {
-  function checker(props, propName, componentName) {
+  function checker(props, propName, componentName, ...rest) {
     if (props[propName] === undefined) {
       return;
     }
@@ -28,9 +28,6 @@ function deprecate(propType, message) {
       };
       process.env.NODE_ENV !== "production" ? warning(false, message) : void 0;
     }
-    for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
-      rest[_key - 3] = arguments[_key];
-    }
     return propType(props, propName, componentName, ...rest);
   }
   return checker;

package/es/prop-types/isRequiredOneOf.js

@@ -22,13 +22,10 @@
  */
 function isRequiredOneOf(propTypes) {
   const names = Object.keys(propTypes);
-  const checker = propType => function (props, propName, componentName) {
+  const checker = propType => (props, propName, componentName, ...rest) => {
     if (process.env.NODE_ENV !== 'production' && names.every(name => typeof props[name] === 'undefined')) {
       return new Error(`${componentName} requires one of the following props: ${names.join(', ')}`);
     }
-    for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
-      rest[_key - 3] = arguments[_key];
-    }
     return propType(props, propName, componentName, ...rest);
   };
   return names.reduce((o, name) => ({

package/lib/components/HeaderContainer.js

@@ -11,25 +11,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
-var React = require('react');
+var React__default = require('react');
 var keys = require('../internal/keyboard/keys.js');
 var match = require('../internal/keyboard/match.js');
 var useEvent = require('../internal/useEvent.js');
 var usePrefix = require('../internal/usePrefix.js');
 
-function HeaderContainer(_ref) {
-  let {
-    render: Children,
-    isSideNavExpanded = false,
-    isSwitcherExpanded = false,
-    isProfileExpanded = false,
-    themeSetting,
-    ...rest
-  } = _ref;
+function HeaderContainer({
+  render: Children,
+  isSideNavExpanded = false,
+  isSwitcherExpanded = false,
+  isProfileExpanded = false,
+  themeSetting,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
-  const [isSideNavExpandedState, setIsSideNavExpandedState] = React.useState(isSideNavExpanded);
-  const [isSwitcherExpandedState, setSwitcherExpandedState] = React.useState(isSwitcherExpanded);
-  const [isProfileExpandedState, setIsProfileExpandedState] = React.useState(isProfileExpanded);
+  const [isSideNavExpandedState, setIsSideNavExpandedState] = React__default.useState(isSideNavExpanded);
+  const [isSwitcherExpandedState, setSwitcherExpandedState] = React__default.useState(isSwitcherExpanded);
+  const [isProfileExpandedState, setIsProfileExpandedState] = React__default.useState(isProfileExpanded);
   useEvent.useWindowEvent('keydown', event => {
     if (match.match(event, keys.Escape)) {
       setIsSideNavExpandedState(false);
@@ -37,23 +36,23 @@ function HeaderContainer(_ref) {
       setIsProfileExpandedState(false); // close profile on ESC
     }
   });
-  const handleHeaderMenuButtonClick = React.useCallback(() => {
+  const handleHeaderMenuButtonClick = React__default.useCallback(() => {
     setIsSideNavExpandedState(prev => !prev);
   }, []);
-  const handleSwitcherClick = React.useCallback(() => {
+  const handleSwitcherClick = React__default.useCallback(() => {
     setSwitcherExpandedState(prev => !prev);
   }, []);
-  const handleProfileClick = React.useCallback(e => {
+  const handleProfileClick = React__default.useCallback(e => {
     if (!e.target.closest(`.${prefix}--profile .${prefix}--popover`)) {
       setIsProfileExpandedState(prev => !prev);
     }
   }, []);
-  React.useLayoutEffect(() => {
+  React__default.useLayoutEffect(() => {
     setTimeout(function () {
       document.querySelector(`.${prefix}--profile .${prefix}--content-switcher--selected`).focus();
     });
   }, [themeSetting]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     function handleProfileClosing(event) {
       const profile = document.querySelector(`.${prefix}--profile.${prefix}--popover--open`);
       if (profile && !profile.contains(event.target)) {
@@ -67,7 +66,7 @@ function HeaderContainer(_ref) {
       document.removeEventListener('focusin', handleProfileClosing);
     };
   }, []);
-  return /*#__PURE__*/React.createElement(Children, _rollupPluginBabelHelpers.extends({}, rest, {
+  return /*#__PURE__*/React__default.createElement(Children, _rollupPluginBabelHelpers.extends({}, rest, {
     isSideNavExpanded: isSideNavExpandedState,
     isSwitcherExpanded: isSwitcherExpandedState,
     isProfileExpanded: isProfileExpandedState,

package/lib/components/HeaderDivider.js

@@ -7,18 +7,17 @@
 
 'use strict';
 
-var index = require('../_virtual/index.js');
+var cx = require('classnames');
 var PropTypes = require('prop-types');
-var React = require('react');
+var React__default = require('react');
 var usePrefix = require('../internal/usePrefix.js');
 
-const HeaderDivider = _ref => {
-  let {
-    className
-  } = _ref;
+const HeaderDivider = ({
+  className
+}) => {
   const prefix = usePrefix.usePrefix();
-  const classNames = index.default(`${prefix}--header__divider`, className);
-  return /*#__PURE__*/React.createElement("span", {
+  const classNames = cx(`${prefix}--header__divider`, className);
+  return /*#__PURE__*/React__default.createElement("span", {
     className: classNames
   });
 };

package/lib/components/HeaderPopover.js

@@ -8,9 +8,9 @@
 'use strict';
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../_virtual/index.js');
+var cx = require('classnames');
 var PropTypes = require('prop-types');
-var React = require('react');
+var React__default = require('react');
 var react = require('@carbon/react');
 var keys = require('../internal/keyboard/keys.js');
 var match = require('../internal/keyboard/match.js');
@@ -20,9 +20,9 @@ var usePrefix = require('../internal/usePrefix.js');
 
 // Used to coordinate accessibility props between button and content along with
 // the actions to open and close the toggletip
-const HeaderPopoverContext = /*#__PURE__*/React.createContext(undefined);
+const HeaderPopoverContext = /*#__PURE__*/React__default.createContext(undefined);
 function useToggletip() {
-  return React.useContext(HeaderPopoverContext);
+  return React__default.useContext(HeaderPopoverContext);
 }
 
 /**
@@ -30,21 +30,20 @@ function useToggletip() {
  * is responsible for coordinating between interactions with the button and the
  * visibility of the content
  */
-function HeaderPopover(_ref) {
-  let {
-    align,
-    as,
-    autoAlign,
-    className: customClassName,
-    children,
-    defaultOpen = false,
-    ...rest
-  } = _ref;
-  const ref = React.useRef(null);
-  const [open, setOpen] = React.useState(defaultOpen);
+function HeaderPopover({
+  align,
+  as,
+  autoAlign,
+  className: customClassName,
+  children,
+  defaultOpen = false,
+  ...rest
+}) {
+  const ref = React__default.useRef(null);
+  const [open, setOpen] = React__default.useState(defaultOpen);
   const prefix = usePrefix.usePrefix();
   const id = useId.useId();
-  const className = index.default(customClassName, {
+  const className = cx(customClassName, {
     [`${prefix}--header-action`]: true,
     [`${prefix}--autoalign`]: autoAlign
   });
@@ -102,9 +101,9 @@ function HeaderPopover(_ref) {
       actions.close();
     }
   });
-  return /*#__PURE__*/React.createElement(HeaderPopoverContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(HeaderPopoverContext.Provider, {
     value: value
-  }, /*#__PURE__*/React.createElement(react.Popover, _rollupPluginBabelHelpers.extends({
+  }, /*#__PURE__*/React__default.createElement(react.Popover, _rollupPluginBabelHelpers.extends({
     align: align,
     autoAlign: autoAlign,
     as: as,
@@ -156,21 +155,20 @@ HeaderPopover.propTypes = {
  * clicks and keyboard interactions.
  */
 
-function HeaderPopoverButton(_ref2) {
-  let {
-    children,
-    className: customClassName,
-    label = 'Show information',
-    as: BaseComponent,
-    ...rest
-  } = _ref2;
+function HeaderPopoverButton({
+  children,
+  className: customClassName,
+  label = 'Show information',
+  as: BaseComponent,
+  ...rest
+}) {
   const toggletip = useToggletip();
   const prefix = usePrefix.usePrefix();
-  const className = index.default(customClassName, {
+  const className = cx(customClassName, {
     [`${prefix}--header-action__button`]: true
   });
   const ComponentToggle = BaseComponent ?? react.IconButton;
-  return /*#__PURE__*/React.createElement(ComponentToggle, _rollupPluginBabelHelpers.extends({}, toggletip?.onClick, {
+  return /*#__PURE__*/React__default.createElement(ComponentToggle, _rollupPluginBabelHelpers.extends({}, toggletip?.onClick, {
     className: className,
     kind: BaseComponent ? null : 'ghost',
     label: label,
@@ -198,15 +196,14 @@ HeaderPopoverButton.propTypes = {
  * `children` passed in as a prop inside of `PopoverContent` so that they will
  * be rendered inside of the popover for this component.
  */
-function HeaderPopoverContent(_ref3) {
-  let {
-    children,
-    className,
-    ...rest
-  } = _ref3;
+function HeaderPopoverContent({
+  children,
+  className,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
-  return /*#__PURE__*/React.createElement(react.ToggletipContent, _rollupPluginBabelHelpers.extends({
-    className: index.default(className, {
+  return /*#__PURE__*/React__default.createElement(react.ToggletipContent, _rollupPluginBabelHelpers.extends({
+    className: cx(className, {
       [`${prefix}--header-action__content`]: true
     })
   }, rest), children);

package/lib/components/Link.js

@@ -11,23 +11,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
-var React = require('react');
+var React__default = require('react');
 var deprecate = require('../prop-types/deprecate.js');
 
 // Note: Maybe we should use `as` instead of `element`? `as` appears to be
 // standard and is used in other places in this project.
 
-function LinkRenderFunction(_ref, ref) {
-  let {
-    element,
-    as: BaseComponent,
-    // Captured here to prevent it from being passed into the created element.
-    // See https://github.com/carbon-design-system/carbon/issues/3970
-    isSideNavExpanded: _isSideNavExpanded,
-    ...rest
-  } = _ref;
+function LinkRenderFunction({
+  element,
+  as: BaseComponent,
+  // Captured here to prevent it from being passed into the created element.
+  // See https://github.com/carbon-design-system/carbon/issues/3970
+  isSideNavExpanded: _isSideNavExpanded,
+  ...rest
+}, ref) {
   const BaseComponentAsAny = BaseComponent ?? element ?? 'a';
-  return /*#__PURE__*/React.createElement(BaseComponentAsAny, _rollupPluginBabelHelpers.extends({
+  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _rollupPluginBabelHelpers.extends({
     ref: ref
   }, rest));
 }
@@ -38,7 +37,7 @@ function LinkRenderFunction(_ref, ref) {
  * in their own components to support use-cases like `react-router` or
  * `@reach/router`
  */
-const Link = /*#__PURE__*/React.forwardRef(LinkRenderFunction);
+const Link = /*#__PURE__*/React__default.forwardRef(LinkRenderFunction);
 const LinkPropTypes = {
   /**
    * Provide a custom element or component to render the top-level node for the

package/lib/components/Profile.js

@@ -8,33 +8,32 @@
 'use strict';
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../_virtual/index.js');
+var cx = require('classnames');
 var PropTypes = require('prop-types');
-var React = require('react');
+var React__default = require('react');
 var usePrefix = require('../internal/usePrefix.js');
 var HeaderPopover = require('./HeaderPopover.js');
 var UserAvatar = require('../node_modules/@carbon/ibm-products/es/components/UserAvatar/UserAvatar.js');
 
-const Profile = /*#__PURE__*/React.forwardRef(function Profile(_ref) {
-  let {
-    className: customClassName,
-    label,
-    children,
-    renderIcon: IconElement,
-    ...rest
-  } = _ref;
+const Profile = /*#__PURE__*/React__default.forwardRef(function Profile({
+  className: customClassName,
+  label,
+  children,
+  renderIcon: IconElement,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
-  const className = index.default({
+  const className = cx({
     [`${prefix}--profile`]: true,
     [customClassName]: !!customClassName
   });
-  return /*#__PURE__*/React.createElement(HeaderPopover.HeaderPopover, _rollupPluginBabelHelpers.extends({
+  return /*#__PURE__*/React__default.createElement(HeaderPopover.HeaderPopover, _rollupPluginBabelHelpers.extends({
     align: "bottom-right",
     className: className
-  }, rest), /*#__PURE__*/React.createElement(HeaderPopover.HeaderPopoverButton, {
+  }, rest), /*#__PURE__*/React__default.createElement(HeaderPopover.HeaderPopoverButton, {
     align: "bottom",
     label: label
-  }, IconElement), /*#__PURE__*/React.createElement(HeaderPopover.HeaderPopoverContent, null, children));
+  }, IconElement), /*#__PURE__*/React__default.createElement(HeaderPopover.HeaderPopoverContent, null, children));
 });
 Profile.displayName = 'Profile';
 Profile.propTypes = {
@@ -56,28 +55,27 @@ Profile.propTypes = {
   // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
-const ProfileUserInfo = /*#__PURE__*/React.forwardRef(function ProfileUserInfo(_ref2) {
-  let {
-    className: customClassName,
-    name,
-    email,
-    ...rest
-  } = _ref2;
+const ProfileUserInfo = /*#__PURE__*/React__default.forwardRef(function ProfileUserInfo({
+  className: customClassName,
+  name,
+  email,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
-  const className = index.default({
+  const className = cx({
     [`${prefix}--profile-user-info`]: true,
     [customClassName]: !!customClassName
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: className
-  }, /*#__PURE__*/React.createElement(UserAvatar.UserAvatar, _rollupPluginBabelHelpers.extends({
+  }, /*#__PURE__*/React__default.createElement(UserAvatar.UserAvatar, _rollupPluginBabelHelpers.extends({
     size: "lg",
     name: name
-  }, rest)), /*#__PURE__*/React.createElement("div", {
+  }, rest)), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--profile-user-info__text-wrapper`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--profile-user-info__name`
-  }, name), /*#__PURE__*/React.createElement("div", {
+  }, name), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--profile-user-info__email`
   }, email)));
 });
@@ -96,24 +94,23 @@ ProfileUserInfo.propTypes = {
    */
   name: PropTypes.string.isRequired
 };
-const ProfileReadOnly = /*#__PURE__*/React.forwardRef(function ProfileReadOnly(_ref3) {
-  let {
-    className: customClassName,
-    items
-  } = _ref3;
+const ProfileReadOnly = /*#__PURE__*/React__default.forwardRef(function ProfileReadOnly({
+  className: customClassName,
+  items
+}) {
   const prefix = usePrefix.usePrefix();
-  const className = index.default({
+  const className = cx({
     [`${prefix}--profile-read-only`]: true,
     [customClassName]: !!customClassName
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: className
-  }, items?.map((item, index) => /*#__PURE__*/React.createElement("div", {
+  }, items?.map((item, index) => /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--profile-read-only__items`,
     key: index
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--profile-read-only__label`
-  }, item.label), /*#__PURE__*/React.createElement("div", {
+  }, item.label), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--profile-read-only__title`
   }, item.title))));
 });

package/lib/components/SharkFinIcon.js

@@ -7,36 +7,35 @@
 
 'use strict';
 
-var index = require('../_virtual/index.js');
+var cx = require('classnames');
 var PropTypes = require('prop-types');
-var React = require('react');
+var React__default = require('react');
 var usePrefix = require('../internal/usePrefix.js');
 
 var _g, _defs;
-const SharkFinIcon = _ref => {
-  let {
-    className: customClassName
-  } = _ref;
+const SharkFinIcon = ({
+  className: customClassName
+}) => {
   const prefix = usePrefix.usePrefix();
-  const className = index.default({
+  const className = cx({
     [`${prefix}--side-nav__icon`]: true,
     [`${prefix}--shark-fin__icon`]: true,
     [customClassName]: !!customClassName
   });
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React__default.createElement("svg", {
     className: className,
     width: "4",
     height: "4",
     viewBox: "0 0 4 4",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, _g || (_g = /*#__PURE__*/React.createElement("g", {
+  }, _g || (_g = /*#__PURE__*/React__default.createElement("g", {
     "clip-path": "url(#clip0_519_52879)"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, /*#__PURE__*/React__default.createElement("path", {
     d: "M2 2L4 0V4H0L2 2Z"
-  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+  }))), _defs || (_defs = /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
     id: "clip0_519_52879"
-  }, /*#__PURE__*/React.createElement("rect", {
+  }, /*#__PURE__*/React__default.createElement("rect", {
     width: "4",
     height: "4",
     fill: "white"