@telefonica/mistica 10.9.2 → 10.13.0

package/dist/popover.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
-var _iconClose = _interopRequireDefault(require("./icons/icon-close"));
+var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
 var _iconButton = _interopRequireDefault(require("./icon-button"));
 var _hooks = require("./hooks");
 function _interopRequireDefault(obj) {
@@ -323,7 +323,7 @@ var Popover = function Popover(param) {
             onPress: handleClose,
             trackingEvent: trackingEvent,
             "aria-label": texts.modalClose
-        }, /*#__PURE__*/ React.createElement(_iconClose.default, {
+        }, /*#__PURE__*/ React.createElement(_iconCloseRegular.default, {
             color: colors.neutralHigh
         })))));
     }

package/dist/search-field.js

@@ -7,7 +7,7 @@ var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
 var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
 var _iconSearch = _interopRequireDefault(require("./icons/icon-search"));
-var _iconClose = _interopRequireDefault(require("./icons/icon-close"));
+var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
 var _iconButton = _interopRequireDefault(require("./icon-button"));
 var _hooks = require("./hooks");
 var _dom = require("./utils/dom");
@@ -180,7 +180,7 @@ var SearchField = function SearchField(_param) {
             },
             "aria-label": theme.texts.formSearchClear,
             onPress: clearInput
-        }, /*#__PURE__*/ React.createElement(_iconClose.default, null)) : undefined
+        }, /*#__PURE__*/ React.createElement(_iconCloseRegular.default, null)) : undefined
     }, rest, fieldProps, {
         type: "search"
     })));

package/dist/select.js

@@ -8,13 +8,14 @@ var _formContext = require("./form-context");
 var _hooks = require("./hooks");
 var _keyCodes = require("./utils/key-codes");
 var _textFieldComponents = require("./text-field-components");
-var _iconArrowDown = _interopRequireDefault(require("./icons/icon-arrow-down"));
+var _iconChevronDownRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-chevron-down-regular"));
 var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
 var _overlay = _interopRequireDefault(require("./overlay"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _platform = require("./utils/platform");
 var _jss = require("./jss");
 var _dom = require("./utils/dom");
+var _text = require("./text");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -152,7 +153,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         arrowDown: {
             position: 'absolute',
             right: 16,
-            top: 'calc(50% - 12px)',
+            top: 'calc(50% - 10px)',
             pointerEvents: 'none',
             opacity: function opacity(param) {
                 var disabled = param.disabled;
@@ -224,7 +225,6 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         },
         menuItem: (_obj1 = {
             color: theme.colors.textPrimary,
-            lineHeight: 1.5,
             padding: '6px 16px',
             height: 48,
             transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
@@ -533,7 +533,9 @@ var Select = function Select(param) {
     })), /*#__PURE__*/ React.createElement("div", {
         className: classes.arrowDown,
         "aria-hidden": true
-    }, /*#__PURE__*/ React.createElement(_iconArrowDown.default, null))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", _extends({
+    }, /*#__PURE__*/ React.createElement(_iconChevronDownRegular.default, {
+        size: 20
+    }))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", _extends({
         className: classes.selectContainer,
         role: "button",
         "aria-haspopup": "listbox",
@@ -543,7 +545,9 @@ var Select = function Select(param) {
             visibility: 'hidden'
         },
         fullWidth: fullWidth,
-        endIcon: /*#__PURE__*/ React.createElement(_iconArrowDown.default, null),
+        endIcon: /*#__PURE__*/ React.createElement(_iconChevronDownRegular.default, {
+            size: 20
+        }),
         focus: isFocused,
         label: label,
         value: value,
@@ -589,7 +593,9 @@ var Select = function Select(param) {
                     optionRefs.current.delete(val);
                 }
             }
-        }, text));
+        }, /*#__PURE__*/ React.createElement(_text.Text3, {
+            regular: true
+        }, text)));
     }))));
 };
 var _default = Select;

package/dist/text-field-base.js

@@ -6,6 +6,7 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
 var _textFieldComponents = require("./text-field-components");
+var _text = require("./text");
 var _platform = require("./utils/platform");
 var _hooks = require("./hooks");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -148,7 +149,8 @@ var commonInputStyles = function commonInputStyles(theme) {
         background: 'none',
         border: 0,
         outline: 0,
-        fontSize: 16,
+        fontSize: 'inherit',
+        lineHeight: 'inherit',
         paddingRight: function paddingRight(param) {
             var endIcon = param.endIcon;
             return endIcon ? 0 : 16;
@@ -189,6 +191,7 @@ var commonInputStyles = function commonInputStyles(theme) {
         boxShadow: 'none'
     };
 };
+var _obj, _obj1, _obj2;
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     return {
         container: {
@@ -196,37 +199,45 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             flexDirection: 'column',
             minWidth: 96
         },
-        border: {
-            border: "1px solid ".concat(theme.colors.border),
-            borderRadius: 4,
-            height: function height(param) {
-                var multiline = param.multiline;
-                return multiline ? 152 : 56;
+        fullWidth: {
+            width: '100%',
+            display: 'inline-flex',
+            alignSelf: function alignSelf(param) {
+                var prefix = param.prefix;
+                return prefix ? 'baseline' : 'initial';
             },
-            display: 'flex',
-            position: 'relative'
+            '& > div': {
+                width: '100%',
+                display: 'inline-flex'
+            }
         },
-        textArea: _objectSpread({
+        textArea: _objectSpread((_obj = {
             resize: 'none',
+            marginTop: function marginTop(param) {
+                var hasLabel = param.hasLabel;
+                return hasLabel ? 28 : 16;
+            }
+        }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
             marginTop: function marginTop(param) {
                 var hasLabel = param.hasLabel;
                 return hasLabel ? 24 : 16;
-            },
-            paddingBottom: 8,
-            lineHeight: '24px'
-        }, commonInputStyles(theme)),
-        input: _objectSpread({
+            }
+        }), _defineProperty(_obj, "paddingBottom", '8px'), _obj), commonInputStyles(theme)),
+        input: _objectSpread((_obj1 = {
             position: 'relative',
             paddingTop: function paddingTop(param) {
                 var hasLabel = param.hasLabel;
-                return hasLabel ? 24 : 16;
-            },
-            paddingBottom: function paddingBottom(param) {
+                return hasLabel ? 28 : 16;
+            }
+        }, _defineProperty(_obj1, theme.mq.tabletOrSmaller, {
+            paddingTop: function paddingTop(param) {
                 var hasLabel = param.hasLabel;
-                return hasLabel ? 8 : 16;
-            },
-            height: '100%'
-        }, commonInputStyles(theme), {
+                return hasLabel ? 24 : 16;
+            }
+        }), _defineProperty(_obj1, "paddingBottom", function(param) {
+            var hasLabel = param.hasLabel;
+            return hasLabel ? 8 : 16;
+        }), _defineProperty(_obj1, "height", '100%'), _obj1), commonInputStyles(theme), {
             WebkitAppearance: 'none',
             '&::-webkit-search-cancel-button': {
                 WebkitAppearance: 'none'
@@ -290,6 +301,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             paddingRight: 16,
             display: 'flex',
             alignItems: 'center',
+            alignSelf: 'center',
             opacity: function opacity(param) {
                 var disabled = param.disabled;
                 return disabled ? 0.3 : 1;
@@ -308,29 +320,24 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 return disabled ? 0.3 : 1;
             }
         },
-        prefix: {
+        prefix: (_obj2 = {
+            alignSelf: 'baseline',
             paddingTop: function paddingTop(param) {
                 var hasLabel = param.hasLabel;
-                return hasLabel ? 25 : 16;
-            },
-            paddingBottom: function paddingBottom(param) {
+                return hasLabel ? 28 : 16;
+            }
+        }, _defineProperty(_obj2, theme.mq.tabletOrSmaller, {
+            paddingTop: function paddingTop(param) {
                 var hasLabel = param.hasLabel;
-                return hasLabel ? 8 : 16;
-            },
-            paddingLeft: 12,
-            paddingRight: 16,
-            display: 'flex',
-            alignItems: 'center',
-            color: function color(param) {
-                var disabled = param.disabled;
-                return disabled ? theme.colors.textDisabled : theme.colors.textSecondary;
-            },
-            opacity: function opacity(param) {
-                var inputState = param.inputState;
-                return inputState === 'default' ? 0 : 1;
-            },
-            transition: 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms'
-        }
+                return hasLabel ? 24 : 16;
+            }
+        }), _defineProperty(_obj2, "paddingBottom", function(param) {
+            var hasLabel = param.hasLabel;
+            return hasLabel ? 8 : 16;
+        }), _defineProperty(_obj2, "paddingLeft", 12), _defineProperty(_obj2, "paddingRight", 16), _defineProperty(_obj2, "opacity", function(param) {
+            var inputState = param.inputState;
+            return inputState === 'default' ? 0 : 1;
+        }), _defineProperty(_obj2, "transition", 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms'), _obj2)
     };
 });
 // Chrome ignores 'off': https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164
@@ -364,9 +371,10 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
     ]);
     var id = (0, _hooks).useAriaId(idProp);
     var ref1 = _slicedToArray(React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) ? 'filled' : 'default'), 2), inputState = ref1[0], setInputState = ref1[1];
-    var ref2 = (0, _hooks).useTheme(), platformOverrides = ref2.platformOverrides;
-    var ref3;
-    var ref4 = _slicedToArray(React.useState((ref3 = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== null && ref3 !== void 0 ? ref3 : 0), 2), characterCount = ref4[0], setCharacterCount = ref4[1];
+    var ref2 = (0, _hooks).useTheme(), platformOverrides = ref2.platformOverrides, colors = ref2.colors;
+    var ref3 = (0, _hooks).useScreenSize(), isTabletOrSmaller = ref3.isTabletOrSmaller;
+    var ref4;
+    var ref5 = _slicedToArray(React.useState((ref4 = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== null && ref4 !== void 0 ? ref4 : 0), 2), characterCount = ref5[0], setCharacterCount = ref5[1];
     var hasLabel = !!label || !rest.required;
     // this shrinkLabel override is a workaround because I was unable to find a way to hide date
     // and date-time native placeholders when the input is not required
@@ -422,24 +430,16 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
         maxLength: maxLength,
         autoComplete: fixAutoComplete(platformOverrides, autoCompleteProp)
     }, inputProps);
+    var isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
+    var scale = isShrinked ? isTabletOrSmaller ? _textFieldComponents.LABEL_SCALE_MOBILE : _textFieldComponents.LABEL_SCALE_DESKTOP : 1;
     var labelStyle = {
+        left: startIcon ? 48 : _textFieldComponents.LABEL_LEFT_POSITION,
+        // shrinking means applying a scale transformation, so width will be proportionally reduced.
+        // Let's keep the original width.
+        width: "calc(((100% - ".concat(_textFieldComponents.LABEL_LEFT_POSITION + (startIcon ? 48 : _textFieldComponents.LABEL_LEFT_POSITION), "px)) / ").concat(scale, ")"),
+        paddingRight: endIcon && !isShrinked ? 36 : 0
     };
-    var isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
-    if (startIcon) {
-        labelStyle = isShrinked ? {
-            left: 48,
-            right: 0,
-            width: 'auto'
-        } : {
-            left: 48,
-            right: 12,
-            width: 'auto'
-        };
-    } else if (endIcon && !isShrinked) {
-        labelStyle = {
-            paddingRight: 36
-        };
-    }
+    var prefixColor = rest.disabled ? colors.textDisabled : colors.textSecondary;
     return(/*#__PURE__*/ React.createElement(_textFieldComponents.FieldContainer, {
         disabled: rest.disabled,
         helperText: /*#__PURE__*/ React.createElement(_textFieldComponents.HelperText, {
@@ -454,7 +454,15 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
         className: classes.startIcon
     }, startIcon), prefix && /*#__PURE__*/ React.createElement("div", {
         className: classes.prefix
-    }, prefix), /*#__PURE__*/ React.createElement(inputComponent || defaultInputElement, _objectSpread({
+    }, /*#__PURE__*/ React.createElement(_text.Text3, {
+        color: prefixColor,
+        regular: true
+    }, prefix)), /*#__PURE__*/ React.createElement("div", {
+        className: classes.fullWidth
+    }, /*#__PURE__*/ React.createElement(_text.Text3, {
+        as: "div",
+        regular: true
+    }, /*#__PURE__*/ React.createElement(inputComponent || defaultInputElement, _objectSpread({
     }, inputRefProps, props, {
         id: id,
         className: multiline ? classes.textArea : classes.input,
@@ -485,7 +493,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
         value: value
     }, error && {
         'aria-invalid': true
-    })), label && /*#__PURE__*/ React.createElement(_textFieldComponents.Label, {
+    })))), label && /*#__PURE__*/ React.createElement(_textFieldComponents.Label, {
         style: labelStyle,
         error: error,
         forId: id,
@@ -500,7 +508,6 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
 var useSuggestionsStyles = (0, _jss).createUseStyles(function() {
     return {
         menuItem: {
-            lineHeight: 1.5,
             padding: '6px 16px',
             height: 48,
             transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
@@ -602,7 +609,9 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 role: "menuitem",
                 className: (0, _classnames).default(classes.menuItem, _defineProperty({
                 }, classes.menuItemSelected, isHighlighted))
-            }, suggestion));
+            }, /*#__PURE__*/ React.createElement(_text.Text3, {
+                regular: true
+            }, suggestion)));
         },
         renderSuggestionsContainer: function renderSuggestionsContainer(options) {
             /*#__PURE__*/ return(/*#__PURE__*/ React.createElement("div", _extends({

package/dist/text-field-components.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
 export declare type InputState = 'focused' | 'filled' | 'default';
 export declare const DEFAULT_WIDTH = 328;
+export declare const LABEL_LEFT_POSITION = 12;
+export declare const LABEL_SCALE_DESKTOP: number;
+export declare const LABEL_SCALE_MOBILE: number;
 declare type LabelProps = {
     shrinkLabel?: boolean;
     forId: string;

package/dist/text-field-components.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.Label = exports.FieldContainer = exports.DEFAULT_WIDTH = exports.HelperText = void 0;
+exports.LABEL_SCALE_DESKTOP = exports.FieldContainer = exports.Label = exports.LABEL_SCALE_MOBILE = exports.DEFAULT_WIDTH = exports.HelperText = exports.LABEL_LEFT_POSITION = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jss = require("./jss");
 var _themeVariantContext = require("./theme-variant-context");
 var _hooks = require("./hooks");
+var _text = require("./text");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -100,24 +101,26 @@ function _slicedToArray(arr, i) {
 var DEFAULT_WIDTH = 328;
 exports.DEFAULT_WIDTH = DEFAULT_WIDTH;
 var LABEL_LEFT_POSITION = 12;
-var LABEL_SCALE = 0.75;
+exports.LABEL_LEFT_POSITION = LABEL_LEFT_POSITION;
+var LABEL_SCALE_DESKTOP = parseFloat('0.78'); // Text1/Text3 = 14/18 (desktop)
+exports.LABEL_SCALE_DESKTOP = LABEL_SCALE_DESKTOP;
+var LABEL_SCALE_MOBILE = parseFloat('0.75'); // Text1/Text3 = 12/16 (mobile)
+exports.LABEL_SCALE_MOBILE = LABEL_SCALE_MOBILE;
+var _obj;
 var useLabelStyles = (0, _jss).createUseStyles(function(theme) {
     return {
-        labelContainer: {
-            lineHeight: '1em',
+        labelContainer: (_obj = {
             position: 'absolute',
             pointerEvents: 'none',
             left: LABEL_LEFT_POSITION,
             top: 0,
-            fontSize: 16,
-            transformOrigin: 0,
-            height: 16,
+            transformOrigin: '0 0',
+            height: 24,
             display: 'flex',
             flexDirection: 'row',
-            transform: function transform(param) {
-                var isShrinked = param.isShrinked;
-                return isShrinked ? "translateY(8px) scale(".concat(LABEL_SCALE, ")") : 'translateY(20px) scale(1)';
-            },
+            transform: 'translateY(18px) scale(1)',
+            fontSize: 18,
+            lineHeight: '24px',
             color: function color(param) {
                 var inputState = param.inputState, error = param.error, disabled = param.disabled;
                 if (inputState === 'default' && disabled) {
@@ -130,12 +133,11 @@ var useLabelStyles = (0, _jss).createUseStyles(function(theme) {
                     return theme.colors.controlActivated;
                 }
                 return theme.colors.textSecondary;
-            },
-            width: function width(param) {
-                var isShrinked = param.isShrinked;
-                return isShrinked ? "calc((100% - ".concat(LABEL_LEFT_POSITION * 2, "px) / ").concat(LABEL_SCALE, ")") : "calc(100% - ".concat(LABEL_LEFT_POSITION * 2, "px)");
             }
-        },
+        }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
+            fontSize: 16,
+            transform: 'translateY(16px) scale(1)'
+        }), _defineProperty(_obj, "width", "calc(100% - ".concat(LABEL_LEFT_POSITION * 2, "px)")), _obj),
         labelText: {
             '-webkit-line-clamp': 1,
             lineClamp: 1,
@@ -143,14 +145,19 @@ var useLabelStyles = (0, _jss).createUseStyles(function(theme) {
             display: 'box',
             overflow: 'hidden',
             boxOrient: 'vertical',
-            flexShrink: 1,
-            // this is needed because at 1em, font descendants are cutted when using overflow hidden
-            // setting a higher height is not an option because it shows the next line
-            lineHeight: '1.2em',
-            height: '1.2em',
-            position: 'relative',
-            top: '-0.1em'
-        }
+            flexShrink: 1
+        },
+        shrinked: _defineProperty({
+            transform: "translateY(8px) scale(".concat(LABEL_SCALE_DESKTOP, ")"),
+            height: 20 / LABEL_SCALE_DESKTOP,
+            lineHeight: "".concat(20 / LABEL_SCALE_DESKTOP, "px"),
+            width: "calc(100% - ".concat(LABEL_LEFT_POSITION * 2, "px) / ").concat(LABEL_SCALE_DESKTOP)
+        }, theme.mq.tabletOrSmaller, {
+            transform: "translateY(8px) scale(".concat(LABEL_SCALE_MOBILE, ")"),
+            height: 16 / LABEL_SCALE_MOBILE,
+            lineHeight: "".concat(16 / LABEL_SCALE_MOBILE, "px"),
+            width: "calc(100% - ".concat(LABEL_LEFT_POSITION * 2, "px) / ").concat(LABEL_SCALE_MOBILE)
+        })
     };
 });
 var Label = function Label(param) {
@@ -177,7 +184,8 @@ var Label = function Label(param) {
         };
     }, []);
     return(/*#__PURE__*/ React.createElement("label", {
-        className: classes.labelContainer,
+        className: (0, _classnames).default(classes.labelContainer, _defineProperty({
+        }, classes.shrinked, isShrinked)),
         htmlFor: forId,
         style: _objectSpread({
         }, style, {
@@ -188,38 +196,22 @@ var Label = function Label(param) {
     }, children), optional ? /*#__PURE__*/ React.createElement("span", null, "\xa0(", texts.formFieldOptionalLabelSuffix, ")") : null));
 };
 exports.Label = Label;
-var useHelperTextStyles = (0, _jss).createUseStyles(function(theme) {
+var useHelperTextStyles = (0, _jss).createUseStyles(function() {
     return {
         helperContainer: {
-            lineHeight: 1.4,
             paddingLeft: 14,
             paddingRight: 16,
-            '& p': {
+            '& div': {
                 margin: 0,
                 marginTop: 4,
-                fontSize: 12,
                 flexGrow: 1
             },
             display: 'flex'
         },
         leftText: {
-            color: function color(param) {
-                var error = param.error, isInverse = param.isInverse;
-                if (isInverse) {
-                    return theme.colors.textPrimaryInverse;
-                }
-                if (error) {
-                    return theme.colors.error;
-                }
-                return theme.colors.textSecondary;
-            },
             textAlign: 'left'
         },
         rightText: {
-            color: function color(param) {
-                var isInverse = param.isInverse;
-                return isInverse ? theme.colors.textPrimaryInverse : theme.colors.textSecondary;
-            },
             textAlign: 'right'
         }
     };
@@ -227,54 +219,62 @@ var useHelperTextStyles = (0, _jss).createUseStyles(function(theme) {
 var HelperText = function HelperText(param) {
     var leftText = param.leftText, rightText = param.rightText, error = param.error;
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
-    var classes = useHelperTextStyles({
-        error: error,
-        isInverse: isInverse
-    });
+    var ref = (0, _hooks).useTheme(), colors = ref.colors;
+    var classes = useHelperTextStyles();
+    var leftColor = isInverse ? colors.textPrimaryInverse : error ? colors.error : colors.textSecondary;
+    var rightColor = isInverse ? colors.textPrimaryInverse : colors.textSecondary;
     return(/*#__PURE__*/ React.createElement("div", {
         className: classes.helperContainer
-    }, leftText && /*#__PURE__*/ React.createElement("p", {
+    }, leftText && /*#__PURE__*/ React.createElement("div", {
         className: classes.leftText
-    }, leftText), rightText && /*#__PURE__*/ React.createElement("p", {
+    }, /*#__PURE__*/ React.createElement(_text.Text1, {
+        color: leftColor,
+        regular: true,
+        as: "p"
+    }, leftText)), rightText && /*#__PURE__*/ React.createElement("div", {
         className: classes.rightText
-    }, rightText)));
+    }, /*#__PURE__*/ React.createElement(_text.Text1, {
+        color: rightColor,
+        regular: true,
+        as: "p"
+    }, rightText))));
 };
 exports.HelperText = HelperText;
-var _obj;
+var _obj1, _obj2;
 var useFieldContainerStyles = (0, _jss).createUseStyles(function(theme) {
     return {
-        fieldContainer: (_obj = {
+        fieldContainer: (_obj1 = {
             display: 'flex',
             flexDirection: 'column',
             minWidth: 96
-        }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
+        }, _defineProperty(_obj1, theme.mq.tabletOrSmaller, {
             width: '100%'
-        }), _defineProperty(_obj, theme.mq.desktopOrBigger, {
+        }), _defineProperty(_obj1, theme.mq.desktopOrBigger, {
             width: function width(param) {
                 var fullWidth = param.fullWidth;
                 return fullWidth ? '100%' : DEFAULT_WIDTH;
             }
-        }), _obj),
-        border: {
+        }), _obj1),
+        border: (_obj2 = {
             overflow: 'hidden',
             border: "1px solid ".concat(theme.colors.border),
             borderRadius: 4,
+            height: function height(param) {
+                var multiline = param.multiline;
+                return multiline ? 152 : 60;
+            }
+        }, _defineProperty(_obj2, theme.mq.tabletOrSmaller, {
             height: function height(param) {
                 var multiline = param.multiline;
                 return multiline ? 152 : 56;
-            },
-            display: 'flex',
-            position: 'relative',
-            lineHeight: '16px',
-            backgroundColor: function backgroundColor(param) {
-                var disabled = param.disabled;
-                return disabled ? theme.colors.backgroundAlternative : theme.colors.backgroundContainer;
-            },
-            cursor: function cursor(param) {
-                var disabled = param.disabled;
-                return disabled ? 'not-allowed' : 'initial';
             }
-        }
+        }), _defineProperty(_obj2, "display", 'flex'), _defineProperty(_obj2, "position", 'relative'), _defineProperty(_obj2, "backgroundColor", function(param) {
+            var disabled = param.disabled;
+            return disabled ? theme.colors.backgroundAlternative : theme.colors.backgroundContainer;
+        }), _defineProperty(_obj2, "cursor", function(param) {
+            var disabled = param.disabled;
+            return disabled ? 'not-allowed' : 'initial';
+        }), _obj2)
     };
 });
 var FieldContainer = function FieldContainer(param) {

package/dist/text-field-components.js.flow

@@ -3,6 +3,9 @@
 import * as React from "react";
 export type InputState = "focused" | "filled" | "default";
 declare export var DEFAULT_WIDTH: 328;
+declare export var LABEL_LEFT_POSITION: 12;
+declare export var LABEL_SCALE_DESKTOP: number;
+declare export var LABEL_SCALE_MOBILE: number;
 declare type LabelProps = {
   shrinkLabel?: boolean,
   forId: string,

package/dist/utils/types.d.ts

@@ -8,3 +8,11 @@ export declare type TrackingEvent = {
 export declare type DataAttributes = {
     [name: string]: string | number | boolean | undefined;
 };
+export declare type IconProps = {
+    color?: string;
+    size?: string | number;
+    className?: string;
+    style?: {
+        [key: string]: string | number | boolean | undefined;
+    };
+};

package/dist/utils/types.js.flow

@@ -10,3 +10,11 @@ export type TrackingEvent = {
 export type DataAttributes = {
   [name: string]: string | number | boolean | void,
 };
+export type IconProps = {
+  color?: string,
+  size?: string | number,
+  className?: string,
+  style?: {
+    [key: string]: string | number | boolean | void,
+  },
+};

package/dist-es/callout.js

@@ -4,7 +4,7 @@ import { useTheme } from './hooks';
 import { ThemeVariant, useIsInverseVariant } from './theme-variant-context';
 import { createUseStyles } from './jss';
 import { Text2, Text3 } from './text';
-import IconClose from './icons/icon-close';
+import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
 import IconButton from './icon-button';
 import classNames from 'classnames';
 import ButtonGroup from './button-group';
@@ -89,7 +89,7 @@ var Callout = function(param) {
         },
         onPress: onClose,
         "aria-label": texts.closeButtonLabel
-    }, /*#__PURE__*/ React.createElement(IconClose, {
+    }, /*#__PURE__*/ React.createElement(IconCloseRegular, {
         color: colors.neutralHigh
     })))));
 };

package/dist-es/date-time-picker.js

@@ -329,9 +329,7 @@ var DateTimePicker = function(_param) {
                     event.stopPropagation();
                     setValue('');
                 }
-            }, /*#__PURE__*/ React.createElement(IconCloseRegular, {
-                size: 24
-            })));
+            }, /*#__PURE__*/ React.createElement(IconCloseRegular, null)));
         }
         return(/*#__PURE__*/ React.createElement(IconButton, {
             "aria-label": "",
@@ -339,9 +337,7 @@ var DateTimePicker = function(_param) {
             onPress: function() {
                 return setShowPicker(!showPicker);
             }
-        }, /*#__PURE__*/ React.createElement(IconCalendarRegular, {
-            size: 24
-        })));
+        }, /*#__PURE__*/ React.createElement(IconCalendarRegular, null)));
     };
     return(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(TextFieldBase, _extends({
     }, rest, {