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

package/lib/components/Dropdown/Dropdown.js

@@ -14,11 +14,10 @@ var _clickAway = require("../../utils/click-away");
 var _Input = require("../Input");
 var _Menu = require("../Menu");
 var _DropdownModule = _interopRequireDefault(require("./Dropdown.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 Dropdown = _ref => {
   let {
     options,
@@ -54,55 +53,51 @@ const Dropdown = _ref => {
       setInputValue(selectedOption.label);
     }
   }, [selectedOption]);
-  return /*#__PURE__*/(0, _jsxRuntime.js)(_clickAway.ClickAway, {
-    children: _ref2 => {
-      let {
-        isOpen,
-        onOpen,
-        cancelNext,
-        clickAway
-      } = _ref2;
-      return /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
-        "data-testid": "Dropdown",
-        className: (0, _classify.classify)(_DropdownModule.default.dropdownContainer, classNames?.wrapper),
-        ref: dropdownRef,
-        children: [/*#__PURE__*/(0, _jsxRuntime.js)(_Input.Input, {
-          boxRef: reference,
-          size: size,
-          placeholder: placeholder,
-          value: inputValue,
-          classNames: {
-            box: _DropdownModule.default.inputBox
-          },
-          ...inputProps,
-          iconRightName: isOpen ? 'angle-up' : 'angle-down',
-          readOnly: true,
-          onContainerClick: e => {
-            e.stopPropagation();
-            onOpen();
-          }
-        }), isOpen && options && /*#__PURE__*/(0, _jsxRuntime.js)("div", {
-          onClickCapture: cancelNext,
-          ref: floating,
-          style: {
-            position: strategy,
-            top: y ?? _space.spaceNone,
-            left: x ?? _space.spaceNone,
-            width: _size.sizeFluid,
-            backgroundColor: _color.colorBackgroundTertiary
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.js)(_Menu.Menu, {
-            isFluid: true,
-            options: options,
-            onSelect: option => {
-              handleSelect(option);
-              clickAway();
-            },
-            size: size
-          })
-        })]
-      });
-    }
+  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, null, _ref2 => {
+    let {
+      isOpen,
+      onOpen,
+      cancelNext,
+      clickAway
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "Dropdown",
+      className: (0, _classify.classify)(_DropdownModule.default.dropdownContainer, classNames?.wrapper),
+      ref: dropdownRef
+    }, /*#__PURE__*/React.createElement(_Input.Input, _extends({
+      boxRef: reference,
+      size: size,
+      placeholder: placeholder,
+      value: inputValue,
+      classNames: {
+        box: _DropdownModule.default.inputBox
+      }
+    }, inputProps, {
+      iconRightName: isOpen ? 'angle-up' : 'angle-down',
+      readOnly: true,
+      onContainerClick: e => {
+        e.stopPropagation();
+        onOpen();
+      }
+    })), isOpen && options && /*#__PURE__*/React.createElement("div", {
+      onClickCapture: cancelNext,
+      ref: floating,
+      style: {
+        position: strategy,
+        top: y ?? _space.spaceNone,
+        left: x ?? _space.spaceNone,
+        width: _size.sizeFluid,
+        backgroundColor: _color.colorBackgroundTertiary
+      }
+    }, /*#__PURE__*/React.createElement(_Menu.Menu, {
+      isFluid: true,
+      options: options,
+      onSelect: option => {
+        handleSelect(option);
+        clickAway();
+      },
+      size: size
+    })));
   });
 };
 exports.Dropdown = Dropdown;

package/lib/components/Grid/Grid.js

@@ -7,7 +7,6 @@ exports.Row = exports.Col = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _GridModule = _interopRequireDefault(require("./Grid.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; }
@@ -53,14 +52,13 @@ const Row = _ref => {
       }
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     "data-testid": "Grid",
     className: (0, _classify.classify)(_GridModule.default.gridRow, _GridModule.default[`gridRowSpan${span}`], className),
     style: {
       gridTemplateColumns: `repeat(${GRID_COLUMN_COUNT}, 1fr)`
-    },
-    children: childrenWithProps
-  });
+    }
+  }, childrenWithProps);
 };
 exports.Row = Row;
 const Col = _ref2 => {
@@ -70,13 +68,12 @@ const Col = _ref2 => {
     gridColumnStart,
     gridColumnEnd
   } = _ref2;
-  return /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_GridModule.default.gridColumn, className),
     style: {
       gridColumnStart,
       gridColumnEnd
-    },
-    children: children
-  });
+    }
+  }, children);
 };
 exports.Col = Col;

package/lib/components/Icon/ClickableIcon.js

@@ -10,27 +10,23 @@ var _Button = require("../Button");
 var _Text = require("../Text");
 var _ = require("./");
 var _ClickableIconModule = _interopRequireDefault(require("./ClickableIcon.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 ClickableIcon = _ref => {
   let {
     size = 'medium',
     ...props
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.js)(_Button.UnstyledButton, {
-    ...props,
+  return /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, props, {
     className: (0, _classify.default)(_ClickableIconModule.default.button, {
       [_ClickableIconModule.default.small]: size === 'small',
       [_ClickableIconModule.default.medium]: size === 'medium'
-    }),
-    children: /*#__PURE__*/(0, _jsxRuntime.js)(_.Icon, {
-      size: size,
-      ...props
     })
-  });
+  }), /*#__PURE__*/React.createElement(_.Icon, _extends({
+    size: size
+  }, props)));
 };
 exports.ClickableIcon = ClickableIcon;
 const CloseIcon = _ref2 => {
@@ -40,7 +36,7 @@ const CloseIcon = _ref2 => {
     color = _Text.TEXT_COLORS.primary,
     onClick
   } = _ref2;
-  return /*#__PURE__*/(0, _jsxRuntime.js)(ClickableIcon, {
+  return /*#__PURE__*/React.createElement(ClickableIcon, {
     name: "close",
     size: size,
     type: type,

package/lib/components/Icon/Icon.js

@@ -9,7 +9,6 @@ require("./FontAwesomeLibrary");
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _typographyModule = _interopRequireDefault(require("../../styles/typography.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,14 +24,11 @@ const Icon = _ref => {
     className,
     onClick
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.js)(_jsxRuntime.Fragment, {
-    children: !!name && /*#__PURE__*/(0, _jsxRuntime.js)("div", {
-      className: (0, _classify.default)(_typographyModule.default.centerAlignFlex, _typographyModule.default[`${size}Icon`], _typographyModule.default[color], className),
-      onClick: onClick,
-      children: /*#__PURE__*/(0, _jsxRuntime.js)("i", {
-        className: (0, _classify.default)(`fa-${type} fa-${name}`)
-      })
-    })
-  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !!name && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_typographyModule.default.centerAlignFlex, _typographyModule.default[`${size}Icon`], _typographyModule.default[color], className),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("i", {
+    className: (0, _classify.default)(`fa-${type} fa-${name}`)
+  })));
 };
 exports.Icon = Icon;

package/lib/components/InContextAlert/InContextAlert.js

@@ -11,7 +11,6 @@ var _Icon = require("../Icon");
 var _Text = require("../Text");
 var _Truncate = require("../Truncate");
 var _InContextAlertModule = _interopRequireDefault(require("./InContextAlert.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; }
@@ -31,42 +30,42 @@ const AlertIcon = _ref => {
   } = _ref;
   switch (semantic) {
     case ALERT_SEMANTIC.neutral:
-      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+      return /*#__PURE__*/React.createElement(_Icon.Icon, {
         color: _typography.TEXT_COLORS.neutral,
         name: leftIconName ? leftIconName : 'face-smile',
         size: "small",
         type: "regular"
       });
     case ALERT_SEMANTIC.success:
-      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+      return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: "circle-check",
         size: "small",
         color: _typography.TEXT_COLORS.success,
         type: "regular"
       });
     case ALERT_SEMANTIC.information:
-      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+      return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: "circle-info",
         size: "small",
         color: _typography.TEXT_COLORS.information,
         type: "regular"
       });
     case ALERT_SEMANTIC.warning:
-      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+      return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: "circle-exclamation",
         size: "small",
         color: _typography.TEXT_COLORS.warning,
         type: "regular"
       });
     case ALERT_SEMANTIC.danger:
-      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+      return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: "shield-exclamation",
         size: "small",
         color: _typography.TEXT_COLORS.danger,
         type: "regular"
       });
     default:
-      return /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+      return /*#__PURE__*/React.createElement(_Icon.Icon, {
         color: _typography.TEXT_COLORS.neutral,
         name: "face-smile",
         size: "small",
@@ -89,33 +88,28 @@ const InContextAlert = props => {
     onCloseClick && onCloseClick(e);
     selfDismiss && setDismissed(true);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.js)(_jsxRuntime.Fragment, {
-    children: !dismissed && /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
-      className: (0, _classify.classify)(_InContextAlertModule.default.alertContainer, {
-        [_InContextAlertModule.default.neutral]: semantic === ALERT_SEMANTIC.neutral,
-        [_InContextAlertModule.default.success]: semantic === ALERT_SEMANTIC.success,
-        [_InContextAlertModule.default.information]: semantic === ALERT_SEMANTIC.information,
-        [_InContextAlertModule.default.warning]: semantic === ALERT_SEMANTIC.warning,
-        [_InContextAlertModule.default.danger]: semantic === ALERT_SEMANTIC.danger
-      }, classNames?.wrapper),
-      children: [/*#__PURE__*/(0, _jsxRuntime.js)(AlertIcon, {
-        semantic: semantic,
-        leftIconName: leftIconName
-      }), React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.js)(_Text.SubTitleExtraSmall, {
-        className: (0, _classify.classify)(classNames?.alertText),
-        children: /*#__PURE__*/(0, _jsxRuntime.js)(_Truncate.Truncate, {
-          line: 2,
-          children: children
-        })
-      }), dismissable && /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
-        color: _typography.TEXT_COLORS.primary,
-        name: "close",
-        size: "small",
-        type: "regular",
-        onClick: closeClickHandler,
-        className: _InContextAlertModule.default.closeIcon
-      })]
-    })
-  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !dismissed && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_InContextAlertModule.default.alertContainer, {
+      [_InContextAlertModule.default.neutral]: semantic === ALERT_SEMANTIC.neutral,
+      [_InContextAlertModule.default.success]: semantic === ALERT_SEMANTIC.success,
+      [_InContextAlertModule.default.information]: semantic === ALERT_SEMANTIC.information,
+      [_InContextAlertModule.default.warning]: semantic === ALERT_SEMANTIC.warning,
+      [_InContextAlertModule.default.danger]: semantic === ALERT_SEMANTIC.danger
+    }, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement(AlertIcon, {
+    semantic: semantic,
+    leftIconName: leftIconName
+  }), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    className: (0, _classify.classify)(classNames?.alertText)
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, {
+    line: 2
+  }, children)), dismissable && /*#__PURE__*/React.createElement(_Icon.Icon, {
+    color: _typography.TEXT_COLORS.primary,
+    name: "close",
+    size: "small",
+    type: "regular",
+    onClick: closeClickHandler,
+    className: _InContextAlertModule.default.closeIcon
+  })));
 };
 exports.InContextAlert = InContextAlert;

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;