orcs-design-system 3.2.4 → 3.2.6

package/es/components/Tag/index.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["selected", "onSelect", "disabled", "showRemove", "onRemove", "theme", "tagType", "showEdit", "onEdit", "showInfo", "onInfo", "showStrikeThrough", "children", "isPending", "small", "highlighted", "personEntity"];
 import React from "react";
 import styled, { css, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
@@ -9,118 +6,37 @@ import Avatar from "../Avatar";
 import Icon from "../Icon";
 import Loading from "../Loading";
 import { themeGet } from "@styled-system/theme-get";
-var TagWrapper = styled.div.withConfig({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TagWrapper = styled.div.withConfig({
   displayName: "Tag__TagWrapper",
   componentId: "sc-1dh2aa8-0"
-})(["", " ", " display:flex;align-items:stretch;height:100%;min-height:", ";justify-content:center;> button{margin:0;}"], space, layout, function (props) {
-  return props.small ? themeGet("tagScale.tagHeightSmall") : themeGet("tagScale.tagHeightDefault");
-});
-var TagValue = styled.button.attrs(function (props) {
-  return {
-    "aria-pressed": props.selected
-  };
-}).withConfig({
+})(["", " ", " display:flex;align-items:stretch;height:100%;min-height:", ";justify-content:center;> button{margin:0;}"], space, layout, props => props.small ? themeGet("tagScale.tagHeightSmall") : themeGet("tagScale.tagHeightDefault"));
+const TagValue = styled.button.attrs(props => ({
+  "aria-pressed": props.selected
+})).withConfig({
   displayName: "Tag__TagValue",
   componentId: "sc-1dh2aa8-1"
-})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:", ";display:flex;align-items:center;flex-wrap:nowrap;font-size:", ";font-weight:", ";white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:", ";border-radius:", ";border:solid 1px ", ";padding:", ";background-color:", ";color:", ";", ""], function (props) {
-  return themeGet("fontSizes.1")(props);
-}, function (props) {
-  return props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props);
-}, function (props) {
-  return themeGet("fontWeights.2")(props);
-}, function (props) {
-  return themeGet("transition.transitionDefault")(props);
-}, function (props) {
-  return props.disabled ? "default" : "pointer";
-}, function (props) {
-  return props.showEdit || props.showInfo || props.showRemove ? "15px 0 0 15px" : "15px";
-}, function (props) {
-  return props.disabled ? themeGet("colors.greyLight")(props) : props.selected && props.highlighted ? themeGet("colors.warningLight")(props) : themeGet("colors.primary")(props);
-}, function (props) {
-  return props.small ? themeGet("tagScale.tagPaddingSmall") : themeGet("tagScale.tagPaddingDefault");
-}, function (props) {
-  return props.disabled ? themeGet("colors.greyLighter")(props) : props.selected && props.highlighted ? themeGet("colors.warningLight")(props) : props.selected ? themeGet("colors.primary")(props) : themeGet("colors.white")(props);
-}, function (props) {
-  return props.disabled ? themeGet("colors.greyDarker")(props) : props.selected && props.highlighted ? themeGet("colors.black80")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props);
-}, function (props) {
-  return props.disabled ? css([""]) : css(["&:hover,&:focus{outline:0;border:", ";color:", ";background-color:", ";div{color:", ";}div[class*=\"TagType\"]{background-color:", ";}}"], function (props) {
-    return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningLighter")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
-  }, function (props) {
-    return props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
-  }, function (props) {
-    return props.selected && props.highlighted ? themeGet("colors.warningLighter")(props) : props.selected ? themeGet("colors.primaryDark")(props) : themeGet("colors.primaryLightest")(props);
-  }, function (props) {
-    return props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
-  }, function (props) {
-    return props.selected && props.highlighted ? "rgba(255,255,255,0.3)" : props.selected ? "rgba(0,0,0,0.3)" : themeGet("colors.primary20")(props);
-  });
-});
-var TagValueText = styled.div.withConfig({
+})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:", ";display:flex;align-items:center;flex-wrap:nowrap;font-size:", ";font-weight:", ";white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:", ";border-radius:", ";border:solid 1px ", ";padding:", ";background-color:", ";color:", ";", ""], props => themeGet("fontSizes.1")(props), props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props), props => themeGet("fontWeights.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? "default" : "pointer", props => props.showEdit || props.showInfo || props.showRemove ? "15px 0 0 15px" : "15px", props => props.disabled ? themeGet("colors.greyLight")(props) : props.selected && props.highlighted ? themeGet("colors.warningLight")(props) : themeGet("colors.primary")(props), props => props.small ? themeGet("tagScale.tagPaddingSmall") : themeGet("tagScale.tagPaddingDefault"), props => props.disabled ? themeGet("colors.greyLighter")(props) : props.selected && props.highlighted ? themeGet("colors.warningLight")(props) : props.selected ? themeGet("colors.primary")(props) : themeGet("colors.white")(props), props => props.disabled ? themeGet("colors.greyDarker")(props) : props.selected && props.highlighted ? themeGet("colors.black80")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props), props => props.disabled ? css([""]) : css(["&:hover,&:focus{outline:0;border:", ";color:", ";background-color:", ";div{color:", ";}div[class*=\"TagType\"]{background-color:", ";}}"], props => props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningLighter")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props)), props => props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props), props => props.selected && props.highlighted ? themeGet("colors.warningLighter")(props) : props.selected ? themeGet("colors.primaryDark")(props) : themeGet("colors.primaryLightest")(props), props => props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props), props => props.selected && props.highlighted ? "rgba(255,255,255,0.3)" : props.selected ? "rgba(0,0,0,0.3)" : themeGet("colors.primary20")(props)));
+const TagValueText = styled.div.withConfig({
   displayName: "Tag__TagValueText",
   componentId: "sc-1dh2aa8-2"
-})(["text-decoration:", ";text-overflow:ellipsis;white-space:normal;text-align:left;line-height:", ";padding-bottom:1px;"], function (props) {
-  return props.showStrikeThrough ? "line-through" : "none";
-}, function (props) {
-  return props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props);
-});
-var TagActionIconWrapper = styled(TagValue).withConfig({
+})(["text-decoration:", ";text-overflow:ellipsis;white-space:normal;text-align:left;line-height:", ";padding-bottom:1px;"], props => props.showStrikeThrough ? "line-through" : "none", props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props));
+const TagActionIconWrapper = styled(TagValue).withConfig({
   displayName: "Tag__TagActionIconWrapper",
   componentId: "sc-1dh2aa8-3"
-})(["border-radius:", ";padding:", ";&:focus{z-index:2;}> span{line-height:0;}", ""], function (props) {
-  return props.showRemove ? "0" : "0 15px 15px 0";
-}, function (props) {
-  return props.showRemove && props.small ? "0 5px 0 6px" : props.showRemove ? "0 7px 0 7px" : props.showInfo && props.small ? "0 10px 0 9px" : props.showInfo ? "0 12px 0 11px" : props.small ? "0 6px 0 6px" : "0 8px 0 8px";
-}, function (props) {
-  return props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], function (props) {
-    return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
-  }, function (props) {
-    return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
-  }) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props));
-});
-var TagRemoveIconWrapper = styled(TagValue).withConfig({
+})(["border-radius:", ";padding:", ";&:focus{z-index:2;}> span{line-height:0;}", ""], props => props.showRemove ? "0" : "0 15px 15px 0", props => props.showRemove && props.small ? "0 5px 0 6px" : props.showRemove ? "0 7px 0 7px" : props.showInfo && props.small ? "0 10px 0 9px" : props.showInfo ? "0 12px 0 11px" : props.small ? "0 6px 0 6px" : "0 8px 0 8px", props => props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], props => props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props)), props => props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props))) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props)));
+const TagRemoveIconWrapper = styled(TagValue).withConfig({
   displayName: "Tag__TagRemoveIconWrapper",
   componentId: "sc-1dh2aa8-4"
-})(["border-radius:0 15px 15px 0;padding:", ";&:focus{z-index:2;}", ""], function (props) {
-  return props.small ? "0 8px 3px 7px" : "0 10px 3px 9px";
-}, function (props) {
-  return props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], function (props) {
-    return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
-  }, function (props) {
-    return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
-  }) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props));
-});
-var TagType = styled.div.withConfig({
+})(["border-radius:0 15px 15px 0;padding:", ";&:focus{z-index:2;}", ""], props => props.small ? "0 8px 3px 7px" : "0 10px 3px 9px", props => props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], props => props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props)), props => props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props))) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props)));
+const TagType = styled.div.withConfig({
   displayName: "Tag__TagType",
   componentId: "sc-1dh2aa8-5"
-})(["text-transform:uppercase;margin-left:", ";padding:", ";line-height:1;white-space:normal;text-align:left;flex:1 1 auto;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], function (props) {
-  return props.small ? "6px" : "10px";
-}, function (props) {
-  return props.small ? themeGet("space.2")(props) : themeGet("space.2")(props);
-}, function (props) {
-  return themeGet("radii.1")(props);
-}, function (props) {
-  return props.small ? "1rem" : themeGet("fontSizes.0")(props);
-}, function (props) {
-  return props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? themeGet("colors.warningLighter")(props) : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props);
-}, function (props) {
-  return props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
-});
-var TagAvatar = styled(Avatar).withConfig({
+})(["text-transform:uppercase;margin-left:", ";padding:", ";line-height:1;white-space:normal;text-align:left;flex:1 1 auto;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], props => props.small ? "6px" : "10px", props => props.small ? themeGet("space.2")(props) : themeGet("space.2")(props), props => themeGet("radii.1")(props), props => props.small ? "1rem" : themeGet("fontSizes.0")(props), props => props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? themeGet("colors.warningLighter")(props) : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props), props => props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props));
+const TagAvatar = styled(Avatar).withConfig({
   displayName: "Tag__TagAvatar",
   componentId: "sc-1dh2aa8-6"
-})(["img[class*=\"Avatar__Image\"],div[class*=\"Avatar__Shape\"]{width:", ";height:", ";text-transform:uppercase;margin-right:", ";margin-left:", ";font-size:", ";background-color:", ";color:", ";}"], function (props) {
-  return props.small ? themeGet("tagScale.tagAvatarSizeSmall") : themeGet("tagScale.tagAvatarSizeDefault");
-}, function (props) {
-  return props.small ? themeGet("tagScale.tagAvatarSizeSmall") : themeGet("tagScale.tagAvatarSizeDefault");
-}, themeGet("space.xs"), function (props) {
-  return props.small ? themeGet("tagScale.tagAvatarMarginLeftSmall") : themeGet("tagScale.tagAvatarMarginLeftDefault");
-}, function (props) {
-  return props.small ? themeGet("tagScale.tagAvatarFontSizeSmall") : themeGet("tagScale.tagAvatarFontSizeDefault");
-}, function (props) {
-  return props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props);
-}, function (props) {
-  return props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.white")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
-});
+})(["img[class*=\"Avatar__Image\"],div[class*=\"Avatar__Shape\"]{width:", ";height:", ";text-transform:uppercase;margin-right:", ";margin-left:", ";font-size:", ";background-color:", ";color:", ";}"], props => props.small ? themeGet("tagScale.tagAvatarSizeSmall") : themeGet("tagScale.tagAvatarSizeDefault"), props => props.small ? themeGet("tagScale.tagAvatarSizeSmall") : themeGet("tagScale.tagAvatarSizeDefault"), themeGet("space.xs"), props => props.small ? themeGet("tagScale.tagAvatarMarginLeftSmall") : themeGet("tagScale.tagAvatarMarginLeftDefault"), props => props.small ? themeGet("tagScale.tagAvatarFontSizeSmall") : themeGet("tagScale.tagAvatarFontSizeDefault"), props => props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props), props => props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.white")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props));
 
 /**
  * The top two rows are an example of how tags should be used when they are selectable/unselectable. There is the option to display the cross icon or not.
@@ -129,96 +45,108 @@ var TagAvatar = styled(Avatar).withConfig({
  */
 
 export default function Tag(_ref) {
-  var selected = _ref.selected,
-    onSelect = _ref.onSelect,
-    disabled = _ref.disabled,
-    showRemove = _ref.showRemove,
-    onRemove = _ref.onRemove,
-    theme = _ref.theme,
-    tagType = _ref.tagType,
-    showEdit = _ref.showEdit,
-    onEdit = _ref.onEdit,
-    showInfo = _ref.showInfo,
-    onInfo = _ref.onInfo,
-    showStrikeThrough = _ref.showStrikeThrough,
-    children = _ref.children,
-    isPending = _ref.isPending,
-    small = _ref.small,
-    highlighted = _ref.highlighted,
-    personEntity = _ref.personEntity,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(TagWrapper, _extends({
-    small: small
-  }, props), /*#__PURE__*/React.createElement(TagValue, {
-    selected: selected,
-    highlighted: highlighted,
-    disabled: disabled,
-    showEdit: showEdit,
-    showInfo: showInfo,
-    showRemove: showRemove,
-    onClick: onSelect,
-    small: small,
-    "aria-label": "Navigate to tag",
-    title: "Navigate to tag"
-  }, personEntity && /*#__PURE__*/React.createElement(TagAvatar, {
-    selected: selected,
-    highlighted: highlighted,
-    disabled: disabled,
-    small: small,
-    imageAlt: "Avatar for ".concat(children),
-    image: personEntity.avatarSrc,
-    initials: personEntity.initials
-  }), /*#__PURE__*/React.createElement(TagValueText, {
-    showStrikeThrough: showStrikeThrough,
-    small: small
-  }, showStrikeThrough && /*#__PURE__*/React.createElement("span", {
-    className: "sr-only"
-  }, "Striked out:"), children), tagType && /*#__PURE__*/React.createElement(TagType, {
-    selected: selected,
-    highlighted: highlighted,
-    disabled: disabled,
-    small: small
-  }, tagType), isPending && /*#__PURE__*/React.createElement(Loading, {
-    ml: "s"
-  })), showEdit && /*#__PURE__*/React.createElement(TagActionIconWrapper, {
-    selected: selected,
-    highlighted: highlighted,
-    disabled: disabled,
-    showRemove: showRemove,
-    onClick: onEdit,
+  let {
+    selected,
+    onSelect,
+    disabled,
+    showRemove,
+    onRemove,
+    theme,
+    tagType,
+    showEdit,
+    onEdit,
+    showInfo,
+    onInfo,
+    showStrikeThrough,
+    children,
+    isPending,
+    small,
+    highlighted,
+    personEntity,
+    ...props
+  } = _ref;
+  const component = /*#__PURE__*/_jsxs(TagWrapper, {
     small: small,
-    "aria-label": "Edit tag",
-    title: "Edit tag"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "pen"],
-    size: "xs"
-  })), showInfo && /*#__PURE__*/React.createElement(TagActionIconWrapper, {
-    selected: selected,
-    highlighted: highlighted,
-    disabled: disabled,
-    onClick: onInfo,
-    showInfo: showInfo,
-    small: small,
-    "aria-label": "View tag details",
-    title: "View tag details"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "info"],
-    size: "xs"
-  })), showRemove && /*#__PURE__*/React.createElement(TagRemoveIconWrapper, {
-    selected: selected,
-    highlighted: highlighted,
-    disabled: disabled,
-    onClick: onRemove,
-    small: small,
-    "aria-label": "Remove tag",
-    title: "Remove tag"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "times"],
-    size: "xs"
-  })));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    ...props,
+    children: [/*#__PURE__*/_jsxs(TagValue, {
+      selected: selected,
+      highlighted: highlighted,
+      disabled: disabled,
+      showEdit: showEdit,
+      showInfo: showInfo,
+      showRemove: showRemove,
+      onClick: onSelect,
+      small: small,
+      "aria-label": "Navigate to tag",
+      title: "Navigate to tag",
+      children: [personEntity && /*#__PURE__*/_jsx(TagAvatar, {
+        selected: selected,
+        highlighted: highlighted,
+        disabled: disabled,
+        small: small,
+        imageAlt: "Avatar for ".concat(children),
+        image: personEntity.avatarSrc,
+        initials: personEntity.initials
+      }), /*#__PURE__*/_jsxs(TagValueText, {
+        showStrikeThrough: showStrikeThrough,
+        small: small,
+        children: [showStrikeThrough && /*#__PURE__*/_jsx("span", {
+          className: "sr-only",
+          children: "Striked out:"
+        }), children]
+      }), tagType && /*#__PURE__*/_jsx(TagType, {
+        selected: selected,
+        highlighted: highlighted,
+        disabled: disabled,
+        small: small,
+        children: tagType
+      }), isPending && /*#__PURE__*/_jsx(Loading, {
+        ml: "s"
+      })]
+    }), showEdit && /*#__PURE__*/_jsx(TagActionIconWrapper, {
+      selected: selected,
+      highlighted: highlighted,
+      disabled: disabled,
+      showRemove: showRemove,
+      onClick: onEdit,
+      small: small,
+      "aria-label": "Edit tag",
+      title: "Edit tag",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "pen"],
+        size: "xs"
+      })
+    }), showInfo && /*#__PURE__*/_jsx(TagActionIconWrapper, {
+      selected: selected,
+      highlighted: highlighted,
+      disabled: disabled,
+      onClick: onInfo,
+      showInfo: showInfo,
+      small: small,
+      "aria-label": "View tag details",
+      title: "View tag details",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "info"],
+        size: "xs"
+      })
+    }), showRemove && /*#__PURE__*/_jsx(TagRemoveIconWrapper, {
+      selected: selected,
+      highlighted: highlighted,
+      disabled: disabled,
+      onClick: onRemove,
+      small: small,
+      "aria-label": "Remove tag",
+      title: "Remove tag",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "times"],
+        size: "xs"
+      })
+    })]
+  });
+  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: component
+  }) : component;
 }
 Tag.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),

package/es/components/TextArea/TextArea.stories.js

@@ -2,104 +2,91 @@ import React from "react";
 import TextArea from ".";
 import Box from "../Box";
 import Spacer from "../Spacer";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/TextArea",
   component: TextArea,
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      p: "r"
-    }, storyFn());
-  }]
-};
-export var defaultTextArea = function defaultTextArea() {
-  return /*#__PURE__*/React.createElement(TextArea, {
-    "data-testid": "Test-id",
-    id: "TextArea01",
-    label: "Message",
-    autoFocus: true
-  });
-};
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    p: "r",
+    children: storyFn()
+  })]
+};
+export const defaultTextArea = () => /*#__PURE__*/_jsx(TextArea, {
+  "data-testid": "Test-id",
+  id: "TextArea01",
+  label: "Message",
+  autoFocus: true
+});
 defaultTextArea.storyName = "Default";
-export var sizeTextArea = function sizeTextArea() {
-  return /*#__PURE__*/React.createElement(TextArea, {
-    id: "TextArea02",
-    label: "Message",
-    cols: "50",
-    rows: "5"
-  });
-};
+export const sizeTextArea = () => /*#__PURE__*/_jsx(TextArea, {
+  id: "TextArea02",
+  label: "Message",
+  cols: "50",
+  rows: "5"
+});
 sizeTextArea.storyName = "Size";
-export var fullWidthTextArea = function fullWidthTextArea() {
-  return /*#__PURE__*/React.createElement(TextArea, {
-    id: "TextArea05",
-    label: "Message",
-    fullWidth: true
-  });
-};
+export const fullWidthTextArea = () => /*#__PURE__*/_jsx(TextArea, {
+  id: "TextArea05",
+  label: "Message",
+  fullWidth: true
+});
 fullWidthTextArea.storyName = "Full-width";
-export var statesTextArea = function statesTextArea() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    my: "r"
-  }, /*#__PURE__*/React.createElement(TextArea, {
+export const boldLabelTextArea = () => /*#__PURE__*/_jsx(TextArea, {
+  id: "TextAreaBold",
+  label: "Message",
+  bold: true,
+  "data-testid": "test-input"
+});
+boldLabelTextArea.storyName = "Bold Label";
+export const mandatoryTextArea = () => /*#__PURE__*/_jsx(TextArea, {
+  id: "TextAreaMandatory",
+  label: "Message",
+  mandatory: true
+});
+mandatoryTextArea.storyName = "Mandatory";
+export const statesTextArea = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "r",
+  children: [/*#__PURE__*/_jsx(TextArea, {
     id: "TextArea03",
     label: "Message - invalid message",
     invalid: true
-  }), /*#__PURE__*/React.createElement(TextArea, {
+  }), /*#__PURE__*/_jsx(TextArea, {
     id: "TextArea04",
     label: "Message",
     valid: true
-  }));
-};
+  })]
+});
 statesTextArea.storyName = "States";
-export var boldLabelTextArea = function boldLabelTextArea() {
-  return /*#__PURE__*/React.createElement(TextArea, {
-    id: "TextAreaBold",
-    label: "Message",
-    bold: true,
-    "data-testid": "test-input"
-  });
-};
-boldLabelTextArea.storyName = "Bold Label";
-export var mandatoryTextArea = function mandatoryTextArea() {
-  return /*#__PURE__*/React.createElement(TextArea, {
-    id: "TextAreaMandatory",
-    label: "Message",
-    mandatory: true
-  });
-};
-mandatoryTextArea.storyName = "Mandatory";
-export var invertedTextArea = function invertedTextArea() {
-  return /*#__PURE__*/React.createElement(Box, {
-    bg: "greyDarker",
-    p: "r"
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    my: "r"
-  }, /*#__PURE__*/React.createElement(TextArea, {
-    id: "TextArea06",
-    label: "Message",
-    inverted: true
-  }), /*#__PURE__*/React.createElement(TextArea, {
-    id: "TextArea07",
-    label: "Message - invalid message",
-    inverted: true,
-    invalid: true
-  }), /*#__PURE__*/React.createElement(TextArea, {
-    id: "TextArea08",
-    label: "Message",
-    inverted: true,
-    valid: true
-  })));
-};
+export const invertedTextArea = () => /*#__PURE__*/_jsx(Box, {
+  bg: "greyDarker",
+  p: "r",
+  children: /*#__PURE__*/_jsxs(Spacer, {
+    my: "r",
+    children: [/*#__PURE__*/_jsx(TextArea, {
+      id: "TextArea06",
+      label: "Message",
+      inverted: true
+    }), /*#__PURE__*/_jsx(TextArea, {
+      id: "TextArea07",
+      label: "Message - invalid message",
+      inverted: true,
+      invalid: true
+    }), /*#__PURE__*/_jsx(TextArea, {
+      id: "TextArea08",
+      label: "Message",
+      inverted: true,
+      valid: true
+    })]
+  })
+});
 invertedTextArea.storyName = "Inverted";
-export var disabledTextArea = function disabledTextArea() {
-  return /*#__PURE__*/React.createElement(TextArea, {
-    "data-testid": "Test-id",
-    id: "TextArea01",
-    label: "Message",
-    value: "This is uneditable",
-    disabled: true
-  });
-};
+export const disabledTextArea = () => /*#__PURE__*/_jsx(TextArea, {
+  "data-testid": "Test-id",
+  id: "TextArea01",
+  label: "Message",
+  value: "This is uneditable",
+  disabled: true
+});
 disabledTextArea.storyName = "Disabled";
 defaultTextArea.__docgenInfo = {
   "description": "",
@@ -116,11 +103,6 @@ fullWidthTextArea.__docgenInfo = {
   "methods": [],
   "displayName": "fullWidthTextArea"
 };
-statesTextArea.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "statesTextArea"
-};
 boldLabelTextArea.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -131,6 +113,11 @@ mandatoryTextArea.__docgenInfo = {
   "methods": [],
   "displayName": "mandatoryTextArea"
 };
+statesTextArea.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "statesTextArea"
+};
 invertedTextArea.__docgenInfo = {
   "description": "",
   "methods": [],