@guardian/stand 0.0.37 → 0.0.39

package/dist/components/Layout/Layout.js

@@ -0,0 +1,34 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { layoutStyles, mainLayoutStyles, sidebarLayoutStyles, sidebarStyles, topBarLayoutStyles, alertBannerLayoutStyles, defaultSidebarTheme, defaultMainTheme, defaultLayoutTheme } from './styles.js';
+
+const LayoutAlertBanner = ({ as: Component = "aside", children, cssOverrides, ...props }) => {
+  return jsx(Component, { css: [alertBannerLayoutStyles(), cssOverrides], ...props, children });
+};
+const LayoutTopBar = ({ as: Component = "nav", children, cssOverrides, ...props }) => {
+  return jsx(Component, { css: [topBarLayoutStyles(), cssOverrides], ...props, children });
+};
+function LayoutSidebar({ as: Component = "aside", children, layoutSmBreakpoint = "hidden", theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultSidebarTheme, theme);
+  return jsx(Component, { css: [
+    sidebarLayoutStyles(),
+    sidebarStyles(mergedTheme, { layoutSmBreakpoint }),
+    cssOverrides
+  ], ...props, children });
+}
+function LayoutMain({ as: Component = "main", children, fluid = true, theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultMainTheme, theme);
+  return jsx(Component, { css: [mainLayoutStyles(mergedTheme, { fluid }), cssOverrides], ...props, children });
+}
+function LayoutRoot({ children, theme = {}, cssOverrides, ...props }) {
+  const mergedTheme = mergeDeep(defaultLayoutTheme, theme);
+  return jsx("div", { css: [layoutStyles(mergedTheme), cssOverrides], ...props, children });
+}
+const Layout = Object.assign(LayoutRoot, {
+  AlertBanner: LayoutAlertBanner,
+  TopBar: LayoutTopBar,
+  Sidebar: LayoutSidebar,
+  Main: LayoutMain
+});
+
+export { Layout };

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

@@ -6,6 +6,7 @@ var mq = require('../../styleD/utils/semantic/mq.cjs');
 
 const defaultLayoutTheme = layout.componentLayout["layout"];
 const defaultSidebarTheme = layout.componentLayout["sidebar"];
+const defaultMainTheme = layout.componentLayout["main"];
 const alertBannerLayoutStyles = () => {
   return react.css`
 		grid-area: alertbanner;
@@ -25,9 +26,9 @@ const mainLayoutStyles = (theme, { fluid }) => {
   return react.css`
 		grid-area: main;
 		${fluid ? "" : react.css`
-					max-width: ${theme.shared["max-width"]};
-					margin-left: ${theme.shared["margin-left"]};
-					margin-right: ${theme.shared["margin-right"]};
+					max-width: ${theme.maxWidth};
+					margin-left: ${theme.marginLeft};
+					margin-right: ${theme.marginRight};
 				`}
 	`;
 };
@@ -84,6 +85,7 @@ const sidebarStyles = (theme, { layoutSmBreakpoint }) => {
 
 exports.alertBannerLayoutStyles = alertBannerLayoutStyles;
 exports.defaultLayoutTheme = defaultLayoutTheme;
+exports.defaultMainTheme = defaultMainTheme;
 exports.defaultSidebarTheme = defaultSidebarTheme;
 exports.layoutStyles = layoutStyles;
 exports.mainLayoutStyles = mainLayoutStyles;

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

@@ -4,6 +4,7 @@ import { from } from '../../styleD/utils/semantic/mq.js';
 
 const defaultLayoutTheme = componentLayout["layout"];
 const defaultSidebarTheme = componentLayout["sidebar"];
+const defaultMainTheme = componentLayout["main"];
 const alertBannerLayoutStyles = () => {
   return css`
 		grid-area: alertbanner;
@@ -23,9 +24,9 @@ const mainLayoutStyles = (theme, { fluid }) => {
   return css`
 		grid-area: main;
 		${fluid ? "" : css`
-					max-width: ${theme.shared["max-width"]};
-					margin-left: ${theme.shared["margin-left"]};
-					margin-right: ${theme.shared["margin-right"]};
+					max-width: ${theme.maxWidth};
+					margin-left: ${theme.marginLeft};
+					margin-right: ${theme.marginRight};
 				`}
 	`;
 };
@@ -80,4 +81,4 @@ const sidebarStyles = (theme, { layoutSmBreakpoint }) => {
 	`;
 };
 
-export { alertBannerLayoutStyles, defaultLayoutTheme, defaultSidebarTheme, layoutStyles, mainLayoutStyles, sidebarLayoutStyles, sidebarStyles, topBarLayoutStyles };
+export { alertBannerLayoutStyles, defaultLayoutTheme, defaultMainTheme, defaultSidebarTheme, layoutStyles, mainLayoutStyles, sidebarLayoutStyles, sidebarStyles, topBarLayoutStyles };

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

@@ -4,27 +4,27 @@ 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 = require('../typography/styles.cjs');
-var styles$1 = require('./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,
   ...props
 }) {
-  const mergedTheme = mergeDeep.mergeDeep(styles$1.defaultLinkTheme, theme);
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultLinkTheme, theme);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.Link,
     {
       css: [
-        styles.typographyStyles(
+        styles$1.typographyStyles(
           { color: colors.semanticColors.text.strong },
           { variant: typography }
         ),
-        styles$1.linkStyles(mergedTheme),
+        styles.linkStyles(mergedTheme),
         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 { linkStyles, defaultLinkTheme } from './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,8 +1,8 @@
 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 { linkButtonStyles, defaultLinkButtonTheme } from './styles.js';
+import { Icon } from '../Icon/Icon.js';
+import { defaultLinkButtonTheme, linkButtonStyles } from './styles.js';
 
 function LinkButton({ variant = "primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {
   const mergedTheme = mergeDeep(defaultLinkButtonTheme, theme);

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 { buttonStyles, defaultButtonTheme } 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

@@ -2,8 +2,8 @@ import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
 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 { menuStyles, menuItemIconStyles, menuItemLabelStyles, menuItemDescriptionStyles, menuItemAsideStyles, menuItemStyles, menuSectionHeaderStyles, menuSeparatorStyles, defaultMenuPopoverTheme, menuPopoverStyles, defaultMenuSeparatorTheme, defaultMenuSectionTheme, defaultMenuItemTheme, defaultMenuTheme } from './styles.js';
-import { Icon } from '../icon/Icon.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';
 
 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,8 +2,8 @@ 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 { radioIndicatorStyles, radioStyles, radioGroupStyles, defaultRadioGroupTheme } from './styles.js';
+import { FormInputContainer } from '../Form/Form.js';
+import { defaultRadioGroupTheme, radioIndicatorStyles, radioStyles, radioGroupStyles } from './styles.js';
 
 function RadioGroup({ size = "md", isInvalid = false, theme = {}, children, ...props }) {
   const mergedTheme = mergeDeep(defaultRadioGroupTheme, theme);

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 = {} }) {

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

@@ -2,9 +2,9 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import React from 'react';
 import { ListBoxItem, Select as Select$1, Button, SelectValue, Popover, ListBox as ListBox$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { FormInputContainer } from '../form/Form.js';
-import { Icon } from '../icon/Icon.js';
-import { listBoxItemStyles, buttonStyles, popoverStyles, defaultSelectTheme, listBoxStyles } from './styles.js';
+import { FormInputContainer } from '../Form/Form.js';
+import { Icon } from '../Icon/Icon.js';
+import { defaultSelectTheme, listBoxItemStyles, buttonStyles, popoverStyles, listBoxStyles } from './styles.js';
 
 function Option({ children, theme = {} }) {
   const mergedTheme = mergeDeep(defaultSelectTheme, theme);

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

@@ -33,7 +33,7 @@ const listBoxItemStyles = (theme) => {
 
 		&[data-focus-visible] {
 			outline: ${theme.shared.option.focused.outline};
-			outline-offset: ${theme.shared.option.focused["outline-offset"]};
+			outline-offset: ${theme.shared.option.focused.outlineOffset};
 			background-color: ${theme.shared.option.focused.backgroundColor};
 		}
 
@@ -78,7 +78,7 @@ const buttonStyles = (theme, isInvalid) => {
 
 		&[data-focus-visible] {
 			outline: ${theme.shared.button.focused.outline};
-			outline-offset: ${theme.shared.button.focused["outline-offset"]};
+			outline-offset: ${theme.shared.button.focused.outlineOffset};
 		}
 
 		&[data-disabled] {

package/dist/components/{select → Select}/styles.js

@@ -31,7 +31,7 @@ const listBoxItemStyles = (theme) => {
 
 		&[data-focus-visible] {
 			outline: ${theme.shared.option.focused.outline};
-			outline-offset: ${theme.shared.option.focused["outline-offset"]};
+			outline-offset: ${theme.shared.option.focused.outlineOffset};
 			background-color: ${theme.shared.option.focused.backgroundColor};
 		}
 
@@ -76,7 +76,7 @@ const buttonStyles = (theme, isInvalid) => {
 
 		&[data-focus-visible] {
 			outline: ${theme.shared.button.focused.outline};
-			outline-offset: ${theme.shared.button.focused["outline-offset"]};
+			outline-offset: ${theme.shared.button.focused.outlineOffset};
 		}
 
 		&[data-disabled] {

package/dist/components/{text-area → TextArea}/TextArea.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 Form = require('../form/Form.cjs');
+var Form = require('../Form/Form.cjs');
 var styles = require('./styles.cjs');
 
 function TextArea({

package/dist/components/{text-area → TextArea}/TextArea.js

@@ -1,8 +1,8 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import { TextField, TextArea as TextArea$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { FormInputContainer } from '../form/Form.js';
-import { textAreaStyles, defaultTextAreaTheme } from './styles.js';
+import { FormInputContainer } from '../Form/Form.js';
+import { defaultTextAreaTheme, textAreaStyles } from './styles.js';
 
 function TextArea({ size = "md", isInvalid = false, theme = {}, placeholder, ...props }) {
   const mergedTheme = mergeDeep(defaultTextAreaTheme, theme);

package/dist/components/{text-area → TextArea}/styles.cjs

@@ -8,13 +8,13 @@ const defaultTextAreaTheme = textArea.componentTextArea;
 const textAreaStyles = (theme, { size, isInvalid }) => {
   return react.css`
 		${typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
-		background-color: ${theme.shared["background-color"]};
-		border-radius: ${theme.shared["border-radius"]};
+		background-color: ${theme.shared.backgroundColor};
+		border-radius: ${theme.shared.borderRadius};
 		border: ${theme.shared.border};
 		color: ${theme.shared.color};
 		cursor: ${theme.shared.cursor};
 		height: ${theme.shared.height};
-		margin-top: ${theme.shared["margin-top"]};
+		margin-top: ${theme.shared.marginTop};
 		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
 			${theme.shared.padding.bottom} ${theme.shared.padding.left};
 

package/dist/components/{text-area → TextArea}/styles.js

@@ -6,13 +6,13 @@ const defaultTextAreaTheme = componentTextArea;
 const textAreaStyles = (theme, { size, isInvalid }) => {
   return css`
 		${convertTypographyToEmotionStringStyle(theme[size].typography)}
-		background-color: ${theme.shared["background-color"]};
-		border-radius: ${theme.shared["border-radius"]};
+		background-color: ${theme.shared.backgroundColor};
+		border-radius: ${theme.shared.borderRadius};
 		border: ${theme.shared.border};
 		color: ${theme.shared.color};
 		cursor: ${theme.shared.cursor};
 		height: ${theme.shared.height};
-		margin-top: ${theme.shared["margin-top"]};
+		margin-top: ${theme.shared.marginTop};
 		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
 			${theme.shared.padding.bottom} ${theme.shared.padding.left};
 

package/dist/components/{text-input → TextInput}/TextInput.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 Form = require('../form/Form.cjs');
+var Form = require('../Form/Form.cjs');
 var styles = require('./styles.cjs');
 
 function TextInput({

package/dist/components/{text-input → TextInput}/TextInput.js

@@ -1,8 +1,8 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import { TextField, Input } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { FormInputContainer } from '../form/Form.js';
-import { textInputStyles, defaultTextInputTheme } from './styles.js';
+import { FormInputContainer } from '../Form/Form.js';
+import { defaultTextInputTheme, textInputStyles } from './styles.js';
 
 function TextInput({ size = "md", isInvalid = false, theme = {}, placeholder, ...props }) {
   const mergedTheme = mergeDeep(defaultTextInputTheme, theme);

package/dist/components/{text-input → TextInput}/styles.cjs

@@ -8,13 +8,13 @@ const defaultTextInputTheme = textInput.componentTextInput;
 const textInputStyles = (theme, { size, isInvalid }) => {
   return react.css`
 		${typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
-		background-color: ${theme.shared["background-color"]};
-		border-radius: ${theme.shared["border-radius"]};
+		background-color: ${theme.shared.backgroundColor};
+		border-radius: ${theme.shared.borderRadius};
 		border: ${theme.shared.border};
 		color: ${theme.shared.color};
 		cursor: ${theme.shared.cursor};
 		height: ${theme[size].height};
-		margin-top: ${theme.shared["margin-top"]};
+		margin-top: ${theme.shared.marginTop};
 		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
 			${theme.shared.padding.bottom} ${theme.shared.padding.left};