baseui 0.0.0-next-90efe07 → 0.0.0-next-0b9fd6a

package/button/styled-components.js

@@ -248,7 +248,7 @@ function getBorderRadiiStyles(_ref9) {
   } else if ($shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.round) {
     value = '50%';
   } else if ($size === _constants.SIZE.mini) {
-    value = $theme.borders.radius200;
+    value = $theme.borders.buttonBorderRadiusMini;
   }
 
   return {

package/button/styled-components.js.flow

@@ -199,7 +199,7 @@ function getBorderRadiiStyles({ $theme, $size, $shape }) {
   } else if ($shape === SHAPE.circle || $shape === SHAPE.round) {
     value = '50%';
   } else if ($size === SIZE.mini) {
-    value = $theme.borders.radius200;
+    value = $theme.borders.buttonBorderRadiusMini;
   }
 
   return {

package/checkbox/styled-components.js

@@ -155,7 +155,7 @@ var Checkmark = (0, _styles.styled)('span', function (props) {
   var tickColor = $disabled ? $theme.colors.tickMarkFillDisabled : $error ? $theme.colors.tickMarkFillError : $theme.colors.tickMarkFill;
   var indeterminate = encodeURIComponent("\n    <svg width=\"14\" height=\"4\" viewBox=\"0 0 14 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M14 0.5H0V3.5H14V0.5Z\" fill=\"".concat(tickColor, "\"/>\n    </svg>\n  "));
   var check = encodeURIComponent("\n    <svg width=\"17\" height=\"13\" viewBox=\"0 0 17 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.50002 12.6L0.400024 6.60002L2.60002 4.40002L6.50002 8.40002L13.9 0.900024L16.1 3.10002L6.50002 12.6Z\" fill=\"".concat(tickColor, "\"/>\n    </svg>\n  "));
-  var borderRadius = $theme.borders.inputBorderRadius;
+  var borderRadius = $theme.borders.checkboxBorderRadius;
   var borderColor = getBorderColor(props);
   return {
     flex: '0 0 auto',

package/checkbox/styled-components.js.flow

@@ -142,7 +142,7 @@ export const Checkmark = styled<SharedStylePropsT>('span', (props) => {
     </svg>
   `);
 
-  const borderRadius = $theme.borders.inputBorderRadius;
+  const borderRadius = $theme.borders.checkboxBorderRadius;
   const borderColor = getBorderColor(props);
 
   return ({

package/datepicker/index.d.ts

@@ -5,7 +5,7 @@ export { default as StatefulCalendar } from './stateful-calendar';
 export { default as Datepicker, default as DatePicker } from './datepicker';
 export { default as StatefulDatepicker, default as StatefulDatePicker, } from './stateful-datepicker';
 export { formatDate } from './utils';
-export { ORIENTATION, STATE_CHANGE_TYPE } from './constants';
+export { DENSITY, ORIENTATION, STATE_CHANGE_TYPE } from './constants';
 export * from './styled-components';
 export * from '../timepicker';
 export * from '../timezonepicker';

package/datepicker/index.js

@@ -12,6 +12,7 @@ var _exportNames = {
   StatefulDatepicker: true,
   StatefulDatePicker: true,
   formatDate: true,
+  DENSITY: true,
   ORIENTATION: true,
   STATE_CHANGE_TYPE: true
 };
@@ -21,6 +22,12 @@ Object.defineProperty(exports, "Calendar", {
     return _calendar.default;
   }
 });
+Object.defineProperty(exports, "DENSITY", {
+  enumerable: true,
+  get: function get() {
+    return _constants.DENSITY;
+  }
+});
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
   get: function get() {

package/datepicker/index.js.flow

@@ -18,7 +18,7 @@ export { default as TimezonePicker } from '../timezonepicker/timezone-picker.js'
 // Util functions
 export { formatDate } from './utils/index.js';
 // Constants
-export { ORIENTATION, STATE_CHANGE_TYPE } from './constants.js';
+export { DENSITY, ORIENTATION, STATE_CHANGE_TYPE } from './constants.js';
 // Styled elements
 export * from './styled-components.js';
 // Flow

package/es/button/styled-components.js

@@ -245,7 +245,7 @@ function getBorderRadiiStyles({
   } else if ($shape === SHAPE.circle || $shape === SHAPE.round) {
     value = '50%';
   } else if ($size === SIZE.mini) {
-    value = $theme.borders.radius200;
+    value = $theme.borders.buttonBorderRadiusMini;
   }
 
   return {

package/es/checkbox/styled-components.js

@@ -180,7 +180,7 @@ export const Checkmark = styled('span', props => {
       <path d="M6.50002 12.6L0.400024 6.60002L2.60002 4.40002L6.50002 8.40002L13.9 0.900024L16.1 3.10002L6.50002 12.6Z" fill="${tickColor}"/>
     </svg>
   `);
-  const borderRadius = $theme.borders.inputBorderRadius;
+  const borderRadius = $theme.borders.checkboxBorderRadius;
   const borderColor = getBorderColor(props);
   return {
     flex: '0 0 auto',

package/es/datepicker/index.js

@@ -12,7 +12,7 @@ export { default as StatefulDatepicker, default as StatefulDatePicker } from './
 
 export { formatDate } from './utils'; // Constants
 
-export { ORIENTATION, STATE_CHANGE_TYPE } from './constants'; // Styled elements
+export { DENSITY, ORIENTATION, STATE_CHANGE_TYPE } from './constants'; // Styled elements
 
 export * from './styled-components'; // Dependency components and their types
 

package/es/icon/index.js

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 export { default as Icon } from './icon';
-export { Svg as StyledSvg } from './styled-components';
+export { Svg as StyledSvg, getSvgStyles } from './styled-components';
 export * from './icon-exports';
 export * from './types';
 /** @deprecated use StyledComponentArgs instead. To be removed in future versions.*/

package/es/input/styled-components.js

@@ -163,7 +163,13 @@ function getRootColors($disabled, $isFocused, $error, $positive = false, colors)
   };
 }
 
-function getRootBorderRadius(radius) {
+function getRootBorderRadius(size, borders) {
+  let radius = borders.inputBorderRadius;
+
+  if (size === SIZE.mini) {
+    radius = borders.inputBorderRadiusMini;
+  }
+
   return {
     borderTopLeftRadius: radius,
     borderBottomLeftRadius: radius,
@@ -206,7 +212,7 @@ export const getRootStyles = props => {
     transitionProperty: 'border',
     transitionDuration: animation.timing200,
     transitionTimingFunction: animation.easeOutCurve,
-    ...getRootBorderRadius(borders.inputBorderRadius),
+    ...getRootBorderRadius($size, borders),
     ...getFont($size, typography),
     ...getRootColors($disabled, $isFocused, $error, $positive, colors),
     ...getRootPadding($adjoined, $size, sizing, $theme.direction, $hasIconTrailing)

package/es/input/utils.js

@@ -12,6 +12,7 @@ export function getSharedProps(props, state) {
     adjoined,
     size,
     required,
+    resize,
     readOnly
   } = props;
   const {
@@ -25,6 +26,7 @@ export function getSharedProps(props, state) {
     $adjoined: adjoined,
     $size: size,
     $required: required,
+    $resize: resize,
     $isReadOnly: readOnly
   };
 }

package/es/message-card/message-card.js

@@ -82,11 +82,12 @@ const MessageCard = ({
     $imageLayout: layout
   }, RootProps), image && /*#__PURE__*/React.createElement(Image, _extends({
     role: "img",
-    ariaLabel: ariaLabel,
+    "aria-label": ariaLabel,
     $src: src,
     $imageLayout: layout,
     $backgroundPosition: backgroundPosition
   }, ImageProps)), /*#__PURE__*/React.createElement(ContentContainer, ContentContainerProps, heading && /*#__PURE__*/React.createElement(HeadingContainer, HeadingContainerProps, heading), paragraph && /*#__PURE__*/React.createElement(ParagraphContainer, ParagraphContainerProps, paragraph), buttonLabel && /*#__PURE__*/React.createElement(Button, _extends({
+    $as: "div",
     kind: buttonKind,
     shape: SHAPE.pill,
     size: SIZE.compact,
@@ -96,6 +97,7 @@ const MessageCard = ({
     overrides: {
       BaseButton: {
         style: {
+          textAlign: 'center',
           pointerEvents: 'none',
           ...(buttonKind === BUTTON_KIND.tertiary ? {
             marginTop: theme.sizing.scale100,

package/es/select/styled-components.js

@@ -19,6 +19,21 @@ function getFont(size = SIZE.default, typography) {
   }[size];
 }
 
+function getBorderRadius(size, borders) {
+  let radius = borders.inputBorderRadius;
+
+  if (size === SIZE.mini) {
+    radius = borders.inputBorderRadiusMini;
+  }
+
+  return {
+    borderTopLeftRadius: radius,
+    borderBottomLeftRadius: radius,
+    borderTopRightRadius: radius,
+    borderBottomRightRadius: radius
+  };
+}
+
 function getControlPadding(props) {
   const {
     $theme,
@@ -170,17 +185,14 @@ export const StyledControlContainer = styled('div', props => {
     $isPseudoFocused,
     $type,
     $searchable,
+    $size,
     $theme: {
       borders,
       colors,
       animation
     }
   } = props;
-  return {
-    borderTopLeftRadius: borders.inputBorderRadius,
-    borderTopRightRadius: borders.inputBorderRadius,
-    borderBottomRightRadius: borders.inputBorderRadius,
-    borderBottomLeftRadius: borders.inputBorderRadius,
+  return { ...getBorderRadius($size, borders),
     boxSizing: 'border-box',
     overflow: 'hidden',
     width: '100%',

package/es/textarea/styled-components.js

@@ -7,23 +7,28 @@ LICENSE file in the root directory of this source tree.
 import { styled } from '../styles';
 import { getInputStyles, getInputContainerStyles, getRootStyles } from '../input/styled-components';
 export const StyledTextAreaRoot = styled('div', props => {
-  return getRootStyles({
-    $positive: false,
-    ...props,
-    $hasIconTrailing: false
-  });
+  return { ...getRootStyles({
+      $positive: false,
+      ...props,
+      $hasIconTrailing: false
+    }),
+    width: props.$resize ? 'fit-content' : '100%'
+  };
 });
 StyledTextAreaRoot.displayName = "StyledTextAreaRoot";
 StyledTextAreaRoot.displayName = 'StyledTextAreaRoot';
-export const StyledTextareaContainer = styled('div', props => ({ ...getInputContainerStyles({
+export const StyledTextareaContainer = styled('div', props => {
+  return getInputContainerStyles({
     $positive: false,
     ...props
-  })
-}));
+  });
+});
 StyledTextareaContainer.displayName = "StyledTextareaContainer";
 StyledTextareaContainer.displayName = 'StyledTextareaContainer';
-export const StyledTextarea = styled('textarea', props => ({ ...getInputStyles(props),
-  resize: 'none'
-}));
+export const StyledTextarea = styled('textarea', props => {
+  return { ...getInputStyles(props),
+    resize: props.$resize || 'none'
+  };
+});
 StyledTextarea.displayName = "StyledTextarea";
 StyledTextarea.displayName = 'StyledTextarea';

package/es/textarea/textarea.js

@@ -60,12 +60,14 @@ class Textarea extends React.Component {
       $disabled: this.props.disabled,
       $error: this.props.error,
       $positive: this.props.positive,
-      $required: this.props.required
+      $required: this.props.required,
+      $resize: this.props.resize
     }, rootProps), /*#__PURE__*/React.createElement(BaseInput, _extends({}, this.props, {
       type: CUSTOM_INPUT_TYPE.textarea,
       overrides: inputOverrides,
       onFocus: this.onFocus,
-      onBlur: this.onBlur
+      onBlur: this.onBlur,
+      resize: this.props.resize
     })));
   }
 

package/es/themes/move-theme/typography.js

@@ -22,6 +22,24 @@ export const typography = {
   font1150: {
     fontFamily: secondaryFontFamily
   },
+  font1050: {
+    fontFamily: secondaryFontFamily
+  },
+  font950: {
+    fontFamily: secondaryFontFamily
+  },
+  font850: {
+    fontFamily: secondaryFontFamily
+  },
+  font750: {
+    fontFamily: secondaryFontFamily
+  },
+  font650: {
+    fontFamily: secondaryFontFamily
+  },
+  font550: {
+    fontFamily: secondaryFontFamily
+  },
   DisplayLarge: {
     fontFamily: secondaryFontFamily
   },
@@ -34,6 +52,24 @@ export const typography = {
   DisplayXSmall: {
     fontFamily: secondaryFontFamily
   },
+  HeadingXXLarge: {
+    fontFamily: secondaryFontFamily
+  },
+  HeadingXLarge: {
+    fontFamily: secondaryFontFamily
+  },
+  HeadingLarge: {
+    fontFamily: secondaryFontFamily
+  },
+  HeadingMedium: {
+    fontFamily: secondaryFontFamily
+  },
+  HeadingSmall: {
+    fontFamily: secondaryFontFamily
+  },
+  HeadingXSmall: {
+    fontFamily: secondaryFontFamily
+  },
   MonoParagraphXSmall: {
     fontFamily: monoFontFamily
   },

package/es/themes/shared/borders.js

@@ -47,13 +47,18 @@ const borders = {
   useRoundedCorners: true,
 
   /** Button, ButtonGroup */
+  buttonBorderRadiusMini: '4px',
   buttonBorderRadius: '8px',
 
-  /** Input, Select, Textarea, Checkbox */
-  inputBorderRadius: '0px',
+  /** Checkbox */
+  checkboxBorderRadius: '0px',
+
+  /** Input, Select, Textarea */
+  inputBorderRadiusMini: '4px',
+  inputBorderRadius: '8px',
 
   /** Popover, Menu, Tooltip */
-  popoverBorderRadius: '0px',
+  popoverBorderRadius: '8px',
 
   /** Card, Datepicker, Modal, Toast, Notification */
   surfaceBorderRadius: '0px',

package/es/themes/shared/typography.js

@@ -60,61 +60,61 @@ export default ((fontTokens = defaultFontTokens) => {
   const font550 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '20px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '28px'
   };
   const font650 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '24px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '32px'
   };
   const font750 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '28px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '36px'
   };
   const font850 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '32px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '40px'
   };
   const font950 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '36px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '44px'
   };
   const font1050 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '40px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '52px'
   };
   const font1150 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '36px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '44px'
   };
   const font1250 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '44px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '52px'
   };
   const font1350 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '52px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '64px'
   };
   const font1450 = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: '96px',
-    fontWeight: 500,
+    fontWeight: 700,
     lineHeight: '112px'
   };
   return {

package/esm/button/styled-components.js

@@ -240,7 +240,7 @@ function getBorderRadiiStyles(_ref9) {
   } else if ($shape === SHAPE.circle || $shape === SHAPE.round) {
     value = '50%';
   } else if ($size === SIZE.mini) {
-    value = $theme.borders.radius200;
+    value = $theme.borders.buttonBorderRadiusMini;
   }
 
   return {

package/esm/checkbox/styled-components.js

@@ -153,7 +153,7 @@ export var Checkmark = styled('span', function (props) {
   var tickColor = $disabled ? $theme.colors.tickMarkFillDisabled : $error ? $theme.colors.tickMarkFillError : $theme.colors.tickMarkFill;
   var indeterminate = encodeURIComponent("\n    <svg width=\"14\" height=\"4\" viewBox=\"0 0 14 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M14 0.5H0V3.5H14V0.5Z\" fill=\"".concat(tickColor, "\"/>\n    </svg>\n  "));
   var check = encodeURIComponent("\n    <svg width=\"17\" height=\"13\" viewBox=\"0 0 17 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M6.50002 12.6L0.400024 6.60002L2.60002 4.40002L6.50002 8.40002L13.9 0.900024L16.1 3.10002L6.50002 12.6Z\" fill=\"".concat(tickColor, "\"/>\n    </svg>\n  "));
-  var borderRadius = $theme.borders.inputBorderRadius;
+  var borderRadius = $theme.borders.checkboxBorderRadius;
   var borderColor = getBorderColor(props);
   return {
     flex: '0 0 auto',

package/esm/datepicker/index.js

@@ -12,7 +12,7 @@ export { default as StatefulDatepicker, default as StatefulDatePicker } from './
 
 export { formatDate } from './utils'; // Constants
 
-export { ORIENTATION, STATE_CHANGE_TYPE } from './constants'; // Styled elements
+export { DENSITY, ORIENTATION, STATE_CHANGE_TYPE } from './constants'; // Styled elements
 
 export * from './styled-components'; // Dependency components and their types
 

package/esm/icon/index.js

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 export { default as Icon } from './icon';
-export { Svg as StyledSvg } from './styled-components';
+export { Svg as StyledSvg, getSvgStyles } from './styled-components';
 export * from './icon-exports';
 export * from './types';
 /** @deprecated use StyledComponentArgs instead. To be removed in future versions.*/

package/esm/input/styled-components.js

@@ -160,7 +160,13 @@ function getRootColors($disabled, $isFocused, $error) {
   };
 }
 
-function getRootBorderRadius(radius) {
+function getRootBorderRadius(size, borders) {
+  var radius = borders.inputBorderRadius;
+
+  if (size === SIZE.mini) {
+    radius = borders.inputBorderRadiusMini;
+  }
+
   return {
     borderTopLeftRadius: radius,
     borderBottomLeftRadius: radius,
@@ -200,7 +206,7 @@ export var getRootStyles = function getRootStyles(props) {
     transitionProperty: 'border',
     transitionDuration: animation.timing200,
     transitionTimingFunction: animation.easeOutCurve
-  }, getRootBorderRadius(borders.inputBorderRadius)), getFont($size, typography)), getRootColors($disabled, $isFocused, $error, $positive, colors)), getRootPadding($adjoined, $size, sizing, $theme.direction, $hasIconTrailing));
+  }, getRootBorderRadius($size, borders)), getFont($size, typography)), getRootColors($disabled, $isFocused, $error, $positive, colors)), getRootPadding($adjoined, $size, sizing, $theme.direction, $hasIconTrailing));
 };
 export var Root = styled('div', getRootStyles);
 Root.displayName = "Root";

package/esm/input/utils.js

@@ -11,6 +11,7 @@ export function getSharedProps(props, state) {
       adjoined = props.adjoined,
       size = props.size,
       required = props.required,
+      resize = props.resize,
       readOnly = props.readOnly;
   var isFocused = state.isFocused;
   return {
@@ -21,6 +22,7 @@ export function getSharedProps(props, state) {
     $adjoined: adjoined,
     $size: size,
     $required: required,
+    $resize: resize,
     $isReadOnly: readOnly
   };
 }

package/esm/message-card/message-card.js

@@ -137,11 +137,12 @@ var MessageCard = function MessageCard(_ref2) {
     $imageLayout: layout
   }, RootProps), image && /*#__PURE__*/React.createElement(Image, _extends({
     role: "img",
-    ariaLabel: ariaLabel,
+    "aria-label": ariaLabel,
     $src: src,
     $imageLayout: layout,
     $backgroundPosition: backgroundPosition
   }, ImageProps)), /*#__PURE__*/React.createElement(ContentContainer, ContentContainerProps, heading && /*#__PURE__*/React.createElement(HeadingContainer, HeadingContainerProps, heading), paragraph && /*#__PURE__*/React.createElement(ParagraphContainer, ParagraphContainerProps, paragraph), buttonLabel && /*#__PURE__*/React.createElement(Button, _extends({
+    $as: "div",
     kind: buttonKind,
     shape: SHAPE.pill,
     size: SIZE.compact,
@@ -151,6 +152,7 @@ var MessageCard = function MessageCard(_ref2) {
     overrides: {
       BaseButton: {
         style: _objectSpread({
+          textAlign: 'center',
           pointerEvents: 'none'
         }, buttonKind === BUTTON_KIND.tertiary ? {
           marginTop: theme.sizing.scale100,

package/esm/select/styled-components.js

@@ -24,6 +24,21 @@ function getFont() {
   return (_SIZE$mini$SIZE$compa = {}, _defineProperty(_SIZE$mini$SIZE$compa, SIZE.mini, typography.font100), _defineProperty(_SIZE$mini$SIZE$compa, SIZE.compact, typography.font200), _defineProperty(_SIZE$mini$SIZE$compa, SIZE.default, typography.font300), _defineProperty(_SIZE$mini$SIZE$compa, SIZE.large, typography.font400), _SIZE$mini$SIZE$compa)[size];
 }
 
+function getBorderRadius(size, borders) {
+  var radius = borders.inputBorderRadius;
+
+  if (size === SIZE.mini) {
+    radius = borders.inputBorderRadiusMini;
+  }
+
+  return {
+    borderTopLeftRadius: radius,
+    borderBottomLeftRadius: radius,
+    borderTopRightRadius: radius,
+    borderBottomRightRadius: radius
+  };
+}
+
 function getControlPadding(props) {
   var _SIZE$mini, _SIZE$compact, _SIZE$default, _SIZE$large, _SIZE$mini$SIZE$compa2;
 
@@ -154,15 +169,12 @@ export var StyledControlContainer = styled('div', function (props) {
       $isPseudoFocused = props.$isPseudoFocused,
       $type = props.$type,
       $searchable = props.$searchable,
+      $size = props.$size,
       _props$$theme = props.$theme,
       borders = _props$$theme.borders,
       colors = _props$$theme.colors,
       animation = _props$$theme.animation;
-  return _objectSpread({
-    borderTopLeftRadius: borders.inputBorderRadius,
-    borderTopRightRadius: borders.inputBorderRadius,
-    borderBottomRightRadius: borders.inputBorderRadius,
-    borderBottomLeftRadius: borders.inputBorderRadius,
+  return _objectSpread(_objectSpread({}, getBorderRadius($size, borders)), {}, {
     boxSizing: 'border-box',
     overflow: 'hidden',
     width: '100%',

package/esm/textarea/styled-components.js

@@ -13,24 +13,26 @@ LICENSE file in the root directory of this source tree.
 import { styled } from '../styles';
 import { getInputStyles, getInputContainerStyles, getRootStyles } from '../input/styled-components';
 export var StyledTextAreaRoot = styled('div', function (props) {
-  return getRootStyles(_objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread({}, getRootStyles(_objectSpread(_objectSpread({
     $positive: false
   }, props), {}, {
     $hasIconTrailing: false
-  }));
+  }))), {}, {
+    width: props.$resize ? 'fit-content' : '100%'
+  });
 });
 StyledTextAreaRoot.displayName = "StyledTextAreaRoot";
 StyledTextAreaRoot.displayName = 'StyledTextAreaRoot';
 export var StyledTextareaContainer = styled('div', function (props) {
-  return _objectSpread({}, getInputContainerStyles(_objectSpread({
+  return getInputContainerStyles(_objectSpread({
     $positive: false
-  }, props)));
+  }, props));
 });
 StyledTextareaContainer.displayName = "StyledTextareaContainer";
 StyledTextareaContainer.displayName = 'StyledTextareaContainer';
 export var StyledTextarea = styled('textarea', function (props) {
   return _objectSpread(_objectSpread({}, getInputStyles(props)), {}, {
-    resize: 'none'
+    resize: props.$resize || 'none'
   });
 });
 StyledTextarea.displayName = "StyledTextarea";

package/esm/textarea/textarea.js

@@ -116,12 +116,14 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         $disabled: this.props.disabled,
         $error: this.props.error,
         $positive: this.props.positive,
-        $required: this.props.required
+        $required: this.props.required,
+        $resize: this.props.resize
       }, rootProps), /*#__PURE__*/React.createElement(BaseInput, _extends({}, this.props, {
         type: CUSTOM_INPUT_TYPE.textarea,
         overrides: inputOverrides,
         onFocus: this.onFocus,
-        onBlur: this.onBlur
+        onBlur: this.onBlur,
+        resize: this.props.resize
       })));
     }
   }]);