@dnanpm/styleguide 4.0.8 → 4.0.10

package/build/es/components/Switch/Switch.js

@@ -10,91 +10,77 @@ const borderRadius = 1.875; // 30px
 const borderSize = 0.125; // 2px
 const railWidth = 3; // 48px
 const railHeight = height + borderSize * 2; // 30px
-const Container = styled.div `
-    display: inline-flex;
-    min-height: ${railHeight}rem;
-    position: relative;
-    cursor: pointer;
-    user-select: none;
-`;
-const Button = styled.div `
-    height: ${height}rem;
-    transition: transform 0.3s;
-    position: absolute;
-    content: ' ';
-    width: ${height}rem;
-    border-radius: 50%;
-    ${({ $isChecked }) => `
+const Container = styled.div.withConfig({
+  displayName: "Switch__Container",
+  componentId: "sc-1d008yl-0"
+})(["display:inline-flex;min-height:", "rem;position:relative;cursor:pointer;user-select:none;"], railHeight);
+const Button = styled.div.withConfig({
+  displayName: "Switch__Button",
+  componentId: "sc-1d008yl-1"
+})(["height:", "rem;transition:transform 0.3s;position:absolute;content:' ';width:", "rem;border-radius:50%;", ";"], height, height, ({
+  $isChecked
+}) => `
         transform: translate3d(${$isChecked ? railWidth - height : 0}rem, 0, 0);
         background-color: ${$isChecked ? theme.color.default.pink : theme.color.line.L01};
         border: ${borderSize}rem solid ${theme.color.default.white};
         z-index: 2;
         left: ${$isChecked ? -borderSize * 2 : 0}rem;
-    `};
-`;
-const Checkbox = styled.input `
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    &:disabled {
-        cursor: not-allowed;
-    }
-    &:disabled + label {
-        cursor: not-allowed;
-        color: ${theme.color.line.L01}${theme.color.transparency.T40};
-    }
-    &:disabled + label > div {
-        cursor: not-allowed;
-        border-color: ${({ checked }) => checked ? theme.color.default.pink : theme.color.line.L01}${theme.color.transparency
-    .T40};
-    }
-    &:disabled + label div div {
-        pointer-events: none;
-        background-color: ${({ checked }) => checked ? theme.color.default.pink : theme.color.line.L01}${theme.color.transparency
-    .T40};
-    }
-
-    &:focus-visible + label > div {
-        outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
-    }
-`;
-const LabelWrapper = styled(LabelText) `
-    position: relative;
-    cursor: pointer;
-    padding-top: ${getMultipliedSize(theme.base.baseHeight, 0.4)};
-    padding-left: ${getMultipliedSize(theme.base.baseWidth, 6)};
-    user-select: none;
-`;
-const Rail = styled.div `
-    width: ${railWidth}rem;
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-radius: ${borderRadius}rem;
-    overflow: hidden;
-    ${({ $isChecked }) => `
+    `);
+const Checkbox = styled.input.withConfig({
+  displayName: "Switch__Checkbox",
+  componentId: "sc-1d008yl-2"
+})(["opacity:0;position:absolute;top:0;left:0;&:disabled{cursor:not-allowed;}&:disabled + label{cursor:not-allowed;color:", "", ";}&:disabled + label > div{cursor:not-allowed;border-color:", "", ";}&:disabled + label div div{pointer-events:none;background-color:", "", ";}&:focus-visible + label > div{outline:none;box-shadow:0px 0px 0px 2px ", ";}"], theme.color.line.L01, theme.color.transparency.T40, ({
+  checked
+}) => checked ? theme.color.default.pink : theme.color.line.L01, theme.color.transparency.T40, ({
+  checked
+}) => checked ? theme.color.default.pink : theme.color.line.L01, theme.color.transparency.T40, theme.color.focus.dark);
+const LabelWrapper = styled(LabelText).withConfig({
+  displayName: "Switch__LabelWrapper",
+  componentId: "sc-1d008yl-3"
+})(["position:relative;cursor:pointer;padding-top:", ";padding-left:", ";user-select:none;"], getMultipliedSize(theme.base.baseHeight, 0.4), getMultipliedSize(theme.base.baseWidth, 6));
+const Rail = styled.div.withConfig({
+  displayName: "Switch__Rail",
+  componentId: "sc-1d008yl-4"
+})(["width:", "rem;position:absolute;top:0;left:0;border-radius:", "rem;overflow:hidden;", ";"], railWidth, borderRadius, ({
+  $isChecked
+}) => `
         height: ${railHeight}rem;
         border: ${borderSize}rem solid ${$isChecked ? theme.color.default.pink : theme.color.line.L01};
         background-color: ${theme.color.background.white.default};
         z-index: 0;
-   `};
-`;
-const Switch = (_a) => {
-    var { onChange, 'data-testid': dataTestId, ariaLabel } = _a, props = __rest(_a, ["onChange", 'data-testid', "ariaLabel"]);
-    const handleChange = () => {
-        if (onChange && !props.disabled) {
-            onChange(!props.isChecked);
-        }
-    };
-    return (React.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-label": ariaLabel, disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox", "data-checked": Boolean(props.isChecked) }),
-        React.createElement(LabelWrapper, { htmlFor: props.id },
-            React.createElement(Rail, { "$isChecked": props.isChecked },
-                React.createElement(Button, { "$isChecked": props.isChecked })),
-            props.label && props.label)));
+   `);
+const Switch = _a => {
+  var {
+      onChange,
+      'data-testid': dataTestId,
+      ariaLabel
+    } = _a,
+    props = __rest(_a, ["onChange", 'data-testid', "ariaLabel"]);
+  const handleChange = () => {
+    if (onChange && !props.disabled) {
+      onChange(!props.isChecked);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Container, {
+    className: props.className,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: props.id,
+    name: props.name,
+    checked: Boolean(props.isChecked),
+    "aria-label": ariaLabel,
+    disabled: props.disabled,
+    onChange: handleChange,
+    role: "switch",
+    type: "checkbox",
+    "data-checked": Boolean(props.isChecked)
+  }), /*#__PURE__*/React.createElement(LabelWrapper, {
+    htmlFor: props.id
+  }, /*#__PURE__*/React.createElement(Rail, {
+    "$isChecked": props.isChecked
+  }, /*#__PURE__*/React.createElement(Button, {
+    "$isChecked": props.isChecked
+  })), props.label && props.label));
 };
 
 export { Switch as default };

package/build/es/components/Tab/Tab.js

@@ -5,65 +5,67 @@ import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
 // TODO: Change to button HTML element as a part of https://jira.dna.fi/browse/STYLE-622
-const TabLabel = styled.li `
-    display: inline-block;
-    list-style: none;
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    font-weight: ${({ $isActive }) => ($isActive ? theme.fontWeight.bold : theme.fontWeight.book)};
-    background-color: ${({ $isActive }) => $isActive ? theme.color.background.white.default : theme.color.background.sand.E01};
-    border-radius: ${theme.radius.default} ${theme.radius.default} 0 0;
-    border: 1px solid ${theme.color.line.L03};
-    border-bottom: 0 none;
-    padding: 0.625rem 1.25rem;
-    cursor: pointer;
-
-    &:focus {
-        border: 1px solid ${theme.color.focus.light};
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
-        z-index: 1;
-        outline: none;
-    }
-`;
-const TabStyle = styled.li `
-    display: inline-block;
-    list-style: none;
-    cursor: pointer;
-    padding: ${getMultipliedSize(theme.base.baseHeight, 0.8)}
-        ${getMultipliedSize(theme.base.baseHeight, 1.6)};
-    color: ${theme.color.text.black};
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    font-weight: ${theme.fontWeight.book};
-
-    ${({ $isActive }) => $isActive &&
-    `
+const TabLabel = styled.li.withConfig({
+  displayName: "Tab__TabLabel",
+  componentId: "sc-qpo4i1-0"
+})(["display:inline-block;list-style:none;font-size:", ";line-height:", ";font-weight:", ";background-color:", ";border-radius:", " ", " 0 0;border:1px solid ", ";border-bottom:0 none;padding:0.625rem 1.25rem;cursor:pointer;&:focus{border:1px solid ", ";box-shadow:0px 0px 0px 2px ", ";z-index:1;outline:none;}"], theme.fontSize.default, theme.lineHeight.default, ({
+  $isActive
+}) => $isActive ? theme.fontWeight.bold : theme.fontWeight.book, ({
+  $isActive
+}) => $isActive ? theme.color.background.white.default : theme.color.background.sand.E01, theme.radius.default, theme.radius.default, theme.color.line.L03, theme.color.focus.light, theme.color.focus.dark);
+const TabStyle = styled.li.withConfig({
+  displayName: "Tab__TabStyle",
+  componentId: "sc-qpo4i1-1"
+})(["display:inline-block;list-style:none;cursor:pointer;padding:", " ", ";color:", ";font-size:", ";line-height:", ";font-weight:", ";", " ", " ", ""], getMultipliedSize(theme.base.baseHeight, 0.8), getMultipliedSize(theme.base.baseHeight, 1.6), theme.color.text.black, theme.fontSize.default, theme.lineHeight.default, theme.fontWeight.book, ({
+  $isActive
+}) => $isActive && `
             color: ${theme.color.text.pink};
             background-color: ${theme.color.background.sand.E01};
-        `}
-
-    ${({ $type }) => $type === 'underlined' &&
-    `
+        `, ({
+  $type
+}) => $type === 'underlined' && `
             padding: ${getMultipliedSize(theme.base.baseHeight, 1.6)} 0;
-        `}
-    
-    ${({ $isActive, $type }) => $isActive &&
-    $type === 'underlined' &&
-    `
+        `, ({
+  $isActive,
+  $type
+}) => $isActive && $type === 'underlined' && `
             border-bottom: 2px solid ${theme.color.default.pink};
             background-color: transparent;
-        `}
-`;
+        `);
 /** @visibleName Tab */
-const Tab = (_a) => {
-    var { type = 'box', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    const onClickHandler = (e) => {
-        if (props.onClick) {
-            props.onClick(props.label, e);
-        }
-    };
-    const { isActive } = props;
-    return type === 'box' || type === 'panel' ? (React__default.createElement(TabLabel, { role: "tab", "data-testid": dataTestId, id: props.id, "$type": type, "aria-selected": isActive, "$isActive": isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label)) : (React__default.createElement(TabStyle, { role: "tab", "data-testid": dataTestId, id: props.id, "$type": type, "aria-selected": isActive, "$isActive": isActive, onClick: onClickHandler, tabIndex: isActive ? 0 : -1 }, props.label));
+const Tab = _a => {
+  var {
+      type = 'box',
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["type", 'data-testid']);
+  const onClickHandler = e => {
+    if (props.onClick) {
+      props.onClick(props.label, e);
+    }
+  };
+  const {
+    isActive
+  } = props;
+  return type === 'box' || type === 'panel' ? (/*#__PURE__*/React__default.createElement(TabLabel, {
+    role: "tab",
+    "data-testid": dataTestId,
+    id: props.id,
+    "$type": type,
+    "aria-selected": isActive,
+    "$isActive": isActive,
+    onClick: onClickHandler,
+    tabIndex: isActive ? 0 : -1
+  }, props.label)) : (/*#__PURE__*/React__default.createElement(TabStyle, {
+    role: "tab",
+    "data-testid": dataTestId,
+    id: props.id,
+    "$type": type,
+    "aria-selected": isActive,
+    "$isActive": isActive,
+    onClick: onClickHandler,
+    tabIndex: isActive ? 0 : -1
+  }, props.label));
 };
 
 export { Tab as default };

package/build/es/components/Tabs/Tabs.js

@@ -5,24 +5,24 @@ import theme from '../../themes/theme.js';
 import Box from '../Box/Box.js';
 import Tab from '../Tab/Tab.js';
 
-const Tablist = styled.ul `
-    display: flex;
-    flex-flow: row wrap;
-    padding: 0;
-
-    ${({ $isFullWidth }) => $isFullWidth &&
-    `
+const Tablist = styled.ul.withConfig({
+  displayName: "Tabs__Tablist",
+  componentId: "sc-6zhbqz-0"
+})(["display:flex;flex-flow:row wrap;padding:0;", " ", ""], ({
+  $isFullWidth
+}) => $isFullWidth && `
         align-items: stretch;
 
         & li {
             flex: 1 1 0%;
             text-align: center;
         }
-    `}
-
-    ${({ $type, $isNarrowUnderlined }) => {
-    if ($type === 'box' || $type === 'panel') {
-        return `
+    `, ({
+  $type,
+  $isNarrowUnderlined
+}) => {
+  if ($type === 'box' || $type === 'panel') {
+    return `
                 margin: 0;
                 
                 & > li {
@@ -40,78 +40,100 @@ const Tablist = styled.ul `
                     border-top-right-radius: ${theme.radius.default};
                 }
             `;
-    }
-    if ($type === 'underlined') {
-        return `
+  }
+  if ($type === 'underlined') {
+    return `
                 gap: ${$isNarrowUnderlined ? '1.25rem' : '2.5rem'};
                 border-bottom: 1px solid ${theme.color.line.L02};
             `;
-    }
-    return '';
-}}
-`;
-const ContentContainer = styled.div `
-    ${({ $type, $isFullWidth }) => {
-    if ($type === 'box') {
-        return `
+  }
+  return '';
+});
+const ContentContainer = styled.div.withConfig({
+  displayName: "Tabs__ContentContainer",
+  componentId: "sc-6zhbqz-1"
+})(["", ""], ({
+  $type,
+  $isFullWidth
+}) => {
+  if ($type === 'box') {
+    return `
                 border-top-left-radius: 0;
                 ${$isFullWidth ? 'border-top-right-radius: 0;' : ''}
             `;
-    }
-    if ($type === 'panel') {
-        return `
+  }
+  if ($type === 'panel') {
+    return `
                 border-top: 1px solid ${theme.color.line.L03};
             `;
-    }
-    if ($type === 'underlined') {
-        return `
+  }
+  if ($type === 'underlined') {
+    return `
                 margin-top: ${theme.grid.gutter};
             `;
-    }
-    return '';
-}}
-`;
+  }
+  return '';
+});
 /** @visibleName Tabs */
-const Tabs = (_a) => {
-    var { type = 'box', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
-    const [activeTab, setActiveTab] = useState(props.defaultTab);
-    const tabs = Children.map(props.children, child => isValidElement(child) && child.type === Tab ? child : null);
-    const onClickTabItem = (tab, e) => {
-        setActiveTab(tab);
-        if (tab !== activeTab) {
-            if (props.onClick && e) {
-                props.onClick(e);
-            }
-        }
-    };
-    const onKeyDown = (e) => {
-        const tabElements = Array.from(e.currentTarget.querySelectorAll('[role="tab"]'));
-        const currentIndex = tabElements.indexOf(document.activeElement);
-        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
-            e.preventDefault();
-            const direction = e.key === 'ArrowRight' ? 1 : -1;
-            const nextIndex = (currentIndex + direction + tabElements.length) % tabElements.length;
-            const nextTab = tabElements[nextIndex];
-            nextTab.focus();
-            nextTab.click();
-        }
-    };
-    if (!tabs) {
-        return null;
+const Tabs = _a => {
+  var {
+      type = 'box',
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["type", 'data-testid']);
+  const [activeTab, setActiveTab] = useState(props.defaultTab);
+  const tabs = Children.map(props.children, child => /*#__PURE__*/isValidElement(child) && child.type === Tab ? child : null);
+  const onClickTabItem = (tab, e) => {
+    setActiveTab(tab);
+    if (tab !== activeTab) {
+      if (props.onClick && e) {
+        props.onClick(e);
+      }
     }
-    const outerActiveTab = tabs.find(child => child.props.isActive);
-    if (!activeTab) {
-        setActiveTab((outerActiveTab === null || outerActiveTab === void 0 ? void 0 : outerActiveTab.props.label) || tabs[0].props.label);
+  };
+  const onKeyDown = e => {
+    const tabElements = Array.from(e.currentTarget.querySelectorAll('[role="tab"]'));
+    const currentIndex = tabElements.indexOf(document.activeElement);
+    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+      e.preventDefault();
+      const direction = e.key === 'ArrowRight' ? 1 : -1;
+      const nextIndex = (currentIndex + direction + tabElements.length) % tabElements.length;
+      const nextTab = tabElements[nextIndex];
+      nextTab.focus();
+      nextTab.click();
     }
-    return (React__default.createElement("div", { className: props.className, "data-testid": dataTestId },
-        React__default.createElement(Tablist, { role: "tablist", "$type": type, "$isFullWidth": props.isFullWidth, "$isNarrowUnderlined": props.isNarrowUnderlined, onKeyDown: onKeyDown }, Children.map(props.children, tab => isValidElement(tab) &&
-            tab.type === Tab && (React__default.createElement(Tab, { id: tab.props.id, key: tab.props.label, label: tab.props.label, type: type, isActive: tab.props.isActive
-                ? tab.props.isActive
-                : activeTab === tab.props.label, onClick: onClickTabItem, className: tab.props.className, "data-testid": tab.props['data-testid'] })))),
-        React__default.createElement(ContentContainer, { role: "tabpanel", "$type": type, "$isFullWidth": props.isFullWidth, as: type === 'box' ? Box : undefined }, Children.map(props.children, tab => isValidElement(tab) &&
-            tab.type === Tab &&
-            (tab.props.isActive || tab.props.label === activeTab) &&
-            tab.props.children))));
+  };
+  if (!tabs) {
+    return null;
+  }
+  const outerActiveTab = tabs.find(child => child.props.isActive);
+  if (!activeTab) {
+    setActiveTab((outerActiveTab === null || outerActiveTab === void 0 ? void 0 : outerActiveTab.props.label) || tabs[0].props.label);
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: props.className,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React__default.createElement(Tablist, {
+    role: "tablist",
+    "$type": type,
+    "$isFullWidth": props.isFullWidth,
+    "$isNarrowUnderlined": props.isNarrowUnderlined,
+    onKeyDown: onKeyDown
+  }, Children.map(props.children, tab => /*#__PURE__*/isValidElement(tab) && tab.type === Tab && (/*#__PURE__*/React__default.createElement(Tab, {
+    id: tab.props.id,
+    key: tab.props.label,
+    label: tab.props.label,
+    type: type,
+    isActive: tab.props.isActive ? tab.props.isActive : activeTab === tab.props.label,
+    onClick: onClickTabItem,
+    className: tab.props.className,
+    "data-testid": tab.props['data-testid']
+  })))), /*#__PURE__*/React__default.createElement(ContentContainer, {
+    role: "tabpanel",
+    "$type": type,
+    "$isFullWidth": props.isFullWidth,
+    as: type === 'box' ? Box : undefined
+  }, Children.map(props.children, tab => /*#__PURE__*/isValidElement(tab) && tab.type === Tab && (tab.props.isActive || tab.props.label === activeTab) && tab.props.children)));
 };
 
 export { Tabs as default };

package/build/es/components/Textarea/Textarea.js

@@ -5,82 +5,85 @@ import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import LabelText from '../LabelText/LabelText.js';
 
-const FieldContainer = styled.div `
-    color: ${theme.color.text.black};
-    margin-bottom: ${getMultipliedSize(theme.base.baseWidth, 1)};
-`;
-const StyledTextarea = styled.textarea `
-    display: block;
-    font-family: ${theme.fontFamily.default};
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    width: 100%;
-    padding: ${getMultipliedSize(theme.base.baseWidth, 1)};
-    border-radius: ${theme.radius.s};
-    border: 1px solid ${theme.color.line.L01};
-
-    &::-ms-clear,
-    &::-ms-reveal {
-        display: none;
-    }
-
-    &:disabled,
-    &[disabled] {
-        background-color: ${theme.color.background.sand.E01};
+const FieldContainer = styled.div.withConfig({
+  displayName: "Textarea__FieldContainer",
+  componentId: "sc-1qkt1od-0"
+})(["color:", ";margin-bottom:", ";"], theme.color.text.black, getMultipliedSize(theme.base.baseWidth, 1));
+const StyledTextarea = styled.textarea.withConfig({
+  displayName: "Textarea__StyledTextarea",
+  componentId: "sc-1qkt1od-1"
+})(["display:block;font-family:", ";font-size:", ";line-height:", ";width:100%;padding:", ";border-radius:", ";border:1px solid ", ";&::-ms-clear,&::-ms-reveal{display:none;}&:disabled,&[disabled]{background-color:", ";}&:focus{border:2px solid ", ";outline:2px solid ", ";}&:invalid{box-shadow:none;}&::placeholder{color:", "", ";}"], theme.fontFamily.default, theme.fontSize.default, theme.lineHeight.default, getMultipliedSize(theme.base.baseWidth, 1), theme.radius.s, theme.color.line.L01, theme.color.background.sand.E01, theme.color.focus.light, theme.color.focus.dark, theme.color.text.black, theme.color.transparency.T40);
+const Message = styled.div.withConfig({
+  displayName: "Textarea__Message",
+  componentId: "sc-1qkt1od-2"
+})(["font-size:", ";font-weight:", ";line-height:", ";color:", ";margin-top:", ";"], theme.fontSize.s, theme.fontWeight.book, theme.lineHeight.s, theme.color.text.gray, getMultipliedSize(theme.base.baseHeight, 0.5));
+const ErrorMessage = styled(Message).withConfig({
+  displayName: "Textarea__ErrorMessage",
+  componentId: "sc-1qkt1od-3"
+})(["font-weight:", ";color:", ";"], theme.fontWeight.medium, theme.color.notification.error);
+const Textarea = _a => {
+  var {
+      height = 3,
+      'data-testid': dataTestId,
+      ariaLabel
+    } = _a,
+    props = __rest(_a, ["height", 'data-testid', "ariaLabel"]);
+  const inputRef = useRef(null);
+  const isErrorStatus = props.status === 'error';
+  const handleOnBlur = e => {
+    if (props.onBlur) {
+      props.onBlur(e.target.value, e);
     }
-
-    &:focus {
-        border: 2px solid ${theme.color.focus.light};
-        outline: 2px solid ${theme.color.focus.dark};
+  };
+  const handleChange = e => {
+    if (props.onChange) {
+      props.onChange(e.target.value, e);
     }
-
-    &:invalid {
-        box-shadow: none;
-    }
-
-    &::placeholder {
-        color: ${theme.color.text.black}${theme.color.transparency.T40};
+  };
+  const onClick = e => {
+    e.preventDefault();
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
     }
-`;
-const Message = styled.div `
-    font-size: ${theme.fontSize.s};
-    font-weight: ${theme.fontWeight.book};
-    line-height: ${theme.lineHeight.s};
-    color: ${theme.color.text.gray};
-    margin-top: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
-`;
-const ErrorMessage = styled(Message) `
-    font-weight: ${theme.fontWeight.medium};
-    color: ${theme.color.notification.error};
-`;
-const Textarea = (_a) => {
-    var { height = 3, 'data-testid': dataTestId, ariaLabel } = _a, props = __rest(_a, ["height", 'data-testid', "ariaLabel"]);
-    const inputRef = useRef(null);
-    const isErrorStatus = props.status === 'error';
-    const handleOnBlur = (e) => {
-        if (props.onBlur) {
-            props.onBlur(e.target.value, e);
-        }
-    };
-    const handleChange = (e) => {
-        if (props.onChange) {
-            props.onChange(e.target.value, e);
-        }
-    };
-    const onClick = (e) => {
-        e.preventDefault();
-        if (inputRef && inputRef.current) {
-            inputRef.current.focus();
-        }
-    };
-    const errorId = isErrorStatus && props.errorMessage ? `${props.id}-error` : undefined;
-    const commentId = props.commentMessage ? `${props.id}-comment` : undefined;
-    const describedBy = [errorId, commentId].filter(Boolean).join(' ') || undefined;
-    return (React__default.createElement(FieldContainer, { className: props.className },
-        props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: isErrorStatus ? 'error' : undefined, isMandatory: props.required }, props.label)),
-        React__default.createElement(StyledTextarea, { id: props.id, name: props.name, ref: inputRef, value: props.value, rows: height, placeholder: props.placeholder, tabIndex: props.tabIndex, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, "aria-label": !props.label ? ariaLabel : undefined, "aria-invalid": isErrorStatus, "aria-describedby": describedBy, "data-testid": dataTestId }),
-        props.commentMessage && (React__default.createElement(Message, { id: commentId, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage)),
-        isErrorStatus && props.errorMessage && (React__default.createElement(ErrorMessage, { id: errorId, role: "alert", "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+  };
+  const errorId = isErrorStatus && props.errorMessage ? `${props.id}-error` : undefined;
+  const commentId = props.commentMessage ? `${props.id}-comment` : undefined;
+  const describedBy = [errorId, commentId].filter(Boolean).join(' ') || undefined;
+  return /*#__PURE__*/React__default.createElement(FieldContainer, {
+    className: props.className
+  }, props.label && (/*#__PURE__*/React__default.createElement(LabelText, {
+    htmlFor: props.id,
+    "data-testid": dataTestId && `${dataTestId}-label`,
+    status: isErrorStatus ? 'error' : undefined,
+    isMandatory: props.required
+  }, props.label)), /*#__PURE__*/React__default.createElement(StyledTextarea, {
+    id: props.id,
+    name: props.name,
+    ref: inputRef,
+    value: props.value,
+    rows: height,
+    placeholder: props.placeholder,
+    tabIndex: props.tabIndex,
+    onChange: handleChange,
+    onBlur: handleOnBlur,
+    onFocus: props.onFocus,
+    onClick: onClick,
+    onKeyDown: props.onKeyDown,
+    onKeyPress: props.onKeyPress,
+    required: props.required,
+    disabled: props.disabled,
+    "aria-label": !props.label ? ariaLabel : undefined,
+    "aria-invalid": isErrorStatus,
+    "aria-describedby": describedBy,
+    "data-testid": dataTestId
+  }), props.commentMessage && (/*#__PURE__*/React__default.createElement(Message, {
+    id: commentId,
+    "data-testid": dataTestId && `${dataTestId}-comment`
+  }, props.commentMessage)), isErrorStatus && props.errorMessage && (/*#__PURE__*/React__default.createElement(ErrorMessage, {
+    id: errorId,
+    role: "alert",
+    "data-testid": dataTestId && `${dataTestId}-error`
+  }, props.errorMessage)));
 };
 
 export { Textarea as default };