@guardian/stand 0.0.9 → 0.0.11

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/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,38 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Icon = require('../icon/Icon.cjs');
+var styles = require('./styles.cjs');
+
+function Button({
+  variant = "emphasised-primary",
+  size = "md",
+  theme = {},
+  cssOverrides,
+  icon,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultButtonTheme, theme);
+  const iconSize = size === "xs" ? "sm" : size;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Button,
+    {
+      ...props,
+      css: [
+        styles.buttonStyles(mergedTheme, { variant, size }, !!icon),
+        cssOverrides
+      ],
+      children: reactAriaComponents.composeRenderProps(props.children, (children) => (
+        // TODO: isPending (loading) state - see https://react-aria.adobe.com/Button
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, children: icon }),
+          children
+        ] })
+      ))
+    }
+  );
+}
+
+exports.Button = Button;

package/dist/components/button/Button.js

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

package/dist/components/button/styles.cjs

@@ -0,0 +1,68 @@
+'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 }, hasIcon = false, isIconButton = false) => {
+  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};
+
+		${hasIcon && react.css`
+			padding-left: ${theme[variant][size].padding.withIcon.iconLeft.left};
+			gap: ${theme[variant][size].icon.gap};
+		`}
+
+		${isIconButton && react.css`
+			width: ${theme[variant][size].iconButton.width};
+			padding: 0;
+		`}
+
+		&[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,63 @@
+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 }, hasIcon = false, isIconButton = false) => {
+  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};
+
+		${hasIcon && css`
+			padding-left: ${theme[variant][size].padding.withIcon.iconLeft.left};
+			gap: ${theme[variant][size].icon.gap};
+		`}
+
+		${isIconButton && css`
+			width: ${theme[variant][size].iconButton.width};
+			padding: 0;
+		`}
+
+		&[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/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/icon-button/IconButton.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Icon = require('../icon/Icon.cjs');
+var styles = require('./styles.cjs');
+
+function IconButton({
+  variant = "emphasised-primary",
+  size = "md",
+  symbol,
+  ariaLabel,
+  theme = {},
+  cssOverrides,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultIconButtonTheme, theme);
+  const buttonRef = react.useRef(null);
+  react.useEffect(() => {
+    if (buttonRef.current) {
+      buttonRef.current.title = ariaLabel;
+    }
+  }, [ariaLabel]);
+  const iconSize = size === "xs" ? "sm" : size;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Button,
+    {
+      ...props,
+      ref: buttonRef,
+      "aria-label": ariaLabel,
+      css: [
+        styles.iconButtonStyles(mergedTheme, { variant, size }, false, true),
+        cssOverrides
+      ],
+      children: reactAriaComponents.composeRenderProps(props.children, (children) => (
+        // TODO: isPending (loading) state - see https://react-aria.adobe.com/Button
+        /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, symbol, children })
+      ))
+    }
+  );
+}
+
+exports.IconButton = IconButton;

package/dist/components/icon-button/IconButton.js

@@ -0,0 +1,26 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { Button, composeRenderProps } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { Icon } from '../icon/Icon.js';
+import { iconButtonStyles, defaultIconButtonTheme } from './styles.js';
+
+function IconButton({ variant = "emphasised-primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultIconButtonTheme, theme);
+  const buttonRef = useRef(null);
+  useEffect(() => {
+    if (buttonRef.current) {
+      buttonRef.current.title = ariaLabel;
+    }
+  }, [ariaLabel]);
+  const iconSize = size === "xs" ? "sm" : size;
+  return jsx(Button, { ...props, ref: buttonRef, "aria-label": ariaLabel, css: [
+    iconButtonStyles(mergedTheme, { variant, size }, false, true),
+    cssOverrides
+  ], children: composeRenderProps(props.children, (children) => (
+    // TODO: isPending (loading) state - see https://react-aria.adobe.com/Button
+    jsx(Icon, { size: iconSize, symbol, children })
+  )) });
+}
+
+export { IconButton };

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

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

package/dist/components/icon-button/styles.js

@@ -0,0 +1,6 @@
+import { buttonStyles, defaultButtonTheme } from '../button/styles.js';
+
+const defaultIconButtonTheme = defaultButtonTheme;
+const iconButtonStyles = buttonStyles;
+
+export { defaultIconButtonTheme, iconButtonStyles };