glints-aries 4.1.6 → 4.1.8

package/lib/@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/lib/@next/Select/Select.js

@@ -39,8 +39,7 @@ 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,
@@ -50,14 +49,19 @@ 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 = (0, _react.useState)(false),
     popoverActive = _useState[0],
     setPopoverActive = _useState[1];
   var _useState2 = (0, _react.useState)(''),
     optionListHeight = _useState2[0],
     setOptionListHeight = _useState2[1];
-  var _useState3 = (0, _react.useState)(options),
+  var _useState3 = (0, _react.useState)([]),
     menuOptions = _useState3[0],
     setMenuOptions = _useState3[1];
   var optionsLength = options.length;
@@ -133,6 +137,7 @@ 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,
@@ -146,7 +151,11 @@ 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["default"].createElement(_ActivatorSelect.ActivatorSelect, {
@@ -159,18 +168,23 @@ 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["default"].createElement(_Popover.Popover, {
     active: popoverActive,
     activator: /*#__PURE__*/_react["default"].createElement(_SelectStyle.ActivatorWrapper, {
       width: width
-    }, label && /*#__PURE__*/_react["default"].createElement(_Label.Label, null, label), activator(), helpText && /*#__PURE__*/_react["default"].createElement(_SelectStyle.HelpTextContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    }, label && !isPlaceholderFloating && /*#__PURE__*/_react["default"].createElement(_Label.Label, null, label), activator(), helpText && /*#__PURE__*/_react["default"].createElement(_SelectStyle.HelpTextContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
       as: "span",
       variant: "subtitle2",
       color: disabled ? _colors.Neutral.B85 : _colors.Neutral.B40

package/lib/@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/lib/@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/lib/@next/Select/components/Activator/ActivatorSelect.js

@@ -9,7 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _Typography = require("../../../Typography");
 var _colors = require("../../../utilities/colors");
 var _ActivatorStyle = require("./ActivatorStyle");
-var _excluded = ["customActivatorIcon", "placeholder", "selectedValues", "onClick", "onRemoveTag", "width", "allowMultiple", "disabled", "onSelectClick", "hasError", "options", "prefix"];
+var _InputStyle = require("../../../Input/InputStyle");
+var _excluded = ["customActivatorIcon", "placeholder", "selectedValues", "onClick", "onRemoveTag", "width", "allowMultiple", "disabled", "onSelectClick", "hasError", "options", "prefix", "required", "border", "borderRadius", "height", "floatingFontSize", "isPlaceholderFloating"];
 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 ActivatorSelect = function ActivatorSelect(_ref) {
@@ -28,6 +29,12 @@ 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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var _useState = (0, _react.useState)([]),
     filteredValues = _useState[0],
@@ -56,11 +63,12 @@ var ActivatorSelect = function ActivatorSelect(_ref) {
     onSelectClick();
     onClick == null ? void 0 : onClick(e);
   };
-  var placeholderMarkup = /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+  var selectedPlaceholder = required ? placeholder + "*" : placeholder;
+  var placeholderMarkup = isPlaceholderFloating ? undefined : /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     variant: "body1",
     as: "span",
     color: disabled ? _colors.Neutral.B85 : _colors.Neutral.B68
-  }, placeholder);
+  }, selectedPlaceholder);
   var tagsMarkup = function tagsMarkup() {
     if (!hasSelectedValues) {
       return placeholderMarkup;
@@ -83,15 +91,22 @@ 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["default"].createElement(_ActivatorStyle.WithPrefixContainer, null, prefix && /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledPrefixContainer, null, prefix), allowMultiple ? tagsMarkup() : /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledSelectTypography, {
     variant: "body1",
     "data-disabled": disabled,
     color: hasSelectedValues ? _colors.Neutral.B18 : _colors.Neutral.B40
-  }, hasSelectedValues ? selectedLabels[0] : placeholderMarkup)), /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledIcon, {
+  }, hasSelectedValues ? selectedLabels[0] : placeholderMarkup)), /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.SuffixContainer, null, /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledIcon, {
     height: 24,
     name: customActivatorIcon || 'ri-arrow-m-down-line',
     fill: disabled ? _colors.Neutral.B85 : _colors.Neutral.B40
-  }));
+  })), isPlaceholderFloating && /*#__PURE__*/_react["default"].createElement(_InputStyle.FloatingLabel, {
+    "data-testid": "textarea-label",
+    fontSize: floatingFontSize
+  }, placeholder, required && /*#__PURE__*/_react["default"].createElement(_InputStyle.AsteriskIcon, null, "*")));
 };
 exports.ActivatorSelect = ActivatorSelect;

package/lib/@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/lib/@next/Select/components/Activator/ActivatorStyle.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.WithPrefixContainer = exports.TagsContainer = exports.StyledTextInput = exports.StyledTag = exports.StyledSelectTypography = exports.StyledSelect = exports.StyledPrefixContainer = exports.StyledIcon = void 0;
+exports.WithPrefixContainer = exports.TagsContainer = exports.SuffixContainer = exports.StyledTextInput = exports.StyledTag = exports.StyledSelectTypography = exports.StyledSelect = exports.StyledPrefixContainer = exports.StyledIcon = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var Breakpoints = _interopRequireWildcard(require("../../../utilities/breakpoints/Breakpoints"));
 var _borderRadius = require("../../../utilities/borderRadius");
@@ -13,12 +13,22 @@ var _TextInput = require("../../../TextInput");
 var _Tag = require("../../../Tag");
 var _Typography = require("../../../Typography");
 var _Icon = require("../../../Icon");
+var _InputStyle = require("../../../Input/InputStyle");
 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 StyledSelect = _styledComponents["default"].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:", ";}"], _colors.Neutral.B68, _borderRadius.borderRadius4, _colors.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 " + _colors.Neutral.B68;
+}, function (_ref2) {
+  var borderRadius = _ref2.borderRadius;
+  return borderRadius != null ? borderRadius : _borderRadius.borderRadius4;
+}, _colors.Neutral.B100, function (props) {
   return props.width;
 }, _colors.Neutral.B18, _fonts.NotoSans, Breakpoints.large, _colors.Neutral.B95, _colors.Neutral.B85, _colors.Red.B93, _borderRadius.borderRadius4);
 exports.StyledSelect = StyledSelect;
@@ -58,4 +68,9 @@ var StyledIcon = (0, _styledComponents["default"])(_Icon.Icon).withConfig({
   displayName: "ActivatorStyle__StyledIcon",
   componentId: "sc-rui73p-7"
 })(["margin-left:auto;"]);
-exports.StyledIcon = StyledIcon;
+exports.StyledIcon = StyledIcon;
+var SuffixContainer = (0, _styledComponents["default"])(_InputStyle.StyledSuffixContainer).withConfig({
+  displayName: "ActivatorStyle__SuffixContainer",
+  componentId: "sc-rui73p-8"
+})(["z-index:2;"]);
+exports.SuffixContainer = SuffixContainer;

package/lib/@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/lib/@next/Select/components/Activator/ActivatorTextInput.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Icon = require("../../../Icon");
 var _SearchableSelectInput = require("../SearchableSelectInput/SearchableSelectInput");
 var _ActivatorStyle = require("./ActivatorStyle");
-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"];
 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 ActivatorTextInput = function ActivatorTextInput(_ref) {
@@ -32,6 +32,11 @@ 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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var activatorRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
@@ -75,7 +80,11 @@ 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["default"].createElement(_SearchableSelectInput.SearchableSelectInput, (0, _extends2["default"])({}, props, {
     ref: activatorRef,
     prefix: prefix,
@@ -91,7 +100,12 @@ 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
   })));
 };
 exports.ActivatorTextInput = ActivatorTextInput;

package/lib/@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/lib/@next/Select/components/SearchableSelectInput/ClearSelected.js

@@ -9,7 +9,8 @@ var _SearchableSelectInputStyle = require("./SearchableSelectInputStyle");
 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({
@@ -17,7 +18,9 @@ var ClearSelected = function ClearSelected(_ref) {
     });
     handleClearIconClick();
   };
-  return /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.ClearSelectedContainer, null, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+  return /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.ClearSelectedContainer, {
+    height: height
+  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
     name: "ri-close-circle-fill",
     style: {
       cursor: 'pointer'

package/lib/@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>>;

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

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _InputStyle = require("../../../Input/InputStyle");
 var _ClearSelected = require("./ClearSelected");
 var _SearchableSelectInputStyle = require("./SearchableSelectInputStyle");
-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"];
 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 SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function SearchableSelectInput(_ref, ref) {
@@ -35,6 +35,12 @@ var SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function Searcha
     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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var inputRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
@@ -43,6 +49,7 @@ var SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function Searcha
   var _useState2 = (0, _react.useState)(false),
     isSelectedClicked = _useState2[0],
     setIsSelectedClicked = _useState2[1];
+  var isShowPlaceholder = showPlaceholder && !isPlaceholderFloating;
   var handleFocus = function handleFocus(e) {
     if (disabled) return;
     setIsSelectedClicked(false);
@@ -126,6 +133,7 @@ var SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function Searcha
       showPlaceholder: true
     });
   }, [selectedValue, handleUpdateSearchableSelectState]);
+  var selectedPlaceholder = required ? placeholder + "*" : placeholder;
   return /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.StyledContainer, {
     className: "select-input-container",
     ref: ref,
@@ -133,8 +141,12 @@ var SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function Searcha
     "data-disabled": disabled,
     prefixWidth: 37,
     suffixWidth: 33,
-    width: width
-  }, /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledPrefixContainer, null, prefix), showSelected && /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.StyledSelectedValue, {
+    width: width,
+    height: height,
+    isPlaceholderFloating: isPlaceholderFloating
+  }, /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledPrefixContainer, {
+    height: height
+  }, prefix), showSelected && /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.StyledSelectedValue, {
     className: "searchable-select",
     onClick: handleSelectedClick
   }, /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.StyledSelected, null, ((_options$find = options.find(function (option) {
@@ -143,14 +155,20 @@ var SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function Searcha
     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["default"].createElement(_ClearSelected.ClearSelected, {
     onSelect: onSelect,
     handleClearIconClick: handleClearIconClick,
-    updateInputValue: updateInputValue
-  }));
+    updateInputValue: updateInputValue,
+    height: height
+  }), isPlaceholderFloating && /*#__PURE__*/_react["default"].createElement(_InputStyle.FloatingLabel, {
+    "data-testid": "textarea-label",
+    fontSize: floatingFontSize
+  }, placeholder, required && /*#__PURE__*/_react["default"].createElement(_InputStyle.AsteriskIcon, null, "*")));
 });
 exports.SearchableSelectInput = SearchableSelectInput;

package/lib/@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/lib/@next/Select/components/SearchableSelectInput/SearchableSelectInputStyle.js

@@ -14,7 +14,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledContainer = (0, _styledComponents["default"])(_InputStyle.StyledContainer).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;
 }, _colors.Neutral.B100, function (props) {
   return props.width;
@@ -22,6 +22,9 @@ var StyledContainer = (0, _styledComponents["default"])(_InputStyle.StyledContai
   return props.prefixWidth;
 }, function (props) {
   return props.suffixWidth;
+}, function (props) {
+  var _props$height;
+  return (_props$height = props.height) != null ? _props$height : '36px';
 }, _colors.Red.B93, _colors.Neutral.B85, _colors.Neutral.B95, _colors.Neutral.B85);
 exports.StyledContainer = StyledContainer;
 var StyledSelected = _styledComponents["default"].span.withConfig({

package/lib/@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/lib/@next/TextArea/TextArea.js

@@ -8,7 +8,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var _TextAreaStyle = require("./TextAreaStyle");
 var _Typography = require("../Typography");
-var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange", "forwardedRef", "canExceedMaxLength"];
+var _InputStyle = require("../Input/InputStyle");
+var _excluded = ["value", "rows", "maxLength", "error", "disabled", "width", "onChange", "forwardedRef", "canExceedMaxLength", "required", "border", "borderRadius", "isPlaceholderFloating", "floatingFontSize", "placeholder"];
 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) {
@@ -26,6 +27,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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
     isFocused = _useState[0],
@@ -50,7 +57,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["default"].createElement(_TextAreaStyle.StyledTextArea, (0, _extends2["default"])({
     ref: textAreaInputRef,
     value: value,
@@ -64,14 +74,20 @@ var _TextArea = function _TextArea(_ref) {
     },
     onBlur: function onBlur() {
       return setIsFocused(false);
-    }
+    },
+    border: border,
+    borderRadius: borderRadius,
+    placeholder: isPlaceholderFloating ? 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)));
+  }, charCount, " / ", maxLength)), isPlaceholderFloating && /*#__PURE__*/_react["default"].createElement(_InputStyle.FloatingLabel, {
+    "data-testid": "textarea-label",
+    fontSize: floatingFontSize
+  }, placeholder, required && /*#__PURE__*/_react["default"].createElement(_InputStyle.AsteriskIcon, null, "*")));
 };
 var forwardRef = function forwardRef(props, ref) {
   return /*#__PURE__*/_react["default"].createElement(_TextArea, (0, _extends2["default"])({}, props, {

package/lib/@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/lib/@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/lib/@next/TextArea/TextAreaStyle.js

@@ -7,17 +7,27 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _borderRadius = require("../utilities/borderRadius");
 var _colors = require("../utilities/colors");
 var _TypographyStyles = require("../Typography/TypographyStyles");
+var _InputStyle = require("../Input/InputStyle");
 var StyledTextAreaContainer = _styledComponents["default"].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;
-}, _colors.Neutral.B68, _borderRadius.borderRadius4, _colors.Neutral.B100, _colors.Red.B93, _colors.Neutral.B85, _colors.Neutral.B95);
+}, 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;
+}, _colors.Neutral.B100, _colors.Red.B93, _colors.Neutral.B85, _colors.Neutral.B95);
 exports.StyledTextAreaContainer = StyledTextAreaContainer;
 var StyledTextArea = _styledComponents["default"].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:", ";}}"], _colors.Neutral.B100, _TypographyStyles.body1, _colors.Neutral.B18, _colors.Neutral.B68, _colors.Neutral.B40, _colors.Neutral.B68, _colors.Neutral.B95, _colors.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:", ";}}"], _colors.Neutral.B100, function (_ref3) {
+  var isPlaceholderFloating = _ref3.isPlaceholderFloating;
+  return isPlaceholderFloating && _InputStyle.FloatingLabel;
+}, _TypographyStyles.body1, _colors.Neutral.B18, _colors.Neutral.B68, _colors.Neutral.B40, _colors.Neutral.B68, _colors.Neutral.B95, _colors.Neutral.B85);
 exports.StyledTextArea = StyledTextArea;
 var StyledWordCountContainer = _styledComponents["default"].div.withConfig({
   displayName: "TextAreaStyle__StyledWordCountContainer",