glints-aries 4.1.3 → 4.1.4

package/lib/Input/Select/SelectStyle.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SelectWrapper = exports.SelectListWrapper = exports.SelectLabel = exports.SelectItemWrapper = exports.SelectInput = exports.SelectErrorDefault = exports.SelectContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Colors = require("../../Utils/Colors");
+var _Shadow = require("../../Utils/Shadow");
+var SelectContainer = _styledComponents["default"].div.withConfig({
+  displayName: "SelectStyle__SelectContainer",
+  componentId: "sc-gv8n2w-0"
+})(["flex-grow:1;position:relative;font-weight:normal;"]);
+exports.SelectContainer = SelectContainer;
+var SelectWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "SelectStyle__SelectWrapper",
+  componentId: "sc-gv8n2w-1"
+})(["display:flex;align-items:center;.select-icon{font-size:", ";position:absolute;right:15px;display:flex;align-items:center;cursor:pointer;svg{transform:", ";transition:", ";}}"], function (_ref) {
+  var small = _ref.small;
+  return small ? '12px' : '15px';
+}, function (_ref2) {
+  var isFocus = _ref2.isFocus;
+  return isFocus ? 'rotate(180deg)' : 'rotate(0)';
+}, function (_ref3) {
+  var isFocus = _ref3.isFocus;
+  return isFocus ? 'transform .5s' : 'transform .5s';
+});
+exports.SelectWrapper = SelectWrapper;
+var SelectLabel = _styledComponents["default"].label.withConfig({
+  displayName: "SelectStyle__SelectLabel",
+  componentId: "sc-gv8n2w-2"
+})(["position:absolute;left:", ";background:", ";color:", ";transition:all 0.2s;pointer-events:none;font-size:", ";", " ", " ", ""], function (_ref4) {
+  var small = _ref4.small;
+  return small ? '16px' : '22px';
+}, _Colors.Greyscale.white, function (_ref5) {
+  var floating = _ref5.floating;
+  return floating ? "" + _Colors.Greyscale.black : "" + _Colors.Greyscale.grey;
+}, function (_ref6) {
+  var small = _ref6.small;
+  return small ? '14px' : '16px';
+}, function (_ref7) {
+  var floating = _ref7.floating;
+  if (floating) {
+    return "\n        padding: 0 5px;\n        top: 1em;\n        transform: translate3d(-15px, -20px, 0);\n        transition: all .2s;\n        font-size: 12px;\n      ";
+  }
+}, function (_ref8) {
+  var floating = _ref8.floating,
+    small = _ref8.small;
+  if (floating && small) {
+    return "\n        transform: translate3d(-10px, -20px, 0);\n      ";
+  }
+}, function (_ref9) {
+  var status = _ref9.status,
+    floating = _ref9.floating;
+  if (status === 'error' && floating) {
+    return "\n        color: " + _Colors.PrimaryColor.glintsred + ";\n      ";
+  }
+});
+exports.SelectLabel = SelectLabel;
+var SelectInput = _styledComponents["default"].input.withConfig({
+  displayName: "SelectStyle__SelectInput",
+  componentId: "sc-gv8n2w-3"
+})(["width:100%;outline:none;height:", ";padding:", ";border:", ";transition:all 0.5s;font-size:", ";line-height:1.5;&::placeholder{color:", ";}", " ", " &:disabled{cursor:not-allowed;background:", ";+ ", "{", " color:", ";}&:hover{border:2px solid ", ";}}&:hover{border:2px solid ", ";transition:all 0.5s;", " + ", "{", "}}&:focus{border:2px solid ", ";", " + ", "{padding:0 5px;top:1em;transform:", ";transition:all 0.2s;color:", ";font-size:12px;", "}}"], function (_ref10) {
+  var small = _ref10.small;
+  return small ? '46px' : '53px';
+}, function (_ref11) {
+  var small = _ref11.small;
+  return small ? '13px 40px 13px 15px' : '15px 42px 15px 20px';
+}, function (_ref12) {
+  var status = _ref12.status;
+  return status === 'error' ? "2px solid " + _Colors.PrimaryColor.glintsred : "2px solid " + _Colors.Greyscale.grey;
+}, function (_ref13) {
+  var small = _ref13.small;
+  return small ? '1em' : '1.1em';
+}, _Colors.Greyscale.grey, function (_ref14) {
+  var disableTyping = _ref14.disableTyping;
+  if (disableTyping) {
+    return "\n        color: transparent;\n        text-shadow: 0 0 0 black;\n        cursor: pointer;\n      ";
+  }
+}, function (_ref15) {
+  var status = _ref15.status,
+    floating = _ref15.floating;
+  if (status === 'error') {
+    if (floating) {
+      return "\n          border: 2px solid " + _Colors.PrimaryColor.glintsred + ";\n        ";
+    }
+  }
+}, _Colors.Greyscale.softgrey, SelectLabel, function (_ref16) {
+  var floating = _ref16.floating;
+  if (!floating) {
+    return "\n              background: transparent;\n            ";
+  }
+}, _Colors.Greyscale.grey, _Colors.Greyscale.lightgrey, _Colors.SecondaryColor.actionblue, function (_ref17) {
+  var status = _ref17.status;
+  if (status === 'error') {
+    return "\n          border: 2px solid " + _Colors.PrimaryColor.glintsred + ";\n        ";
+  }
+}, SelectLabel, function (_ref18) {
+  var status = _ref18.status;
+  if (status === 'error') {
+    return "\n          color: " + _Colors.PrimaryColor.glintsred + ";\n        ";
+  }
+}, _Colors.SecondaryColor.actionblue, function (_ref19) {
+  var status = _ref19.status;
+  if (status === 'error') {
+    return "\n          border: 2px solid " + _Colors.PrimaryColor.glintsred + ";\n        ";
+  }
+}, SelectLabel, function (_ref20) {
+  var small = _ref20.small;
+  return small ? 'translate3d(-10px, -20px, 0)' : 'translate3d(-15px, -20px, 0)';
+}, _Colors.Greyscale.black, function (_ref21) {
+  var status = _ref21.status;
+  if (status === 'error') {
+    return "\n          color: " + _Colors.PrimaryColor.glintsred + ";\n        ";
+  }
+});
+exports.SelectInput = SelectInput;
+var SelectListWrapper = _styledComponents["default"].ul.withConfig({
+  displayName: "SelectStyle__SelectListWrapper",
+  componentId: "sc-gv8n2w-4"
+})(["position:absolute;visibility:", ";opacity:", ";transform:", ";transform-origin:center top;transition:", ";background:", ";min-width:100%;height:auto;box-shadow:", ";z-index:9999;max-height:200px;overflow:auto;font-size:", ";padding:0;margin:0;"], function (_ref22) {
+  var open = _ref22.open;
+  return open ? 'visible' : 'hidden';
+}, function (_ref23) {
+  var open = _ref23.open;
+  return open ? '1' : '0';
+}, function (_ref24) {
+  var open = _ref24.open;
+  return open ? 'scaleY(1)' : 'scaleY(0.9)';
+}, function (_ref25) {
+  var open = _ref25.open;
+  return open ? 'all .2s ease' : 'all .1s ease';
+}, _Colors.Greyscale.white, _Shadow.Shadow.down3, function (_ref26) {
+  var small = _ref26.small;
+  return small ? '1em' : '1.1em';
+});
+exports.SelectListWrapper = SelectListWrapper;
+var SelectItemWrapper = _styledComponents["default"].li.withConfig({
+  displayName: "SelectStyle__SelectItemWrapper",
+  componentId: "sc-gv8n2w-5"
+})(["display:flex;align-items:center;cursor:pointer;padding:0.5em 1em;list-style-type:none;&:first-child{margin-top:0.5em;}&:last-child{margin-bottom:0.5em;}&.active{color:", ";background:", ";}&.select-loading{justify-content:center;}", ""], _Colors.SecondaryColor.actionblue, _Colors.Greyscale.softgrey, function (_ref27) {
+  var disabled = _ref27.disabled;
+  if (disabled) {
+    return "\n        cursor: not-allowed;\n        background: " + _Colors.Greyscale.softgrey + ";\n        color: " + _Colors.Greyscale.grey + ";\n        font-style: italic;\n      ";
+  }
+});
+exports.SelectItemWrapper = SelectItemWrapper;
+var SelectErrorDefault = _styledComponents["default"].span.withConfig({
+  displayName: "SelectStyle__SelectErrorDefault",
+  componentId: "sc-gv8n2w-6"
+})(["color:", ";"], _Colors.PrimaryColor.glintsred);
+exports.SelectErrorDefault = SelectErrorDefault;

package/lib/Input/Select/index.d.ts

@@ -0,0 +1,2 @@
+import Select from './Select';
+export default Select;

package/lib/Input/Select/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _Select = _interopRequireDefault(require("./Select"));
+var _default = _Select["default"];
+exports["default"] = _default;

package/lib/Input/Select/select.dynamicOptions.test.d.ts

@@ -0,0 +1,2 @@
+import 'jest-styled-components';
+import '@testing-library/jest-dom/extend-expect';

package/lib/Input/TextField/TextField.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { TextFieldInput } from './TextFieldStyle';
+export declare const isFilled: (type: textFieldType, value: any) => boolean;
+/** Use onChange to listen to input changes.
+ * Use onBlur to listen to focus loss.
+ * <br/>
+ * Use status to set different styles for the Text Field based on status.
+ * <br/>
+ * Use small to set the size of the text field. The ...rest is passed to the
+ * internal text field input. */
+export declare const TextField: React.FunctionComponent<Props>;
+export declare type textFieldType = 'text' | 'password' | 'number';
+export declare type Props = React.ComponentPropsWithoutRef<typeof TextFieldInput> & {
+    type: textFieldType;
+    /** Placeholder for the text field. */
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    removeFloatingLabel?: boolean;
+    /** If true, removes the input content with clear icon. Works for type "text" only. */
+    allowClear?: boolean;
+    /** Minimum value of the "number" type input */
+    min?: number;
+    /** Maximum value of the "number" type input. */
+    max?: number;
+    /** Step value for the "number" type input */
+    step?: number;
+    forwardedRef?: React.RefObject<HTMLInputElement>;
+    /** Icon at the start of the input element. */
+    startIcon?: React.ReactNode;
+    /** Icon at the end of the input element. */
+    endIcon?: React.ReactNode;
+};
+declare const _default: React.ForwardRefExoticComponent<(Pick<Pick<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | React.ComponentType<any>;
+    forwardedAs?: string | React.ComponentType<any>;
+}, string | number | symbol> & {
+    type: textFieldType;
+    /** Placeholder for the text field. */
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    removeFloatingLabel?: boolean;
+    /** If true, removes the input content with clear icon. Works for type "text" only. */
+    allowClear?: boolean;
+    /** Minimum value of the "number" type input */
+    min?: number;
+    /** Maximum value of the "number" type input. */
+    max?: number;
+    /** Step value for the "number" type input */
+    step?: number;
+    forwardedRef?: React.RefObject<HTMLInputElement>;
+    /** Icon at the start of the input element. */
+    startIcon?: React.ReactNode;
+    /** Icon at the end of the input element. */
+    endIcon?: React.ReactNode;
+}, string | number | symbol> | Pick<Pick<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    children?: React.ReactNode;
+} & {
+    as?: string | React.ComponentType<any>;
+    forwardedAs?: string | React.ComponentType<any>;
+}, string | number | symbol> & {
+    type: textFieldType;
+    /** Placeholder for the text field. */
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    removeFloatingLabel?: boolean;
+    /** If true, removes the input content with clear icon. Works for type "text" only. */
+    allowClear?: boolean;
+    /** Minimum value of the "number" type input */
+    min?: number;
+    /** Maximum value of the "number" type input. */
+    max?: number;
+    /** Step value for the "number" type input */
+    step?: number;
+    forwardedRef?: React.RefObject<HTMLInputElement>;
+    /** Icon at the start of the input element. */
+    startIcon?: React.ReactNode;
+    /** Icon at the end of the input element. */
+    endIcon?: React.ReactNode;
+}, string | number | symbol>) & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/lib/Input/TextField/TextField.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.isFilled = exports["default"] = exports.TextField = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _components = require("../../General/Icon/components");
+var _TextFieldStyle = require("./TextFieldStyle");
+var _excluded = ["value", "status", "onKeyDown", "disableTyping", "small", "type", "label", "disabled", "className", "removeFloatingLabel", "allowClear", "forwardedRef", "onChange", "startIcon", "endIcon"];
+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 isFilled = function isFilled(type, value) {
+  if (value === undefined || value === null) return false;
+  if (type === 'number') return !isNaN(parseInt(value));
+  return value !== '';
+};
+
+/** Use onChange to listen to input changes.
+ * Use onBlur to listen to focus loss.
+ * <br/>
+ * Use status to set different styles for the Text Field based on status.
+ * <br/>
+ * Use small to set the size of the text field. The ...rest is passed to the
+ * internal text field input. */
+exports.isFilled = isFilled;
+var TextField = function TextField(_ref) {
+  var value = _ref.value,
+    status = _ref.status,
+    onKeyDown = _ref.onKeyDown,
+    disableTyping = _ref.disableTyping,
+    small = _ref.small,
+    type = _ref.type,
+    label = _ref.label,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    className = _ref.className,
+    _ref$removeFloatingLa = _ref.removeFloatingLabel,
+    removeFloatingLabel = _ref$removeFloatingLa === void 0 ? false : _ref$removeFloatingLa,
+    _ref$allowClear = _ref.allowClear,
+    allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear,
+    forwardedRef = _ref.forwardedRef,
+    onChange = _ref.onChange,
+    startIcon = _ref.startIcon,
+    endIcon = _ref.endIcon,
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _React$useState = React.useState(false),
+    floating = _React$useState[0],
+    setFloating = _React$useState[1];
+  var _React$useState2 = React.useState(type),
+    inputType = _React$useState2[0],
+    setInputType = _React$useState2[1];
+  var hasStartIcon = Boolean(startIcon);
+  var handleShowPassword = React.useCallback(function () {
+    setInputType(inputType === 'password' ? 'text' : 'password');
+  }, [setInputType, inputType]);
+  var handleClearInput = function handleClearInput(e) {
+    var event = Object.create(e);
+    event.target.value = '';
+    onChange(event);
+  };
+  var handleKeyDown = React.useCallback(function (e) {
+    if (disableTyping) {
+      e.preventDefault();
+    }
+    if (onKeyDown !== undefined) {
+      return onKeyDown(e);
+    }
+  }, [onKeyDown, disableTyping]);
+  React.useEffect(function () {
+    setFloating(isFilled(inputType, value));
+  }, [setFloating, inputType, value]);
+  var canShowClearIcon = allowClear && type === 'text' && value && value.length > 0;
+  return /*#__PURE__*/React.createElement(_TextFieldStyle.TextFieldContainer, {
+    className: (0, _classnames["default"])('aries-textfield', className)
+  }, /*#__PURE__*/React.createElement(_TextFieldStyle.TextFieldInput, (0, _extends2["default"])({
+    ref: forwardedRef,
+    type: inputType,
+    placeholder: removeFloatingLabel ? label : undefined,
+    status: status,
+    disabled: disabled,
+    onChange: onChange,
+    onKeyDown: handleKeyDown,
+    floating: floating,
+    value: value,
+    "aria-label": label,
+    small: small,
+    disableTyping: disableTyping,
+    hasStartIcon: hasStartIcon
+  }, restProps)), startIcon && /*#__PURE__*/React.createElement(_TextFieldStyle.StartIconContainer, null, startIcon), !removeFloatingLabel && /*#__PURE__*/React.createElement(_TextFieldStyle.TextFieldLabel, {
+    "data-testid": "textfield-label",
+    className: "textfield-label",
+    floating: floating,
+    status: status,
+    small: small,
+    hasStartIcon: hasStartIcon
+  }, label), canShowClearIcon && /*#__PURE__*/React.createElement(_TextFieldStyle.IconContainer, null, /*#__PURE__*/React.createElement(_components.CloseCircleSolidIcon, {
+    "data-testid": "clear-button",
+    onClick: handleClearInput
+  })), type === 'password' && /*#__PURE__*/React.createElement(_TextFieldStyle.IconContainer, {
+    onClick: handleShowPassword
+  }, inputType === 'password' ? /*#__PURE__*/React.createElement(_components.EyeSlashedIcon, {
+    "data-testid": "invisible-icon"
+  }) : /*#__PURE__*/React.createElement(_components.EyeIcon, null)), endIcon && /*#__PURE__*/React.createElement(_TextFieldStyle.EndIconContainer, null, endIcon));
+};
+exports.TextField = TextField;
+var forwardRef = function forwardRef(props, ref) {
+  return /*#__PURE__*/React.createElement(TextField, (0, _extends2["default"])({}, props, {
+    forwardedRef: ref
+  }));
+};
+forwardRef.displayName = TextField.name;
+var _default = /*#__PURE__*/React.forwardRef(forwardRef);
+exports["default"] = _default;

package/lib/Input/TextField/TextField.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const TextFieldWithClearIcon: any;
+export declare const Disabled: any;
+export declare const TextFieldWithStartIcon: any;
+export declare const TextFieldWithEndIcon: any;
+export declare const PasswordField: any;

package/lib/Input/TextField/TextField.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/lib/Input/TextField/TextFieldStyle.d.ts

@@ -0,0 +1,21 @@
+export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StartIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EndIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextFieldContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextFieldLabel: import("styled-components").StyledComponent<"label", any, TextFieldLabelProps, never>;
+declare type statusType = 'success' | 'error';
+interface TextFieldLabelProps {
+    small: boolean;
+    floating: boolean;
+    status: statusType;
+    hasStartIcon?: boolean;
+}
+export declare const TextFieldInput: import("styled-components").StyledComponent<"input", any, TextFieldInputProps, never>;
+export interface TextFieldInputProps {
+    small?: boolean;
+    status?: statusType;
+    disableTyping?: boolean;
+    floating?: boolean;
+    hasStartIcon?: boolean;
+}
+export {};

package/lib/Input/TextField/TextFieldStyle.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.TextFieldLabel = exports.TextFieldInput = exports.TextFieldContainer = exports.StartIconContainer = exports.IconContainer = exports.EndIconContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Colors = require("../../Utils/Colors");
+var startIconPadding = '44px';
+var IconContainer = _styledComponents["default"].div.withConfig({
+  displayName: "TextFieldStyle__IconContainer",
+  componentId: "sc-5sd02x-0"
+})(["position:absolute;display:flex;right:1em;cursor:pointer;svg{fill:#666666;}&:hover svg{fill:", ";}"], _Colors.Greyscale.black);
+exports.IconContainer = IconContainer;
+var StartIconContainer = _styledComponents["default"].div.withConfig({
+  displayName: "TextFieldStyle__StartIconContainer",
+  componentId: "sc-5sd02x-1"
+})(["position:absolute;display:flex;left:16px;svg{fill:#666666;}"]);
+exports.StartIconContainer = StartIconContainer;
+var EndIconContainer = _styledComponents["default"].div.withConfig({
+  displayName: "TextFieldStyle__EndIconContainer",
+  componentId: "sc-5sd02x-2"
+})(["position:absolute;display:flex;right:16px;svg{fill:#666666;}"]);
+exports.EndIconContainer = EndIconContainer;
+var TextFieldContainer = _styledComponents["default"].div.withConfig({
+  displayName: "TextFieldStyle__TextFieldContainer",
+  componentId: "sc-5sd02x-3"
+})(["position:relative;display:flex;align-items:center;flex-grow:1;"]);
+exports.TextFieldContainer = TextFieldContainer;
+var TextFieldLabel = _styledComponents["default"].label.withConfig({
+  displayName: "TextFieldStyle__TextFieldLabel",
+  componentId: "sc-5sd02x-4"
+})(["position:absolute;left:", ";margin-right:1px;overflow:hidden;color:#666666;transition:all 0.2s;pointer-events:none;font-weight:400;font-size:", ";", " ", " ", ""], function (_ref) {
+  var small = _ref.small;
+  return small ? '16px' : '22px';
+}, function (_ref2) {
+  var small = _ref2.small;
+  return small ? '14px' : '16px';
+}, function (_ref3) {
+  var hasStartIcon = _ref3.hasStartIcon;
+  if (hasStartIcon) {
+    return "\n        left: " + startIconPadding + ";\n      ";
+  }
+}, function (_ref4) {
+  var floating = _ref4.floating;
+  if (floating) {
+    return "\n        padding: 0 5px;\n        top: 1em;\n        transform: translate3d(-15px, -20px, 0);\n        transition: all .2s;\n        font-size: 12px;\n        background-color: " + _Colors.Greyscale.white + ";\n      ";
+  }
+}, function (_ref5) {
+  var floating = _ref5.floating,
+    small = _ref5.small;
+  if (floating && small) {
+    return "\n        transform: translate3d(-10px, -20px, 0);\n      ";
+  }
+});
+exports.TextFieldLabel = TextFieldLabel;
+var TextFieldInput = _styledComponents["default"].input.withConfig({
+  displayName: "TextFieldStyle__TextFieldInput",
+  componentId: "sc-5sd02x-5"
+})(["position:relative;width:100%;outline:none;font-size:", ";padding:", ";border:unset;border-radius:", ";transition:all 0.5s;background-color:", ";", " ", " &:hover{transition:all 0.5s;background-color:", ";~ ", "{color:#666666;}}&:focus{background-color:", ";", " ~ ", "{padding:0 5px;top:1em;transform:", ";transition:all 0.2s;font-size:12px;right:auto;background-color:", ";}}&:disabled{cursor:not-allowed;background:", ";+ ", "{background:transparent;color:", ";}}"], function (_ref6) {
+  var small = _ref6.small;
+  return small ? '14px' : '16px';
+}, function (_ref7) {
+  var small = _ref7.small;
+  return small ? '8px 16px' : '12px 16px';
+}, function (_ref8) {
+  var small = _ref8.small;
+  return small ? '4px' : '8px';
+}, function (_ref9) {
+  var status = _ref9.status;
+  return status === 'error' ? ' rgba(236, 39, 43, 0.08)' : 'rgb(1, 126, 183, 0.08)';
+}, function (_ref10) {
+  var disableTyping = _ref10.disableTyping;
+  if (disableTyping) {
+    return "\n        color: transparent;\n        text-shadow: 0 0 0 black;\n        cursor: pointer;\n      ";
+  }
+}, function (_ref11) {
+  var hasStartIcon = _ref11.hasStartIcon;
+  if (hasStartIcon) {
+    return "\n        padding-left: " + startIconPadding + ";\n      ";
+  }
+}, function (_ref12) {
+  var status = _ref12.status;
+  return status === 'error' ? ' rgba(236, 39, 43, 0.08)' : 'rgb(1, 126, 183, 0.16)';
+}, TextFieldLabel, function (_ref13) {
+  var status = _ref13.status;
+  return status === 'error' ? ' rgba(236, 39, 43, 0.08)' : 'rgb(1, 126, 183, 0.24)';
+}, function (_ref14) {
+  var hasStartIcon = _ref14.hasStartIcon;
+  if (hasStartIcon) {
+    return "\n          + " + StartIconContainer + " {\n            svg {\n              fill: " + _Colors.SecondaryColor.actionblue + ";\n            }\n          }\n        ";
+  }
+}, TextFieldLabel, function (_ref15) {
+  var small = _ref15.small;
+  return small ? 'translate3d(-10px, -20px, 0)' : 'translate3d(-15px, -20px, 0)';
+}, _Colors.Greyscale.white, _Colors.Greyscale.softgrey, TextFieldLabel, _Colors.Greyscale.grey);
+exports.TextFieldInput = TextFieldInput;

package/lib/Input/TextField/index.d.ts

@@ -0,0 +1,4 @@
+import TextField, { Props } from './TextField';
+export declare type TextFieldProps = Props;
+export { TextField };
+export default TextField;

package/lib/Input/TextField/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _TextField = _interopRequireDefault(require("./TextField"));
+exports.TextField = _TextField["default"];
+var _default = _TextField["default"];
+exports["default"] = _default;

package/lib/Input/Textarea/Textarea.d.ts

@@ -0,0 +1,22 @@
+import React, { FC, HTMLAttributes, RefObject } from 'react';
+/** Use onChange to listen to input changes. Use
+ * onBlur to listen to focus loss.
+ * <br/>
+ * Note that currently, Textarea has some non-standard behaviour
+ * when forwarding standard props: The className will be passed to
+ * the internal 'container' while the ...rest is passed to the
+ * internal textarea. */
+export declare const Textarea: FC<Props>;
+export declare type Status = 'default' | 'error';
+export interface Props extends HTMLAttributes<HTMLTextAreaElement> {
+    value?: string;
+    status?: Status;
+    /** Placeholder for the text area. */
+    label?: string;
+    removeFloatingLabel?: boolean;
+    disabled?: boolean;
+    forwardedRef?: RefObject<HTMLTextAreaElement>;
+    small?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLTextAreaElement>>;
+export default _default;

package/lib/Input/Textarea/Textarea.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = exports.Textarea = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodash = require("lodash");
+var _TextareaStyle = require("./TextareaStyle");
+var _excluded = ["label", "value", "status", "disabled", "className", "onBlur", "onChange", "forwardedRef", "removeFloatingLabel", "small"];
+var MIN_ROWS = 4;
+var MAX_ROWS = 12;
+// Rows are required to set the textarea height depending on the content added.
+
+/** Use onChange to listen to input changes. Use
+ * onBlur to listen to focus loss.
+ * <br/>
+ * Note that currently, Textarea has some non-standard behaviour
+ * when forwarding standard props: The className will be passed to
+ * the internal 'container' while the ...rest is passed to the
+ * internal textarea. */
+var Textarea = function Textarea(_ref) {
+  var label = _ref.label,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? undefined : _ref$value,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? 'default' : _ref$status,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    className = _ref.className,
+    onBlur = _ref.onBlur,
+    onChange = _ref.onChange,
+    forwardedRef = _ref.forwardedRef,
+    _ref$removeFloatingLa = _ref.removeFloatingLabel,
+    removeFloatingLabel = _ref$removeFloatingLa === void 0 ? false : _ref$removeFloatingLa,
+    _ref$small = _ref.small,
+    small = _ref$small === void 0 ? false : _ref$small,
+    restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _React$useState = _react["default"].useState(false),
+    floating = _React$useState[0],
+    setFloating = _React$useState[1];
+  var _React$useState2 = _react["default"].useState(MIN_ROWS),
+    rows = _React$useState2[0],
+    setRows = _React$useState2[1];
+  var innerRef = _react["default"].useRef(null);
+  var textareaInputRef = forwardedRef || innerRef;
+  var _React$useState3 = _react["default"].useState(0),
+    textareaMaxHeight = _React$useState3[0],
+    setTextareaMaxHeight = _React$useState3[1];
+  _react["default"].useLayoutEffect(function () {
+    var textarea = textareaInputRef.current;
+    if (!textarea) return;
+    setTextareaMaxHeight(~~(textarea.offsetHeight * 3.7 + 23 * 8 + 1));
+  }, [textareaInputRef]);
+  var handleChange = _react["default"].useCallback(function (e) {
+    var currentRows = ~~(e.target.scrollHeight / 30);
+    setRows(currentRows < MAX_ROWS ? currentRows : MAX_ROWS);
+    if ((0, _lodash.isFunction)(onChange)) {
+      return onChange(e);
+    }
+  }, [onChange]);
+  var handleFocusChange = _react["default"].useCallback(function (e) {
+    setFloating(e.target.value.length > 0);
+    if (onBlur !== undefined) {
+      return onBlur(e);
+    }
+  }, [onBlur]);
+  _react["default"].useEffect(function () {
+    if (value && value !== '' && !floating) {
+      setFloating(true);
+    }
+  }, [value, floating]);
+  return /*#__PURE__*/_react["default"].createElement(_TextareaStyle.TextareaContainer, {
+    className: (0, _classnames["default"])('aries-textarea', className)
+  }, /*#__PURE__*/_react["default"].createElement(_TextareaStyle.TextareaInput, (0, _extends2["default"])({
+    ref: textareaInputRef,
+    placeholder: removeFloatingLabel ? label : undefined,
+    rows: rows,
+    status: status,
+    disabled: disabled,
+    onBlur: handleFocusChange,
+    onChange: handleChange,
+    floating: floating,
+    value: value,
+    "aria-label": label,
+    small: small
+  }, restProps, {
+    style: {
+      maxHeight: textareaMaxHeight + "px"
+    }
+  })), !removeFloatingLabel && /*#__PURE__*/_react["default"].createElement(_TextareaStyle.TextareaLabel, {
+    "data-testid": "textarea-label",
+    floating: floating,
+    status: status,
+    small: small
+  }, label));
+};
+exports.Textarea = Textarea;
+var forwardRef = function forwardRef(props, ref) {
+  return /*#__PURE__*/_react["default"].createElement(Textarea, (0, _extends2["default"])({}, props, {
+    forwardedRef: ref
+  }));
+};
+forwardRef.displayName = Textarea.name;
+var _default = /*#__PURE__*/_react["default"].forwardRef(forwardRef);
+exports["default"] = _default;