@automattic/vip-design-system 2.10.0 → 2.10.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (176) hide show
  1. package/babel.config.js +23 -19
  2. package/build/declaration.d.js +0 -1
  3. package/build/system/Accordion/Accordion.js +28 -33
  4. package/build/system/Accordion/Accordion.stories.js +34 -35
  5. package/build/system/Accordion/Accordion.test.js +35 -34
  6. package/build/system/Accordion/index.js +5 -8
  7. package/build/system/Avatar/Avatar.js +13 -17
  8. package/build/system/Avatar/Avatar.stories.js +10 -12
  9. package/build/system/Avatar/Avatar.test.js +15 -14
  10. package/build/system/Avatar/index.js +4 -6
  11. package/build/system/Badge/Badge.js +9 -14
  12. package/build/system/Badge/Badge.stories.js +23 -23
  13. package/build/system/Badge/Badge.test.js +15 -14
  14. package/build/system/Badge/index.js +4 -6
  15. package/build/system/Box/Box.js +9 -13
  16. package/build/system/Box/Box.stories.js +5 -8
  17. package/build/system/Breadcrumbs/Breadcrumbs.js +34 -38
  18. package/build/system/Breadcrumbs/Breadcrumbs.stories.js +18 -21
  19. package/build/system/Breadcrumbs/Breadcrumbs.test.js +28 -30
  20. package/build/system/Breadcrumbs/styles.js +5 -9
  21. package/build/system/Button/Button.js +11 -17
  22. package/build/system/Button/Button.stories.js +34 -33
  23. package/build/system/Button/Button.test.js +17 -16
  24. package/build/system/Button/ButtonSubmit.js +12 -16
  25. package/build/system/Button/ButtonSubmit.stories.js +12 -16
  26. package/build/system/Button/ButtonSubmit.test.js +15 -14
  27. package/build/system/Button/index.js +5 -8
  28. package/build/system/Card/Card.js +12 -14
  29. package/build/system/Card/Card.stories.js +21 -24
  30. package/build/system/Card/Card.test.js +19 -18
  31. package/build/system/Card/index.js +4 -6
  32. package/build/system/Code/Code.js +19 -23
  33. package/build/system/Code/Code.stories.js +16 -18
  34. package/build/system/Code/Code.test.js +20 -19
  35. package/build/system/Code/index.js +4 -6
  36. package/build/system/Drawer/Drawer.js +25 -30
  37. package/build/system/Drawer/Drawer.stories.js +38 -39
  38. package/build/system/Drawer/Drawer.test.js +19 -18
  39. package/build/system/Drawer/styles.js +9 -11
  40. package/build/system/Dropdown/Dropdown.js +23 -26
  41. package/build/system/Dropdown/Dropdown.test.js +16 -18
  42. package/build/system/Dropdown/DropdownContent.js +14 -20
  43. package/build/system/Dropdown/DropdownItem.js +19 -25
  44. package/build/system/Dropdown/DropdownLabel.js +10 -16
  45. package/build/system/Dropdown/DropdownSeparator.js +10 -16
  46. package/build/system/Dropdown/index.js +20 -23
  47. package/build/system/FilterDropdown/FilterDropdown.js +23 -29
  48. package/build/system/FilterDropdown/FilterDropdown.stories.js +9 -11
  49. package/build/system/FilterDropdown/FilterDropdown.test.js +7 -10
  50. package/build/system/Flex/Flex.js +7 -10
  51. package/build/system/Flex/Flex.stories.js +6 -10
  52. package/build/system/Flex/index.js +4 -6
  53. package/build/system/Footer/Footer.d.ts +33 -0
  54. package/build/system/Footer/Footer.js +82 -0
  55. package/build/system/Footer/Footer.stories.d.ts +41 -0
  56. package/build/system/Footer/Footer.stories.js +53 -0
  57. package/build/system/Footer/Footer.test.d.ts +1 -0
  58. package/build/system/Footer/Footer.test.js +36 -0
  59. package/build/system/Form/Checkbox/Checkbox.js +14 -18
  60. package/build/system/Form/Checkbox/Checkbox.stories.js +47 -48
  61. package/build/system/Form/Checkbox/Checkbox.test.js +23 -21
  62. package/build/system/Form/Checkbox/styles.js +7 -10
  63. package/build/system/Form/Input.js +19 -18
  64. package/build/system/Form/Input.stories.js +16 -18
  65. package/build/system/Form/Input.styles.js +5 -9
  66. package/build/system/Form/Label.js +14 -16
  67. package/build/system/Form/Label.stories.js +15 -15
  68. package/build/system/Form/Radio/Radio.js +13 -18
  69. package/build/system/Form/Radio/Radio.stories.js +43 -43
  70. package/build/system/Form/Radio/Radio.test.js +19 -18
  71. package/build/system/Form/Radio/RadioOption.js +22 -23
  72. package/build/system/Form/Radio/styles.js +7 -10
  73. package/build/system/Form/RadioGroupChip.js +26 -29
  74. package/build/system/Form/RadioGroupChip.stories.js +12 -15
  75. package/build/system/Form/RadioGroupChip.test.js +12 -11
  76. package/build/system/Form/RequiredLabel.js +3 -7
  77. package/build/system/Form/Toggle.js +11 -16
  78. package/build/system/Form/Toggle.stories.js +25 -27
  79. package/build/system/Form/Toggle.test.js +12 -11
  80. package/build/system/Form/Validation.js +10 -12
  81. package/build/system/Form/index.d.ts +2 -1
  82. package/build/system/Form/index.js +2 -0
  83. package/build/system/Grid/Grid.js +7 -10
  84. package/build/system/Grid/Grid.stories.js +6 -10
  85. package/build/system/Grid/index.js +4 -6
  86. package/build/system/Heading/Heading.js +9 -14
  87. package/build/system/Heading/Heading.stories.js +13 -16
  88. package/build/system/Hr/Hr.js +3 -7
  89. package/build/system/Hr/Hr.stories.js +10 -11
  90. package/build/system/Hr/Hr.test.js +14 -14
  91. package/build/system/Link/Link.js +11 -14
  92. package/build/system/Link/Link.stories.js +11 -14
  93. package/build/system/Link/index.js +4 -6
  94. package/build/system/LinkExternal/LinkExternal.d.ts +23 -3
  95. package/build/system/LinkExternal/LinkExternal.js +17 -23
  96. package/build/system/LinkExternal/LinkExternal.stories.d.ts +1 -8
  97. package/build/system/LinkExternal/LinkExternal.stories.js +4 -9
  98. package/build/system/LinkExternal/LinkExternal.test.js +14 -15
  99. package/build/system/MobileMenu/MobileMenu.js +24 -29
  100. package/build/system/MobileMenu/MobileMenu.stories.js +66 -67
  101. package/build/system/MobileMenu/MobileMenu.test.js +21 -22
  102. package/build/system/Nav/Nav.js +26 -32
  103. package/build/system/Nav/Nav.stories.js +97 -99
  104. package/build/system/Nav/Nav.test.js +32 -28
  105. package/build/system/Nav/NavItem.js +40 -45
  106. package/build/system/Nav/NavItemGroup.js +34 -39
  107. package/build/system/Nav/NavItemGroup.test.js +26 -23
  108. package/build/system/Nav/styles/variants/breadcrumbs.js +4 -7
  109. package/build/system/Nav/styles/variants/menu.js +8 -12
  110. package/build/system/Nav/styles/variants/menugroup.js +7 -11
  111. package/build/system/Nav/styles/variants/primary.js +4 -8
  112. package/build/system/Nav/styles/variants/tabs.js +3 -7
  113. package/build/system/Nav/styles/variants/toolbar.js +5 -8
  114. package/build/system/Nav/styles.js +26 -29
  115. package/build/system/NewDialog/DialogClose.js +14 -18
  116. package/build/system/NewDialog/DialogClose.test.js +11 -14
  117. package/build/system/NewDialog/DialogDescription.js +9 -15
  118. package/build/system/NewDialog/DialogOverlay.js +11 -13
  119. package/build/system/NewDialog/DialogTitle.js +7 -15
  120. package/build/system/NewDialog/NewDialog.js +24 -29
  121. package/build/system/NewDialog/index.js +7 -11
  122. package/build/system/NewDialog/styles.js +1 -5
  123. package/build/system/NewForm/Fieldset.js +13 -17
  124. package/build/system/NewForm/Form.js +8 -13
  125. package/build/system/NewForm/FormAutocomplete.js +2 -2
  126. package/build/system/NewForm/Legend.js +11 -15
  127. package/build/system/Notice/Notice.js +22 -25
  128. package/build/system/Notice/Notice.stories.js +41 -43
  129. package/build/system/Notice/index.js +5 -5
  130. package/build/system/Page/Page.js +4 -8
  131. package/build/system/Page/Page.test.js +14 -14
  132. package/build/system/Progress/Progress.js +21 -24
  133. package/build/system/Progress/Progress.stories.js +9 -15
  134. package/build/system/Progress/Progress.test.js +14 -13
  135. package/build/system/Progress/index.js +4 -6
  136. package/build/system/ScreenReaderText/ScreenReaderText.js +9 -9
  137. package/build/system/Spinner/Spinner.js +9 -14
  138. package/build/system/Spinner/Spinner.stories.js +6 -10
  139. package/build/system/Spinner/Spinner.test.js +14 -13
  140. package/build/system/Spinner/index.js +1 -6
  141. package/build/system/Table/Table.js +20 -22
  142. package/build/system/Table/Table.stories.js +29 -30
  143. package/build/system/Table/TableCell.js +9 -11
  144. package/build/system/Table/TableRow.js +10 -11
  145. package/build/system/Table/index.js +6 -10
  146. package/build/system/Text/Text.js +9 -14
  147. package/build/system/Text/Text.stories.js +24 -25
  148. package/build/system/Text/index.js +4 -6
  149. package/build/system/Toolbar/Logo.js +11 -15
  150. package/build/system/Toolbar/Toolbar.js +12 -17
  151. package/build/system/Toolbar/Toolbar.stories.js +47 -50
  152. package/build/system/Toolbar/Toolbar.test.js +26 -24
  153. package/build/system/Toolbar/ToolbarUtilNav.js +9 -16
  154. package/build/system/Toolbar/index.js +10 -15
  155. package/build/system/Tooltip/Tooltip.js +9 -14
  156. package/build/system/Tooltip/Tooltip.stories.js +29 -31
  157. package/build/system/Tooltip/index.js +5 -5
  158. package/build/system/Wizard/Wizard.js +11 -18
  159. package/build/system/Wizard/Wizard.stories.js +37 -38
  160. package/build/system/Wizard/WizardStep.js +26 -32
  161. package/build/system/Wizard/index.js +6 -7
  162. package/build/system/assets/a8cLogo.d.ts +2 -0
  163. package/build/system/assets/a8cLogo.js +39 -0
  164. package/build/system/index.d.ts +2 -1
  165. package/build/system/index.js +2 -0
  166. package/build/system/theme/breakpoints.js +1 -5
  167. package/build/system/utils/stories/CustomLink.js +7 -13
  168. package/package.json +1 -1
  169. package/src/system/Footer/Footer.stories.tsx +46 -0
  170. package/src/system/Footer/Footer.test.tsx +40 -0
  171. package/src/system/Footer/Footer.tsx +120 -0
  172. package/src/system/Form/index.js +2 -0
  173. package/src/system/LinkExternal/LinkExternal.tsx +27 -8
  174. package/src/system/NewForm/FormAutocomplete.js +2 -2
  175. package/src/system/assets/a8cLogo.tsx +30 -0
  176. package/src/system/index.js +2 -0
@@ -1,17 +1,15 @@
1
- "use strict";
1
+ 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); }
2
+ /** @jsxImportSource theme-ui */
2
3
 
3
- exports.__esModule = true;
4
- exports.RadioOption = void 0;
5
- var _classnames = _interopRequireDefault(require("classnames"));
6
- var _react = _interopRequireDefault(require("react"));
7
- var _themeUi = require("theme-ui");
8
- var _Radio = require("./Radio");
9
- var _styles = require("./styles");
10
- var _Label = require("../Label");
11
- var _jsxRuntime = require("theme-ui/jsx-runtime");
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13
- 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); } /** @jsxImportSource theme-ui */
14
- var RadioOption = exports.RadioOption = function RadioOption(_ref) {
4
+ import classNames from 'classnames';
5
+ import React from 'react';
6
+ import { Box } from 'theme-ui';
7
+ import { VIP_RADIO } from './Radio';
8
+ import { inputStyle, itemStyle, labelStyle } from './styles';
9
+ import { Label } from '../Label';
10
+ import { jsx as _jsx } from "theme-ui/jsx-runtime";
11
+ import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
12
+ var RadioOption = function RadioOption(_ref) {
15
13
  var _ref$option = _ref.option,
16
14
  id = _ref$option.id,
17
15
  value = _ref$option.value,
@@ -28,26 +26,27 @@ var RadioOption = exports.RadioOption = function RadioOption(_ref) {
28
26
  onChangeHandler = _ref.onChangeHandler,
29
27
  checked = _ref.checked;
30
28
  var commonLabelProps = _extends({
31
- className: _Radio.VIP_RADIO + "item-label",
29
+ className: VIP_RADIO + "item-label",
32
30
  htmlFor: id
33
31
  }, labelProps);
34
- return (0, _jsxRuntime.jsxs)(_themeUi.Box, {
32
+ return _jsxs(Box, {
35
33
  as: "div",
36
- sx: _styles.itemStyle,
37
- className: (0, _classnames["default"])(_Radio.VIP_RADIO + "item", _Radio.VIP_RADIO + "item-" + id, checked ? _Radio.VIP_RADIO + "item-checked" : '', className),
38
- children: [(0, _jsxRuntime.jsx)("input", _extends({
34
+ sx: itemStyle,
35
+ className: classNames(VIP_RADIO + "item", VIP_RADIO + "item-" + id, checked ? VIP_RADIO + "item-checked" : '', className),
36
+ children: [_jsx("input", _extends({
39
37
  type: "radio",
40
38
  id: id,
41
39
  "aria-disabled": disabled,
42
40
  name: name,
43
41
  value: "" + value,
44
- sx: (0, _styles.inputStyle)(variant),
42
+ sx: inputStyle(variant),
45
43
  onChange: onChangeHandler,
46
- className: _Radio.VIP_RADIO + "item-input",
44
+ className: VIP_RADIO + "item-input",
47
45
  checked: checked
48
- }, inputProps)), renderLabel ? renderLabel(commonLabelProps, (0, _styles.labelStyle)(variant)) : (0, _jsxRuntime.jsx)(_Label.Label, _extends({}, commonLabelProps, {
49
- sx: (0, _styles.labelStyle)(variant),
46
+ }, inputProps)), renderLabel ? renderLabel(commonLabelProps, labelStyle(variant)) : _jsx(Label, _extends({}, commonLabelProps, {
47
+ sx: labelStyle(variant),
50
48
  children: label
51
49
  }))]
52
50
  });
53
- };
51
+ };
52
+ export { RadioOption };
@@ -1,11 +1,8 @@
1
- "use strict";
1
+ import { baseControlBorderStyle, inputBaseText } from '../Input.styles';
2
2
 
3
- exports.__esModule = true;
4
- exports.labelStyle = exports.itemStyle = exports.inputStyle = void 0;
5
- var _Input = require("../Input.styles");
6
3
  // The output willl be 18px because of the 1px border.
7
4
  var RADIO_SIZE = 16;
8
- var inputStyle = exports.inputStyle = function inputStyle(variant) {
5
+ export var inputStyle = function inputStyle(variant) {
9
6
  return {
10
7
  position: 'absolute',
11
8
  top: 0,
@@ -18,7 +15,7 @@ var inputStyle = exports.inputStyle = function inputStyle(variant) {
18
15
  variant: 'outline',
19
16
  content: '""',
20
17
  border: '1px solid',
21
- borderColor: _Input.baseControlBorderStyle.borderColor,
18
+ borderColor: baseControlBorderStyle.borderColor,
22
19
  left: 0
23
20
  },
24
21
  '&:checked ~ label::after': {
@@ -31,14 +28,14 @@ var inputStyle = exports.inputStyle = function inputStyle(variant) {
31
28
  }
32
29
  };
33
30
  };
34
- var labelStyle = exports.labelStyle = function labelStyle(variant) {
31
+ export var labelStyle = function labelStyle(variant) {
35
32
  return {
36
33
  display: 'flex',
37
34
  cursor: 'pointer',
38
35
  position: 'relative',
39
36
  marginBottom: 0,
40
37
  userSelect: 'none',
41
- color: _Input.inputBaseText,
38
+ color: inputBaseText,
42
39
  fontWeight: 'regular',
43
40
  lineHeight: 'normal',
44
41
  '&:before, &:after': {
@@ -50,7 +47,7 @@ var labelStyle = exports.labelStyle = function labelStyle(variant) {
50
47
  '&::before': {
51
48
  content: '""',
52
49
  border: '1px solid',
53
- borderColor: _Input.baseControlBorderStyle.borderColor,
50
+ borderColor: baseControlBorderStyle.borderColor,
54
51
  marginRight: 2
55
52
  },
56
53
  '&::after': {
@@ -68,7 +65,7 @@ var labelStyle = exports.labelStyle = function labelStyle(variant) {
68
65
  }
69
66
  };
70
67
  };
71
- var itemStyle = exports.itemStyle = {
68
+ export var itemStyle = {
72
69
  display: 'flex',
73
70
  alignItems: 'center',
74
71
  my: 2,
@@ -1,25 +1,21 @@
1
- "use strict";
2
-
3
- exports.__esModule = true;
4
- exports.RadioGroupChip = void 0;
5
- var _react = _interopRequireWildcard(require("react"));
6
- var _RequiredLabel = require("./RequiredLabel");
7
- var _Validation = require("./Validation");
8
- var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
9
- var _jsxRuntime = require("theme-ui/jsx-runtime");
10
1
  var _excluded = ["name", "onChange", "groupLabel", "defaultValue", "options", "disabled", "errorMessage", "hasError", "required", "size"];
2
+ 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); }
3
+ 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; }
11
4
  /** @jsxImportSource theme-ui */
5
+
12
6
  /**
13
7
  * External dependencies
14
8
  */
9
+ import React, { useCallback } from 'react';
10
+ import { RequiredLabel } from './RequiredLabel';
11
+ import { Validation } from './Validation';
12
+ import ScreenReaderText from '../ScreenReaderText';
13
+
15
14
  /**
16
15
  * Internal dependencies
17
16
  */
18
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
19
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
21
- 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); }
22
- 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; }
17
+ import { jsx as _jsx } from "theme-ui/jsx-runtime";
18
+ import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
23
19
  var ChipOption = function ChipOption(_ref) {
24
20
  var defaultValue = _ref.defaultValue,
25
21
  _ref$option = _ref.option,
@@ -33,9 +29,9 @@ var ChipOption = function ChipOption(_ref) {
33
29
  size = _ref$size === void 0 ? 'medium' : _ref$size;
34
30
  var checked = "" + defaultValue === "" + value;
35
31
  var forLabel = id || value;
36
- var ref = _react["default"].useRef(null);
32
+ var ref = React.useRef(null);
37
33
  var describedById = "input-radio-box-" + forLabel + "-description";
38
- return (0, _jsxRuntime.jsxs)("div", {
34
+ return _jsxs("div", {
39
35
  id: "o" + forLabel,
40
36
  onClick: function onClick() {
41
37
  if (ref.current) {
@@ -54,7 +50,7 @@ var ChipOption = function ChipOption(_ref) {
54
50
  },
55
51
  borderRadius: 1
56
52
  },
57
- children: [(0, _jsxRuntime.jsx)("input", {
53
+ children: [_jsx("input", {
58
54
  ref: ref,
59
55
  type: "radio",
60
56
  id: forLabel,
@@ -74,7 +70,7 @@ var ChipOption = function ChipOption(_ref) {
74
70
  return theme.outline;
75
71
  }
76
72
  }
77
- }), (0, _jsxRuntime.jsx)("label", {
73
+ }), _jsx("label", {
78
74
  id: describedById,
79
75
  htmlFor: forLabel,
80
76
  sx: {
@@ -93,7 +89,7 @@ var ChipOption = function ChipOption(_ref) {
93
89
  })]
94
90
  });
95
91
  };
96
- var RadioGroupChip = exports.RadioGroupChip = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
92
+ var RadioGroupChip = /*#__PURE__*/React.forwardRef(function (_ref2, forwardRef) {
97
93
  var _ref2$name = _ref2.name,
98
94
  name = _ref2$name === void 0 ? '' : _ref2$name,
99
95
  onChange = _ref2.onChange,
@@ -107,14 +103,14 @@ var RadioGroupChip = exports.RadioGroupChip = /*#__PURE__*/_react["default"].for
107
103
  _ref2$size = _ref2.size,
108
104
  size = _ref2$size === void 0 ? 'medium' : _ref2$size,
109
105
  props = _objectWithoutPropertiesLoose(_ref2, _excluded);
110
- var onChangeHandler = (0, _react.useCallback)(function (e) {
106
+ var onChangeHandler = useCallback(function (e) {
111
107
  var optionTriggered = options.find(function (option) {
112
108
  return "" + option.value === "" + e.target.value;
113
109
  });
114
110
  onChange(e, optionTriggered);
115
111
  }, [onChange]);
116
112
  var renderedOptions = options.map(function (option) {
117
- return (0, _jsxRuntime.jsx)(ChipOption, {
113
+ return _jsx(ChipOption, {
118
114
  defaultValue: defaultValue,
119
115
  disabled: disabled,
120
116
  name: name,
@@ -123,8 +119,8 @@ var RadioGroupChip = exports.RadioGroupChip = /*#__PURE__*/_react["default"].for
123
119
  size: size
124
120
  }, (option == null ? void 0 : option.id) || (option == null ? void 0 : option.value));
125
121
  });
126
- return (0, _jsxRuntime.jsxs)("div", {
127
- children: [(0, _jsxRuntime.jsxs)("fieldset", _extends({
122
+ return _jsxs("div", {
123
+ children: [_jsxs("fieldset", _extends({
128
124
  sx: _extends({
129
125
  border: 0,
130
126
  background: 'layer.3',
@@ -145,25 +141,26 @@ var RadioGroupChip = exports.RadioGroupChip = /*#__PURE__*/_react["default"].for
145
141
  "aria-required": required,
146
142
  role: "radiogroup"
147
143
  }, props, {
148
- children: [groupLabel ? (0, _jsxRuntime.jsxs)("legend", {
144
+ children: [groupLabel ? _jsxs("legend", {
149
145
  sx: {
150
146
  mb: 2
151
147
  },
152
- children: [groupLabel, required ? (0, _jsxRuntime.jsx)(_RequiredLabel.RequiredLabel, {}) : null]
153
- }) : (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
148
+ children: [groupLabel, required ? _jsx(RequiredLabel, {}) : null]
149
+ }) : _jsx(ScreenReaderText, {
154
150
  children: "Choose an option"
155
- }), (0, _jsxRuntime.jsx)("div", {
151
+ }), _jsx("div", {
156
152
  sx: {
157
153
  display: 'flex',
158
154
  gap: 1
159
155
  },
160
156
  children: renderedOptions
161
157
  })]
162
- })), hasError && errorMessage && (0, _jsxRuntime.jsx)(_Validation.Validation, {
158
+ })), hasError && errorMessage && _jsx(Validation, {
163
159
  isValid: false,
164
160
  describedId: groupLabel,
165
161
  children: errorMessage
166
162
  })]
167
163
  });
168
164
  });
169
- RadioGroupChip.displayName = 'RadioGroupChip';
165
+ RadioGroupChip.displayName = 'RadioGroupChip';
166
+ export { RadioGroupChip };
@@ -1,19 +1,16 @@
1
- "use strict";
2
-
3
- exports.__esModule = true;
4
- exports["default"] = exports.SmallSize = exports.MediumSize = void 0;
5
- var _react = require("react");
6
- var _RadioGroupChip = require("./RadioGroupChip");
7
- var _jsxRuntime = require("theme-ui/jsx-runtime");
8
1
  /**
9
2
  * External dependencies
10
3
  */
4
+ import { useState } from 'react';
5
+
11
6
  /**
12
7
  * Internal dependencies
13
8
  */
14
- var _default = exports["default"] = {
9
+ import { RadioGroupChip } from './RadioGroupChip';
10
+ import { jsx as _jsx } from "theme-ui/jsx-runtime";
11
+ export default {
15
12
  title: 'RadioGroupChip',
16
- component: _RadioGroupChip.RadioGroupChip,
13
+ component: RadioGroupChip,
17
14
  parameters: {
18
15
  docs: {
19
16
  description: {
@@ -22,11 +19,11 @@ var _default = exports["default"] = {
22
19
  }
23
20
  }
24
21
  };
25
- var MediumSize = exports.MediumSize = function MediumSize() {
26
- var _useState = (0, _react.useState)('table'),
22
+ export var MediumSize = function MediumSize() {
23
+ var _useState = useState('table'),
27
24
  value = _useState[0],
28
25
  setValue = _useState[1];
29
- return (0, _jsxRuntime.jsx)(_RadioGroupChip.RadioGroupChip, {
26
+ return _jsx(RadioGroupChip, {
30
27
  defaultValue: value,
31
28
  onChange: function onChange(e) {
32
29
  return setValue(e.target.value);
@@ -40,11 +37,11 @@ var MediumSize = exports.MediumSize = function MediumSize() {
40
37
  }]
41
38
  });
42
39
  };
43
- var SmallSize = exports.SmallSize = function SmallSize() {
44
- var _useState2 = (0, _react.useState)('table'),
40
+ export var SmallSize = function SmallSize() {
41
+ var _useState2 = useState('table'),
45
42
  value = _useState2[0],
46
43
  setValue = _useState2[1];
47
- return (0, _jsxRuntime.jsx)(_RadioGroupChip.RadioGroupChip, {
44
+ return _jsx(RadioGroupChip, {
48
45
  defaultValue: value,
49
46
  onChange: function onChange(e) {
50
47
  return setValue(e.target.value);
@@ -1,17 +1,18 @@
1
- "use strict";
2
-
3
- var _react = require("@testing-library/react");
4
- var _jestAxe = require("jest-axe");
5
- var _RadioGroupChip = require("./RadioGroupChip");
6
- var _jsxRuntime = require("theme-ui/jsx-runtime");
7
1
  function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
8
2
  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); }
9
3
  function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
10
- function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } /**
4
+ function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
5
+ /**
11
6
  * External dependencies
12
- */ /**
7
+ */
8
+ import { render, screen } from '@testing-library/react';
9
+ import { axe } from 'jest-axe';
10
+
11
+ /**
13
12
  * Internal dependencies
14
13
  */
14
+ import { RadioGroupChip } from './RadioGroupChip';
15
+ import { jsx as _jsx } from "theme-ui/jsx-runtime";
15
16
  var defaultProps = {
16
17
  options: [{
17
18
  label: 'One',
@@ -31,9 +32,9 @@ describe('<RadioGroupChip />', function () {
31
32
  return _regeneratorRuntime().wrap(function _callee$(_context) {
32
33
  while (1) switch (_context.prev = _context.next) {
33
34
  case 0:
34
- _render = (0, _react.render)((0, _jsxRuntime.jsx)(_RadioGroupChip.RadioGroupChip, _extends({}, defaultProps))), container = _render.container;
35
+ _render = render(_jsx(RadioGroupChip, _extends({}, defaultProps))), container = _render.container;
35
36
  _context.next = 3;
36
- return _react.screen.findAllByRole('radio');
37
+ return screen.findAllByRole('radio');
37
38
  case 3:
38
39
  dom = _context.sent;
39
40
  expect(dom).toHaveLength(3);
@@ -44,7 +45,7 @@ describe('<RadioGroupChip />', function () {
44
45
  // Check for accessibility issues
45
46
  _context.t0 = expect;
46
47
  _context.next = 11;
47
- return (0, _jestAxe.axe)(container);
48
+ return axe(container);
48
49
  case 11:
49
50
  _context.t1 = _context.sent;
50
51
  (0, _context.t0)(_context.t1).toHaveNoViolations();
@@ -1,16 +1,12 @@
1
- "use strict";
2
-
3
- exports.__esModule = true;
4
- exports.RequiredLabel = void 0;
5
- var _jsxRuntime = require("theme-ui/jsx-runtime");
1
+ import { jsx as _jsx } from "theme-ui/jsx-runtime";
6
2
  /** @jsxImportSource theme-ui */
7
3
 
8
4
  /**
9
5
  * External dependencies
10
6
  */
11
7
 
12
- var RequiredLabel = exports.RequiredLabel = function RequiredLabel() {
13
- return (0, _jsxRuntime.jsx)("span", {
8
+ export var RequiredLabel = function RequiredLabel() {
9
+ return _jsx("span", {
14
10
  sx: {
15
11
  color: 'texts.helper',
16
12
  display: 'inline-block',
@@ -1,21 +1,16 @@
1
- "use strict";
2
-
3
- exports.__esModule = true;
4
- exports.Toggle = void 0;
5
- var Switch = _interopRequireWildcard(require("@radix-ui/react-switch"));
6
- var _classnames = _interopRequireDefault(require("classnames"));
7
- var _jsxRuntime = require("theme-ui/jsx-runtime");
8
1
  var _excluded = ["name", "onChange", "className", "variant"];
2
+ 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); }
3
+ 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; }
9
4
  /* eslint-disable max-len */
10
5
  /** @jsxImportSource theme-ui */
6
+
7
+ import * as Switch from '@radix-ui/react-switch';
8
+ import classNames from 'classnames';
9
+
11
10
  // Documentation for Radix Switch component
12
11
  // https://www.radix-ui.com/docs/primitives/components/switch
13
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
14
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
15
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
16
- 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); }
17
- 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; }
18
- var Toggle = exports.Toggle = function Toggle(_ref) {
12
+ import { jsx as _jsx } from "theme-ui/jsx-runtime";
13
+ export var Toggle = function Toggle(_ref) {
19
14
  var _ref$name = _ref.name,
20
15
  name = _ref$name === void 0 ? 'toggle' : _ref$name,
21
16
  onChange = _ref.onChange,
@@ -23,8 +18,8 @@ var Toggle = exports.Toggle = function Toggle(_ref) {
23
18
  _ref$variant = _ref.variant,
24
19
  variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
25
20
  rest = _objectWithoutPropertiesLoose(_ref, _excluded);
26
- return (0, _jsxRuntime.jsx)(Switch.Root, _extends({
27
- className: (0, _classnames["default"])('vip-toggle-component', className),
21
+ return _jsx(Switch.Root, _extends({
22
+ className: classNames('vip-toggle-component', className),
28
23
  sx: {
29
24
  all: 'unset',
30
25
  cursor: 'pointer',
@@ -52,7 +47,7 @@ var Toggle = exports.Toggle = function Toggle(_ref) {
52
47
  name: name,
53
48
  onCheckedChange: onChange
54
49
  }, rest, {
55
- children: (0, _jsxRuntime.jsx)(Switch.Thumb, {
50
+ children: _jsx(Switch.Thumb, {
56
51
  sx: {
57
52
  display: 'block',
58
53
  width: 16,
@@ -1,13 +1,11 @@
1
- "use strict";
2
-
3
- exports.__esModule = true;
4
- exports["default"] = exports.WithLabel = exports.Default = exports.CustomStyling = void 0;
5
- var _ = require("..");
6
- var _jsxRuntime = require("theme-ui/jsx-runtime");
7
1
  /** @jsxImportSource theme-ui */
8
- var _default = exports["default"] = {
2
+
3
+ import { Toggle, Label } from '..';
4
+ import { jsx as _jsx } from "theme-ui/jsx-runtime";
5
+ import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
6
+ export default {
9
7
  title: 'Toggle',
10
- component: _.Toggle,
8
+ component: Toggle,
11
9
  argTypes: {
12
10
  checked: {
13
11
  control: {
@@ -23,18 +21,18 @@ var _default = exports["default"] = {
23
21
  }
24
22
  }
25
23
  };
26
- var Default = exports.Default = {
24
+ export var Default = {
27
25
  render: function render(args) {
28
- return (0, _jsxRuntime.jsxs)("form", {
29
- children: [(0, _jsxRuntime.jsx)(_.Toggle, {
26
+ return _jsxs("form", {
27
+ children: [_jsx(Toggle, {
30
28
  checked: args.checked,
31
29
  defaultChecked: true,
32
30
  "aria-label": "Feature flag"
33
- }), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Toggle, {
31
+ }), _jsx("br", {}), _jsx("br", {}), _jsx(Toggle, {
34
32
  checked: args.checked,
35
33
  defaultChecked: false,
36
34
  "aria-label": "Feature flag 2"
37
- }), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Toggle, {
35
+ }), _jsx("br", {}), _jsx("br", {}), _jsx(Toggle, {
38
36
  "aria-label": "Feature Disabled",
39
37
  disabled: true,
40
38
  defaultChecked: false
@@ -42,13 +40,13 @@ var Default = exports.Default = {
42
40
  });
43
41
  }
44
42
  };
45
- var WithLabel = exports.WithLabel = {
43
+ export var WithLabel = {
46
44
  render: function render(args) {
47
- return (0, _jsxRuntime.jsxs)("form", {
48
- children: [(0, _jsxRuntime.jsx)(_.Label, {
45
+ return _jsxs("form", {
46
+ children: [_jsx(Label, {
49
47
  htmlFor: "custom-label-input",
50
48
  children: "Custom Label here"
51
- }), (0, _jsxRuntime.jsx)(_.Toggle, {
49
+ }), _jsx(Toggle, {
52
50
  id: "custom-label-input",
53
51
  defaultChecked: true,
54
52
  checked: args.checked,
@@ -57,36 +55,36 @@ var WithLabel = exports.WithLabel = {
57
55
  });
58
56
  }
59
57
  };
60
- var CustomStyling = exports.CustomStyling = {
58
+ export var CustomStyling = {
61
59
  render: function render(args) {
62
- return (0, _jsxRuntime.jsxs)("form", {
63
- children: [(0, _jsxRuntime.jsxs)(_.Label, {
60
+ return _jsxs("form", {
61
+ children: [_jsxs(Label, {
64
62
  htmlFor: "custom-label-input",
65
- children: ["Custom Styling.", ' ', (0, _jsxRuntime.jsx)("strong", {
63
+ children: ["Custom Styling.", ' ', _jsx("strong", {
66
64
  children: "We currently only recommend using Primary, Disabled, and Success variants."
67
65
  })]
68
- }), (0, _jsxRuntime.jsxs)("div", {
69
- children: [(0, _jsxRuntime.jsx)(_.Toggle, {
66
+ }), _jsxs("div", {
67
+ children: [_jsx(Toggle, {
70
68
  id: "custom-label-input",
71
69
  defaultChecked: true,
72
70
  checked: args.checked,
73
71
  "aria-label": "Feature flag",
74
72
  variant: "success"
75
- }), ' ', (0, _jsxRuntime.jsx)("h2", {
73
+ }), ' ', _jsx("h2", {
76
74
  children: "Not recommended"
77
- }), (0, _jsxRuntime.jsx)(_.Toggle, {
75
+ }), _jsx(Toggle, {
78
76
  id: "custom-label-input-error",
79
77
  defaultChecked: true,
80
78
  checked: args.checked,
81
79
  "aria-label": "Error flag",
82
80
  variant: "error"
83
- }), ' ', (0, _jsxRuntime.jsx)(_.Toggle, {
81
+ }), ' ', _jsx(Toggle, {
84
82
  id: "custom-label-input-warning",
85
83
  defaultChecked: true,
86
84
  checked: args.checked,
87
85
  "aria-label": "Warning flag",
88
86
  variant: "warning"
89
- }), ' ', (0, _jsxRuntime.jsx)(_.Toggle, {
87
+ }), ' ', _jsx(Toggle, {
90
88
  id: "custom-label-input-info",
91
89
  defaultChecked: true,
92
90
  checked: args.checked,
@@ -1,33 +1,34 @@
1
- "use strict";
2
-
3
- var _react = require("@testing-library/react");
4
- var _jestAxe = require("jest-axe");
5
- var _Toggle = require("./Toggle");
6
- var _jsxRuntime = require("theme-ui/jsx-runtime");
7
1
  function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
8
2
  function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
9
- function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } /**
3
+ function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
4
+ /**
10
5
  * External dependencies
11
- */ /**
6
+ */
7
+ import { render, screen } from '@testing-library/react';
8
+ import { axe } from 'jest-axe';
9
+
10
+ /**
12
11
  * Internal dependencies
13
12
  */
13
+ import { Toggle } from './Toggle';
14
+ import { jsx as _jsx } from "theme-ui/jsx-runtime";
14
15
  describe('<Toggle />', function () {
15
16
  it('renders the Toggle component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
16
17
  var _render, container;
17
18
  return _regeneratorRuntime().wrap(function _callee$(_context) {
18
19
  while (1) switch (_context.prev = _context.next) {
19
20
  case 0:
20
- _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Toggle.Toggle, {
21
+ _render = render(_jsx(Toggle, {
21
22
  "aria-label": "Dinner room Light",
22
23
  defaultChecked: true,
23
24
  name: "my-toggle"
24
25
  })), container = _render.container;
25
- expect(_react.screen.getByRole('switch')).toBeInTheDocument();
26
+ expect(screen.getByRole('switch')).toBeInTheDocument();
26
27
 
27
28
  // Check for accessibility issues
28
29
  _context.t0 = expect;
29
30
  _context.next = 5;
30
- return (0, _jestAxe.axe)(container);
31
+ return axe(container);
31
32
  case 5:
32
33
  _context.t1 = _context.sent;
33
34
  (0, _context.t0)(_context.t1).toHaveNoViolations();