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/{avatar-button → AvatarButton}/styles.cjs RENAMED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 var react = require('@emotion/react');
-var styles = require('../avatar/styles.cjs');
+var styles = require('../Avatar/styles.cjs');
 const defaultAvatarButtonTheme = styles.defaultAvatarTheme;
 const avatarButtonStyles = (theme) => {
@@ -14,13 +14,13 @@ const avatarButtonStyles = (theme) => {
 		cursor: ${theme.shared.button.cursor};
 		&[data-focus-visible],
 		&:focus-visible {
-			outline: ${theme.shared.link[":focus-visible"].outline};
-			outline-offset: ${theme.shared.link[":focus-visible"]["outline-offset"]};
-			border-radius: ${theme.shared["border-radius"]};
+			outline: ${theme.shared.link.focusVisible.outline};
+			outline-offset: ${theme.shared.link.focusVisible.outlineOffset};
+			border-radius: ${theme.shared.borderRadius};
 		}
 		&[data-disabled],
 		&:disabled {
-			cursor: ${theme.shared.button[":disabled"].cursor};
+			cursor: ${theme.shared.button.disabled.cursor};
 		}
 	`;
 };

package/dist/components/{avatar-button → AvatarButton}/styles.js RENAMED Viewed

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { defaultAvatarTheme } from '../avatar/styles.js';
+import { defaultAvatarTheme } from '../Avatar/styles.js';
 const defaultAvatarButtonTheme = defaultAvatarTheme;
 const avatarButtonStyles = (theme) => {
@@ -12,13 +12,13 @@ const avatarButtonStyles = (theme) => {
 		cursor: ${theme.shared.button.cursor};
 		&[data-focus-visible],
 		&:focus-visible {
-			outline: ${theme.shared.link[":focus-visible"].outline};
-			outline-offset: ${theme.shared.link[":focus-visible"]["outline-offset"]};
-			border-radius: ${theme.shared["border-radius"]};
+			outline: ${theme.shared.link.focusVisible.outline};
+			outline-offset: ${theme.shared.link.focusVisible.outlineOffset};
+			border-radius: ${theme.shared.borderRadius};
 		}
 		&[data-disabled],
 		&:disabled {
-			cursor: ${theme.shared.button[":disabled"].cursor};
+			cursor: ${theme.shared.button.disabled.cursor};
 		}
 	`;
 };

package/dist/components/{avatar-link → AvatarLink}/AvatarLink.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 Avatar = require('../avatar/Avatar.cjs');
+var Avatar = require('../Avatar/Avatar.cjs');
 var styles = require('./styles.cjs');
 function AvatarLink(props) {

package/dist/components/{avatar-link → AvatarLink}/AvatarLink.js RENAMED Viewed

@@ -1,7 +1,7 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import { Link } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { Avatar } from '../avatar/Avatar.js';
+import { Avatar } from '../Avatar/Avatar.js';
 import { defaultAvatarLinkTheme, avatarLinkStyles } from './styles.js';
 function AvatarLink(props) {

package/dist/components/{avatar-link → AvatarLink}/styles.cjs RENAMED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 var react = require('@emotion/react');
-var styles = require('../avatar/styles.cjs');
+var styles = require('../Avatar/styles.cjs');
 const defaultAvatarLinkTheme = styles.defaultAvatarTheme;
 const avatarLinkStyles = (theme) => {
@@ -11,12 +11,12 @@ const avatarLinkStyles = (theme) => {
 		&[data-focus-visible],
 		&:focus-visible {
-			outline: ${theme.shared.link[":focus-visible"].outline};
-			outline-offset: ${theme.shared.link[":focus-visible"]["outline-offset"]};
-			border-radius: ${theme.shared["border-radius"]};
+			outline: ${theme.shared.link.focusVisible.outline};
+			outline-offset: ${theme.shared.link.focusVisible.outlineOffset};
+			border-radius: ${theme.shared.borderRadius};
 		}
-		text-decoration: ${theme.shared.link["text-decoration"]};
+		text-decoration: ${theme.shared.link.textDecoration};
 	`;
 };

package/dist/components/{avatar-link → AvatarLink}/styles.js RENAMED Viewed

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { defaultAvatarTheme } from '../avatar/styles.js';
+import { defaultAvatarTheme } from '../Avatar/styles.js';
 const defaultAvatarLinkTheme = defaultAvatarTheme;
 const avatarLinkStyles = (theme) => {
@@ -9,12 +9,12 @@ const avatarLinkStyles = (theme) => {
 		&[data-focus-visible],
 		&:focus-visible {
-			outline: ${theme.shared.link[":focus-visible"].outline};
-			outline-offset: ${theme.shared.link[":focus-visible"]["outline-offset"]};
-			border-radius: ${theme.shared["border-radius"]};
+			outline: ${theme.shared.link.focusVisible.outline};
+			outline-offset: ${theme.shared.link.focusVisible.outlineOffset};
+			border-radius: ${theme.shared.borderRadius};
 		}
-		text-decoration: ${theme.shared.link["text-decoration"]};
+		text-decoration: ${theme.shared.link.textDecoration};
 	`;
 };

package/dist/components/{button → Button}/Button.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 Icon = require('../icon/Icon.cjs');
+var Icon = require('../Icon/Icon.cjs');
 var styles = require('./styles.cjs');
 function Button({

package/dist/components/{button → Button}/Button.js RENAMED Viewed

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

package/dist/components/{button → Button}/styles.cjs RENAMED Viewed

@@ -8,15 +8,15 @@ const defaultButtonTheme = button.componentButton;
 const buttonStyles = (theme, { size, variant }, hasIcon = false, isIconButton = false) => {
   return react.css`
 		/* button/link button reset styles */
-		display: ${theme.shared["display"]};
-		-webkit-appearance: ${theme.shared["-webkit-appearance"]};
-		text-align: ${theme.shared["text-align"]};
-		box-shadow: ${theme.shared["box-shadow"]};
-		text-decoration: ${theme.shared["text-decoration"]};
+		display: ${theme.shared.display};
+		-webkit-appearance: ${theme.shared.webkitAppearance};
+		text-align: ${theme.shared.textAlign};
+		box-shadow: ${theme.shared.boxShadow};
+		text-decoration: ${theme.shared.textDecoration};
 		/* button component styles */
 		cursor: ${theme.shared.cursor};
-		justify-content: ${theme.shared["justify-content"]};
-		align-items: ${theme.shared["align-items"]};
+		justify-content: ${theme.shared.justifyContent};
+		align-items: ${theme.shared.alignItems};
 		color: ${theme[variant].shared.color};
 		background: ${theme[variant].shared.backgroundColor};
 		height: ${theme[variant][size].height};
@@ -39,28 +39,28 @@ const buttonStyles = (theme, { size, variant }, hasIcon = false, isIconButton =
 		`}
 		&[data-hovered], &:hover {
-			background: ${theme[variant].shared[":hover"].backgroundColor};
-			border: ${theme[variant].shared[":hover"].border};
+			background: ${theme[variant].shared.hover.backgroundColor};
+			border: ${theme[variant].shared.hover.border};
 		}
 		&[data-pressed],
 		&:active {
-			background: ${theme[variant].shared[":active"].backgroundColor};
-			border: ${theme[variant].shared[":active"].border};
+			background: ${theme[variant].shared.active.backgroundColor};
+			border: ${theme[variant].shared.active.border};
 		}
 		&[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],
 		&:disabled {
-			cursor: ${theme.shared[":disabled"].cursor};
-			color: ${theme[variant].shared[":disabled"].color};
-			background: ${theme[variant].shared[":disabled"].backgroundColor};
-			border: ${theme[variant].shared[":disabled"].border};
+			cursor: ${theme.shared.disabled.cursor};
+			color: ${theme[variant].shared.disabled.color};
+			background: ${theme[variant].shared.disabled.backgroundColor};
+			border: ${theme[variant].shared.disabled.border};
 		}
 	`;
 };

package/dist/components/{button → Button}/styles.js RENAMED Viewed

@@ -6,15 +6,15 @@ const defaultButtonTheme = componentButton;
 const buttonStyles = (theme, { size, variant }, hasIcon = false, isIconButton = false) => {
   return css`
 		/* button/link button reset styles */
-		display: ${theme.shared["display"]};
-		-webkit-appearance: ${theme.shared["-webkit-appearance"]};
-		text-align: ${theme.shared["text-align"]};
-		box-shadow: ${theme.shared["box-shadow"]};
-		text-decoration: ${theme.shared["text-decoration"]};
+		display: ${theme.shared.display};
+		-webkit-appearance: ${theme.shared.webkitAppearance};
+		text-align: ${theme.shared.textAlign};
+		box-shadow: ${theme.shared.boxShadow};
+		text-decoration: ${theme.shared.textDecoration};
 		/* button component styles */
 		cursor: ${theme.shared.cursor};
-		justify-content: ${theme.shared["justify-content"]};
-		align-items: ${theme.shared["align-items"]};
+		justify-content: ${theme.shared.justifyContent};
+		align-items: ${theme.shared.alignItems};
 		color: ${theme[variant].shared.color};
 		background: ${theme[variant].shared.backgroundColor};
 		height: ${theme[variant][size].height};
@@ -37,28 +37,28 @@ const buttonStyles = (theme, { size, variant }, hasIcon = false, isIconButton =
 		`}
 		&[data-hovered], &:hover {
-			background: ${theme[variant].shared[":hover"].backgroundColor};
-			border: ${theme[variant].shared[":hover"].border};
+			background: ${theme[variant].shared.hover.backgroundColor};
+			border: ${theme[variant].shared.hover.border};
 		}
 		&[data-pressed],
 		&:active {
-			background: ${theme[variant].shared[":active"].backgroundColor};
-			border: ${theme[variant].shared[":active"].border};
+			background: ${theme[variant].shared.active.backgroundColor};
+			border: ${theme[variant].shared.active.border};
 		}
 		&[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],
 		&:disabled {
-			cursor: ${theme.shared[":disabled"].cursor};
-			color: ${theme[variant].shared[":disabled"].color};
-			background: ${theme[variant].shared[":disabled"].backgroundColor};
-			border: ${theme[variant].shared[":disabled"].border};
+			cursor: ${theme.shared.disabled.cursor};
+			color: ${theme[variant].shared.disabled.color};
+			background: ${theme[variant].shared.disabled.backgroundColor};
+			border: ${theme[variant].shared.disabled.border};
 		}
 	`;
 };

package/dist/components/{checkbox → Checkbox}/CheckboxGroup.cjs RENAMED Viewed

@@ -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 Checkbox = require('./Checkbox.cjs');
 var styles = require('./styles.cjs');

package/dist/components/{checkbox → Checkbox}/CheckboxGroup.js RENAMED Viewed

@@ -2,7 +2,7 @@ import { jsx } from '@emotion/react/jsx-runtime';
 import React from 'react';
 import { CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { FormInputContainer } from '../form/Form.js';
+import { FormInputContainer } from '../Form/Form.js';
 import { Checkbox } from './Checkbox.js';
 import { defaultCheckboxTheme, checkboxGroupStyles } from './styles.js';

package/dist/components/{checkbox → Checkbox}/styles.cjs RENAMED Viewed

@@ -12,7 +12,7 @@ const checkboxStyles = (theme, {
   return react.css`
 		display: ${theme.input.shared.display};
 		position: ${theme.input.shared.position};
-		align-items: ${theme.input.shared["align-items"]};
+		align-items: ${theme.input.shared.alignItems};
 		gap: ${theme.input.shared.gap};
 		cursor: ${theme.input.shared.cursor};
 		${typography.convertTypographyToEmotionStringStyle(theme.input[size].typography)}
@@ -22,11 +22,11 @@ const checkboxStyles = (theme, {
 			width: ${theme.input[size].indicator.size};
 			height: ${theme.input[size].indicator.size};
 			border: ${theme.input.shared.indicator.border};
-			border-radius: ${theme.input.shared.indicator["border-radius"]};
+			border-radius: ${theme.input.shared.indicator.borderRadius};
 			display: ${theme.input.shared.indicator.display};
-			align-items: ${theme.input.shared.indicator["align-items"]};
-			justify-content: ${theme.input.shared.indicator["justify-content"]};
-			flex-shrink: ${theme.input.shared.indicator["flex-shrink"]};
+			align-items: ${theme.input.shared.indicator.alignItems};
+			justify-content: ${theme.input.shared.indicator.justifyContent};
+			flex-shrink: ${theme.input.shared.indicator.flexShrink};
 			transition: ${theme.input.shared.indicator.transition};
 		}
@@ -39,8 +39,8 @@ const checkboxStyles = (theme, {
 		&[data-focus-visible] {
 			.checkbox-indicator {
-				outline: ${theme.input.shared.indicator[":focus-visible"].outline};
-				outline-offset: ${theme.input.shared.indicator[":focus-visible"]["outline-offset"]};
+				outline: ${theme.input.shared.indicator.focusVisible.outline};
+				outline-offset: ${theme.input.shared.indicator.focusVisible.outlineOffset};
 			}
 		}
@@ -48,7 +48,7 @@ const checkboxStyles = (theme, {
 		&[data-indeterminate] {
 			.checkbox-indicator {
 				border: ${theme.input.shared.indicator.selected.border};
-				background-color: ${theme.input.shared.indicator.selected["background-color"]};
+				background-color: ${theme.input.shared.indicator.selected.backgroundColor};
 			}
 			& svg {
@@ -67,7 +67,7 @@ const checkboxStyles = (theme, {
 			&[data-selected],
 			&[data-indeterminate] {
 				.checkbox-indicator {
-					background-color: ${theme.input.shared.disabled.indicator.selected["background-color"]};
+					background-color: ${theme.input.shared.disabled.indicator.selected.backgroundColor};
 				}
 			}
 		}
@@ -81,24 +81,24 @@ const checkboxStyles = (theme, {
 		&[data-invalid][data-selected],
 		&[data-invalid][data-indeterminate] {
 			.checkbox-indicator {
-				background-color: ${theme.input.shared.indicator.error["background-color"]};
+				background-color: ${theme.input.shared.indicator.error.backgroundColor};
 			}
 		}
 	`;
 };
 const checkboxLabelStyles = (theme) => {
   return react.css`
-		align-self: ${theme.input.shared.label["align-self"]};
+		align-self: ${theme.input.shared.label.alignSelf};
 	`;
 };
 const checkboxGroupStyles = (theme, { size }, hasError) => {
   return react.css`
 		display: ${theme.group.shared.display};
-		flex-direction: ${theme.group.shared["flex-direction"]};
+		flex-direction: ${theme.group.shared.flexDirection};
 		gap: ${theme.group[size].gap};
-		margin-top: ${theme.group[size]["margin-top"]};
+		margin-top: ${theme.group[size].marginTop};
 		${hasError && react.css`
-			margin-bottom: ${theme.group[size]["margin-bottom"]};
+			margin-bottom: ${theme.group[size].marginBottom};
 		`}
 	`;
 };

package/dist/components/{checkbox → Checkbox}/styles.js RENAMED Viewed

@@ -7,7 +7,7 @@ const checkboxStyles = (theme, { size, isIndeterminate }) => {
   return css`
 		display: ${theme.input.shared.display};
 		position: ${theme.input.shared.position};
-		align-items: ${theme.input.shared["align-items"]};
+		align-items: ${theme.input.shared.alignItems};
 		gap: ${theme.input.shared.gap};
 		cursor: ${theme.input.shared.cursor};
 		${convertTypographyToEmotionStringStyle(theme.input[size].typography)}
@@ -17,11 +17,11 @@ const checkboxStyles = (theme, { size, isIndeterminate }) => {
 			width: ${theme.input[size].indicator.size};
 			height: ${theme.input[size].indicator.size};
 			border: ${theme.input.shared.indicator.border};
-			border-radius: ${theme.input.shared.indicator["border-radius"]};
+			border-radius: ${theme.input.shared.indicator.borderRadius};
 			display: ${theme.input.shared.indicator.display};
-			align-items: ${theme.input.shared.indicator["align-items"]};
-			justify-content: ${theme.input.shared.indicator["justify-content"]};
-			flex-shrink: ${theme.input.shared.indicator["flex-shrink"]};
+			align-items: ${theme.input.shared.indicator.alignItems};
+			justify-content: ${theme.input.shared.indicator.justifyContent};
+			flex-shrink: ${theme.input.shared.indicator.flexShrink};
 			transition: ${theme.input.shared.indicator.transition};
 		}
@@ -34,8 +34,8 @@ const checkboxStyles = (theme, { size, isIndeterminate }) => {
 		&[data-focus-visible] {
 			.checkbox-indicator {
-				outline: ${theme.input.shared.indicator[":focus-visible"].outline};
-				outline-offset: ${theme.input.shared.indicator[":focus-visible"]["outline-offset"]};
+				outline: ${theme.input.shared.indicator.focusVisible.outline};
+				outline-offset: ${theme.input.shared.indicator.focusVisible.outlineOffset};
 			}
 		}
@@ -43,7 +43,7 @@ const checkboxStyles = (theme, { size, isIndeterminate }) => {
 		&[data-indeterminate] {
 			.checkbox-indicator {
 				border: ${theme.input.shared.indicator.selected.border};
-				background-color: ${theme.input.shared.indicator.selected["background-color"]};
+				background-color: ${theme.input.shared.indicator.selected.backgroundColor};
 			}
 			& svg {
@@ -62,7 +62,7 @@ const checkboxStyles = (theme, { size, isIndeterminate }) => {
 			&[data-selected],
 			&[data-indeterminate] {
 				.checkbox-indicator {
-					background-color: ${theme.input.shared.disabled.indicator.selected["background-color"]};
+					background-color: ${theme.input.shared.disabled.indicator.selected.backgroundColor};
 				}
 			}
 		}
@@ -76,24 +76,24 @@ const checkboxStyles = (theme, { size, isIndeterminate }) => {
 		&[data-invalid][data-selected],
 		&[data-invalid][data-indeterminate] {
 			.checkbox-indicator {
-				background-color: ${theme.input.shared.indicator.error["background-color"]};
+				background-color: ${theme.input.shared.indicator.error.backgroundColor};
 			}
 		}
 	`;
 };
 const checkboxLabelStyles = (theme) => {
   return css`
-		align-self: ${theme.input.shared.label["align-self"]};
+		align-self: ${theme.input.shared.label.alignSelf};
 	`;
 };
 const checkboxGroupStyles = (theme, { size }, hasError) => {
   return css`
 		display: ${theme.group.shared.display};
-		flex-direction: ${theme.group.shared["flex-direction"]};
+		flex-direction: ${theme.group.shared.flexDirection};
 		gap: ${theme.group[size].gap};
-		margin-top: ${theme.group[size]["margin-top"]};
+		margin-top: ${theme.group[size].marginTop};
 		${hasError && css`
-			margin-bottom: ${theme.group[size]["margin-bottom"]};
+			margin-bottom: ${theme.group[size].marginBottom};
 		`}
 	`;
 };

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

@@ -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');
 const MONTHS = [

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

@@ -2,8 +2,8 @@ import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import { createContext, useContext, useRef, useEffect } from 'react';
 import { DatePicker as DatePicker$1, Group, I18nProvider, Button, Popover, DateInput as DateInput$1, DateFieldStateContext, DateSegment as DateSegment$1, Calendar as Calendar$1, Heading, CalendarGrid as CalendarGrid$1, CalendarCell as CalendarCell$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 { defaultDatePickerTheme, dateSegmentStyles, datePickerStyles, datePickerPopoverStyles, calendarHeaderStyles, calendarCellStyles, calendarGridStyles } from './styles.js';
 const MONTHS = [

package/dist/components/{favicon → Favicon}/Favicon.cjs RENAMED Viewed

@@ -3,7 +3,7 @@
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 var mergeDeep = require('../../util/mergeDeep.cjs');
-var Icon = require('../icon/Icon.cjs');
+var Icon = require('../Icon/Icon.cjs');
 var styles = require('./styles.cjs');
 const Favicon = (props) => {

package/dist/components/{favicon → Favicon}/Favicon.js RENAMED Viewed

@@ -1,7 +1,7 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useState } from 'react';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { Icon } from '../icon/Icon.js';
+import { Icon } from '../Icon/Icon.js';
 import { defaultFaviconTheme, faviconImageStyles, faviconStyles, faviconTypographyStyles } from './styles.js';
 const Favicon = (props) => {

package/dist/components/{favicon → Favicon}/styles.cjs RENAMED Viewed

@@ -9,11 +9,11 @@ const faviconStyles = (theme) => {
   return react.css`
 		background-color: ${theme.color.background};
 		display: ${theme.display};
-		align-items: ${theme["align-items"]};
-		justify-content: ${theme["justify-content"]};
+		align-items: ${theme.alignItems};
+		justify-content: ${theme.justifyContent};
 		width: ${theme.size};
 		height: ${theme.size};
-		user-select: ${theme["user-select"]};
+		user-select: ${theme.userSelect};
 	`;
 };
 const faviconTypographyStyles = (theme) => {

package/dist/components/{favicon → Favicon}/styles.js RENAMED Viewed

@@ -7,11 +7,11 @@ const faviconStyles = (theme) => {
   return css`
 		background-color: ${theme.color.background};
 		display: ${theme.display};
-		align-items: ${theme["align-items"]};
-		justify-content: ${theme["justify-content"]};
+		align-items: ${theme.alignItems};
+		justify-content: ${theme.justifyContent};
 		width: ${theme.size};
 		height: ${theme.size};
-		user-select: ${theme["user-select"]};
+		user-select: ${theme.userSelect};
 	`;
 };
 const faviconTypographyStyles = (theme) => {

package/dist/components/{form → Form}/Form.cjs RENAMED Viewed

@@ -5,7 +5,7 @@ var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
 var styles = require('./styles.cjs');
 var types = require('./types.cjs');
-var InlineMessage = require('../inline-message/InlineMessage.cjs');
+var InlineMessage = require('../InlineMessage/InlineMessage.cjs');
 function FormInputContainer({
   as: Component,

package/dist/components/{form → Form}/Form.js RENAMED Viewed

@@ -3,7 +3,7 @@ import { Label, FieldError } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { defaultFormInputContainerTheme, formInputLabelStyles, formInputDescriptionStyles, formInputContainerStyles } from './styles.js';
 import { ALLOWED_FORM_CONTAINERS } from './types.js';
-import { InlineMessage } from '../inline-message/InlineMessage.js';
+import { InlineMessage } from '../InlineMessage/InlineMessage.js';
 function FormInputContainer({ as: Component, size = "md", label, description, error, isDisabled = false, theme = {}, formInputContainerTheme, cssOverrides, children, ...props }) {
   if (!ALLOWED_FORM_CONTAINERS.includes(Component)) {

package/dist/components/{form → Form}/styles.cjs RENAMED Viewed

@@ -8,7 +8,7 @@ const defaultFormInputContainerTheme = form.componentForm.input;
 const formInputContainerStyles = (theme) => {
   return react.css`
 		display: ${theme.shared.container.display};
-		flex-direction: ${theme.shared.container["flex-direction"]};
+		flex-direction: ${theme.shared.container.flexDirection};
 		gap: ${theme.shared.container.gap};
 		width: ${theme.shared.container.width};
 	`;

package/dist/components/{form → Form}/styles.js RENAMED Viewed

@@ -6,7 +6,7 @@ const defaultFormInputContainerTheme = componentForm.input;
 const formInputContainerStyles = (theme) => {
   return css`
 		display: ${theme.shared.container.display};
-		flex-direction: ${theme.shared.container["flex-direction"]};
+		flex-direction: ${theme.shared.container.flexDirection};
 		gap: ${theme.shared.container.gap};
 		width: ${theme.shared.container.width};
 	`;

package/dist/components/{icon → Icon}/styles.cjs RENAMED Viewed

@@ -11,7 +11,7 @@ const iconStyles = (theme, {
 }) => react.css`
 	display: ${theme.shared.display};
 	font-size: ${theme[size].size};
-	user-select: ${theme.shared["user-select"]};
+	user-select: ${theme.shared.userSelect};
 	${fill ? `color: ${fill};` : ""}
 	${mode === "svg" ? `

package/dist/components/{icon → Icon}/styles.js RENAMED Viewed

@@ -5,7 +5,7 @@ const defaultIconTheme = componentIcon;
 const iconStyles = (theme, { size, fill, mode }) => css`
 	display: ${theme.shared.display};
 	font-size: ${theme[size].size};
-	user-select: ${theme.shared["user-select"]};
+	user-select: ${theme.shared.userSelect};
 	${fill ? `color: ${fill};` : ""}
 	${mode === "svg" ? `

package/dist/components/{icon-button → IconButton}/IconButton.cjs RENAMED Viewed

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

package/dist/components/{icon-button → IconButton}/IconButton.js RENAMED Viewed

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

package/dist/components/{icon-button → IconButton}/styles.cjs RENAMED Viewed

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

package/dist/components/{icon-button → IconButton}/styles.js RENAMED Viewed

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

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

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