glints-aries 4.1.7 → 4.1.8

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

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["disabled", "error", "filterOptions", "onSelect", "placeholder", "prefix", "selectedValue", "width", "inputValue", "updateInputValue", "onInputChange", "onBlur", "onFocus", "searchableSelectState", "updateSearchableSelectState", "options", "updateMenuOptions"];
+var _excluded = ["disabled", "error", "filterOptions", "onSelect", "placeholder", "prefix", "selectedValue", "width", "inputValue", "updateInputValue", "onInputChange", "onBlur", "onFocus", "searchableSelectState", "updateSearchableSelectState", "options", "updateMenuOptions", "border", "borderRadius", "floatingFontSize", "isPlaceholderFloating", "required", "height"];
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
-import { StyledInput, StyledPrefixContainer } from '../../../Input/InputStyle';
+import { AsteriskIcon, FloatingLabel, StyledInput, StyledPrefixContainer } from '../../../Input/InputStyle';
 import { ClearSelected } from './ClearSelected';
 import { InputContainer, StyledContainer, StyledSelected, StyledSelectedValue } from './SearchableSelectInputStyle';
 export var SearchableSelectInput = /*#__PURE__*/forwardRef(function SearchableSelectInput(_ref, ref) {
@@ -28,6 +28,12 @@ export var SearchableSelectInput = /*#__PURE__*/forwardRef(function SearchableSe
     updateSearchableSelectState = _ref.updateSearchableSelectState,
     options = _ref.options,
     updateMenuOptions = _ref.updateMenuOptions,
+    border = _ref.border,
+    borderRadius = _ref.borderRadius,
+    floatingFontSize = _ref.floatingFontSize,
+    isPlaceholderFloating = _ref.isPlaceholderFloating,
+    required = _ref.required,
+    height = _ref.height,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var inputRef = useRef(null);
   var _useState = useState(false),
@@ -36,6 +42,7 @@ export var SearchableSelectInput = /*#__PURE__*/forwardRef(function SearchableSe
   var _useState2 = useState(false),
     isSelectedClicked = _useState2[0],
     setIsSelectedClicked = _useState2[1];
+  var isShowPlaceholder = showPlaceholder && !isPlaceholderFloating;
   var handleFocus = function handleFocus(e) {
     if (disabled) return;
     setIsSelectedClicked(false);
@@ -119,6 +126,7 @@ export var SearchableSelectInput = /*#__PURE__*/forwardRef(function SearchableSe
       showPlaceholder: true
     });
   }, [selectedValue, handleUpdateSearchableSelectState]);
+  var selectedPlaceholder = required ? placeholder + "*" : placeholder;
   return /*#__PURE__*/React.createElement(StyledContainer, {
     className: "select-input-container",
     ref: ref,
@@ -126,8 +134,12 @@ export var SearchableSelectInput = /*#__PURE__*/forwardRef(function SearchableSe
     "data-disabled": disabled,
     prefixWidth: 37,
     suffixWidth: 33,
-    width: width
-  }, /*#__PURE__*/React.createElement(StyledPrefixContainer, null, prefix), showSelected && /*#__PURE__*/React.createElement(StyledSelectedValue, {
+    width: width,
+    height: height,
+    isPlaceholderFloating: isPlaceholderFloating
+  }, /*#__PURE__*/React.createElement(StyledPrefixContainer, {
+    height: height
+  }, prefix), showSelected && /*#__PURE__*/React.createElement(StyledSelectedValue, {
     className: "searchable-select",
     onClick: handleSelectedClick
   }, /*#__PURE__*/React.createElement(StyledSelected, null, ((_options$find = options.find(function (option) {
@@ -136,13 +148,19 @@ export var SearchableSelectInput = /*#__PURE__*/forwardRef(function SearchableSe
     ref: inputRef,
     onChange: handleInputChange,
     disabled: disabled,
-    placeholder: showPlaceholder ? placeholder : null,
+    placeholder: isShowPlaceholder ? selectedPlaceholder : null,
     value: inputValue,
     onBlur: handleInputBlur,
-    onFocus: handleFocus
+    onFocus: handleFocus,
+    border: border,
+    borderRadius: borderRadius
   }, props))), showClear && !disabled && /*#__PURE__*/React.createElement(ClearSelected, {
     onSelect: onSelect,
     handleClearIconClick: handleClearIconClick,
-    updateInputValue: updateInputValue
-  }));
+    updateInputValue: updateInputValue,
+    height: height
+  }), isPlaceholderFloating && /*#__PURE__*/React.createElement(FloatingLabel, {
+    "data-testid": "textarea-label",
+    fontSize: floatingFontSize
+  }, placeholder, required && /*#__PURE__*/React.createElement(AsteriskIcon, null, "*")));
 });

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

@@ -2,4 +2,10 @@ export declare const StyledContainer: import("styled-components").StyledComponen
 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 InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ClearSelectedContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ClearSelectedContainer: import("styled-components").StyledComponent<"div", any, {
+    height?: string;
+} & {
+    height?: string;
+} & {
+    height?: string;
+}, never>;

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

@@ -7,7 +7,7 @@ import { borderRadius4 } from '../../../utilities/borderRadius';
 export var StyledContainer = styled(StyledInputContainer).withConfig({
   displayName: "SearchableSelectInputStyle__StyledContainer",
   componentId: "sc-1oj168h-0"
-})(["position:relative;height:36px;width:", ";background:", ";box-shadow:0px 1px 0px rgba(0,0,0,0.05);box-sizing:border-box;display:grid;input{background:transparent;z-index:1;width:", ";}&:has(> div > input:focus) > .searchable-select{color:", ";}.searchable-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.searchable-select,input{padding-left:", "px;padding-right:", "px;}&[data-error='true'] .searchable-select{border:1px solid ", ";}&[data-error='true'] .searchable-select:focus{box-shadow:none;}&[data-disabled='true'] .searchable-select{border:1px solid ", ";background:", ";color:", ";}"], function (props) {
+})(["position:relative;height:36px;width:", ";background:", ";box-shadow:0px 1px 0px rgba(0,0,0,0.05);box-sizing:border-box;display:grid;input{background:transparent;z-index:1;width:", ";}&:has(> div > input:focus) > .searchable-select{color:", ";}.searchable-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.searchable-select,input{padding-left:", "px;padding-right:", "px;height:", ";}&[data-error='true'] .searchable-select{border:1px solid ", ";}&[data-error='true'] .searchable-select:focus{box-shadow:none;}&[data-disabled='true'] .searchable-select{border:1px solid ", ";background:", ";color:", ";}"], function (props) {
   return props.width;
 }, Neutral.B100, function (props) {
   return props.width;
@@ -15,6 +15,9 @@ export var StyledContainer = styled(StyledInputContainer).withConfig({
   return props.prefixWidth;
 }, function (props) {
   return props.suffixWidth;
+}, function (props) {
+  var _props$height;
+  return (_props$height = props.height) != null ? _props$height : '36px';
 }, Red.B93, Neutral.B85, Neutral.B95, Neutral.B85);
 export var StyledSelected = styled.span.withConfig({
   displayName: "SearchableSelectInputStyle__StyledSelected",

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

@@ -13,6 +13,11 @@ export declare type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElem
      * **defaults to** `true`
      */
     canExceedMaxLength: boolean;
+    border?: string;
+    borderRadius?: string;
+    required?: boolean;
+    isPlaceholderFloating?: boolean;
+    floatingFontSize?: string;
 };
 export declare const TextArea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> & {
     value: string;
@@ -28,4 +33,9 @@ export declare const TextArea: React.ForwardRefExoticComponent<Omit<React.Textar
      * **defaults to** `true`
      */
     canExceedMaxLength: boolean;
+    border?: string;
+    borderRadius?: string;
+    required?: boolean;
+    isPlaceholderFloating?: boolean;
+    floatingFontSize?: string;
 } & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -1,9 +1,10 @@
 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"];
+var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange", "forwardedRef", "canExceedMaxLength", "required", "border", "borderRadius", "isPlaceholderFloating", "floatingFontSize", "placeholder"];
 import React, { useRef, useState } from 'react';
 import { StyledTextAreaContainer, StyledTextArea, StyledWordCountContainer } from './TextAreaStyle';
 import { Typography } from '../Typography';
+import { AsteriskIcon, FloatingLabel } from '../Input/InputStyle';
 var _TextArea = function _TextArea(_ref) {
   var value = _ref.value,
     _ref$rows = _ref.rows,
@@ -19,6 +20,12 @@ var _TextArea = function _TextArea(_ref) {
     forwardedRef = _ref.forwardedRef,
     _ref$canExceedMaxLeng = _ref.canExceedMaxLength,
     canExceedMaxLength = _ref$canExceedMaxLeng === void 0 ? true : _ref$canExceedMaxLeng,
+    required = _ref.required,
+    border = _ref.border,
+    borderRadius = _ref.borderRadius,
+    isPlaceholderFloating = _ref.isPlaceholderFloating,
+    floatingFontSize = _ref.floatingFontSize,
+    placeholder = _ref.placeholder,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(false),
     isFocused = _useState[0],
@@ -43,7 +50,10 @@ var _TextArea = function _TextArea(_ref) {
     "data-focus": isFocused,
     "data-has-counter": hasMaxLengthEnforced,
     width: width,
-    onClick: handleContainerClick
+    onClick: handleContainerClick,
+    border: border,
+    borderRadius: borderRadius,
+    isPlaceholderFloating: isPlaceholderFloating
   }, /*#__PURE__*/React.createElement(StyledTextArea, _extends({
     ref: textAreaInputRef,
     value: value,
@@ -57,14 +67,20 @@ var _TextArea = function _TextArea(_ref) {
     },
     onBlur: function onBlur() {
       return setIsFocused(false);
-    }
+    },
+    border: border,
+    borderRadius: borderRadius,
+    placeholder: isPlaceholderFloating ? undefined : placeholder
   }, props)), hasMaxLengthEnforced && /*#__PURE__*/React.createElement(StyledWordCountContainer, {
     "data-disabled": disabled,
     "data-error": hasError
   }, /*#__PURE__*/React.createElement(Typography, {
     as: "span",
     variant: "overline"
-  }, charCount, " / ", maxLength)));
+  }, charCount, " / ", maxLength)), isPlaceholderFloating && /*#__PURE__*/React.createElement(FloatingLabel, {
+    "data-testid": "textarea-label",
+    fontSize: floatingFontSize
+  }, placeholder, required && /*#__PURE__*/React.createElement(AsteriskIcon, null, "*")));
 };
 var forwardRef = function forwardRef(props, ref) {
   return /*#__PURE__*/React.createElement(_TextArea, _extends({}, props, {

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

@@ -2,3 +2,4 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
+export declare const WithFloatingPlaceholder: any;

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

@@ -1,5 +1,8 @@
 interface TextAreaProp {
     width: string;
+    border?: string;
+    borderRadius?: string;
+    isPlaceholderFloating?: boolean;
 }
 export declare const StyledTextAreaContainer: import("styled-components").StyledComponent<"div", any, TextAreaProp, never>;
 export declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", any, TextAreaProp, never>;

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

@@ -2,16 +2,26 @@ import styled from 'styled-components';
 import { borderRadius4 } from '../utilities/borderRadius';
 import { Neutral, Red } from '../utilities/colors';
 import { body1 as typographyBody1 } from '../Typography/TypographyStyles';
+import { FloatingLabel } from '../Input/InputStyle';
 export var StyledTextAreaContainer = styled.div.withConfig({
   displayName: "TextAreaStyle__StyledTextAreaContainer",
   componentId: "sc-1cq0fhw-0"
-})(["position:relative;width:", ";border:1px solid ", ";border-radius:", ";padding:8px 12px 25px 12px;cursor:text;&:not([data-has-counter='true']){padding-bottom:8px;}&[data-focus='true']{outline:none;box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}&[data-error='true']{border:1px solid ", ";&[data-focus='true']{box-shadow:none;}}&[data-disabled='true']{border:1px solid ", ";background:", ";}"], function (props) {
+})(["position:relative;width:", ";border:", ";border-radius:", ";padding:8px 12px 25px 12px;cursor:text;&:not([data-has-counter='true']){padding-bottom:8px;}&[data-focus='true']{outline:none;box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px #6ac9ec;}&[data-error='true']{border:1px solid ", ";&[data-focus='true']{box-shadow:none;}}&[data-disabled='true']{border:1px solid ", ";background:", ";}"], function (props) {
   return props.width;
-}, Neutral.B68, borderRadius4, Neutral.B100, Red.B93, Neutral.B85, Neutral.B95);
+}, 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;
+}, Neutral.B100, Red.B93, Neutral.B85, Neutral.B95);
 export var StyledTextArea = styled.textarea.withConfig({
   displayName: "TextAreaStyle__StyledTextArea",
   componentId: "sc-1cq0fhw-1"
-})(["background:", ";box-sizing:border-box;border:none;", " color:", ";resize:none;width:100%;::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}::-webkit-scrollbar-thumb:hover{background-color:", ";}&::placeholder{color:", ";}&:focus{outline:none;}:disabled{background:", ";::placeholder{color:", ";}}"], Neutral.B100, typographyBody1, Neutral.B18, Neutral.B68, Neutral.B40, Neutral.B68, Neutral.B95, Neutral.B85);
+})(["background:", ";box-sizing:border-box;border:none;", " ", " color:", ";resize:none;width:100%;::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}::-webkit-scrollbar-thumb:hover{background-color:", ";}&::placeholder{color:", ";}&:focus{outline:none;}:disabled{background:", ";::placeholder{color:", ";}}"], Neutral.B100, function (_ref3) {
+  var isPlaceholderFloating = _ref3.isPlaceholderFloating;
+  return isPlaceholderFloating && FloatingLabel;
+}, typographyBody1, Neutral.B18, Neutral.B68, Neutral.B40, Neutral.B68, Neutral.B95, Neutral.B85);
 export var StyledWordCountContainer = styled.div.withConfig({
   displayName: "TextAreaStyle__StyledWordCountContainer",
   componentId: "sc-1cq0fhw-2"

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

@@ -3,8 +3,20 @@ import { InputProps } from '../Input/Input';
 export declare type TextInputProps = Omit<InputProps, 'type' | 'onChange'> & {
     canClear?: boolean;
     onChange?: (value: string) => void;
+    height?: string;
+    border?: string;
+    borderRadius?: string;
+    required?: boolean;
+    isPlaceholderFloating?: boolean;
+    floatingFontSize?: string;
 };
 export declare const TextInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "onChange"> & {
     canClear?: boolean;
     onChange?: (value: string) => void;
+    height?: string;
+    border?: string;
+    borderRadius?: string;
+    required?: boolean;
+    isPlaceholderFloating?: boolean;
+    floatingFontSize?: string;
 } & 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"];
+var _excluded = ["canClear", "suffix", "value", "onChange", "error", "height", "border", "borderRadius", "required", "floatingFontSize", "isPlaceholderFloating"];
 import React, { useEffect, useState } from 'react';
 import { Icon } from '../Icon';
 import { Input } from '../Input/Input';
@@ -10,6 +10,12 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, re
     value = _ref.value,
     onChange = _ref.onChange,
     error = _ref.error,
+    height = _ref.height,
+    border = _ref.border,
+    borderRadius = _ref.borderRadius,
+    required = _ref.required,
+    floatingFontSize = _ref.floatingFontSize,
+    isPlaceholderFloating = _ref.isPlaceholderFloating,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var ClearIcon = function ClearIcon() {
     return /*#__PURE__*/React.createElement(Icon, {
@@ -44,6 +50,12 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, re
     suffix: suffixValue,
     value: value,
     onChange: handleChange,
-    error: error
+    error: error,
+    border: border,
+    borderRadius: borderRadius,
+    floatingFontSize: floatingFontSize,
+    isPlaceholderFloating: isPlaceholderFloating,
+    required: required,
+    height: height
   }, props));
 });

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

@@ -3,3 +3,4 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
 export declare const WithPrefixAndSuffix: any;
+export declare const WithFloatingPlaceholderAndRequiredInput: any;

package/es/Input/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-export declare const PhoneNumberInput: ({ value, onChange, onFocus, onBlur, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, error, addon, ...restProps }: Props) => JSX.Element;
+export declare const PhoneNumberInput: ({ value, onChange, onFocus, onBlur, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, isDisableCallingCode, isPlaceholderFloating, isRequired, error, addon, ...restProps }: Props) => JSX.Element;
 export interface Props {
     value: PhoneNumber;
     onChange: (value: PhoneNumber) => void;
@@ -17,6 +17,9 @@ export interface Props {
     otherOptionsLabel: string;
     callingCodeFilterInputPlaceholder: string;
     callingCodeNoOptionsLabel: string;
+    isDisableCallingCode?: boolean;
+    isPlaceholderFloating?: boolean;
+    isRequired?: boolean;
 }
 export interface PhoneNumber {
     callingCode: number;

package/es/Input/PhoneNumberInput/PhoneNumberInput.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["value", "onChange", "onFocus", "onBlur", "callingCodeOptions", "onInputChange", "filterValue", "isLoadingCallingCodeOptions", "label", "featuredOptionsLabel", "otherOptionsLabel", "callingCodeFilterInputPlaceholder", "callingCodeNoOptionsLabel", "error", "addon"];
+var _excluded = ["value", "onChange", "onFocus", "onBlur", "callingCodeOptions", "onInputChange", "filterValue", "isLoadingCallingCodeOptions", "label", "featuredOptionsLabel", "otherOptionsLabel", "callingCodeFilterInputPlaceholder", "callingCodeNoOptionsLabel", "isDisableCallingCode", "isPlaceholderFloating", "isRequired", "error", "addon"];
 import { useCombobox } from 'downshift';
 import { find, orderBy } from 'lodash-es';
 import React, { useEffect, useRef, useState } from 'react';
@@ -9,6 +9,7 @@ import { ArrowDownIcon, ArrowUpIcon } from '../../General/Icon/components';
 import { Flex } from '../../Layout/Flex';
 import { useOutsideAlerter } from '../../Utils/useOutsideAlerter';
 import * as S from './PhoneNumberInputStyles';
+import { AsteriskIcon } from '../../@next/Input/InputStyle';
 
 // Downshift wants a ref to this, but we need one ourselves, and there is no way
 // to share.
@@ -31,6 +32,9 @@ export var PhoneNumberInput = function PhoneNumberInput(_ref) {
     otherOptionsLabel = _ref.otherOptionsLabel,
     callingCodeFilterInputPlaceholder = _ref.callingCodeFilterInputPlaceholder,
     callingCodeNoOptionsLabel = _ref.callingCodeNoOptionsLabel,
+    isDisableCallingCode = _ref.isDisableCallingCode,
+    isPlaceholderFloating = _ref.isPlaceholderFloating,
+    isRequired = _ref.isRequired,
     error = _ref.error,
     addon = _ref.addon,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -82,15 +86,16 @@ export var PhoneNumberInput = function PhoneNumberInput(_ref) {
   useOutsideAlerter(containerRef, closeCallingCodeInput);
   var _useId = useId(1, 'significant-number-input-'),
     significantNumberInputId = _useId[0];
+  var placeholder = isRequired ? label + "*" : label;
   return /*#__PURE__*/React.createElement(S.PhoneNumberInputContainer, _extends({
     ref: containerRef
   }, restProps), /*#__PURE__*/React.createElement(S.TopRow, {
     "data-invalid": Boolean(error)
   }, /*#__PURE__*/React.createElement(S.CallingCodeInputToggle, _extends({}, getToggleButtonProps(), {
     type: "button",
-    onClick: toggleIsCallingCodeOpen,
+    onClick: isDisableCallingCode ? undefined : toggleIsCallingCodeOpen,
     "data-testid": "calling-code-input-toggle"
-  }), "+", value.callingCode, /*#__PURE__*/React.createElement(S.CallingCodeInputOpenIndicator, null, isCallingCodeInputOpen ? /*#__PURE__*/React.createElement(ArrowUpIcon, null) : /*#__PURE__*/React.createElement(ArrowDownIcon, null))), /*#__PURE__*/React.createElement(S.SignificantNumberInput, {
+  }), "+", value.callingCode, /*#__PURE__*/React.createElement(S.CallingCodeInputOpenIndicator, null, isDisableCallingCode ? /*#__PURE__*/React.createElement("span", null, "\xA0") : isCallingCodeInputOpen ? /*#__PURE__*/React.createElement(ArrowUpIcon, null) : /*#__PURE__*/React.createElement(ArrowDownIcon, null))), /*#__PURE__*/React.createElement(S.SignificantNumberInput, {
     id: significantNumberInputId,
     "data-testid": "significant-number-input",
     type: "tel",
@@ -102,12 +107,13 @@ export var PhoneNumberInput = function PhoneNumberInput(_ref) {
     },
     onFocus: onFocus,
     onBlur: onBlur,
-    placeholder: label,
+    placeholder: isPlaceholderFloating ? undefined : placeholder,
     "data-invalid": Boolean(error),
-    "aria-label": label
+    "aria-label": label,
+    isPlaceholderFloating: isPlaceholderFloating
   }), /*#__PURE__*/React.createElement(S.Label, {
     htmlFor: significantNumberInputId
-  }, label), /*#__PURE__*/React.createElement(S.TopRowAddon, {
+  }, label, isRequired && /*#__PURE__*/React.createElement(AsteriskIcon, null)), /*#__PURE__*/React.createElement(S.TopRowAddon, {
     "data-testid": "addon"
   }, addon)), /*#__PURE__*/React.createElement(S.CallingCodeInput, _extends({
     isOpen: isCallingCodeInputOpen

package/es/Input/PhoneNumberInput/PhoneNumberInput.stories.d.ts

@@ -6,3 +6,4 @@ export declare const WithError: any;
 export declare const NoCallingCodeOptions: any;
 export declare const Loading: any;
 export declare const WithAddon: any;
+export declare const DisableCallingCodeOptionsAndFloatingPlaceholder: any;

package/es/Input/PhoneNumberInput/PhoneNumberInputStyles.d.ts

@@ -4,7 +4,9 @@ export declare const TopRow: import("styled-components").StyledComponent<"div",
 export declare const CallingCodeInputToggle: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const CallingCodeInputOpenIndicator: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
-export declare const SignificantNumberInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const SignificantNumberInput: import("styled-components").StyledComponent<"input", any, {
+    isPlaceholderFloating?: boolean;
+}, never>;
 export declare const TopRowAddon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CallingCodeInput: import("styled-components").StyledComponent<"div", any, {
     isOpen: boolean;

package/es/Input/PhoneNumberInput/PhoneNumberInputStyles.js

@@ -21,14 +21,17 @@ export var CallingCodeInputOpenIndicator = styled.span.withConfig({
 export var Label = styled.label.withConfig({
   displayName: "PhoneNumberInputStyles__Label",
   componentId: "sc-80kraj-4"
-})(["position:absolute;left:0.5em;top:-0.5em;visibility:hidden;padding:0 0.3em;background:white;color:", ";"], Greyscale.devilsgrey);
+})(["position:absolute;left:0.5em;top:-1.25em;visibility:hidden;padding:0 0.3em;background:white;color:", ";"], Greyscale.devilsgrey);
 var visibleLabel = css(["+ ", "{visibility:visible;color:#646464;font-size:12px;}"], Label);
 export var SignificantNumberInput = styled.input.withConfig({
   displayName: "PhoneNumberInputStyles__SignificantNumberInput",
   componentId: "sc-80kraj-5"
-})(["border:none;width:100%;font-size:16px;padding:12px;&:focus{outline:2px solid ", ";::placeholder{color:transparent;}", "}", " &[data-invalid='true']:focus{outline:2px solid ", ";}"], SecondaryColor.actionblue, visibleLabel, function (_ref) {
+})(["border:none;width:100%;font-size:16px;padding:12px;&:focus{outline:2px solid ", ";::placeholder{color:transparent;}", "}", " ", " &[data-invalid='true']:focus{outline:2px solid ", ";}"], SecondaryColor.actionblue, visibleLabel, function (_ref) {
   var value = _ref.value;
   return value && visibleLabel;
+}, function (_ref2) {
+  var isPlaceholderFloating = _ref2.isPlaceholderFloating;
+  return isPlaceholderFloating && visibleLabel;
 }, PrimaryColor.glintsred);
 export var TopRowAddon = styled.div.withConfig({
   displayName: "PhoneNumberInputStyles__TopRowAddon",
@@ -37,8 +40,8 @@ export var TopRowAddon = styled.div.withConfig({
 export var CallingCodeInput = styled.div.withConfig({
   displayName: "PhoneNumberInputStyles__CallingCodeInput",
   componentId: "sc-80kraj-7"
-})(["position:absolute;display:none;z-index:2;background:white;margin-top:4px;width:100%;border:1px solid ", ";box-shadow:", ";", ""], Greyscale.lightgrey, Shadow.down1, function (_ref2) {
-  var isOpen = _ref2.isOpen;
+})(["position:absolute;display:none;z-index:2;background:white;margin-top:4px;width:100%;border:1px solid ", ";box-shadow:", ";", ""], Greyscale.lightgrey, Shadow.down1, function (_ref3) {
+  var isOpen = _ref3.isOpen;
   return isOpen && css(["display:initial;"]);
 });
 var CALLING_CODE_INPUT_MARGIN = '8px';
@@ -58,8 +61,8 @@ export var CallingCodeOptionsList = styled.ol.withConfig({
   displayName: "PhoneNumberInputStyles__CallingCodeOptionsList",
   componentId: "sc-80kraj-11"
 })(["list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;font-size:16px;"]);
-var getGroupHeaderStyles = function getGroupHeaderStyles(_ref3) {
-  var withGroupHeader = _ref3.withGroupHeader;
+var getGroupHeaderStyles = function getGroupHeaderStyles(_ref4) {
+  var withGroupHeader = _ref4.withGroupHeader;
   return withGroupHeader && css(["content:'", "';display:block;padding:4px 8px;color:", ";font-size:8px;border-bottom:1px solid ", ";text-transform:uppercase;background:white;cursor:default;"], withGroupHeader, Greyscale.devilsgrey, Greyscale.softgrey);
 };
 export var CallingCodeOption = styled.li.withConfig({

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

@@ -1,6 +1,12 @@
 import React from 'react';
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
     error?: boolean;
+    height?: string;
+    border?: string;
+    borderRadius?: string;
+    floatingFontSize?: string;
+    isPlaceholderFloating?: boolean;
+    required?: boolean;
     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"];
+var _excluded = ["error", "disabled", "prefix", "suffix", "inputRef", "height", "border", "borderRadius", "floatingFontSize", "isPlaceholderFloating", "placeholder", "required"];
 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) {
@@ -16,6 +16,13 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function Input(_ref, ref)
     prefix = _ref.prefix,
     suffix = _ref.suffix,
     inputRef = _ref.inputRef,
+    height = _ref.height,
+    border = _ref.border,
+    borderRadius = _ref.borderRadius,
+    floatingFontSize = _ref.floatingFontSize,
+    isPlaceholderFloating = _ref.isPlaceholderFloating,
+    placeholder = _ref.placeholder,
+    required = _ref.required,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var hasPrefix = !!prefix;
   var hasSuffix = !!suffix;
@@ -23,12 +30,14 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function Input(_ref, ref)
   var suffixRef = (0, _react.useRef)(null);
   var Prefix = function Prefix() {
     return hasPrefix ? /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledPrefixContainer, {
-      ref: prefixRef
+      ref: prefixRef,
+      height: height
     }, prefix) : null;
   };
   var Suffix = function Suffix() {
     return hasSuffix ? /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledSuffixContainer, {
-      ref: suffixRef
+      ref: suffixRef,
+      height: height
     }, suffix) : null;
   };
   var _React$useState = _react["default"].useState(0),
@@ -49,6 +58,7 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function Input(_ref, ref)
       setSuffixWidth(_suffixWidth);
     }
   }, [hasSuffix, suffix]);
+  var selectedPlaceholder = required ? placeholder + "*" : placeholder;
   return /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledContainer, {
     ref: ref,
     "data-prefix": hasPrefix,
@@ -59,7 +69,14 @@ 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,
+    borderRadius: borderRadius,
+    border: border,
+    height: height,
     disabled: disabled
-  }, props)), /*#__PURE__*/_react["default"].createElement(Suffix, null));
+  }, props)), isPlaceholderFloating && /*#__PURE__*/_react["default"].createElement(_InputStyle.FloatingLabel, {
+    "data-testid": "textarea-label",
+    fontSize: floatingFontSize
+  }, 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

@@ -4,6 +4,18 @@ export interface PreffixSuffixWidthProps {
     suffixWidth: number;
 }
 export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, InputProps & PreffixSuffixWidthProps, never>;
-export declare const StyledPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledSuffixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPrefixContainer: import("styled-components").StyledComponent<"div", any, {
+    height?: string;
+}, never>;
+export declare const StyledSuffixContainer: import("styled-components").StyledComponent<"div", any, {
+    height?: string;
+} & {
+    height?: string;
+}, never>;
+export declare const FloatingLabel: import("styled-components").StyledComponent<"label", any, {
+    top?: number;
+    left?: number;
+    fontSize?: 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

@@ -2,13 +2,14 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.StyledSuffixContainer = exports.StyledPrefixContainer = exports.StyledInput = exports.StyledContainer = void 0;
+exports.StyledSuffixContainer = exports.StyledPrefixContainer = exports.StyledInput = exports.StyledContainer = exports.FloatingLabel = exports.AsteriskIcon = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
 var _colors = require("../utilities/colors");
 var _spacing = require("../utilities/spacing");
 var _fonts = require("../utilities/fonts");
 var _borderRadius = require("../utilities/borderRadius");
+var _Colors = require("../../Utils/Colors");
 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 StyledContainer = _styledComponents["default"].div.withConfig({
@@ -23,15 +24,46 @@ exports.StyledContainer = StyledContainer;
 var StyledPrefixContainer = _styledComponents["default"].div.withConfig({
   displayName: "InputStyle__StyledPrefixContainer",
   componentId: "sc-15z2mnd-1"
-})(["position:absolute;left:0;color:", ";display:flex;align-items:center;height:36px;padding:0px ", " 0 ", ";svg{height:17px;width:17px;fill:", ";}"], _colors.Neutral.B40, _spacing.space8, _spacing.space12, _colors.Neutral.B40);
+})(["position:absolute;left:0;color:", ";display:flex;align-items:center;height:", ";padding:0px ", " 0 ", ";svg{height:17px;width:17px;fill:", ";}"], _colors.Neutral.B40, function (_ref) {
+  var height = _ref.height;
+  return height != null ? height : '36px';
+}, _spacing.space8, _spacing.space12, _colors.Neutral.B40);
 exports.StyledPrefixContainer = StyledPrefixContainer;
 var StyledSuffixContainer = (0, _styledComponents["default"])(StyledPrefixContainer).withConfig({
   displayName: "InputStyle__StyledSuffixContainer",
   componentId: "sc-15z2mnd-2"
 })(["left:auto;right:0;padding:0px ", " 0 ", ";"], _spacing.space12, _spacing.space4);
 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) {
+  var left = _ref2.left;
+  return left != null ? left : '0.5';
+}, function (_ref3) {
+  var top = _ref3.top;
+  return top != null ? top : '-1.25';
+}, function (_ref4) {
+  var fontSize = _ref4.fontSize;
+  return fontSize != null ? fontSize : '12px';
+}, _Colors.Greyscale.devilsgrey);
+exports.FloatingLabel = FloatingLabel;
 var StyledInput = _styledComponents["default"].input.withConfig({
   displayName: "InputStyle__StyledInput",
-  componentId: "sc-15z2mnd-3"
-})(["background:", ";box-sizing:border-box;border:1px solid ", ";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:36px;&::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, _colors.Neutral.B68, _borderRadius.borderRadius4, _fonts.NotoSans, _colors.Neutral.B18, _colors.Neutral.B68, _colors.Neutral.B100, Breakpoints.large);
-exports.StyledInput = 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;
+  return border != null ? border : "1px solid " + _colors.Neutral.B68;
+}, function (_ref6) {
+  var borderRadius = _ref6.borderRadius;
+  return borderRadius != null ? borderRadius : _borderRadius.borderRadius4;
+}, _fonts.NotoSans, _colors.Neutral.B18, function (_ref7) {
+  var height = _ref7.height;
+  return height != null ? height : "36px";
+}, _colors.Neutral.B68, _colors.Neutral.B100, Breakpoints.large);
+exports.StyledInput = StyledInput;
+var AsteriskIcon = _styledComponents["default"].span.withConfig({
+  displayName: "InputStyle__AsteriskIcon",
+  componentId: "sc-15z2mnd-5"
+})(["color:", ";font-size:20px;vertical-align:middle;"], _colors.Red.B93);
+exports.AsteriskIcon = AsteriskIcon;