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

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -6,20 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.InlineDropdown = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
-var _hooks = require("src/hooks");
-var _space = require("src/styles/variables/_space");
-var _classify = require("src/utils/classify");
-var _clickAway = require("src/utils/click-away");
-var _mergeRefs = require("src/utils/merge-refs");
-var _Button = require("src/components/Button");
-var _Icon = require("src/components/Icon");
-var _Menu = require("src/components/Menu");
-var _Tooltip = require("src/components/Tooltip");
-var _Truncate = require("src/components/Truncate");
-var _InlineDropdownModule = _interopRequireDefault(require("src/components/InlineDropdown/InlineDropdown.module.css"));
+var _hooks = require("../../hooks");
+var _space = require("../../styles/variables/_space");
+var _classify = require("../../utils/classify");
+var _clickAway = require("../../utils/click-away");
+var _mergeRefs = require("../../utils/merge-refs");
+var _Button = require("../Button");
+var _Icon = require("../Icon");
+var _Menu = require("../Menu");
+var _Tooltip = require("../Tooltip");
+var _Truncate = require("../Truncate");
+var _InlineDropdownModule = _interopRequireDefault(require("./InlineDropdown.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 InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     anchorPosition = 'bottom-start',
@@ -56,71 +56,82 @@ const InlineDropdown = exports.InlineDropdown = /*#__PURE__*/React.forwardRef((_
       onMenuClose?.();
     }
   };
-  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickAway.ClickAway, {
     onChange: onMenuToggle,
-    clickAwayRef: clickAwayRef
-  }, _ref2 => {
-    let {
-      isOpen,
-      onOpen,
-      clickAway,
-      boundaryRef,
-      triggerRef
-    } = _ref2;
-    return /*#__PURE__*/React.createElement("div", {
-      "data-testid": "InlineDropdown",
-      className: (0, _classify.classify)(_InlineDropdownModule.default.inlineDropdownContainer, classNames?.dropdownContainer),
-      ref: ref
-    }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
-      disabled: disabled,
-      ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
-      onClick: e => {
-        e.stopPropagation();
-        onOpen();
-      },
-      className: (0, _classify.classify)(_InlineDropdownModule.default.inlineButton, {
-        [_InlineDropdownModule.default.disabled]: disabled
-      }, _InlineDropdownModule.default[size], classNames?.buttonWrapper)
-    }), /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children), /*#__PURE__*/React.createElement(_Icon.Icon, {
-      name: isOpen ? 'caret-up' : 'caret-down',
-      size: "small",
-      type: "solid",
-      className: (0, _classify.classify)({
-        [_InlineDropdownModule.default.disabled]: disabled
-      })
-    })), isOpen && menu && /*#__PURE__*/React.createElement(_react2.FloatingPortal, null, /*#__PURE__*/React.createElement(_react2.FloatingFocusManager, {
-      modal: false,
-      context: context,
-      initialFocus: triggerRef
-    }, /*#__PURE__*/React.createElement("div", {
-      className: _InlineDropdownModule.default.menuWrapper,
-      ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
-      style: {
-        display: 'flex',
-        position: strategy,
-        top: y ?? _space.spaceNone,
-        left: x ?? _space.spaceNone,
-        /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
-        so its parent is effectively the <body> element. This means the menu
-        would otherwise default to the body's width. To support fluid width,
-        we must manually set the dropdown width here; otherwise, it uses a fixed width.
-        Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */
-        ...(menu.isFluid !== false && {
-          '--dropdown-width': dropdownWidth
-        }),
-        '--menu-elevation': (0, _Tooltip.getElevationValue)(elevation)
-      }
-    }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
-      onSelect: (option, e) => {
-        onOptionSelect?.(option, e);
-        if (
-        // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
-        !option.keepMenuOpenOnOptionSelect && (!menu.optionsVariant || menu.optionsVariant === 'normal')) {
-          clickAway();
-        }
-      },
-      size: menu.size || 'medium',
-      onTabOut: clickAway
-    }))))));
+    clickAwayRef: clickAwayRef,
+    children: _ref2 => {
+      let {
+        isOpen,
+        onOpen,
+        clickAway,
+        boundaryRef,
+        triggerRef
+      } = _ref2;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        "data-testid": "InlineDropdown",
+        className: (0, _classify.classify)(_InlineDropdownModule.default.inlineDropdownContainer, classNames?.dropdownContainer),
+        ref: ref,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.UnstyledButton, {
+          ...restButtonProps,
+          disabled: disabled,
+          ref: (0, _mergeRefs.mergeRefs)([refs.setReference, triggerRef]),
+          onClick: e => {
+            e.stopPropagation();
+            onOpen();
+          },
+          className: (0, _classify.classify)(_InlineDropdownModule.default.inlineButton, {
+            [_InlineDropdownModule.default.disabled]: disabled
+          }, _InlineDropdownModule.default[size], classNames?.buttonWrapper),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
+            children: children
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            name: isOpen ? 'caret-up' : 'caret-down',
+            size: "small",
+            type: "solid",
+            className: (0, _classify.classify)({
+              [_InlineDropdownModule.default.disabled]: disabled
+            })
+          })]
+        }), isOpen && menu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingPortal, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingFocusManager, {
+            modal: false,
+            context: context,
+            initialFocus: triggerRef,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: _InlineDropdownModule.default.menuWrapper,
+              ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
+              style: {
+                display: 'flex',
+                position: strategy,
+                top: y ?? _space.spaceNone,
+                left: x ?? _space.spaceNone,
+                /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
+                so its parent is effectively the <body> element. This means the menu
+                would otherwise default to the body's width. To support fluid width,
+                we must manually set the dropdown width here; otherwise, it uses a fixed width.
+                Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */
+                ...(menu.isFluid !== false && {
+                  '--dropdown-width': dropdownWidth
+                }),
+                '--menu-elevation': (0, _Tooltip.getElevationValue)(elevation)
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.Menu, {
+                ...menu,
+                onSelect: (option, e) => {
+                  onOptionSelect?.(option, e);
+                  if (
+                  // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
+                  !option.keepMenuOpenOnOptionSelect && (!menu.optionsVariant || menu.optionsVariant === 'normal')) {
+                    clickAway();
+                  }
+                },
+                size: menu.size || 'medium',
+                onTabOut: clickAway
+              })
+            })
+          })
+        })]
+      });
+    }
   });
 });

package/lib/components/InlineDropdown/SimpleInlineDropdown.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 { ElevationType } from 'src/components/Tooltip';
+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 { ElevationType } from '../../components/Tooltip';
 type ClassNames = Readonly<{
     buttonWrapper?: string;
     dropdownContainer?: string;

package/lib/components/InlineDropdown/SimpleInlineDropdown.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SimpleInlineDropdown = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _menu = require("src/utils/menu");
-var _InlineDropdown = require("src/components/InlineDropdown/InlineDropdown");
+var _menu = require("../../utils/menu");
+var _InlineDropdown = require("./InlineDropdown");
+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 SimpleInlineDropdownBase = (props, ref) => {
   const {
     size = 'medium',
@@ -60,7 +60,8 @@ const SimpleInlineDropdownBase = (props, ref) => {
   React.useImperativeHandle(ref, () => ({
     selectedKeys: inlineDropdownSelectedKeys
   }));
-  return /*#__PURE__*/React.createElement(_InlineDropdown.InlineDropdown, _extends({}, buttonProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlineDropdown.InlineDropdown, {
+    ...buttonProps,
     type: "button",
     anchorPosition: anchorPosition,
     classNames: classNames,
@@ -85,7 +86,8 @@ const SimpleInlineDropdownBase = (props, ref) => {
       classNames: menuClassNames,
       showLabelTooltip,
       allowWrap
-    }
-  }), optionsVariant === 'checkbox' ? btnText : children);
+    },
+    children: optionsVariant === 'checkbox' ? btnText : children
+  });
 };
 const SimpleInlineDropdown = exports.SimpleInlineDropdown = /*#__PURE__*/React.forwardRef(SimpleInlineDropdownBase);

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

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

package/lib/components/InlineDropdown/index.js

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

package/lib/components/Input/Input.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';
 type ClassNames = Readonly<{
     box?: string;
     iconLeft?: string;

package/lib/components/Input/Input.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Input = exports.INPUT_TYPES = exports.EXPONENT_CHARACTER_LIST = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classify = require("src/utils/classify");
-var _Icon = require("src/components/Icon");
-var _Text = require("src/components/Text");
-var _InputModule = _interopRequireDefault(require("src/components/Input/Input.module.css"));
+var _classify = require("../../utils/classify");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _InputModule = _interopRequireDefault(require("./Input.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 EXPONENT_CHARACTER_LIST = exports.EXPONENT_CHARACTER_LIST = ['E', 'e'];
 const INPUT_TYPES = exports.INPUT_TYPES = Object.freeze({
   text: 'text',
@@ -79,70 +79,81 @@ const Input_ = (props, ref) => {
     }
     onKeyDown?.(e);
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classify.classify)(_InputModule.default.wrapper, {
       [_InputModule.default.filled]: controlledInputFilled ?? false,
       [_InputModule.default.withError]: error ?? false
-    }, classNames?.wrapper)
-  }, Boolean(label) && /*#__PURE__*/React.createElement("div", {
-    className: _InputModule.default.info
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _InputModule.default.infoContent
-  }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
-    color: "secondary"
-  }, label ?? ''), "\xA0", required && /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
-    color: "danger"
-  }, '*'))), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.classify)(_InputModule.default.box, {
-      [_InputModule.default.inputDisabled]: disabled ?? false,
-      [_InputModule.default.medium]: size === 'medium',
-      [_InputModule.default.small]: size === 'small',
-      [_InputModule.default.locked]: locked,
-      [_InputModule.default.color]: type === 'color',
-      [_InputModule.default.hideNumberSpinner]: hideNumberSpinner
-    }, classNames?.box),
-    onClick: !(disabled || locked) ? onContainerClick : undefined,
-    ref: boxRef
-  }, iconLeftName && /*#__PURE__*/React.createElement(_Icon.Icon, {
-    className: (0, _classify.classify)(classNames?.iconLeft),
-    name: iconLeftName,
-    color: disabled ? 'disabled' : 'secondary',
-    size: "small",
-    type: iconLeftType
-  }), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
-    disabled: locked || disabled,
-    name: name,
-    ref: ref,
-    placeholder: placeholder,
-    value: value,
-    onChange: onChange,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    type: showPassword ? 'text' : type,
-    readOnly: readOnly,
-    onKeyDown: handleKeyDown
-  })), type === 'color' && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.classify)(_InputModule.default.colorText, _InputModule.default[size], {
-      [_InputModule.default.hasValue]: value
-    })
-  }, value ? value : placeholder), /*#__PURE__*/React.createElement(RightInputIcon, {
-    isEmail: type === 'email',
-    isPassword: type === 'password',
-    showPassword: showPassword,
-    showPasswordToggleIcon: !hidePasswordToggleIcon,
-    isLocked: locked,
-    isDisabled: disabled,
-    onClick: handleRightIconClick,
-    iconRightName: iconRightName,
-    iconRightType: iconRightType,
-    className: classNames?.iconRight
-  })), (Boolean(helperText) || error) && /*#__PURE__*/React.createElement("div", {
-    className: _InputModule.default.info
-  }, error && errorText ? /*#__PURE__*/React.createElement(_Text.BodySmall, {
-    color: "danger"
-  }, errorText) : typeof helperText === 'string' ? /*#__PURE__*/React.createElement(_Text.BodySmall, {
-    color: disabled ? 'disabled' : 'secondary'
-  }, helperText) : helperText));
+    }, classNames?.wrapper),
+    children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _InputModule.default.info,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _InputModule.default.infoContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
+          color: "secondary",
+          children: label ?? ''
+        }), "\xA0", required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
+          color: "danger",
+          children: '*'
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classify.classify)(_InputModule.default.box, {
+        [_InputModule.default.inputDisabled]: disabled ?? false,
+        [_InputModule.default.medium]: size === 'medium',
+        [_InputModule.default.small]: size === 'small',
+        [_InputModule.default.locked]: locked,
+        [_InputModule.default.color]: type === 'color',
+        [_InputModule.default.hideNumberSpinner]: hideNumberSpinner
+      }, classNames?.box),
+      onClick: !(disabled || locked) ? onContainerClick : undefined,
+      ref: boxRef,
+      children: [iconLeftName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+        className: (0, _classify.classify)(classNames?.iconLeft),
+        name: iconLeftName,
+        color: disabled ? 'disabled' : 'secondary',
+        size: "small",
+        type: iconLeftType
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        ...inputProps,
+        disabled: locked || disabled,
+        name: name,
+        ref: ref,
+        placeholder: placeholder,
+        value: value,
+        onChange: onChange,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        type: showPassword ? 'text' : type,
+        readOnly: readOnly,
+        onKeyDown: handleKeyDown
+      }), type === 'color' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.classify)(_InputModule.default.colorText, _InputModule.default[size], {
+          [_InputModule.default.hasValue]: value
+        }),
+        children: value ? value : placeholder
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RightInputIcon, {
+        isEmail: type === 'email',
+        isPassword: type === 'password',
+        showPassword: showPassword,
+        showPasswordToggleIcon: !hidePasswordToggleIcon,
+        isLocked: locked,
+        isDisabled: disabled,
+        onClick: handleRightIconClick,
+        iconRightName: iconRightName,
+        iconRightType: iconRightType,
+        className: classNames?.iconRight
+      })]
+    }), (Boolean(helperText) || error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _InputModule.default.info,
+      children: error && errorText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
+        color: "danger",
+        children: errorText
+      }) : typeof helperText === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
+        color: disabled ? 'disabled' : 'secondary',
+        children: helperText
+      }) : helperText
+    })]
+  });
 };
 const RightInputIcon = _ref => {
   let {
@@ -157,40 +168,43 @@ const RightInputIcon = _ref => {
     ...rightIconProps
   } = _ref;
   if (isLocked) {
-    return /*#__PURE__*/React.createElement(_Icon.Icon, _extends({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
       name: "lock",
       color: isDisabled ? 'disabled' : 'secondary',
-      size: "small"
-    }, rightIconProps));
+      size: "small",
+      ...rightIconProps
+    });
   }
   if (isEmail) {
-    return /*#__PURE__*/React.createElement(_Icon.Icon, _extends({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
       name: "at",
       color: isDisabled ? 'disabled' : 'secondary',
       size: "small",
-      type: iconRightType
-    }, rightIconProps));
+      type: iconRightType,
+      ...rightIconProps
+    });
   }
   if (isPassword && showPasswordToggleIcon) {
-    return /*#__PURE__*/React.createElement(_Icon.Icon, _extends({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
       name: showPassword ? 'eye-slash' : 'eye',
       color: isDisabled ? 'disabled' : 'secondary',
       size: "small",
-      type: iconRightType
-    }, rightIconProps, {
+      type: iconRightType,
+      ...rightIconProps,
       className: (0, _classify.classify)(_InputModule.default.rightClickableIcon, {
         [_InputModule.default.disabled]: isDisabled || isLocked
       })
-    }));
+    });
   }
   if (iconRightName) {
-    return /*#__PURE__*/React.createElement(_Icon.Icon, _extends({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
       name: iconRightName || '',
       color: isDisabled ? 'disabled' : 'secondary',
       size: "small",
-      type: iconRightType
-    }, rightIconProps));
+      type: iconRightType,
+      ...rightIconProps
+    });
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
 };
 const Input = exports.Input = /*#__PURE__*/React.forwardRef(Input_);

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

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

package/lib/components/Input/index.js

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

package/lib/components/KPIBox/KPIBox.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Flow } from 'flow-to-typescript-codemod';
-import type { AlertSemanticType } from 'src/types/common';
-import type { IconSize, IconType } from 'src/components/Icon';
+import type { AlertSemanticType } from '../../types/common';
+import type { IconSize, IconType } from '../../components/Icon';
 type ClassNames = Readonly<{
     wrapper?: string;
     topFoldContent?: string;

package/lib/components/KPIBox/KPIBox.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.KPIBox = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _classify = _interopRequireDefault(require("src/utils/classify"));
-var _Icon = require("src/components/Icon");
-var _KPIBoxModule = _interopRequireDefault(require("src/components/KPIBox/KPIBox.module.css"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _KPIBoxModule = _interopRequireDefault(require("./KPIBox.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 KPIBox = exports.KPIBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
@@ -23,22 +23,28 @@ const KPIBox = exports.KPIBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     iconType = 'solid',
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ...props,
     ref: ref,
     "data-testid": "KPIBox",
-    className: (0, _classify.default)(_KPIBoxModule.default.wrapper, classNames?.wrapper)
-  }), !!iconName && /*#__PURE__*/React.createElement(_Icon.SemanticIcon, {
-    semantic: semantic,
-    name: iconName,
-    size: iconSize,
-    type: iconType
-  }), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_KPIBoxModule.default.textContainer, classNames?.textContainer)
-  }, !!topContent && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_KPIBoxModule.default.topFoldContent, classNames?.topFoldContent)
-  }, topContent), !!middleContent && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_KPIBoxModule.default.middleFoldContent, classNames?.middleFoldContent)
-  }, middleContent), !!bottomContent && /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_KPIBoxModule.default.bottomFoldContent, classNames?.bottomFoldContent)
-  }, bottomContent)));
+    className: (0, _classify.default)(_KPIBoxModule.default.wrapper, classNames?.wrapper),
+    children: [!!iconName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.SemanticIcon, {
+      semantic: semantic,
+      name: iconName,
+      size: iconSize,
+      type: iconType
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classify.default)(_KPIBoxModule.default.textContainer, classNames?.textContainer),
+      children: [!!topContent && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.default)(_KPIBoxModule.default.topFoldContent, classNames?.topFoldContent),
+        children: topContent
+      }), !!middleContent && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.default)(_KPIBoxModule.default.middleFoldContent, classNames?.middleFoldContent),
+        children: middleContent
+      }), !!bottomContent && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classify.default)(_KPIBoxModule.default.bottomFoldContent, classNames?.bottomFoldContent),
+        children: bottomContent
+      })]
+    })]
+  });
 });

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

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

package/lib/components/KPIBox/index.js

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