@spaced-out/ui-design-system 0.5.7-beta.3 → 0.5.7

package/lib/components/Modal/Modal.js

@@ -7,18 +7,18 @@ exports.ModalHeader = exports.ModalFooter = exports.ModalBody = exports.Modal =
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
 var _reactDom = require("react-dom");
-var _useMountTransition = _interopRequireDefault(require("src/hooks/useMountTransition"));
-var _motion = require("src/styles/variables/_motion");
-var _opacity = require("src/styles/variables/_opacity");
-var _space = require("src/styles/variables/_space");
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _helpers = require("src/utils/helpers");
-var _Button = require("src/components/Button/Button");
-var _Truncate = require("src/components/Truncate/Truncate");
-var _ModalModule = _interopRequireDefault(require("src/components/Modal/Modal.module.css"));
+var _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTransition"));
+var _motion = require("../../styles/variables/_motion");
+var _opacity = require("../../styles/variables/_opacity");
+var _space = require("../../styles/variables/_space");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _helpers = require("../../utils/helpers");
+var _Button = require("../Button/Button");
+var _Truncate = require("../Truncate/Truncate");
+var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-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); }
 const DEFAULT_MODAL_ANIMATION = {
   duration: {
     open: parseInt(_motion.motionDurationSlow),
@@ -44,16 +44,22 @@ const ModalHeader = _ref => {
     onCloseButtonClick,
     className
   } = _ref;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_ModalModule.default.modalHeader, className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _ModalModule.default.headerContent
-  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)), !hideCloseBtn && /*#__PURE__*/React.createElement(_Button.Button, {
-    iconLeftName: "xmark",
-    type: "ghost",
-    onClick: onCloseButtonClick,
-    ariaLabel: "Close Button"
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classify.default)(_ModalModule.default.modalHeader, className),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _ModalModule.default.headerContent,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
+          children: children
+        })
+      }), !hideCloseBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+        iconLeftName: "xmark",
+        type: "ghost",
+        onClick: onCloseButtonClick,
+        ariaLabel: "Close Button"
+      })]
+    })
+  });
 };
 exports.ModalHeader = ModalHeader;
 const ModalBody = _ref2 => {
@@ -61,9 +67,10 @@ const ModalBody = _ref2 => {
     children,
     className
   } = _ref2;
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_ModalModule.default.modalBody, className)
-  }, children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classify.default)(_ModalModule.default.modalBody, className),
+    children: children
+  });
 };
 exports.ModalBody = ModalBody;
 const ModalFooter = _ref3 => {
@@ -71,11 +78,15 @@ const ModalFooter = _ref3 => {
     children,
     classNames
   } = _ref3;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_ModalModule.default.modalFooter, classNames?.wrapper)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_ModalModule.default.modalFooterActions, classNames?.actions)
-  }, children)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.default)(_ModalModule.default.modalFooter, classNames?.wrapper),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.default)(_ModalModule.default.modalFooterActions, classNames?.actions),
+        children: children
+      })
+    })
+  });
 };
 exports.ModalFooter = ModalFooter;
 const createPortalRoot = id => {
@@ -212,37 +223,40 @@ const Modal = _ref4 => {
       onClose(e);
     }
   };
-  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
+  return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingFocusManager, {
     context: context,
-    initialFocus: initialFocus
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: refs.setFloating,
-    "aria-hidden": isOpen ? 'false' : 'true',
-    className: (0, _classify.default)(_ModalModule.default.modalContainer, {
-      [_ModalModule.default.in]: isTransitioning,
-      [_ModalModule.default.open]: isOpen
-    }, classNames?.container)
-  }, !allowBackgroundInteraction && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_ModalModule.default.backdrop, {
-      [_ModalModule.default.darkBackdrop]: !hideBackdrop
-    }, classNames?.backdrop),
-    onClick: onBackdropClick,
-    style: {
-      opacity: styles?.opacity,
-      transition: styles?.transition
-    }
-  }), isMounted && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_ModalModule.default.modal, {
-      [_ModalModule.default.small]: size === 'small',
-      [_ModalModule.default.medium]: size === 'medium',
-      [_ModalModule.default.large]: size === 'large'
-    }, classNames?.content),
-    role: "dialog",
-    style: {
-      // Transition styles
-      ...styles
-    }
-  }, children))), portalRootRef.current);
+    initialFocus: initialFocus,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: refs.setFloating,
+      "aria-hidden": isOpen ? 'false' : 'true',
+      className: (0, _classify.default)(_ModalModule.default.modalContainer, {
+        [_ModalModule.default.in]: isTransitioning,
+        [_ModalModule.default.open]: isOpen
+      }, classNames?.container),
+      children: [!allowBackgroundInteraction && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.default)(_ModalModule.default.backdrop, {
+          [_ModalModule.default.darkBackdrop]: !hideBackdrop
+        }, classNames?.backdrop),
+        onClick: onBackdropClick,
+        style: {
+          opacity: styles?.opacity,
+          transition: styles?.transition
+        }
+      }), isMounted && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.default)(_ModalModule.default.modal, {
+          [_ModalModule.default.small]: size === 'small',
+          [_ModalModule.default.medium]: size === 'medium',
+          [_ModalModule.default.large]: size === 'large'
+        }, classNames?.content),
+        role: "dialog",
+        style: {
+          // Transition styles
+          ...styles
+        },
+        children: children
+      })]
+    })
+  }), portalRootRef.current);
 };
 
 // FullScreen modal that just calls the Modal component with a wrapper className set which sets the width and height to sizeFluid
@@ -252,11 +266,12 @@ const FullScreenModal = _ref5 => {
     classNames,
     ...props
   } = _ref5;
-  return /*#__PURE__*/React.createElement(Modal, _extends({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Modal, {
     classNames: {
       ...classNames,
       content: (0, _classify.default)(_ModalModule.default.fullscreenModalContainer, classNames?.content)
-    }
-  }, props));
+    },
+    ...props
+  });
 };
 exports.FullScreenModal = FullScreenModal;

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

@@ -1,3 +1,3 @@
-export type { BaseModalProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, } from 'src/components/Modal/Modal';
-export { FullScreenModal, Modal, ModalBody, ModalFooter, ModalHeader, } from 'src/components/Modal/Modal';
+export type { BaseModalProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, } from '../../components/Modal/Modal';
+export { FullScreenModal, Modal, ModalBody, ModalFooter, ModalHeader, } from '../../components/Modal/Modal';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Modal/index.js

@@ -33,4 +33,4 @@ Object.defineProperty(exports, "ModalHeader", {
     return _Modal.ModalHeader;
   }
 });
-var _Modal = require("src/components/Modal/Modal");
+var _Modal = require("./Modal");

package/lib/components/Notification/Notification.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Flow } from 'flow-to-typescript-codemod';
-import type { IconType } from 'src/components/Icon';
+import type { IconType } from '../../components/Icon';
 export declare const NOTIFICATION_SEMANTIC: Readonly<{
     success: "success";
     information: "information";

package/lib/components/Notification/Notification.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Notification = exports.NOTIFICATION_SEMANTIC = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _typography = require("src/types/typography");
-var _classify = require("src/utils/classify");
-var _Icon = require("src/components/Icon");
-var _Text = require("src/components/Text");
-var _NotificationModule = _interopRequireDefault(require("src/components/Notification/Notification.module.css"));
+var _typography = require("../../types/typography");
+var _classify = require("../../utils/classify");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _NotificationModule = _interopRequireDefault(require("./Notification.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const NOTIFICATION_SEMANTIC = exports.NOTIFICATION_SEMANTIC = Object.freeze({
@@ -29,30 +30,32 @@ const BaseNotification = /*#__PURE__*/React.forwardRef((props, ref) => {
     children,
     onCloseClick
   } = props;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classify.classify)(_NotificationModule.default.baseContainer, {
       [_NotificationModule.default.success]: semantic === NOTIFICATION_SEMANTIC.success,
       [_NotificationModule.default.information]: semantic === NOTIFICATION_SEMANTIC.information,
       [_NotificationModule.default.danger]: semantic === NOTIFICATION_SEMANTIC.danger,
       [_NotificationModule.default.dismissable]: dismissable
     }, classNames?.wrapper),
-    ref: ref
-  }, iconLeftName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
-    name: iconLeftName,
-    color: _typography.TEXT_COLORS.inversePrimary,
-    size: "small",
-    type: iconLeftType
-  }) : null, /*#__PURE__*/React.createElement(_Text.SubTitleSmall, {
-    className: (0, _classify.classify)(classNames?.text),
-    color: _typography.TEXT_COLORS.inversePrimary
-  }, children), dismissable && /*#__PURE__*/React.createElement(_Icon.Icon, {
-    color: _typography.TEXT_COLORS.inversePrimary,
-    name: "close",
-    size: "small",
-    type: "regular",
-    onClick: onCloseClick,
-    className: _NotificationModule.default.closeIcon
-  }));
+    ref: ref,
+    children: [iconLeftName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+      name: iconLeftName,
+      color: _typography.TEXT_COLORS.inversePrimary,
+      size: "small",
+      type: iconLeftType
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleSmall, {
+      className: (0, _classify.classify)(classNames?.text),
+      color: _typography.TEXT_COLORS.inversePrimary,
+      children: children
+    }), dismissable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+      color: _typography.TEXT_COLORS.inversePrimary,
+      name: "close",
+      size: "small",
+      type: "regular",
+      onClick: onCloseClick,
+      className: _NotificationModule.default.closeIcon
+    })]
+  });
 });
 const Notification = exports.Notification = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -74,13 +77,16 @@ const Notification = exports.Notification = /*#__PURE__*/React.forwardRef((props
       setDismissed(true);
     }
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !dismissed && /*#__PURE__*/React.createElement(BaseNotification, {
-    classNames: classNames,
-    iconLeftName: iconLeftName,
-    iconLeftType: iconLeftType,
-    semantic: semantic,
-    dismissable: dismissable,
-    onCloseClick: closeClickHandler,
-    ref: ref
-  }, children));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: !dismissed && /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseNotification, {
+      classNames: classNames,
+      iconLeftName: iconLeftName,
+      iconLeftType: iconLeftType,
+      semantic: semantic,
+      dismissable: dismissable,
+      onCloseClick: closeClickHandler,
+      ref: ref,
+      children: children
+    })
+  });
 });

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

@@ -1,2 +1,2 @@
-export { Notification, NOTIFICATION_SEMANTIC, } from 'src/components/Notification/Notification';
+export { Notification, NOTIFICATION_SEMANTIC, } from '../../components/Notification/Notification';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Notification/index.js

@@ -15,4 +15,4 @@ Object.defineProperty(exports, "Notification", {
     return _Notification.Notification;
   }
 });
-var _Notification = require("src/components/Notification/Notification");
+var _Notification = require("./Notification");

package/lib/components/OptionButton/OptionButton.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import type { Flow } from 'flow-to-typescript-codemod';
-import type { ClickAwayRefType } from 'src/utils/click-away';
-import type { ButtonProps } from 'src/components/Button';
-import type { AnchorType } from 'src/components/ButtonDropdown';
-import type { MenuOption, MenuProps } from 'src/components/Menu';
-import type { BaseTooltipProps } from 'src/components/Tooltip';
+import type { ClickAwayRefType } from '../../utils/click-away';
+import type { ButtonProps } from '../../components/Button';
+import type { AnchorType } from '../../components/ButtonDropdown';
+import type { MenuOption, MenuProps } from '../../components/Menu';
+import type { BaseTooltipProps } from '../../components/Tooltip';
 type ClassNames = Readonly<{
     wrapper?: string;
     baseButtonWrapper?: string;

package/lib/components/OptionButton/OptionButton.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.OptionButton = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _Button = require("src/components/Button");
-var _ButtonDropdown = require("src/components/ButtonDropdown");
-var _ConditionalWrapper = require("src/components/ConditionalWrapper");
-var _Tooltip = require("src/components/Tooltip");
-var _OptionButtonModule = _interopRequireDefault(require("src/components/OptionButton/OptionButton.module.css"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _ButtonDropdown = require("../ButtonDropdown");
+var _ConditionalWrapper = require("../ConditionalWrapper");
+var _Tooltip = require("../Tooltip");
+var _OptionButtonModule = _interopRequireDefault(require("./OptionButton.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-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); }
 const OptionButton = exports.OptionButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
@@ -38,56 +38,61 @@ const OptionButton = exports.OptionButton = /*#__PURE__*/React.forwardRef((_ref,
   } = _ref;
   const [iconName, setIconName] = React.useState('chevron-down');
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classify.default)(_OptionButtonModule.default.container, {
       [_OptionButtonModule.default.isFluid]: isFluid
     }, classNames?.wrapper),
-    ref: ref
-  }, /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
-    condition: Boolean(tooltip?.baseButton),
-    wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, tooltip?.baseButton, {
-      hidden: isMenuOpen ? true : tooltip?.optionsButton?.hidden
-    }), children)
-  }, /*#__PURE__*/React.createElement(_Button.Button, {
-    iconLeftName: iconLeftName,
-    iconLeftType: iconLeftType,
-    onClick: onButtonClick,
-    size: size,
-    type: type,
-    disabled: disabled,
-    isFluid: isFluid,
-    ariaLabel: ariaLabel,
-    actionType: actionType,
-    isLoading: isLoading,
-    classNames: {
-      wrapper: (0, _classify.default)(_OptionButtonModule.default.leftButton, classNames?.baseButtonWrapper),
-      icon: classNames?.baseButtonIcon
-    }
-  }, children)), /*#__PURE__*/React.createElement(_ButtonDropdown.ButtonDropdown, {
-    anchorPosition: anchorPosition,
-    ariaLabel: ariaLabel,
-    iconLeftName: iconName,
-    tooltip: tooltip?.optionsButton,
-    classNames: {
-      buttonWrapper: (0, _classify.default)(_OptionButtonModule.default.rightButton, classNames?.optionsButtonWrapper),
-      dropdownContainer: (0, _classify.default)(_OptionButtonModule.default.dropDownContainer, classNames?.dropdownContainer),
-      buttonIcon: classNames?.optionsButtonIcon
-    },
-    type: type,
-    disabled: disabled,
-    menu: menu,
-    onMenuClose: () => {
-      setIconName('chevron-down');
-      setIsMenuOpen(false);
-      onMenuOpen?.();
-    },
-    onMenuOpen: () => {
-      setIconName('chevron-up');
-      setIsMenuOpen(true);
-      onMenuClose?.();
-    },
-    onOptionSelect: onOptionSelect,
-    size: size,
-    clickAwayRef: clickAwayRef
-  }));
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
+      condition: Boolean(tooltip?.baseButton),
+      wrapper: children => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+        ...tooltip?.baseButton,
+        hidden: isMenuOpen ? true : tooltip?.optionsButton?.hidden,
+        children: children
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+        iconLeftName: iconLeftName,
+        iconLeftType: iconLeftType,
+        onClick: onButtonClick,
+        size: size,
+        type: type,
+        disabled: disabled,
+        isFluid: isFluid,
+        ariaLabel: ariaLabel,
+        actionType: actionType,
+        isLoading: isLoading,
+        classNames: {
+          wrapper: (0, _classify.default)(_OptionButtonModule.default.leftButton, classNames?.baseButtonWrapper),
+          icon: classNames?.baseButtonIcon
+        },
+        children: children
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonDropdown.ButtonDropdown, {
+      anchorPosition: anchorPosition,
+      ariaLabel: ariaLabel,
+      iconLeftName: iconName,
+      tooltip: tooltip?.optionsButton,
+      classNames: {
+        buttonWrapper: (0, _classify.default)(_OptionButtonModule.default.rightButton, classNames?.optionsButtonWrapper),
+        dropdownContainer: (0, _classify.default)(_OptionButtonModule.default.dropDownContainer, classNames?.dropdownContainer),
+        buttonIcon: classNames?.optionsButtonIcon
+      },
+      type: type,
+      disabled: disabled,
+      menu: menu,
+      onMenuClose: () => {
+        setIconName('chevron-down');
+        setIsMenuOpen(false);
+        onMenuOpen?.();
+      },
+      onMenuOpen: () => {
+        setIconName('chevron-up');
+        setIsMenuOpen(true);
+        onMenuClose?.();
+      },
+      onOptionSelect: onOptionSelect,
+      size: size,
+      clickAwayRef: clickAwayRef
+    })]
+  });
 });

package/lib/components/OptionButton/SimpleOptionButton.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import type { Flow } from 'flow-to-typescript-codemod';
-import type { MenuClassNames, MenuLabelTooltip } from 'src/types/menu';
-import type { ClickAwayRefType } from 'src/utils/click-away';
-import type { ButtonProps } from 'src/components/Button';
-import type { AnchorType } from 'src/components/ButtonDropdown';
-import type { MenuOption, MenuOptionsVariant, Virtualization } from 'src/components/Menu';
-import type { OptionButtonTooltipProps } from 'src/components/OptionButton/OptionButton';
+import type { MenuClassNames, MenuLabelTooltip } from '../../types/menu';
+import type { ClickAwayRefType } from '../../utils/click-away';
+import type { ButtonProps } from '../../components/Button';
+import type { AnchorType } from '../../components/ButtonDropdown';
+import type { MenuOption, MenuOptionsVariant, Virtualization } from '../../components/Menu';
+import type { OptionButtonTooltipProps } from '../../components/OptionButton/OptionButton';
 type ClassNames = Readonly<{
     wrapper?: string;
     baseButtonWrapper?: string;

package/lib/components/OptionButton/SimpleOptionButton.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SimpleOptionButton = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _menu = require("src/utils/menu");
-var _OptionButton = require("src/components/OptionButton/OptionButton");
+var _menu = require("../../utils/menu");
+var _OptionButton = require("./OptionButton");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-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); }
 const SimpleOptionButtonBase = (props, ref) => {
   const {
     size = 'small',
@@ -56,7 +56,8 @@ const SimpleOptionButtonBase = (props, ref) => {
   React.useImperativeHandle(ref, () => ({
     selectedKeys: optionButtonSelectedKeys
   }));
-  return /*#__PURE__*/React.createElement(_OptionButton.OptionButton, _extends({}, buttonProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionButton.OptionButton, {
+    ...buttonProps,
     tooltip: tooltip,
     onButtonClick: onButtonClick,
     anchorPosition: anchorPosition,
@@ -81,7 +82,8 @@ const SimpleOptionButtonBase = (props, ref) => {
       classNames: menuClassNames,
       showLabelTooltip,
       allowWrap
-    }
-  }), children);
+    },
+    children: children
+  });
 };
 const SimpleOptionButton = exports.SimpleOptionButton = /*#__PURE__*/React.forwardRef(SimpleOptionButtonBase);

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

@@ -1,3 +1,3 @@
-export * from 'src/components/OptionButton/OptionButton';
-export * from 'src/components/OptionButton/SimpleOptionButton';
+export * from '../../components/OptionButton/OptionButton';
+export * from '../../components/OptionButton/SimpleOptionButton';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/OptionButton/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _OptionButton = require("src/components/OptionButton/OptionButton");
+var _OptionButton = require("./OptionButton");
 Object.keys(_OptionButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _OptionButton[key]) return;
@@ -14,7 +14,7 @@ Object.keys(_OptionButton).forEach(function (key) {
     }
   });
 });
-var _SimpleOptionButton = require("src/components/OptionButton/SimpleOptionButton");
+var _SimpleOptionButton = require("./SimpleOptionButton");
 Object.keys(_SimpleOptionButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _SimpleOptionButton[key]) return;