@westpac/ui 0.7.0 → 0.7.1

package/src/components/autocomplete/components/popover/popover.types.ts

@@ -2,6 +2,7 @@ import { HTMLAttributes, ReactNode } from 'react';
 import { type AriaPopoverProps } from 'react-aria';
 import { type OverlayTriggerState } from 'react-stately';
 
+// @private
 export type PopoverProps = Omit<AriaPopoverProps, 'popoverRef'> & {
   /**
    * Popover content

package/src/components/badge/badge.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { forwardRef } from 'react';
 
 import { styles } from './badge.styles.js';

package/src/components/badge/badge.types.ts

@@ -3,10 +3,19 @@ import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './badge.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type BadgeProps = {
+  /**
+   * Color of badge
+   */
+  color?: Variants['color'];
   /**
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  Omit<HTMLAttributes<Element>, 'color' | 'type'>;
+  /**
+   * Type of badge
+   */
+  type?: Variants['type'];
+} & Omit<HTMLAttributes<Element>, 'color' | 'type'>;

package/src/components/breadcrumb/breadcrumb.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { Children, FunctionComponentElement, cloneElement } from 'react';
 import { useBreadcrumbs } from 'react-aria';
 

package/src/components/breadcrumb/breadcrumb.types.ts

@@ -1,3 +1,10 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactElement } from 'react';
 
-export type BreadcrumbProps = HTMLAttributes<HTMLDivElement>;
+import { type BreadcrumbItemProps } from './components/breadcrumb-item/index.js';
+
+export type BreadcrumbProps = HTMLAttributes<HTMLDivElement> & {
+  /**
+   * Children with Breadcrumb.Item[]
+   */
+  children: ReactElement<BreadcrumbItemProps> | ReactElement<BreadcrumbItemProps>[];
+};

package/src/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.tsx

@@ -48,3 +48,5 @@ export function BaseBreadcrumbItem(
 }
 
 export const BreadcrumbItem = forwardRef<any, BreadcrumbItemProps>(BaseBreadcrumbItem);
+
+BreadcrumbItem.displayName = 'Breadcrumb.Item';

package/src/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.types.ts

@@ -1,7 +1,4 @@
 import { AnchorHTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './breadcrumb-item.styles.js';
 
 export type BreadcrumbItemProps = {
   /**
@@ -16,5 +13,4 @@ export type BreadcrumbItemProps = {
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  AnchorHTMLAttributes<Element>;
+} & AnchorHTMLAttributes<Element>;

package/src/components/button/button.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { forwardRef, useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 

package/src/components/button/button.styles.ts

@@ -14,14 +14,14 @@ export const styles = tv(
     },
     variants: {
       size: {
-        small: { base: 'active-theme-rams:before:h-[0.0625rem] typography-body-10 px-2 pb-[0.25rem] pt-[0.1875rem]' },
-        medium: { base: 'active-theme-rams:before:h-[0.125rem] typography-body-9 px-2 py-[0.3125rem]' },
-        large: { base: 'active-theme-rams:before:h-[0.1875rem] typography-body-9 px-[0.9375rem] py-[0.5rem]' },
-        xlarge: { base: 'active-theme-rams:before:h-[0.25rem] typography-body-8 px-3 pb-[0.625rem] pt-[0.5625rem]' },
+        small: { base: 'typography-body-10 px-2 pb-[0.25rem] pt-[0.1875rem] active-theme-rams:before:h-[0.0625rem]' },
+        medium: { base: 'typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-[0.125rem]' },
+        large: { base: 'typography-body-9 px-[0.9375rem] py-[0.5rem] active-theme-rams:before:h-[0.1875rem]' },
+        xlarge: { base: 'typography-body-8 px-3 pb-[0.625rem] pt-[0.5625rem] active-theme-rams:before:h-[0.25rem]' },
       },
       look: {
         primary: {
-          base: 'active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50',
+          base: 'relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop',
         },
         hero: { base: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50' },
         faint: { base: 'border border-border bg-light text-muted hover:bg-white active:bg-white' },

package/src/components/button/button.types.ts

@@ -5,7 +5,13 @@ import { IconProps } from '../icon/index.js';
 
 import { styles } from './button.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type ButtonProps = {
+  /**
+   * Fit button width to its parent width.
+   */
+  block?: Variants['block'];
   /**
    * Places an icon within the button, after the button’s text
    */
@@ -20,10 +26,25 @@ export type ButtonProps = {
    * Defaults to the current text color.
    */
   iconColor?: IconProps['color'];
+  /**
+   * Justify align button children
+   */
+  justify?: Variants['justify'];
+  /**
+   * Button look
+   */
+  look?: Variants['look'];
+  /**
+   * Size of the button
+   */
+  size?: Variants['size'];
+  /**
+   * Removes background colour and adjusts text colour.
+   */
+  soft?: Variants['soft'];
   /**
    * Tag to render
    */
   tag?: keyof Pick<JSX.IntrinsicElements, 'a' | 'span' | 'button' | 'div'>;
 } & ButtonHTMLAttributes<Element> &
-  AnchorHTMLAttributes<Element> &
-  VariantProps<typeof styles>;
+  AnchorHTMLAttributes<Element>;

package/src/components/button-dropdown/button-dropdown.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useCallback, useEffect, useId, useRef } from 'react';
 import { useButton, useOverlayTrigger } from 'react-aria';
 import { useOverlayTriggerState } from 'react-stately';

package/src/components/button-dropdown/button-dropdown.styles.ts

@@ -21,6 +21,7 @@ export const styles = tv(
       block: {
         true: {
           panel: '',
+          base: 'justify-between',
         },
       },
     },

package/src/components/button-dropdown/button-dropdown.types.ts

@@ -5,7 +5,13 @@ import { ButtonProps } from '../button/index.js';
 
 import { styles } from './button-dropdown.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type ButtonDropdownProps = {
+  /**
+   * Size of the the dropdown panel
+   */
+  dropdownSize?: Variants['dropdownSize'];
   /**
    * Look for button
    */
@@ -23,5 +29,4 @@ export type ButtonDropdownProps = {
    */
   text: string;
 } & ButtonHTMLAttributes<Element> &
-  Pick<ButtonProps, 'size' | 'iconBefore' | 'block'> &
-  VariantProps<typeof styles>;
+  Pick<ButtonProps, 'size' | 'iconBefore' | 'block'>;

package/src/components/button-dropdown/components/panel/panel.component.tsx

@@ -4,6 +4,9 @@ import { DismissButton, Overlay, mergeProps, useFocusRing, usePopover } from 're
 import { styles as panelStyles } from './panel.styles.js';
 import { type PanelProps } from './panel.types.js';
 
+/**
+ * @private
+ */
 export function Panel({ className, children, state, block, id, ...props }: PanelProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
   const { popoverProps } = usePopover({ popoverRef, shouldFlip: false, isNonModal: true, ...props }, state);

package/src/components/button-group/button-group.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactElement, cloneElement, createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';

package/src/components/checkbox-group/checkbox-group.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactElement, cloneElement, createContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';

package/src/components/checkbox-group/components/checkbox/checkbox.component.tsx

@@ -9,13 +9,22 @@ import { styles as checkboxItemStyles } from './checkbox.styles.js';
 import { type CheckboxProps } from './checkbox.types.js';
 
 // TODO: Discuss with designers if this icon should be included as part of Icons
-function CheckIcon({ copyrightYear = '2023', ...props }: IconProps) {
+// Icon based on SVGs/instructions received from this issue https://github.com/WestpacGEL/GEL-next/issues/159
+function CheckIcon({ copyrightYear = '2023', size, ...props }: IconProps) {
+  const viewBoxSize = size === 'large' ? '0 0 30 30' : '0 0 24 24';
   return (
-    <Icon copyrightYear={copyrightYear} {...props}>
-      <path
-        d="M16.285 6.0003L10.769 13.8053L6.936 11.0173L5 13.6463L11.526 18.5263L19 8.0053L16.285 6.0003Z"
-        fill="currentColor"
-      />
+    <Icon copyrightYear={copyrightYear} viewBox={viewBoxSize} {...props}>
+      {size === 'large' ? (
+        <path
+          d="M12.9952 17.5891L20.2923 10.292L21.7023 11.712L12.9952 20.4191L8.28809 15.712L9.69809 14.302L12.9952 17.5891Z"
+          fill="currentColor"
+        />
+      ) : (
+        <path
+          d="M9.99519 14.5891L17.2923 7.29199L18.7023 8.71199L9.99519 17.4191L5.28809 12.712L6.69809 11.302L9.99519 14.5891Z"
+          fill="currentColor"
+        />
+      )}
     </Icon>
   );
 }
@@ -34,7 +43,7 @@ function BaseCheckbox({ className, hint, children, value, ...props }: CheckboxPr
         <input {...inputProps} {...focusProps} ref={localRef} />
       </VisuallyHidden>
       <div className={styles.checkbox()}>
-        {isSelected && <CheckIcon className={styles.checkIcon()} color={isDisabled ? 'border' : 'hero'} />}
+        {isSelected && <CheckIcon className={styles.checkIcon()} size={size} color={isDisabled ? 'border' : 'hero'} />}
       </div>
       <div className={styles.textWrapper()}>
         <span className={styles.labelText()}>{children}</span>
@@ -45,3 +54,4 @@ function BaseCheckbox({ className, hint, children, value, ...props }: CheckboxPr
 }
 
 export const Checkbox = forwardRef(BaseCheckbox);
+Checkbox.displayName = 'CheckboxGroup.Checkbox';

package/src/components/circle/circle.types.ts

@@ -1,12 +1,8 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './circle.styles.js';
 
 export type CircleProps = {
   /**
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/src/components/collapsible/collapsible.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useId, useState } from 'react';
 

package/src/components/collapsible/collapsible.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'text-text px-0 no-underline hover:underline',
+      base: 'px-0 text-text no-underline hover:underline',
       content: 'typography-body-10 mb-2 block',
     },
     variants: {

package/src/components/compacta/compacta.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 
@@ -179,19 +181,21 @@ export function Compacta({
                         setSecondaryTitle: (title: string) => setTitle(item.id, 'secondary', title),
                         setTertiaryTitle: (title: string) => setTitle(item.id, 'tertiary', title),
                       })}
-                      <Button
-                        className={styles.removeBtn()}
-                        aria-label={`remove item ${index + 1}`}
-                        iconBefore={(props: IconProps) => (
-                          <RemoveCircleIcon {...props} aria-hidden look="outlined" size="xsmall" />
-                        )}
-                        look="link"
-                        size="small"
-                        soft
-                        onClick={() => handleRemove(item.id, index)}
-                      >
-                        Remove
-                      </Button>
+                      {items.length > 1 && (
+                        <Button
+                          className={styles.removeBtn()}
+                          aria-label={`remove item ${index + 1}`}
+                          iconBefore={(props: IconProps) => (
+                            <RemoveCircleIcon {...props} aria-hidden look="outlined" size="xsmall" />
+                          )}
+                          look="link"
+                          size="small"
+                          soft
+                          onClick={() => handleRemove(item.id, index)}
+                        >
+                          Remove
+                        </Button>
+                      )}
                     </div>
                   </m.div>
                 )}

package/src/components/compacta/compacta.styles.ts

@@ -5,26 +5,26 @@ export const styles = tv(
     slots: {
       base: '',
       item: 'border-borderDark mb-2 overflow-hidden rounded-[0.1875rem] border',
-      header: 'text-text bg-white p-[0.8125rem_1.125rem]',
+      header: 'text-text bg-white px-3 py-[0.9375rem]',
       headerTitle: 'flex min-w-0 flex-1 items-center',
-      primaryHeading: 'my-[16px] flex',
-      secondaryHeading: 'text-muted flex min-w-0 flex-1 items-center pl-[2.25rem]',
-      itemIndex: 'mr-2 w-4 flex-none font-bold',
+      primaryHeading: 'flex w-full',
+      secondaryHeading: 'text-muted flex min-w-0 flex-1 items-center pl-4',
+      itemIndex: 'typography-body-9 mr-1 w-3 flex-none font-bold',
       removeBtn: 'mt-[0.875rem] h-auto p-0 no-underline hover:underline',
       addBtn: 'h-auto p-0 no-underline hover:underline',
-      toggleBtn: 'ml-auto p-0',
+      toggleBtn: 'p-0',
       collapsible: '',
       content: 'xsl:pl-[3.375rem] p-[0_1.125rem_1.875rem]',
-      footer: 'pt-[0.5rem]',
-      titlePrimary: 'font-bold',
-      titleSecondary: 'mt-[0.125rem]',
-      titleTertiary: 'mt-[0.125rem]',
+      footer: '',
+      titlePrimary: 'typography-body-9 font-bold',
+      titleSecondary: 'mt-1 items-center',
+      titleTertiary: 'mt-1 items-center',
     },
     variants: {},
     compoundSlots: [
       {
         slots: ['titlePrimary', 'titleSecondary', 'titleTertiary'],
-        class: ['mr-2', 'truncate', 'flex-1'],
+        class: ['mr-1', 'truncate', 'flex-1'],
       },
     ],
   },

package/src/components/date-picker/date-picker.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { styles } from './date-picker.styles.js';

package/src/components/date-picker/date-picker.types.ts

@@ -14,6 +14,8 @@ export type DuetDatePickerElement = Element & {
   value?: string;
 };
 
+type Variants = VariantProps<typeof styles>;
+
 export type DatePickerProps = {
   /*
    * Disable specific dates. Must be in IS0-8601 format: YYYY-MM-DD
@@ -59,9 +61,12 @@ export type DatePickerProps = {
    * onOpen
    */
   onOpen?: (...args: any[]) => unknown;
+  /**
+   * Size of datepicker input
+   */
+  size?: Variants['size'];
   /*
    * Date picker input value. Must be in IS0-8601 format: YYYY-MM-DD
    */
   value?: string;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/src/components/error-message/error-message.types.ts

@@ -1,7 +1,4 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './error-message.styles.js';
 
 export type ErrorMessageProps = {
   /**
@@ -16,5 +13,4 @@ export type ErrorMessageProps = {
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/src/components/field/field.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { Children, ReactNode, cloneElement, isValidElement, useCallback } from 'react';
 import { useField } from 'react-aria';
 

package/src/components/field/field.types.ts

@@ -1,11 +1,8 @@
 import { HTMLAttributes } from 'react';
 import { AriaFieldProps } from 'react-aria';
-import { type VariantProps } from 'tailwind-variants';
 
 import { FormHintProps } from '../index.js';
 
-import { styles } from './field.styles.js';
-
 export type FieldProps = {
   /**
    * error message
@@ -20,5 +17,4 @@ export type FieldProps = {
    */
   tag?: keyof JSX.IntrinsicElements;
 } & AriaFieldProps &
-  VariantProps<typeof styles> &
   HTMLAttributes<Element>;

package/src/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.component.tsx

@@ -17,3 +17,4 @@ export const FlexiCellAdornment = ({
     </Tag>
   );
 };
+FlexiCellAdornment.displayName = 'FlexiCell.Adornment';

package/src/components/flexi-cell/components/flexi-cell-adornment/flexi-cell-adornment.types.ts

@@ -1,7 +1,4 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './flexi-cell-adornment.styles.js';
 
 export type FlexiCellAdornmentProps = {
   /**
@@ -16,5 +13,4 @@ export type FlexiCellAdornmentProps = {
    * Component's tag
    */
   tag?: keyof JSX.IntrinsicElements;
-} & HTMLAttributes<HTMLOrSVGElement> &
-  VariantProps<typeof styles>;
+} & HTMLAttributes<HTMLOrSVGElement>;

package/src/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.component.tsx

@@ -11,3 +11,4 @@ export const FlexiCellBody = ({ children, tag: Tag = 'div', className, ...props
     </Tag>
   );
 };
+FlexiCellBody.displayName = 'FlexiCell.Body';

package/src/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.types.ts

@@ -1,7 +1,4 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './flexi-cell-body.styles.js';
 
 export type BaseFlexiCellBodyProps = {
   /**
@@ -40,5 +37,4 @@ export type FlexiCellBodyProps<Tag extends ElementKeysWithoutA = ElementKeysWith
   | FlexiCellBodyAsLinkProps
   | CircleAsAllOtherTagsProps<Tag>
 ) &
-  BaseFlexiCellBodyProps &
-  VariantProps<typeof styles>;
+  BaseFlexiCellBodyProps;

package/src/components/flexi-cell/components/flexi-cell-button/flexi-cell-button.component.tsx

@@ -9,3 +9,4 @@ import { type FlexiCellButtonProps } from './flexi-cell-button.types.js';
 export const FlexiCellButton = ({ className, ...props }: FlexiCellButtonProps) => {
   return <Button className={styles({ className })} look="link" {...props} />;
 };
+FlexiCellButton.displayName = 'FlexiCell.Button';

package/src/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.component.tsx

@@ -9,3 +9,4 @@ import { FlexiCellCircleProps } from './flexi-cell-circle.types.js';
 export const FlexiCellCircle = ({ className, ...props }: FlexiCellCircleProps) => {
   return <Circle className={styles({ className })} {...props} />;
 };
+FlexiCellCircle.displayName = 'FlexiCell.Circle';

package/src/components/flexi-cell/components/flexi-cell-footer/flexi-cell-footer.component.tsx

@@ -11,3 +11,4 @@ export const FlexiCellFooter = ({ children, className, tag: Tag = 'div', ...prop
     </Tag>
   );
 };
+FlexiCellFooter.displayName = 'FlexiCell.Footer';

package/src/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.component.tsx

@@ -17,3 +17,4 @@ export const FlexiCellHint = ({
     </Tag>
   );
 };
+FlexiCellHint.displayName = 'FlexiCell.Hint';

package/src/components/flexi-cell/components/flexi-cell-hint/flexi-cell-hint.types.ts

@@ -1,7 +1,4 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { VariantProps } from 'tailwind-variants';
-
-import { styles } from './flexi-cell-hint.styles.js';
 
 export type FlexiCellHintProps = {
   /**
@@ -16,5 +13,4 @@ export type FlexiCellHintProps = {
    * Define if it is going to truncate the text
    */
   truncateText?: boolean;
-} & HTMLAttributes<HTMLOrSVGElement> &
-  VariantProps<typeof styles>;
+} & HTMLAttributes<HTMLOrSVGElement>;

package/src/components/flexi-cell/components/flexi-cell-label/flexi-cell-label.component.tsx

@@ -17,3 +17,4 @@ export const FlexiCellLabel = ({
     </Tag>
   );
 };
+FlexiCellLabel.displayName = 'FlexiCell.Label';

package/src/components/flexi-cell/components/flexi-cell-label/flexi-cell-label.types.ts

@@ -1,7 +1,4 @@
 import { CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './flexi-cell-label.styles.js';
 
 export type FlexiCellLabelProps = {
   /**
@@ -20,5 +17,4 @@ export type FlexiCellLabelProps = {
    * Define if it is going to truncate the text
    */
   truncateText?: boolean;
-} & HTMLAttributes<HTMLOrSVGElement> &
-  VariantProps<typeof styles>;
+} & HTMLAttributes<HTMLOrSVGElement>;

package/src/components/flexi-cell/flexi-cell.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { forwardRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 

package/src/components/flexi-cell/flexi-cell.types.ts

@@ -1,7 +1,4 @@
 import { CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './flexi-cell.styles.js';
 
 type BaseFlexiCellProps = {
   /**
@@ -68,7 +65,4 @@ type FlexiCellAsAllOtherTagsProps<Tag> = {
 
 export type FlexiCellProps<
   Tag extends keyof Omit<JSX.IntrinsicElements, 'a'> = keyof Omit<JSX.IntrinsicElements, 'a'>,
-> = (FlexiCellAsLinkProps | FlexiCellAsAllOtherTagsProps<Tag>) &
-  BaseFlexiCellProps &
-  VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+> = (FlexiCellAsLinkProps | FlexiCellAsAllOtherTagsProps<Tag>) & BaseFlexiCellProps & HTMLAttributes<Element>;

package/src/components/form/components/form-chit-chat/form-chit-chat.types.ts

@@ -1,12 +1,8 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './form-chit-chat.styles.js';
 
 export type FormChitChatProps = {
   /**
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/src/components/form/components/form-group/form-group.types.ts

@@ -1,12 +1,8 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './form-group.styles.js';
 
 export type FormGroupProps = {
   /**
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & Omit<VariantProps<typeof styles>, 'inline' | 'spacing'> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/src/components/form/components/form-section/form-section.types.ts

@@ -3,10 +3,15 @@ import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './form-section.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type FormSectionProps = {
+  /**
+   * Remove padding
+   */
+  noPadding?: Variants['noPadding'];
   /**
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/src/components/form/form.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { createContext, useContext } from 'react';
 
 import { ErrorMessage } from '../error-message/index.js';