@atom-learning/components 6.0.0-beta.5 → 6.0.0-beta.7

package/dist/src/components/segmented-control/SegmentedControlHeading.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+declare const StyledHeading: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
+} & {
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
+    size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLParagraphElement>, "as"> & {
+    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLParagraphElement> & {
+    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const SegmentedControlHeading: (props: Omit<React.ComponentProps<typeof StyledHeading>, "size">) => JSX.Element;
+export {};

package/dist/src/components/segmented-control/SegmentedControlItem.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export declare const SegmentedControlItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement> & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLButtonElement> & {
+    value: string;
+}, "ref"> & React.RefAttributes<HTMLButtonElement> & {
+    theme?: ("primary" | "marsh" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "marsh">>) | undefined;
+    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>, "size">, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/components/segmented-control/SegmentedControlRoot.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { SegmentedControlTheme } from './SegmentedControl.types';
+declare const StyledSegmentedControlRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement> & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement> & {
+    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SegmentedControlRootProps extends React.ComponentProps<typeof StyledSegmentedControlRoot> {
+    theme?: SegmentedControlTheme;
+}
+export declare const SegmentedControlRoot: ({ size, theme, defaultValue, children, ...props }: React.PropsWithChildren<SegmentedControlRootProps>) => React.JSX.Element;
+export {};

package/dist/src/components/select/Select.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Override } from '~/utilities/types';
+declare const StyledSelect: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
+    ref?: ((instance: HTMLSelectElement | null) => void) | React.RefObject<HTMLSelectElement> | null | undefined;
+} & {
+    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+    state?: ("error" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "error">>) | undefined;
+    appearance?: ("standard" | "modern" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "standard" | "modern">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export type SelectProps = Override<React.ComponentProps<typeof StyledSelect>, {
+    as?: never;
+    placeholder?: string;
+}>;
+export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/src/components/select-field/SelectField.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { FieldElementWrapperProps } from '../../../components/field-wrapper';
+import { SelectProps } from '../../../components/select';
+type SelectFieldProps = SelectProps & FieldElementWrapperProps;
+export declare const SelectField: {
+    ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, ...remainingProps }: SelectFieldProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/side-bar/SideBar.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Theme } from '../../../styled';
+declare const Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+} & {
+    type?: ("static" | "expandable" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "static" | "expandable">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type SideBarProps = React.ComponentProps<typeof Root> & {
+    className?: string;
+    offset?: number | string;
+} & React.ComponentProps<typeof Theme>;
+export declare const SideBar: {
+    ({ theme, className, children, type, offset, style, ...rest }: SideBarProps): React.JSX.Element;
+    Brand: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+        ref?: ((instance: HTMLAnchorElement | null) => void) | React.RefObject<HTMLAnchorElement> | null | undefined;
+    } & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+    BrandLogo: {
+        (props: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+            ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
+        } & {
+            fluid?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+        } & {
+            as?: React.ElementType;
+        }, "ref"> & React.RefAttributes<HTMLImageElement>, "ref">, "as"> & {
+            as?: never;
+        }): React.JSX.Element;
+        displayName: string;
+    };
+    BrandName: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+        ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
+    } & {
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
+        size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+    } & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "as"> & {
+        as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLParagraphElement> & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Header: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    displayName: string;
+};
+export {};

package/dist/src/components/side-bar/SideBarComponents.d.ts

@@ -0,0 +1,46 @@
+export declare const SideBarHeader: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SideBarBody: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SideBarFooter: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SideBarBrand: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const SideBarBrandLogo: {
+    (props: Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+        ref?: ((instance: HTMLImageElement | null) => void) | import("react").RefObject<HTMLImageElement> | null | undefined;
+    } & {
+        fluid?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+    } & {
+        as?: import("react").ElementType;
+    }, "ref"> & import("react").RefAttributes<HTMLImageElement>, "ref">, "as"> & {
+        as?: never;
+    }): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const SideBarBrandName: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
+} & {
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
+    size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "as"> & {
+    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLParagraphElement> & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/src/components/slider/Slider.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SliderSteps } from './SliderSteps';
+import { SliderValue } from './SliderValue';
+declare const StyledTrack: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slider").SliderTrackProps & React.RefAttributes<HTMLSpanElement> & {
+    theme?: ("light" | "tonal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "light" | "tonal">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const StyledSlider: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slider").SliderProps & React.RefAttributes<HTMLSpanElement> & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type SliderProps = React.ComponentProps<typeof StyledSlider> & React.ComponentProps<typeof StyledTrack>;
+type SliderType = ReturnType<typeof React.forwardRef<HTMLSpanElement, SliderProps>> & {
+    Value: typeof SliderValue;
+    Steps: typeof SliderSteps;
+};
+export declare const Slider: SliderType;
+export {};

package/dist/src/components/slider-field/SliderField.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FieldElementWrapperProps } from '../../../components/field-wrapper';
+import { SliderProps } from '../../../components/slider';
+import { SliderStepsType } from '../../../components/slider/SliderSteps';
+import { SliderValueType } from '../slider/SliderValue';
+type SliderFieldProps = SliderProps & SliderStepsType & SliderValueType & FieldElementWrapperProps;
+export declare const SliderField: {
+    ({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min, max, steps, ...remainingProps }: SliderFieldProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/sortable/Handle.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Icon } from '../icon';
+export declare const StyledHandle: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    theme?: ("warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger">>) | undefined;
+    appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
+    size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
+    isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>, "children" | "label" | "as" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
+    as?: string | React.ReactNode;
+    children: React.ReactNode;
+    label: string;
+} & Omit<import("../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement> & {
+    isDragging?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type THandleProps = Omit<React.ComponentProps<typeof StyledHandle>, 'children'> & Pick<React.ComponentProps<typeof Icon>, 'size'>;
+export declare const Handle: React.ForwardRefExoticComponent<Omit<THandleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/{components → src/components}/sortable/SortableItem.d.ts

@@ -1,14 +1,14 @@
 import type { UniqueIdentifier } from '@dnd-kit/core';
 import * as React from 'react';
-import { CSS } from '../../stitches';
 export type TSortableItemProps = {
     id: UniqueIdentifier;
     asChild?: boolean;
     isDragHandle?: boolean;
     disabled?: boolean;
-    css?: CSS;
+    className?: string;
+    style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>;
 };
 export declare const SortableItem: {
-    ({ id, asChild, css, isDragHandle, disabled, ...rest }: React.PropsWithChildren<TSortableItemProps>): React.JSX.Element;
+    ({ id, asChild, className, style, isDragHandle, disabled, ...rest }: React.PropsWithChildren<TSortableItemProps>): React.JSX.Element;
     displayName: string;
 };

package/dist/{components → src/components}/sortable/index.d.ts

@@ -1,7 +1,7 @@
 export declare const Sortable: {
     Root: {
-        ({ sortableIds, onSortChange, children }: import("react").PropsWithChildren<{
-            sortableIds: import("react").ReactText[];
+        ({ sortableIds, onSortChange, children }: React.PropsWithChildren<{
+            sortableIds: React.ReactText[];
             onSortChange: (onSortChangeData: {
                 order: import("@dnd-kit/core").UniqueIdentifier[];
                 oldIndex: number;
@@ -11,7 +11,7 @@ export declare const Sortable: {
         displayName: string;
     };
     Item: {
-        ({ id, asChild, css, isDragHandle, disabled, ...rest }: import("react").PropsWithChildren<import("./SortableItem").TSortableItemProps>): import("react").JSX.Element;
+        ({ id, asChild, className, style, isDragHandle, disabled, ...rest }: React.PropsWithChildren<import("./SortableItem").TSortableItemProps>): import("react").JSX.Element;
         displayName: string;
     };
     Handle: {

package/dist/src/components/spacer/Spacer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A flexible flex spacer that expands along the major axis of its containing flex layout.
+ * It renders a `div` by default, and takes up any available space.
+ */
+export declare const Spacer: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/{components → src/components}/stepper/Stepper.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { IStepperProps } from './types';
 export declare const Stepper: {
-    ({ children, stepCount, allowSkip, onComplete, onStepChange, direction, steps, hideLabels, showCompletedIcons, css }: React.PropsWithChildren<IStepperProps>): React.JSX.Element;
+    ({ children, stepCount, allowSkip, onComplete, onStepChange, direction, steps, hideLabels, showCompletedIcons, className }: React.PropsWithChildren<IStepperProps>): React.JSX.Element;
     displayName: string;
 } & {
     StepBack: ({ label, children, ...rest }: import("./types").IStepperNavigateProps & React.ComponentProps<typeof import("..").Button>) => React.JSX.Element;
     StepForward: ({ label, children, onClick, ...rest }: import("./types").IStepperNavigateProps & Partial<React.ComponentProps<typeof import("..").Button>>) => React.JSX.Element;
-    Steps: ({ css }: import("./types").IStepperStepsProps) => React.JSX.Element;
+    Steps: ({ className }: import("./types").IStepperStepsProps) => React.JSX.Element;
 };

package/dist/src/components/stepper/StepperStepBullet.d.ts

@@ -0,0 +1,15 @@
+export declare const StepperStepBullet: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & {
+    direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
+    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
+    justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
+    align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
+    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    status?: ("default" | "success" | "active" | "viewed" | "completed" | "reviewed" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "default" | "success" | "active" | "viewed" | "completed" | "reviewed">>) | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/components/stepper/StepperStepContainer.d.ts

@@ -0,0 +1,18 @@
+export declare const StepperStepContainer: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & {
+    direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
+    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
+    justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
+    align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
+    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    canInteract?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+    direction?: ("horizontal" | "vertical" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "horizontal" | "vertical">>) | undefined;
+    separator?: ("default" | "success" | "active" | "viewed" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "default" | "success" | "active" | "viewed">>) | undefined;
+    status?: ("default" | "success" | "active" | "viewed" | "completed" | "reviewed" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "default" | "success" | "active" | "viewed" | "completed" | "reviewed">>) | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/components/stepper/StepperStepLabel.d.ts

@@ -0,0 +1,17 @@
+export declare const StepperStepLabel: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
+} & {
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
+    size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "as"> & {
+    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLParagraphElement> & {
+    direction?: ("horizontal" | "vertical" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "horizontal" | "vertical">>) | undefined;
+    status?: ("default" | "success" | "active" | "viewed" | "completed" | "reviewed" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "default" | "success" | "active" | "viewed" | "completed" | "reviewed">>) | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/src/components/stepper/StepperSteps.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IStepperStepsProps } from './types';
+export declare const StepperSteps: ({ className }: IStepperStepsProps) => React.JSX.Element;

package/dist/{components → src/components}/stepper/types.d.ts

@@ -1,4 +1,3 @@
-import { CSS } from '../../stitches';
 export declare enum Status {
     ACTIVE = "active",
     VIEWED = "viewed",
@@ -36,7 +35,7 @@ export type StepperProviderProps = {
     showCompletedIcons: boolean;
 };
 export interface IStepperProps {
-    css?: CSS;
+    className?: string;
     stepCount?: number;
     allowSkip?: boolean;
     onComplete?: () => void;
@@ -51,5 +50,5 @@ export interface IStepperNavigateProps {
     onClick?: (next: () => void) => void;
 }
 export interface IStepperStepsProps {
-    css?: CSS;
+    className?: string;
 }

package/dist/src/components/switch/Switch.d.ts

@@ -0,0 +1,13 @@
+import * as RadixSwitch from '@radix-ui/react-switch';
+import * as React from 'react';
+declare const StyledSwitch: React.ForwardRefExoticComponent<Omit<RadixSwitch.SwitchProps & React.RefAttributes<HTMLButtonElement> & {
+    size?: ("md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "md" | "lg">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type SwitchProps = React.ComponentProps<typeof StyledSwitch>;
+export declare const Switch: {
+    ({ size, ...rest }: SwitchProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,68 @@
+import * as React from 'react';
+declare const StyledTable: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
+    ref?: ((instance: HTMLTableElement | null) => void) | React.RefObject<HTMLTableElement> | null | undefined;
+} & {
+    size?: ("md" | "lg" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "md" | "lg" | "xl">>) | undefined;
+    corners?: ("round" | "square" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "round" | "square">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLTableElement>>;
+type TableProps = React.ComponentProps<typeof StyledTable> & {
+    numberOfStickyColumns?: number;
+    scrollContainerCss?: string;
+    scrollContainerkey?: string;
+    maxRowDepth?: number;
+};
+export declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "ref"> & React.RefAttributes<HTMLTableElement>> & {
+    Body: {
+        ({ striped, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+            ref?: ((instance: HTMLTableSectionElement | null) => void) | React.RefObject<HTMLTableSectionElement> | null | undefined;
+        } & {
+            striped?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+        } & {
+            as?: React.ElementType;
+        }, "ref"> & React.RefAttributes<HTMLTableSectionElement>): React.JSX.Element;
+        displayName: string;
+    };
+    Cell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
+        ref?: ((instance: HTMLTableDataCellElement | null) => void) | React.RefObject<HTMLTableDataCellElement> | null | undefined;
+    } & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLTableDataCellElement>>;
+    Footer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+        ref?: ((instance: HTMLTableSectionElement | null) => void) | React.RefObject<HTMLTableSectionElement> | null | undefined;
+    } & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+    FooterCell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
+        ref?: ((instance: HTMLTableDataCellElement | null) => void) | React.RefObject<HTMLTableDataCellElement> | null | undefined;
+    } & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLTableDataCellElement>>;
+    Header: {
+        ({ theme, isSticky, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+            ref?: ((instance: HTMLTableSectionElement | null) => void) | React.RefObject<HTMLTableSectionElement> | null | undefined;
+        } & {
+            theme?: ("primary" | "white" | "primaryDark" | "primaryLight" | "light" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "primaryDark" | "primaryLight" | "light">>) | undefined;
+            isSticky?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+        } & {
+            as?: React.ElementType;
+        }, "ref"> & React.RefAttributes<HTMLTableSectionElement>): React.JSX.Element;
+        displayName: string;
+    };
+    HeaderCell: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
+        ref?: ((instance: HTMLTableHeaderCellElement | null) => void) | React.RefObject<HTMLTableHeaderCellElement> | null | undefined;
+    } & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLTableHeaderCellElement>>;
+    Row: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+        ref?: ((instance: HTMLTableRowElement | null) => void) | React.RefObject<HTMLTableRowElement> | null | undefined;
+    } & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLTableRowElement>, "ref"> & React.RefAttributes<HTMLTableRowElement>>;
+    StickyColumnsContainer: ({ children, numberOfStickyColumns, className, ...restProps }: React.PropsWithChildren<{
+        numberOfStickyColumns?: number;
+        className?: string;
+    }>) => React.JSX.Element;
+};
+export {};

package/dist/src/components/table/TableBody.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+declare const StyledTableBody: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+    ref?: ((instance: HTMLTableSectionElement | null) => void) | React.RefObject<HTMLTableSectionElement> | null | undefined;
+} & {
+    striped?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+type TableBodyProps = React.ComponentProps<typeof StyledTableBody>;
+export declare const TableBody: {
+    ({ striped, ...rest }: TableBodyProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/table/TableCell.d.ts

@@ -0,0 +1,5 @@
+export declare const TableCell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
+    ref?: ((instance: HTMLTableDataCellElement | null) => void) | import("react").RefObject<HTMLTableDataCellElement> | null | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLTableDataCellElement>>;

package/dist/src/components/table/TableFooter.d.ts

@@ -0,0 +1,5 @@
+export declare const TableFooter: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+    ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;

package/dist/src/components/table/TableFooterCell.d.ts

@@ -0,0 +1,5 @@
+export declare const TableFooterCell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
+    ref?: ((instance: HTMLTableDataCellElement | null) => void) | import("react").RefObject<HTMLTableDataCellElement> | null | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLTableDataCellElement>>;

package/dist/src/components/table/TableHeader.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export declare const TABLE_HEADER_THEMES: {
+    readonly PRIMARY: "primary";
+    readonly PRIMARY_DARK: "primaryDark";
+    readonly PRIMARY_LIGHT: "primaryLight";
+    readonly LIGHT: "light";
+    readonly WHITE: "white";
+};
+declare const StyledTableHeader: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+    ref?: ((instance: HTMLTableSectionElement | null) => void) | React.RefObject<HTMLTableSectionElement> | null | undefined;
+} & {
+    theme?: ("primary" | "white" | "primaryDark" | "primaryLight" | "light" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "primaryDark" | "primaryLight" | "light">>) | undefined;
+    isSticky?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+type TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>;
+export declare const TableHeader: {
+    ({ theme, isSticky, ...rest }: TableHeaderProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/components/table/TableHeaderCell.d.ts

@@ -0,0 +1,5 @@
+export declare const TableHeaderCell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
+    ref?: ((instance: HTMLTableHeaderCellElement | null) => void) | import("react").RefObject<HTMLTableHeaderCellElement> | null | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLTableHeaderCellElement>>;

package/dist/src/components/table/TableRow.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare const TableRow: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+    ref?: ((instance: HTMLTableRowElement | null) => void) | React.RefObject<HTMLTableRowElement> | null | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLTableRowElement>, "ref"> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/{components → src/components}/table/TableStickyColumnsContainer.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { CSS } from '../../stitches';
-export declare const TableStickyColumnsContainer: ({ children, numberOfStickyColumns, css, ...restProps }: React.PropsWithChildren<{
+export declare const TableStickyColumnsContainer: ({ children, numberOfStickyColumns, className, ...restProps }: React.PropsWithChildren<{
     numberOfStickyColumns?: number;
-    css?: CSS;
+    className?: string;
 }>) => React.JSX.Element;

package/dist/{components → src/components}/table/useStickyColumnsCss.d.ts

@@ -1,7 +1,12 @@
 import * as React from 'react';
-import { CSS } from '../../stitches';
+type ColumnCss = Record<string, {
+    position: 'sticky';
+    left: string;
+    minWidth: string;
+    zIndex: string;
+}>;
 interface IUseStickyColumnsCss {
-    columnsCss: CSS;
+    columnsCss?: ColumnCss;
 }
 export declare const useStickyColumnsCss: ({ numberOfStickyColumns, wrapperRef }: {
     numberOfStickyColumns: number;