@automattic/vip-design-system 2.4.5 → 2.6.1

package/build/system/Dropdown/index.d.ts

@@ -1,40 +1,18 @@
-export default Dropdown;
-export const Root: {
-    ({ trigger, children, open, defaultOpen, onOpenChange, modal, dir, contentProps, portalProps, className, }: {
-        trigger: any;
-        children: any;
-        open?: undefined;
-        defaultOpen?: boolean | undefined;
-        onOpenChange?: undefined;
-        modal?: boolean | undefined;
-        dir?: string | undefined;
-        contentProps?: {} | undefined;
-        portalProps?: {} | undefined;
-        className: any;
-    }): import("react").JSX.Element;
-    propTypes: {
-        trigger: import("prop-types").Validator<NonNullable<import("prop-types").ReactNodeLike>>;
-        children: import("prop-types").Validator<NonNullable<import("prop-types").ReactNodeLike>>;
-        open: import("prop-types").Requireable<boolean>;
-        defaultOpen: import("prop-types").Requireable<boolean>;
-        onOpenChange: import("prop-types").Requireable<(...args: any[]) => any>;
-        modal: import("prop-types").Requireable<boolean>;
-        dir: import("prop-types").Requireable<string>;
-        contentProps: import("prop-types").Requireable<any>;
-        portalProps: import("prop-types").Requireable<any>;
-        className: import("prop-types").Requireable<string>;
-    };
-};
-export const Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export const Content: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-export const Item: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-export const CheckboxItem: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-export const RadioGroup: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-export const RadioItem: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-export const ItemIndicator: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
-export const Label: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-export const Separator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-export const Sub: import("react").FC<import("@radix-ui/react-dropdown-menu").DropdownMenuSubProps>;
-export const SubTrigger: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-export const SubContent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
 import { Dropdown } from './Dropdown';
+declare const Root: import("react").FC<import("./Dropdown").DropdownProps>;
+declare const Content: import("react").ForwardRefExoticComponent<import("./DropdownContent").DropdownContentProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const Item: import("react").ForwardRefExoticComponent<import("./DropdownItem").DropdownItemProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const CheckboxItem: import("react").ForwardRefExoticComponent<import("./DropdownItem").DropdownCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const RadioGroup: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const RadioItem: import("react").ForwardRefExoticComponent<import("./DropdownItem").DropdownRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const ItemIndicator: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Label: import("react").ForwardRefExoticComponent<import("./DropdownLabel").DropdownLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Separator: import("react").ForwardRefExoticComponent<import("./DropdownSeparator").DropdownSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Sub: import("react").FC<import("@radix-ui/react-dropdown-menu").DropdownMenuSubProps>;
+declare const SubTrigger: import("react").ForwardRefExoticComponent<import("./DropdownItem").DropdownSubTriggerItemProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SubContent: import("react").ForwardRefExoticComponent<import("./DropdownContent").DropdownContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Root, Trigger, Content, Item, CheckboxItem, RadioGroup, RadioItem, ItemIndicator, Label, Separator, Sub, SubTrigger, SubContent, };
+export default Dropdown;

package/build/system/Dropdown/index.js

@@ -1,52 +1,25 @@
-/** @jsxImportSource theme-ui */
-/**
- * Internal dependencies
- */
-import {
-	Dropdown,
-	DropdownTrigger,
-	DropdownRadioGroup,
-	DropdownItemIndicator,
-	DropdownSub,
-} from './Dropdown';
-import { DropdownSubContent, DropdownContent } from './DropdownContent';
-import {
-	DropdownItem,
-	DropdownCheckboxItem,
-	DropdownRadioItem,
-	DropdownSubTrigger,
-} from './DropdownItem';
-import { DropdownLabel } from './DropdownLabel';
-import { DropdownSeparator } from './DropdownSeparator';
-
-const Root = Dropdown;
-const Content = DropdownContent;
-const Trigger = DropdownTrigger;
-const Item = DropdownItem;
-const CheckboxItem = DropdownCheckboxItem;
-const RadioGroup = DropdownRadioGroup;
-const RadioItem = DropdownRadioItem;
-const ItemIndicator = DropdownItemIndicator;
-const Label = DropdownLabel;
-const Separator = DropdownSeparator;
-const Sub = DropdownSub;
-const SubTrigger = DropdownSubTrigger;
-const SubContent = DropdownSubContent;
+"use strict";
 
-export {
-	Root,
-	Trigger,
-	Content,
-	Item,
-	CheckboxItem,
-	RadioGroup,
-	RadioItem,
-	ItemIndicator,
-	Label,
-	Separator,
-	Sub,
-	SubTrigger,
-	SubContent,
-};
+exports.__esModule = true;
+exports["default"] = exports.Trigger = exports.SubTrigger = exports.SubContent = exports.Sub = exports.Separator = exports.Root = exports.RadioItem = exports.RadioGroup = exports.Label = exports.ItemIndicator = exports.Item = exports.Content = exports.CheckboxItem = void 0;
+var _Dropdown = require("./Dropdown");
+var _DropdownContent = require("./DropdownContent");
+var _DropdownItem = require("./DropdownItem");
+var _DropdownLabel = require("./DropdownLabel");
+var _DropdownSeparator = require("./DropdownSeparator");
+/** @jsxImportSource theme-ui */
 
-export default Dropdown;
+var Root = exports.Root = _Dropdown.Dropdown;
+var Content = exports.Content = _DropdownContent.DropdownContent;
+var Trigger = exports.Trigger = _Dropdown.DropdownTrigger;
+var Item = exports.Item = _DropdownItem.DropdownItem;
+var CheckboxItem = exports.CheckboxItem = _DropdownItem.DropdownCheckboxItem;
+var RadioGroup = exports.RadioGroup = _Dropdown.DropdownRadioGroup;
+var RadioItem = exports.RadioItem = _DropdownItem.DropdownRadioItem;
+var ItemIndicator = exports.ItemIndicator = _Dropdown.DropdownItemIndicator;
+var Label = exports.Label = _DropdownLabel.DropdownLabel;
+var Separator = exports.Separator = _DropdownSeparator.DropdownSeparator;
+var Sub = exports.Sub = _Dropdown.DropdownSub;
+var SubTrigger = exports.SubTrigger = _DropdownItem.DropdownSubTrigger;
+var SubContent = exports.SubContent = _DropdownContent.DropdownSubContent;
+var _default = exports["default"] = _Dropdown.Dropdown;

package/build/system/FilterDropdown/FilterDropdown.d.ts

@@ -0,0 +1,27 @@
+/** @jsxImportSource theme-ui */
+import React from 'react';
+import { DropdownCheckboxItemProps } from '../Dropdown/DropdownItem';
+export type FilterDropdownCheckItemProps = DropdownCheckboxItemProps & {
+    checked: boolean;
+    item: {
+        label: string;
+        size?: number | string;
+    };
+    onClick: () => void;
+};
+export type FilterDropDownFilterProp = {
+    label: string;
+    size?: number | string;
+    value?: number | string;
+};
+export interface FilterDropdownFiltersProp {
+    [key: string]: FilterDropDownFilterProp;
+}
+export type FilterDropdownProps = {
+    className?: string;
+    filters: FilterDropdownFiltersProp;
+    label?: React.ReactNode | string;
+    onSelect: (filter: FilterDropDownFilterProp, key: string) => void;
+    defaultValue?: string | null;
+};
+export declare const FilterDropdown: ({ className, filters, label, onSelect, defaultValue, }: FilterDropdownProps) => React.JSX.Element;

package/build/system/FilterDropdown/FilterDropdown.js

@@ -0,0 +1,75 @@
+"use strict";
+
+exports.__esModule = true;
+exports.FilterDropdown = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _i18nCalypso = require("i18n-calypso");
+var _react = _interopRequireWildcard(require("react"));
+var _md = require("react-icons/md");
+var _Button = require("../Button");
+var Dropdown = _interopRequireWildcard(require("../Dropdown"));
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+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); }
+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; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+/** @jsxImportSource theme-ui */
+
+var FilterDropdownCheckItem = function FilterDropdownCheckItem(_ref) {
+  var checked = _ref.checked,
+    item = _ref.item,
+    onClick = _ref.onClick;
+  return (0, _jsxRuntime.jsxs)(Dropdown.CheckboxItem, {
+    checked: checked,
+    onClick: onClick,
+    children: [(0, _jsxRuntime.jsx)(Dropdown.ItemIndicator, {
+      children: (0, _jsxRuntime.jsx)(_md.MdCheck, {
+        size: 14,
+        sx: {
+          mr: 2
+        },
+        fill: "brand"
+      })
+    }), item.label, " ", item != null && item.size ? "(" + (item == null ? void 0 : item.size) + ")" : null]
+  });
+};
+var FilterDropdown = exports.FilterDropdown = function FilterDropdown(_ref2) {
+  var className = _ref2.className,
+    filters = _ref2.filters,
+    label = _ref2.label,
+    onSelect = _ref2.onSelect,
+    _ref2$defaultValue = _ref2.defaultValue,
+    defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue;
+  var translate = (0, _i18nCalypso.useTranslate)();
+  var filterKeys = Object.keys(filters);
+  var firstFilter = filterKeys[0];
+  var _useState = (0, _react.useState)(defaultValue || firstFilter),
+    filter = _useState[0],
+    setFilter = _useState[1];
+  return (0, _jsxRuntime.jsx)(Dropdown.Root, {
+    trigger: (0, _jsxRuntime.jsxs)(_Button.Button, {
+      className: (0, _classnames["default"])('vip-filter-dropdown-trigger', className),
+      variant: "secondary",
+      children: [(0, _jsxRuntime.jsxs)(_ScreenReaderText["default"], {
+        children: [translate('Filter:'), " "]
+      }), label, (0, _jsxRuntime.jsxs)("strong", {
+        sx: {
+          mx: 2
+        },
+        children: [" ", filters[filter].label, " "]
+      }), (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+        children: translate('checked')
+      }), (0, _jsxRuntime.jsx)(_md.MdKeyboardArrowDown, {})]
+    }),
+    children: filterKeys.map(function (key) {
+      return (0, _jsxRuntime.jsx)(FilterDropdownCheckItem, {
+        checked: filter === key,
+        onClick: function onClick() {
+          setFilter(key);
+          onSelect(filters[key], key);
+        },
+        item: filters[key]
+      }, key);
+    })
+  });
+};

package/build/system/FilterDropdown/FilterDropdown.stories.d.ts

@@ -0,0 +1,18 @@
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
+import { FilterDropdown } from './FilterDropdown';
+import type { StoryObj } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: ({ className, filters, label, onSelect, defaultValue, }: import("./FilterDropdown").FilterDropdownProps) => import("react").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+type Story = StoryObj<typeof FilterDropdown>;
+export declare const Default: Story;

package/build/system/FilterDropdown/FilterDropdown.stories.js

@@ -0,0 +1,46 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+var _FilterDropdown = require("./FilterDropdown");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+/** @jsxImportSource theme-ui */
+var _default = exports["default"] = {
+  title: 'FilterDropdown',
+  component: _FilterDropdown.FilterDropdown,
+  parameters: {
+    docs: {
+      description: {
+        component: "\n\nA Dropdown component that acts as a filter for a list of items.\n\n## Guidance\n\n### When to use the FilterDropdown component\n\n- When you want a Dropdown option that sticks with the selected value on the trigger button;\n\n### When to consider something else\n\n- When you want to display a list of options that does not require to stick with the selected value on the trigger button;\n\n## Component Properties\n"
+      }
+    }
+  }
+};
+var filterTypes = ['all', 'hasUpdate', 'isVulnerable'];
+var FILTER_OPTIONS = {
+  all: {
+    value: 'all',
+    label: 'All'
+  },
+  hasUpdate: {
+    value: 'hasUpdate',
+    label: 'Update Available'
+  },
+  isVulnerable: {
+    value: 'isVulnerable',
+    label: 'Known Vulnerabilities'
+  }
+};
+var Default = exports.Default = {
+  render: function render() {
+    return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: (0, _jsxRuntime.jsx)(_FilterDropdown.FilterDropdown, {
+        className: "vip-plugins-filter-dropdown",
+        label: "Filter:",
+        filters: FILTER_OPTIONS,
+        onSelect: function onSelect() {},
+        defaultValue: FILTER_OPTIONS.all.value
+      })
+    });
+  }
+};

package/build/system/FilterDropdown/FilterDropdown.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/system/FilterDropdown/FilterDropdown.test.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
+require("@testing-library/jest-dom");
+var _FilterDropdown = require("./FilterDropdown");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+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 getMenu() {
+  return _react.screen.getByRole('button', {
+    name: 'Filter: Auth Method All checked'
+  });
+}
+var props = {
+  filters: {
+    ALL_USERS: {
+      label: 'All',
+      authMethod: ''
+    },
+    WP_USERS: {
+      label: 'WP.com',
+      authMethod: 'wpcom'
+    },
+    GH_USERS: {
+      label: 'GitHub',
+      authMethod: 'github'
+    },
+    SSO_USERS: {
+      label: 'SSO',
+      authMethod: 'organization_sso'
+    },
+    SSO_OTHER_USERS: {
+      label: 'SSO (third-party)',
+      authMethod: 'other_sso'
+    },
+    BLOCKED_USERS: {
+      label: 'Blocked Auth Methods',
+      authMethod: 'restricted'
+    }
+  },
+  label: 'Auth Method',
+  onSelect: jest.fn()
+};
+describe('<FilterDropdown />', function () {
+  it('render with all props passed', function () {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_FilterDropdown.FilterDropdown, _extends({}, props)));
+    var menu = getMenu();
+    expect(menu).toBeInTheDocument();
+    expect(menu).toHaveTextContent(/Filter:/);
+    expect(menu).toHaveTextContent(/Auth Method/);
+  });
+});

package/build/system/Hr/Hr.d.ts

@@ -0,0 +1,7 @@
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
+import { ThemeUIStyleObject } from 'theme-ui';
+export type HrProps = {
+    sx?: ThemeUIStyleObject;
+};
+export declare const Hr: ({ sx, ...rest }: HrProps) => import("react").JSX.Element;

package/build/system/Hr/Hr.js

@@ -0,0 +1,22 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Hr = void 0;
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["sx"];
+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; }
+/** @jsxImportSource theme-ui */
+
+var Hr = exports.Hr = function Hr(_ref) {
+  var sx = _ref.sx,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)("hr", _extends({
+    sx: _extends({
+      my: 4,
+      border: 0,
+      height: '1px',
+      backgroundColor: 'borders.2'
+    }, sx)
+  }, rest));
+};

package/build/system/Hr/Hr.stories.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+/**
+ * External dependencies
+ */
+import { Hr } from './Hr';
+import type { StoryObj } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+declare const _default: {
+    title: string;
+    component: ({ sx, ...rest }: import("./Hr").HrProps) => import("react").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+type Story = StoryObj<typeof Hr>;
+export declare const Default: Story;

package/build/system/Hr/Hr.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+var _Hr = require("./Hr");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+/**
+ * External dependencies
+ */
+/**
+ * Internal dependencies
+ */
+var _default = exports["default"] = {
+  title: 'Hr',
+  component: _Hr.Hr,
+  parameters: {
+    docs: {
+      description: {
+        component: "\n\nHorizontal Line.\n\n## Guidance\n\n### When to use the link component\n\n- When you want to separate sections with a horizontal line.\n\n### When to consider something else\n\n- When you want to display a vertical line;\n\n## Component Properties\n"
+      }
+    }
+  }
+};
+var Default = exports.Default = {
+  render: function render() {
+    return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: ["Horizontal Line:", (0, _jsxRuntime.jsx)(_Hr.Hr, {})]
+    });
+  }
+};

package/build/system/Hr/Hr.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/system/Hr/Hr.test.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _themeUi = require("theme-ui");
+var _Hr = require("./Hr");
+var _theme = _interopRequireDefault(require("../theme"));
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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; }
+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); } }
+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); }); }; } /** @jsxImportSource theme-ui */ /* eslint-disable @typescript-eslint/ban-ts-comment */ // @ts-nocheck
+var renderWithTheme = function renderWithTheme(children) {
+  return (0, _react.render)((0, _jsxRuntime.jsx)(_themeUi.ThemeUIProvider, {
+    theme: _theme["default"],
+    children: children
+  }));
+};
+var renderComponent = function renderComponent() {
+  return renderWithTheme((0, _jsxRuntime.jsx)(_Hr.Hr, {}));
+};
+describe('<Hr />', function () {
+  it('renders the Hr component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _renderComponent, container;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _renderComponent = renderComponent(), container = _renderComponent.container;
+          _context.t0 = expect;
+          _context.next = 4;
+          return (0, _jestAxe.axe)(container);
+        case 4:
+          _context.t1 = _context.sent;
+          (0, _context.t0)(_context.t1).toHaveNoViolations();
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});

package/build/system/Link/Link.d.ts

@@ -1,7 +1,17 @@
 /// <reference types="react" />
 import { LinkProps as ThemeLinkProps, ThemeUIStyleObject } from 'theme-ui';
+export declare enum LinkVariant {
+    'primary' = 0,
+    'button-primary' = 1,
+    'button-secondary' = 2,
+    'button-tertiary' = 3,
+    'button-ghost' = 4,
+    'button-display' = 5,
+    'button-danger' = 6
+}
 export interface LinkProps extends ThemeLinkProps {
-    variant?: 'primary' | 'button-primary' | 'button-secondary' | 'button-tertiary' | 'button-ghost' | 'button-display' | 'button-danger';
+    variant?: keyof typeof LinkVariant;
 }
+export declare const linkUnderlineProperties: ThemeUIStyleObject;
 export declare const defaultLinkComponentStyle: ThemeUIStyleObject;
 export declare const Link: import("react").ForwardRefExoticComponent<Omit<LinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/build/system/Link/Link.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.defaultLinkComponentStyle = exports.Link = void 0;
+exports.linkUnderlineProperties = exports.defaultLinkComponentStyle = exports.LinkVariant = exports.Link = void 0;
 var _react = require("react");
 var _themeUi = require("theme-ui");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -12,6 +12,21 @@ var _excluded = ["variant", "sx"];
 // Temporary interface until we add types to the theme definition.
 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 LinkVariant = exports.LinkVariant = /*#__PURE__*/function (LinkVariant) {
+  LinkVariant[LinkVariant["primary"] = 0] = "primary";
+  LinkVariant[LinkVariant["button-primary"] = 1] = "button-primary";
+  LinkVariant[LinkVariant["button-secondary"] = 2] = "button-secondary";
+  LinkVariant[LinkVariant["button-tertiary"] = 3] = "button-tertiary";
+  LinkVariant[LinkVariant["button-ghost"] = 4] = "button-ghost";
+  LinkVariant[LinkVariant["button-display"] = 5] = "button-display";
+  LinkVariant[LinkVariant["button-danger"] = 6] = "button-danger";
+  return LinkVariant;
+}({});
+var linkUnderlineProperties = exports.linkUnderlineProperties = {
+  textDecorationLine: 'underline',
+  textDecorationThickness: '0.07rem',
+  textUnderlineOffset: '0.250rem'
+};
 var defaultLinkComponentStyle = exports.defaultLinkComponentStyle = {
   '&:focus-visible': function focusVisible(theme) {
     return theme.outline;

package/build/system/Link/Link.stories.d.ts

@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import { Link } from '..';
+import { Link, LinkVariant } from './Link';
 import type { LinkProps } from './Link';
 import type { StoryObj } from '@storybook/react';
 /**
@@ -11,6 +11,19 @@ import type { StoryObj } from '@storybook/react';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Omit<LinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    argTypes: {
+        variant: {
+            type: string;
+            options: (string | LinkVariant)[];
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
 };
 export default _default;
 type Story = StoryObj<typeof Link>;

package/build/system/Link/Link.stories.js

@@ -2,7 +2,7 @@
 
 exports.__esModule = true;
 exports["default"] = exports.Default = exports.ButtonVariants = void 0;
-var _ = require("..");
+var _Link = require("./Link");
 var _Flex = require("../Flex/Flex");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
@@ -13,7 +13,20 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  */
 var _default = exports["default"] = {
   title: 'Navigation/Link',
-  component: _.Link
+  component: _Link.Link,
+  argTypes: {
+    variant: {
+      type: 'select',
+      options: Object.values(_Link.LinkVariant)
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "\n\nLinks are navigational elements that direct visitors to other locations, either on the same page or to a different page or site. They can be inline or separate from the text flow. Since every link is a potential user interaction, too many links can be overwhelming.\n\n## Guidance\n\n### When to use the link component\n\n- When you want to direct users to another page or site.\n- When you want to direct users to another section of the same page (anchors).\n\n### When to consider something else\n\n- When you want to trigger an action (use a button instead).\n- When you want to display a message (use a notification instead).\n\n### Accessibility\n\n- Don\u2019t rely on only color to distinguish links\n- Don\u2019t block external links with disruptive notifications\n- Icons can be helpful. Consider adding an icon to signal specific actions (Download, Open in a new window, etc).\n- Don\u2019t use the same link text for different URLs on the same page. This can confuse users and make it difficult for them to understand where the link will take them.\n\n-------\n\nThis documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/link/). We use USWDS as trusted source of truth for accessibility and usability best practices.\n\n## Component Properties\n"
+      }
+    }
+  }
 };
 var Default = exports.Default = {
   args: {
@@ -28,7 +41,7 @@ var ButtonVariants = exports.ButtonVariants = function ButtonVariants() {
       gap: 2
     },
     children: buttonTypes.map(function (variant, index) {
-      return (0, _jsxRuntime.jsx)(_.Link, {
+      return (0, _jsxRuntime.jsx)(_Link.Link, {
         href: "#!",
         variant: variant,
         children: "Hello"

package/build/system/Nav/styles.js

@@ -121,6 +121,7 @@ var navMenuListStyles = exports.navMenuListStyles = function navMenuListStyles(o
     height: '100%',
     gap: 1,
     px: 0,
-    flexDirection: orientation === 'horizontal' ? 'row' : 'column'
+    flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+    flexWrap: orientation === 'horizontal' ? 'wrap' : undefined
   };
 };