@guardian/stand 0.0.8 → 0.0.10

package/dist/avatar.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var Avatar = require('./components/avatar/Avatar.cjs');
+var avatar = require('./styleD/build/typescript/component/avatar.cjs');
+
+
+
+exports.Avatar = Avatar.Avatar;
+exports.componentAvatar = avatar.componentAvatar;

package/dist/avatar.js

@@ -0,0 +1,2 @@
+export { Avatar } from './components/avatar/Avatar.js';
+export { componentAvatar } from './styleD/build/typescript/component/avatar.js';

package/dist/button.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var Button = require('./components/button/Button.cjs');
+var button = require('./styleD/build/typescript/component/button.cjs');
+
+
+
+exports.Button = Button.Button;
+exports.componentButton = button.componentButton;

package/dist/button.js

@@ -0,0 +1,2 @@
+export { Button } from './components/button/Button.js';
+export { componentButton } from './styleD/build/typescript/component/button.js';

package/dist/byline.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var Byline = require('./components/byline/Byline.cjs');
+var byline = require('./styleD/build/typescript/component/byline.cjs');
+
+
+
+exports.Byline = Byline.Byline;
+exports.componentByline = byline.componentByline;

package/dist/byline.js

@@ -0,0 +1,2 @@
+export { Byline } from './components/byline/Byline.js';
+export { componentByline } from './styleD/build/typescript/component/byline.js';

package/dist/components/TitleText.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+const TitleText = ({
+  headingLevel,
+  children,
+  className
+}) => {
+  switch (headingLevel) {
+    case 1:
+      return /* @__PURE__ */ jsxRuntime.jsx("h1", { className, children });
+    case 2:
+      return /* @__PURE__ */ jsxRuntime.jsx("h2", { className, children });
+    case 3:
+      return /* @__PURE__ */ jsxRuntime.jsx("h3", { className, children });
+    case 4:
+      return /* @__PURE__ */ jsxRuntime.jsx("h4", { className, children });
+    case 5:
+      return /* @__PURE__ */ jsxRuntime.jsx("h5", { className, children });
+    case 6:
+      return /* @__PURE__ */ jsxRuntime.jsx("h6", { className, children });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+  }
+};
+
+exports.TitleText = TitleText;

package/dist/components/TitleText.js

@@ -0,0 +1,22 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const TitleText = ({ headingLevel, children, className }) => {
+  switch (headingLevel) {
+    case 1:
+      return jsx("h1", { className, children });
+    case 2:
+      return jsx("h2", { className, children });
+    case 3:
+      return jsx("h3", { className, children });
+    case 4:
+      return jsx("h4", { className, children });
+    case 5:
+      return jsx("h5", { className, children });
+    case 6:
+      return jsx("h6", { className, children });
+    default:
+      return jsx("div", { className, children });
+  }
+};
+
+export { TitleText };

package/dist/components/avatar/Avatar.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('react');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var styles = require('./styles.cjs');
+var types = require('./types.cjs');
+
+const getColorFromString = (input) => {
+  const sum = input.split("").slice(0, 2).reduce((acc, char) => acc + (char.codePointAt(0) ?? 0), 0);
+  const index = sum % types.avatarColors.length;
+  return types.avatarColors[index];
+};
+function Avatar({
+  src,
+  initials,
+  alt,
+  size = "md",
+  color,
+  theme = {},
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultAvatarTheme, theme);
+  const [imageError, setImageError] = react.useState(false);
+  const handleImageError = () => {
+    setImageError(true);
+  };
+  const showImage = src && !imageError;
+  const displayInitials = initials?.slice(0, 2).toUpperCase() ?? "";
+  const avatarColor = color ?? getColorFromString(src ?? displayInitials);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      css: [
+        styles.avatarStyles(mergedTheme, { size, color: avatarColor }),
+        cssOverrides
+      ],
+      role: "img",
+      "aria-label": alt ?? `Avatar ${displayInitials ? `with initials ${displayInitials}` : ""}`,
+      title: alt ?? displayInitials,
+      ...props,
+      children: showImage ? /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src,
+          alt,
+          title: alt,
+          onError: handleImageError,
+          css: styles.avatarImageStyles
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: displayInitials })
+    }
+  );
+}
+
+exports.Avatar = Avatar;

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,27 @@
+import { jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { useState } from 'react';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { avatarStyles, avatarImageStyles, defaultAvatarTheme } from './styles.js';
+import { avatarColors } from './types.js';
+
+const getColorFromString = (input) => {
+  const sum = input.split("").slice(0, 2).reduce((acc, char) => acc + (char.codePointAt(0) ?? 0), 0);
+  const index = sum % avatarColors.length;
+  return avatarColors[index];
+};
+function Avatar({ src, initials, alt, size = "md", color, theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultAvatarTheme, theme);
+  const [imageError, setImageError] = useState(false);
+  const handleImageError = () => {
+    setImageError(true);
+  };
+  const showImage = src && !imageError;
+  const displayInitials = initials?.slice(0, 2).toUpperCase() ?? "";
+  const avatarColor = color ?? getColorFromString(src ?? displayInitials);
+  return jsx("div", { css: [
+    avatarStyles(mergedTheme, { size, color: avatarColor }),
+    cssOverrides
+  ], role: "img", "aria-label": alt ?? `Avatar ${displayInitials ? `with initials ${displayInitials}` : ""}`, title: alt ?? displayInitials, ...props, children: showImage ? jsx("img", { src, alt, title: alt, onError: handleImageError, css: avatarImageStyles }) : jsx(Fragment, { children: displayInitials }) });
+}
+
+export { Avatar };

package/dist/components/avatar/styles.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var react = require('@emotion/react');
+var avatar = require('../../styleD/build/typescript/component/avatar.cjs');
+var typography = require('../../styleD/utils/semantic/typography.cjs');
+
+const defaultAvatarTheme = avatar.componentAvatar;
+const avatarImageStyles = react.css`
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+`;
+const avatarStyles = (theme, { size, color }) => {
+  return react.css`
+		display: ${theme.shared.display};
+		align-items: ${theme.shared["align-items"]};
+		justify-content: ${theme.shared["justify-content"]};
+		overflow: ${theme.shared.overflow};
+		flex-shrink: ${theme.shared["flex-shrink"]};
+		border-radius: ${theme.shared["border-radius"]};
+		background-color: ${theme.shared.color[color].background};
+		width: ${theme[size].size};
+		height: ${theme[size].size};
+		border: ${theme.shared.color[color].border};
+		user-select: ${theme.shared["user-select"]};
+		color: ${theme.shared.color[color].text};
+		${typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
+	`;
+};
+
+exports.avatarImageStyles = avatarImageStyles;
+exports.avatarStyles = avatarStyles;
+exports.defaultAvatarTheme = defaultAvatarTheme;

package/dist/components/avatar/styles.js

@@ -0,0 +1,29 @@
+import { css } from '@emotion/react';
+import { componentAvatar } from '../../styleD/build/typescript/component/avatar.js';
+import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
+
+const defaultAvatarTheme = componentAvatar;
+const avatarImageStyles = css`
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+`;
+const avatarStyles = (theme, { size, color }) => {
+  return css`
+		display: ${theme.shared.display};
+		align-items: ${theme.shared["align-items"]};
+		justify-content: ${theme.shared["justify-content"]};
+		overflow: ${theme.shared.overflow};
+		flex-shrink: ${theme.shared["flex-shrink"]};
+		border-radius: ${theme.shared["border-radius"]};
+		background-color: ${theme.shared.color[color].background};
+		width: ${theme[size].size};
+		height: ${theme[size].size};
+		border: ${theme.shared.color[color].border};
+		user-select: ${theme.shared["user-select"]};
+		color: ${theme.shared.color[color].text};
+		${convertTypographyToEmotionStringStyle(theme[size].typography)}
+	`;
+};
+
+export { avatarImageStyles, avatarStyles, defaultAvatarTheme };

package/dist/components/avatar/types.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+const avatarColors = [
+  "blue",
+  "green",
+  "red",
+  "cyan",
+  "teal",
+  "cool-purple",
+  "warm-purple",
+  "magenta",
+  "orange",
+  "yellow"
+];
+
+exports.avatarColors = avatarColors;

package/dist/components/avatar/types.js

@@ -0,0 +1,14 @@
+const avatarColors = [
+  "blue",
+  "green",
+  "red",
+  "cyan",
+  "teal",
+  "cool-purple",
+  "warm-purple",
+  "magenta",
+  "orange",
+  "yellow"
+];
+
+export { avatarColors };

package/dist/components/button/Button.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var styles = require('./styles.cjs');
+
+function Button({
+  variant = "emphasised-primary",
+  size = "md",
+  theme = {},
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultButtonTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Button,
+    {
+      ...props,
+      css: [styles.buttonStyles(mergedTheme, { variant, size }), cssOverrides],
+      children: reactAriaComponents.composeRenderProps(props.children, (children) => (
+        // TODO: isPending (loading) state - see https://react-aria.adobe.com/Button
+        /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children })
+      ))
+    }
+  );
+}
+
+exports.Button = Button;

package/dist/components/button/Button.js

@@ -0,0 +1,14 @@
+import { jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { Button as Button$1, composeRenderProps } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { buttonStyles, defaultButtonTheme } from './styles.js';
+
+function Button({ variant = "emphasised-primary", size = "md", theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultButtonTheme, theme);
+  return jsx(Button$1, { ...props, css: [buttonStyles(mergedTheme, { variant, size }), cssOverrides], children: composeRenderProps(props.children, (children) => (
+    // TODO: isPending (loading) state - see https://react-aria.adobe.com/Button
+    jsx(Fragment, { children })
+  )) });
+}
+
+export { Button };

package/dist/components/button/styles.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var react = require('@emotion/react');
+var button = require('../../styleD/build/typescript/component/button.cjs');
+var typography = require('../../styleD/utils/semantic/typography.cjs');
+
+const defaultButtonTheme = button.componentButton;
+const buttonStyles = (theme, { size, variant }) => {
+  return react.css`
+		/* button/link button reset styles */
+		display: ${theme.shared["display"]};
+		-webkit-appearance: ${theme.shared["-webkit-appearance"]};
+		text-align: ${theme.shared["text-align"]};
+		box-shadow: ${theme.shared["box-shadow"]};
+		text-decoration: ${theme.shared["text-decoration"]};
+		/* button component styles */
+		cursor: ${theme.shared.cursor};
+		justify-content: ${theme.shared["justify-content"]};
+		align-items: ${theme.shared["align-items"]};
+		color: ${theme[variant].shared.color};
+		background: ${theme[variant].shared.backgroundColor};
+		height: ${theme[variant][size].height};
+		padding: ${theme[variant][size].padding.top}
+			${theme[variant][size].padding.right}
+			${theme[variant][size].padding.bottom}
+			${theme[variant][size].padding.left};
+		${typography.convertTypographyToEmotionStringStyle(
+    theme[variant][size].typography
+  )}
+		border: ${theme[variant].shared.border};
+		border-radius: ${theme[variant].shared.borderRadius};
+
+		&[data-hovered] {
+			background: ${theme[variant].shared[":hover"].backgroundColor};
+			border: ${theme[variant].shared[":hover"].border};
+		}
+
+		&[data-pressed] {
+			background: ${theme[variant].shared[":active"].backgroundColor};
+			border: ${theme[variant].shared[":active"].border};
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.shared[":focus-visible"].outline};
+			outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+		}
+
+		&[data-disabled] {
+			cursor: ${theme.shared[":disabled"].cursor};
+			color: ${theme[variant].shared[":disabled"].color};
+			background: ${theme[variant].shared[":disabled"].backgroundColor};
+			border: ${theme[variant].shared[":disabled"].border};
+		}
+	`;
+};
+
+exports.buttonStyles = buttonStyles;
+exports.defaultButtonTheme = defaultButtonTheme;

package/dist/components/button/styles.js

@@ -0,0 +1,53 @@
+import { css } from '@emotion/react';
+import { componentButton } from '../../styleD/build/typescript/component/button.js';
+import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
+
+const defaultButtonTheme = componentButton;
+const buttonStyles = (theme, { size, variant }) => {
+  return css`
+		/* button/link button reset styles */
+		display: ${theme.shared["display"]};
+		-webkit-appearance: ${theme.shared["-webkit-appearance"]};
+		text-align: ${theme.shared["text-align"]};
+		box-shadow: ${theme.shared["box-shadow"]};
+		text-decoration: ${theme.shared["text-decoration"]};
+		/* button component styles */
+		cursor: ${theme.shared.cursor};
+		justify-content: ${theme.shared["justify-content"]};
+		align-items: ${theme.shared["align-items"]};
+		color: ${theme[variant].shared.color};
+		background: ${theme[variant].shared.backgroundColor};
+		height: ${theme[variant][size].height};
+		padding: ${theme[variant][size].padding.top}
+			${theme[variant][size].padding.right}
+			${theme[variant][size].padding.bottom}
+			${theme[variant][size].padding.left};
+		${convertTypographyToEmotionStringStyle(theme[variant][size].typography)}
+		border: ${theme[variant].shared.border};
+		border-radius: ${theme[variant].shared.borderRadius};
+
+		&[data-hovered] {
+			background: ${theme[variant].shared[":hover"].backgroundColor};
+			border: ${theme[variant].shared[":hover"].border};
+		}
+
+		&[data-pressed] {
+			background: ${theme[variant].shared[":active"].backgroundColor};
+			border: ${theme[variant].shared[":active"].border};
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.shared[":focus-visible"].outline};
+			outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+		}
+
+		&[data-disabled] {
+			cursor: ${theme.shared[":disabled"].cursor};
+			color: ${theme[variant].shared[":disabled"].color};
+			background: ${theme[variant].shared[":disabled"].backgroundColor};
+			border: ${theme[variant].shared[":disabled"].border};
+		}
+	`;
+};
+
+export { buttonStyles, defaultButtonTheme };

package/dist/components/byline/styles.cjs

@@ -2,14 +2,14 @@
 
 var react = require('@emotion/react');
 var byline = require('../../styleD/build/typescript/component/byline.cjs');
-var util = require('../util.cjs');
+var mergeDeep = require('../../util/mergeDeep.cjs');
 
 const bylineContainerStyles = react.css`
 	position: relative;
 	width: 100%;
 `;
 const bylineEditorStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(byline.componentByline, partialTheme);
+  const theme = mergeDeep.mergeDeep(byline.componentByline, partialTheme);
   return react.css`
 		border-color: ${theme.borderColor};
 		border-style: ${theme.borderStyle};
@@ -205,7 +205,7 @@ const bylineEditorStyles = (partialTheme = {}) => {
 	`;
 };
 const dropdownContainerStyles = (showDropdown, partialTheme = {}) => {
-  const theme = util.mergeDeep(byline.componentByline["dropdown"], partialTheme);
+  const theme = mergeDeep.mergeDeep(byline.componentByline["dropdown"], partialTheme);
   return react.css`
 		position: absolute;
 		box-sizing: border-box;
@@ -226,7 +226,7 @@ const dropdownUlStyles = react.css`
 	list-style-type: none;
 `;
 const dropdownLiStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(byline.componentByline["dropdown"], partialTheme);
+  const theme = mergeDeep.mergeDeep(byline.componentByline["dropdown"], partialTheme);
   return react.css`
 		cursor: pointer;
 		padding: 5px;
@@ -237,7 +237,7 @@ const dropdownLiStyles = (partialTheme = {}) => {
 	`;
 };
 const selectedDropdownLiStyles = (partialTheme = {}) => {
-  const theme = util.mergeDeep(byline.componentByline["dropdown"], partialTheme);
+  const theme = mergeDeep.mergeDeep(byline.componentByline["dropdown"], partialTheme);
   return react.css`
 		background-color: ${theme.li.selectedBackgroundColor};
 		color: ${theme.li.selectedColor};

package/dist/components/byline/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { componentByline } from '../../styleD/build/typescript/component/byline.js';
-import { mergeDeep } from '../util.js';
+import { mergeDeep } from '../../util/mergeDeep.js';
 
 const bylineContainerStyles = css`
 	position: relative;

package/dist/components/icon/Icon.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var styles = require('./styles.cjs');
+
+function Icon({
+  children,
+  size = "md",
+  fill,
+  alt,
+  symbol,
+  theme = {},
+  cssOverrides,
+  className
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultIconTheme, theme);
+  if (symbol || typeof children === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: `material-symbols ${className ?? ""}`,
+        css: [
+          styles.iconStyles(mergedTheme, { size, fill, mode: "text" }),
+          cssOverrides
+        ],
+        ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true },
+        children: symbol ?? children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className,
+      css: [
+        styles.iconStyles(mergedTheme, { size, fill, mode: "svg" }),
+        cssOverrides
+      ],
+      ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true },
+      children
+    }
+  );
+}
+
+exports.Icon = Icon;

package/dist/components/icon/Icon.js

@@ -0,0 +1,19 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { iconStyles, defaultIconTheme } from './styles.js';
+
+function Icon({ children, size = "md", fill, alt, symbol, theme = {}, cssOverrides, className }) {
+  const mergedTheme = mergeDeep(defaultIconTheme, theme);
+  if (symbol || typeof children === "string") {
+    return jsx("span", { className: `material-symbols ${className ?? ""}`, css: [
+      iconStyles(mergedTheme, { size, fill, mode: "text" }),
+      cssOverrides
+    ], ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }, children: symbol ?? children });
+  }
+  return jsx("span", { className, css: [
+    iconStyles(mergedTheme, { size, fill, mode: "svg" }),
+    cssOverrides
+  ], ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }, children });
+}
+
+export { Icon };

package/dist/components/icon/styles.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var react = require('@emotion/react');
+var icon = require('../../styleD/build/typescript/component/icon.cjs');
+
+const defaultIconTheme = icon.componentIcon;
+const iconStyles = (theme, {
+  size,
+  fill,
+  mode
+}) => react.css`
+	display: ${theme.shared.display};
+	font-size: ${theme[size].size};
+	user-select: ${theme.shared["user-select"]};
+	${fill ? `color: ${fill};` : ""}
+
+	${mode === "svg" ? `
+		& > svg {
+			width: ${theme[size].size};
+			height: ${theme[size].size};
+            ${fill ? `fill: ${fill};` : ""}
+		}
+	` : ""}
+`;
+
+exports.defaultIconTheme = defaultIconTheme;
+exports.iconStyles = iconStyles;

package/dist/components/icon/styles.js

@@ -0,0 +1,20 @@
+import { css } from '@emotion/react';
+import { componentIcon } from '../../styleD/build/typescript/component/icon.js';
+
+const defaultIconTheme = componentIcon;
+const iconStyles = (theme, { size, fill, mode }) => css`
+	display: ${theme.shared.display};
+	font-size: ${theme[size].size};
+	user-select: ${theme.shared["user-select"]};
+	${fill ? `color: ${fill};` : ""}
+
+	${mode === "svg" ? `
+		& > svg {
+			width: ${theme[size].size};
+			height: ${theme[size].size};
+            ${fill ? `fill: ${fill};` : ""}
+		}
+	` : ""}
+`;
+
+export { defaultIconTheme, iconStyles };

package/dist/components/link-button/LinkButton.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var styles = require('./styles.cjs');
+
+function LinkButton({
+  variant = "emphasised-primary",
+  size = "md",
+  theme = {},
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultLinkButtonTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Link,
+    {
+      ...props,
+      css: [
+        styles.linkButtonStyles(mergedTheme, { variant, size }),
+        cssOverrides
+      ],
+      children: props.children
+    }
+  );
+}
+
+exports.LinkButton = LinkButton;

package/dist/components/link-button/LinkButton.js

@@ -0,0 +1,14 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Link } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { linkButtonStyles, defaultLinkButtonTheme } from './styles.js';
+
+function LinkButton({ variant = "emphasised-primary", size = "md", theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultLinkButtonTheme, theme);
+  return jsx(Link, { ...props, css: [
+    linkButtonStyles(mergedTheme, { variant, size }),
+    cssOverrides
+  ], children: props.children });
+}
+
+export { LinkButton };

package/dist/components/link-button/styles.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var styles = require('../button/styles.cjs');
+
+const defaultLinkButtonTheme = styles.defaultButtonTheme;
+const linkButtonStyles = styles.buttonStyles;
+
+exports.defaultLinkButtonTheme = defaultLinkButtonTheme;
+exports.linkButtonStyles = linkButtonStyles;