glints-aries 4.1.7 → 4.1.8

package/es/@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/es/@next/Input/Input.js

@@ -1,14 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["error", "disabled", "prefix", "suffix", "inputRef"];
+var _excluded = ["error", "disabled", "prefix", "suffix", "inputRef", "height", "border", "borderRadius", "floatingFontSize", "isPlaceholderFloating", "placeholder", "required"];
 import React, { useEffect, useRef } from 'react';
-import { StyledContainer, StyledInput, StyledPrefixContainer, StyledSuffixContainer } from './InputStyle';
+import { AsteriskIcon, FloatingLabel, StyledContainer, StyledInput, StyledPrefixContainer, StyledSuffixContainer } from './InputStyle';
 export var Input = /*#__PURE__*/React.forwardRef(function Input(_ref, ref) {
   var error = _ref.error,
     disabled = _ref.disabled,
     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 = _objectWithoutPropertiesLoose(_ref, _excluded);
   var hasPrefix = !!prefix;
   var hasSuffix = !!suffix;
@@ -16,12 +23,14 @@ export var Input = /*#__PURE__*/React.forwardRef(function Input(_ref, ref) {
   var suffixRef = useRef(null);
   var Prefix = function Prefix() {
     return hasPrefix ? /*#__PURE__*/React.createElement(StyledPrefixContainer, {
-      ref: prefixRef
+      ref: prefixRef,
+      height: height
     }, prefix) : null;
   };
   var Suffix = function Suffix() {
     return hasSuffix ? /*#__PURE__*/React.createElement(StyledSuffixContainer, {
-      ref: suffixRef
+      ref: suffixRef,
+      height: height
     }, suffix) : null;
   };
   var _React$useState = React.useState(0),
@@ -42,6 +51,7 @@ export var Input = /*#__PURE__*/React.forwardRef(function Input(_ref, ref) {
       setSuffixWidth(_suffixWidth);
     }
   }, [hasSuffix, suffix]);
+  var selectedPlaceholder = required ? placeholder + "*" : placeholder;
   return /*#__PURE__*/React.createElement(StyledContainer, {
     ref: ref,
     "data-prefix": hasPrefix,
@@ -52,6 +62,13 @@ 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,
+    borderRadius: borderRadius,
+    border: border,
+    height: height,
     disabled: disabled
-  }, props)), /*#__PURE__*/React.createElement(Suffix, null));
+  }, props)), isPlaceholderFloating && /*#__PURE__*/React.createElement(FloatingLabel, {
+    "data-testid": "textarea-label",
+    fontSize: floatingFontSize
+  }, placeholder, required && /*#__PURE__*/React.createElement(AsteriskIcon, null, "*")), /*#__PURE__*/React.createElement(Suffix, null));
 });

package/es/@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/es/@next/Input/InputStyle.js

@@ -4,6 +4,7 @@ import { Neutral, Red } from '../utilities/colors';
 import { space12, space4, space8 } from '../utilities/spacing';
 import { NotoSans } from '../utilities/fonts';
 import { borderRadius4 } from '../utilities/borderRadius';
+import { Greyscale } from '../../Utils/Colors';
 export var StyledContainer = styled.div.withConfig({
   displayName: "InputStyle__StyledContainer",
   componentId: "sc-15z2mnd-0"
@@ -15,12 +16,41 @@ export var StyledContainer = styled.div.withConfig({
 export var StyledPrefixContainer = styled.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:", ";}"], Neutral.B40, space8, space12, Neutral.B40);
+})(["position:absolute;left:0;color:", ";display:flex;align-items:center;height:", ";padding:0px ", " 0 ", ";svg{height:17px;width:17px;fill:", ";}"], Neutral.B40, function (_ref) {
+  var height = _ref.height;
+  return height != null ? height : '36px';
+}, space8, space12, Neutral.B40);
 export var StyledSuffixContainer = styled(StyledPrefixContainer).withConfig({
   displayName: "InputStyle__StyledSuffixContainer",
   componentId: "sc-15z2mnd-2"
 })(["left:auto;right:0;padding:0px ", " 0 ", ";"], space12, space4);
+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) {
+  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';
+}, Greyscale.devilsgrey);
 export var StyledInput = styled.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;}"], Neutral.B100, Neutral.B68, borderRadius4, NotoSans, Neutral.B18, Neutral.B68, Neutral.B100, Breakpoints.large);
+  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;
+  return border != null ? border : "1px solid " + Neutral.B68;
+}, function (_ref6) {
+  var borderRadius = _ref6.borderRadius;
+  return borderRadius != null ? borderRadius : borderRadius4;
+}, NotoSans, Neutral.B18, function (_ref7) {
+  var height = _ref7.height;
+  return height != null ? height : "36px";
+}, Neutral.B68, Neutral.B100, Breakpoints.large);
+export var AsteriskIcon = styled.span.withConfig({
+  displayName: "InputStyle__AsteriskIcon",
+  componentId: "sc-15z2mnd-5"
+})(["color:", ";font-size:20px;vertical-align:middle;"], Red.B93);

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

@@ -1,4 +1,14 @@
 import React from 'react';
 import { InputProps } from '../Input/Input';
-export declare type NumberInputProps = Omit<InputProps, 'type' | 'prefix'>;
-export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare type NumberInputProps = Omit<InputProps, 'type' | 'prefix'> & {
+    border?: string;
+    borderRadius?: string;
+    required?: boolean;
+    isPlaceholderFloating?: boolean;
+};
+export declare const NumberInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "prefix"> & {
+    border?: string;
+    borderRadius?: string;
+    required?: boolean;
+    isPlaceholderFloating?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["border", "borderRadius", "isPlaceholderFloating", "required"];
 import React from 'react';
 import styled from 'styled-components';
 import { Input } from '../Input/Input';
@@ -6,9 +8,19 @@ var StyledInput = styled(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;}"]);
-export var NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, ref) {
+export var NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(_ref, ref) {
+  var border = _ref.border,
+    borderRadius = _ref.borderRadius,
+    isPlaceholderFloating = _ref.isPlaceholderFloating,
+    required = _ref.required,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement(StyledInput, _extends({
     ref: ref,
     type: "number"
-  }, props));
+  }, props, {
+    border: border,
+    borderRadius: borderRadius,
+    required: required,
+    isPlaceholderFloating: isPlaceholderFloating
+  }));
 });

package/es/@next/Pagination/PaginationStyle.d.ts

@@ -8,4 +8,9 @@ export declare const StyledSimplePaginationButton: import("styled-components").S
 export declare const StyledBorderPaginationButton: import("styled-components").StyledComponent<"button", any, PageButtonProps, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledActiveSimplePaginationButton: import("styled-components").StyledComponent<(props: PageButtonProps) => JSX.Element, any, {}, never>;
-export declare const StyledSimplePaginationInput: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../NumberInput").NumberInputProps & React.RefAttributes<HTMLInputElement>>, any, {}, never>;
+export declare const StyledSimplePaginationInput: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<import("../Input/Input").InputProps, "type" | "prefix"> & {
+    border?: string;
+    borderRadius?: string;
+    required?: boolean;
+    isPlaceholderFloating?: boolean;
+} & React.RefAttributes<HTMLInputElement>>, any, {}, never>;

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

@@ -2,8 +2,18 @@ import React from 'react';
 export declare type PasswordInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> & {
     onChange?: (value: string) => void;
     error?: boolean;
+    height?: string;
+    border?: string;
+    borderRadius?: string;
+    required?: boolean;
+    isPlaceholderFloating?: boolean;
 };
 export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> & {
     onChange?: (value: string) => void;
     error?: boolean;
+    height?: string;
+    border?: string;
+    borderRadius?: string;
+    required?: boolean;
+    isPlaceholderFloating?: boolean;
 } & 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"];
+var _excluded = ["value", "onChange", "error", "height", "border", "borderRadius", "required", "isPlaceholderFloating"];
 import React, { useState } from 'react';
 import { Icon } from '../Icon';
 import { Input } from '../Input/Input';
@@ -9,6 +9,11 @@ export var PasswordInput = /*#__PURE__*/React.forwardRef(function PasswordInput(
   var value = _ref.value,
     _onChange = _ref.onChange,
     error = _ref.error,
+    height = _ref.height,
+    border = _ref.border,
+    borderRadius = _ref.borderRadius,
+    required = _ref.required,
+    isPlaceholderFloating = _ref.isPlaceholderFloating,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(false),
     showPassword = _useState[0],
@@ -31,6 +36,11 @@ export var PasswordInput = /*#__PURE__*/React.forwardRef(function PasswordInput(
       return _onChange == null ? void 0 : _onChange(e.currentTarget.value);
     },
     error: error,
-    suffix: !props.disabled && suffixComponent
+    suffix: !props.disabled && suffixComponent,
+    height: height,
+    border: border,
+    borderRadius: borderRadius,
+    required: required,
+    isPlaceholderFloating: isPlaceholderFloating
   }, props)));
 });

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

@@ -50,8 +50,13 @@ export interface SelectProps {
     selectedValues?: string[];
     /** sets a width for the Select component*/
     width: string;
+    height?: string;
     /** sets z-index override for option list dropdown. z-index default to 400 */
     zIndexOverride?: number;
+    border?: string;
+    borderRadius?: string;
+    required?: 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, zIndexOverride, }: 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, }: SelectProps) => JSX.Element;
 export {};

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

@@ -33,8 +33,7 @@ export var Select = function Select(_ref) {
     options = _ref$options === void 0 ? [] : _ref$options,
     placeholder = _ref.placeholder,
     prefix = _ref.prefix,
-    _ref$searchable = _ref.searchable,
-    searchable = _ref$searchable === void 0 ? false : _ref$searchable,
+    searchable = _ref.searchable,
     searchableProps = _ref.searchableProps,
     optionsPlaceholderProps = _ref.optionsPlaceholderProps,
     _ref$showPopoverOnFoc = _ref.showPopoverOnFocus,
@@ -44,14 +43,19 @@ export var Select = function Select(_ref) {
     sections = _ref.sections,
     selectedValues = _ref.selectedValues,
     width = _ref.width,
-    zIndexOverride = _ref.zIndexOverride;
+    height = _ref.height,
+    zIndexOverride = _ref.zIndexOverride,
+    border = _ref.border,
+    borderRadius = _ref.borderRadius,
+    required = _ref.required,
+    isPlaceholderFloating = _ref.isPlaceholderFloating;
   var _useState = useState(false),
     popoverActive = _useState[0],
     setPopoverActive = _useState[1];
   var _useState2 = useState(''),
     optionListHeight = _useState2[0],
     setOptionListHeight = _useState2[1];
-  var _useState3 = useState(options),
+  var _useState3 = useState([]),
     menuOptions = _useState3[0],
     setMenuOptions = _useState3[1];
   var optionsLength = options.length;
@@ -127,6 +131,7 @@ export var Select = function Select(_ref) {
         onChange: searchableProps == null ? void 0 : searchableProps.onInputChange,
         placeholder: placeholder != null ? placeholder : 'Search',
         width: width,
+        height: height,
         selectedValues: selectedValues,
         onBlur: onBlur,
         onSelect: onSelect,
@@ -140,7 +145,11 @@ export var Select = function Select(_ref) {
         options: options,
         updateMenuOptions: updateMenuOptions,
         prefix: prefix,
-        name: name
+        name: name,
+        isPlaceholderFloating: isPlaceholderFloating,
+        required: required,
+        border: border,
+        borderRadius: borderRadius
       });
     }
     return /*#__PURE__*/React.createElement(ActivatorSelect, {
@@ -153,18 +162,23 @@ export var Select = function Select(_ref) {
       onRemoveTag: onRemoveTag,
       onSelectClick: handleSelectClick,
       width: width,
+      height: height,
       selectedValues: selectedValues,
       options: options,
       name: name,
       prefix: prefix,
-      onClick: onSelectClick
+      onClick: onSelectClick,
+      required: required,
+      border: border,
+      borderRadius: borderRadius,
+      isPlaceholderFloating: isPlaceholderFloating
     });
   };
   return /*#__PURE__*/React.createElement(Popover, {
     active: popoverActive,
     activator: /*#__PURE__*/React.createElement(ActivatorWrapper, {
       width: width
-    }, label && /*#__PURE__*/React.createElement(Label, null, label), activator(), helpText && /*#__PURE__*/React.createElement(HelpTextContainer, null, /*#__PURE__*/React.createElement(Typography, {
+    }, label && !isPlaceholderFloating && /*#__PURE__*/React.createElement(Label, null, label), activator(), helpText && /*#__PURE__*/React.createElement(HelpTextContainer, null, /*#__PURE__*/React.createElement(Typography, {
       as: "span",
       variant: "subtitle2",
       color: disabled ? Neutral.B85 : Neutral.B40

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

@@ -2,7 +2,9 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const NonSearchableSingleSelect: any;
+export declare const NonSearchableSingleSelectWithFloatingPlaceholder: any;
 export declare const NonSearchableMultipleSelect: any;
+export declare const NonSearchableMultipleSelectWithFloatingPlaceholder: any;
 export declare const WithErrorNonSearchable: any;
 export declare const NonSearchableDisabled: any;
 export declare const NonSearchablePrefixed: any;

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

@@ -14,5 +14,11 @@ export interface ActivatorSelectProps extends Omit<React.ButtonHTMLAttributes<HT
     onSelectClick?(): void;
     options?: Option[];
     width?: string;
+    height?: string;
+    required?: boolean;
+    floatingFontSize?: string;
+    isPlaceholderFloating?: boolean;
+    border?: string;
+    borderRadius?: string;
 }
-export declare const ActivatorSelect: ({ customActivatorIcon, placeholder, selectedValues, onClick, onRemoveTag, width, allowMultiple, disabled, onSelectClick, hasError, options, prefix, ...props }: ActivatorSelectProps) => JSX.Element;
+export declare const ActivatorSelect: ({ customActivatorIcon, placeholder, selectedValues, onClick, onRemoveTag, width, allowMultiple, disabled, onSelectClick, hasError, options, prefix, required, border, borderRadius, height, floatingFontSize, isPlaceholderFloating, ...props }: ActivatorSelectProps) => JSX.Element;

package/es/@next/Select/components/Activator/ActivatorSelect.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["customActivatorIcon", "placeholder", "selectedValues", "onClick", "onRemoveTag", "width", "allowMultiple", "disabled", "onSelectClick", "hasError", "options", "prefix"];
+var _excluded = ["customActivatorIcon", "placeholder", "selectedValues", "onClick", "onRemoveTag", "width", "allowMultiple", "disabled", "onSelectClick", "hasError", "options", "prefix", "required", "border", "borderRadius", "height", "floatingFontSize", "isPlaceholderFloating"];
 import React, { useEffect, useRef, useState } from 'react';
 import { Typography } from '../../../Typography';
 import { Blue, Neutral } from '../../../utilities/colors';
-import { StyledIcon, StyledPrefixContainer, StyledSelect, StyledSelectTypography, StyledTag, TagsContainer, WithPrefixContainer } from './ActivatorStyle';
+import { StyledIcon, StyledPrefixContainer, StyledSelect, StyledSelectTypography, StyledTag, SuffixContainer, TagsContainer, WithPrefixContainer } from './ActivatorStyle';
+import { AsteriskIcon, FloatingLabel } from '../../../Input/InputStyle';
 export var ActivatorSelect = function ActivatorSelect(_ref) {
   var customActivatorIcon = _ref.customActivatorIcon,
     placeholder = _ref.placeholder,
@@ -21,6 +22,12 @@ export var ActivatorSelect = function ActivatorSelect(_ref) {
     hasError = _ref$hasError === void 0 ? false : _ref$hasError,
     options = _ref.options,
     prefix = _ref.prefix,
+    required = _ref.required,
+    border = _ref.border,
+    borderRadius = _ref.borderRadius,
+    height = _ref.height,
+    floatingFontSize = _ref.floatingFontSize,
+    isPlaceholderFloating = _ref.isPlaceholderFloating,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState([]),
     filteredValues = _useState[0],
@@ -49,11 +56,12 @@ export var ActivatorSelect = function ActivatorSelect(_ref) {
     onSelectClick();
     onClick == null ? void 0 : onClick(e);
   };
-  var placeholderMarkup = /*#__PURE__*/React.createElement(Typography, {
+  var selectedPlaceholder = required ? placeholder + "*" : placeholder;
+  var placeholderMarkup = isPlaceholderFloating ? undefined : /*#__PURE__*/React.createElement(Typography, {
     variant: "body1",
     as: "span",
     color: disabled ? Neutral.B85 : Neutral.B68
-  }, placeholder);
+  }, selectedPlaceholder);
   var tagsMarkup = function tagsMarkup() {
     if (!hasSelectedValues) {
       return placeholderMarkup;
@@ -76,14 +84,21 @@ export var ActivatorSelect = function ActivatorSelect(_ref) {
     "data-error": hasError,
     onClick: handleClick,
     disabled: disabled,
-    width: width
+    width: width,
+    height: height,
+    border: border,
+    borderRadius: borderRadius,
+    isPlaceholderFloating: isPlaceholderFloating
   }), /*#__PURE__*/React.createElement(WithPrefixContainer, null, prefix && /*#__PURE__*/React.createElement(StyledPrefixContainer, null, prefix), allowMultiple ? tagsMarkup() : /*#__PURE__*/React.createElement(StyledSelectTypography, {
     variant: "body1",
     "data-disabled": disabled,
     color: hasSelectedValues ? Neutral.B18 : Neutral.B40
-  }, hasSelectedValues ? selectedLabels[0] : placeholderMarkup)), /*#__PURE__*/React.createElement(StyledIcon, {
+  }, hasSelectedValues ? selectedLabels[0] : placeholderMarkup)), /*#__PURE__*/React.createElement(SuffixContainer, null, /*#__PURE__*/React.createElement(StyledIcon, {
     height: 24,
     name: customActivatorIcon || 'ri-arrow-m-down-line',
     fill: disabled ? Neutral.B85 : Neutral.B40
-  }));
+  })), isPlaceholderFloating && /*#__PURE__*/React.createElement(FloatingLabel, {
+    "data-testid": "textarea-label",
+    fontSize: floatingFontSize
+  }, placeholder, required && /*#__PURE__*/React.createElement(AsteriskIcon, null, "*")));
 };

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

@@ -6,8 +6,21 @@ export declare const StyledTag: import("styled-components").StyledComponent<impo
 export declare const StyledTextInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../../../Input/Input").InputProps, "type" | "onChange"> & {
     canClear?: boolean;
     onChange?: (value: string) => void;
+    height?: string;
+    border?: string;
+    borderRadius?: string;
+    required?: boolean;
+    isPlaceholderFloating?: boolean;
+    floatingFontSize?: string;
 } & 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>;
 export declare const StyledPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledIcon: import("styled-components").StyledComponent<({ name, ...props }: import("../../../Icon").IconProps) => JSX.Element, any, {}, never>;
+export declare const SuffixContainer: import("styled-components").StyledComponent<"div", any, {
+    height?: string;
+} & {
+    height?: string;
+} & {
+    height?: string;
+}, never>;

package/es/@next/Select/components/Activator/ActivatorStyle.js

@@ -8,10 +8,20 @@ import { TextInput } from '../../../TextInput';
 import { Tag } from '../../../Tag';
 import { Typography } from '../../../Typography';
 import { Icon } from '../../../Icon';
+import { StyledSuffixContainer } from '../../../Input/InputStyle';
 export var StyledSelect = styled.button.withConfig({
   displayName: "ActivatorStyle__StyledSelect",
   componentId: "sc-rui73p-0"
-})(["display:flex;align-items:center;justify-content:space-between;height:36px;cursor:pointer;padding:0px 8px 0px 12px;border:1px solid ", ";box-shadow:0px 1px 0px rgba(0,0,0,0.05);border-radius:", ";background:", ";width:", ";color:", ";font-family:", ",sans-serif;font-weight:400;font-size:16px;line-height:150%;letter-spacing:0px;@media (max-width:", "){font-size:14px;}&:focus{outline:none;box-shadow:0px 0px 0px 1px #ffffff,0px 0px 0px 3px #6cc9ec;}&:disabled{background:", ";pointer-events:none;cursor:default;border:1px solid ", ";}&[data-error='true']{border:1px solid ", ";border-radius:", ";}"], Neutral.B68, borderRadius4, Neutral.B100, function (props) {
+})(["position:relative;display:flex;align-items:center;justify-content:space-between;height:", ";cursor:pointer;padding:0px 8px 0px 12px;border:", ";box-shadow:0px 1px 0px rgba(0,0,0,0.05);border-radius:", ";background:", ";width:", ";color:", ";font-family:", ",sans-serif;font-weight:400;font-size:16px;line-height:150%;letter-spacing:0px;@media (max-width:", "){font-size:14px;}&:focus{outline:none;box-shadow:0px 0px 0px 1px #ffffff,0px 0px 0px 3px #6cc9ec;}&:disabled{background:", ";pointer-events:none;cursor:default;border:1px solid ", ";}&[data-error='true']{border:1px solid ", ";border-radius:", ";}"], function (props) {
+  var _props$height;
+  return (_props$height = props.height) != null ? _props$height : '36px';
+}, 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, function (props) {
   return props.width;
 }, Neutral.B18, NotoSans, Breakpoints.large, Neutral.B95, Neutral.B85, Red.B93, borderRadius4);
 export var TagsContainer = styled.div.withConfig({
@@ -43,4 +53,8 @@ export var StyledPrefixContainer = styled.div.withConfig({
 export var StyledIcon = styled(Icon).withConfig({
   displayName: "ActivatorStyle__StyledIcon",
   componentId: "sc-rui73p-7"
-})(["margin-left:auto;"]);
+})(["margin-left:auto;"]);
+export var SuffixContainer = styled(StyledSuffixContainer).withConfig({
+  displayName: "ActivatorStyle__SuffixContainer",
+  componentId: "sc-rui73p-8"
+})(["z-index:2;"]);

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

@@ -12,11 +12,16 @@ export interface ActivatorTextInputProps extends Omit<TextInputProps, 'onChange'
     }): void;
     selectedValues?: string[];
     width?: string;
+    height?: string;
     inputValue?: string;
     updateInputValue?: (newValue: string) => void;
     searchableSelectState?: SearchableSelectState;
     updateSearchableSelectState?: (newState: SearchableSelectState) => void;
     options?: Option[];
     updateMenuOptions?: (newState: Option[]) => void;
+    border?: string;
+    borderRadius?: string;
+    isPlaceholderFloating?: boolean;
+    required?: boolean;
 }
-export declare const ActivatorTextInput: ({ allowMultiple, disabled, hasError, onChange, onBlur, onFocus, onSelect, prefix, selectedValues, width, inputValue, updateInputValue, options, updateMenuOptions, ...props }: ActivatorTextInputProps) => JSX.Element;
+export declare const ActivatorTextInput: ({ allowMultiple, disabled, hasError, onChange, onBlur, onFocus, onSelect, prefix, selectedValues, width, inputValue, updateInputValue, options, updateMenuOptions, border, borderRadius, isPlaceholderFloating, required, height, ...props }: ActivatorTextInputProps) => JSX.Element;

package/es/@next/Select/components/Activator/ActivatorTextInput.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["allowMultiple", "disabled", "hasError", "onChange", "onBlur", "onFocus", "onSelect", "prefix", "selectedValues", "width", "inputValue", "updateInputValue", "options", "updateMenuOptions"];
+var _excluded = ["allowMultiple", "disabled", "hasError", "onChange", "onBlur", "onFocus", "onSelect", "prefix", "selectedValues", "width", "inputValue", "updateInputValue", "options", "updateMenuOptions", "border", "borderRadius", "isPlaceholderFloating", "required", "height"];
 import React, { useEffect, useRef, useState } from 'react';
 import { Icon } from '../../../Icon';
 import { SearchableSelectInput } from '../SearchableSelectInput/SearchableSelectInput';
@@ -25,6 +25,11 @@ export var ActivatorTextInput = function ActivatorTextInput(_ref) {
     updateInputValue = _ref.updateInputValue,
     options = _ref.options,
     updateMenuOptions = _ref.updateMenuOptions,
+    border = _ref.border,
+    borderRadius = _ref.borderRadius,
+    isPlaceholderFloating = _ref.isPlaceholderFloating,
+    required = _ref.required,
+    height = _ref.height,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var activatorRef = useRef(null);
   var _useState = useState(false),
@@ -68,7 +73,11 @@ export var ActivatorTextInput = function ActivatorTextInput(_ref) {
     onFocus: onFocus,
     error: hasError,
     disabled: disabled,
-    width: width
+    width: width,
+    border: border,
+    borderRadius: borderRadius,
+    isPlaceholderFloating: isPlaceholderFloating,
+    required: required
   })) : /*#__PURE__*/React.createElement(SearchableSelectInput, _extends({}, props, {
     ref: activatorRef,
     prefix: prefix,
@@ -84,6 +93,11 @@ export var ActivatorTextInput = function ActivatorTextInput(_ref) {
     inputValue: inputValue,
     updateInputValue: updateInputValue,
     options: options,
-    updateMenuOptions: updateMenuOptions
+    updateMenuOptions: updateMenuOptions,
+    border: border,
+    borderRadius: borderRadius,
+    isPlaceholderFloating: isPlaceholderFloating,
+    required: required,
+    height: height
   })));
 };

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

@@ -5,5 +5,6 @@ export interface ClearSelectedProps {
     }): void;
     handleClearIconClick?: () => void;
     updateInputValue?(newValue: string): void;
+    height?: string;
 }
-export declare const ClearSelected: ({ onSelect, handleClearIconClick, updateInputValue, }: ClearSelectedProps) => JSX.Element;
+export declare const ClearSelected: ({ onSelect, handleClearIconClick, updateInputValue, height, }: ClearSelectedProps) => JSX.Element;

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

@@ -4,7 +4,8 @@ import { ClearSelectedContainer } from './SearchableSelectInputStyle';
 export var ClearSelected = function ClearSelected(_ref) {
   var onSelect = _ref.onSelect,
     handleClearIconClick = _ref.handleClearIconClick,
-    updateInputValue = _ref.updateInputValue;
+    updateInputValue = _ref.updateInputValue,
+    height = _ref.height;
   var onClearIconClick = function onClearIconClick() {
     updateInputValue('');
     onSelect({
@@ -12,7 +13,9 @@ export var ClearSelected = function ClearSelected(_ref) {
     });
     handleClearIconClick();
   };
-  return /*#__PURE__*/React.createElement(ClearSelectedContainer, null, /*#__PURE__*/React.createElement(Icon, {
+  return /*#__PURE__*/React.createElement(ClearSelectedContainer, {
+    height: height
+  }, /*#__PURE__*/React.createElement(Icon, {
     name: "ri-close-circle-fill",
     style: {
       cursor: 'pointer'

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

@@ -20,6 +20,12 @@ export declare type SearchableSelectInputProps = Omit<InputProps, 'type' | 'onCh
     updateSearchableSelectState?: (newState: SearchableSelectState) => void;
     options?: Option[];
     updateMenuOptions?: (newState: Option[]) => void;
+    border?: string;
+    borderRadius?: string;
+    floatingFontSize?: string;
+    isPlaceholderFloating?: boolean;
+    required?: boolean;
+    height?: string;
 };
 export declare const SearchableSelectInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "onChange" | "onSelect"> & {
     canClear?: boolean;
@@ -35,4 +41,10 @@ export declare const SearchableSelectInput: React.ForwardRefExoticComponent<Omit
     updateSearchableSelectState?: (newState: SearchableSelectState) => void;
     options?: Option[];
     updateMenuOptions?: (newState: Option[]) => void;
+    border?: string;
+    borderRadius?: string;
+    floatingFontSize?: string;
+    isPlaceholderFloating?: boolean;
+    required?: boolean;
+    height?: string;
 } & React.RefAttributes<HTMLInputElement>>;