react-magma-dom 4.10.0-next.9 → 4.10.0

package/dist/components/AIButton/StyledAIButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { AIButtonSize, BaseAIButtonProps } from '.';
+export interface StyledAIButtonProps extends BaseAIButtonProps {
+    iconOnly?: boolean;
+    trailingIcon?: React.ReactElement;
+    leadingIcon?: boolean | React.ReactElement;
+}
+export declare function getIconSize(size: any, theme: any): any;
+export interface SpanProps {
+    hasIconLeading?: boolean;
+    size?: AIButtonSize;
+}
+export declare const StyledAIButton: React.ForwardRefExoticComponent<StyledAIButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/AIButton/StyledAIButtonTemplate.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { StyledAIButtonProps } from './StyledAIButton';
+export declare const buttonStyles: (props: any) => import("@emotion/react").SerializedStyles;
+export declare const BaseStyledAIButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+}, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const ChildrenWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & {
+    isLoading: boolean;
+    testId?: string;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledAIButtonTemplate: React.ForwardRefExoticComponent<StyledAIButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/AIButton/index.d.ts

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { IconProps } from 'react-magma-icons';
+import { ThemeInterface } from '../../theme/magma';
+import { XOR } from '../../utils';
+export declare enum AIButtonVariant {
+    variantA = "variantA",
+    variantB = "variantB"
+}
+export declare enum AIButtonShape {
+    fill = "fill",
+    leftCap = "leftCap",
+    rightCap = "rightCap",
+    round = "round"
+}
+export declare enum AIButtonSize {
+    large = "large",
+    medium = "medium",
+    small = "small"
+}
+export declare enum AIButtonTextTransform {
+    uppercase = "uppercase",
+    none = "none"
+}
+export declare enum AIButtonType {
+    button = "button",
+    submit = "submit",
+    reset = "reset"
+}
+export interface BaseAIButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Set the button to display full-width.
+     * @default false
+     */
+    isFullWidth?: boolean;
+    isInverse?: boolean;
+    /**
+     * Defines the border radius
+     * @default AIButtonShape.fill
+     */
+    shape?: AIButtonShape;
+    /**
+     *  Set the button to a loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * The relative size of the button
+     * @default AIButtonSize.medium
+     */
+    size?: AIButtonSize;
+    /**
+     * Determines whether the button appears in all-caps
+     * @default AIButtonTextTransform.uppercase
+     */
+    textTransform?: AIButtonTextTransform;
+    /**
+     * The variant of the button
+     * @default AIButtonVariant.variantA
+     */
+    variant?: AIButtonVariant;
+    /**
+     * @internal
+     */
+    testId?: string;
+    /**
+     * @internal
+     */
+    theme?: ThemeInterface;
+    /**
+     * The type attribute of the button
+     * @default AIButtonType.button
+     */
+    type?: AIButtonType;
+    /**
+     * Sets the color for the left side of the button gradient.
+     */
+    leftColor?: string;
+    /**
+     * Sets the color for the right side of the button gradient.
+     */
+    rightColor?: string;
+    /**
+     * Sets the color when the button is hovered.
+     */
+    hoverColor?: string;
+    /**
+     * Sets the color when the button is pressed (active).
+     */
+    pressedColor?: string;
+    /**
+     * Enables gradient animation for the button background.
+     * @default false
+     */
+    isAnimated?: boolean;
+}
+export interface TextAIButtonProps extends BaseAIButtonProps {
+    /**
+     * The content of the component
+     */
+    children: React.ReactChild | React.ReactChild[];
+    /**
+     * Icon to display on the right side within the component
+     */
+    trailingIcon?: React.ReactElement<IconProps>;
+    /**
+     * Leading icon to display on the left side within the component
+     */
+    leadingIcon?: boolean | React.ReactElement<IconProps>;
+}
+export interface IconOnlyAIButtonProps extends BaseAIButtonProps {
+    /**
+     * Icon to display on the right side within the component
+     */
+    leadingIcon?: true | React.ReactElement<IconProps>;
+    /**
+     * The text the screen reader will announce. Required for icon-only buttons
+     */
+    'aria-label': string;
+    children?: never;
+}
+export declare type AIButtonProps = XOR<TextAIButtonProps, IconOnlyAIButtonProps>;
+export declare const AIButton: React.ForwardRefExoticComponent<({
+    trailingIcon?: never;
+} & IconOnlyAIButtonProps & React.RefAttributes<HTMLButtonElement>) | ({} & TextAIButtonProps & React.RefAttributes<HTMLButtonElement>)>;

package/dist/components/AIButton/styles.d.ts

@@ -0,0 +1,14 @@
+export declare function buildPropsWithDefaultAIButtonStyles(props: any): any;
+export declare function buildAIButtonBorderRadius(props: any): any;
+export declare function buildAIButtonFontSize(props: any): any;
+export declare function buildAIButtonLineHeight(props: any): any;
+export declare function buildAIButtonSize(props: any): any;
+export declare function buildAIButtonPadding(props: any): string;
+export declare function buildAIButtonBackground(initialProps: any): any;
+export declare function buildAIBorderColor(initialProps: any): any;
+export declare function buildAIColor(initialProps: any): any;
+export declare function buildAIFocusBackground(initialProps: any): string;
+export declare function buildAIFocusColor(initialProps: any): any;
+export declare function buildAIActiveBackground(initialProps: any): string;
+export declare function buildAIActiveColor(initialProps: any): any;
+export declare function buildBoxShadow(props: any): string;

package/dist/components/Combobox/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { ReferenceType } from '@floating-ui/react-dom';
 import { UseComboboxProps, UseComboboxState, UseMultipleSelectionProps } from 'downshift';
 import { InternalMultiProps, InternalSelectProps, SelectOptions } from '../Select';
 import { Omit, XOR } from '../../utils';
@@ -14,7 +13,7 @@ export interface ComboboxProps<T extends SelectOptions> extends Omit<UseCombobox
      */
     containerStyle?: React.CSSProperties;
     /**
-     * Default selectable options. Allows for uncontrolled component and internal creation of items. Can be an array of strings or objects
+     * Default selectable options. Allows for an uncontrolled component and internal creation of items. Can be an array of strings or objects
      */
     defaultItems?: T[];
     /**
@@ -22,10 +21,6 @@ export interface ComboboxProps<T extends SelectOptions> extends Omit<UseCombobox
      * @default false
      */
     disableCreateItem?: boolean;
-    /**
-     * @internal
-     */
-    floatingElementStyles?: React.CSSProperties;
     /**
      * @internal
      */
@@ -98,14 +93,6 @@ export interface ComboboxProps<T extends SelectOptions> extends Omit<UseCombobox
      * Event that fires when a new item is created with the create item option is clicked in the item list menu
      */
     onItemCreated?: (newItem: T) => void;
-    /**
-     * @internal
-     */
-    setFloating?: (node: ReferenceType) => void;
-    /**
-     * @internal
-     */
-    setReference?: (node: ReferenceType) => void;
     /**
      * Reference to the toggle button element wrapping the input in the combobox
      */

package/dist/components/DatePicker/CalendarContext.d.ts

@@ -16,5 +16,9 @@ export interface CalendarContextInterface {
     onPrevMonthClick: () => void;
     onNextMonthClick: () => void;
     setDateFocused: (value: boolean) => void;
+    setFocusedDate: (day: Date) => void;
+    setFocusedTodayDate: (event: React.SyntheticEvent) => void;
+    setMonthFocusedDate: (monthNumber: number) => void;
+    setYearFocusedDate: (yearNumber: number) => void;
 }
 export declare const CalendarContext: React.Context<CalendarContextInterface>;

package/dist/components/DatePicker/CalendarHeader.d.ts

@@ -3,5 +3,5 @@ interface CalendarHeaderProps {
     focusHeader?: boolean;
     isInverse?: boolean;
 }
-export declare const CalendarHeader: React.ForwardRefExoticComponent<CalendarHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CalendarHeader: React.FunctionComponent<CalendarHeaderProps>;
 export {};

package/dist/components/DatePicker/CalendarMonth.d.ts

@@ -5,6 +5,7 @@ interface CalendarMonthProps {
     isInverse?: boolean;
     handleCloseButtonClick: (event: React.SyntheticEvent) => void;
     setDateFocused?: (value: boolean) => void;
+    dateTimePickerContent?: React.ReactNode;
 }
 export declare const CalendarMonth: React.FunctionComponent<CalendarMonthProps>;
 export {};

package/dist/components/DatePicker/MonthPicker.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface MonthPickerProps {
+    currentMonth: string;
+    isInverse: boolean;
+}
+export declare const MonthPicker: React.FunctionComponent<MonthPickerProps>;

package/dist/components/DatePicker/StyledSelect.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Theme } from '@emotion/react';
+export declare const StyledSelect: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: import("react").ElementType<any>;
+} & {
+    isInverse: boolean;
+    theme: Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/DatePicker/YearPicker.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface YearPickerProps {
+    currentYear: number;
+    isInverse: boolean;
+}
+export declare const YearPicker: React.FunctionComponent<YearPickerProps>;
+export {};

package/dist/components/DatePicker/index.d.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
 import { Omit } from '../../utils';
+export interface DatePickerApi {
+    openDatePickerManually(event: any): void;
+    closeDatePickerManually(event: any): void;
+}
 export interface DatePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
     /**
      * Style properties for the component container element
@@ -88,5 +92,25 @@ export interface DatePickerProps extends Omit<React.InputHTMLAttributes<HTMLInpu
      * Event that will fire when the text input gains focus
      */
     onInputFocus?: (event: React.FocusEvent) => void;
+    /**
+     * @internal
+     */
+    dateTimePickerContent?: any;
+    /**
+     * @internal
+     */
+    additionalInputContent?: any;
+    /**
+     * @internal
+     */
+    apiRef?: React.MutableRefObject<DatePickerApi | undefined>;
+    /**
+     * @internal
+     */
+    setAdditionalInputContent?: (value: string) => void;
+    /**
+     * @internal
+     */
+    onClear?: (event: React.MouseEvent) => void;
 }
 export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/DatePicker/utils.d.ts

@@ -6,3 +6,9 @@ export declare function getPrevMonthFromDate(prevDate: any): Date;
 export declare function getNextMonthFromDate(prevDate: any): Date;
 export declare function i18nFormat(date: any, formatStr?: string, locale?: Locale): string;
 export declare function getDateFromString(date: any): Date;
+export declare function getCurrentMonthAndYear(date: Date, locale: Locale): {
+    month: string;
+    year: string;
+};
+export declare function setMonthForDate(prevDate: any, numberMonth: number): Date;
+export declare function setYearForDate(prevDate: any, numberYear: number): Date;

package/dist/components/DateTimePicker/index.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+export interface DateTimePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue'> {
+    /**
+     * Default selected date and time values
+     */
+    defaultValue?: Date;
+    /**
+     * Content of the error message. If a value is provided, the component will be styled to show an error state
+     */
+    errorMessage?: React.ReactNode;
+    /**
+     * Content of the helper message
+     */
+    helperMessage?: React.ReactNode;
+    /**
+     * Style properties for the input element
+     */
+    inputStyle?: React.CSSProperties;
+    /**
+     * Clear contents of input by clicking a clear button
+     * @default false
+     */
+    isClearable?: boolean;
+    /**
+     * If true, the component will have inverse styling to better appear on a dark background
+     * @default false
+     */
+    isInverse?: boolean;
+    /**
+     * Style properties for the label element
+     */
+    labelStyle?: React.CSSProperties;
+    /**
+     * Text for label
+     */
+    labelText: React.ReactNode;
+    /**
+     * Text for time picker label
+     */
+    timePickerLabelText?: React.ReactNode;
+    /**
+     * Text for button label
+     */
+    buttonLabelText?: React.ReactNode;
+    /**
+     * Maximum date allowed to be chosen in the calendar
+     */
+    maxDate?: Date;
+    /**
+     * Style properties for the helper or error message
+     */
+    messageStyle?: React.CSSProperties;
+    /**
+     * Minimum date allowed to be chosen in the calendar
+     */
+    minDate?: Date;
+    /**
+     * Text for input placeholder
+     */
+    placeholder?: string;
+    /**
+     * If true, this component must have a value
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * @internal
+     */
+    testId?: string;
+    /**
+     * Value of the date input, used when setting the date value externally
+     */
+    value?: Date;
+    /**
+     * Event that will fire when day is changed
+     */
+    onDateChange?: (day: Date, event: React.SyntheticEvent) => void;
+    /**
+     * Event that will fire when time is changed
+     */
+    onTimeChange?: (time: string) => void;
+    /**
+     * Event that will fire when the text input loses focus
+     */
+    onInputBlur?: (event: React.FocusEvent) => void;
+    /**
+     * Event that will fire when the text input is changed
+     */
+    onInputChange?: (event: React.ChangeEvent) => void;
+    /**
+     * Event that will fire when the text input gains focus
+     */
+    onInputFocus?: (event: React.FocusEvent) => void;
+    /**
+     * Event that will fire when the done button is clicked
+     */
+    onDone?: (event: React.SyntheticEvent) => void;
+}
+export declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Drawer/Drawer.d.ts

@@ -32,6 +32,11 @@ export interface DrawerProps extends Omit<ModalProps, 'size'> {
      * @default true
      */
     showBackgroundOverlay?: boolean;
+    /**
+     * If true, enables sliding animations for the drawer
+     * @default false
+     */
+    isAnimated?: boolean;
     isInverse?: boolean;
 }
 export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/IconButton/index.d.ts

@@ -40,6 +40,7 @@ export interface SpanProps {
     hasIconLeading?: boolean;
     size?: ButtonSize;
 }
+export declare function getIconSize(size: any, theme: any): any;
 export declare function instanceOfIconOnly(object: any): object is IconOnlyButtonProps;
 export declare const IconButton: React.ForwardRefExoticComponent<({} & IconTextButtonProps & React.RefAttributes<HTMLButtonElement>) | ({
     children?: never;

package/dist/components/Modal/Modal.d.ts

@@ -96,5 +96,10 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
      * @internal
      */
     theme?: ThemeInterface;
+    /**
+     * Shows the drawer transition animation
+     * @internal
+     */
+    hasDrawerAnimation?: boolean;
 }
 export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Popover/Popover.d.ts

@@ -4,8 +4,15 @@ export declare enum PopoverPosition {
     bottom = "bottom",
     top = "top"
 }
+export declare enum PopoverAlignment {
+    center = "center",
+    start = "start",
+    end = "end"
+}
+export declare type PopoverPlacement = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
 export interface PopoverApi {
     closePopoverManually(event: any): void;
+    openPopoverManually(event: any): void;
 }
 export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -64,6 +71,7 @@ export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
      * The ref object that allows Popover manipulation.
      * Actions available:
      * closePopoverManually(event): void - Closes the popover manually.
+     * openPopoverManually(event): void - Opens the popover manually.
      */
     apiRef?: React.MutableRefObject<PopoverApi | undefined>;
     /**
@@ -72,10 +80,15 @@ export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default false
      */
     focusTrap?: boolean;
+    /**
+     * Alignment of the popover content
+     * @default PopoverAlignment.center
+     */
+    alignment?: PopoverAlignment;
 }
 export interface PopoverContextInterface {
     floatingStyles?: React.CSSProperties;
-    position?: PopoverPosition;
+    position?: PopoverPlacement;
     closePopover?: (event: React.SyntheticEvent | React.KeyboardEvent) => void;
     popoverTriggerId?: React.MutableRefObject<string>;
     popoverContentId?: React.MutableRefObject<string>;
@@ -99,4 +112,5 @@ export interface PopoverContextInterface {
 }
 export declare const PopoverContext: React.Context<PopoverContextInterface>;
 export declare function hasActiveElementsChecker(ref: any): boolean;
+export declare function isElementInteractive(element: EventTarget | null): boolean;
 export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Select/index.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ReferenceType } from '@floating-ui/react-dom/dist/floating-ui.react-dom';
 import { UseMultipleSelectionProps, UseSelectProps } from 'downshift';
 import { Omit, XOR } from '../../utils';
 import { LabelPosition } from '../Label';
@@ -108,10 +107,6 @@ export interface SelectProps<T extends SelectOptions> extends UseSelectProps<T>,
      * Id of the element that describes the select trigger button
      */
     ariaDescribedBy?: string;
-    /**
-     * @internal
-     */
-    floatingElementStyles?: React.CSSProperties;
     /**
      * @internal
      */
@@ -148,14 +143,6 @@ export interface SelectProps<T extends SelectOptions> extends UseSelectProps<T>,
      * Event that will fire when a keypress is released while focused on the trigger button
      */
     onKeyUp?: (event: React.KeyboardEvent) => void;
-    /**
-     * @internal
-     */
-    setFloating?: (node: ReferenceType) => void;
-    /**
-     * @internal
-     */
-    setReference?: (node: ReferenceType) => void;
 }
 export interface MultiSelectProps<T extends SelectOptions> extends UseMultipleSelectionProps<T>, Omit<SelectProps<T>, 'onStateChange' | 'stateReducer' | 'isMulti'>, InternalMultiProps<T> {
     /**

package/dist/components/Table/Table.d.ts

@@ -13,11 +13,21 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
      * @default false
      */
     hasHoverStyles?: boolean;
+    /**
+     *  If true, the table will have additional styles for table.
+     *  @default false
+     */
+    hasTablePagination?: boolean;
     /**
      * If true, the table will have square edges
      * @default false
      */
     hasSquareCorners?: boolean;
+    /**
+     * If true, the table will have outer border
+     * @default false
+     */
+    hasOutsideBorder?: boolean;
     /**
      * If true, columns will have vertical borders
      */
@@ -42,6 +52,12 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
     minWidth?: number;
     rowCount?: number;
     selectedItems?: Array<number>;
+    /**
+     * The title or caption of a table inside a <caption> HTML element that provides the table an accessible
+     * description.
+     * It can be a simple string or a React node, such as a heading element (e.g., <h1>, <h2>).
+     */
+    tableTitle?: React.ReactNode | string;
     /**
      * @internal
      */
@@ -74,6 +90,7 @@ interface TableContextInterface {
     density?: TableDensity;
     hasHoverStyles?: boolean;
     hasSquareCorners?: boolean;
+    hasTablePagination?: boolean;
     hasVerticalBorders?: boolean;
     hasZebraStripes?: boolean;
     isInverse?: boolean;
@@ -97,11 +114,20 @@ export declare const TableWrapper: import("@emotion/styled").StyledComponent<{
 } & {
     minWidth: number;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTableTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & {
+    isInverse: boolean;
+    isTitleNode: boolean;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const StyledTable: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType<any>;
 } & {
+    hasOutsideBorder?: boolean;
     hasSquareCorners?: boolean;
+    hasTablePagination?: boolean;
     isInverse?: boolean;
     minWidth: number;
 }, React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;

package/dist/components/Table/TableHeaderCell.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TableCellAlign, TableSortDirection } from './Table';
-export interface TableHeaderCellProps extends React.HTMLAttributes<HTMLTableHeaderCellElement> {
+export interface TableHeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
     /**
      * Text alignment of the cell content. Right alignment should be used for numeric values
      * @default TableCellAlign.left
@@ -38,6 +38,14 @@ export interface TableHeaderCellProps extends React.HTMLAttributes<HTMLTableHead
      * @default auto
      */
     width?: string | number;
+    /**
+     * Indicates how many columns the header cell spans or extends
+     */
+    colSpan?: number;
+    /**
+     * Indicates how many rows the header cell spans or extends
+     */
+    rowSpan?: number;
 }
 export declare enum TableHeaderCellScope {
     col = "col",

package/dist/components/Table/TablePagination.d.ts

@@ -35,6 +35,11 @@ export interface BaseTablePaginationProps extends React.HTMLAttributes<HTMLDivEl
      * @default true
      */
     hasSquareCorners?: boolean;
+    /**
+     * If true, the table paginator will have outer border
+     * @default false
+     */
+    hasOutsideBorder?: boolean;
 }
 export interface ControlledPageProps {
     /**

package/dist/components/Table/TableRow.d.ts

@@ -25,7 +25,7 @@ export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement>
     onTableRowSelect?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     rowIndex?: number;
     /**
-     * Unique name to be used to identify row for screenreaders
+     * Unique name to be used to identify row for screen readers
      */
     rowName?: string;
     /**

package/dist/components/Tabs/CustomTab.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TabProps } from './Tab';
+/**
+ * CustomTab allows full customization of the tab content while preserving tab behavior.
+ * You can pass any children (e.g., a Button) and all tab context/props will be handled.
+ */
+export declare const CustomTab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Tabs/Tab.d.ts

@@ -8,6 +8,11 @@ export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
      */
     icon?: React.ReactElement<any> | React.ReactElement<any>[];
     isInverse?: boolean;
+    /**
+     * If true, the tab will have no styles and will render the children directly.
+     * @internal
+     */
+    unstyled?: boolean;
     /**
      * Determines whether the tab appears in all-caps
      * @default TabsTextTransform.uppercase
@@ -33,6 +38,7 @@ export declare const StyledTabsChild: import("@emotion/styled").StyledComponent<
     isInverse?: boolean;
     orientation: TabsOrientation;
     theme: ThemeInterface;
+    unstyled?: boolean;
 }, React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export declare const TabStyles: (props: any) => import("@emotion/react").SerializedStyles;
 export declare const StyledIcon: import("@emotion/styled").StyledComponent<{