@guardian/stand 0.0.37 → 0.0.39

package/dist/{alert-banner.cjs → AlertBanner.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var AlertBanner = require('./components/alert-banner/AlertBanner.cjs');
+var AlertBanner = require('./components/AlertBanner/AlertBanner.cjs');
 var alertBanner = require('./styleD/build/typescript/component/alertBanner.cjs');
 
 

package/dist/{alert-banner.js → AlertBanner.js}

@@ -1,2 +1,2 @@
-export { AlertBanner } from './components/alert-banner/AlertBanner.js';
+export { AlertBanner } from './components/AlertBanner/AlertBanner.js';
 export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner.js';

package/dist/{avatar.cjs → Avatar.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var Avatar = require('./components/avatar/Avatar.cjs');
+var Avatar = require('./components/Avatar/Avatar.cjs');
 var avatar = require('./styleD/build/typescript/component/avatar.cjs');
 
 

package/dist/{avatar.js → Avatar.js}

@@ -1,2 +1,2 @@
-export { Avatar } from './components/avatar/Avatar.js';
+export { Avatar } from './components/Avatar/Avatar.js';
 export { componentAvatar } from './styleD/build/typescript/component/avatar.js';

package/dist/AvatarButton.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var AvatarButton = require('./components/AvatarButton/AvatarButton.cjs');
+
+
+
+exports.AvatarButton = AvatarButton.AvatarButton;

package/dist/AvatarButton.js

@@ -0,0 +1 @@
+export { AvatarButton } from './components/AvatarButton/AvatarButton.js';

package/dist/AvatarLink.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var AvatarLink = require('./components/AvatarLink/AvatarLink.cjs');
+
+
+
+exports.AvatarLink = AvatarLink.AvatarLink;

package/dist/AvatarLink.js

@@ -0,0 +1 @@
+export { AvatarLink } from './components/AvatarLink/AvatarLink.js';

package/dist/{button.cjs → Button.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var Button = require('./components/button/Button.cjs');
+var Button = require('./components/Button/Button.cjs');
 var button = require('./styleD/build/typescript/component/button.cjs');
 
 

package/dist/{button.js → Button.js}

@@ -1,2 +1,2 @@
-export { Button } from './components/button/Button.js';
+export { Button } from './components/Button/Button.js';
 export { componentButton } from './styleD/build/typescript/component/button.js';

package/dist/{byline.cjs → Byline.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var Byline = require('./components/byline/Byline.cjs');
+var Byline = require('./components/Byline/Byline.cjs');
 var byline = require('./styleD/build/typescript/component/byline.cjs');
 
 

package/dist/{byline.js → Byline.js}

@@ -1,2 +1,2 @@
-export { Byline } from './components/byline/Byline.js';
+export { Byline } from './components/Byline/Byline.js';
 export { componentByline } from './styleD/build/typescript/component/byline.js';

package/dist/{checkbox.cjs → Checkbox.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var Checkbox = require('./components/checkbox/Checkbox.cjs');
-var CheckboxGroup = require('./components/checkbox/CheckboxGroup.cjs');
+var Checkbox = require('./components/Checkbox/Checkbox.cjs');
+var CheckboxGroup = require('./components/Checkbox/CheckboxGroup.cjs');
 var checkbox = require('./styleD/build/typescript/component/checkbox.cjs');
 
 

package/dist/Checkbox.js

@@ -0,0 +1,3 @@
+export { Checkbox } from './components/Checkbox/Checkbox.js';
+export { CheckboxGroup } from './components/Checkbox/CheckboxGroup.js';
+export { componentCheckbox } from './styleD/build/typescript/component/checkbox.js';

package/dist/{date-picker.cjs → DatePicker.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var DatePicker = require('./components/date-picker/DatePicker.cjs');
+var DatePicker = require('./components/DatePicker/DatePicker.cjs');
 var datePicker = require('./styleD/build/typescript/component/datePicker.cjs');
 
 

package/dist/{date-picker.js → DatePicker.js}

@@ -1,2 +1,2 @@
-export { DatePicker } from './components/date-picker/DatePicker.js';
+export { DatePicker } from './components/DatePicker/DatePicker.js';
 export { componentDatePicker } from './styleD/build/typescript/component/datePicker.js';

package/dist/{favicon.cjs → Favicon.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var Favicon = require('./components/favicon/Favicon.cjs');
+var Favicon = require('./components/Favicon/Favicon.cjs');
 var favicon = require('./styleD/build/typescript/component/favicon.cjs');
 
 

package/dist/{favicon.js → Favicon.js}

@@ -1,2 +1,2 @@
-export { Favicon } from './components/favicon/Favicon.js';
+export { Favicon } from './components/Favicon/Favicon.js';
 export { componentFavicon } from './styleD/build/typescript/component/favicon.js';

package/dist/{grid.cjs → Grid.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var Grid = require('./components/grid/Grid.cjs');
+var Grid = require('./components/Grid/Grid.cjs');
 var grid = require('./styleD/build/typescript/component/grid.cjs');
 
 

package/dist/{grid.js → Grid.js}

@@ -1,2 +1,2 @@
-export { Grid, Item } from './components/grid/Grid.js';
+export { Grid, Item } from './components/Grid/Grid.js';
 export { componentGrid } from './styleD/build/typescript/component/grid.js';

package/dist/{icon.cjs → Icon.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var Icon = require('./components/icon/Icon.cjs');
+var Icon = require('./components/Icon/Icon.cjs');
 var icon = require('./styleD/build/typescript/component/icon.cjs');
 
 

package/dist/{icon.js → Icon.js}

@@ -1,2 +1,2 @@
-export { Icon } from './components/icon/Icon.js';
+export { Icon } from './components/Icon/Icon.js';
 export { componentIcon } from './styleD/build/typescript/component/icon.js';

package/dist/IconButton.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var IconButton = require('./components/IconButton/IconButton.cjs');
+
+
+
+exports.IconButton = IconButton.IconButton;

package/dist/IconButton.js

@@ -0,0 +1 @@
+export { IconButton } from './components/IconButton/IconButton.js';

package/dist/IconLinkButton.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var IconLinkButton = require('./components/IconLinkButton/IconLinkButton.cjs');
+
+
+
+exports.IconLinkButton = IconLinkButton.IconLinkButton;

package/dist/IconLinkButton.js

@@ -0,0 +1 @@
+export { IconLinkButton } from './components/IconLinkButton/IconLinkButton.js';

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var InlineMessage = require('./components/inline-message/InlineMessage.cjs');
+var InlineMessage = require('./components/InlineMessage/InlineMessage.cjs');
 var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
 
 

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

@@ -1,2 +1,2 @@
-export { InlineMessage } from './components/inline-message/InlineMessage.js';
+export { InlineMessage } from './components/InlineMessage/InlineMessage.js';
 export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var IntendedAudienceSignifier = require('./components/intended-audience-signifier/IntendedAudienceSignifier.cjs');
+var IntendedAudienceSignifier = require('./components/IntendedAudienceSignifier/IntendedAudienceSignifier.cjs');
 var intendedAudienceSignifier = require('./styleD/build/typescript/component/intendedAudienceSignifier.cjs');
 
 

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

@@ -1,2 +1,2 @@
-export { IntendedAudienceSignifier } from './components/intended-audience-signifier/IntendedAudienceSignifier.js';
+export { IntendedAudienceSignifier } from './components/IntendedAudienceSignifier/IntendedAudienceSignifier.js';
 export { componentIntendedAudienceSignifier } from './styleD/build/typescript/component/intendedAudienceSignifier.js';

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

@@ -1,10 +1,9 @@
 'use strict';
 
-var Layout = require('./components/layout/Layout.cjs');
+var Layout = require('./components/Layout/Layout.cjs');
 var layout = require('./styleD/build/typescript/component/layout.cjs');
 
 
 
 exports.Layout = Layout.Layout;
-exports.Sidebar = Layout.Sidebar;
 exports.componentLayout = layout.componentLayout;

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

@@ -1,2 +1,2 @@
-export { Layout, Sidebar } from './components/layout/Layout.js';
+export { Layout } from './components/Layout/Layout.js';
 export { componentLayout } from './styleD/build/typescript/component/layout.js';

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var Link = require('./components/link/Link.cjs');
+var Link = require('./components/Link/Link.cjs');
 var link = require('./styleD/build/typescript/component/link.cjs');
 
 

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

@@ -1,2 +1,2 @@
-export { Link } from './components/link/Link.js';
+export { Link } from './components/Link/Link.js';
 export { componentLink } from './styleD/build/typescript/component/link.js';

package/dist/LinkButton.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var LinkButton = require('./components/LinkButton/LinkButton.cjs');
+
+
+
+exports.LinkButton = LinkButton.LinkButton;

package/dist/LinkButton.js

@@ -0,0 +1 @@
+export { LinkButton } from './components/LinkButton/LinkButton.js';

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var Menu = require('./components/menu/Menu.cjs');
+var Menu = require('./components/Menu/Menu.cjs');
 var menu = require('./styleD/build/typescript/component/menu.cjs');
 
 

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

@@ -1,2 +1,2 @@
-export { Menu, MenuItem, MenuSection, MenuSeparator, MenuToggle } from './components/menu/Menu.js';
+export { Menu, MenuItem, MenuSection, MenuSeparator, MenuToggle } from './components/Menu/Menu.js';
 export { componentMenu } from './styleD/build/typescript/component/menu.js';

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var RadioGroup = require('./components/radio-group/RadioGroup.cjs');
+var RadioGroup = require('./components/RadioGroup/RadioGroup.cjs');
 var radioGroup = require('./styleD/build/typescript/component/radioGroup.cjs');
 
 

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

@@ -1,2 +1,2 @@
-export { Radio, RadioGroup } from './components/radio-group/RadioGroup.js';
+export { Radio, RadioGroup } from './components/RadioGroup/RadioGroup.js';
 export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup.js';

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var Select = require('./components/select/Select.cjs');
+var Select = require('./components/Select/Select.cjs');
 var select = require('./styleD/build/typescript/component/select.cjs');
 
 

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

@@ -1,2 +1,2 @@
-export { Option, Select } from './components/select/Select.js';
+export { Option, Select } from './components/Select/Select.js';
 export { componentSelect } from './styleD/build/typescript/component/select.js';

package/dist/{tag-picker.cjs → TagPicker.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
-var Autocomplete = require('./components/tag-picker/Autocomplete.cjs');
-var TagAutocomplete = require('./components/tag-picker/TagAutocomplete.cjs');
-var TagTable = require('./components/tag-picker/TagTable.cjs');
+var Autocomplete = require('./components/TagPicker/Autocomplete.cjs');
+var TagAutocomplete = require('./components/TagPicker/TagAutocomplete.cjs');
+var TagTable = require('./components/TagPicker/TagTable.cjs');
 var autocomplete = require('./styleD/build/typescript/component/autocomplete.cjs');
 var tagTable = require('./styleD/build/typescript/component/tagTable.cjs');
 

package/dist/TagPicker.js

@@ -0,0 +1,5 @@
+export { Autocomplete } from './components/TagPicker/Autocomplete.js';
+export { TagAutocomplete } from './components/TagPicker/TagAutocomplete.js';
+export { TagTable } from './components/TagPicker/TagTable.js';
+export { componentAutocomplete } from './styleD/build/typescript/component/autocomplete.js';
+export { componentTagTable } from './styleD/build/typescript/component/tagTable.js';

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var TextArea = require('./components/text-area/TextArea.cjs');
+var TextArea = require('./components/TextArea/TextArea.cjs');
 var textArea = require('./styleD/build/typescript/component/textArea.cjs');
 
 

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

@@ -1,2 +1,2 @@
-export { TextArea } from './components/text-area/TextArea.js';
+export { TextArea } from './components/TextArea/TextArea.js';
 export { componentTextArea } from './styleD/build/typescript/component/textArea.js';

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var TextInput = require('./components/text-input/TextInput.cjs');
+var TextInput = require('./components/TextInput/TextInput.cjs');
 var textInput = require('./styleD/build/typescript/component/textInput.cjs');
 
 

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

@@ -1,2 +1,2 @@
-export { TextInput } from './components/text-input/TextInput.js';
+export { TextInput } from './components/TextInput/TextInput.js';
 export { componentTextInput } from './styleD/build/typescript/component/textInput.js';

package/dist/TopBar.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
-var TopBar$1 = require('./styleD/build/typescript/component/TopBar.cjs');
-var TopBarToolName = require('./components/topbar/topBarToolName/TopBarToolName.cjs');
-var TopBarNavigation = require('./components/topbar/topBarNavigation/TopBarNavigation.cjs');
-var TopBarItem = require('./components/topbar/topBarItem/TopBarItem.cjs');
-var TopBar = require('./components/topbar/TopBar.cjs');
+var topBar = require('./styleD/build/typescript/component/topBar.cjs');
+var TopBarToolName = require('./components/TopBar/TopBarToolName/TopBarToolName.cjs');
+var TopBarNavigation = require('./components/TopBar/TopBarNavigation/TopBarNavigation.cjs');
+var TopBarItem = require('./components/TopBar/TopBarItem/TopBarItem.cjs');
+var TopBar = require('./components/TopBar/TopBar.cjs');
 
 
 
-exports.componentTopBar = TopBar$1.componentTopBar;
+exports.componentTopBar = topBar.componentTopBar;
 exports.TopBarToolName = TopBarToolName.TopBarToolName;
 exports.TopBarNavigation = TopBarNavigation.TopBarNavigation;
 exports.TopBarItem = TopBarItem.TopBarItem;

package/dist/TopBar.js

@@ -1,5 +1,5 @@
-export { componentTopBar } from './styleD/build/typescript/component/TopBar.js';
-export { TopBarToolName } from './components/topbar/topBarToolName/TopBarToolName.js';
-export { TopBarNavigation } from './components/topbar/topBarNavigation/TopBarNavigation.js';
-export { TopBarItem } from './components/topbar/topBarItem/TopBarItem.js';
-export { TopBar, TopBarContainerLeft, TopBarContainerRight } from './components/topbar/TopBar.js';
+export { componentTopBar } from './styleD/build/typescript/component/topBar.js';
+export { TopBarToolName } from './components/TopBar/TopBarToolName/TopBarToolName.js';
+export { TopBarNavigation } from './components/TopBar/TopBarNavigation/TopBarNavigation.js';
+export { TopBarItem } from './components/TopBar/TopBarItem/TopBarItem.js';
+export { TopBar, TopBarContainerLeft, TopBarContainerRight } from './components/TopBar/TopBar.js';

package/dist/{typography.cjs → Typography.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var Typography = require('./components/typography/Typography.cjs');
+var Typography = require('./components/Typography/Typography.cjs');
 var typography = require('./styleD/build/typescript/component/typography.cjs');
 
 

package/dist/{typography.js → Typography.js}

@@ -1,2 +1,2 @@
-export { Typography } from './components/typography/Typography.js';
+export { Typography } from './components/Typography/Typography.js';
 export { componentTypography } from './styleD/build/typescript/component/typography.js';

package/dist/{user-menu.cjs → UserMenu.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var UserMenu = require('./components/user-menu/UserMenu.cjs');
+var UserMenu = require('./components/UserMenu/UserMenu.cjs');
 var userMenu = require('./styleD/build/typescript/component/userMenu.cjs');
 
 

package/dist/{user-menu.js → UserMenu.js}

@@ -1,2 +1,2 @@
-export { UserMenu } from './components/user-menu/UserMenu.js';
+export { UserMenu } from './components/UserMenu/UserMenu.js';
 export { componentUserMenu } from './styleD/build/typescript/component/userMenu.js';

package/dist/components/{alert-banner → AlertBanner}/AlertBanner.cjs

@@ -4,8 +4,8 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 var mergeDeep = require('../../util/mergeDeep.cjs');
 var styles = require('./styles.cjs');
-var Icon = require('../icon/Icon.cjs');
-var IconButton = require('../icon-button/IconButton.cjs');
+var Icon = require('../Icon/Icon.cjs');
+var IconButton = require('../IconButton/IconButton.cjs');
 
 function AlertBanner({
   level,

package/dist/components/{alert-banner → AlertBanner}/AlertBanner.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import { useMemo } from 'react';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { alertBannerContentStyles, alertBannerStyles, defaultAlertBannerTheme } from './styles.js';
-import { Icon } from '../icon/Icon.js';
-import { IconButton } from '../icon-button/IconButton.js';
+import { defaultAlertBannerTheme, alertBannerContentStyles, alertBannerStyles } from './styles.js';
+import { Icon } from '../Icon/Icon.js';
+import { IconButton } from '../IconButton/IconButton.js';
 
 function AlertBanner({ level, showIcon = false, icon, closeButtonProps, children, theme = {}, cssOverrides, className, ...props }) {
   const mergedTheme = mergeDeep(defaultAlertBannerTheme, theme);

package/dist/components/{alert-banner → AlertBanner}/styles.cjs

@@ -8,22 +8,22 @@ const defaultAlertBannerTheme = alertBanner.componentAlertBanner;
 const alertBannerStyles = (theme, { level }) => {
   return react.css`
 		display: ${theme.shared.display};
-		align-items: ${theme.shared["align-items"]};
-		justify-content: ${theme.shared["justify-content"]};
+		align-items: ${theme.shared.alignItems};
+		justify-content: ${theme.shared.justifyContent};
 		width: ${theme.shared.width};
 		height: ${theme.shared.height};
 		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
 			${theme.shared.padding.bottom} ${theme.shared.padding.left};
-		background-color: ${theme[level]["background-color"]};
+		background-color: ${theme[level].backgroundColor};
 	`;
 };
 const alertBannerContentStyles = (theme) => {
   return react.css`
 		display: ${theme.shared.content.display};
-		justify-content: ${theme.shared.content["justify-content"]};
+		justify-content: ${theme.shared.content.justifyContent};
 		gap: ${theme.shared.content.gap};
 		height: ${theme.shared.content.height};
-		align-items: ${theme.shared.content["align-items"]};
+		align-items: ${theme.shared.content.alignItems};
 		flex: ${theme.shared.content.flex};
 		color: ${theme.shared.content.color};
 		${typography.convertTypographyToEmotionStringStyle(theme.shared.content.typography)}

package/dist/components/{alert-banner → AlertBanner}/styles.js

@@ -6,22 +6,22 @@ const defaultAlertBannerTheme = componentAlertBanner;
 const alertBannerStyles = (theme, { level }) => {
   return css`
 		display: ${theme.shared.display};
-		align-items: ${theme.shared["align-items"]};
-		justify-content: ${theme.shared["justify-content"]};
+		align-items: ${theme.shared.alignItems};
+		justify-content: ${theme.shared.justifyContent};
 		width: ${theme.shared.width};
 		height: ${theme.shared.height};
 		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
 			${theme.shared.padding.bottom} ${theme.shared.padding.left};
-		background-color: ${theme[level]["background-color"]};
+		background-color: ${theme[level].backgroundColor};
 	`;
 };
 const alertBannerContentStyles = (theme) => {
   return css`
 		display: ${theme.shared.content.display};
-		justify-content: ${theme.shared.content["justify-content"]};
+		justify-content: ${theme.shared.content.justifyContent};
 		gap: ${theme.shared.content.gap};
 		height: ${theme.shared.content.height};
-		align-items: ${theme.shared.content["align-items"]};
+		align-items: ${theme.shared.content.alignItems};
 		flex: ${theme.shared.content.flex};
 		color: ${theme.shared.content.color};
 		${convertTypographyToEmotionStringStyle(theme.shared.content.typography)}

package/dist/components/{avatar → Avatar}/Avatar.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from '@emotion/react/jsx-runtime';
 import { useState } from 'react';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { avatarImageStyles, avatarStyles, defaultAvatarTheme } from './styles.js';
+import { defaultAvatarTheme, avatarImageStyles, avatarStyles } from './styles.js';
 import { avatarColors } from './types.js';
 
 const getColorFromString = (input) => {

package/dist/components/{avatar → Avatar}/styles.cjs

@@ -13,21 +13,21 @@ const avatarImageStyles = react.css`
 const avatarStyles = (theme, { size, color }) => {
   return react.css`
 		display: ${theme.shared.display};
-		align-items: ${theme.shared["align-items"]};
-		justify-content: ${theme.shared["justify-content"]};
+		align-items: ${theme.shared.alignItems};
+		justify-content: ${theme.shared.justifyContent};
 		overflow: ${theme.shared.overflow};
-		flex-shrink: ${theme.shared["flex-shrink"]};
-		border-radius: ${theme.shared["border-radius"]};
+		flex-shrink: ${theme.shared.flexShrink};
+		border-radius: ${theme.shared.borderRadius};
 		background-color: ${theme.shared.color[color].background};
 		width: ${theme[size].size};
 		height: ${theme[size].size};
 		border: ${theme.shared.color[color].border};
-		user-select: ${theme.shared["user-select"]};
+		user-select: ${theme.shared.userSelect};
 		color: ${theme.shared.color[color].text};
 		${typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
 
 		&[data-avatar-context='interactive']:hover {
-			background-color: ${theme.shared.color[color][":hover"].background};
+			background-color: ${theme.shared.color[color].hover.background};
 
 			:has(> img) {
 				background-color: black;
@@ -39,7 +39,7 @@ const avatarStyles = (theme, { size, color }) => {
 		}
 
 		&[data-avatar-context='interactive']:active {
-			background-color: ${theme.shared.color[color][":active"].background};
+			background-color: ${theme.shared.color[color].active.background};
 
 			:has(> img) {
 				background-color: black;

package/dist/components/{avatar → Avatar}/styles.js

@@ -11,21 +11,21 @@ const avatarImageStyles = css`
 const avatarStyles = (theme, { size, color }) => {
   return css`
 		display: ${theme.shared.display};
-		align-items: ${theme.shared["align-items"]};
-		justify-content: ${theme.shared["justify-content"]};
+		align-items: ${theme.shared.alignItems};
+		justify-content: ${theme.shared.justifyContent};
 		overflow: ${theme.shared.overflow};
-		flex-shrink: ${theme.shared["flex-shrink"]};
-		border-radius: ${theme.shared["border-radius"]};
+		flex-shrink: ${theme.shared.flexShrink};
+		border-radius: ${theme.shared.borderRadius};
 		background-color: ${theme.shared.color[color].background};
 		width: ${theme[size].size};
 		height: ${theme[size].size};
 		border: ${theme.shared.color[color].border};
-		user-select: ${theme.shared["user-select"]};
+		user-select: ${theme.shared.userSelect};
 		color: ${theme.shared.color[color].text};
 		${convertTypographyToEmotionStringStyle(theme[size].typography)}
 
 		&[data-avatar-context='interactive']:hover {
-			background-color: ${theme.shared.color[color][":hover"].background};
+			background-color: ${theme.shared.color[color].hover.background};
 
 			:has(> img) {
 				background-color: black;
@@ -37,7 +37,7 @@ const avatarStyles = (theme, { size, color }) => {
 		}
 
 		&[data-avatar-context='interactive']:active {
-			background-color: ${theme.shared.color[color][":active"].background};
+			background-color: ${theme.shared.color[color].active.background};
 
 			:has(> img) {
 				background-color: black;

package/dist/components/{avatar → Avatar}/types.cjs

@@ -6,8 +6,8 @@ const avatarColors = [
   "red",
   "cyan",
   "teal",
-  "cool-purple",
-  "warm-purple",
+  "coolPurple",
+  "warmPurple",
   "magenta",
   "orange",
   "yellow"

package/dist/components/{avatar → Avatar}/types.js

@@ -4,8 +4,8 @@ const avatarColors = [
   "red",
   "cyan",
   "teal",
-  "cool-purple",
-  "warm-purple",
+  "coolPurple",
+  "warmPurple",
   "magenta",
   "orange",
   "yellow"