@invoicebox/ui 0.1.0-alpha.285 → 0.1.0-alpha.287

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

@@ -18,6 +18,7 @@ var _Dropdown = require("../../../../common/Dropdown");
 var _Scrollbar = require("../../../../common/Scrollbar");
 var _constants = require("../../../constants");
 var _palette = require("../../../../../palette");
+var _ModernPlaceholder = require("../../../ModernPlaceholder");
 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); }
@@ -118,15 +119,14 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
   }, [value, isOpen, useModernStyles, size, inputLabel]);
   var inputPlaceholder = (0, _react.useMemo)(function () {
     if (useModernStyles) {
-      if (!isOpen) {
-        return placeholder;
-      } else {
-        return undefined;
-      }
+      return undefined;
     } else {
       return placeholder;
     }
-  }, [isOpen, placeholder, useModernStyles]);
+  }, [placeholder, useModernStyles]);
+  var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
+    return !isOpen && !value;
+  }, [isOpen, value]);
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
     ref: wrapperRef
   }, /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
@@ -135,8 +135,15 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     disabled: disabled,
     required: required,
     useModernStyles: useModernStyles,
-    size: size
-  }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, children ? /*#__PURE__*/_react["default"].createElement(S.ChildrenWrapper, null, children) : null, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+    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, {
+    visible: isModernPlaceholderVisible,
+    paddingLeft: inputPaddingLeft !== null && inputPaddingLeft !== void 0 ? inputPaddingLeft : 20,
+    paddingTop: _constants.SIZE_PARAMS_MAP[size].paddingTop,
+    size: size,
+    required: required
+  }, placeholder), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     ref: ref,
     hasError: hasError,
     inFocus: inFocus,

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

@@ -11,6 +11,7 @@ var _useInputFocus2 = require("../../../../hooks/useInputFocus");
 var _styles = require("./styles");
 var _constants = require("../../constants");
 var _palette = require("../../../../palette");
+var _ModernPlaceholder = require("../../ModernPlaceholder");
 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 CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_ref) {
@@ -41,7 +42,7 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
   var palette = (0, _palette.useComponentPalette)('pureInput');
   var inputLabel = (0, _react.useMemo)(function () {
     if (useModernStyles) {
-      if (value || inFocus) {
+      if (defaultValue || inFocus || value) {
         return label;
       } else {
         return undefined;
@@ -49,22 +50,17 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
     } else {
       return label;
     }
-  }, [useModernStyles, value, inFocus, label]);
+  }, [useModernStyles, defaultValue, inFocus, label, value]);
   var paddingOptions = (0, _react.useMemo)(function () {
-    if ((value || inFocus) && useModernStyles && inputLabel) {
+    if ((defaultValue || value || inFocus) && useModernStyles && inputLabel) {
       return _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size];
     } else {
       return _constants.SIZE_PARAMS_MAP[size];
     }
-  }, [value, useModernStyles, size, inFocus, inputLabel]);
-  var inputPlaceholder = (0, _react.useMemo)(function () {
-    if (useModernStyles) {
-      if (!inFocus) {
-        return label;
-      }
-    }
-    return undefined;
-  }, [inFocus, label, useModernStyles]);
+  }, [defaultValue, useModernStyles, size, inFocus, inputLabel, value]);
+  var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
+    return !inFocus && !defaultValue && !value;
+  }, [defaultValue, inFocus, value]);
   return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
     inFocus: inFocus,
     label: inputLabel,
@@ -72,7 +68,13 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
     required: required,
     useModernStyles: useModernStyles,
     size: size
-  }, /*#__PURE__*/_react["default"].createElement(_styles.StyledCurrencyInputFromLibrary, {
+  }, /*#__PURE__*/_react["default"].createElement(_styles.InputWrapper, null, useModernStyles && label && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
+    visible: isModernPlaceholderVisible,
+    paddingLeft: 18,
+    paddingTop: _constants.SIZE_PARAMS_MAP[size].paddingTop,
+    size: size,
+    required: required
+  }, label), /*#__PURE__*/_react["default"].createElement(_styles.StyledCurrencyInputFromLibrary, {
     $palette: palette,
     $hasBorder: !useModernStyles,
     $paddingLeft: 18,
@@ -97,7 +99,6 @@ var CoreCurrencyInput = exports.CoreCurrencyInput = function CoreCurrencyInput(_
     groupSeparator: ' ',
     disabled: disabled,
     disableAbbreviations: true,
-    $useModernStyles: useModernStyles,
-    placeholder: inputPlaceholder
-  }));
+    $useModernStyles: useModernStyles
+  })));
 };

package/dist/components/form/CurrencyInput/CoreCurrencyInput/styles.d.ts

@@ -12,3 +12,4 @@ export declare const StyledCurrencyInputFromLibrary: import("styled-components/d
     $variant?: "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headerText" | "buttonL" | "bodyL" | "bodyLUnderlined" | "buttonM" | "bodyMRegular" | "bodyMBold" | "bodyMUnderlined" | "captionRegular" | "labelsHintsRegular" | "labelsHintsBold" | "captionSRegular" | "captionUnderlined" | "smallMedium" | "labelsAndHints" | undefined;
     $useModernStyles?: boolean | undefined;
 }>> & string & ({} | Omit<import("react").ComponentClass<any, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<any>, keyof import("react").Component<any, {}, any>>);
+export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/form/CurrencyInput/CoreCurrencyInput/styles.js

@@ -3,8 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledCurrencyInputFromLibrary = void 0;
+exports.StyledCurrencyInputFromLibrary = exports.InputWrapper = void 0;
 var _reactCurrencyInputField = _interopRequireDefault(require("react-currency-input-field"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styles = require("../../PureInput/styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var StyledCurrencyInputFromLibrary = exports.StyledCurrencyInputFromLibrary = (0, _styles.getPureInputStyled)(_reactCurrencyInputField["default"]);
+var StyledCurrencyInputFromLibrary = exports.StyledCurrencyInputFromLibrary = (0, _styles.getPureInputStyled)(_reactCurrencyInputField["default"]);
+var InputWrapper = exports.InputWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "styles__InputWrapper",
+  componentId: "sc-1sto6zg-0"
+})(["position:relative;"]);

package/dist/components/form/DateInput/index.d.ts

@@ -10,6 +10,7 @@ export type TProps = {
     placeholder?: string;
     dropdownProps?: Pick<TDropdownProps, 'isAutoPosition' | 'positionLeft' | 'positionRight' | 'positionVertical'>;
     useModernStyles?: boolean;
+    required?: boolean;
 } & Pick<TPureInputProps, 'hasError' | 'name' | 'onBlur' | 'onFocus'> & Pick<TInputLabelProps, 'label'> & Pick<TCalendarProps, 'maxDate' | 'minDate'> & {
     size?: TSizes;
 };

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

@@ -17,6 +17,7 @@ var _Calendar = require("../../common/Calendar");
 var _CalendarIcon = require("./components/CalendarIcon");
 var _palette = require("../../../palette");
 var _constants = require("../constants");
+var _ModernPlaceholder = require("../ModernPlaceholder");
 var _index = require("../../../index");
 var _MobileDrawerDateCalendar = require("./components/MobileDrawerDateCalendar");
 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); }
@@ -44,7 +45,9 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
     dropdownProps = _ref.dropdownProps,
     placeholder = _ref.placeholder,
     _ref$useModernStyles = _ref.useModernStyles,
-    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required;
   var palette = (0, _palette.useComponentPalette)('dateInput');
   var inputRef = (0, _react.useRef)(null);
   var isMobile = (0, _index.useMobile)();
@@ -120,23 +123,29 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
   }, [stringValue, isOpen, useModernStyles, size, inputLabel]);
   var inputPlaceholder = (0, _react.useMemo)(function () {
     if (useModernStyles) {
-      if (!isOpen) {
-        return placeholder || _logic.logic.getPlaceholder();
-      } else {
-        return undefined;
-      }
+      return undefined;
     } else {
       return placeholder || _logic.logic.getPlaceholder();
     }
-  }, [isOpen, placeholder, useModernStyles]);
+  }, [placeholder, useModernStyles]);
+  var modernPlaceholderText = placeholder || _logic.logic.getPlaceholder();
+  var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
+    return !isOpen && !stringValue;
+  }, [isOpen, stringValue]);
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
     ref: isMobile ? undefined : elRef
   }, /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
     inFocus: inFocus,
     label: inputLabel,
     useModernStyles: useModernStyles,
+    size: size,
+    required: required
+  }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, useModernStyles && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
+    visible: isModernPlaceholderVisible,
+    paddingTop: _constants.SIZE_PARAMS_MAP[size].paddingTop,
+    required: required,
     size: size
-  }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+  }, modernPlaceholderText), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     onClick: handleTrigger,
     ref: inputRef,
     hasError: hasError,

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

@@ -14,6 +14,7 @@ var S = _interopRequireWildcard(require("./styles"));
 var _InputLabel = require("../InputLabel");
 var _PureInput = require("../PureInput");
 var _constants = require("../constants");
+var _ModernPlaceholder = require("../ModernPlaceholder");
 var _CalendarIcon = require("../DateInput/components/CalendarIcon");
 var _Dropdown = require("../../common/Dropdown");
 var _Calendar = require("../../common/Calendar");
@@ -149,15 +150,15 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
   }, [stringValue, isOpen, useModernStyles, size, inputLabel]);
   var inputPlaceholder = (0, _react.useMemo)(function () {
     if (useModernStyles) {
-      if (!isOpen) {
-        return placeholder || _logic.logic.getPlaceholder(withTime);
-      } else {
-        return undefined;
-      }
+      return undefined;
     } else {
       return placeholder || _logic.logic.getPlaceholder(withTime);
     }
-  }, [isOpen, placeholder, useModernStyles, withTime]);
+  }, [placeholder, useModernStyles, withTime]);
+  var modernPlaceholderText = placeholder || _logic.logic.getPlaceholder(withTime);
+  var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
+    return !isOpen && !stringValue;
+  }, [isOpen, stringValue]);
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
     ref: isMobile ? undefined : elRef
   }, /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
@@ -166,7 +167,12 @@ var DateTimeInput = exports.DateTimeInput = function DateTimeInput(_ref) {
     required: required,
     useModernStyles: useModernStyles,
     size: size
-  }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+  }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, useModernStyles && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
+    visible: isModernPlaceholderVisible,
+    paddingTop: _constants.SIZE_PARAMS_MAP[size].paddingTop,
+    size: size,
+    required: required
+  }, modernPlaceholderText), /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
     onClick: handleTrigger,
     ref: inputRef,
     hasError: hasError,

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

@@ -9,10 +9,11 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Typography = require("../../common/Typography");
 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;color:", ";", ""], function (_ref) {
+})(["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) {
   var $paddingTop = _ref.$paddingTop;
   return $paddingTop ? "".concat($paddingTop, "px") : 0;
 }, function (_ref2) {
@@ -22,7 +23,7 @@ var Label = exports.Label = (0, _styledComponents["default"])(_Typography.Typogr
   var $palette = _ref3.$palette,
     $useModernStyles = _ref3.$useModernStyles;
   return $useModernStyles ? $palette.bgModern : $palette.bg;
-}, function (_ref4) {
+}, labelFadeIn, function (_ref4) {
   var $inFocus = _ref4.$inFocus,
     $palette = _ref4.$palette;
   return $inFocus ? $palette.textHighlight : $palette.text;

package/dist/components/form/ModernPlaceholder/index.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from 'react';
+import { TSizes } from '../constants';
+type TProps = {
+    visible: boolean;
+    paddingLeft?: number;
+    paddingTop: number;
+    size: TSizes;
+    required?: boolean;
+    children: ReactNode;
+};
+export declare const ModernPlaceholder: FC<TProps>;
+export {};

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

@@ -0,0 +1,35 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModernPlaceholder = void 0;
+var _react = _interopRequireDefault(require("react"));
+var S = _interopRequireWildcard(require("./styles"));
+var _palette = require("../../../palette");
+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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var ModernPlaceholder = exports.ModernPlaceholder = function ModernPlaceholder(_ref) {
+  var visible = _ref.visible,
+    _ref$paddingLeft = _ref.paddingLeft,
+    paddingLeft = _ref$paddingLeft === void 0 ? 20 : _ref$paddingLeft,
+    paddingTop = _ref.paddingTop,
+    size = _ref.size,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    children = _ref.children;
+  var pureInputPalette = (0, _palette.useComponentPalette)('pureInput');
+  var inputLabelPalette = (0, _palette.useComponentPalette)('inputLabel');
+  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
+    variant: _constants.SIZE_PARAMS_MAP[size].variant,
+    $visible: visible,
+    $paddingLeft: paddingLeft,
+    $paddingTop: paddingTop,
+    $color: pureInputPalette.placeholder
+  }, children, required && /*#__PURE__*/_react["default"].createElement(S.Star, {
+    $color: inputLabelPalette.error
+  }, "*"));
+};

package/dist/components/form/ModernPlaceholder/styles.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
+    $visible: boolean;
+    $paddingLeft: number;
+    $paddingTop: number;
+    $color: string;
+}>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
+export declare const Star: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $color: string;
+}>> & string;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.Star = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = require("../../common/Typography");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Wrapper = exports.Wrapper = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-1f4olgp-0"
+})(["position:absolute;top:0;left:0;right:0;padding-left:", "px;padding-top:", "px;pointer-events:none;z-index:1;display:flex;align-items:flex-start;white-space:nowrap;overflow:hidden;opacity:", ";transform:translateY(", ");transition:opacity 0.15s ease,transform 0.15s ease;color:", ";"], function (_ref) {
+  var $paddingLeft = _ref.$paddingLeft;
+  return $paddingLeft;
+}, function (_ref2) {
+  var $paddingTop = _ref2.$paddingTop;
+  return $paddingTop;
+}, function (_ref3) {
+  var $visible = _ref3.$visible;
+  return $visible ? 1 : 0;
+}, function (_ref4) {
+  var $visible = _ref4.$visible;
+  return $visible ? '0px' : '-6px';
+}, function (_ref5) {
+  var $color = _ref5.$color;
+  return $color;
+});
+var Star = exports.Star = _styledComponents["default"].span.withConfig({
+  displayName: "styles__Star",
+  componentId: "sc-1f4olgp-1"
+})(["color:", ";margin-left:4px;flex-shrink:0;"], function (_ref6) {
+  var $color = _ref6.$color;
+  return $color;
+});

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

@@ -17,6 +17,7 @@ var _PureInput = require("../PureInput");
 var _CountrySelect = require("../CountrySelect");
 var _useMedia = require("../../../hooks/useMedia");
 var _constants = require("../constants");
+var _ModernPlaceholder = require("../ModernPlaceholder");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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; }
@@ -183,15 +184,15 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
   }, [inputValue, useModernStyles, size, inFocus, inputLabel]);
   var inputPlaceholder = (0, _react.useMemo)(function () {
     if (useModernStyles) {
-      if (!inFocus) {
-        return label || currentCountriesPhoneRules[country].placeholder;
-      } else {
-        return undefined;
-      }
+      return undefined;
     } else {
       return currentCountriesPhoneRules[country].placeholder;
     }
-  }, [country, currentCountriesPhoneRules, inFocus, label, useModernStyles]);
+  }, [country, currentCountriesPhoneRules, useModernStyles]);
+  var modernPlaceholderText = label || currentCountriesPhoneRules[country].placeholder;
+  var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
+    return !inFocus && !inputValue;
+  }, [inFocus, inputValue]);
   return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
     inFocus: inFocus,
     label: inputLabel,
@@ -200,7 +201,13 @@ var PhoneInput = exports.PhoneInput = function PhoneInput(_ref) {
     useModernStyles: useModernStyles,
     size: size,
     left: useModernStyles ? 65 : undefined
-  }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, !!(countrySelectOptions !== null && countrySelectOptions !== void 0 && countrySelectOptions.length) && /*#__PURE__*/_react["default"].createElement(S.InputLabelFloatWrapper, null, /*#__PURE__*/_react["default"].createElement(S.CountrySelectWrapper, null, /*#__PURE__*/_react["default"].createElement(_CountrySelect.CountrySelect, {
+  }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, useModernStyles && /*#__PURE__*/_react["default"].createElement(_ModernPlaceholder.ModernPlaceholder, {
+    visible: isModernPlaceholderVisible,
+    paddingLeft: isHaveSelectCountries ? 75 : 18,
+    paddingTop: _constants.SIZE_PARAMS_MAP[size].paddingTop,
+    size: size,
+    required: required
+  }, modernPlaceholderText), !!(countrySelectOptions !== null && countrySelectOptions !== void 0 && countrySelectOptions.length) && /*#__PURE__*/_react["default"].createElement(S.InputLabelFloatWrapper, null, /*#__PURE__*/_react["default"].createElement(S.CountrySelectWrapper, null, /*#__PURE__*/_react["default"].createElement(_CountrySelect.CountrySelect, {
     minWidth: isMobile ? '100%' : '350px',
     options: countrySelectOptions,
     onChange: handleCountryChange,

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

@@ -16,6 +16,7 @@ var _useNormalizers2 = require("./hooks/useNormalizers");
 var _useIncrement2 = require("./hooks/useIncrement");
 var _useIncrementDisabledFlags = require("./hooks/useIncrementDisabledFlags");
 var _constants = require("../constants");
+var _ModernPlaceholder = require("../ModernPlaceholder");
 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); }
@@ -73,15 +74,14 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
   }, [decrement, value, onChange]);
   var inputPlaceholder = (0, _react.useMemo)(function () {
     if (useModernStyles) {
-      if (!inFocus) {
-        return placeholder;
-      } else {
-        return undefined;
-      }
+      return undefined;
     } else {
       return placeholder;
     }
-  }, [placeholder, useModernStyles, inFocus]);
+  }, [placeholder, useModernStyles]);
+  var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
+    return !inFocus && value === null;
+  }, [inFocus, value]);
   var inputLabel = (0, _react.useMemo)(function () {
     if (useModernStyles) {
       if (value || inFocus) {
@@ -105,7 +105,11 @@ var PositiveIntegerInput = exports.PositiveIntegerInput = function PositiveInteg
     label: inputLabel,
     useModernStyles: useModernStyles,
     size: size
-  }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+  }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, useModernStyles && placeholder && /*#__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({
     name: name,
     hasError: hasError,
     inFocus: inFocus,

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

@@ -12,6 +12,7 @@ var _PureInput = require("../../../PureInput");
 var _Arrow = require("../../../../common/Arrow");
 var _ResetButton = require("../../../ResetButton");
 var _constants = require("../../../constants");
+var _ModernPlaceholder = require("../../../ModernPlaceholder");
 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); }
@@ -34,6 +35,9 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     _ref$useModernStyles = _ref.useModernStyles,
     useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
   var isShowResetIcon = !!value && !!onReset;
+  var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
+    return useModernStyles && !isOpen && !value;
+  }, [isOpen, useModernStyles, value]);
   var paddingOptions = (0, _react.useMemo)(function () {
     if ((value || isOpen) && useModernStyles && label) {
       return _constants.MODERN_STYLE_SIZE_PARAMS_MAP[size];
@@ -47,12 +51,17 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     required: required,
     useModernStyles: useModernStyles,
     size: size
-  }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+  }, /*#__PURE__*/_react["default"].createElement(S.ControlWrapper, null, useModernStyles && placeholder && /*#__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({
     ref: ref,
     hasError: hasError,
     inFocus: inFocus,
     name: name,
-    placeholder: placeholder,
+    placeholder: useModernStyles ? undefined : placeholder,
     onFocus: onFocus,
     onBlur: onBlur,
     value: value,

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

@@ -220,17 +220,6 @@ var Select = exports.Select = function Select(_ref) {
       return label;
     }
   }, [isOpen, label, selectedOption, useModernStyles]);
-  var inputPlaceholder = (0, _react.useMemo)(function () {
-    if (useModernStyles) {
-      if (!isOpen) {
-        return placeholder;
-      } else {
-        return undefined;
-      }
-    } else {
-      return placeholder;
-    }
-  }, [isOpen, placeholder, useModernStyles]);
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
     ref: isDrawerOptions ? undefined : wrapperRef
   }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_Input.Input, {
@@ -238,7 +227,7 @@ var Select = exports.Select = function Select(_ref) {
     label: inputLabel,
     hasError: hasError,
     inFocus: inFocus,
-    placeholder: inputPlaceholder,
+    placeholder: placeholder,
     onFocus: isDrawerOptions ? undefined : handleFocus,
     onBlur: isDrawerOptions ? undefined : handleBlur,
     value: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '',

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

@@ -11,6 +11,7 @@ var _InputLabel = require("../InputLabel");
 var _PureInput = require("../PureInput");
 var _useInputFocus2 = require("../../../hooks/useInputFocus");
 var _constants = require("../constants");
+var _ModernPlaceholder = require("../ModernPlaceholder");
 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); }
@@ -71,15 +72,14 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
   }, [value, inFocus, useModernStyles, size, inputLabel]);
   var inputPlaceholder = (0, _react.useMemo)(function () {
     if (useModernStyles) {
-      if (!inFocus) {
-        return placeholder;
-      } else {
-        return undefined;
-      }
+      return undefined;
     } else {
       return placeholder;
     }
-  }, [inFocus, placeholder, useModernStyles]);
+  }, [placeholder, useModernStyles]);
+  var isModernPlaceholderVisible = (0, _react.useMemo)(function () {
+    return !inFocus && !value;
+  }, [inFocus, value]);
   return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
     inFocus: inFocus,
     label: inputLabel,
@@ -87,7 +87,12 @@ var TextInput = exports.TextInput = /*#__PURE__*/_react["default"].forwardRef(fu
     required: required,
     size: size,
     useModernStyles: useModernStyles
-  }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, /*#__PURE__*/_react["default"].createElement(_PureInput.PureInput, _extends({
+  }, /*#__PURE__*/_react["default"].createElement(S.InputLabelContent, null, useModernStyles && placeholder && /*#__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({
     id: id,
     ref: ref,
     name: name,

package/package.json

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