@guardian/stand 0.0.37 → 0.0.39

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

@@ -6,13 +6,13 @@ const defaultTextInputTheme = componentTextInput;
 const textInputStyles = (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[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};
 

package/dist/components/{topbar → TopBar}/TopBar.cjs

@@ -5,14 +5,14 @@ var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
 var useResize = require('../../util/useResize.cjs');
-var Avatar = require('../avatar/Avatar.cjs');
-var Icon = require('../icon/Icon.cjs');
+var Avatar = require('../Avatar/Avatar.cjs');
+var Icon = require('../Icon/Icon.cjs');
 var styles = require('./styles.cjs');
-var TopBarItem = require('./topBarItem/TopBarItem.cjs');
-var TopBarNavigation = require('./topBarNavigation/TopBarNavigation.cjs');
-var TopBarToolName = require('./topBarToolName/TopBarToolName.cjs');
-var AvatarLink = require('../avatar-link/AvatarLink.cjs');
-var AvatarButton = require('../avatar-button/AvatarButton.cjs');
+var TopBarItem = require('./TopBarItem/TopBarItem.cjs');
+var TopBarNavigation = require('./TopBarNavigation/TopBarNavigation.cjs');
+var TopBarToolName = require('./TopBarToolName/TopBarToolName.cjs');
+var AvatarLink = require('../AvatarLink/AvatarLink.cjs');
+var AvatarButton = require('../AvatarButton/AvatarButton.cjs');
 
 function TopBarSide({
   children,
@@ -28,7 +28,7 @@ function TopBarSide({
       items.push(
         React.cloneElement(child, {
           key: `${child.key}-${i}`,
-          theme: theme?.Item,
+          theme: theme?.item,
           alignment
         })
       );
@@ -37,7 +37,7 @@ function TopBarSide({
       items.push(
         React.cloneElement(child, {
           key: `${child.key}-${i}`,
-          theme: theme?.Navigation,
+          theme: theme?.navigation,
           alignment
         })
       );
@@ -82,11 +82,11 @@ function TopBar({
     if (child.type === TopBarToolName.TopBarToolName) {
       toolName ?? (toolName = React.cloneElement(
         child,
-        { theme: mergedTheme.ToolName, collapseBelow: collapseBelow.toolName }
+        { theme: mergedTheme.toolName, collapseBelow: collapseBelow.toolName }
       ));
     }
     if (child.type === Avatar.Avatar || child.type === AvatarLink.AvatarLink || child.type === AvatarButton.AvatarButton) {
-      avatar ?? (avatar = /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { theme: mergedTheme.Item, alignment: "right", children: child }));
+      avatar ?? (avatar = /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { theme: mergedTheme.item, alignment: "right", children: child }));
     }
     if (child.type === TopBarContainerLeft) {
       leftSide ?? (leftSide = React.cloneElement(
@@ -114,7 +114,7 @@ function TopBar({
             React.cloneElement(
               child,
               {
-                theme: mergedTheme.Navigation,
+                theme: mergedTheme.navigation,
                 alignment: "left",
                 _menuOpen: menuOpen
               }
@@ -124,7 +124,7 @@ function TopBar({
         if (child.type === TopBarItem.TopBarItem) {
           leftSideMenuItems.push(
             React.cloneElement(child, {
-              theme: mergedTheme.Item,
+              theme: mergedTheme.item,
               alignment: "left",
               _menuOpen: menuOpen
             })
@@ -170,7 +170,7 @@ function TopBar({
                         {
                           alignment: "left",
                           size: "sm",
-                          theme: mergedTheme.Item,
+                          theme: mergedTheme.item,
                           "aria-label": "Navigation Menu",
                           children: /* @__PURE__ */ jsxRuntime.jsx(
                             Icon.Icon,

package/dist/components/{topbar → TopBar}/TopBar.js

@@ -3,14 +3,14 @@ import React from 'react';
 import { DialogTrigger, Button, Popover } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { useResize } from '../../util/useResize.js';
-import { Avatar } from '../avatar/Avatar.js';
-import { Icon } from '../icon/Icon.js';
-import { topBarCollapsedNavMenuButtonStyles, topBarCollapsedNavMenuPopoverStyles, topBarContainerStyles, topBarSpacerStyles, topBarStyles, defaultTopBarTheme } from './styles.js';
-import { TopBarItem } from './topBarItem/TopBarItem.js';
-import { TopBarNavigation } from './topBarNavigation/TopBarNavigation.js';
-import { TopBarToolName } from './topBarToolName/TopBarToolName.js';
-import { AvatarLink } from '../avatar-link/AvatarLink.js';
-import { AvatarButton } from '../avatar-button/AvatarButton.js';
+import { Avatar } from '../Avatar/Avatar.js';
+import { Icon } from '../Icon/Icon.js';
+import { defaultTopBarTheme, topBarCollapsedNavMenuButtonStyles, topBarCollapsedNavMenuPopoverStyles, topBarContainerStyles, topBarSpacerStyles, topBarStyles } from './styles.js';
+import { TopBarItem } from './TopBarItem/TopBarItem.js';
+import { TopBarNavigation } from './TopBarNavigation/TopBarNavigation.js';
+import { TopBarToolName } from './TopBarToolName/TopBarToolName.js';
+import { AvatarLink } from '../AvatarLink/AvatarLink.js';
+import { AvatarButton } from '../AvatarButton/AvatarButton.js';
 
 function TopBarSide({ children, alignment, theme }) {
   const items = [];
@@ -21,14 +21,14 @@ function TopBarSide({ children, alignment, theme }) {
     if (child.type === TopBarItem) {
       items.push(React.cloneElement(child, {
         key: `${child.key}-${i}`,
-        theme: theme?.Item,
+        theme: theme?.item,
         alignment
       }));
     }
     if (child.type === TopBarNavigation) {
       items.push(React.cloneElement(child, {
         key: `${child.key}-${i}`,
-        theme: theme?.Navigation,
+        theme: theme?.navigation,
         alignment
       }));
     }
@@ -57,10 +57,10 @@ function TopBar({ children, collapseBelow = {
       return;
     }
     if (child.type === TopBarToolName) {
-      toolName ?? (toolName = React.cloneElement(child, { theme: mergedTheme.ToolName, collapseBelow: collapseBelow.toolName }));
+      toolName ?? (toolName = React.cloneElement(child, { theme: mergedTheme.toolName, collapseBelow: collapseBelow.toolName }));
     }
     if (child.type === Avatar || child.type === AvatarLink || child.type === AvatarButton) {
-      avatar ?? (avatar = jsx(TopBarItem, { theme: mergedTheme.Item, alignment: "right", children: child }));
+      avatar ?? (avatar = jsx(TopBarItem, { theme: mergedTheme.item, alignment: "right", children: child }));
     }
     if (child.type === TopBarContainerLeft) {
       leftSide ?? (leftSide = React.cloneElement(child, { theme: mergedTheme }));
@@ -77,14 +77,14 @@ function TopBar({ children, collapseBelow = {
       }
       if (child.type === TopBarNavigation) {
         leftSideMenuItems.push(React.cloneElement(child, {
-          theme: mergedTheme.Navigation,
+          theme: mergedTheme.navigation,
           alignment: "left",
           _menuOpen: menuOpen
         }));
       }
       if (child.type === TopBarItem) {
         leftSideMenuItems.push(React.cloneElement(child, {
-          theme: mergedTheme.Item,
+          theme: mergedTheme.item,
           alignment: "left",
           _menuOpen: menuOpen
         }));
@@ -100,7 +100,7 @@ function TopBar({ children, collapseBelow = {
     showUntil: collapseBelow.containerLeft
   }), children: jsxs(DialogTrigger, { isOpen: menuOpen, onOpenChange: (isOpen) => {
     setMenuOpen(isOpen);
-  }, children: [jsx(Button, { "aria-label": "Navigation Menu", ref: buttonRef, css: topBarCollapsedNavMenuButtonStyles(mergedTheme, menuOpen), children: jsx(TopBarItem, { alignment: "left", size: "sm", theme: mergedTheme.Item, "aria-label": "Navigation Menu", children: jsx(Icon, { fill: mergedTheme.collapsedNavMenu.button.color, size: "lg", children: menuOpen ? "close" : "menu" }) }) }), jsx(Popover, { css: topBarCollapsedNavMenuPopoverStyles(mergedTheme), offset: mergedTheme.collapsedNavMenu.popover.offset, containerPadding: mergedTheme.collapsedNavMenu.popover.containerPadding, shouldFlip: false, children: leftSideMenuItems })] }) }), jsx("div", { css: topBarContainerStyles(mergedTheme), children: toolName }), jsx("div", { css: topBarContainerStyles(mergedTheme, {
+  }, children: [jsx(Button, { "aria-label": "Navigation Menu", ref: buttonRef, css: topBarCollapsedNavMenuButtonStyles(mergedTheme, menuOpen), children: jsx(TopBarItem, { alignment: "left", size: "sm", theme: mergedTheme.item, "aria-label": "Navigation Menu", children: jsx(Icon, { fill: mergedTheme.collapsedNavMenu.button.color, size: "lg", children: menuOpen ? "close" : "menu" }) }) }), jsx(Popover, { css: topBarCollapsedNavMenuPopoverStyles(mergedTheme), offset: mergedTheme.collapsedNavMenu.popover.offset, containerPadding: mergedTheme.collapsedNavMenu.popover.containerPadding, shouldFlip: false, children: leftSideMenuItems })] }) }), jsx("div", { css: topBarContainerStyles(mergedTheme), children: toolName }), jsx("div", { css: topBarContainerStyles(mergedTheme, {
     collapseBelow: collapseBelow.containerLeft
   }), children: leftSide }), jsx("div", { css: [
     topBarSpacerStyles(mergedTheme),

package/dist/components/{topbar/topBarItem → TopBar/TopBarItem}/TopBarItem.js

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import { mergeDeep } from '../../../util/mergeDeep.js';
-import { topBarItemStyles, defaultTopBarItemTheme } from './styles.js';
+import { defaultTopBarItemTheme, topBarItemStyles } from './styles.js';
 
 function TopBarItem({ children, alignment = "left", theme = {}, cssOverrides, className, size = "md", _menuOpen, ...props }) {
   const mergedTheme = mergeDeep(defaultTopBarItemTheme, theme);

package/dist/components/{topbar/topBarItem → TopBar/TopBarItem}/styles.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
 var react = require('@emotion/react');
-var TopBar = require('../../../styleD/build/typescript/component/TopBar.cjs');
+var topBar = require('../../../styleD/build/typescript/component/topBar.cjs');
 
-const defaultTopBarItemTheme = TopBar.componentTopBar.Item;
+const defaultTopBarItemTheme = topBar.componentTopBar.item;
 const topBarItemStyles = (theme, alignment, { size }, _menuOpen) => {
   return react.css`
 		display: ${theme.display};
-		align-items: ${theme["align-items"]};
+		align-items: ${theme.alignItems};
 		height: ${theme.height};
 		padding: ${theme[size].padding.top} ${theme[size].padding.right}
 			${theme[size].padding.bottom} ${theme[size].padding.left};

package/dist/components/{topbar/topBarItem → TopBar/TopBarItem}/styles.js

@@ -1,11 +1,11 @@
 import { css } from '@emotion/react';
-import { componentTopBar } from '../../../styleD/build/typescript/component/TopBar.js';
+import { componentTopBar } from '../../../styleD/build/typescript/component/topBar.js';
 
-const defaultTopBarItemTheme = componentTopBar.Item;
+const defaultTopBarItemTheme = componentTopBar.item;
 const topBarItemStyles = (theme, alignment, { size }, _menuOpen) => {
   return css`
 		display: ${theme.display};
-		align-items: ${theme["align-items"]};
+		align-items: ${theme.alignItems};
 		height: ${theme.height};
 		padding: ${theme[size].padding.top} ${theme[size].padding.right}
 			${theme[size].padding.bottom} ${theme[size].padding.left};

package/dist/components/{topbar/topBarNavigation → TopBar/TopBarNavigation}/TopBarNavigation.cjs

@@ -3,8 +3,8 @@
 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 Menu = require('../../menu/Menu.cjs');
+var Icon = require('../../Icon/Icon.cjs');
+var Menu = require('../../Menu/Menu.cjs');
 var styles = require('./styles.cjs');
 
 const menuIndicator = "keyboard_arrow_down";

package/dist/components/{topbar/topBarNavigation → TopBar/TopBarNavigation}/TopBarNavigation.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import { Pressable, Link } from 'react-aria-components';
 import { mergeDeep } from '../../../util/mergeDeep.js';
-import { Icon } from '../../icon/Icon.js';
-import { Menu, MenuToggle } from '../../menu/Menu.js';
-import { topBarNavigationTextStyles, topBarMenuIndicatorStyles, topBarNavigationStyles, topBarNavigationTypographyStyles, topBarNavigationDividerStyles, defaultTopBarNavigationTheme } from './styles.js';
+import { Icon } from '../../Icon/Icon.js';
+import { Menu, MenuToggle } from '../../Menu/Menu.js';
+import { defaultTopBarNavigationTheme, topBarNavigationTextStyles, topBarMenuIndicatorStyles, topBarNavigationStyles, topBarNavigationTypographyStyles, topBarNavigationDividerStyles } from './styles.js';
 
 const menuIndicator = "keyboard_arrow_down";
 function TopBarNavigation({ text, size = "md", isSelected = false, icon, menuChildren, href, onPress, isDisabled, alignment = "left", theme = {}, cssOverrides, className, _menuOpen, ...props }) {

package/dist/components/{topbar/topBarNavigation → TopBar/TopBarNavigation}/styles.cjs

@@ -1,15 +1,15 @@
 'use strict';
 
 var react = require('@emotion/react');
-var TopBar = require('../../../styleD/build/typescript/component/TopBar.cjs');
+var topBar = require('../../../styleD/build/typescript/component/topBar.cjs');
 var typography = require('../../../styleD/utils/semantic/typography.cjs');
 
-const defaultTopBarNavigationTheme = TopBar.componentTopBar.Navigation;
+const defaultTopBarNavigationTheme = topBar.componentTopBar.navigation;
 const topBarNavigationStyles = (theme, selected, _menuOpen) => {
   return react.css`
 		display: ${theme.shared.display};
 		position: ${theme.shared.position};
-		align-items: ${theme.shared["align-items"]};
+		align-items: ${theme.shared.alignItems};
 		height: ${theme.shared.height};
 		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
 			${theme.shared.padding.bottom} ${theme.shared.padding.left};
@@ -22,54 +22,54 @@ const topBarNavigationStyles = (theme, selected, _menuOpen) => {
 
 		&[data-focus-visible],
 		&:focus-visible {
-			outline: ${theme.shared[":focus-visible"].outline};
-			outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+			outline: ${theme.shared.focusVisible.outline};
+			outline-offset: ${theme.shared.focusVisible.outlineOffset};
 		}
 
 		&[data-disabled] {
-			cursor: ${theme.shared[":disabled"].cursor};
-			color: ${theme.shared[":disabled"].color};
+			cursor: ${theme.shared.disabled.cursor};
+			color: ${theme.shared.disabled.color};
 		}
 
 		${_menuOpen ? react.css`
-					border-right: ${theme.shared["border-top"]};
-					border-left: ${theme.unselected["border-bottom"]};
+					border-right: ${theme.shared.borderTop};
+					border-left: ${theme.unselected.borderBottom};
 					width: 100%;
 
 					&[data-hovered],
 					&:hover {
-						border-left: ${theme.selected["border-bottom"]};
+						border-left: ${theme.selected.borderBottom};
 					}
 
 					&[data-focus-visible],
 					&:focus-visible {
-						border-left: ${theme.selected["border-bottom"]};
+						border-left: ${theme.selected.borderBottom};
 					}
 
 					${selected && `
-						border-left: ${theme.selected["border-bottom"]};
-						background-color: ${theme.shared._menuOpen.selected["background-color"]};
+						border-left: ${theme.selected.borderBottom};
+						background-color: ${theme.shared._menuOpen.selected.backgroundColor};
 					`}
 				` : react.css`
-					border-top: ${theme.shared["border-top"]};
-					border-bottom: ${theme.unselected["border-bottom"]};
+					border-top: ${theme.shared.borderTop};
+					border-bottom: ${theme.unselected.borderBottom};
 
 					&[data-hovered],
 					&:hover {
-						border-bottom: ${theme.selected["border-bottom"]};
+						border-bottom: ${theme.selected.borderBottom};
 					}
 
 					&[data-focus-visible],
 					&:focus-visible {
-						border-bottom: ${theme.selected["border-bottom"]};
+						border-bottom: ${theme.selected.borderBottom};
 					}
 
 					${selected && `
-						border-bottom: ${theme.selected["border-bottom"]};
+						border-bottom: ${theme.selected.borderBottom};
 					`}
 				`}
 
-		text-decoration: ${theme.shared["text-decoration"]};
+		text-decoration: ${theme.shared.textDecoration};
 	`;
 };
 const topBarNavigationDividerStyles = (theme, { alignment }, _menuOpen) => react.css`

package/dist/components/{topbar/topBarNavigation → TopBar/TopBarNavigation}/styles.js

@@ -1,13 +1,13 @@
 import { css } from '@emotion/react';
-import { componentTopBar } from '../../../styleD/build/typescript/component/TopBar.js';
+import { componentTopBar } from '../../../styleD/build/typescript/component/topBar.js';
 import { convertTypographyToEmotionStringStyle } from '../../../styleD/utils/semantic/typography.js';
 
-const defaultTopBarNavigationTheme = componentTopBar.Navigation;
+const defaultTopBarNavigationTheme = componentTopBar.navigation;
 const topBarNavigationStyles = (theme, selected, _menuOpen) => {
   return css`
 		display: ${theme.shared.display};
 		position: ${theme.shared.position};
-		align-items: ${theme.shared["align-items"]};
+		align-items: ${theme.shared.alignItems};
 		height: ${theme.shared.height};
 		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
 			${theme.shared.padding.bottom} ${theme.shared.padding.left};
@@ -20,54 +20,54 @@ const topBarNavigationStyles = (theme, selected, _menuOpen) => {
 
 		&[data-focus-visible],
 		&:focus-visible {
-			outline: ${theme.shared[":focus-visible"].outline};
-			outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+			outline: ${theme.shared.focusVisible.outline};
+			outline-offset: ${theme.shared.focusVisible.outlineOffset};
 		}
 
 		&[data-disabled] {
-			cursor: ${theme.shared[":disabled"].cursor};
-			color: ${theme.shared[":disabled"].color};
+			cursor: ${theme.shared.disabled.cursor};
+			color: ${theme.shared.disabled.color};
 		}
 
 		${_menuOpen ? css`
-					border-right: ${theme.shared["border-top"]};
-					border-left: ${theme.unselected["border-bottom"]};
+					border-right: ${theme.shared.borderTop};
+					border-left: ${theme.unselected.borderBottom};
 					width: 100%;
 
 					&[data-hovered],
 					&:hover {
-						border-left: ${theme.selected["border-bottom"]};
+						border-left: ${theme.selected.borderBottom};
 					}
 
 					&[data-focus-visible],
 					&:focus-visible {
-						border-left: ${theme.selected["border-bottom"]};
+						border-left: ${theme.selected.borderBottom};
 					}
 
 					${selected && `
-						border-left: ${theme.selected["border-bottom"]};
-						background-color: ${theme.shared._menuOpen.selected["background-color"]};
+						border-left: ${theme.selected.borderBottom};
+						background-color: ${theme.shared._menuOpen.selected.backgroundColor};
 					`}
 				` : css`
-					border-top: ${theme.shared["border-top"]};
-					border-bottom: ${theme.unselected["border-bottom"]};
+					border-top: ${theme.shared.borderTop};
+					border-bottom: ${theme.unselected.borderBottom};
 
 					&[data-hovered],
 					&:hover {
-						border-bottom: ${theme.selected["border-bottom"]};
+						border-bottom: ${theme.selected.borderBottom};
 					}
 
 					&[data-focus-visible],
 					&:focus-visible {
-						border-bottom: ${theme.selected["border-bottom"]};
+						border-bottom: ${theme.selected.borderBottom};
 					}
 
 					${selected && `
-						border-bottom: ${theme.selected["border-bottom"]};
+						border-bottom: ${theme.selected.borderBottom};
 					`}
 				`}
 
-		text-decoration: ${theme.shared["text-decoration"]};
+		text-decoration: ${theme.shared.textDecoration};
 	`;
 };
 const topBarNavigationDividerStyles = (theme, { alignment }, _menuOpen) => css`

package/dist/components/{topbar/topBarToolName → TopBar/TopBarToolName}/TopBarToolName.cjs

@@ -3,9 +3,9 @@
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../../util/mergeDeep.cjs');
-var Favicon = require('../../favicon/Favicon.cjs');
-var Icon = require('../../icon/Icon.cjs');
-var TopBarItem = require('../topBarItem/TopBarItem.cjs');
+var Favicon = require('../../Favicon/Favicon.cjs');
+var Icon = require('../../Icon/Icon.cjs');
+var TopBarItem = require('../TopBarItem/TopBarItem.cjs');
 var styles = require('./styles.cjs');
 
 function ToolName({

package/dist/components/{topbar/topBarToolName → TopBar/TopBarToolName}/TopBarToolName.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
 import { Link } from 'react-aria-components';
 import { mergeDeep } from '../../../util/mergeDeep.js';
-import { Favicon } from '../../favicon/Favicon.js';
-import { Icon } from '../../icon/Icon.js';
-import { TopBarItem } from '../topBarItem/TopBarItem.js';
-import { toolNameHoverLinkTextExpandedStyles, toolNameHoverLinkTextCollapsedStyles, toolNameHoverLinkStyles, toolNameLinkStyles, defaultToolNameTheme, toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles } from './styles.js';
+import { Favicon } from '../../Favicon/Favicon.js';
+import { Icon } from '../../Icon/Icon.js';
+import { TopBarItem } from '../TopBarItem/TopBarItem.js';
+import { defaultToolNameTheme, toolNameHoverLinkTextExpandedStyles, toolNameHoverLinkTextCollapsedStyles, toolNameHoverLinkStyles, toolNameLinkStyles, toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles } from './styles.js';
 
 function ToolName({ name, favicon, subsection, subsectionIcon, collapseBelow = "lg", theme = {}, cssOverrides }) {
   const mergedTheme = mergeDeep(defaultToolNameTheme, theme);

package/dist/components/{topbar/topBarToolName → TopBar/TopBarToolName}/styles.cjs

@@ -1,17 +1,17 @@
 'use strict';
 
 var react = require('@emotion/react');
-var TopBar = require('../../../styleD/build/typescript/component/TopBar.cjs');
+var topBar = require('../../../styleD/build/typescript/component/topBar.cjs');
 var mq = require('../../../styleD/utils/semantic/mq.cjs');
 var typography = require('../../../styleD/utils/semantic/typography.cjs');
 
-const defaultToolNameTheme = TopBar.componentTopBar.ToolName;
+const defaultToolNameTheme = topBar.componentTopBar.toolName;
 const toolNameHoverLinkStyles = (theme, { collapseBelow }) => {
   return react.css`
 		${typography.convertTypographyToEmotionStringStyle(theme.hoverLink.typography)}
 		background-color: ${theme.hoverLink.backgroundColor};
 		color: ${theme.hoverLink.color};
-		align-items: ${theme["align-items"]};
+		align-items: ${theme.alignItems};
 		padding-left: ${theme.hoverLink.paddingLeft};
 		padding-right: ${theme.hoverLink.paddingRight};
 		display: ${theme.display};
@@ -24,7 +24,7 @@ const toolNameHoverLinkStyles = (theme, { collapseBelow }) => {
 		${mq.until[collapseBelow]} {
 			padding-left: ${theme.hoverLink.collapsed.paddingLeft};
 			padding-right: ${theme.hoverLink.collapsed.paddingRight};
-			justify-content: ${theme.hoverLink.collapsed["justify-content"]};
+			justify-content: ${theme.hoverLink.collapsed.justifyContent};
 		}
 	`;
 };
@@ -65,14 +65,14 @@ const toolNameLinkStyles = (theme) => {
 
 		&[data-focus-visible] {
 			outline: ${theme.hoverLink.focused.outline};
-			outline-offset: ${theme.hoverLink.focused["outline-offset"]};
+			outline-offset: ${theme.hoverLink.focused.outlineOffset};
 		}
 	`;
 };
 const toolNameStyles = (theme) => {
   return react.css`
 		display: ${theme.display};
-		align-items: ${theme["align-items"]};
+		align-items: ${theme.alignItems};
 		gap: ${theme.gap};
 		color: ${theme.color};
 	`;
@@ -97,7 +97,7 @@ const dividerStyles = (theme, { collapseBelow }) => {
 const subsectionStyles = (theme, { collapseBelow }) => {
   return react.css`
 		display: ${theme.display};
-		align-items: ${theme["align-items"]};
+		align-items: ${theme.alignItems};
 		gap: ${theme.subsection.gap};
 		${mq.until[collapseBelow]} {
 			display: none;

package/dist/components/{topbar/topBarToolName → TopBar/TopBarToolName}/styles.js

@@ -1,15 +1,15 @@
 import { css } from '@emotion/react';
-import { componentTopBar } from '../../../styleD/build/typescript/component/TopBar.js';
+import { componentTopBar } from '../../../styleD/build/typescript/component/topBar.js';
 import { until } from '../../../styleD/utils/semantic/mq.js';
 import { convertTypographyToEmotionStringStyle } from '../../../styleD/utils/semantic/typography.js';
 
-const defaultToolNameTheme = componentTopBar.ToolName;
+const defaultToolNameTheme = componentTopBar.toolName;
 const toolNameHoverLinkStyles = (theme, { collapseBelow }) => {
   return css`
 		${convertTypographyToEmotionStringStyle(theme.hoverLink.typography)}
 		background-color: ${theme.hoverLink.backgroundColor};
 		color: ${theme.hoverLink.color};
-		align-items: ${theme["align-items"]};
+		align-items: ${theme.alignItems};
 		padding-left: ${theme.hoverLink.paddingLeft};
 		padding-right: ${theme.hoverLink.paddingRight};
 		display: ${theme.display};
@@ -22,7 +22,7 @@ const toolNameHoverLinkStyles = (theme, { collapseBelow }) => {
 		${until[collapseBelow]} {
 			padding-left: ${theme.hoverLink.collapsed.paddingLeft};
 			padding-right: ${theme.hoverLink.collapsed.paddingRight};
-			justify-content: ${theme.hoverLink.collapsed["justify-content"]};
+			justify-content: ${theme.hoverLink.collapsed.justifyContent};
 		}
 	`;
 };
@@ -59,14 +59,14 @@ const toolNameLinkStyles = (theme) => {
 
 		&[data-focus-visible] {
 			outline: ${theme.hoverLink.focused.outline};
-			outline-offset: ${theme.hoverLink.focused["outline-offset"]};
+			outline-offset: ${theme.hoverLink.focused.outlineOffset};
 		}
 	`;
 };
 const toolNameStyles = (theme) => {
   return css`
 		display: ${theme.display};
-		align-items: ${theme["align-items"]};
+		align-items: ${theme.alignItems};
 		gap: ${theme.gap};
 		color: ${theme.color};
 	`;
@@ -91,7 +91,7 @@ const dividerStyles = (theme, { collapseBelow }) => {
 const subsectionStyles = (theme, { collapseBelow }) => {
   return css`
 		display: ${theme.display};
-		align-items: ${theme["align-items"]};
+		align-items: ${theme.alignItems};
 		gap: ${theme.subsection.gap};
 		${until[collapseBelow]} {
 			display: none;

package/dist/components/{topbar → TopBar}/styles.cjs

@@ -1,20 +1,20 @@
 'use strict';
 
 var react = require('@emotion/react');
-var TopBar = require('../../styleD/build/typescript/component/TopBar.cjs');
+var topBar = require('../../styleD/build/typescript/component/topBar.cjs');
 var mq = require('../../styleD/utils/semantic/mq.cjs');
 
-const defaultTopBarTheme = TopBar.componentTopBar;
+const defaultTopBarTheme = topBar.componentTopBar;
 const topBarStyles = (theme) => {
   return react.css`
-		background-color: ${theme["background-color"]};
+		background-color: ${theme.backgroundColor};
 		height: ${theme.height};
-		border-top: ${theme["border-top"]};
-		border-right: ${theme["border-right"]};
-		border-bottom: ${theme["border-bottom"]};
-		border-left: ${theme["border-left"]};
+		border-top: ${theme.borderTop};
+		border-right: ${theme.borderRight};
+		border-bottom: ${theme.borderBottom};
+		border-left: ${theme.borderLeft};
 		display: ${theme.display};
-		justify-content: ${theme["justify-content"]};
+		justify-content: ${theme.justifyContent};
 	`;
 };
 const topBarContainerStyles = (theme, {
@@ -39,7 +39,7 @@ const topBarContainerStyles = (theme, {
 };
 const topBarSpacerStyles = (theme) => {
   return react.css`
-		margin-left: ${theme.spacer["margin-left"]};
+		margin-left: ${theme.spacer.marginLeft};
 	`;
 };
 const topBarCollapsedNavMenuButtonStyles = (theme, menuOpen) => {
@@ -51,17 +51,17 @@ const topBarCollapsedNavMenuButtonStyles = (theme, menuOpen) => {
 		cursor: ${theme.collapsedNavMenu.button.cursor};
 
 		&[data-hovered] {
-			background-color: ${theme.collapsedNavMenu.button.hovered["background-color"]};
+			background-color: ${theme.collapsedNavMenu.button.hovered.backgroundColor};
 		}
 
 		${menuOpen && react.css`
-			background-color: ${theme.collapsedNavMenu.button.active["background-color"]};
+			background-color: ${theme.collapsedNavMenu.button.active.backgroundColor};
 		`}
 	`;
 };
 const topBarCollapsedNavMenuPopoverStyles = (theme) => {
   return react.css`
-		background-color: ${theme.collapsedNavMenu.popover["background-color"]};
+		background-color: ${theme.collapsedNavMenu.popover.backgroundColor};
 		border-left: ${theme.collapsedNavMenu.popover.border};
 		border-right: ${theme.collapsedNavMenu.popover.border};
 	`;