@automattic/vip-design-system 2.4.3 → 2.4.5

package/build/system/Button/Button.js

@@ -52,6 +52,9 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
         cursor: 'not-allowed',
         pointerEvents: 'none'
       },
+      '&:hover, &:focus': {
+        textDecoration: 'none'
+      },
       flexGrow: Boolean(grow) === true ? '1' : undefined,
       width: Boolean(full) === true ? '100%' : undefined
     }, sx)

package/build/system/LinkExternal/LinkExternal.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type Props = {
+    children?: React.ReactNode;
+    screenReaderText?: string | number;
+    href: string;
+    showExternalIcon?: boolean;
+    defaultScreenReaderText?: boolean;
+    newTab?: boolean;
+};
+export declare const LinkExternal: React.FC<Props>;
+export default LinkExternal;

package/build/system/LinkExternal/LinkExternal.js

@@ -0,0 +1,48 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.LinkExternal = void 0;
+var _i18nCalypso = require("i18n-calypso");
+var _Link = require("../Link");
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["children", "screenReaderText", "href", "showExternalIcon", "newTab"];
+/**
+ * External dependencies
+ */
+/**
+ * Internal dependencies
+ */
+// Screen reader announcements
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var DEFAULT_EXTERNAL_LINK_TEXT = (0, _i18nCalypso.translate)(', external link'); // reads as: link, <link text>, external link
+var NEW_TAB_TEXT = (0, _i18nCalypso.translate)(', opens in a new tab'); // reads as: link, <link text>, external link, opens in a new tab
+
+var LinkExternal = exports.LinkExternal = function LinkExternal(_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    _ref$screenReaderText = _ref.screenReaderText,
+    screenReaderText = _ref$screenReaderText === void 0 ? '' : _ref$screenReaderText,
+    href = _ref.href,
+    _ref$showExternalIcon = _ref.showExternalIcon,
+    showExternalIcon = _ref$showExternalIcon === void 0 ? true : _ref$showExternalIcon,
+    _ref$newTab = _ref.newTab,
+    newTab = _ref$newTab === void 0 ? false : _ref$newTab,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return (0, _jsxRuntime.jsxs)(_Link.Link, _extends({
+    as: "a",
+    target: newTab ? '_blank' : '_self',
+    rel: newTab ? 'noopener noreferrer' : '',
+    href: href
+  }, rest, {
+    children: [children, (0, _jsxRuntime.jsxs)(_ScreenReaderText["default"], {
+      children: [screenReaderText, DEFAULT_EXTERNAL_LINK_TEXT, newTab ? NEW_TAB_TEXT : '']
+    }), showExternalIcon && (0, _jsxRuntime.jsx)("span", {
+      "aria-hidden": "true",
+      children: "\xA0\u2197"
+    })]
+  }));
+};
+var _default = exports["default"] = LinkExternal;

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import LinkExternal from './LinkExternal';
+import type { StoryObj } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: import("react").FC<{
+        children?: import("react").ReactNode;
+        screenReaderText?: string | number | undefined;
+        href: string;
+        showExternalIcon?: boolean | undefined;
+        defaultScreenReaderText?: boolean | undefined;
+        newTab?: boolean | undefined;
+    }>;
+};
+export default _default;
+type Story = StoryObj<typeof LinkExternal>;
+export declare const Default: Story;

package/build/system/LinkExternal/LinkExternal.stories.js

@@ -0,0 +1,16 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+var _LinkExternal = _interopRequireDefault(require("./LinkExternal"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _default = exports["default"] = {
+  title: 'Navigation/LinkExternal',
+  component: _LinkExternal["default"]
+};
+var Default = exports.Default = {
+  args: {
+    children: 'View on GitHub',
+    href: 'https://github.com/Automattic/vip-design-system'
+  }
+};

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

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

package/build/system/LinkExternal/LinkExternal.test.js

@@ -0,0 +1,49 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _LinkExternal = _interopRequireDefault(require("./LinkExternal"));
+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); } /**
+ * Internal dependencies
+ */
+var props = {
+  children: 'View on Github',
+  href: 'https://github.com/Automattic/vip-design-system'
+};
+describe('<LinkExternal />', function () {
+  it('should render correctly', function () {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_LinkExternal["default"], _extends({}, props, {
+      children: "View on Github"
+    })));
+    var link = _react.screen.getByRole('link');
+    expect(link).toHaveTextContent(/view on github/i);
+    expect(link).toHaveTextContent(/external link/i);
+    expect(link).toHaveAttribute('target', '_self');
+    expect(link).toHaveAttribute('rel', '');
+  });
+  it('should open in new tab when newTab is true', function () {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_LinkExternal["default"], _extends({}, props, {
+      newTab: true
+    })));
+    var link = _react.screen.getByRole('link');
+    expect(link).toHaveTextContent(/opens in a new tab/i);
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+  it('should contain additional screenreader text when added', function () {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_LinkExternal["default"], _extends({}, props, {
+      screenReaderText: "VIP Design System"
+    })));
+    expect(_react.screen.getByRole('link', {
+      name: /vip design system/i
+    })).toBeInTheDocument();
+  });
+  it('should hide icon when showExternalIcon is false', function () {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_LinkExternal["default"], _extends({}, props, {
+      showExternalIcon: false
+    })));
+    expect(_react.screen.queryByText('↗')).not.toBeInTheDocument();
+  });
+});

package/build/system/MobileMenu/MobileMenu.js

@@ -98,6 +98,7 @@ var MobileMenuTrigger = exports.MobileMenuTrigger = function MobileMenuTrigger(_
       sx: {
         display: display,
         alignItems: 'center',
+        flexShrink: 0,
         color: variant === 'inverse' ? 'button.primary.label.default' : 'button.tertiary.label.default',
         width: 38,
         height: 38,

package/build/system/Toolbar/Logo.js

@@ -25,7 +25,7 @@ var Logo = exports.Logo = function Logo(_ref) {
     sx: {
       width: 54,
       color: 'toolbar.brand',
-      mr: 5,
+      flexShrink: 0,
       display: 'inline-block'
     },
     href: href,

package/build/system/index.d.ts

@@ -38,6 +38,7 @@ import { TableRow } from './Table';
 import { TableCell } from './Table';
 import { Tooltip } from './Tooltip';
 import { Link } from './Link';
+import LinkExternal from './LinkExternal/LinkExternal';
 import { Radio } from './Form';
 import { RadioBoxGroup } from './Form';
 import { Textarea } from './Form';
@@ -56,4 +57,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, Flex, Notice, OptionRow, Heading, Input, Label, Spinner, Table, TableRow, TableCell, Tooltip, Link, 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, Flex, Notice, OptionRow, Heading, Input, Label, 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 };

package/build/system/index.js

@@ -36,6 +36,7 @@ import {
 import { Grid } from './Grid';
 import { Heading } from './Heading';
 import { Link } from './Link';
+import LinkExternal from './LinkExternal/LinkExternal';
 import { MobileMenuWrapper, MobileMenuTrigger, MobileMenu } from './MobileMenu/MobileMenu';
 import { Nav } from './Nav/Nav';
 import { NavItem } from './Nav/NavItem';
@@ -95,6 +96,7 @@ export {
 	TableCell,
 	Tooltip,
 	Link,
+	LinkExternal,
 	Radio,
 	RadioBoxGroup,
 	Textarea,

package/build/system/theme/breakpoints.js

@@ -4,7 +4,10 @@ exports.__esModule = true;
 exports.generateBreakpoints = void 0;
 var generateBreakpoints = exports.generateBreakpoints = function generateBreakpoints(breakpoints) {
   var values = Object.values(breakpoints);
-  return values.map(function (bp) {
+  return values.map(function (bp, index) {
+    if (index === 0) {
+      return "0px";
+    }
     return bp + "px";
   });
 };

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

@@ -72,9 +72,10 @@ declare namespace _default {
             fontWeight: string;
             boxShadow: string;
             borderRadius: number;
-            '&:hover, &:focus': {
+            '&:hover': {
                 backgroundColor: string;
                 color: string;
+                textDecoration: string;
             };
             verticalAlign: string;
             alignItems: string;
@@ -86,16 +87,13 @@ declare namespace _default {
                     fill: string;
                 };
             };
-            '&:hover': {
-                textDecoration: string;
-            };
         };
         export { primary_1 as primary };
         let secondary_1: {
             variant: string;
             color: string;
             bg: string;
-            '&:hover, &:focus': {
+            '&:hover': {
                 backgroundColor: string;
                 color: string;
             };
@@ -107,7 +105,7 @@ declare namespace _default {
             bg: string;
             border: string;
             borderColor: string;
-            '&:hover, &:focus': {
+            '&:hover': {
                 backgroundColor: string;
                 color: string;
                 border: string;
@@ -120,7 +118,7 @@ declare namespace _default {
             bg: string;
             border: string;
             borderColor: string;
-            '&:hover, &:focus': {
+            '&:hover': {
                 backgroundColor: string;
                 color: string;
                 border: string;
@@ -133,7 +131,7 @@ declare namespace _default {
             bg: string;
             border: string;
             borderColor: string;
-            '&:hover, &:focus': {
+            '&:hover': {
                 backgroundColor: string;
                 color: string;
                 border: string;
@@ -146,7 +144,7 @@ declare namespace _default {
             bg: string;
             border: string;
             borderColor: string;
-            '&:hover, &:focus': {
+            '&:hover': {
                 backgroundColor: string;
                 color: string;
                 border: string;
@@ -174,7 +172,7 @@ declare namespace _default {
             variant: string;
             color: string;
             padding: number;
-            '&:hover, &:focus': {
+            '&:hover': {
                 backgroundColor: string;
             };
         };
@@ -187,17 +185,14 @@ declare namespace _default {
             };
             '&:hover': {
                 color: string;
+                textDecorationLine: string;
+                textDecorationThickness: string;
             };
             '&:active': {
                 color: string;
             };
             textDecorationThickness: string;
             textUnderlineOffset: string;
-            '&:hover, &:focus': {
-                color: string;
-                textDecorationLine: string;
-                textDecorationThickness: string;
-            };
         };
         'button-primary': {
             variant: string;
@@ -313,37 +308,32 @@ declare namespace _default {
         };
     };
     export namespace styles {
-        namespace root {
-            export let fontFamily: string;
-            export let lineHeight: string;
-            export let fontWeight: string;
-            let color_1: string;
-            export { color_1 as color };
-            let backgroundColor_5: string;
-            export { backgroundColor_5 as backgroundColor };
-            export let fontSmoothing: string;
-            export let a: {
+        let root: {
+            fontFamily: string;
+            lineHeight: string;
+            fontWeight: string;
+            color: string;
+            backgroundColor: string;
+            '-webkit-font-smoothing': string;
+            '-moz-osx-font-smoothing': string;
+            a: {
                 '&:hover': {
                     textDecorationLine: string;
                     textDecorationThickness: string;
                     textUnderlineOffset: string;
                 };
             };
-            export namespace svg {
-                export let fill: string;
-                let display_1: string;
-                export { display_1 as display };
-            }
-            export namespace pre {
-                let fontFamily_1: string;
-                export { fontFamily_1 as fontFamily };
-            }
-            export namespace p_2 {
-                let color_2: string;
-                export { color_2 as color };
-            }
-            export { p_2 as p };
-        }
+            svg: {
+                fill: string;
+                display: string;
+            };
+            pre: {
+                fontFamily: string;
+            };
+            p: {
+                color: string;
+            };
+        };
     }
 }
 export default _default;

package/build/system/theme/index.js

@@ -283,9 +283,10 @@ export default {
 			fontWeight: 'medium',
 			boxShadow: 'none',
 			borderRadius: 1,
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.primary.background.hover',
 				color: 'button.primary.label.hover',
+				textDecoration: 'none',
 			},
 			verticalAlign: 'middle',
 			alignItems: 'center',
@@ -297,9 +298,6 @@ export default {
 					fill: 'inherit',
 				},
 			},
-			'&:hover': {
-				textDecoration: 'none',
-			},
 		},
 
 		secondary: {
@@ -307,7 +305,7 @@ export default {
 			color: 'button.secondary.label.default',
 			bg: 'button.secondary.background.default',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.secondary.background.hover',
 				color: 'button.secondary.label.hover',
 			},
@@ -320,7 +318,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'button.tertiary.border.default',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.tertiary.background.hover',
 				color: 'button.tertiary.label.hover',
 				border: '1px solid',
@@ -335,7 +333,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'transparent',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.display.background.hover',
 				color: 'button.display.label.hover',
 				border: '1px solid',
@@ -350,7 +348,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'transparent',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.ghost.background.hover',
 				color: 'button.ghost.label.hover',
 				border: '1px solid',
@@ -365,7 +363,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'transparent',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.danger.primary.background.hover',
 				color: 'button.danger.primary.label.hover',
 				border: '1px solid',
@@ -396,7 +394,7 @@ export default {
 			color: 'text',
 			padding: 1,
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'borders.2',
 			},
 		},
@@ -409,7 +407,9 @@ export default {
 				color: 'links.visited',
 			},
 			'&:hover': {
-				color: 'hover',
+				color: 'links.hover',
+				textDecorationLine: 'underline',
+				textDecorationThickness: '0.125rem',
 			},
 			'&:active': {
 				color: 'links.active',
@@ -417,12 +417,6 @@ export default {
 
 			textDecorationThickness: '0.125rem',
 			textUnderlineOffset: '0.250rem',
-
-			'&:hover, &:focus': {
-				color: 'links.hover',
-				textDecorationLine: 'underline',
-				textDecorationThickness: '0.125rem',
-			},
 		},
 		'button-primary': {
 			variant: 'buttons.primary',
@@ -532,7 +526,8 @@ export default {
 			fontWeight: 'body',
 			color: 'text',
 			backgroundColor: 'backgrounds.primary',
-			fontSmoothing: 'antialiased',
+			'-webkit-font-smoothing': 'antialiased',
+			'-moz-osx-font-smoothing': 'grayscale',
 			a: {
 				'&:hover': {
 					textDecorationLine: 'underline',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.4.3",
+  "version": "2.4.5",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",
@@ -43,6 +43,7 @@
     "accessible-autocomplete": "^2.0.4",
     "classnames": "^2.3.1",
     "framer-motion": "^3.9.1",
+    "i18n-calypso": "^7.0.0",
     "react-icons": "^4.7.0"
   },
   "peerDependencies": {

package/src/system/Button/Button.tsx

@@ -54,6 +54,9 @@ const Button = forwardRef< HTMLButtonElement, ButtonProps >(
 						cursor: 'not-allowed',
 						pointerEvents: 'none',
 					},
+					'&:hover, &:focus': {
+						textDecoration: 'none',
+					},
 					flexGrow: Boolean( grow ) === true ? '1' : undefined,
 					width: Boolean( full ) === true ? '100%' : undefined,
 					...sx,

package/src/system/LinkExternal/LinkExternal.stories.tsx

@@ -0,0 +1,17 @@
+import LinkExternal from './LinkExternal';
+
+import type { StoryObj } from '@storybook/react';
+
+export default {
+	title: 'Navigation/LinkExternal',
+	component: LinkExternal,
+};
+
+type Story = StoryObj< typeof LinkExternal >;
+
+export const Default: Story = {
+	args: {
+		children: 'View on GitHub',
+		href: 'https://github.com/Automattic/vip-design-system',
+	},
+};

package/src/system/LinkExternal/LinkExternal.test.tsx

@@ -0,0 +1,47 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import LinkExternal from './LinkExternal';
+
+const props = {
+	children: 'View on Github',
+	href: 'https://github.com/Automattic/vip-design-system',
+};
+
+describe( '<LinkExternal />', () => {
+	it( 'should render correctly', () => {
+		render( <LinkExternal { ...props }>View on Github</LinkExternal> );
+
+		const link = screen.getByRole( 'link' );
+
+		expect( link ).toHaveTextContent( /view on github/i );
+		expect( link ).toHaveTextContent( /external link/i );
+		expect( link ).toHaveAttribute( 'target', '_self' );
+		expect( link ).toHaveAttribute( 'rel', '' );
+	} );
+
+	it( 'should open in new tab when newTab is true', () => {
+		render( <LinkExternal { ...props } newTab /> );
+
+		const link = screen.getByRole( 'link' );
+
+		expect( link ).toHaveTextContent( /opens in a new tab/i );
+		expect( link ).toHaveAttribute( 'target', '_blank' );
+		expect( link ).toHaveAttribute( 'rel', 'noopener noreferrer' );
+	} );
+
+	it( 'should contain additional screenreader text when added', () => {
+		render( <LinkExternal { ...props } screenReaderText="VIP Design System" /> );
+
+		expect( screen.getByRole( 'link', { name: /vip design system/i } ) ).toBeInTheDocument();
+	} );
+
+	it( 'should hide icon when showExternalIcon is false', () => {
+		render( <LinkExternal { ...props } showExternalIcon={ false } /> );
+
+		expect( screen.queryByText( '↗' ) ).not.toBeInTheDocument();
+	} );
+} );

package/src/system/LinkExternal/LinkExternal.tsx

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { translate } from 'i18n-calypso';
+
+/**
+ * Internal dependencies
+ */
+import { Link } from '../Link';
+import ScreenReaderText from '../ScreenReaderText';
+
+// Screen reader announcements
+const DEFAULT_EXTERNAL_LINK_TEXT = translate( ', external link' ); // reads as: link, <link text>, external link
+const NEW_TAB_TEXT = translate( ', opens in a new tab' ); // reads as: link, <link text>, external link, opens in a new tab
+
+type Props = {
+	children?: React.ReactNode;
+	screenReaderText?: string | number;
+	href: string;
+	showExternalIcon?: boolean;
+	defaultScreenReaderText?: boolean;
+	newTab?: boolean;
+};
+
+export const LinkExternal: React.FC< Props > = ( {
+	children = null,
+	screenReaderText = '',
+	href,
+	showExternalIcon = true,
+	newTab = false,
+	...rest
+} ) => (
+	<Link
+		as="a"
+		target={ newTab ? '_blank' : '_self' }
+		rel={ newTab ? 'noopener noreferrer' : '' }
+		href={ href }
+		{ ...rest }
+	>
+		{ children }
+		<ScreenReaderText>
+			{ screenReaderText }
+			{ DEFAULT_EXTERNAL_LINK_TEXT }
+			{ newTab ? NEW_TAB_TEXT : '' }
+		</ScreenReaderText>
+		{ showExternalIcon && <span aria-hidden="true">&nbsp;↗</span> }
+	</Link>
+);
+
+export default LinkExternal;

package/src/system/MobileMenu/MobileMenu.tsx

@@ -108,6 +108,7 @@ export const MobileMenuTrigger = ( {
 			sx={ {
 				display,
 				alignItems: 'center',
+				flexShrink: 0,
 				color:
 					variant === 'inverse' ? 'button.primary.label.default' : 'button.tertiary.label.default',
 				width: 38,

package/src/system/Toolbar/Logo.tsx

@@ -23,7 +23,7 @@ export const Logo = ( { className, as = 'a', href }: LogoProps ) => (
 		sx={ {
 			width: 54,
 			color: 'toolbar.brand',
-			mr: 5,
+			flexShrink: 0,
 			display: 'inline-block',
 		} }
 		href={ href }

package/src/system/index.js

@@ -36,6 +36,7 @@ import {
 import { Grid } from './Grid';
 import { Heading } from './Heading';
 import { Link } from './Link';
+import LinkExternal from './LinkExternal/LinkExternal';
 import { MobileMenuWrapper, MobileMenuTrigger, MobileMenu } from './MobileMenu/MobileMenu';
 import { Nav } from './Nav/Nav';
 import { NavItem } from './Nav/NavItem';
@@ -95,6 +96,7 @@ export {
 	TableCell,
 	Tooltip,
 	Link,
+	LinkExternal,
 	Radio,
 	RadioBoxGroup,
 	Textarea,

package/src/system/theme/breakpoints.ts

@@ -5,5 +5,11 @@ type Breakpoints = {
 export const generateBreakpoints = ( breakpoints: Breakpoints ) => {
 	const values = Object.values( breakpoints );
 
-	return values.map( bp => `${ bp }px` );
+	return values.map( ( bp, index ) => {
+		if ( index === 0 ) {
+			return `0px`;
+		}
+
+		return `${ bp }px`;
+	} );
 };

package/src/system/theme/index.js

@@ -283,9 +283,10 @@ export default {
 			fontWeight: 'medium',
 			boxShadow: 'none',
 			borderRadius: 1,
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.primary.background.hover',
 				color: 'button.primary.label.hover',
+				textDecoration: 'none',
 			},
 			verticalAlign: 'middle',
 			alignItems: 'center',
@@ -297,9 +298,6 @@ export default {
 					fill: 'inherit',
 				},
 			},
-			'&:hover': {
-				textDecoration: 'none',
-			},
 		},
 
 		secondary: {
@@ -307,7 +305,7 @@ export default {
 			color: 'button.secondary.label.default',
 			bg: 'button.secondary.background.default',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.secondary.background.hover',
 				color: 'button.secondary.label.hover',
 			},
@@ -320,7 +318,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'button.tertiary.border.default',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.tertiary.background.hover',
 				color: 'button.tertiary.label.hover',
 				border: '1px solid',
@@ -335,7 +333,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'transparent',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.display.background.hover',
 				color: 'button.display.label.hover',
 				border: '1px solid',
@@ -350,7 +348,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'transparent',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.ghost.background.hover',
 				color: 'button.ghost.label.hover',
 				border: '1px solid',
@@ -365,7 +363,7 @@ export default {
 			border: '1px solid',
 			borderColor: 'transparent',
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'button.danger.primary.background.hover',
 				color: 'button.danger.primary.label.hover',
 				border: '1px solid',
@@ -396,7 +394,7 @@ export default {
 			color: 'text',
 			padding: 1,
 
-			'&:hover, &:focus': {
+			'&:hover': {
 				backgroundColor: 'borders.2',
 			},
 		},
@@ -409,7 +407,9 @@ export default {
 				color: 'links.visited',
 			},
 			'&:hover': {
-				color: 'hover',
+				color: 'links.hover',
+				textDecorationLine: 'underline',
+				textDecorationThickness: '0.125rem',
 			},
 			'&:active': {
 				color: 'links.active',
@@ -417,12 +417,6 @@ export default {
 
 			textDecorationThickness: '0.125rem',
 			textUnderlineOffset: '0.250rem',
-
-			'&:hover, &:focus': {
-				color: 'links.hover',
-				textDecorationLine: 'underline',
-				textDecorationThickness: '0.125rem',
-			},
 		},
 		'button-primary': {
 			variant: 'buttons.primary',
@@ -532,7 +526,8 @@ export default {
 			fontWeight: 'body',
 			color: 'text',
 			backgroundColor: 'backgrounds.primary',
-			fontSmoothing: 'antialiased',
+			'-webkit-font-smoothing': 'antialiased',
+			'-moz-osx-font-smoothing': 'grayscale',
 			a: {
 				'&:hover': {
 					textDecorationLine: 'underline',