@automattic/vip-design-system 2.10.0 → 2.10.2

package/build/system/Tooltip/Tooltip.stories.js

@@ -1,15 +1,13 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Container = exports.Basic = void 0;
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * Internal dependencies
  */
-var _default = exports["default"] = {
+import { Tooltip, Button, Heading, Text, Link, Box } from '..';
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { Fragment as _Fragment } from "theme-ui/jsx-runtime";
+export default {
   title: 'Tooltip',
-  component: _.Tooltip,
+  component: Tooltip,
   parameters: {
     docs: {
       description: {
@@ -18,17 +16,17 @@ var _default = exports["default"] = {
     }
   }
 };
-var Basic = exports.Basic = function Basic() {
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_.Heading, {
+export var Basic = function Basic() {
+  return _jsxs(_Fragment, {
+    children: [_jsx(Heading, {
       variant: "h2",
       children: "Basic Usage"
-    }), (0, _jsxRuntime.jsxs)(_.Text, {
-      children: ["Pass a trigger and title, the trigger component will be cloned and injected with a", ' ', (0, _jsxRuntime.jsx)("code", {
+    }), _jsxs(Text, {
+      children: ["Pass a trigger and title, the trigger component will be cloned and injected with a", ' ', _jsx("code", {
         children: "[vip-tooltip]"
       }), " HTML attribute."]
-    }), (0, _jsxRuntime.jsx)(_.Tooltip, {
-      trigger: (0, _jsxRuntime.jsx)(_.Button, {
+    }), _jsx(Tooltip, {
+      trigger: _jsx(Button, {
         sx: {
           mr: 3
         },
@@ -36,8 +34,8 @@ var Basic = exports.Basic = function Basic() {
       }),
       title: "On the top",
       position: "top"
-    }), (0, _jsxRuntime.jsx)(_.Tooltip, {
-      trigger: (0, _jsxRuntime.jsx)(_.Button, {
+    }), _jsx(Tooltip, {
+      trigger: _jsx(Button, {
         sx: {
           mr: 3
         },
@@ -45,8 +43,8 @@ var Basic = exports.Basic = function Basic() {
       }),
       title: "On the Bottom",
       position: "bottom"
-    }), (0, _jsxRuntime.jsx)(_.Tooltip, {
-      trigger: (0, _jsxRuntime.jsx)(_.Button, {
+    }), _jsx(Tooltip, {
+      trigger: _jsx(Button, {
         sx: {
           mr: 3
         },
@@ -54,8 +52,8 @@ var Basic = exports.Basic = function Basic() {
       }),
       title: "On the Left",
       position: "left"
-    }), (0, _jsxRuntime.jsx)(_.Tooltip, {
-      trigger: (0, _jsxRuntime.jsx)(_.Button, {
+    }), _jsx(Tooltip, {
+      trigger: _jsx(Button, {
         children: "Button with right tooltip"
       }),
       title: "On the Right",
@@ -63,30 +61,30 @@ var Basic = exports.Basic = function Basic() {
     })]
   });
 };
-var Container = exports.Container = function Container() {
-  return (0, _jsxRuntime.jsxs)("div", {
-    children: [(0, _jsxRuntime.jsx)(_.Heading, {
+export var Container = function Container() {
+  return _jsxs("div", {
+    children: [_jsx(Heading, {
       variant: "h2",
       children: "Container Usage"
-    }), (0, _jsxRuntime.jsxs)(_.Text, {
-      children: ["You can also wrap a component with the ", (0, _jsxRuntime.jsx)("code", {
+    }), _jsxs(Text, {
+      children: ["You can also wrap a component with the ", _jsx("code", {
         children: "Tooltip"
-      }), " component. To use tooltips you can simply pass ", (0, _jsxRuntime.jsx)("code", {
+      }), " component. To use tooltips you can simply pass ", _jsx("code", {
         children: "data-vip-tooltip"
       }), " as an HTML attribute to your component."]
-    }), (0, _jsxRuntime.jsx)(_.Box, {
+    }), _jsx(Box, {
       sx: {
         backgroundColor: 'red'
       },
-      children: (0, _jsxRuntime.jsxs)(_.Tooltip, {
-        children: [(0, _jsxRuntime.jsx)(_.Button, {
+      children: _jsxs(Tooltip, {
+        children: [_jsx(Button, {
           "data-vip-tooltip-position": "top",
           "data-vip-tooltip": "Test test",
           sx: {
             ml: 3
           },
           children: "This is another way"
-        }), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Link, {
+        }), _jsx("br", {}), _jsx("br", {}), _jsx("br", {}), _jsx(Link, {
           href: "http://google.com",
           "data-vip-tooltip-position": "right",
           "data-vip-tooltip": "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500",

package/build/system/Tooltip/index.js

@@ -1,5 +1,5 @@
-"use strict";
-
-exports.__esModule = true;
-var _Tooltip = require("./Tooltip");
-exports.Tooltip = _Tooltip.Tooltip;
+/**
+ * Internal dependencies
+ */
+import { Tooltip } from './Tooltip';
+export { Tooltip };

package/build/system/Wizard/Wizard.js

@@ -1,25 +1,18 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Wizard = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
-var _react = _interopRequireWildcard(require("react"));
-var _ = require("..");
-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 */
 
 /**
  * External dependencies
  */
+import classNames from 'classnames';
+import React, { useLayoutEffect, useState } from 'react';
 
 /**
  * Internal dependencies
  */
 
-var Wizard = exports.Wizard = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+import { Box, WizardStep } from '..';
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+export var Wizard = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef) {
   var steps = _ref.steps,
     activeStep = _ref.activeStep,
     _ref$completed = _ref.completed,
@@ -30,20 +23,20 @@ var Wizard = exports.Wizard = /*#__PURE__*/_react["default"].forwardRef(function
     className = _ref$className === void 0 ? null : _ref$className,
     _ref$titleAutofocus = _ref.titleAutofocus,
     titleAutofocus = _ref$titleAutofocus === void 0 ? false : _ref$titleAutofocus;
-  var _useState = (0, _react.useState)(false),
+  var _useState = useState(false),
     didMount = _useState[0],
     setDidMount = _useState[1];
-  var _useState2 = (0, _react.useState)(activeStep),
+  var _useState2 = useState(activeStep),
     initialStep = _useState2[0];
   // didMount helps us to track the initial render, so we can focus the title only subsequent renders
   // to avoid stealing the focus from the page we're in.
-  (0, _react.useLayoutEffect)(function () {
+  useLayoutEffect(function () {
     if (!didMount && activeStep !== initialStep) {
       setDidMount(true);
     }
   }, [initialStep, activeStep, didMount, setDidMount]);
-  return (0, _jsxRuntime.jsx)(_.Box, {
-    className: (0, _classnames["default"])('vip-wizard-component', className),
+  return _jsx(Box, {
+    className: classNames('vip-wizard-component', className),
     ref: forwardRef,
     children: steps.map(function (_ref2, index) {
       var title = _ref2.title,
@@ -52,7 +45,7 @@ var Wizard = exports.Wizard = /*#__PURE__*/_react["default"].forwardRef(function
         titleVariant = _ref2.titleVariant,
         summary = _ref2.summary,
         onChange = _ref2.onChange;
-      return (0, _jsxRuntime.jsx)(_.WizardStep, {
+      return _jsx(WizardStep, {
         active: index === activeStep,
         complete: completed.includes(index),
         skipped: skipped.includes(index),

package/build/system/Wizard/Wizard.stories.js

@@ -1,33 +1,32 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.WithTitleAutoFocus = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
+import React from 'react';
+
 /**
  * Internal dependencies
  */
-var _default = exports["default"] = {
+
+import { Wizard, Box, Label, Input, Button, Checkbox, Flex } from '..';
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
+export default {
   title: 'Navigation/Wizard',
-  component: _.Wizard
+  component: Wizard
 };
-var Default = exports.Default = function Default() {
+export var Default = function Default() {
   var steps = [{
     title: 'Choose Domain',
     titleVariant: 'h2',
     subTitle: 'You can bring a domain name you already own, or buy a new one.',
-    children: (0, _jsxRuntime.jsxs)(_.Box, {
-      children: [(0, _jsxRuntime.jsx)(_.Label, {
+    children: _jsxs(Box, {
+      children: [_jsx(Label, {
         children: "Domain"
-      }), (0, _jsxRuntime.jsx)(_.Input, {
+      }), _jsx(Input, {
         placeholder: "yourdomain.com"
-      }), (0, _jsxRuntime.jsx)(_.Button, {
+      }), _jsx(Button, {
         sx: {
           mt: 3
         },
@@ -44,10 +43,10 @@ var Default = exports.Default = function Default() {
     title: 'Verify Domain',
     titleVariant: 'h2'
   }];
-  return (0, _jsxRuntime.jsx)(_react["default"].Fragment, {
-    children: (0, _jsxRuntime.jsx)(_.Box, {
+  return _jsx(React.Fragment, {
+    children: _jsx(Box, {
       mt: 4,
-      children: (0, _jsxRuntime.jsx)(_.Wizard, {
+      children: _jsx(Wizard, {
         activeStep: 0,
         steps: steps,
         completed: [1],
@@ -56,11 +55,11 @@ var Default = exports.Default = function Default() {
     })
   });
 };
-var WithTitleAutoFocus = exports.WithTitleAutoFocus = function WithTitleAutoFocus() {
-  var _React$useState = _react["default"].useState(0),
+export var WithTitleAutoFocus = function WithTitleAutoFocus() {
+  var _React$useState = React.useState(0),
     activeStep = _React$useState[0],
     setActiveStep = _React$useState[1];
-  var _React$useState2 = _react["default"].useState(true),
+  var _React$useState2 = React.useState(true),
     autoFocus = _React$useState2[0],
     setAutoFocus = _React$useState2[1];
   var steps = [{
@@ -73,12 +72,12 @@ var WithTitleAutoFocus = exports.WithTitleAutoFocus = function WithTitleAutoFocu
     onChange: function onChange() {
       return setActiveStep(0);
     },
-    children: (0, _jsxRuntime.jsxs)(_.Box, {
-      children: [(0, _jsxRuntime.jsx)(_.Label, {
+    children: _jsxs(Box, {
+      children: [_jsx(Label, {
         children: "Domain"
-      }), (0, _jsxRuntime.jsx)(_.Input, {
+      }), _jsx(Input, {
         placeholder: "yourdomain.com"
-      }), (0, _jsxRuntime.jsx)(_.Button, {
+      }), _jsx(Button, {
         sx: {
           mt: 3
         },
@@ -94,10 +93,10 @@ var WithTitleAutoFocus = exports.WithTitleAutoFocus = function WithTitleAutoFocu
     onChange: function onChange() {
       return setActiveStep(1);
     },
-    children: (0, _jsxRuntime.jsxs)(_.Box, {
-      children: [(0, _jsxRuntime.jsx)(_.Label, {
+    children: _jsxs(Box, {
+      children: [_jsx(Label, {
         children: "DNS"
-      }), (0, _jsxRuntime.jsx)(_.Button, {
+      }), _jsx(Button, {
         sx: {
           mt: 3
         },
@@ -117,10 +116,10 @@ var WithTitleAutoFocus = exports.WithTitleAutoFocus = function WithTitleAutoFocu
     onChange: function onChange() {
       return setActiveStep(2);
     },
-    children: (0, _jsxRuntime.jsxs)(_.Box, {
-      children: [(0, _jsxRuntime.jsx)(_.Label, {
+    children: _jsxs(Box, {
+      children: [_jsx(Label, {
         children: "Certificate validation"
-      }), (0, _jsxRuntime.jsx)(_.Button, {
+      }), _jsx(Button, {
         sx: {
           mt: 3
         },
@@ -128,10 +127,10 @@ var WithTitleAutoFocus = exports.WithTitleAutoFocus = function WithTitleAutoFocu
       })]
     })
   }];
-  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_.Box, {
+  return _jsxs(React.Fragment, {
+    children: [_jsx(Box, {
       mt: 4,
-      children: (0, _jsxRuntime.jsx)(_.Wizard, {
+      children: _jsx(Wizard, {
         completed: [0, 1],
         skipped: [2],
         activeStep: activeStep,
@@ -139,20 +138,20 @@ var WithTitleAutoFocus = exports.WithTitleAutoFocus = function WithTitleAutoFocu
         titleAutofocus: autoFocus,
         className: "vip-wizard-xyz"
       })
-    }), (0, _jsxRuntime.jsx)(_.Box, {
+    }), _jsx(Box, {
       mt: 4,
-      children: (0, _jsxRuntime.jsxs)(_.Flex, {
+      children: _jsxs(Flex, {
         sx: {
           alignItems: 'center'
         },
-        children: [(0, _jsxRuntime.jsx)(_.Checkbox, {
+        children: [_jsx(Checkbox, {
           id: "wizard-autofocus",
           checked: autoFocus,
           "aria-labelledby": "label-check1",
           onCheckedChange: function onCheckedChange(e) {
             setAutoFocus(e === true);
           }
-        }), (0, _jsxRuntime.jsx)(_.Label, {
+        }), _jsx(Label, {
           sx: {
             m: 0,
             ml: 2

package/build/system/Wizard/WizardStep.js

@@ -1,25 +1,19 @@
-"use strict";
-
-exports.__esModule = true;
-exports.WizardStep = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _bs = require("react-icons/bs");
-var _ = require("..");
-var _ScreenReaderText = 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; }
 /** @jsxImportSource theme-ui */
 
 /**
  * External dependencies
  */
+import React, { useLayoutEffect } from 'react';
+import { BsCircleFill, BsFillCheckCircleFill } from 'react-icons/bs';
 
 /**
  * Internal dependencies
  */
-
-var WizardStep = exports.WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+import { Card, Heading, Text, Flex, Table, TableRow, TableCell, Button } from '..';
+import { ScreenReaderText } from '../ScreenReaderText';
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
+export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef) {
   var title = _ref.title,
     subTitle = _ref.subTitle,
     _ref$skipped = _ref.skipped,
@@ -35,7 +29,7 @@ var WizardStep = exports.WizardStep = /*#__PURE__*/_react["default"].forwardRef(
     titleVariant = _ref$titleVariant === void 0 ? 'h3' : _ref$titleVariant,
     summary = _ref.summary,
     onChange = _ref.onChange;
-  var titleRef = _react["default"].useRef(null);
+  var titleRef = React.useRef(null);
   var status = 'inactive';
   var statusText = 'Step not completed';
   if (active) {
@@ -60,12 +54,12 @@ var WizardStep = exports.WizardStep = /*#__PURE__*/_react["default"].forwardRef(
     color: statusIconColor
   };
   var headingColor = "wizard.step.heading." + status;
-  (0, _react.useLayoutEffect)(function () {
+  useLayoutEffect(function () {
     if (active && titleRef != null && titleRef.current && shouldFocusTitle) {
       titleRef.current.focus();
     }
   }, [active, shouldFocusTitle]);
-  return (0, _jsxRuntime.jsxs)(_.Card, {
+  return _jsxs(Card, {
     as: "section",
     sx: {
       boxShadow: active ? 'low' : 'none',
@@ -85,12 +79,12 @@ var WizardStep = exports.WizardStep = /*#__PURE__*/_react["default"].forwardRef(
     "data-active": active || undefined,
     className: "wizard-step-" + status,
     ref: forwardRef,
-    children: [(0, _jsxRuntime.jsxs)(_.Flex, {
+    children: [_jsxs(Flex, {
       sx: {
         alignItems: 'flex-end',
         mb: 2
       },
-      children: [(0, _jsxRuntime.jsxs)(_.Heading, {
+      children: [_jsxs(Heading, {
         variant: titleVariant,
         sx: {
           mb: 1,
@@ -102,25 +96,25 @@ var WizardStep = exports.WizardStep = /*#__PURE__*/_react["default"].forwardRef(
         ref: titleRef,
         tabIndex: shouldFocusTitle ? -1 : undefined,
         "aria-current": active ? 'step' : undefined,
-        children: [(0, _jsxRuntime.jsx)(_.Text, {
+        children: [_jsx(Text, {
           sx: {
             color: 'wizard.step.number.color'
           },
           "aria-hidden": "true",
           children: stepText
-        }), (0, _jsxRuntime.jsxs)(_.Flex, {
+        }), _jsxs(Flex, {
           as: "span",
           sx: {
             mt: 3,
             alignItems: 'center'
           },
           "aria-hidden": "true",
-          children: [complete ? (0, _jsxRuntime.jsx)(_bs.BsFillCheckCircleFill, {
+          children: [complete ? _jsx(BsFillCheckCircleFill, {
             sx: statusIconStyles
-          }) : (0, _jsxRuntime.jsx)(_bs.BsCircleFill, {
+          }) : _jsx(BsCircleFill, {
             sx: statusIconStyles
           }), title]
-        }), (0, _jsxRuntime.jsx)(_ScreenReaderText.ScreenReaderText, {
+        }), _jsx(ScreenReaderText, {
           children:
           /**
            * we are adding the composed title here so that it's announced correctly by the voiceover
@@ -128,18 +122,18 @@ var WizardStep = exports.WizardStep = /*#__PURE__*/_react["default"].forwardRef(
            **/
           stepText + ": " + (title == null ? void 0 : title.toString()) + ". " + statusText
         })]
-      }), !active && (complete || skipped) && onChange && (0, _jsxRuntime.jsxs)(_.Button, {
+      }), !active && (complete || skipped) && onChange && _jsxs(Button, {
         variant: "text",
         onClick: onChange,
         sx: {
           height: 'auto',
           alignSelf: 'flex-end'
         },
-        children: ["Change ", (0, _jsxRuntime.jsx)(_ScreenReaderText.ScreenReaderText, {
+        children: ["Change ", _jsx(ScreenReaderText, {
           children: "the " + (title == null ? void 0 : title.toString()) + " step"
         })]
       })]
-    }), !active && (complete || skipped) && summary && summary.length > 0 && (0, _jsxRuntime.jsx)(_.Table, {
+    }), !active && (complete || skipped) && summary && summary.length > 0 && _jsx(Table, {
       caption: "Summary of " + (title == null ? void 0 : title.toString()),
       sx: {
         width: 'auto',
@@ -155,10 +149,10 @@ var WizardStep = exports.WizardStep = /*#__PURE__*/_react["default"].forwardRef(
           }
         }
       },
-      children: (0, _jsxRuntime.jsx)("tbody", {
+      children: _jsx("tbody", {
         children: summary.map(function (item, index) {
-          return (0, _jsxRuntime.jsxs)(_.TableRow, {
-            children: [(0, _jsxRuntime.jsxs)(_.TableCell, {
+          return _jsxs(TableRow, {
+            children: [_jsxs(TableCell, {
               as: "th",
               scope: "row",
               sx: {
@@ -167,18 +161,18 @@ var WizardStep = exports.WizardStep = /*#__PURE__*/_react["default"].forwardRef(
                 pr: 1
               },
               children: [item.label, item.value ? ':' : '']
-            }), (0, _jsxRuntime.jsx)(_.TableCell, {
+            }), _jsx(TableCell, {
               sx: {
                 color: 'text'
               },
-              children: (0, _jsxRuntime.jsx)("strong", {
+              children: _jsx("strong", {
                 children: item.value
               })
             })]
           }, "summary_tb_" + index);
         })
       })
-    }), subTitle && active && (0, _jsxRuntime.jsx)(_.Text, {
+    }), subTitle && active && _jsx(Text, {
       sx: {
         mb: 3,
         mt: 2

package/build/system/Wizard/index.js

@@ -1,7 +1,6 @@
-"use strict";
-
-exports.__esModule = true;
-var _Wizard = require("./Wizard");
-exports.Wizard = _Wizard.Wizard;
-var _WizardStep = require("./WizardStep");
-exports.WizardStep = _WizardStep.WizardStep;
+/**
+ * Internal dependencies
+ */
+import { Wizard } from './Wizard';
+import { WizardStep } from './WizardStep';
+export { Wizard, WizardStep };

package/build/system/assets/a8cLogo.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const a8cLogo: import("react").JSX.Element;

package/build/system/assets/a8cLogo.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { translate } from 'i18n-calypso';
+
+/**
+ * Internal dependencies
+ */
+import { LinkExternal } from '../LinkExternal/LinkExternal';
+import { Text } from '../Text';
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
+export var a8cLogo = _jsxs(Text, {
+  as: "span",
+  sx: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 2,
+    mb: 0
+  },
+  children: [translate('An'), _jsx(LinkExternal, {
+    href: "https://automattic.com",
+    showExternalIcon: false,
+    screenReaderText: translate('Automattic'),
+    children: _jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 200 15.4",
+      style: {
+        minWidth: 100
+      },
+      children: [_jsx("path", {
+        d: "M72.5 15.4c-5.1 0-8.4-3.7-8.4-7.5v-.4c0-3.9 3.3-7.5 8.4-7.5 5.1 0 8.4 3.6 8.4 7.5V8c0 3.8-3.3 7.4-8.4 7.4zm5.7-7.9c0-2.8-2-5.3-5.7-5.3s-5.7 2.5-5.7 5.3v.3c0 2.8 2 5.3 5.7 5.3s5.7-2.5 5.7-5.3v-.3z",
+        fill: "#3298CB"
+      }), _jsx("path", {
+        d: "M15 14.9l-1.9-3.6H4.7l-1.8 3.6H0L7.8.5H10l7.9 14.4H15zM8.8 3.3l-3.1 6h6.4l-3.3-6zm21.4 12.1c-5.2 0-7.6-2.8-7.6-6.5V.5h2.7V9c0 2.7 1.7 4.2 5.1 4.2 3.4 0 4.8-1.6 4.8-4.2V.5h2.7v8.4c0 3.6-2.3 6.5-7.7 6.5zM52.9 2.8v12.1h-2.7V2.8h-6.3V.5h15.3v2.2h-6.3zM105 14.9V3.5l-.7 1.3-6 10.1H97L91 4.8l-.7-1.3v11.4h-2.6V.5h3.7l5.7 9.9.7 1.2.7-1.2 5.6-9.9h3.7v14.4H105zm23.1 0l-1.9-3.6h-8.4l-1.8 3.6h-3L120.8.5h2.2l7.9 14.4h-2.8zm-6.2-11.6l-3.1 6h6.4l-3.3-6zm19.9-.5v12.1h-2.7V2.8h-6.3V.5h15.3v2.2h-6.3zm19.8 0v12.1h-2.7V2.8h-6.3V.5h15.3v2.2h-6.3zm12.9 12.1v-13c1.1 0 1.5-.6 1.5-1.4h1.1v14.4h-2.6zm23.8-10.3c-1.3-1.2-3.2-2.3-5.8-2.3-3.8 0-6 2.6-6 5.4V8c0 2.7 2.2 5.3 6.2 5.3 2.4 0 4.4-1.1 5.6-2.3l1.6 1.7c-1.6 1.6-4.3 2.9-7.4 2.9-5.4 0-8.7-3.5-8.7-7.4v-.6c0-3.9 3.6-7.6 8.9-7.6 3 0 5.8 1.3 7.3 2.9l-1.7 1.7zM74.3 5c.5.3.6 1 .3 1.5l-2.5 3.8c-.3.5-1 .6-1.5.3s-.6-1-.3-1.5l2.5-3.8c.4-.5 1-.6 1.5-.3z"
+      })]
+    })
+  }), translate('Creation')]
+});

package/build/system/index.d.ts

@@ -44,6 +44,7 @@ import { Link } from './Link';
 import LinkExternal from './LinkExternal/LinkExternal';
 import { Radio } from './Form';
 import { RadioBoxGroup } from './Form';
+import { RadioGroupChip } from './Form';
 import { Textarea } from './Form';
 import { Progress } from './Progress';
 import { Text } from './Text';
@@ -60,4 +61,4 @@ import { Validation } from './Form';
 import { Wizard } from './Wizard';
 import { WizardStep } from './Wizard';
 import theme from './theme';
-export { Accordion, Avatar, Badge, Box, Breadcrumbs, Button, ButtonSubmit, ButtonVariant, Card, Checkbox, Code, Dialog, NewDialog, Form, Drawer, Dropdown, DialogButton, DialogMenu, DialogMenuItem, DialogDivider, DialogContent, DialogTrigger, ConfirmationDialog, MobileMenu, MobileMenuTrigger, MobileMenuWrapper, NewConfirmationDialog, Grid, FilterDropdown, Flex, Notice, OptionRow, Heading, Hr, Input, Label, ScreenReaderText, Spinner, Table, TableRow, TableCell, Tooltip, Link, LinkExternal, Radio, RadioBoxGroup, Textarea, Progress, Text, Tabs, Nav, NavItem, TabsTrigger, TabsContent, TabsList, Toggle, ToggleRow, Toolbar, Validation, Wizard, WizardStep, theme };
+export { Accordion, Avatar, Badge, Box, Breadcrumbs, Button, ButtonSubmit, ButtonVariant, Card, Checkbox, Code, Dialog, NewDialog, Form, Drawer, Dropdown, DialogButton, DialogMenu, DialogMenuItem, DialogDivider, DialogContent, DialogTrigger, ConfirmationDialog, MobileMenu, MobileMenuTrigger, MobileMenuWrapper, NewConfirmationDialog, Grid, FilterDropdown, Flex, Notice, OptionRow, Heading, Hr, Input, Label, ScreenReaderText, Spinner, Table, TableRow, TableCell, Tooltip, Link, LinkExternal, Radio, RadioBoxGroup, RadioGroupChip, Textarea, Progress, Text, Tabs, Nav, NavItem, TabsTrigger, TabsContent, TabsList, Toggle, ToggleRow, Toolbar, Validation, Wizard, WizardStep, theme };

package/build/system/index.js

@@ -31,6 +31,7 @@ import {
 	Validation,
 	Radio,
 	RadioBoxGroup,
+	RadioGroupChip,
 	Textarea,
 	Checkbox,
 } from './Form';
@@ -105,6 +106,7 @@ export {
 	LinkExternal,
 	Radio,
 	RadioBoxGroup,
+	RadioGroupChip,
 	Textarea,
 	Progress,
 	Text,

package/build/system/theme/breakpoints.js

@@ -1,8 +1,4 @@
-"use strict";
-
-exports.__esModule = true;
-exports.generateBreakpoints = void 0;
-var generateBreakpoints = exports.generateBreakpoints = function generateBreakpoints(breakpoints) {
+export var generateBreakpoints = function generateBreakpoints(breakpoints) {
   var values = Object.values(breakpoints);
   return values.map(function (bp, index) {
     if (index === 0) {

package/build/system/utils/stories/CustomLink.js

@@ -1,22 +1,16 @@
-"use strict";
-
-exports.__esModule = true;
-exports.CustomLinkComponentized = exports.CustomLink = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Link = require("../../Link/Link");
-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 _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); }
-var CustomLink = exports.CustomLink = /*#__PURE__*/(0, _react.forwardRef)(
+import React, { forwardRef } from 'react';
+import { Link } from '../../Link/Link';
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+export var CustomLink = /*#__PURE__*/forwardRef(
 // eslint-disable-next-line jsx-a11y/anchor-has-content
 function (props, ref) {
-  return (0, _jsxRuntime.jsx)("a", _extends({}, props, {
+  return _jsx("a", _extends({}, props, {
     ref: ref
   }));
 });
-var CustomLinkComponentized = exports.CustomLinkComponentized = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return (0, _jsxRuntime.jsx)(_Link.Link, _extends({}, props, {
+export var CustomLinkComponentized = /*#__PURE__*/forwardRef(function (props, ref) {
+  return _jsx(Link, _extends({}, props, {
     ref: ref
   }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.10.0",
+  "version": "2.10.2",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",