glints-aries 4.1.8 → 4.1.9

package/es/@next/Input/Input.d.ts

@@ -7,6 +7,8 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     floatingFontSize?: string;
     isPlaceholderFloating?: boolean;
     required?: boolean;
+    placeholderColor?: string;
+    floatingPlaceholderTop?: number;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     inputRef?: React.Ref<HTMLInputElement>;

package/es/@next/Input/Input.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["error", "disabled", "prefix", "suffix", "inputRef", "height", "border", "borderRadius", "floatingFontSize", "isPlaceholderFloating", "placeholder", "required"];
+var _excluded = ["error", "disabled", "prefix", "suffix", "inputRef", "height", "border", "borderRadius", "floatingFontSize", "isPlaceholderFloating", "placeholder", "required", "placeholderColor", "floatingPlaceholderTop"];
 import React, { useEffect, useRef } from 'react';
 import { AsteriskIcon, FloatingLabel, StyledContainer, StyledInput, StyledPrefixContainer, StyledSuffixContainer } from './InputStyle';
 export var Input = /*#__PURE__*/React.forwardRef(function Input(_ref, ref) {
@@ -16,6 +16,8 @@ export var Input = /*#__PURE__*/React.forwardRef(function Input(_ref, ref) {
     isPlaceholderFloating = _ref.isPlaceholderFloating,
     placeholder = _ref.placeholder,
     required = _ref.required,
+    placeholderColor = _ref.placeholderColor,
+    floatingPlaceholderTop = _ref.floatingPlaceholderTop,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var hasPrefix = !!prefix;
   var hasSuffix = !!suffix;
@@ -62,13 +64,16 @@ export var Input = /*#__PURE__*/React.forwardRef(function Input(_ref, ref) {
     suffixWidth: suffixWidth
   }, /*#__PURE__*/React.createElement(Prefix, null), /*#__PURE__*/React.createElement(StyledInput, _extends({
     ref: inputRef,
-    placeholder: isPlaceholderFloating ? undefined : selectedPlaceholder,
+    placeholder: isPlaceholderFloating && !disabled ? undefined : selectedPlaceholder,
     borderRadius: borderRadius,
     border: border,
     height: height,
     disabled: disabled
-  }, props)), isPlaceholderFloating && /*#__PURE__*/React.createElement(FloatingLabel, {
+  }, props)), isPlaceholderFloating && !disabled && /*#__PURE__*/React.createElement(FloatingLabel, {
     "data-testid": "textarea-label",
-    fontSize: floatingFontSize
+    "data-error": error,
+    fontSize: floatingFontSize,
+    color: placeholderColor,
+    top: floatingPlaceholderTop
   }, placeholder, required && /*#__PURE__*/React.createElement(AsteriskIcon, null, "*")), /*#__PURE__*/React.createElement(Suffix, null));
 });

package/es/@next/Input/InputStyle.d.ts

@@ -16,6 +16,7 @@ export declare const FloatingLabel: import("styled-components").StyledComponent<
     top?: number;
     left?: number;
     fontSize?: string;
+    color?: string;
 }, never>;
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, InputProps, never>;
 export declare const AsteriskIcon: import("styled-components").StyledComponent<"span", any, {}, never>;

package/es/@next/Input/InputStyle.js

@@ -27,7 +27,7 @@ export var StyledSuffixContainer = styled(StyledPrefixContainer).withConfig({
 export var FloatingLabel = styled.label.withConfig({
   displayName: "InputStyle__FloatingLabel",
   componentId: "sc-15z2mnd-3"
-})(["position:absolute;left:", "em;top:", "em;visibility:visible;padding:0 0.3em;background:white;font-size:", ";color:", ";"], function (_ref2) {
+})(["position:absolute;left:", "em;top:", "em;visibility:visible;padding:0 0.3em;background:white;font-size:", ";color:", ";transition:color 0.2s ease-in-out;pointer-events:none;[data-error='true'] &{color:", ";}"], function (_ref2) {
   var left = _ref2.left;
   return left != null ? left : '0.5';
 }, function (_ref3) {
@@ -36,18 +36,21 @@ export var FloatingLabel = styled.label.withConfig({
 }, function (_ref4) {
   var fontSize = _ref4.fontSize;
   return fontSize != null ? fontSize : '12px';
-}, Greyscale.devilsgrey);
+}, function (_ref5) {
+  var color = _ref5.color;
+  return color != null ? color : Greyscale.devilsgrey;
+}, Red.B93);
 export var StyledInput = styled.input.withConfig({
   displayName: "InputStyle__StyledInput",
   componentId: "sc-15z2mnd-4"
-})(["background:", ";box-sizing:border-box;border:", ";border-radius:", ";padding:0 12px;font-family:", ",sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";flex:none;order:1;align-self:stretch;flex-grow:0;height:", ";&::placeholder{color:", ";}&:focus{outline:none;box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}@media (max-width:", "){font-size:14px;}"], Neutral.B100, function (_ref5) {
-  var border = _ref5.border;
+})(["background:", ";box-sizing:border-box;border:", ";border-radius:", ";padding:0 12px;font-family:", ",sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";flex:none;order:1;align-self:stretch;flex-grow:0;height:", ";&::placeholder{color:", ";}&:focus{outline:none;box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}@media (max-width:", "){font-size:14px;}"], Neutral.B100, function (_ref6) {
+  var border = _ref6.border;
   return border != null ? border : "1px solid " + Neutral.B68;
-}, function (_ref6) {
-  var borderRadius = _ref6.borderRadius;
+}, function (_ref7) {
+  var borderRadius = _ref7.borderRadius;
   return borderRadius != null ? borderRadius : borderRadius4;
-}, NotoSans, Neutral.B18, function (_ref7) {
-  var height = _ref7.height;
+}, NotoSans, Neutral.B18, function (_ref8) {
+  var height = _ref8.height;
   return height != null ? height : "36px";
 }, Neutral.B68, Neutral.B100, Breakpoints.large);
 export var AsteriskIcon = styled.span.withConfig({

package/es/@next/NumberInput/NumberInput.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["border", "borderRadius", "isPlaceholderFloating", "required"];
+var _excluded = ["required", "border", "borderRadius", "isPlaceholderFloating", "floatingFontSize", "placeholderColor", "floatingPlaceholderTop"];
 import React from 'react';
 import styled from 'styled-components';
 import { Input } from '../Input/Input';
@@ -9,10 +9,13 @@ var StyledInput = styled(Input).withConfig({
   componentId: "sc-1f5ws9y-0"
 })(["&[type='number']{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;}&[type='number']::-webkit-inner-spin-button,&[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;}"]);
 export var NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(_ref, ref) {
-  var border = _ref.border,
+  var required = _ref.required,
+    border = _ref.border,
     borderRadius = _ref.borderRadius,
     isPlaceholderFloating = _ref.isPlaceholderFloating,
-    required = _ref.required,
+    floatingFontSize = _ref.floatingFontSize,
+    placeholderColor = _ref.placeholderColor,
+    floatingPlaceholderTop = _ref.floatingPlaceholderTop,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement(StyledInput, _extends({
     ref: ref,
@@ -21,6 +24,9 @@ export var NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(_ref
     border: border,
     borderRadius: borderRadius,
     required: required,
-    isPlaceholderFloating: isPlaceholderFloating
+    isPlaceholderFloating: isPlaceholderFloating,
+    floatingFontSize: floatingFontSize,
+    placeholderColor: placeholderColor,
+    floatingPlaceholderTop: floatingPlaceholderTop
   }));
 });

package/es/@next/PasswordInput/PasswordInput.d.ts

@@ -7,6 +7,9 @@ export declare type PasswordInputProps = Omit<React.InputHTMLAttributes<HTMLInpu
     borderRadius?: string;
     required?: boolean;
     isPlaceholderFloating?: boolean;
+    floatingFontSize?: string;
+    placeholderColor?: string;
+    floatingPlaceholderTop?: number;
 };
 export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> & {
     onChange?: (value: string) => void;
@@ -16,4 +19,7 @@ export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<React.I
     borderRadius?: string;
     required?: boolean;
     isPlaceholderFloating?: boolean;
+    floatingFontSize?: string;
+    placeholderColor?: string;
+    floatingPlaceholderTop?: number;
 } & React.RefAttributes<HTMLInputElement>>;

package/es/@next/PasswordInput/PasswordInput.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["value", "onChange", "error", "height", "border", "borderRadius", "required", "isPlaceholderFloating"];
+var _excluded = ["value", "onChange", "error", "height", "border", "borderRadius", "required", "isPlaceholderFloating", "floatingFontSize", "placeholderColor", "floatingPlaceholderTop"];
 import React, { useState } from 'react';
 import { Icon } from '../Icon';
 import { Input } from '../Input/Input';
@@ -14,6 +14,9 @@ export var PasswordInput = /*#__PURE__*/React.forwardRef(function PasswordInput(
     borderRadius = _ref.borderRadius,
     required = _ref.required,
     isPlaceholderFloating = _ref.isPlaceholderFloating,
+    floatingFontSize = _ref.floatingFontSize,
+    placeholderColor = _ref.placeholderColor,
+    floatingPlaceholderTop = _ref.floatingPlaceholderTop,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(false),
     showPassword = _useState[0],
@@ -41,6 +44,9 @@ export var PasswordInput = /*#__PURE__*/React.forwardRef(function PasswordInput(
     border: border,
     borderRadius: borderRadius,
     required: required,
-    isPlaceholderFloating: isPlaceholderFloating
+    isPlaceholderFloating: isPlaceholderFloating,
+    floatingFontSize: floatingFontSize,
+    placeholderColor: placeholderColor,
+    floatingPlaceholderTop: floatingPlaceholderTop
   }, props)));
 });

package/es/@next/Select/Select.d.ts

@@ -56,7 +56,8 @@ export interface SelectProps {
     border?: string;
     borderRadius?: string;
     required?: boolean;
+    isPopoverActive?: boolean;
     isPlaceholderFloating?: boolean;
 }
-export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onFocus, onRemoveTag, onSelect, onSelectClick, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, height, zIndexOverride, border, borderRadius, required, isPlaceholderFloating, }: SelectProps) => JSX.Element;
+export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onFocus, onRemoveTag, onSelect, onSelectClick, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, height, zIndexOverride, border, borderRadius, required, isPlaceholderFloating, isPopoverActive, }: SelectProps) => JSX.Element;
 export {};

package/es/@next/Select/Select.js

@@ -48,7 +48,8 @@ export var Select = function Select(_ref) {
     border = _ref.border,
     borderRadius = _ref.borderRadius,
     required = _ref.required,
-    isPlaceholderFloating = _ref.isPlaceholderFloating;
+    isPlaceholderFloating = _ref.isPlaceholderFloating,
+    isPopoverActive = _ref.isPopoverActive;
   var _useState = useState(false),
     popoverActive = _useState[0],
     setPopoverActive = _useState[1];
@@ -78,6 +79,11 @@ export var Select = function Select(_ref) {
   var updateMenuOptions = function updateMenuOptions(newState) {
     setMenuOptions(newState);
   };
+  useEffect(function () {
+    if (isPopoverActive === false && popoverActive) {
+      setPopoverActive(false);
+    }
+  }, [isPopoverActive, popoverActive]);
   var handleClose = function handleClose() {
     setPopoverActive(false);
     onClose == null ? void 0 : onClose();

package/es/@next/Select/components/Activator/ActivatorStyle.d.ts

@@ -12,6 +12,8 @@ export declare const StyledTextInput: import("styled-components").StyledComponen
     required?: boolean;
     isPlaceholderFloating?: boolean;
     floatingFontSize?: string;
+    placeholderColor?: string;
+    floatingPlaceholderTop?: number;
 } & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;
 export declare const StyledSelectTypography: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("../../../Typography").TypographyProps) => JSX.Element, any, {}, never>;
 export declare const WithPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Select/components/SearchableSelectInput/SearchableSelectInput.js

@@ -141,7 +141,9 @@ export var SearchableSelectInput = /*#__PURE__*/forwardRef(function SearchableSe
     height: height
   }, prefix), showSelected && /*#__PURE__*/React.createElement(StyledSelectedValue, {
     className: "searchable-select",
-    onClick: handleSelectedClick
+    onClick: handleSelectedClick,
+    border: border,
+    borderRadius: borderRadius
   }, /*#__PURE__*/React.createElement(StyledSelected, null, ((_options$find = options.find(function (option) {
     return option.value === selectedValue;
   })) == null ? void 0 : _options$find.label) || selectedValue)), showInput && /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement(StyledInput, _extends({

package/es/@next/Select/components/SearchableSelectInput/SearchableSelectInputStyle.d.ts

@@ -1,6 +1,9 @@
 export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, import("../../../Input/Input").InputProps & import("../../../Input/InputStyle").PreffixSuffixWidthProps, never>;
 export declare const StyledSelected: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledSelectedValue: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSelectedValue: import("styled-components").StyledComponent<"div", any, {
+    border?: string;
+    borderRadius?: string;
+}, never>;
 export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ClearSelectedContainer: import("styled-components").StyledComponent<"div", any, {
     height?: string;

package/es/@next/Select/components/SearchableSelectInput/SearchableSelectInputStyle.js

@@ -26,7 +26,13 @@ export var StyledSelected = styled.span.withConfig({
 export var StyledSelectedValue = styled.div.withConfig({
   displayName: "SearchableSelectInputStyle__StyledSelectedValue",
   componentId: "sc-1oj168h-2"
-})(["border:1px solid ", ";border-radius:", ";background:transparent;box-sizing:border-box;padding:0 12px;height:36px;display:flex;align-items:center;grid-column:1 / 1;grid-row:1 / 1;font-family:", ",sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";@media (max-width:", "){font-size:14px;}"], Neutral.B68, borderRadius4, NotoSans, Neutral.B18, Breakpoints.large);
+})(["border:", ";border-radius:", ";background:transparent;box-sizing:border-box;padding:0 12px;height:36px;display:flex;align-items:center;grid-column:1 / 1;grid-row:1 / 1;font-family:", ",sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";@media (max-width:", "){font-size:14px;}"], function (_ref) {
+  var border = _ref.border;
+  return border != null ? border : "1px solid " + Neutral.B68;
+}, function (_ref2) {
+  var borderRadius = _ref2.borderRadius;
+  return borderRadius != null ? borderRadius : borderRadius4;
+}, NotoSans, Neutral.B18, Breakpoints.large);
 export var InputContainer = styled.div.withConfig({
   displayName: "SearchableSelectInputStyle__InputContainer",
   componentId: "sc-1oj168h-3"

package/es/@next/TextArea/TextArea.d.ts

@@ -18,6 +18,8 @@ export declare type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElem
     required?: boolean;
     isPlaceholderFloating?: boolean;
     floatingFontSize?: string;
+    floatingPlaceholderTop?: number;
+    placeholderColor?: string;
 };
 export declare const TextArea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> & {
     value: string;
@@ -38,4 +40,6 @@ export declare const TextArea: React.ForwardRefExoticComponent<Omit<React.Textar
     required?: boolean;
     isPlaceholderFloating?: boolean;
     floatingFontSize?: string;
+    floatingPlaceholderTop?: number;
+    placeholderColor?: string;
 } & React.RefAttributes<HTMLTextAreaElement>>;

package/es/@next/TextArea/TextArea.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange", "forwardedRef", "canExceedMaxLength", "required", "border", "borderRadius", "isPlaceholderFloating", "floatingFontSize", "placeholder"];
+var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange", "forwardedRef", "canExceedMaxLength", "required", "border", "borderRadius", "isPlaceholderFloating", "floatingFontSize", "placeholder", "floatingPlaceholderTop", "placeholderColor"];
 import React, { useRef, useState } from 'react';
 import { StyledTextAreaContainer, StyledTextArea, StyledWordCountContainer } from './TextAreaStyle';
 import { Typography } from '../Typography';
@@ -26,6 +26,8 @@ var _TextArea = function _TextArea(_ref) {
     isPlaceholderFloating = _ref.isPlaceholderFloating,
     floatingFontSize = _ref.floatingFontSize,
     placeholder = _ref.placeholder,
+    floatingPlaceholderTop = _ref.floatingPlaceholderTop,
+    placeholderColor = _ref.placeholderColor,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(false),
     isFocused = _useState[0],
@@ -70,16 +72,19 @@ var _TextArea = function _TextArea(_ref) {
     },
     border: border,
     borderRadius: borderRadius,
-    placeholder: isPlaceholderFloating ? undefined : placeholder
+    placeholder: isPlaceholderFloating && !disabled ? undefined : placeholder
   }, props)), hasMaxLengthEnforced && /*#__PURE__*/React.createElement(StyledWordCountContainer, {
     "data-disabled": disabled,
     "data-error": hasError
   }, /*#__PURE__*/React.createElement(Typography, {
     as: "span",
     variant: "overline"
-  }, charCount, " / ", maxLength)), isPlaceholderFloating && /*#__PURE__*/React.createElement(FloatingLabel, {
+  }, charCount, " / ", maxLength)), isPlaceholderFloating && !disabled && /*#__PURE__*/React.createElement(FloatingLabel, {
     "data-testid": "textarea-label",
-    fontSize: floatingFontSize
+    "data-error": error,
+    fontSize: floatingFontSize,
+    color: placeholderColor,
+    top: floatingPlaceholderTop
   }, placeholder, required && /*#__PURE__*/React.createElement(AsteriskIcon, null, "*")));
 };
 var forwardRef = function forwardRef(props, ref) {

package/es/@next/TextInput/TextInput.d.ts

@@ -9,6 +9,8 @@ export declare type TextInputProps = Omit<InputProps, 'type' | 'onChange'> & {
     required?: boolean;
     isPlaceholderFloating?: boolean;
     floatingFontSize?: string;
+    placeholderColor?: string;
+    floatingPlaceholderTop?: number;
 };
 export declare const TextInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "onChange"> & {
     canClear?: boolean;
@@ -19,4 +21,6 @@ export declare const TextInput: React.ForwardRefExoticComponent<Omit<InputProps,
     required?: boolean;
     isPlaceholderFloating?: boolean;
     floatingFontSize?: string;
+    placeholderColor?: string;
+    floatingPlaceholderTop?: number;
 } & React.RefAttributes<HTMLInputElement>>;

package/es/@next/TextInput/TextInput.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["canClear", "suffix", "value", "onChange", "error", "height", "border", "borderRadius", "required", "floatingFontSize", "isPlaceholderFloating"];
+var _excluded = ["canClear", "suffix", "value", "onChange", "error", "height", "border", "borderRadius", "required", "floatingFontSize", "isPlaceholderFloating", "placeholderColor", "floatingPlaceholderTop"];
 import React, { useEffect, useState } from 'react';
 import { Icon } from '../Icon';
 import { Input } from '../Input/Input';
@@ -16,6 +16,8 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, re
     required = _ref.required,
     floatingFontSize = _ref.floatingFontSize,
     isPlaceholderFloating = _ref.isPlaceholderFloating,
+    placeholderColor = _ref.placeholderColor,
+    floatingPlaceholderTop = _ref.floatingPlaceholderTop,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var ClearIcon = function ClearIcon() {
     return /*#__PURE__*/React.createElement(Icon, {
@@ -55,6 +57,8 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, re
     borderRadius: borderRadius,
     floatingFontSize: floatingFontSize,
     isPlaceholderFloating: isPlaceholderFloating,
+    placeholderColor: placeholderColor,
+    floatingPlaceholderTop: floatingPlaceholderTop,
     required: required,
     height: height
   }, props));

package/lib/@next/Input/Input.d.ts

@@ -7,6 +7,8 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     floatingFontSize?: string;
     isPlaceholderFloating?: boolean;
     required?: boolean;
+    placeholderColor?: string;
+    floatingPlaceholderTop?: number;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     inputRef?: React.Ref<HTMLInputElement>;

package/lib/@next/Input/Input.js

@@ -7,7 +7,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _InputStyle = require("./InputStyle");
-var _excluded = ["error", "disabled", "prefix", "suffix", "inputRef", "height", "border", "borderRadius", "floatingFontSize", "isPlaceholderFloating", "placeholder", "required"];
+var _excluded = ["error", "disabled", "prefix", "suffix", "inputRef", "height", "border", "borderRadius", "floatingFontSize", "isPlaceholderFloating", "placeholder", "required", "placeholderColor", "floatingPlaceholderTop"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 var Input = /*#__PURE__*/_react["default"].forwardRef(function Input(_ref, ref) {
@@ -23,6 +23,8 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function Input(_ref, ref)
     isPlaceholderFloating = _ref.isPlaceholderFloating,
     placeholder = _ref.placeholder,
     required = _ref.required,
+    placeholderColor = _ref.placeholderColor,
+    floatingPlaceholderTop = _ref.floatingPlaceholderTop,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var hasPrefix = !!prefix;
   var hasSuffix = !!suffix;
@@ -69,14 +71,17 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function Input(_ref, ref)
     suffixWidth: suffixWidth
   }, /*#__PURE__*/_react["default"].createElement(Prefix, null), /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledInput, (0, _extends2["default"])({
     ref: inputRef,
-    placeholder: isPlaceholderFloating ? undefined : selectedPlaceholder,
+    placeholder: isPlaceholderFloating && !disabled ? undefined : selectedPlaceholder,
     borderRadius: borderRadius,
     border: border,
     height: height,
     disabled: disabled
-  }, props)), isPlaceholderFloating && /*#__PURE__*/_react["default"].createElement(_InputStyle.FloatingLabel, {
+  }, props)), isPlaceholderFloating && !disabled && /*#__PURE__*/_react["default"].createElement(_InputStyle.FloatingLabel, {
     "data-testid": "textarea-label",
-    fontSize: floatingFontSize
+    "data-error": error,
+    fontSize: floatingFontSize,
+    color: placeholderColor,
+    top: floatingPlaceholderTop
   }, placeholder, required && /*#__PURE__*/_react["default"].createElement(_InputStyle.AsteriskIcon, null, "*")), /*#__PURE__*/_react["default"].createElement(Suffix, null));
 });
 exports.Input = Input;

package/lib/@next/Input/InputStyle.d.ts

@@ -16,6 +16,7 @@ export declare const FloatingLabel: import("styled-components").StyledComponent<
     top?: number;
     left?: number;
     fontSize?: string;
+    color?: string;
 }, never>;
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, InputProps, never>;
 export declare const AsteriskIcon: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/@next/Input/InputStyle.js

@@ -37,7 +37,7 @@ exports.StyledSuffixContainer = StyledSuffixContainer;
 var FloatingLabel = _styledComponents["default"].label.withConfig({
   displayName: "InputStyle__FloatingLabel",
   componentId: "sc-15z2mnd-3"
-})(["position:absolute;left:", "em;top:", "em;visibility:visible;padding:0 0.3em;background:white;font-size:", ";color:", ";"], function (_ref2) {
+})(["position:absolute;left:", "em;top:", "em;visibility:visible;padding:0 0.3em;background:white;font-size:", ";color:", ";transition:color 0.2s ease-in-out;pointer-events:none;[data-error='true'] &{color:", ";}"], function (_ref2) {
   var left = _ref2.left;
   return left != null ? left : '0.5';
 }, function (_ref3) {
@@ -46,19 +46,22 @@ var FloatingLabel = _styledComponents["default"].label.withConfig({
 }, function (_ref4) {
   var fontSize = _ref4.fontSize;
   return fontSize != null ? fontSize : '12px';
-}, _Colors.Greyscale.devilsgrey);
+}, function (_ref5) {
+  var color = _ref5.color;
+  return color != null ? color : _Colors.Greyscale.devilsgrey;
+}, _colors.Red.B93);
 exports.FloatingLabel = FloatingLabel;
 var StyledInput = _styledComponents["default"].input.withConfig({
   displayName: "InputStyle__StyledInput",
   componentId: "sc-15z2mnd-4"
-})(["background:", ";box-sizing:border-box;border:", ";border-radius:", ";padding:0 12px;font-family:", ",sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";flex:none;order:1;align-self:stretch;flex-grow:0;height:", ";&::placeholder{color:", ";}&:focus{outline:none;box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}@media (max-width:", "){font-size:14px;}"], _colors.Neutral.B100, function (_ref5) {
-  var border = _ref5.border;
+})(["background:", ";box-sizing:border-box;border:", ";border-radius:", ";padding:0 12px;font-family:", ",sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";flex:none;order:1;align-self:stretch;flex-grow:0;height:", ";&::placeholder{color:", ";}&:focus{outline:none;box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}@media (max-width:", "){font-size:14px;}"], _colors.Neutral.B100, function (_ref6) {
+  var border = _ref6.border;
   return border != null ? border : "1px solid " + _colors.Neutral.B68;
-}, function (_ref6) {
-  var borderRadius = _ref6.borderRadius;
+}, function (_ref7) {
+  var borderRadius = _ref7.borderRadius;
   return borderRadius != null ? borderRadius : _borderRadius.borderRadius4;
-}, _fonts.NotoSans, _colors.Neutral.B18, function (_ref7) {
-  var height = _ref7.height;
+}, _fonts.NotoSans, _colors.Neutral.B18, function (_ref8) {
+  var height = _ref8.height;
   return height != null ? height : "36px";
 }, _colors.Neutral.B68, _colors.Neutral.B100, Breakpoints.large);
 exports.StyledInput = StyledInput;

package/lib/@next/NumberInput/NumberInput.js

@@ -8,16 +8,19 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Input = require("../Input/Input");
-var _excluded = ["border", "borderRadius", "isPlaceholderFloating", "required"];
+var _excluded = ["required", "border", "borderRadius", "isPlaceholderFloating", "floatingFontSize", "placeholderColor", "floatingPlaceholderTop"];
 var StyledInput = (0, _styledComponents["default"])(_Input.Input).withConfig({
   displayName: "NumberInput__StyledInput",
   componentId: "sc-1f5ws9y-0"
 })(["&[type='number']{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;}&[type='number']::-webkit-inner-spin-button,&[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;}"]);
 var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function NumberInput(_ref, ref) {
-  var border = _ref.border,
+  var required = _ref.required,
+    border = _ref.border,
     borderRadius = _ref.borderRadius,
     isPlaceholderFloating = _ref.isPlaceholderFloating,
-    required = _ref.required,
+    floatingFontSize = _ref.floatingFontSize,
+    placeholderColor = _ref.placeholderColor,
+    floatingPlaceholderTop = _ref.floatingPlaceholderTop,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(StyledInput, (0, _extends2["default"])({
     ref: ref,
@@ -26,7 +29,10 @@ var NumberInput = /*#__PURE__*/_react["default"].forwardRef(function NumberInput
     border: border,
     borderRadius: borderRadius,
     required: required,
-    isPlaceholderFloating: isPlaceholderFloating
+    isPlaceholderFloating: isPlaceholderFloating,
+    floatingFontSize: floatingFontSize,
+    placeholderColor: placeholderColor,
+    floatingPlaceholderTop: floatingPlaceholderTop
   }));
 });
 exports.NumberInput = NumberInput;

package/lib/@next/PasswordInput/PasswordInput.d.ts

@@ -7,6 +7,9 @@ export declare type PasswordInputProps = Omit<React.InputHTMLAttributes<HTMLInpu
     borderRadius?: string;
     required?: boolean;
     isPlaceholderFloating?: boolean;
+    floatingFontSize?: string;
+    placeholderColor?: string;
+    floatingPlaceholderTop?: number;
 };
 export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> & {
     onChange?: (value: string) => void;
@@ -16,4 +19,7 @@ export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<React.I
     borderRadius?: string;
     required?: boolean;
     isPlaceholderFloating?: boolean;
+    floatingFontSize?: string;
+    placeholderColor?: string;
+    floatingPlaceholderTop?: number;
 } & React.RefAttributes<HTMLInputElement>>;

package/lib/@next/PasswordInput/PasswordInput.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Icon = require("../Icon");
 var _Input = require("../Input/Input");
 var _PasswordInputStyle = require("./PasswordInputStyle");
-var _excluded = ["value", "onChange", "error", "height", "border", "borderRadius", "required", "isPlaceholderFloating"];
+var _excluded = ["value", "onChange", "error", "height", "border", "borderRadius", "required", "isPlaceholderFloating", "floatingFontSize", "placeholderColor", "floatingPlaceholderTop"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 var PasswordInput = /*#__PURE__*/_react["default"].forwardRef(function PasswordInput(_ref, ref) {
@@ -21,6 +21,9 @@ var PasswordInput = /*#__PURE__*/_react["default"].forwardRef(function PasswordI
     borderRadius = _ref.borderRadius,
     required = _ref.required,
     isPlaceholderFloating = _ref.isPlaceholderFloating,
+    floatingFontSize = _ref.floatingFontSize,
+    placeholderColor = _ref.placeholderColor,
+    floatingPlaceholderTop = _ref.floatingPlaceholderTop,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
     showPassword = _useState[0],
@@ -48,7 +51,10 @@ var PasswordInput = /*#__PURE__*/_react["default"].forwardRef(function PasswordI
     border: border,
     borderRadius: borderRadius,
     required: required,
-    isPlaceholderFloating: isPlaceholderFloating
+    isPlaceholderFloating: isPlaceholderFloating,
+    floatingFontSize: floatingFontSize,
+    placeholderColor: placeholderColor,
+    floatingPlaceholderTop: floatingPlaceholderTop
   }, props)));
 });
 exports.PasswordInput = PasswordInput;

package/lib/@next/Select/Select.d.ts

@@ -56,7 +56,8 @@ export interface SelectProps {
     border?: string;
     borderRadius?: string;
     required?: boolean;
+    isPopoverActive?: boolean;
     isPlaceholderFloating?: boolean;
 }
-export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onFocus, onRemoveTag, onSelect, onSelectClick, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, height, zIndexOverride, border, borderRadius, required, isPlaceholderFloating, }: SelectProps) => JSX.Element;
+export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onFocus, onRemoveTag, onSelect, onSelectClick, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, height, zIndexOverride, border, borderRadius, required, isPlaceholderFloating, isPopoverActive, }: SelectProps) => JSX.Element;
 export {};

package/lib/@next/Select/Select.js

@@ -54,7 +54,8 @@ var Select = function Select(_ref) {
     border = _ref.border,
     borderRadius = _ref.borderRadius,
     required = _ref.required,
-    isPlaceholderFloating = _ref.isPlaceholderFloating;
+    isPlaceholderFloating = _ref.isPlaceholderFloating,
+    isPopoverActive = _ref.isPopoverActive;
   var _useState = (0, _react.useState)(false),
     popoverActive = _useState[0],
     setPopoverActive = _useState[1];
@@ -84,6 +85,11 @@ var Select = function Select(_ref) {
   var updateMenuOptions = function updateMenuOptions(newState) {
     setMenuOptions(newState);
   };
+  (0, _react.useEffect)(function () {
+    if (isPopoverActive === false && popoverActive) {
+      setPopoverActive(false);
+    }
+  }, [isPopoverActive, popoverActive]);
   var handleClose = function handleClose() {
     setPopoverActive(false);
     onClose == null ? void 0 : onClose();

package/lib/@next/Select/components/Activator/ActivatorStyle.d.ts

@@ -12,6 +12,8 @@ export declare const StyledTextInput: import("styled-components").StyledComponen
     required?: boolean;
     isPlaceholderFloating?: boolean;
     floatingFontSize?: string;
+    placeholderColor?: string;
+    floatingPlaceholderTop?: number;
 } & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;
 export declare const StyledSelectTypography: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("../../../Typography").TypographyProps) => JSX.Element, any, {}, never>;
 export declare const WithPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/@next/Select/components/SearchableSelectInput/SearchableSelectInput.js

@@ -148,7 +148,9 @@ var SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function Searcha
     height: height
   }, prefix), showSelected && /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.StyledSelectedValue, {
     className: "searchable-select",
-    onClick: handleSelectedClick
+    onClick: handleSelectedClick,
+    border: border,
+    borderRadius: borderRadius
   }, /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.StyledSelected, null, ((_options$find = options.find(function (option) {
     return option.value === selectedValue;
   })) == null ? void 0 : _options$find.label) || selectedValue)), showInput && /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.InputContainer, null, /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledInput, (0, _extends2["default"])({

package/lib/@next/Select/components/SearchableSelectInput/SearchableSelectInputStyle.d.ts

@@ -1,6 +1,9 @@
 export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, import("../../../Input/Input").InputProps & import("../../../Input/InputStyle").PreffixSuffixWidthProps, never>;
 export declare const StyledSelected: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const StyledSelectedValue: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSelectedValue: import("styled-components").StyledComponent<"div", any, {
+    border?: string;
+    borderRadius?: string;
+}, never>;
 export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ClearSelectedContainer: import("styled-components").StyledComponent<"div", any, {
     height?: string;

package/lib/@next/Select/components/SearchableSelectInput/SearchableSelectInputStyle.js

@@ -35,7 +35,13 @@ exports.StyledSelected = StyledSelected;
 var StyledSelectedValue = _styledComponents["default"].div.withConfig({
   displayName: "SearchableSelectInputStyle__StyledSelectedValue",
   componentId: "sc-1oj168h-2"
-})(["border:1px solid ", ";border-radius:", ";background:transparent;box-sizing:border-box;padding:0 12px;height:36px;display:flex;align-items:center;grid-column:1 / 1;grid-row:1 / 1;font-family:", ",sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";@media (max-width:", "){font-size:14px;}"], _colors.Neutral.B68, _borderRadius.borderRadius4, _fonts.NotoSans, _colors.Neutral.B18, Breakpoints.large);
+})(["border:", ";border-radius:", ";background:transparent;box-sizing:border-box;padding:0 12px;height:36px;display:flex;align-items:center;grid-column:1 / 1;grid-row:1 / 1;font-family:", ",sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";@media (max-width:", "){font-size:14px;}"], function (_ref) {
+  var border = _ref.border;
+  return border != null ? border : "1px solid " + _colors.Neutral.B68;
+}, function (_ref2) {
+  var borderRadius = _ref2.borderRadius;
+  return borderRadius != null ? borderRadius : _borderRadius.borderRadius4;
+}, _fonts.NotoSans, _colors.Neutral.B18, Breakpoints.large);
 exports.StyledSelectedValue = StyledSelectedValue;
 var InputContainer = _styledComponents["default"].div.withConfig({
   displayName: "SearchableSelectInputStyle__InputContainer",

package/lib/@next/TextArea/TextArea.d.ts

@@ -18,6 +18,8 @@ export declare type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElem
     required?: boolean;
     isPlaceholderFloating?: boolean;
     floatingFontSize?: string;
+    floatingPlaceholderTop?: number;
+    placeholderColor?: string;
 };
 export declare const TextArea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> & {
     value: string;
@@ -38,4 +40,6 @@ export declare const TextArea: React.ForwardRefExoticComponent<Omit<React.Textar
     required?: boolean;
     isPlaceholderFloating?: boolean;
     floatingFontSize?: string;
+    floatingPlaceholderTop?: number;
+    placeholderColor?: string;
 } & React.RefAttributes<HTMLTextAreaElement>>;

package/lib/@next/TextArea/TextArea.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _TextAreaStyle = require("./TextAreaStyle");
 var _Typography = require("../Typography");
 var _InputStyle = require("../Input/InputStyle");
-var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange", "forwardedRef", "canExceedMaxLength", "required", "border", "borderRadius", "isPlaceholderFloating", "floatingFontSize", "placeholder"];
+var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange", "forwardedRef", "canExceedMaxLength", "required", "border", "borderRadius", "isPlaceholderFloating", "floatingFontSize", "placeholder", "floatingPlaceholderTop", "placeholderColor"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 var _TextArea = function _TextArea(_ref) {
@@ -33,6 +33,8 @@ var _TextArea = function _TextArea(_ref) {
     isPlaceholderFloating = _ref.isPlaceholderFloating,
     floatingFontSize = _ref.floatingFontSize,
     placeholder = _ref.placeholder,
+    floatingPlaceholderTop = _ref.floatingPlaceholderTop,
+    placeholderColor = _ref.placeholderColor,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
     isFocused = _useState[0],
@@ -77,16 +79,19 @@ var _TextArea = function _TextArea(_ref) {
     },
     border: border,
     borderRadius: borderRadius,
-    placeholder: isPlaceholderFloating ? undefined : placeholder
+    placeholder: isPlaceholderFloating && !disabled ? undefined : placeholder
   }, props)), hasMaxLengthEnforced && /*#__PURE__*/_react["default"].createElement(_TextAreaStyle.StyledWordCountContainer, {
     "data-disabled": disabled,
     "data-error": hasError
   }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "span",
     variant: "overline"
-  }, charCount, " / ", maxLength)), isPlaceholderFloating && /*#__PURE__*/_react["default"].createElement(_InputStyle.FloatingLabel, {
+  }, charCount, " / ", maxLength)), isPlaceholderFloating && !disabled && /*#__PURE__*/_react["default"].createElement(_InputStyle.FloatingLabel, {
     "data-testid": "textarea-label",
-    fontSize: floatingFontSize
+    "data-error": error,
+    fontSize: floatingFontSize,
+    color: placeholderColor,
+    top: floatingPlaceholderTop
   }, placeholder, required && /*#__PURE__*/_react["default"].createElement(_InputStyle.AsteriskIcon, null, "*")));
 };
 var forwardRef = function forwardRef(props, ref) {

package/lib/@next/TextInput/TextInput.d.ts

@@ -9,6 +9,8 @@ export declare type TextInputProps = Omit<InputProps, 'type' | 'onChange'> & {
     required?: boolean;
     isPlaceholderFloating?: boolean;
     floatingFontSize?: string;
+    placeholderColor?: string;
+    floatingPlaceholderTop?: number;
 };
 export declare const TextInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "onChange"> & {
     canClear?: boolean;
@@ -19,4 +21,6 @@ export declare const TextInput: React.ForwardRefExoticComponent<Omit<InputProps,
     required?: boolean;
     isPlaceholderFloating?: boolean;
     floatingFontSize?: string;
+    placeholderColor?: string;
+    floatingPlaceholderTop?: number;
 } & React.RefAttributes<HTMLInputElement>>;

package/lib/@next/TextInput/TextInput.js

@@ -8,7 +8,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var _Icon = require("../Icon");
 var _Input = require("../Input/Input");
-var _excluded = ["canClear", "suffix", "value", "onChange", "error", "height", "border", "borderRadius", "required", "floatingFontSize", "isPlaceholderFloating"];
+var _excluded = ["canClear", "suffix", "value", "onChange", "error", "height", "border", "borderRadius", "required", "floatingFontSize", "isPlaceholderFloating", "placeholderColor", "floatingPlaceholderTop"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 var TextInput = /*#__PURE__*/_react["default"].forwardRef(function TextInput(_ref, ref) {
@@ -23,6 +23,8 @@ var TextInput = /*#__PURE__*/_react["default"].forwardRef(function TextInput(_re
     required = _ref.required,
     floatingFontSize = _ref.floatingFontSize,
     isPlaceholderFloating = _ref.isPlaceholderFloating,
+    placeholderColor = _ref.placeholderColor,
+    floatingPlaceholderTop = _ref.floatingPlaceholderTop,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var ClearIcon = function ClearIcon() {
     return /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
@@ -62,6 +64,8 @@ var TextInput = /*#__PURE__*/_react["default"].forwardRef(function TextInput(_re
     borderRadius: borderRadius,
     floatingFontSize: floatingFontSize,
     isPlaceholderFloating: isPlaceholderFloating,
+    placeholderColor: placeholderColor,
+    floatingPlaceholderTop: floatingPlaceholderTop,
     required: required,
     height: height
   }, props));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.1.8",
+  "version": "4.1.9",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",