@spaced-out/ui-design-system 0.0.1-alpha.0 → 0.0.1-beta.0

package/lib/components/Input/Input.js

@@ -9,11 +9,10 @@ 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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const Input_ = (props, ref) => {
   const {
     value,
@@ -53,69 +52,60 @@ const Input_ = (props, ref) => {
     }
     onIconRightClick && onIconRightClick(e);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_InputModule.default.wrapper, {
       [_InputModule.default.filled]: controlledInputFilled ?? false,
       [_InputModule.default.withError]: error ?? false
+    })
+  }, 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, classNames?.box, {
+      [_InputModule.default.inputDisabled]: disabled ?? false,
+      [_InputModule.default.medium]: size === 'medium',
+      [_InputModule.default.small]: size === 'small',
+      [_InputModule.default.locked]: locked
     }),
-    children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.js)("div", {
-      className: _InputModule.default.info,
-      children: /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
-        className: _InputModule.default.infoContent,
-        children: [/*#__PURE__*/(0, _jsxRuntime.js)(_Text.FormLabelSmall, {
-          color: "secondary",
-          children: label ?? ''
-        }), "\xA0", required && /*#__PURE__*/(0, _jsxRuntime.js)(_Text.FormLabelSmall, {
-          color: "danger",
-          children: '*'
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
-      className: (0, _classify.classify)(_InputModule.default.box, classNames?.box, {
-        [_InputModule.default.inputDisabled]: disabled ?? false,
-        [_InputModule.default.medium]: size === 'medium',
-        [_InputModule.default.small]: size === 'small',
-        [_InputModule.default.locked]: locked
-      }),
-      onClick: !(disabled || locked) ? onContainerClick : null,
-      ref: boxRef,
-      children: [iconLeftName && /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
-        className: (0, _classify.classify)(classNames?.iconLeft),
-        name: iconLeftName,
-        color: disabled ? 'disabled' : 'secondary',
-        size: "small",
-        type: iconLeftType
-      }), /*#__PURE__*/(0, _jsxRuntime.js)("input", {
-        disabled: locked || disabled,
-        name: name,
-        ref: ref,
-        placeholder: placeholder,
-        value: value,
-        onChange: onChange,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        type: showPassword ? 'text' : type,
-        readOnly: readOnly && 'readOnly',
-        ...inputProps
-      }), /*#__PURE__*/(0, _jsxRuntime.js)(RightInputIcon, {
-        isEmail: type === 'email',
-        isPassword: type === 'password',
-        showPassword: showPassword,
-        isLocked: locked,
-        isDisabled: disabled,
-        onClick: handleRightIconClick,
-        iconRightName: iconRightName,
-        iconRightType: iconRightType,
-        className: classNames?.iconRight
-      })]
-    }), (Boolean(helperText) || error) && /*#__PURE__*/(0, _jsxRuntime.js)("div", {
-      className: _InputModule.default.info,
-      children: /*#__PURE__*/(0, _jsxRuntime.js)(_Text.BodySmall, {
-        color: error && errorText ? 'danger' : disabled ? 'disabled' : 'secondary',
-        children: error && errorText ? errorText : helperText ?? ''
-      })
-    })]
-  });
+    onClick: !(disabled || locked) ? onContainerClick : null,
+    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({
+    disabled: locked || disabled,
+    name: name,
+    ref: ref,
+    placeholder: placeholder,
+    value: value,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    type: showPassword ? 'text' : type,
+    readOnly: readOnly && 'readOnly'
+  }, inputProps)), /*#__PURE__*/React.createElement(RightInputIcon, {
+    isEmail: type === 'email',
+    isPassword: type === 'password',
+    showPassword: showPassword,
+    isLocked: locked,
+    isDisabled: disabled,
+    onClick: handleRightIconClick,
+    iconRightName: iconRightName,
+    iconRightType: iconRightType,
+    className: classNames?.iconRight
+  })), (Boolean(helperText) || error) && /*#__PURE__*/React.createElement("div", {
+    className: _InputModule.default.info
+  }, /*#__PURE__*/React.createElement(_Text.BodySmall, {
+    color: error && errorText ? 'danger' : disabled ? 'disabled' : 'secondary'
+  }, error && errorText ? errorText : helperText ?? '')));
 };
 const RightInputIcon = _ref => {
   let {
@@ -129,44 +119,41 @@ const RightInputIcon = _ref => {
     ...rightIconProps
   } = _ref;
   if (isLocked) {
-    return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+    return /*#__PURE__*/React.createElement(_Icon.Icon, _extends({
       name: "lock",
       color: isDisabled ? 'disabled' : 'secondary',
-      size: "small",
-      ...rightIconProps
-    });
+      size: "small"
+    }, rightIconProps));
   }
   if (isEmail) {
-    return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+    return /*#__PURE__*/React.createElement(_Icon.Icon, _extends({
       name: "at",
       color: isDisabled ? 'disabled' : 'secondary',
       size: "small",
-      type: iconRightType,
-      ...rightIconProps
-    });
+      type: iconRightType
+    }, rightIconProps));
   }
   if (isPassword) {
-    return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+    return /*#__PURE__*/React.createElement(_Icon.Icon, _extends({
       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__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+    return /*#__PURE__*/React.createElement(_Icon.Icon, _extends({
       name: iconRightName || '',
       color: isDisabled ? 'disabled' : 'secondary',
       size: "small",
-      type: iconRightType,
-      ...rightIconProps
-    });
+      type: iconRightType
+    }, rightIconProps));
   }
-  return /*#__PURE__*/(0, _jsxRuntime.js)(_jsxRuntime.Fragment, {});
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
 };
 const Input = /*#__PURE__*/React.forwardRef(Input_);
 exports.Input = Input;

package/lib/components/LinearLoader/LinearLoader.js

@@ -7,7 +7,6 @@ exports.LinearLoader = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _LinearLoaderModule = _interopRequireDefault(require("./LinearLoader.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -18,18 +17,17 @@ const LinearLoader = _ref => {
     size = 'medium',
     className
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_LinearLoaderModule.default.lineContainer, {
       [_LinearLoaderModule.default.large]: size === 'large',
       [_LinearLoaderModule.default.medium]: size === 'medium',
       [_LinearLoaderModule.default.small]: size === 'small'
-    }, className),
-    children: /*#__PURE__*/(0, _jsxRuntime.js)("div", {
-      className: _LinearLoaderModule.default.progressBar,
-      style: {
-        width: `${value + '%'}`
-      }
-    })
-  });
+    }, className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _LinearLoaderModule.default.progressBar,
+    style: {
+      width: `${value + '%'}`
+    }
+  }));
 };
 exports.LinearLoader = LinearLoader;

package/lib/components/Menu/Menu.js

@@ -9,7 +9,6 @@ var _classify = require("../../utils/classify");
 var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -25,7 +24,7 @@ const Menu = props => {
     menuDisabled,
     isFluid = true
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_MenuModule.default.menuCard, classNames?.wrapper, {
       [_MenuModule.default.fluid]: isFluid,
       [_MenuModule.default.medium]: size === 'medium',
@@ -33,44 +32,42 @@ const Menu = props => {
     }),
     style: {
       width
-    },
-    children: options.map(_ref => {
-      let {
+    }
+  }, options.map(_ref => {
+    let {
+      key,
+      label,
+      iconLeft,
+      iconRight,
+      disabled
+    } = _ref;
+    return /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
+      className: (0, _classify.classify)(_MenuModule.default.option, {
+        [_MenuModule.default.selected]: key === selectedOption?.key,
+        [_MenuModule.default.optionSmall]: size === 'small',
+        [_MenuModule.default.optionMedium]: size === 'medium',
+        [_MenuModule.default.disabled]: menuDisabled || disabled,
+        [_MenuModule.default.withIconLeft]: !!iconLeft,
+        [_MenuModule.default.withIconRight]: !!iconRight
+      }),
+      key: key,
+      disabled: menuDisabled || disabled,
+      onClick: () => onSelect && onSelect({
         key,
-        label,
-        iconLeft,
-        iconRight,
-        disabled
-      } = _ref;
-      return /*#__PURE__*/(0, _jsxRuntime.jss)(_Button.UnstyledButton, {
-        className: (0, _classify.classify)(_MenuModule.default.option, {
-          [_MenuModule.default.selected]: key === selectedOption?.key,
-          [_MenuModule.default.optionSmall]: size === 'small',
-          [_MenuModule.default.optionMedium]: size === 'medium',
-          [_MenuModule.default.disabled]: menuDisabled || disabled,
-          [_MenuModule.default.withIconLeft]: !!iconLeft,
-          [_MenuModule.default.withIconRight]: !!iconRight
-        }),
-        disabled: menuDisabled || disabled,
-        onClick: () => onSelect && onSelect({
-          key,
-          label
-        }),
-        autoFocus: selectedOption?.key === key,
-        children: [!!iconLeft && /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
-          name: iconLeft,
-          size: "small",
-          className: _MenuModule.default.icon
-        }), /*#__PURE__*/(0, _jsxRuntime.js)("span", {
-          className: _MenuModule.default.optionText,
-          children: label
-        }), !!iconRight && /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
-          name: iconRight,
-          size: "small",
-          className: (0, _classify.classify)(_MenuModule.default.icon, _MenuModule.default.rightIcon)
-        })]
-      }, key);
-    })
-  });
+        label
+      }),
+      autoFocus: selectedOption?.key === key
+    }, !!iconLeft && /*#__PURE__*/React.createElement(_Icon.Icon, {
+      name: iconLeft,
+      size: "small",
+      className: _MenuModule.default.icon
+    }), /*#__PURE__*/React.createElement("span", {
+      className: _MenuModule.default.optionText
+    }, label), !!iconRight && /*#__PURE__*/React.createElement(_Icon.Icon, {
+      name: iconRight,
+      size: "small",
+      className: (0, _classify.classify)(_MenuModule.default.icon, _MenuModule.default.rightIcon)
+    }));
+  }));
 };
 exports.Menu = Menu;

package/lib/components/Modal/Modal.js

@@ -11,7 +11,6 @@ var _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTr
 var _motion = require("../../styles/variables/_motion");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -95,27 +94,24 @@ const Modal = _ref => {
       onClose(e);
     }
   };
-  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.js)(_reactDomInteractions.FloatingFocusManager, {
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement(_reactDomInteractions.FloatingFocusManager, {
     context: context,
-    initialFocus: initialFocus,
-    children: /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
-      ref: floating,
-      "aria-hidden": isOpen ? 'false' : 'true',
-      className: (0, _classify.default)(_ModalModule.default.modalContainer, {
-        [_ModalModule.default.in]: isTransitioning,
-        [_ModalModule.default.open]: isOpen
-      }, classNames?.container),
-      children: [/*#__PURE__*/(0, _jsxRuntime.js)("div", {
-        className: (0, _classify.default)(_ModalModule.default.backdrop, {
-          [_ModalModule.default.darkBackdrop]: showBackdrop
-        }, classNames?.backdrop),
-        onClick: onBackdropClick
-      }), /*#__PURE__*/(0, _jsxRuntime.js)("div", {
-        className: (0, _classify.default)(_ModalModule.default.modal, classNames?.content),
-        role: "dialog",
-        children: children
-      })]
-    })
-  }), portalRootRef.current);
+    initialFocus: initialFocus
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: floating,
+    "aria-hidden": isOpen ? 'false' : 'true',
+    className: (0, _classify.default)(_ModalModule.default.modalContainer, {
+      [_ModalModule.default.in]: isTransitioning,
+      [_ModalModule.default.open]: isOpen
+    }, classNames?.container)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ModalModule.default.backdrop, {
+      [_ModalModule.default.darkBackdrop]: showBackdrop
+    }, classNames?.backdrop),
+    onClick: onBackdropClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ModalModule.default.modal, classNames?.content),
+    role: "dialog"
+  }, children))), portalRootRef.current);
 };
 exports.Modal = Modal;

package/lib/components/Notification/Notification.js

@@ -10,7 +10,6 @@ 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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -33,30 +32,28 @@ const BaseNotification = props => {
     children,
     onCloseClick
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+  return /*#__PURE__*/React.createElement("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
-    }, classNames?.wrapper),
-    children: [iconLeftName ? /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
-      name: iconLeftName,
-      color: _typography.TEXT_COLORS.inversePrimary,
-      size: "small",
-      type: iconLeftType
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.js)(_Text.SubTitleSmall, {
-      className: (0, _classify.classify)(classNames?.text),
-      color: _typography.TEXT_COLORS.inversePrimary,
-      children: children
-    }), dismissable && /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
-      color: _typography.TEXT_COLORS.inversePrimary,
-      name: "close",
-      size: "small",
-      type: "regular",
-      onClick: onCloseClick,
-      className: _NotificationModule.default.closeIcon
-    })]
-  });
+    }, classNames?.wrapper)
+  }, 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
+  }));
 };
 const Notification = props => {
   const {
@@ -74,16 +71,13 @@ const Notification = props => {
     onCloseClick && onCloseClick(e);
     selfDismiss && setDismissed(true);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.js)(_jsxRuntime.Fragment, {
-    children: !dismissed && /*#__PURE__*/(0, _jsxRuntime.js)(BaseNotification, {
-      classNames: classNames,
-      iconLeftName: iconLeftName,
-      iconLeftType: iconLeftType,
-      semantic: semantic,
-      dismissable: dismissable,
-      onCloseClick: closeClickHandler,
-      children: children
-    })
-  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !dismissed && /*#__PURE__*/React.createElement(BaseNotification, {
+    classNames: classNames,
+    iconLeftName: iconLeftName,
+    iconLeftType: iconLeftType,
+    semantic: semantic,
+    dismissable: dismissable,
+    onCloseClick: closeClickHandler
+  }, children));
 };
 exports.Notification = Notification;

package/lib/components/Panel/Panel.js

@@ -12,57 +12,45 @@ var _Button = require("../Button");
 var _Modal = require("../Modal");
 var _Truncate = require("../Truncate");
 var _PanelModule = _interopRequireDefault(require("./Panel.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const PanelHeader = _ref => {
   let {
     children,
     hideCloseBtn,
     onCloseButtonClick
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.js)(_jsxRuntime.Fragment, {
-    children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
-      className: _PanelModule.default.panelHeader,
-      children: [/*#__PURE__*/(0, _jsxRuntime.js)("div", {
-        className: _PanelModule.default.headerContent,
-        children: /*#__PURE__*/(0, _jsxRuntime.js)(_Truncate.Truncate, {
-          children: children
-        })
-      }), !hideCloseBtn && /*#__PURE__*/(0, _jsxRuntime.js)(_Button.Button, {
-        iconLeftName: "xmark",
-        type: "ghost",
-        onClick: onCloseButtonClick
-      })]
-    })
-  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
+    className: _PanelModule.default.panelHeader
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _PanelModule.default.headerContent
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)), !hideCloseBtn && /*#__PURE__*/React.createElement(_Button.Button, {
+    iconLeftName: "xmark",
+    type: "ghost",
+    onClick: onCloseButtonClick
+  })));
 };
 exports.PanelHeader = PanelHeader;
 const PanelBody = _ref2 => {
   let {
     children
   } = _ref2;
-  return /*#__PURE__*/(0, _jsxRuntime.js)("div", {
-    className: _PanelModule.default.panelBody,
-    children: children
-  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: _PanelModule.default.panelBody
+  }, children);
 };
 exports.PanelBody = PanelBody;
 const PanelFooter = _ref3 => {
   let {
     children
   } = _ref3;
-  return /*#__PURE__*/(0, _jsxRuntime.js)(_jsxRuntime.Fragment, {
-    children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.js)("div", {
-      className: _PanelModule.default.panelFooter,
-      children: /*#__PURE__*/(0, _jsxRuntime.js)("div", {
-        className: _PanelModule.default.panelFooterActions,
-        children: children
-      })
-    })
-  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
+    className: _PanelModule.default.panelFooter
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _PanelModule.default.panelFooterActions
+  }, children)));
 };
 exports.PanelFooter = PanelFooter;
 const Panel = _ref4 => {
@@ -75,10 +63,10 @@ const Panel = _ref4 => {
     ...restPanelProps
   } = _ref4;
   const isTransitioning = (0, _useMountTransition.default)(isOpen, parseInt(_motion.motionDurationNormal));
-  return /*#__PURE__*/(0, _jsxRuntime.js)(_Modal.Modal, {
+  return /*#__PURE__*/React.createElement(_Modal.Modal, _extends({
     isOpen: isOpen,
-    onClose: onClose,
-    ...restPanelProps,
+    onClose: onClose
+  }, restPanelProps, {
     classNames: {
       container: (0, _classify.default)(_PanelModule.default.panelContainer, {
         [_PanelModule.default.in]: isTransitioning,
@@ -89,8 +77,7 @@ const Panel = _ref4 => {
         [_PanelModule.default.small]: size === 'small',
         [_PanelModule.default.large]: size === 'large'
       })
-    },
-    children: children
-  });
+    }
+  }), children);
 };
 exports.Panel = Panel;