@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/Dropdown/Dropdown.stories.js

@@ -1,197 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.WithDialog = exports.Default = exports.ComplexOptions = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactIcons = require("@radix-ui/react-icons");
-var Dropdown = _interopRequireWildcard(require("."));
-var _Button = require("../Button");
-var NewDialog = _interopRequireWildcard(require("../NewDialog"));
-var _Link = require("../Link");
-var _Text = require("../Text");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["onConfirm"];
-/**
- * External dependencies
- */
-/**
-/**
-* Internal dependencies
-*/
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var _default = {
-  title: 'Dropdown',
-  component: Dropdown.Root
-};
-exports["default"] = _default;
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)(Dropdown.Root, {
-      trigger: (0, _jsxRuntime.jsx)(_Button.Button, {
-        children: "Open"
-      }),
-      children: [(0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "All"
-      }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "Completed"
-      }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "Running"
-      }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "Cancelled"
-      }), (0, _jsxRuntime.jsx)(Dropdown.Separator, {}), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "Errored"
-      })]
-    }), (0, _jsxRuntime.jsxs)(_Text.Text, {
-      children: ["This component is based on the Radix Dropdown. You can find all available options, props and features in the", ' ', (0, _jsxRuntime.jsx)(_Link.Link, {
-        href: "https://www.radix-ui.com/docs/primitives/components/dropdown-menu",
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: "Dropdown Documentation page."
-      })]
-    })]
-  });
-};
-exports.Default = Default;
-var ComplexOptions = function ComplexOptions() {
-  var _React$useState = _react["default"].useState(true),
-    bookmarksChecked = _React$useState[0],
-    setBookmarksChecked = _React$useState[1];
-  var _React$useState2 = _react["default"].useState(false),
-    urlsChecked = _React$useState2[0],
-    setUrlsChecked = _React$useState2[1];
-  var _React$useState3 = _react["default"].useState('pedro'),
-    person = _React$useState3[0],
-    setPerson = _React$useState3[1];
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)(Dropdown.Root, {
-      trigger: (0, _jsxRuntime.jsx)(_Button.Button, {
-        children: "See options"
-      }),
-      children: [(0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "New Tab"
-      }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "New Window"
-      }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-        disabled: true,
-        children: "New Private Window"
-      }), (0, _jsxRuntime.jsxs)(Dropdown.Sub, {
-        children: [(0, _jsxRuntime.jsxs)(Dropdown.SubTrigger, {
-          children: ["More Tools", (0, _jsxRuntime.jsx)(_reactIcons.ChevronRightIcon, {})]
-        }), (0, _jsxRuntime.jsxs)(Dropdown.SubContent, {
-          sideOffset: 2,
-          alignOffset: -5,
-          children: [(0, _jsxRuntime.jsx)(Dropdown.Item, {
-            children: "Save Page As\u2026"
-          }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-            children: "Create Shortcut\u2026"
-          }), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-            children: "Name Window\u2026"
-          }), (0, _jsxRuntime.jsx)(Dropdown.Separator, {}), (0, _jsxRuntime.jsx)(Dropdown.Item, {
-            children: "Developer Tools"
-          })]
-        })]
-      }), (0, _jsxRuntime.jsx)(Dropdown.Separator, {}), (0, _jsxRuntime.jsxs)(Dropdown.CheckboxItem, {
-        checked: bookmarksChecked,
-        onCheckedChange: setBookmarksChecked,
-        children: [(0, _jsxRuntime.jsx)(Dropdown.ItemIndicator, {
-          children: (0, _jsxRuntime.jsx)(_reactIcons.CheckIcon, {})
-        }), "Show Bookmarks"]
-      }), (0, _jsxRuntime.jsxs)(Dropdown.CheckboxItem, {
-        checked: urlsChecked,
-        onCheckedChange: setUrlsChecked,
-        children: [(0, _jsxRuntime.jsx)(Dropdown.ItemIndicator, {
-          children: (0, _jsxRuntime.jsx)(_reactIcons.CheckIcon, {})
-        }), "Show Full URLs"]
-      }), (0, _jsxRuntime.jsx)(Dropdown.Separator, {}), (0, _jsxRuntime.jsx)(Dropdown.Label, {
-        children: "People"
-      }), (0, _jsxRuntime.jsxs)(Dropdown.RadioGroup, {
-        value: person,
-        onValueChange: setPerson,
-        children: [(0, _jsxRuntime.jsxs)(Dropdown.RadioItem, {
-          value: "pedro",
-          children: [(0, _jsxRuntime.jsx)(Dropdown.ItemIndicator, {
-            children: (0, _jsxRuntime.jsx)(_reactIcons.DotFilledIcon, {})
-          }), "Pedro Duarte"]
-        }), (0, _jsxRuntime.jsxs)(Dropdown.RadioItem, {
-          value: "colm",
-          children: [(0, _jsxRuntime.jsx)(Dropdown.ItemIndicator, {
-            children: (0, _jsxRuntime.jsx)(_reactIcons.DotFilledIcon, {})
-          }), "Colm Tuite"]
-        })]
-      })]
-    }), (0, _jsxRuntime.jsxs)(_Text.Text, {
-      children: ["This component is based on the Radix Dropdown. You can find all available options, props and features in the", ' ', (0, _jsxRuntime.jsx)(_Link.Link, {
-        href: "https://www.radix-ui.com/docs/primitives/components/dropdown-menu",
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: "Dropdown Documentation page."
-      })]
-    })]
-  });
-};
-exports.ComplexOptions = ComplexOptions;
-var WithDialog = function WithDialog() {
-  var _React$useState4 = _react["default"].useState(false),
-    alertOpen = _React$useState4[0],
-    setAlertOpen = _React$useState4[1];
-  var _React$useState5 = _react["default"].useState(false),
-    menuOpen = _React$useState5[0],
-    setMenuOpen = _React$useState5[1];
-
-  // eslint-disable-next-line react/prop-types
-  var AreYouSureDialog = function AreYouSureDialog(_ref) {
-    var onConfirm = _ref.onConfirm,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-    return (0, _jsxRuntime.jsx)(NewDialog.Root, _extends({}, props, {
-      content: (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [(0, _jsxRuntime.jsx)(_Button.Button, {
-          variant: "secondary",
-          onClick: function onClick() {
-            return onConfirm();
-          },
-          children: "Custom Close."
-        }), (0, _jsxRuntime.jsx)("p", {
-          children: "Teste abc."
-        })]
-      })
-    }));
-  };
-  return (0, _jsxRuntime.jsxs)("div", {
-    children: [(0, _jsxRuntime.jsx)(_Text.Text, {
-      children: "This is an important example when combining the Dropdown component with the NewDialog component. In order to have the correct accessibility, there are some events you need to use. Use this example if you want to copy and paste the code."
-    }), (0, _jsxRuntime.jsxs)(Dropdown.Root, {
-      modal: !alertOpen,
-      open: menuOpen,
-      onOpenChange: setMenuOpen,
-      contentProps: {
-        sideOffset: 5
-      },
-      trigger: (0, _jsxRuntime.jsx)(_Button.Button, {
-        children: "Open"
-      }),
-      children: [(0, _jsxRuntime.jsx)(Dropdown.Item, {
-        children: "I don't do anything"
-      }), (0, _jsxRuntime.jsx)(AreYouSureDialog, {
-        title: "Are you in the jungle?",
-        description: "sha-n-n-n-n-n-n-n-n knees, knees",
-        open: alertOpen,
-        onOpenChange: setAlertOpen,
-        onConfirm: function onConfirm() {
-          setAlertOpen(false);
-          setMenuOpen(false);
-        },
-        trigger: (0, _jsxRuntime.jsx)(Dropdown.Item, {
-          onSelect: function onSelect(event) {
-            return event.preventDefault();
-          },
-          children: "Open Dialog"
-        })
-      })]
-    })]
-  });
-};
-exports.WithDialog = WithDialog;

package/build/system/Form/Checkbox.stories.js

@@ -1,73 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _react = require("react");
-var _ = require("..");
-var _Checkbox = require("./Checkbox");
-var _Label = require("./Label");
-var _Flex = require("../Flex");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/**
- * External dependencies
- */
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Form/Checkbox',
-  component: _Checkbox.Checkbox
-};
-exports["default"] = _default;
-var Default = function Default() {
-  var _useState = (0, _react.useState)(true),
-    checked = _useState[0],
-    setChecked = _useState[1];
-  var _useState2 = (0, _react.useState)(false),
-    checked2 = _useState2[0],
-    setChecked2 = _useState2[1];
-  return (0, _jsxRuntime.jsx)(_.Form.Root, {
-    children: (0, _jsxRuntime.jsxs)(_.Form.Fieldset, {
-      children: [(0, _jsxRuntime.jsx)(_.Form.Legend, {
-        children: "Tell me your prefereces"
-      }), (0, _jsxRuntime.jsxs)(_Flex.Flex, {
-        sx: {
-          alignItems: 'center'
-        },
-        children: [(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
-          id: "check1",
-          checked: checked,
-          "aria-labelledby": "label-check1",
-          onCheckedChange: setChecked
-        }), (0, _jsxRuntime.jsx)(_Label.Label, {
-          sx: {
-            m: 0,
-            ml: 2
-          },
-          htmlFor: "check1",
-          id: "label-check1",
-          children: "This option"
-        })]
-      }), (0, _jsxRuntime.jsxs)(_Flex.Flex, {
-        sx: {
-          alignItems: 'center'
-        },
-        children: [(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
-          id: "check2",
-          checked: checked2,
-          "aria-labelledby": "label-check2",
-          onCheckedChange: setChecked2
-        }), (0, _jsxRuntime.jsx)(_Label.Label, {
-          sx: {
-            m: 0,
-            ml: 2
-          },
-          htmlFor: "check2",
-          id: "label-check2",
-          children: "This option too"
-        })]
-      })]
-    })
-  });
-};
-exports.Default = Default;

package/build/system/Form/Input.stories.js

@@ -1,51 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/** @jsxImportSource theme-ui */
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Form/Input'
-};
-exports["default"] = _default;
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_.Form.Root, {
-    children: [(0, _jsxRuntime.jsx)(_.Form.Input, {
-      placeholder: "Your input here...",
-      label: "Always add a label to inputs",
-      forLabel: "input-simple"
-    }), (0, _jsxRuntime.jsx)("hr", {
-      sx: {
-        my: 4
-      }
-    }), (0, _jsxRuntime.jsx)(_.Form.Input, {
-      forLabel: "input-with-error",
-      label: "Error Input",
-      errorMessage: "Please type numeric characters only",
-      hasError: true
-    }), (0, _jsxRuntime.jsx)("hr", {
-      sx: {
-        my: 4
-      }
-    }), (0, _jsxRuntime.jsx)(_.Form.Input, {
-      forLabel: "input-with-required",
-      label: "Required",
-      required: true
-    }), (0, _jsxRuntime.jsx)("hr", {
-      sx: {
-        my: 4
-      }
-    }), (0, _jsxRuntime.jsx)(_.Form.Label, {
-      htmlFor: "input-with-custom-label",
-      children: "Custom Label outside the Input"
-    }), (0, _jsxRuntime.jsx)(_.Form.Input, {
-      forLabel: "input-with-custom-label",
-      required: true
-    })]
-  });
-};
-exports.Default = Default;

package/build/system/Form/InputWithCopyButton.stories.js

@@ -1,39 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _ = require("..");
-var _react = require("react");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/** @jsxImportSource theme-ui */
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Form/InputWithCopyButton'
-};
-exports["default"] = _default;
-var Default = function Default() {
-  var _useState = (0, _react.useState)(''),
-    copiedText = _useState[0],
-    setCopiedText = _useState[1];
-  return (0, _jsxRuntime.jsxs)(_.Form.Root, {
-    children: [copiedText && (0, _jsxRuntime.jsxs)(_.Notice, {
-      variant: "success",
-      sx: {
-        mb: 4
-      },
-      children: ["Input successfully copied value! ", (0, _jsxRuntime.jsx)("strong", {
-        children: copiedText
-      })]
-    }), (0, _jsxRuntime.jsx)(_.Form.InputWithCopyButton, {
-      placeholder: "Your input here...",
-      label: "Always add a label to inputs",
-      forLabel: "input-simple",
-      copyHandler: function copyHandler(value) {
-        return setCopiedText(value);
-      }
-    })]
-  });
-};
-exports.Default = Default;

package/build/system/Form/Radio.stories.js

@@ -1,115 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _react = require("react");
-var _2 = require("..");
-var _Radio = require("./Radio");
-var _Flex = require("../Flex");
-var _Label = require("./Label");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/** @jsxImportSource theme-ui */
-/**
- * External dependencies
- */
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Form/Radio',
-  component: _Radio.Radio
-};
-exports["default"] = _default;
-var Default = function Default() {
-  var _useState = (0, _react.useState)('a'),
-    checked = _useState[0],
-    setChecked = _useState[1];
-  var _useState2 = (0, _react.useState)('b'),
-    checked2 = _useState2[0],
-    setChecked2 = _useState2[1];
-  return (0, _jsxRuntime.jsxs)(_2.Form.Root, {
-    children: [(0, _jsxRuntime.jsxs)("p", {
-      children: ["Per recommendation, if you have a Radio button, use a Fieldset with a legend as wrapper to your options.", ' ', (0, _jsxRuntime.jsx)(_2.Link, {
-        href: "https://a11y-collective.github.io/demos/en/accessible-code/form-fieldsets.html",
-        children: "Reference to Form fieldsets"
-      })]
-    }), (0, _jsxRuntime.jsxs)(_2.Form.Fieldset, {
-      children: [(0, _jsxRuntime.jsx)(_2.Form.Legend, {
-        sx: {
-          mb: 0,
-          fontSize: 2,
-          fontWeight: 'bold'
-        },
-        children: "Apply the policy to these domains"
-      }), (0, _jsxRuntime.jsx)(_Flex.Flex, {
-        sx: {
-          alignItems: 'center'
-        },
-        children: (0, _jsxRuntime.jsx)(_Radio.Radio, {
-          name: "the_option",
-          defaultValue: checked,
-          options: [{
-            value: 'a',
-            label: 'All domains listed on this environment, and all subdomains',
-            id: 'option-a'
-          }, {
-            value: 'b',
-            label: 'All domains listed on this environment',
-            id: 'option-b'
-          }],
-          onChange: function onChange(e) {
-            return setChecked(e.target.value);
-          }
-        })
-      })]
-    }), (0, _jsxRuntime.jsxs)(_2.Form.Fieldset, {
-      children: [(0, _jsxRuntime.jsx)(_2.Form.Legend, {
-        sx: {
-          mb: 0,
-          fontSize: 2,
-          fontWeight: 'bold'
-        },
-        children: "With a custom Label"
-      }), (0, _jsxRuntime.jsx)(_Flex.Flex, {
-        sx: {
-          alignItems: 'center'
-        },
-        children: (0, _jsxRuntime.jsx)(_Radio.Radio, {
-          name: "the_option_custom",
-          defaultValue: checked2,
-          options: [{
-            value: 'a',
-            label: (0, _jsxRuntime.jsx)(_Label.Label, {
-              htmlFor: "option-custom-a",
-              className: "custom-class",
-              sx: {
-                color: '#bf2a23'
-              },
-              children: "(Custom) All domains listed on this environment, and all subdomains"
-            }),
-            id: 'option-custom-a'
-          }, {
-            value: 'b',
-            label: 'All domains listed on this environment',
-            labelProps: {
-              id: 'label-option-custom-b-custom-props'
-            },
-            className: 'custom-class-for-this',
-            'aria-describedby': 'describe-radio-all-domains-subdomains',
-            id: 'option-custom-b'
-          }],
-          onChange: function onChange(_, option) {
-            return setChecked2(option.value);
-          }
-        })
-      })]
-    }), (0, _jsxRuntime.jsx)("p", {
-      id: "describe-radio-all-domains-subdomains",
-      sx: {
-        mt: 2
-      },
-      children: "This is a explanation for custom option b"
-    })]
-  });
-};
-exports.Default = Default;

package/build/system/Form/RadioBoxGroup.stories.js

@@ -1,62 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Errors = exports.Default = void 0;
-var _react = require("react");
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/**
- * External dependencies
- */
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'RadioBoxGroup',
-  component: _.RadioBoxGroup
-};
-exports["default"] = _default;
-var options = [{
-  label: 'One',
-  value: 'one',
-  description: 'This is a description'
-}, {
-  label: 'Two',
-  value: 'two',
-  description: 'This is a description'
-}, {
-  label: 'Three',
-  value: 'three',
-  description: 'This is a description'
-}];
-var Default = function Default() {
-  var _useState = (0, _react.useState)('one'),
-    value = _useState[0],
-    setValue = _useState[1];
-  return (0, _jsxRuntime.jsx)(_.RadioBoxGroup, {
-    defaultValue: value,
-    onChange: function onChange(e) {
-      return setValue(e.target.value);
-    },
-    options: options,
-    optionWidth: "350px"
-  });
-};
-exports.Default = Default;
-var Errors = function Errors() {
-  var _useState2 = (0, _react.useState)(null),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  return (0, _jsxRuntime.jsx)(_.RadioBoxGroup, {
-    defaultValue: value,
-    onChange: function onChange(e) {
-      return setValue(e.target.value);
-    },
-    options: options,
-    required: true,
-    groupLabel: "Radio Box Group",
-    hasError: true,
-    errorMessage: "This is an error message"
-  });
-};
-exports.Errors = Errors;

package/build/system/Form/Textarea.stories.js

@@ -1,59 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var Form = _interopRequireWildcard(require("../NewForm"));
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/** @jsxImportSource theme-ui */
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Form/Textarea',
-  argTypes: {
-    placeholder: {
-      type: {
-        name: 'string',
-        required: false
-      },
-      control: {
-        type: 'text'
-      }
-    },
-    label: {
-      type: {
-        name: 'string',
-        required: false
-      },
-      control: {
-        type: 'text'
-      }
-    }
-  }
-};
-exports["default"] = _default;
-var DefaultComponent = function DefaultComponent() {
-  return (0, _jsxRuntime.jsxs)(Form.Root, {
-    children: [(0, _jsxRuntime.jsx)(Form.Textarea, {
-      forLabel: "my-text-area",
-      rows: "5",
-      label: "Regular textarea"
-    }), (0, _jsxRuntime.jsx)("hr", {
-      sx: {
-        my: 4
-      }
-    }), (0, _jsxRuntime.jsx)(Form.Textarea, {
-      forLabel: "my-text-area-error",
-      rows: "5",
-      label: "Error textarea",
-      errorMessage: "Please type numeric characters only",
-      required: true,
-      hasError: true
-    })]
-  });
-};
-var Default = DefaultComponent.bind({});
-exports.Default = Default;
-Default.args = {};