@guardian/stand 0.0.38 → 0.0.39

package/dist/components/{icon-link-button → IconLinkButton}/IconLinkButton.js

@@ -2,7 +2,7 @@ import { jsx } from '@emotion/react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import { Link, composeRenderProps } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { Icon } from '../icon/Icon.js';
+import { Icon } from '../Icon/Icon.js';
 import { defaultIconLinkButtonTheme, iconLinkButtonStyles } from './styles.js';
 
 function IconLinkButton({ variant = "primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {

package/dist/components/{icon-link-button → IconLinkButton}/styles.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var styles = require('../button/styles.cjs');
+var styles = require('../Button/styles.cjs');
 
 const defaultIconLinkButtonTheme = styles.defaultButtonTheme;
 const iconLinkButtonStyles = styles.buttonStyles;

package/dist/components/{icon-link-button → IconLinkButton}/styles.js

@@ -1,4 +1,4 @@
-import { defaultButtonTheme, buttonStyles } from '../button/styles.js';
+import { defaultButtonTheme, buttonStyles } from '../Button/styles.js';
 
 const defaultIconLinkButtonTheme = defaultButtonTheme;
 const iconLinkButtonStyles = buttonStyles;

package/dist/components/{inline-message → InlineMessage}/InlineMessage.cjs

@@ -3,8 +3,8 @@
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 var mergeDeep = require('../../util/mergeDeep.cjs');
-var Icon = require('../icon/Icon.cjs');
-var Typography = require('../typography/Typography.cjs');
+var Icon = require('../Icon/Icon.cjs');
+var Typography = require('../Typography/Typography.cjs');
 var styles = require('./styles.cjs');
 
 function InlineMessage({
@@ -51,7 +51,7 @@ function InlineMessage({
         /* @__PURE__ */ jsxRuntime.jsx(
           Typography.Typography,
           {
-            variant: "help-text-form-md",
+            variant: "helpTextFormMd",
             theme: { color: mergedTheme[level].color },
             children
           }

package/dist/components/{inline-message → InlineMessage}/InlineMessage.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import { useMemo } from 'react';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { Icon } from '../icon/Icon.js';
-import { Typography } from '../typography/Typography.js';
+import { Icon } from '../Icon/Icon.js';
+import { Typography } from '../Typography/Typography.js';
 import { defaultInlineMessageTheme, inlineMessageIconStyles, inlineMessageStyles } from './styles.js';
 
 function InlineMessage({ children, level, hideIcon = false, icon, theme = {}, cssOverrides, className, ...props }) {
@@ -21,7 +21,7 @@ function InlineMessage({ children, level, hideIcon = false, icon, theme = {}, cs
         return "info";
     }
   }, [icon, level]);
-  return jsxs("div", { css: [inlineMessageStyles(mergedTheme, { level }), cssOverrides], className, ...props, children: [!hideIcon && jsx(Icon, { fill: mergedTheme[level].color, cssOverrides: inlineMessageIconStyles(mergedTheme), size: "md", children: determinedIcon }), jsx(Typography, { variant: "help-text-form-md", theme: { color: mergedTheme[level].color }, children })] });
+  return jsxs("div", { css: [inlineMessageStyles(mergedTheme, { level }), cssOverrides], className, ...props, children: [!hideIcon && jsx(Icon, { fill: mergedTheme[level].color, cssOverrides: inlineMessageIconStyles(mergedTheme), size: "md", children: determinedIcon }), jsx(Typography, { variant: "helpTextFormMd", theme: { color: mergedTheme[level].color }, children })] });
 }
 
 export { InlineMessage };

package/dist/components/{inline-message → InlineMessage}/styles.cjs

@@ -7,14 +7,14 @@ const defaultInlineMessageTheme = inlineMessage.componentInlineMessage;
 const inlineMessageStyles = (theme, { level }) => {
   return react.css`
 		display: ${theme.shared.display};
-		align-items: ${theme.shared["align-items"]};
+		align-items: ${theme.shared.alignItems};
 		gap: ${theme.shared.gap};
 		color: ${theme[level].color};
 	`;
 };
 const inlineMessageIconStyles = (theme) => {
   return react.css`
-		align-self: ${theme.shared.icon["align-self"]};
+		align-self: ${theme.shared.icon.alignSelf};
 	`;
 };
 

package/dist/components/{inline-message → InlineMessage}/styles.js

@@ -5,14 +5,14 @@ const defaultInlineMessageTheme = componentInlineMessage;
 const inlineMessageStyles = (theme, { level }) => {
   return css`
 		display: ${theme.shared.display};
-		align-items: ${theme.shared["align-items"]};
+		align-items: ${theme.shared.alignItems};
 		gap: ${theme.shared.gap};
 		color: ${theme[level].color};
 	`;
 };
 const inlineMessageIconStyles = (theme) => {
   return css`
-		align-self: ${theme.shared.icon["align-self"]};
+		align-self: ${theme.shared.icon.alignSelf};
 	`;
 };
 

package/dist/components/{intended-audience-signifier → IntendedAudienceSignifier}/IntendedAudienceSignifier.cjs

@@ -11,21 +11,50 @@ const sourceIcons = {
   AUS: FlagIcons.auFlag,
   Global: FlagIcons.globeIcon
 };
-const getSourceIconElement = (sourceTag, audience) => {
+const getSourceIconElement = (source, audience) => {
   if (audience === "Global") {
     return FlagIcons.globeIcon;
   }
-  return sourceIcons[sourceTag];
+  return sourceIcons[source];
 };
-const getIntendedAudienceIconElement = (sourceTag, audience) => {
+const getIntendedAudienceIconElement = (source, audience) => {
   if (audience === "Domestic for Domestic") {
-    return getSourceIconElement(sourceTag, audience);
+    return getSourceIconElement(source, audience);
   }
   if (audience === "Global" || audience === "Domestic For Global") {
     return FlagIcons.globeIcon;
   }
   return sourceIcons[audience];
 };
+const getSourceDescription = (source, audience) => {
+  switch (audience) {
+    case "Global":
+      return "Global";
+    case "Domestic For Global":
+    case "Domestic for Domestic":
+    case "UK":
+    case "US":
+    case "AUS":
+      return source;
+  }
+};
+const getAudienceDescription = (source, audience) => {
+  switch (audience) {
+    case "Global":
+    case "Domestic For Global":
+      return "Global";
+    case "Domestic for Domestic":
+      return "Domestic";
+    case "UK":
+    case "US":
+    case "AUS":
+      return audience === source ? "Domestic" : audience;
+  }
+};
+const getSignifierDescription = (source, audience) => {
+  return `${getSourceDescription(source, audience)} article for ${getAudienceDescription(source, audience)} audience`;
+};
+const AUDIENCE_NOT_KNOWN_DESCRIPTION = "Intended audience unknown";
 function IntendedAudienceSignifier({
   source,
   intendedAudience,
@@ -42,18 +71,21 @@ function IntendedAudienceSignifier({
         ...props,
         className,
         css: [styles.intendedAudienceSignifierStyles(mergedTheme), cssOverrides],
+        "aria-label": AUDIENCE_NOT_KNOWN_DESCRIPTION,
         children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Don\u2018t know" })
       }
     );
   }
   const iconStyles = styles.intendedAudienceSignifierIconStyles(mergedTheme);
   const chevronIconStyles = styles.intendedAudienceSignifierChevronIconStyles(mergedTheme);
+  const description = getSignifierDescription(source, intendedAudience);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ...props,
       className,
       css: [styles.intendedAudienceSignifierStyles(mergedTheme), cssOverrides],
+      "aria-label": description,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { css: iconStyles, children: getSourceIconElement(source, intendedAudience) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { css: chevronIconStyles, children: FlagIcons.DoubleChevronRightSvg }),

package/dist/components/IntendedAudienceSignifier/IntendedAudienceSignifier.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { DoubleChevronRightSvg, globeIcon, auFlag, usFlag, ukFlag } from './FlagIcons.js';
+import { defaultIntendedAudienceSignifierTheme, intendedAudienceSignifierStyles, intendedAudienceSignifierIconStyles, intendedAudienceSignifierChevronIconStyles } from './styles.js';
+
+const sourceIcons = {
+  UK: ukFlag,
+  US: usFlag,
+  AUS: auFlag,
+  Global: globeIcon
+};
+const getSourceIconElement = (source, audience) => {
+  if (audience === "Global") {
+    return globeIcon;
+  }
+  return sourceIcons[source];
+};
+const getIntendedAudienceIconElement = (source, audience) => {
+  if (audience === "Domestic for Domestic") {
+    return getSourceIconElement(source, audience);
+  }
+  if (audience === "Global" || audience === "Domestic For Global") {
+    return globeIcon;
+  }
+  return sourceIcons[audience];
+};
+const getSourceDescription = (source, audience) => {
+  switch (audience) {
+    case "Global":
+      return "Global";
+    case "Domestic For Global":
+    case "Domestic for Domestic":
+    case "UK":
+    case "US":
+    case "AUS":
+      return source;
+  }
+};
+const getAudienceDescription = (source, audience) => {
+  switch (audience) {
+    case "Global":
+    case "Domestic For Global":
+      return "Global";
+    case "Domestic for Domestic":
+      return "Domestic";
+    case "UK":
+    case "US":
+    case "AUS":
+      return audience === source ? "Domestic" : audience;
+  }
+};
+const getSignifierDescription = (source, audience) => {
+  return `${getSourceDescription(source, audience)} article for ${getAudienceDescription(source, audience)} audience`;
+};
+const AUDIENCE_NOT_KNOWN_DESCRIPTION = "Intended audience unknown";
+function IntendedAudienceSignifier({ source, intendedAudience, theme = {}, cssOverrides, className, ...props }) {
+  const mergedTheme = mergeDeep(defaultIntendedAudienceSignifierTheme, theme);
+  if (intendedAudience === "Don't know") {
+    return jsx("div", { ...props, className, css: [intendedAudienceSignifierStyles(mergedTheme), cssOverrides], "aria-label": AUDIENCE_NOT_KNOWN_DESCRIPTION, children: jsx("span", { children: "Don\u2018t know" }) });
+  }
+  const iconStyles = intendedAudienceSignifierIconStyles(mergedTheme);
+  const chevronIconStyles = intendedAudienceSignifierChevronIconStyles(mergedTheme);
+  const description = getSignifierDescription(source, intendedAudience);
+  return jsxs("div", { ...props, className, css: [intendedAudienceSignifierStyles(mergedTheme), cssOverrides], "aria-label": description, children: [jsx("div", { css: iconStyles, children: getSourceIconElement(source, intendedAudience) }), jsx("div", { css: chevronIconStyles, children: DoubleChevronRightSvg }), jsx("div", { css: iconStyles, children: getIntendedAudienceIconElement(source, intendedAudience) })] });
+}
+
+export { IntendedAudienceSignifier };

package/dist/components/{layout → Layout}/styles.cjs

@@ -26,9 +26,9 @@ const mainLayoutStyles = (theme, { fluid }) => {
   return react.css`
 		grid-area: main;
 		${fluid ? "" : react.css`
-					max-width: ${theme["max-width"]};
-					margin-left: ${theme["margin-left"]};
-					margin-right: ${theme["margin-right"]};
+					max-width: ${theme.maxWidth};
+					margin-left: ${theme.marginLeft};
+					margin-right: ${theme.marginRight};
 				`}
 	`;
 };

package/dist/components/{layout → Layout}/styles.js

@@ -24,9 +24,9 @@ const mainLayoutStyles = (theme, { fluid }) => {
   return css`
 		grid-area: main;
 		${fluid ? "" : css`
-					max-width: ${theme["max-width"]};
-					margin-left: ${theme["margin-left"]};
-					margin-right: ${theme["margin-right"]};
+					max-width: ${theme.maxWidth};
+					margin-left: ${theme.marginLeft};
+					margin-right: ${theme.marginRight};
 				`}
 	`;
 };

package/dist/components/{link → Link}/Link.cjs

@@ -4,12 +4,12 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var colors = require('../../styleD/build/typescript/semantic/colors.cjs');
 var mergeDeep = require('../../util/mergeDeep.cjs');
-var styles$1 = require('../typography/styles.cjs');
+var styles$1 = require('../Typography/styles.cjs');
 var styles = require('./styles.cjs');
 
 function Link({
   children,
-  typography = "body-sm",
+  typography = "bodySm",
   theme = {},
   cssOverrides,
   className,

package/dist/components/{link → Link}/Link.js

@@ -2,10 +2,10 @@ import { jsx } from '@emotion/react/jsx-runtime';
 import { Link as Link$1 } from 'react-aria-components';
 import { semanticColors } from '../../styleD/build/typescript/semantic/colors.js';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { typographyStyles } from '../typography/styles.js';
+import { typographyStyles } from '../Typography/styles.js';
 import { defaultLinkTheme, linkStyles } from './styles.js';
 
-function Link({ children, typography = "body-sm", theme = {}, cssOverrides, className, ...props }) {
+function Link({ children, typography = "bodySm", theme = {}, cssOverrides, className, ...props }) {
   const mergedTheme = mergeDeep(defaultLinkTheme, theme);
   return jsx(Link$1, { css: [
     typographyStyles({ color: semanticColors.text.strong }, { variant: typography }),

package/dist/components/{link-button → LinkButton}/LinkButton.cjs

@@ -3,7 +3,7 @@
 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 Icon = require('../Icon/Icon.cjs');
 var styles = require('./styles.cjs');
 
 function LinkButton({

package/dist/components/{link-button → LinkButton}/LinkButton.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { Link, composeRenderProps } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { Icon } from '../icon/Icon.js';
+import { Icon } from '../Icon/Icon.js';
 import { defaultLinkButtonTheme, linkButtonStyles } from './styles.js';
 
 function LinkButton({ variant = "primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {

package/dist/components/{link-button → LinkButton}/styles.cjs

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

package/dist/components/{link-button → LinkButton}/styles.js

@@ -1,4 +1,4 @@
-import { defaultButtonTheme, buttonStyles } from '../button/styles.js';
+import { defaultButtonTheme, buttonStyles } from '../Button/styles.js';
 
 const defaultLinkButtonTheme = defaultButtonTheme;
 const linkButtonStyles = buttonStyles;

package/dist/components/{menu → Menu}/Menu.cjs

@@ -5,7 +5,7 @@ var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
 var styles = require('./styles.cjs');
-var Icon = require('../icon/Icon.cjs');
+var Icon = require('../Icon/Icon.cjs');
 
 function Popover({
   size = "md",

package/dist/components/{menu → Menu}/Menu.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { MenuTrigger, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, Header, Separator, Popover as Popover$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { defaultMenuTheme, menuStyles, defaultMenuItemTheme, menuItemIconStyles, menuItemLabelStyles, menuItemDescriptionStyles, menuItemAsideStyles, menuItemStyles, defaultMenuSectionTheme, menuSectionHeaderStyles, defaultMenuSeparatorTheme, menuSeparatorStyles, defaultMenuPopoverTheme, menuPopoverStyles } from './styles.js';
-import { Icon } from '../icon/Icon.js';
+import { Icon } from '../Icon/Icon.js';
 
 function Popover({ size = "md", children, theme = {}, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultMenuPopoverTheme, theme);

package/dist/components/{menu → Menu}/styles.cjs

@@ -7,43 +7,43 @@ var typography = require('../../styleD/utils/semantic/typography.cjs');
 const defaultMenuTheme = menu.componentMenu.menu;
 const menuStyles = (theme) => react.css`
 	display: ${theme.shared.display};
-	flex-direction: ${theme.shared["flex-direction"]};
+	flex-direction: ${theme.shared.flexDirection};
 	border: ${theme.shared.border};
-	background: ${theme.shared["background-color"]};
+	background: ${theme.shared.backgroundColor};
 `;
 const defaultMenuSectionTheme = menu.componentMenu.menuSection;
 const menuSectionHeaderStyles = (theme, { size }) => react.css`
 	display: ${theme.header.shared.display};
-	align-items: ${theme.header.shared["align-items"]};
+	align-items: ${theme.header.shared.alignItems};
 	padding: ${theme.header.shared.padding.top}
 		${theme.header.shared.padding.right} ${theme.header.shared.padding.bottom}
 		${theme.header.shared.padding.left};
 	height: ${theme.header[size].height};
-	background: ${theme.header.shared["background-color"]};
+	background: ${theme.header.shared.backgroundColor};
 	color: ${theme.header.shared.color};
 	${typography.convertTypographyToEmotionStringStyle(theme.header[size].typography)}
 `;
 const defaultMenuItemTheme = menu.componentMenu.menuItem;
 const menuItemStyles = (theme, { description }) => react.css`
 	display: ${theme.shared.display};
-	grid-template-columns: ${theme.shared["grid-template-columns"]};
-	grid-template-areas: ${description ? theme.shared["grid-template-areas-with-description"] : theme.shared["grid-template-areas"]};
+	grid-template-columns: ${theme.shared.gridTemplateColumns};
+	grid-template-areas: ${description ? theme.shared.gridTemplateAreasWithDescription : theme.shared.gridTemplateAreas};
 	gap: ${theme.shared.gap};
-	align-items: ${theme.shared["align-items"]};
+	align-items: ${theme.shared.alignItems};
 	padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
 		${theme.shared.padding.bottom} ${theme.shared.padding.left};
-	border-bottom: ${theme.shared["border-bottom"]};
-	background: ${theme.shared["background-color"]};
+	border-bottom: ${theme.shared.borderBottom};
+	background: ${theme.shared.backgroundColor};
 	&:last-child {
-		border-bottom: ${theme.shared[":last-child"]["border-bottom"]};
+		border-bottom: ${theme.shared.lastChild.borderBottom};
 	}
 
 	/* Hovering adds data-focused and the item stays focused after hovering away */
 	&[data-focused] {
-		background-color: ${theme.shared[":hover"]["background-color"]};
+		background-color: ${theme.shared.hover.backgroundColor};
 	}
 	&[data-hovered] {
-		outline: ${theme.shared[":hover"].outline};
+		outline: ${theme.shared.hover.outline};
 	}
 
 	/* Override default browser focus behaviour */
@@ -53,50 +53,50 @@ const menuItemStyles = (theme, { description }) => react.css`
 
 	/* focus visible used for keyboard focus */
 	&[data-focus-visible] {
-		outline: ${theme.shared[":focus-visible"]["outline"]};
-		outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
-		background-color: ${theme.shared[":hover"]["background-color"]};
+		outline: ${theme.shared.focusVisible.outline};
+		outline-offset: ${theme.shared.focusVisible.outlineOffset};
+		background-color: ${theme.shared.hover.backgroundColor};
 	}
 
 	/* Must be last to take precedence */
 	&[data-pressed] {
-		background-color: ${theme.shared[":pressed"]["background-color"]};
+		background-color: ${theme.shared.pressed.backgroundColor};
 	}
 `;
 const menuItemIconStyles = (theme, { size }) => react.css`
-	grid-area: ${theme.shared.icon["grid-area"]};
-	align-self: ${theme.shared.icon["align-self"]};
+	grid-area: ${theme.shared.icon.gridArea};
+	align-self: ${theme.shared.icon.alignSelf};
 	color: ${theme.shared.icon.color};
 	/* Ensure the line-height matches the font line-height of the label for alignment */
-	line-height: ${theme[size].icon["line-height"]};
+	line-height: ${theme[size].icon.lineHeight};
 `;
 const menuItemLabelStyles = (theme) => react.css`
-	grid-area: ${theme.shared.label["grid-area"]};
+	grid-area: ${theme.shared.label.gridArea};
 	color: ${theme.shared.label.color};
 	${typography.convertTypographyToEmotionStringStyle(theme.shared.label.typography)}
 `;
 const menuItemDescriptionStyles = (theme) => react.css`
-	grid-area: ${theme.shared.description["grid-area"]};
+	grid-area: ${theme.shared.description.gridArea};
 	color: ${theme.shared.description.color};
 	${typography.convertTypographyToEmotionStringStyle(theme.shared.description.typography)}
 `;
 const menuItemAsideStyles = (theme) => react.css`
-	grid-area: ${theme.shared.aside["grid-area"]};
-	justify-self: ${theme.shared.aside["justify-self"]};
-	align-self: ${theme.shared.aside["align-self"]};
+	grid-area: ${theme.shared.aside.gridArea};
+	justify-self: ${theme.shared.aside.justifySelf};
+	align-self: ${theme.shared.aside.alignSelf};
 	color: ${theme.shared.aside.color};
 	${typography.convertTypographyToEmotionStringStyle(theme.shared.aside.typography)}
 `;
 const defaultMenuSeparatorTheme = menu.componentMenu.menuSeparator;
 const menuSeparatorStyles = (theme) => react.css`
-	background-color: ${theme.shared["background-color"]};
+	background-color: ${theme.shared.backgroundColor};
 	height: ${theme.shared.height};
 	width: ${theme.shared.width};
 `;
 const defaultMenuPopoverTheme = menu.componentMenu.menuPopover;
 const menuPopoverStyles = (theme, { size }) => react.css`
 	overflow: ${theme.shared.overflow};
-	max-width: ${theme[size]["max-width"]};
+	max-width: ${theme[size].maxWidth};
 	width: ${theme[size].width};
 	box-shadow: ${theme.shared.shadow};
 `;

package/dist/components/{menu → Menu}/styles.js

@@ -5,43 +5,43 @@ import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semant
 const defaultMenuTheme = componentMenu.menu;
 const menuStyles = (theme) => css`
 	display: ${theme.shared.display};
-	flex-direction: ${theme.shared["flex-direction"]};
+	flex-direction: ${theme.shared.flexDirection};
 	border: ${theme.shared.border};
-	background: ${theme.shared["background-color"]};
+	background: ${theme.shared.backgroundColor};
 `;
 const defaultMenuSectionTheme = componentMenu.menuSection;
 const menuSectionHeaderStyles = (theme, { size }) => css`
 	display: ${theme.header.shared.display};
-	align-items: ${theme.header.shared["align-items"]};
+	align-items: ${theme.header.shared.alignItems};
 	padding: ${theme.header.shared.padding.top}
 		${theme.header.shared.padding.right} ${theme.header.shared.padding.bottom}
 		${theme.header.shared.padding.left};
 	height: ${theme.header[size].height};
-	background: ${theme.header.shared["background-color"]};
+	background: ${theme.header.shared.backgroundColor};
 	color: ${theme.header.shared.color};
 	${convertTypographyToEmotionStringStyle(theme.header[size].typography)}
 `;
 const defaultMenuItemTheme = componentMenu.menuItem;
 const menuItemStyles = (theme, { description }) => css`
 	display: ${theme.shared.display};
-	grid-template-columns: ${theme.shared["grid-template-columns"]};
-	grid-template-areas: ${description ? theme.shared["grid-template-areas-with-description"] : theme.shared["grid-template-areas"]};
+	grid-template-columns: ${theme.shared.gridTemplateColumns};
+	grid-template-areas: ${description ? theme.shared.gridTemplateAreasWithDescription : theme.shared.gridTemplateAreas};
 	gap: ${theme.shared.gap};
-	align-items: ${theme.shared["align-items"]};
+	align-items: ${theme.shared.alignItems};
 	padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
 		${theme.shared.padding.bottom} ${theme.shared.padding.left};
-	border-bottom: ${theme.shared["border-bottom"]};
-	background: ${theme.shared["background-color"]};
+	border-bottom: ${theme.shared.borderBottom};
+	background: ${theme.shared.backgroundColor};
 	&:last-child {
-		border-bottom: ${theme.shared[":last-child"]["border-bottom"]};
+		border-bottom: ${theme.shared.lastChild.borderBottom};
 	}
 
 	/* Hovering adds data-focused and the item stays focused after hovering away */
 	&[data-focused] {
-		background-color: ${theme.shared[":hover"]["background-color"]};
+		background-color: ${theme.shared.hover.backgroundColor};
 	}
 	&[data-hovered] {
-		outline: ${theme.shared[":hover"].outline};
+		outline: ${theme.shared.hover.outline};
 	}
 
 	/* Override default browser focus behaviour */
@@ -51,50 +51,50 @@ const menuItemStyles = (theme, { description }) => css`
 
 	/* focus visible used for keyboard focus */
 	&[data-focus-visible] {
-		outline: ${theme.shared[":focus-visible"]["outline"]};
-		outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
-		background-color: ${theme.shared[":hover"]["background-color"]};
+		outline: ${theme.shared.focusVisible.outline};
+		outline-offset: ${theme.shared.focusVisible.outlineOffset};
+		background-color: ${theme.shared.hover.backgroundColor};
 	}
 
 	/* Must be last to take precedence */
 	&[data-pressed] {
-		background-color: ${theme.shared[":pressed"]["background-color"]};
+		background-color: ${theme.shared.pressed.backgroundColor};
 	}
 `;
 const menuItemIconStyles = (theme, { size }) => css`
-	grid-area: ${theme.shared.icon["grid-area"]};
-	align-self: ${theme.shared.icon["align-self"]};
+	grid-area: ${theme.shared.icon.gridArea};
+	align-self: ${theme.shared.icon.alignSelf};
 	color: ${theme.shared.icon.color};
 	/* Ensure the line-height matches the font line-height of the label for alignment */
-	line-height: ${theme[size].icon["line-height"]};
+	line-height: ${theme[size].icon.lineHeight};
 `;
 const menuItemLabelStyles = (theme) => css`
-	grid-area: ${theme.shared.label["grid-area"]};
+	grid-area: ${theme.shared.label.gridArea};
 	color: ${theme.shared.label.color};
 	${convertTypographyToEmotionStringStyle(theme.shared.label.typography)}
 `;
 const menuItemDescriptionStyles = (theme) => css`
-	grid-area: ${theme.shared.description["grid-area"]};
+	grid-area: ${theme.shared.description.gridArea};
 	color: ${theme.shared.description.color};
 	${convertTypographyToEmotionStringStyle(theme.shared.description.typography)}
 `;
 const menuItemAsideStyles = (theme) => css`
-	grid-area: ${theme.shared.aside["grid-area"]};
-	justify-self: ${theme.shared.aside["justify-self"]};
-	align-self: ${theme.shared.aside["align-self"]};
+	grid-area: ${theme.shared.aside.gridArea};
+	justify-self: ${theme.shared.aside.justifySelf};
+	align-self: ${theme.shared.aside.alignSelf};
 	color: ${theme.shared.aside.color};
 	${convertTypographyToEmotionStringStyle(theme.shared.aside.typography)}
 `;
 const defaultMenuSeparatorTheme = componentMenu.menuSeparator;
 const menuSeparatorStyles = (theme) => css`
-	background-color: ${theme.shared["background-color"]};
+	background-color: ${theme.shared.backgroundColor};
 	height: ${theme.shared.height};
 	width: ${theme.shared.width};
 `;
 const defaultMenuPopoverTheme = componentMenu.menuPopover;
 const menuPopoverStyles = (theme, { size }) => css`
 	overflow: ${theme.shared.overflow};
-	max-width: ${theme[size]["max-width"]};
+	max-width: ${theme[size].maxWidth};
 	width: ${theme[size].width};
 	box-shadow: ${theme.shared.shadow};
 `;

package/dist/components/{radio-group → RadioGroup}/RadioGroup.cjs

@@ -4,7 +4,7 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
-var Form = require('../form/Form.cjs');
+var Form = require('../Form/Form.cjs');
 var styles = require('./styles.cjs');
 
 function RadioGroup({

package/dist/components/{radio-group → RadioGroup}/RadioGroup.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import React from 'react';
 import { Radio as Radio$1, composeRenderProps, RadioGroup as RadioGroup$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { FormInputContainer } from '../form/Form.js';
+import { FormInputContainer } from '../Form/Form.js';
 import { defaultRadioGroupTheme, radioIndicatorStyles, radioStyles, radioGroupStyles } from './styles.js';
 
 function RadioGroup({ size = "md", isInvalid = false, theme = {}, children, ...props }) {

package/dist/components/{select → Select}/Select.cjs

@@ -4,8 +4,8 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
-var Form = require('../form/Form.cjs');
-var Icon = require('../icon/Icon.cjs');
+var Form = require('../Form/Form.cjs');
+var Icon = require('../Icon/Icon.cjs');
 var styles = require('./styles.cjs');
 
 function Option({ children, theme = {} }) {