feat: final

packages/components/src/Breadcrumbs/BreadcrumbItem.tsx

@@ -32,7 +32,7 @@ const BreadcrumbItem = ({ children, isDisabled, isCurrent, href, ...props }: Bre
 
   const commonProps: Pick<TextLinkProps, 'size' | 'color'> = {
     size: 's',
-    color: isCurrent ? 'secondary' : 'tertiary'
+    color: isCurrent ? 'light' : 'green-300'
   };
 
   return (
@@ -51,7 +51,7 @@ const BreadcrumbItem = ({ children, isDisabled, isCurrent, href, ...props }: Bre
           {children}
         </StyledLinkBreadcrumb>
       )}
-      {isCurrent === false && <ChevronRight color='tertiary' size='xs' />}
+      {isCurrent === false && <ChevronRight color='green-300' size='xs' />}
     </Fragment>
   );
 };

packages/components/src/Button/__tests__/CTA.test.tsx

@@ -2,24 +2,24 @@ import { render } from '@testing-library/react';
 import { createRef } from 'react';
 import { testA11y } from '@interlay/test-utils';
 
-import { CTA } from '..';
+import { Button } from '..';
 
-describe('CTA', () => {
+describe('Button', () => {
   it('should render correctly', () => {
-    const wrapper = render(<CTA>Button</CTA>);
+    const wrapper = render(<Button>Button</Button>);
 
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
   it('ref should be forwarded', () => {
     const ref = createRef<HTMLButtonElement>();
 
-    render(<CTA ref={ref}>Button</CTA>);
+    render(<Button ref={ref}>Button</Button>);
 
     expect(ref.current).not.toBeNull();
   });
 
   it('should pass a11y', async () => {
-    await testA11y(<CTA>Button</CTA>);
+    await testA11y(<Button>Button</Button>);
   });
 });

packages/components/src/Dialog/Dialog.style.tsx

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { DialogSize } from '@interlay/themev2';
+import { DialogSize, Spacing } from '@interlay/themev2';
 
 import { Flex } from '../Flex';
 import { H3 } from '../Text';
@@ -9,11 +9,16 @@ type StyledDialogProps = {
   $size: DialogSize;
 };
 
+type StyledDialogBodyProps = {
+  $maxHeight?: Spacing;
+};
+
 const StyledDialog = styled.section<StyledDialogProps>`
   display: flex;
   flex-direction: column;
   position: relative;
   outline: none;
+  overflow: hidden;
 
   width: 100%;
   ${({ theme, $size }) => css`
@@ -36,8 +41,9 @@ const StyledDialogHeader = styled(H3)`
   flex-shrink: 0;
 `;
 
-const StyledDialogBody = styled(Flex)`
+const StyledDialogBody = styled(Flex)<StyledDialogBodyProps>`
   ${({ theme }) => theme.dialog.body};
+  max-height: ${({ theme, $maxHeight }) => $maxHeight && theme.spacing($maxHeight)};
 
   flex: 1 1 auto;
 `;

packages/components/src/Dialog/DialogBody.tsx

@@ -1,14 +1,19 @@
+import { Spacing } from '@interlay/themev2';
+
 import { FlexProps } from '../Flex';
 
 import { StyledDialogBody } from './Dialog.style';
-import { useDialogContext } from './DialogContext';
 
-type DialogBodyProps = FlexProps;
+type Props = {
+  maxHeight?: Spacing;
+};
+
+type InheritAttrs = Omit<FlexProps, keyof Props>;
 
-const DialogBody = ({ direction = 'column', ...props }: DialogBodyProps): JSX.Element => {
-  const { size } = useDialogContext();
+type DialogBodyProps = Props & InheritAttrs;
 
-  return <StyledDialogBody {...props} $size={size} direction={direction} />;
+const DialogBody = ({ direction = 'column', maxHeight, ...props }: DialogBodyProps): JSX.Element => {
+  return <StyledDialogBody {...props} $maxHeight={maxHeight} direction={direction} />;
 };
 
 export { DialogBody };

packages/components/src/Dialog/DialogFooter.tsx

@@ -1,16 +1,13 @@
 import { FlexProps } from '../Flex';
 
 import { StyledDialogFooter } from './Dialog.style';
-import { useDialogContext } from './DialogContext';
 
 type InheritAttrs = FlexProps;
 
 type DialogFooterProps = InheritAttrs;
 
 const DialogFooter = (props: DialogFooterProps): JSX.Element => {
-  const { size } = useDialogContext();
-
-  return <StyledDialogFooter $size={size} {...props} />;
+  return <StyledDialogFooter {...props} />;
 };
 
 export { DialogFooter };

packages/components/src/Dialog/DialogHeader.tsx

@@ -15,10 +15,10 @@ type InheritAttrs = Omit<TextProps, keyof Props>;
 type DialogHeaderProps = Props & InheritAttrs;
 
 const DialogHeader = ({ elementType, children, align = 'start', ...props }: DialogHeaderProps): JSX.Element => {
-  const { titleProps, size } = useDialogContext();
+  const { titleProps } = useDialogContext();
 
   return (
-    <StyledDialogHeader $size={size} align={align} as={elementType} size='xl' {...mergeProps(titleProps || {}, props)}>
+    <StyledDialogHeader align={align} as={elementType} size='xl' {...mergeProps(titleProps || {}, props)}>
       {children}
     </StyledDialogHeader>
   );

packages/components/src/Field/Field.style.tsx

@@ -1,16 +1,22 @@
-import styled from 'styled-components';
-import { Spacing } from '@interlay/themev2';
+import styled, { CSSProperties } from 'styled-components';
+
+import { Flex } from '../Flex';
 
 type StyledFieldProps = {
-  $maxWidth?: Spacing;
+  $maxWidth?: CSSProperties['maxWidth'];
+  $fullWidth?: boolean;
 };
 
-const StyledField = styled.div<StyledFieldProps>`
+const StyledFieldElWrapper = styled.div`
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
   height: 100%;
-  max-width: ${({ $maxWidth, theme }) => $maxWidth && theme.spacing($maxWidth)};
 `;
 
-export { StyledField };
+const StyledField = styled(Flex)<StyledFieldProps>`
+  max-width: ${({ $maxWidth }) => $maxWidth};
+  width: ${({ $fullWidth, $maxWidth }) => ($fullWidth || $maxWidth) && '100%'};
+`;
+
+export { StyledField, StyledFieldElWrapper };

packages/components/src/Field/Field.tsx

@@ -1,18 +1,20 @@
 import { forwardRef, HTMLAttributes, ReactNode } from 'react';
-import { LabelPosition, Spacing } from '@interlay/themev2';
+import { LabelPosition } from '@interlay/themev2';
+import { CSSProperties } from 'styled-components';
 
 import { Flex, FlexProps } from '../Flex';
 import { HelperText, HelperTextProps } from '../HelperText';
 import { Label, LabelProps } from '../Label';
 import { hasError } from '../utils/input';
 
-import { StyledField } from './Field.style';
+import { StyledField, StyledFieldElWrapper } from './Field.style';
 
 type Props = {
   label?: ReactNode;
   labelPosition?: LabelPosition;
   labelProps?: LabelProps;
-  maxWidth?: Spacing;
+  maxWidth?: CSSProperties['maxWidth'];
+  fullWidth?: boolean;
 };
 
 type NativeAttrs = Omit<HTMLAttributes<unknown>, keyof Props>;
@@ -33,6 +35,7 @@ const Field = forwardRef<HTMLDivElement, FieldProps>(
       descriptionProps,
       children,
       maxWidth,
+      fullWidth,
       ...props
     },
     ref
@@ -42,7 +45,7 @@ const Field = forwardRef<HTMLDivElement, FieldProps>(
 
     const element = (
       <>
-        <StyledField $maxWidth={maxWidth}>{children}</StyledField>
+        <StyledFieldElWrapper>{children}</StyledFieldElWrapper>
         {hasHelpText && (
           <HelperText
             description={description}
@@ -55,7 +58,13 @@ const Field = forwardRef<HTMLDivElement, FieldProps>(
     );
 
     return (
-      <Flex ref={ref} direction={labelPosition === 'top' ? 'column' : 'row'} {...props}>
+      <StyledField
+        ref={ref}
+        $fullWidth={fullWidth}
+        $maxWidth={maxWidth}
+        direction={labelPosition === 'top' ? 'column' : 'row'}
+        {...props}
+      >
         {label && (
           <Label {...labelProps} position={labelPosition}>
             {label}
@@ -68,7 +77,7 @@ const Field = forwardRef<HTMLDivElement, FieldProps>(
             {element}
           </Flex>
         )}
-      </Flex>
+      </StyledField>
     );
   }
 );

packages/components/src/Input/Input.style.tsx

@@ -93,6 +93,7 @@ const StyledAdornment = styled.div<StyledAdornmentProps>`
   position: absolute;
   // to not allow adornment to take more than 50% of the input. We might want to reduce this in the future.
   max-width: 50%;
+  ${({ theme }) => theme.input.adornment};
 `;
 
 const StyledAdornmentRight = styled(StyledAdornment)`

packages/components/src/List/List.style.tsx

@@ -1,9 +1,14 @@
-import styled, { css } from 'styled-components';
-import { theme } from '@interlay/theme';
+import styled, { CSSProperties, css } from 'styled-components';
 
 import { Flex } from '../Flex';
 
-const StyledList = styled(Flex)``;
+type StyledListProps = {
+  $maxHeight?: CSSProperties['maxHeight'];
+};
+
+const StyledList = styled(Flex)<StyledListProps>`
+  max-height: ${({ $maxHeight }) => $maxHeight};
+`;
 
 type StyledListItemProps = {
   $isDisabled: boolean;
@@ -15,8 +20,6 @@ type StyledListItemProps = {
 const StyledListItem = styled.div<StyledListItemProps>`
   flex: 1;
   align-self: stretch;
-  padding: ${theme.spacing.spacing3};
-  color: ${theme.colors.textPrimary};
   cursor: ${({ $isInteractable }) => $isInteractable && 'pointer'};
   outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'};
   opacity: ${({ $isDisabled }) => $isDisabled && 0.5};

packages/components/src/List/List.tsx

@@ -5,6 +5,7 @@ import { forwardRef } from 'react';
 import { ListVariants } from '@interlay/theme';
 import { Selection } from '@react-types/shared';
 import { useDOMRef } from '@interlay/hooks';
+import { CSSProperties } from 'styled-components';
 
 import { FlexProps } from '../Flex';
 
@@ -13,6 +14,7 @@ import { ListItem } from './ListItem';
 
 type Props = {
   variant?: ListVariants;
+  maxHeight?: CSSProperties['maxHeight'];
 };
 
 type InheritAttrs = Omit<
@@ -28,6 +30,7 @@ type ListProps = Props & NativeAttrs & InheritAttrs;
 const List = forwardRef<HTMLDivElement, ListProps>(
   (
     {
+      maxHeight,
       variant = 'primary',
       direction = 'column',
       onSelectionChange,
@@ -62,6 +65,7 @@ const List = forwardRef<HTMLDivElement, ListProps>(
       <StyledList
         {...mergeProps(gridProps, props)}
         ref={listRef}
+        $maxHeight={maxHeight}
         direction={direction}
         gap={variant === 'card' ? undefined : 's'}
       >

packages/components/src/Meter/Meter.tsx

@@ -60,7 +60,7 @@ const Meter = ({
           $variant={variant}
           alignItems='center'
           direction='column'
-          gap='spacing1'
+          gap='xs'
           justifyContent='center'
         >
           <Indicator />