@westpac/ui 0.17.0 → 0.18.0

package/dist/components/selector/components/selector-radio-group/selector-radio-group.component.js

@@ -16,19 +16,66 @@ function _extends() {
 import React, { createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
+import { FUNCTION_NOT_IMPLEMENTED } from '../../../../constants/message.js';
 import { ErrorMessage, Hint, Label } from '../../../index.js';
 import { styles } from './selector-radio-group.styles.js';
 export const SelectorRadioGroupContext = createContext({
-    name: '',
-    isDisabled: false,
-    isReadOnly: false,
-    isRequired: false,
-    validationState: null,
-    selectedValue: null,
-    setSelectedValue: ()=>null,
-    lastFocusedValue: null,
-    setLastFocusedValue: ()=>null,
-    orientation: 'vertical'
+    orientation: 'vertical',
+    state: {
+        name: '',
+        isDisabled: false,
+        isReadOnly: false,
+        isRequired: false,
+        validationState: null,
+        selectedValue: null,
+        setSelectedValue: ()=>null,
+        lastFocusedValue: null,
+        setLastFocusedValue: ()=>null,
+        isInvalid: false,
+        realtimeValidation: {
+            isInvalid: false,
+            validationErrors: [],
+            validationDetails: {
+                badInput: false,
+                customError: false,
+                patternMismatch: false,
+                rangeOverflow: false,
+                rangeUnderflow: false,
+                stepMismatch: false,
+                tooLong: false,
+                tooShort: false,
+                typeMismatch: false,
+                valid: false,
+                valueMissing: false
+            }
+        },
+        displayValidation: {
+            isInvalid: false,
+            validationErrors: [],
+            validationDetails: {
+                badInput: false,
+                customError: false,
+                patternMismatch: false,
+                rangeOverflow: false,
+                rangeUnderflow: false,
+                stepMismatch: false,
+                tooLong: false,
+                tooShort: false,
+                typeMismatch: false,
+                valid: false,
+                valueMissing: false
+            }
+        },
+        updateValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        },
+        resetValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        },
+        commitValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        }
+    }
 });
 export function SelectorRadioGroup({ className , children , label , orientation ='vertical' , errorMessage , description , ...props }) {
     const state = useRadioGroupState({
@@ -51,7 +98,7 @@ export function SelectorRadioGroup({ className , children , label , orientation
         })
     }, radioGroupProps), React.createElement(SelectorRadioGroupContext.Provider, {
         value: {
-            ...state,
+            state,
             orientation
         }
     }, children)));

package/dist/components/selector/components/selector-radio-group/selector-radio-group.types.d.ts

@@ -19,5 +19,9 @@ export type SelectorRadioGroupContextState = {
      * Controls orientation of `Radio` components, can't be applied directly on `Radio`
      */
     orientation: 'vertical' | 'horizontal';
-} & RadioGroupState;
+    /**
+     * Radio group state
+     */
+    state: RadioGroupState;
+};
 export {};

package/dist/components/tabs/components/tabs-tab/tabs-tab.component.js

@@ -18,7 +18,7 @@ import { styles } from './tabs-tab.styles.js';
 export function TabsTab({ item: { key , rendered  } , state , orientation , justify , color , look  }) {
     const ref = useRef(null);
     const { tabProps  } = useTab({
-        key
+        key: key
     }, state, ref);
     const { isFocusVisible , focusProps  } = useFocusRing();
     return React.createElement("div", _extends({}, mergeProps(tabProps, focusProps), {

package/dist/components/tabs/tabs.component.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" resolution-mode="require"/>
+import { AriaLinkOptions } from 'react-aria';
+import { ItemProps } from 'react-stately';
 import { type TabsProps } from './tabs.types.js';
-export declare function Tabs({ className, orientation, justify, children, color, look, sticky, stickyOffset, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
-export declare const TabsPanel: <T>(props: import("react-stately").ItemProps<T>) => JSX.Element;
+export declare function Tabs({ className, orientation, justify, children, color, look, sticky, stickyOffset, disabledKeys, selectedKey, defaultSelectedKey, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare const TabsPanel: (props: ItemProps<AriaLinkOptions> & AriaLinkOptions & {
+    href?: string;
+}) => JSX.Element;

package/dist/components/tabs/tabs.component.js

@@ -18,10 +18,13 @@ import { useTabList } from 'react-aria';
 import { Item, useTabListState } from 'react-stately';
 import { TabsTab, TabsTabPanel } from './components/index.js';
 import { styles as tabStyles } from './tabs.styles.js';
-export function Tabs({ className , orientation ='horizontal' , justify , children , color , look ='default' , sticky =false , stickyOffset ={} , ...props }) {
+export function Tabs({ className , orientation ='horizontal' , justify , children , color , look ='default' , sticky =false , stickyOffset ={} , disabledKeys , selectedKey , defaultSelectedKey , ...props }) {
     var _state_selectedItem;
     const state = useTabListState({
         ...props,
+        disabledKeys: disabledKeys,
+        selectedKey: selectedKey,
+        defaultSelectedKey: defaultSelectedKey,
         children
     });
     const styles = tabStyles({
@@ -32,6 +35,9 @@ export function Tabs({ className , orientation ='horizontal' , justify , childre
     const ref = useRef(null);
     const { tabListProps  } = useTabList({
         ...props,
+        disabledKeys: disabledKeys,
+        selectedKey: selectedKey,
+        defaultSelectedKey: defaultSelectedKey,
         orientation
     }, state, ref);
     return React.createElement("div", {

package/dist/constants/message.d.ts

@@ -0,0 +1 @@
+export declare const FUNCTION_NOT_IMPLEMENTED = "Function not implemented";

package/dist/constants/message.js

@@ -0,0 +1 @@
+export const FUNCTION_NOT_IMPLEMENTED = 'Function not implemented';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -241,7 +241,7 @@
     "plop": "~3.1.2",
     "postcss": "~8.4.31",
     "postcss-cli": "~10.1.0",
-    "prettier": "^2.8.4",
+    "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-docgen-typescript": "~2.2.2",
@@ -255,20 +255,20 @@
     "typescript": "^5.1.6",
     "vite": "^4.3.9",
     "vitest": "^0.30.1",
-    "@westpac/eslint-config": "~0.1.0",
-    "@westpac/test-config": "~0.0.0",
-    "@westpac/ts-config": "~0.0.0"
+    "@westpac/ts-config": "~0.0.0",
+    "@westpac/eslint-config": "~0.2.0",
+    "@westpac/test-config": "~0.0.0"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",
-    "@react-aria/accordion": "3.0.0-alpha.19",
-    "@react-aria/utils": "~3.18.0",
-    "@react-spectrum/utils": "~3.10.0",
+    "@react-aria/accordion": "3.0.0-alpha.27",
+    "@react-aria/utils": "~3.23.2",
+    "@react-spectrum/utils": "~3.11.5",
     "clsx": "^1.2.1",
     "framer-motion": "~10.12.16",
     "lodash.throttle": "~4.1.1",
-    "react-aria": "~3.25.0",
-    "react-stately": "~3.23.0"
+    "react-aria": "~3.32.1",
+    "react-stately": "~3.30.1"
   },
   "overrides": {
     "react-aria": {

package/src/components/accordion/accordion.component.tsx

@@ -4,7 +4,7 @@ import { useAccordion } from '@react-aria/accordion';
 import { filterDOMProps } from '@react-aria/utils';
 import { useDOMRef } from '@react-spectrum/utils';
 import React, { Children, cloneElement, forwardRef, isValidElement } from 'react';
-import { Item, useTreeState } from 'react-stately';
+import { Item, type ItemProps, useTreeState } from 'react-stately';
 
 import { styles } from './accordion.styles.js';
 import { type AccordionProps } from './accordion.types.js';
@@ -24,7 +24,7 @@ function Accordion<T extends object>(
       // equal to (if (child == null || typeof child == 'string'))
       if (!isValidElement(child)) return child;
       return cloneElement(child, {
-        ...child.props,
+        ...(child.props as any),
         // Adding hasChildItems false by default
         hasChildItems: false,
       });
@@ -52,4 +52,4 @@ const _Accordion = forwardRef(Accordion) as unknown as { displayName: string } &
 _Accordion.displayName = 'Accordion';
 
 export { _Accordion as Accordion };
-export const AccordionItem = Item;
+export const AccordionItem: <T>(props: ItemProps<T>) => JSX.Element = Item;

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

@@ -20,8 +20,8 @@ export function AccordionItem<T = any>({
   const { state, item } = props;
   const { buttonProps, regionProps } = useAccordionItem<T>(props, state, ref);
   const { isFocusVisible, focusProps } = useFocusRing();
-  const isOpen = state.expandedKeys.has(item.key);
-  const isDisabled = state.disabledKeys.has(item.key);
+  const isOpen = state.expandedKeys.has(item.key as any);
+  const isDisabled = state.disabledKeys.has(item.key as any);
   const { hoverProps } = useHover({ isDisabled });
   const { direction } = useLocale();
   const styles = accordionItemStyles({ isOpen, isDisabled, look, isFocusVisible });

package/src/components/autocomplete/autocomplete.component.tsx

@@ -112,7 +112,11 @@ export function Autocomplete<T extends object>({
 
       <div ref={outerRef} className={styles.outerWrapper()}>
         <div className={styles.iconWrapper()}>
-          {loadingState ? <ProgressIndicator size={iconSize} /> : <SearchIcon aria-hidden size={iconSize} />}
+          {loadingState ? (
+            <ProgressIndicator size={iconSize} color="muted" />
+          ) : (
+            <SearchIcon aria-hidden size={iconSize} color="muted" />
+          )}
         </div>
         <input
           {...mergeProps(inputProps, inputFocusProps)}

package/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.component.tsx

@@ -18,7 +18,7 @@ export function AutocompleteListBoxOption({ item, state }: AutocompleteListBoxOp
 
   const { optionProps, isDisabled, isSelected, isFocused } = useOption(
     {
-      key: item.key,
+      key: item.key as any,
     },
     state,
     ref,

package/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white',
+    base: 'flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm text-text transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white',
     variants: {
       isFocused: {
         true: 'bg-hero !text-white',

package/src/components/autocomplete/components/autocomplete-popover/autocomplete-popover.component.tsx

@@ -17,9 +17,12 @@ export function AutocompletePopover(props: AutocompletePopoverProps) {
     state,
   );
 
+  // This is required so branding applies correctly by default due to portal location, can be overridden with portalContainer prop
+  const brandContainer = document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]');
+
   const width = props.triggerRef.current?.getBoundingClientRect().width;
   return (
-    <Overlay portalContainer={portalContainer}>
+    <Overlay portalContainer={portalContainer || brandContainer || document.body}>
       {!isNonModal && <div {...underlayProps} className="fixed inset-0" />}
 
       <div

package/src/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.styles.ts

@@ -4,8 +4,8 @@ export const styles = tv(
   {
     slots: {
       base: 'flex max-h-screen max-w-full flex-1 flex-col overflow-hidden rounded-t-md bg-white shadow-sm md:w-[37.5rem] md:rounded-md',
-      title: 'typography-body-7 p-7 pb-4 pt-9 font-bold max-md:px-5',
-      body: 'flex-1 overflow-auto px-7 pb-7 max-md:px-5',
+      title: 'typography-body-7 p-7 pb-4 pt-9 font-bold text-text max-md:px-5',
+      body: 'flex-1 overflow-auto px-7 pb-7 text-text max-md:px-5',
       closeBtn: 'absolute right-3 top-3 p-0',
       buttonWrapper: '-mt-2 flex gap-1 px-7 pb-7 max-md:flex-col max-md:px-5 max-md:pb-5',
       primaryBtn: '',

package/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx

@@ -29,6 +29,9 @@ export function BottomSheetModal({ state, height, width, children, portalContain
   const controls = useAnimation();
   const [isMobile, setIsMobile] = useState(checkIfItIsMobile(MEDIUM_BREAKPOINT_AS_NUMBER));
 
+  // This is required so branding applies correctly by default due to portal location, can be overridden with portalContainer prop
+  const brandContainer = document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]');
+
   useEffect(() => {
     function handleResize() {
       setIsMobile(checkIfItIsMobile(MEDIUM_BREAKPOINT_AS_NUMBER));
@@ -65,7 +68,7 @@ export function BottomSheetModal({ state, height, width, children, portalContain
   }
 
   return (
-    <Overlay portalContainer={portalContainer}>
+    <Overlay portalContainer={portalContainer || brandContainer || document.body}>
       <div className={styles.underlay()} {...underlayProps}>
         <motion.div
           animate={controls}

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

@@ -4,25 +4,72 @@ import React, { createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 
+import { FUNCTION_NOT_IMPLEMENTED } from '../../constants/message.js';
 import { ButtonGroupButton, ErrorMessage, Hint, Label } from '../index.js';
 
 import { styles as buttonGroupStyles } from './button-group.styles.js';
 import { ButtonGroupContextState, type ButtonGroupProps } from './button-group.types.js';
 
 export const ButtonGroupContext = createContext<ButtonGroupContextState>({
-  // TODO: Remove deprecated name prop once React Aria removes it from RadioGroupState
-  name: '',
-  isDisabled: false,
-  isReadOnly: false,
-  isRequired: false,
-  validationState: null,
-  selectedValue: null,
-  setSelectedValue: () => null,
-  lastFocusedValue: null,
-  setLastFocusedValue: () => null,
   block: false,
   look: 'hero',
   size: 'medium',
+  state: {
+    // TODO: Remove deprecated name prop once React Aria removes it from RadioGroupState
+    name: '',
+    isDisabled: false,
+    isReadOnly: false,
+    isRequired: false,
+    validationState: null,
+    selectedValue: null,
+    setSelectedValue: () => null,
+    lastFocusedValue: null,
+    setLastFocusedValue: () => null,
+    isInvalid: false,
+    realtimeValidation: {
+      isInvalid: false,
+      validationErrors: [],
+      validationDetails: {
+        badInput: false,
+        customError: false,
+        patternMismatch: false,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        typeMismatch: false,
+        valid: false,
+        valueMissing: false,
+      },
+    },
+    displayValidation: {
+      isInvalid: false,
+      validationErrors: [],
+      validationDetails: {
+        badInput: false,
+        customError: false,
+        patternMismatch: false,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        typeMismatch: false,
+        valid: false,
+        valueMissing: false,
+      },
+    },
+    updateValidation: function (): void {
+      throw new Error(FUNCTION_NOT_IMPLEMENTED);
+    },
+    resetValidation: function (): void {
+      throw new Error(FUNCTION_NOT_IMPLEMENTED);
+    },
+    commitValidation: function (): void {
+      throw new Error(FUNCTION_NOT_IMPLEMENTED);
+    },
+  },
 });
 
 export function ButtonGroup({
@@ -56,7 +103,7 @@ export function ButtonGroup({
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
       <div className={styles.buttonWrapper()}>
-        <ButtonGroupContext.Provider value={{ ...state, size, look, block }}>
+        <ButtonGroupContext.Provider value={{ state, size, look, block }}>
           {buttons.map((button, index) => (
             <ButtonGroupButton key={index} className="group/buttons" {...button} />
           ))}

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

@@ -46,5 +46,12 @@ export type ButtonGroupContextState = {
    * Controls look of `Button` components, can't be applied directly to `Button`
    */
   look?: 'hero' | 'primary';
-} & RadioGroupState &
-  Pick<ButtonProps, 'size'>;
+  /**
+   * Controls look of `Button` components, can't be applied directly to `Button`
+   */
+  size: ButtonProps['size'];
+  /**
+   * Radio group state
+   */
+  state: RadioGroupState;
+};

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

@@ -10,8 +10,7 @@ import { styles as buttonStyles } from './button-group-button.styles.js';
 import { type ButtonGroupButtonProps } from './button-group-button.types.js';
 
 export function ButtonGroupButton({ className, label, ...props }: ButtonGroupButtonProps) {
-  const state = useContext(ButtonGroupContext);
-  const { size, look, block } = state;
+  const { state, size, look, block } = useContext(ButtonGroupContext);
   const ref = useRef(null);
   const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children: label }, state, ref);
   const { isFocusVisible, focusProps } = useFocusRing();

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

@@ -4,6 +4,7 @@ import React, { createContext, useEffect, useId, useMemo, useRef, useState } fro
 import { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 
+import { FUNCTION_NOT_IMPLEMENTED } from '../../constants/message.js';
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
 import { CheckboxGroupCheckbox, ErrorMessage, Hint, Label } from '../index.js';
@@ -14,15 +15,66 @@ import { type CheckboxGroupContextState, type CheckboxGroupProps } from './check
 export const CheckboxGroupContext = createContext<CheckboxGroupContextState>({
   orientation: 'vertical',
   size: 'medium',
-  value: [],
-  isDisabled: false,
-  isReadOnly: false,
-  isSelected: () => false,
-  setValue: () => null,
-  addValue: () => null,
-  removeValue: () => null,
-  toggleValue: () => null,
-  validationState: 'valid',
+  state: {
+    value: [],
+    isDisabled: false,
+    isReadOnly: false,
+    isSelected: () => false,
+    setValue: () => null,
+    addValue: () => null,
+    removeValue: () => null,
+    toggleValue: () => null,
+    validationState: 'valid',
+    isInvalid: false,
+    isRequired: false,
+    setInvalid: () =>
+      function (): void {
+        throw new Error(FUNCTION_NOT_IMPLEMENTED);
+      },
+    realtimeValidation: {
+      isInvalid: false,
+      validationErrors: [],
+      validationDetails: {
+        badInput: false,
+        customError: false,
+        patternMismatch: false,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        typeMismatch: false,
+        valid: false,
+        valueMissing: false,
+      },
+    },
+    displayValidation: {
+      isInvalid: false,
+      validationErrors: [],
+      validationDetails: {
+        badInput: false,
+        customError: false,
+        patternMismatch: false,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        typeMismatch: false,
+        valid: false,
+        valueMissing: false,
+      },
+    },
+    updateValidation: function (): void {
+      throw new Error(FUNCTION_NOT_IMPLEMENTED);
+    },
+    resetValidation: function (): void {
+      throw new Error(FUNCTION_NOT_IMPLEMENTED);
+    },
+    commitValidation: function (): void {
+      throw new Error(FUNCTION_NOT_IMPLEMENTED);
+    },
+  },
 });
 export function CheckboxGroup({
   className,
@@ -65,7 +117,7 @@ export function CheckboxGroup({
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
       <div className={styles.itemWrapper()} id={panelId}>
-        <CheckboxGroupContext.Provider value={{ ...state, orientation, size }}>
+        <CheckboxGroupContext.Provider value={{ state, orientation, size }}>
           {childrenToRender}
         </CheckboxGroupContext.Provider>
         {hiddenOptions && (

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

@@ -45,4 +45,8 @@ export type CheckboxGroupContextState = {
    * Controls size of `CheckboxItem` components, can't be applied directly on `CheckboxItem`
    */
   size: 'medium' | 'large';
-} & CheckboxGroupState;
+  /**
+   * State
+   */
+  state: CheckboxGroupState;
+};

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

@@ -32,8 +32,7 @@ function CheckIcon({ copyrightYear = '2024', size, ...props }: IconProps) {
 }
 
 function BaseCheckbox({ className, hint, label, value, ...props }: CheckboxGroupCheckboxProps, ref: any) {
-  const state = useContext(CheckboxGroupContext);
-  const { size, orientation } = state;
+  const { state, size, orientation } = useContext(CheckboxGroupContext);
   const localRef = useRef(null);
   const { inputProps, isDisabled, isSelected } = useCheckboxGroupItem(
     { ...props, value, children: label },

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

@@ -65,6 +65,10 @@ export type DatePickerProps = {
    * onOpen
    */
   onOpen?: (...args: any[]) => unknown;
+  /*
+   * placeholder
+   */
+  placeholder?: string;
   /**
    * Size of datepicker input
    */

package/src/components/error-message/error-message.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { AlertIcon } from '../../components/icon/index.js';
 
@@ -21,7 +21,7 @@ export function ErrorMessage({ className, tag: Tag = 'div', icon: Icon, message,
   ) : (
     <Tag className={styles.base({ className: `${className} mb-2` })} {...props}>
       <FinalIcon copyrightYear="2023" className={styles.icon({})} size="xsmall" look="outlined" />
-      {message}
+      {message as ReactNode}
     </Tag>
   );
 }

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { AriaFieldProps } from 'react-aria';
 
 export type ErrorMessageProps = {
   /**
@@ -8,7 +9,7 @@ export type ErrorMessageProps = {
   /**
    * Message or messages
    */
-  message?: ReactNode | ReactNode[];
+  message?: AriaFieldProps['errorMessage'];
   /**
    * Tag to render
    */

package/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx

@@ -20,8 +20,11 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, ...props }:
     return null;
   }
 
+  // This is required so branding applies correctly by default due to portal location, can be overridden with portalContainer prop
+  const brandContainer = document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]');
+
   return (
-    <Overlay portalContainer={portalContainer}>
+    <Overlay portalContainer={portalContainer || brandContainer || document.body}>
       <div style={{ zIndex }} className={styles.base()} {...underlayProps}>
         <div {...modalProps} ref={ref} className={styles.modal()}>
           {children}

package/src/components/modal/components/modal-dialog/modal-dialog.styles.ts

@@ -3,8 +3,8 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative mx-auto flex max-w-full flex-col overflow-hidden rounded bg-white outline-none',
-      title: 'typography-body-7 pb-4 pt-9 font-bold',
+      base: 'relative mx-auto flex max-w-full flex-col overflow-hidden rounded bg-white text-text outline-none',
+      title: 'typography-body-7 pb-4 pt-9 font-bold text-text',
       close: 'absolute right-0 top-0 block p-3',
     },
     variants: {

package/src/components/pagination/pagination.component.tsx

@@ -23,12 +23,12 @@ export function Pagination({
 
   const generateHandleOnClickBackwards = useCallback(
     (
-        current: number,
-        infinite: boolean,
-        forwardOnly: boolean,
-        onChange: (page: number) => unknown,
-        pages: PaginationProps['pages'],
-      ) =>
+      current: number,
+      infinite: boolean,
+      forwardOnly: boolean,
+      onChange: (page: number) => unknown,
+      pages: PaginationProps['pages'],
+    ) =>
       () => {
         if (infinite && forwardOnly) {
           return onChange(pages.length);

package/src/components/popover/components/panel/panel.styles.ts

@@ -9,8 +9,8 @@ export const styles = tv(
         'absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] border-t-muted after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
       closeBtn: 'absolute right-1 top-1 m-1 p-0 hover:opacity-80',
       content: 'w-[17.625rem] py-4 pl-3 pr-5',
-      heading: 'typography-body-9 mb-2 font-bold',
-      body: 'typography-body-10',
+      heading: 'typography-body-9 mb-2 font-bold text-text',
+      body: 'typography-body-10 text-text',
     },
     variants: {
       placement: {