npm - @guardian/stand - Versions diffs - 0.0.38 → 0.0.39 - Mend

@guardian/stand 0.0.38 → 0.0.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (475) hide show

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

@@ -2,8 +2,8 @@ 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 { FormInputContainer } from '../Form/Form.js';
+import { Icon } from '../Icon/Icon.js';
 import { defaultSelectTheme, listBoxItemStyles, buttonStyles, popoverStyles, listBoxStyles } from './styles.js';
 function Option({ children, theme = {} }) {

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

@@ -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 RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -1,7 +1,7 @@
 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 { FormInputContainer } from '../Form/Form.js';
 import { defaultTextAreaTheme, textAreaStyles } from './styles.js';
 function TextArea({ size = "md", isInvalid = false, theme = {}, placeholder, ...props }) {

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

@@ -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 RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -1,7 +1,7 @@
 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 { FormInputContainer } from '../Form/Form.js';
 import { defaultTextInputTheme, textInputStyles } from './styles.js';
 function TextInput({ size = "md", isInvalid = false, theme = {}, placeholder, ...props }) {

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

@@ -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};

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

@@ -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 RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -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 { 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 '../avatar-link/AvatarLink.js';
-import { AvatarButton } from '../avatar-button/AvatarButton.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}/styles.cjs RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -1,8 +1,8 @@
 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 { 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";

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

@@ -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 RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -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 RENAMED Viewed

@@ -1,9 +1,9 @@
 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 { 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 }) {

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

@@ -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;