@invoicebox/ui 0.1.0-alpha.300 → 0.1.0-alpha.302

package/dist/components/form/Autocomplete/components/Autocomplete/index.js

@@ -19,6 +19,7 @@ var _Scrollbar = require("../../../../common/Scrollbar");
 var _constants = require("../../../constants");
 var _palette = require("../../../../../palette");
 var _ModernPlaceholder = require("../../../ModernPlaceholder");
+var _constants2 = require("../../../InputLabel/constants");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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); }
@@ -131,13 +132,9 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
       return _constants.SIZE_PARAMS_MAP[size];
     }
   }, [value, isOpen, useModernStyles, size, inputLabel]);
-  var inputPlaceholder = (0, _react.useMemo)(function () {
-    if (useModernStyles) {
-      return undefined;
-    } else {
-      return placeholder;
-    }
-  }, [placeholder, useModernStyles]);
+  var modernInputPlaceholder = (0, _react.useMemo)(function () {
+    return placeholder || label;
+  }, [label, placeholder]);
   var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
     return !isOpen && !value;
   }, [isOpen, value]);
@@ -202,14 +199,14 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     required: required,
     useModernStyles: useModernStyles,
     size: size,
-    left: useModernStyles ? inputPaddingLeft : undefined
-  }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, children ? /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && placeholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
+    left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - _constants2.LABEL_PADDING : undefined
+  }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, children ? /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
     visible: isModernPlaceholderVisible,
-    paddingLeft: inputPaddingLeft !== null && inputPaddingLeft !== void 0 ? inputPaddingLeft : 20,
+    paddingLeft: typeof inputPaddingLeft === 'number' ? inputPaddingLeft : 20,
     paddingTop: _constants.SIZE_PARAMS_MAP[size].paddingTop,
     size: size,
     required: required
-  }, placeholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+  }, modernInputPlaceholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     ref: ref,
     hasError: hasError,
     inFocus: inFocus,
@@ -218,7 +215,7 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     onFocus: handleInputFocus,
     onBlur: handleBlur,
     name: name,
-    placeholder: inputPlaceholder,
+    placeholder: useModernStyles ? undefined : placeholder,
     disabled: disabled,
     paddingLeft: inputPaddingLeft,
     maxLength: inputMaxLength,

package/dist/components/form/Autocomplete/components/Autocomplete/index.stories.js

@@ -58,7 +58,8 @@ var Default = exports.Default = {
     isCustomOptionRender: false,
     children: 'children',
     inputPaddingLeft: 60,
-    readOnly: false
+    readOnly: false,
+    useModernStyles: true
   },
   render: Component
 };

package/dist/components/form/CurrencyInput/CoreCurrencyInput/index.stories.js

@@ -36,7 +36,8 @@ var Default = exports.Default = {
   args: {
     label: 'Label',
     size: 'L',
-    disabled: false
+    disabled: false,
+    useModernStyles: true
   },
   render: Component
 };

package/dist/components/form/DateInput/index.js

@@ -129,7 +129,9 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
       return placeholder || _logic.logic.getPlaceholder();
     }
   }, [placeholder, useModernStyles]);
-  var modernPlaceholderText = placeholder || _logic.logic.getPlaceholder();
+  var modernPlaceholderText = (0, _react.useMemo)(function () {
+    return placeholder || label || _logic.logic.getPlaceholder();
+  }, [label, placeholder]);
   var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
     return !isOpen && !stringValue;
   }, [isOpen, stringValue]);

package/dist/components/form/DateTimeInput/index.js

@@ -156,7 +156,7 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
       return placeholder || _logic.logic.getPlaceholder(withTime);
     }
   }, [placeholder, useModernStyles, withTime]);
-  var modernPlaceholderText = placeholder || _logic.logic.getPlaceholder(withTime);
+  var modernPlaceholderText = placeholder || label || _logic.logic.getPlaceholder(withTime);
   var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
     return !isOpen && !stringValue;
   }, [isOpen, stringValue]);

package/dist/components/form/InputLabel/constants.d.ts

@@ -0,0 +1 @@
+export declare const LABEL_PADDING = 10;

package/dist/components/form/InputLabel/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LABEL_PADDING = void 0;
+var LABEL_PADDING = exports.LABEL_PADDING = 10;

package/dist/components/form/InputLabel/styles.js

@@ -7,23 +7,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.Wrapper = exports.Label = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Typography = require("../../common/Typography");
+var _constants = require("./constants");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var labelFadeIn = (0, _styledComponents.keyframes)(["from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}"]);
 var Label = exports.Label = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__Label",
   componentId: "sc-1prrc3p-0"
-})(["border-radius:10px;position:absolute;top:", ";left:", ";background-color:", ";padding:0 10px;z-index:2;transition:color 0.2s ease-in-out 0s;animation:", " 0.15s ease;color:", ";", ""], function (_ref) {
+})(["border-radius:10px;position:absolute;top:", ";left:", ";background-color:", ";padding:0 ", "px;z-index:2;transition:color 0.2s ease-in-out 0s;animation:", " 0.15s ease;color:", ";", ""], function (_ref) {
   var $paddingTop = _ref.$paddingTop;
   return $paddingTop ? "".concat($paddingTop, "px") : 0;
 }, function (_ref2) {
   var $left = _ref2.$left;
-  return $left ? "".concat($left, "px") : '10px';
+  return typeof $left === 'number' ? "".concat($left, "px") : '10px';
 }, function (_ref3) {
   var $palette = _ref3.$palette,
     $useModernStyles = _ref3.$useModernStyles;
   return $useModernStyles ? $palette.bgModern : $palette.bg;
-}, labelFadeIn, function (_ref4) {
+}, _constants.LABEL_PADDING, labelFadeIn, function (_ref4) {
   var $inFocus = _ref4.$inFocus,
     $palette = _ref4.$palette;
   return $inFocus ? $palette.textHighlight : $palette.text;

package/dist/components/form/PositiveIntegerInput/index.js

@@ -72,13 +72,9 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
   var handleDown = (0, _react.useCallback)(function () {
     onChange(decrement(value));
   }, [decrement, value, onChange]);
-  var inputPlaceholder = (0, _react.useMemo)(function () {
-    if (useModernStyles) {
-      return undefined;
-    } else {
-      return placeholder;
-    }
-  }, [placeholder, useModernStyles]);
+  var modernInputPlaceholder = (0, _react.useMemo)(function () {
+    return placeholder || label;
+  }, [label, placeholder]);
   var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
     return !inFocus && value === null;
   }, [inFocus, value]);
@@ -105,15 +101,15 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
     label: inputLabel,
     useModernStyles: useModernStyles,
     size: size
-  }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, useModernStyles && placeholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
+  }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
     visible: isModernPlaceholderVisible,
     paddingTop: _constants.SIZE_PARAMS_MAP[size].paddingTop,
     size: size
-  }, placeholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+  }, modernInputPlaceholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     name: name,
     hasError: hasError,
     inFocus: inFocus,
-    placeholder: inputPlaceholder,
+    placeholder: useModernStyles ? undefined : placeholder,
     onFocus: handleFocus,
     onBlur: handleBlur,
     value: normalizeFrom(value),

package/dist/components/form/Select/components/Input/index.js

@@ -38,6 +38,9 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
   var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
     return useModernStyles && !isOpen && !value;
   }, [isOpen, useModernStyles, value]);
+  var modernInputPlaceholder = (0, _react.useMemo)(function () {
+    return placeholder || label;
+  }, [label, placeholder]);
   var paddingOptions = (0, _react.useMemo)(function () {
     if ((value || isOpen) && useModernStyles && label) {
       return _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size];
@@ -51,12 +54,12 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     required: required,
     useModernStyles: useModernStyles,
     size: size
-  }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, useModernStyles && placeholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
+  }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
     visible: isModernPlaceholderVisible,
     paddingTop: _constants.SIZE_PARAMS_MAP[size !== null && size !== void 0 ? size : 'M'].paddingTop,
     size: size !== null && size !== void 0 ? size : 'M',
     required: required
-  }, placeholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+  }, modernInputPlaceholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     ref: ref,
     hasError: hasError,
     inFocus: inFocus,

package/dist/components/form/Select/index.stories.js

@@ -138,7 +138,8 @@ var COMMON_ARGS = {
       id: 12,
       name: 'name option 12'
     }
-  }]
+  }],
+  useModernStyles: true
 };
 var COLORS_BY_ID_MAP = {
   1: 'red',

package/dist/components/form/TextInput/index.js

@@ -73,13 +73,9 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
       return _constants.SIZE_PARAMS_MAP[size];
     }
   }, [value, inFocus, useModernStyles, size, inputLabel]);
-  var inputPlaceholder = (0, _react.useMemo)(function () {
-    if (useModernStyles) {
-      return undefined;
-    } else {
-      return placeholder;
-    }
-  }, [placeholder, useModernStyles]);
+  var modernInputPlaceholder = (0, _react.useMemo)(function () {
+    return placeholder || label;
+  }, [label, placeholder]);
   var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
     return !inFocus && !value;
   }, [inFocus, value]);
@@ -90,12 +86,12 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
     required: required,
     size: size,
     useModernStyles: useModernStyles
-  }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, useModernStyles && placeholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
+  }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
     visible: isModernPlaceholderVisible,
     paddingTop: _constants.SIZE_PARAMS_MAP[size].paddingTop,
     size: size,
     required: required
-  }, placeholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+  }, modernInputPlaceholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     id: id,
     ref: ref,
     name: name,
@@ -106,7 +102,7 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
     onBlur: handleBlur,
     value: value,
     onChange: handleChange,
-    placeholder: inputPlaceholder,
+    placeholder: useModernStyles ? undefined : placeholder,
     paddingRight: paddingRight,
     type: type,
     isOnlyNumbers: isOnlyNumbers,

package/dist/components/form/TextInput/index.stories.js

@@ -45,7 +45,8 @@ var Default = exports.Default = {
     disabled: false,
     children: /*#__PURE__*/_react["default"].createElement("div", null, "Children"),
     size: 'L',
-    autoFocus: false
+    autoFocus: false,
+    useModernStyles: true
   },
   render: Component
 };

package/dist/esm/components/form/Autocomplete/components/Autocomplete/index.js

@@ -19,6 +19,7 @@ import { Scrollbar } from '../../../../common/Scrollbar';
 import { MODERN_STYLE_SIZE_PARAMS_MAP, SIZE_PARAMS_MAP } from '../../../constants';
 import { useComponentPalette } from '../../../../../palette';
 import { ModernPlaceholder } from '../../../ModernPlaceholder';
+import { LABEL_PADDING } from '../../../InputLabel/constants';
 var DefaultSkeletonItem = function DefaultSkeletonItem() {
   return /*#__PURE__*/React.createElement(S.DefaultSkeletonWrapper, null, /*#__PURE__*/React.createElement(Skeleton, {
     height: "20px"
@@ -122,13 +123,9 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return SIZE_PARAMS_MAP[size];
     }
   }, [value, isOpen, useModernStyles, size, inputLabel]);
-  var inputPlaceholder = useMemo(function () {
-    if (useModernStyles) {
-      return undefined;
-    } else {
-      return placeholder;
-    }
-  }, [placeholder, useModernStyles]);
+  var modernInputPlaceholder = useMemo(function () {
+    return placeholder || label;
+  }, [label, placeholder]);
   var isModernPlaceholderVisible = useMemo(function () {
     return !isOpen && !value;
   }, [isOpen, value]);
@@ -193,14 +190,14 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     required: required,
     useModernStyles: useModernStyles,
     size: size,
-    left: useModernStyles ? inputPaddingLeft : undefined
-  }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, children ? /*#__PURE__*/React.createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && placeholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
+    left: useModernStyles && typeof inputPaddingLeft === 'number' ? inputPaddingLeft - LABEL_PADDING : undefined
+  }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, children ? /*#__PURE__*/React.createElement(S.ChildrenWrapper, null, children) : null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
     visible: isModernPlaceholderVisible,
-    paddingLeft: inputPaddingLeft !== null && inputPaddingLeft !== void 0 ? inputPaddingLeft : 20,
+    paddingLeft: typeof inputPaddingLeft === 'number' ? inputPaddingLeft : 20,
     paddingTop: SIZE_PARAMS_MAP[size].paddingTop,
     size: size,
     required: required
-  }, placeholder), /*#__PURE__*/React.createElement(PureInput, _extends({
+  }, modernInputPlaceholder), /*#__PURE__*/React.createElement(PureInput, _extends({
     ref: ref,
     hasError: hasError,
     inFocus: inFocus,
@@ -209,7 +206,7 @@ export var Autocomplete = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onFocus: handleInputFocus,
     onBlur: handleBlur,
     name: name,
-    placeholder: inputPlaceholder,
+    placeholder: useModernStyles ? undefined : placeholder,
     disabled: disabled,
     paddingLeft: inputPaddingLeft,
     maxLength: inputMaxLength,

package/dist/esm/components/form/Autocomplete/components/Autocomplete/index.stories.js

@@ -49,7 +49,8 @@ export var Default = {
     isCustomOptionRender: false,
     children: 'children',
     inputPaddingLeft: 60,
-    readOnly: false
+    readOnly: false,
+    useModernStyles: true
   },
   render: Component
 };

package/dist/esm/components/form/CurrencyInput/CoreCurrencyInput/index.stories.js

@@ -27,7 +27,8 @@ export var Default = {
   args: {
     label: 'Label',
     size: 'L',
-    disabled: false
+    disabled: false,
+    useModernStyles: true
   },
   render: Component
 };

package/dist/esm/components/form/DateInput/index.js

@@ -120,7 +120,9 @@ export var DateInput = function DateInput(_ref) {
       return placeholder || logic.getPlaceholder();
     }
   }, [placeholder, useModernStyles]);
-  var modernPlaceholderText = placeholder || logic.getPlaceholder();
+  var modernPlaceholderText = useMemo(function () {
+    return placeholder || label || logic.getPlaceholder();
+  }, [label, placeholder]);
   var isModernPlaceholderVisible = useMemo(function () {
     return !isOpen && !stringValue;
   }, [isOpen, stringValue]);

package/dist/esm/components/form/DateTimeInput/index.js

@@ -147,7 +147,7 @@ export var DateTimeInput = function DateTimeInput(_ref) {
       return placeholder || logic.getPlaceholder(withTime);
     }
   }, [placeholder, useModernStyles, withTime]);
-  var modernPlaceholderText = placeholder || logic.getPlaceholder(withTime);
+  var modernPlaceholderText = placeholder || label || logic.getPlaceholder(withTime);
   var isModernPlaceholderVisible = useMemo(function () {
     return !isOpen && !stringValue;
   }, [isOpen, stringValue]);

package/dist/esm/components/form/InputLabel/constants.js

@@ -0,0 +1 @@
+export var LABEL_PADDING = 10;

package/dist/esm/components/form/InputLabel/styles.js

@@ -1,20 +1,21 @@
 import styled, { css, keyframes } from 'styled-components';
 import { Typography } from '../../common/Typography';
+import { LABEL_PADDING } from './constants';
 var labelFadeIn = keyframes(["from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}"]);
 export var Label = styled(Typography).withConfig({
   displayName: "styles__Label",
   componentId: "sc-1prrc3p-0"
-})(["border-radius:10px;position:absolute;top:", ";left:", ";background-color:", ";padding:0 10px;z-index:2;transition:color 0.2s ease-in-out 0s;animation:", " 0.15s ease;color:", ";", ""], function (_ref) {
+})(["border-radius:10px;position:absolute;top:", ";left:", ";background-color:", ";padding:0 ", "px;z-index:2;transition:color 0.2s ease-in-out 0s;animation:", " 0.15s ease;color:", ";", ""], function (_ref) {
   var $paddingTop = _ref.$paddingTop;
   return $paddingTop ? "".concat($paddingTop, "px") : 0;
 }, function (_ref2) {
   var $left = _ref2.$left;
-  return $left ? "".concat($left, "px") : '10px';
+  return typeof $left === 'number' ? "".concat($left, "px") : '10px';
 }, function (_ref3) {
   var $palette = _ref3.$palette,
     $useModernStyles = _ref3.$useModernStyles;
   return $useModernStyles ? $palette.bgModern : $palette.bg;
-}, labelFadeIn, function (_ref4) {
+}, LABEL_PADDING, labelFadeIn, function (_ref4) {
   var $inFocus = _ref4.$inFocus,
     $palette = _ref4.$palette;
   return $inFocus ? $palette.textHighlight : $palette.text;

package/dist/esm/components/form/PositiveIntegerInput/index.js

@@ -63,13 +63,9 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
   var handleDown = useCallback(function () {
     onChange(decrement(value));
   }, [decrement, value, onChange]);
-  var inputPlaceholder = useMemo(function () {
-    if (useModernStyles) {
-      return undefined;
-    } else {
-      return placeholder;
-    }
-  }, [placeholder, useModernStyles]);
+  var modernInputPlaceholder = useMemo(function () {
+    return placeholder || label;
+  }, [label, placeholder]);
   var isModernPlaceholderVisible = useMemo(function () {
     return !inFocus && value === null;
   }, [inFocus, value]);
@@ -96,15 +92,15 @@ export var PositiveIntegerInput = function PositiveIntegerInput(_ref) {
     label: inputLabel,
     useModernStyles: useModernStyles,
     size: size
-  }, /*#__PURE__*/React.createElement(S.ControlWrapper, null, useModernStyles && placeholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
+  }, /*#__PURE__*/React.createElement(S.ControlWrapper, null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
     visible: isModernPlaceholderVisible,
     paddingTop: SIZE_PARAMS_MAP[size].paddingTop,
     size: size
-  }, placeholder), /*#__PURE__*/React.createElement(PureInput, _extends({
+  }, modernInputPlaceholder), /*#__PURE__*/React.createElement(PureInput, _extends({
     name: name,
     hasError: hasError,
     inFocus: inFocus,
-    placeholder: inputPlaceholder,
+    placeholder: useModernStyles ? undefined : placeholder,
     onFocus: handleFocus,
     onBlur: handleBlur,
     value: normalizeFrom(value),

package/dist/esm/components/form/Select/components/Input/index.js

@@ -29,6 +29,9 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isModernPlaceholderVisible = useMemo(function () {
     return useModernStyles && !isOpen && !value;
   }, [isOpen, useModernStyles, value]);
+  var modernInputPlaceholder = useMemo(function () {
+    return placeholder || label;
+  }, [label, placeholder]);
   var paddingOptions = useMemo(function () {
     if ((value || isOpen) && useModernStyles && label) {
       return MODERN_STYLE_SIZE_PARAMS_MAP[size];
@@ -42,12 +45,12 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     required: required,
     useModernStyles: useModernStyles,
     size: size
-  }, /*#__PURE__*/React.createElement(S.ControlWrapper, null, useModernStyles && placeholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
+  }, /*#__PURE__*/React.createElement(S.ControlWrapper, null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
     visible: isModernPlaceholderVisible,
     paddingTop: SIZE_PARAMS_MAP[size !== null && size !== void 0 ? size : 'M'].paddingTop,
     size: size !== null && size !== void 0 ? size : 'M',
     required: required
-  }, placeholder), /*#__PURE__*/React.createElement(PureInput, _extends({
+  }, modernInputPlaceholder), /*#__PURE__*/React.createElement(PureInput, _extends({
     ref: ref,
     hasError: hasError,
     inFocus: inFocus,

package/dist/esm/components/form/Select/index.stories.js

@@ -130,7 +130,8 @@ var COMMON_ARGS = {
       id: 12,
       name: 'name option 12'
     }
-  }]
+  }],
+  useModernStyles: true
 };
 var COLORS_BY_ID_MAP = {
   1: 'red',

package/dist/esm/components/form/TextInput/index.js

@@ -64,13 +64,9 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return SIZE_PARAMS_MAP[size];
     }
   }, [value, inFocus, useModernStyles, size, inputLabel]);
-  var inputPlaceholder = useMemo(function () {
-    if (useModernStyles) {
-      return undefined;
-    } else {
-      return placeholder;
-    }
-  }, [placeholder, useModernStyles]);
+  var modernInputPlaceholder = useMemo(function () {
+    return placeholder || label;
+  }, [label, placeholder]);
   var isModernPlaceholderVisible = useMemo(function () {
     return !inFocus && !value;
   }, [inFocus, value]);
@@ -81,12 +77,12 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     required: required,
     size: size,
     useModernStyles: useModernStyles
-  }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, useModernStyles && placeholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
+  }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, useModernStyles && modernInputPlaceholder && /*#__PURE__*/React.createElement(ModernPlaceholder, {
     visible: isModernPlaceholderVisible,
     paddingTop: SIZE_PARAMS_MAP[size].paddingTop,
     size: size,
     required: required
-  }, placeholder), /*#__PURE__*/React.createElement(PureInput, _extends({
+  }, modernInputPlaceholder), /*#__PURE__*/React.createElement(PureInput, _extends({
     id: id,
     ref: ref,
     name: name,
@@ -97,7 +93,7 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onBlur: handleBlur,
     value: value,
     onChange: handleChange,
-    placeholder: inputPlaceholder,
+    placeholder: useModernStyles ? undefined : placeholder,
     paddingRight: paddingRight,
     type: type,
     isOnlyNumbers: isOnlyNumbers,

package/dist/esm/components/form/TextInput/index.stories.js

@@ -36,7 +36,8 @@ export var Default = {
     disabled: false,
     children: /*#__PURE__*/React.createElement("div", null, "Children"),
     size: 'L',
-    autoFocus: false
+    autoFocus: false,
+    useModernStyles: true
   },
   render: Component
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.300",
+    "version": "0.1.0-alpha.302",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {