@causw/core 0.0.10 → 0.0.12

package/dist/index.d.mts

@@ -1,349 +1,52 @@
-import React, { ComponentProps, ReactNode, ElementType } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { borderRadius } from '@causw/tokens';
-import { ClassValue } from 'clsx';
-
-type Typography = 'caption-sm' | 'caption-sm-point' | 'caption-md' | 'caption-md-point' | 'body2-sm' | 'body2-sm-point' | 'body2-md' | 'body2-md-point' | 'body-sm' | 'body-sm-point' | 'body-md' | 'body-md-point' | 'subtitle-sm' | 'subtitle-sm-point' | 'subtitle-md' | 'subtitle-md-point' | 'title-sm' | 'title-md' | 'head-sm' | 'head-md' | 'fixed-12' | 'fixed-14' | 'fixed-15' | 'fixed-16' | 'fixed-18' | 'fixed-20' | 'fixed-24';
-type TextColor = 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900' | 'blue-100' | 'blue-500' | 'blue-700' | 'red-100' | 'red-400' | 'white' | 'black';
-type TextAlign = 'left' | 'center' | 'right' | 'justify';
-
-/**
- * Polymorphic component props (includes ref)
- *
- * @example
- * ```tsx
- * type ButtonProps<E extends React.ElementType = 'button'> =
- *   PolymorphicProps<E, { variant?: 'primary' | 'secondary' }>;
- * ```
- */
-type PolymorphicProps<E extends React.ElementType = 'div', Props = object> = Props & {
-    as?: E;
-} & Omit<React.ComponentProps<E>, keyof Props | 'as'>;
-/**
- * Polymorphic component props without ref
- */
-type PolymorphicPropsWithoutRef<E extends React.ElementType = 'div', Props = object> = Props & {
-    as?: E;
-} & Omit<React.ComponentPropsWithoutRef<E>, keyof Props | 'as'>;
-
-/** Text element types that can be used with as prop */
-type TextElement = 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'label' | 'a';
-/** Base text styling props - reusable for other components */
-interface TextStyleProps {
-    /** Typography preset - format: {variant}-{size}[-point] */
-    typography?: Typography;
-    /** Text color */
-    textColor?: TextColor;
-    /** Text alignment */
-    align?: TextAlign;
-}
-/** Full Text component props with polymorphic support */
-type TextProps<E extends TextElement = 'span'> = PolymorphicProps<E, TextStyleProps>;
-declare const Text: {
-    <E extends TextElement = "span">({ typography, textColor, align, as, children, className, ...props }: TextProps<E>): React.DetailedReactHTMLElement<{
-        className: string;
-    } & Omit<TextProps<E>, "as" | "typography" | "textColor" | "align" | "className" | "children">, HTMLSpanElement>;
-    displayName: string;
-};
-
-interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    disabled?: boolean;
-    error?: boolean;
-}
-type FieldLabelProps<E extends TextElement = 'label'> = PolymorphicProps<E, TextStyleProps>;
-interface FieldDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    className?: string;
-}
-interface FieldErrorDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    className?: string;
-}
-declare const Field: {
-    ({ children, disabled, error, className, ...props }: FieldProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-} & {
-    Label: {
-        <E extends TextElement = "label">({ children, className, typography, textColor, ...labelProps }: FieldLabelProps<E>): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-    Description: {
-        ({ children, className, ...props }: FieldDescriptionProps): react_jsx_runtime.JSX.Element | null;
-        displayName: string;
-    };
-    ErrorDescription: {
-        ({ children, className, ...props }: FieldErrorDescriptionProps): react_jsx_runtime.JSX.Element | null;
-        displayName: string;
-    };
-};
-
-type TextInputVariant = 'default' | 'underline';
-interface TextInputProps extends React.ComponentProps<'input'>, TextStyleProps {
-    /** Input variant style */
-    variant?: TextInputVariant;
-    /** Icon to display on the left side of input */
-    leftIcon?: React.ReactNode;
-    /** Icon to display on the right side of input */
-    rightIcon?: React.ReactNode;
-    /** Error state (overrides Field context) */
-    error?: boolean;
-}
-declare const TextInput: {
-    ({ id: idProp, disabled: disabledProp, error: errorProp, className, leftIcon, rightIcon, variant, typography, textColor, ...props }: TextInputProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface PrimitiveProps {
-    /**
-     * Whether the element should be rendered as a child of a slot.
-     * @default false
-     */
-    asChild?: boolean;
-}
-
-interface TextAreaProps extends React.HTMLAttributes<HTMLDivElement>, PrimitiveProps {
-    children: React.ReactNode;
-}
-interface TextAreaInputProps extends React.ComponentProps<'textarea'> {
-    /** Whether to allow vertical resizing @default true */
-    resize?: boolean;
-}
-interface TextAreaFooterProps extends React.HTMLAttributes<HTMLDivElement>, PrimitiveProps {
-    children: React.ReactNode;
-}
-declare const TextArea: {
-    ({ className, children, ...props }: TextAreaProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-} & {
-    Input: {
-        ({ resize, disabled: disabledProp, className, ...props }: TextAreaInputProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-    Footer: {
-        ({ className, children, ...props }: TextAreaFooterProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-};
-
-interface RadioGroupContextValue {
-    name: string;
-    value?: string;
-    onChange?: (value: string) => void;
-}
-declare const useRadioGroupContext: () => RadioGroupContextValue | null;
-interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement>, PrimitiveProps {
-    name: string;
-    value?: string;
-    defaultValue?: string;
-    onValueChange?: (value: string) => void;
-    children: React.ReactNode;
-}
-declare const RadioGroup: {
-    ({ name, value, defaultValue, onValueChange, className, children, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-interface RadioProps extends Omit<React.ComponentProps<'input'>, 'type'> {
-    value: string;
-    children: React.ReactNode;
-}
-declare const Radio: {
-    ({ value, children, className, checked: checkedProp, onChange, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-/**
- * Combines class names with Tailwind CSS conflict resolution
- *
- * @example
- * mergeStyles('px-2 py-1', 'px-4') // => 'py-1 px-4'
- * mergeStyles('text-red-500', condition && 'text-blue-500')
- */
-declare function mergeStyles(...inputs: ClassValue[]): string;
-
-interface ToggleRootProps extends Omit<React.ComponentProps<'label'>, 'onChange'> {
-    checked?: boolean;
-    defaultChecked?: boolean;
-    onCheckedChange?: (checked: boolean) => void;
-    disabled?: boolean;
-    children?: React.ReactNode;
-}
-type ToggleLabelProps<E extends TextElement = 'span'> = PolymorphicProps<E, TextStyleProps>;
-declare const Toggle: {
-    ({ checked: checkedProp, defaultChecked, onCheckedChange, disabled, children, className, ...props }: ToggleRootProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-} & {
-    Switch: {
-        (): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-    Label: {
-        <E extends TextElement = "span">({ children, typography, textColor, ...props }: ToggleLabelProps<E>): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-};
-
-interface CheckboxRootProps extends Omit<React.ComponentProps<'label'>, 'onChange'> {
-    checked?: boolean;
-    defaultChecked?: boolean;
-    onCheckedChange?: (checked: boolean) => void;
-    disabled?: boolean;
-    children?: React.ReactNode;
-}
-type CheckboxLabelProps<E extends TextElement = 'span'> = PolymorphicProps<E, TextStyleProps>;
-declare const Checkbox: {
-    ({ checked: checkedProp, defaultChecked, onCheckedChange, disabled, children, className, ...props }: CheckboxRootProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-} & {
-    Indicator: {
-        (): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-    Label: {
-        <E extends TextElement = "span">({ children, typography, textColor, ...props }: CheckboxLabelProps<E>): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-};
-
-type ButtonSize = 'sm' | 'md';
-type ButtonColor = 'white' | 'gray' | 'red';
-
-interface ButtonProps extends ComponentProps<'button'> {
-    size?: ButtonSize;
-    color?: ButtonColor;
-    active?: boolean;
-    fullWidth?: boolean;
-}
-declare function Button({ size, color, active, fullWidth, disabled, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
-
-type CTAButtonColor = 'blue' | 'red' | 'dark' | 'light' | 'white';
-
-interface CTAButtonProps extends ComponentProps<'button'> {
-    color?: CTAButtonColor;
-    fullWidth?: boolean;
-    asChild?: boolean;
-}
-declare function CTAButton({ color, fullWidth, disabled, asChild, className, children, ...props }: CTAButtonProps): react_jsx_runtime.JSX.Element;
-
-interface FloatingActionButtonProps extends ComponentProps<'button'> {
-    leftIcon?: ReactNode;
-    rightIcon?: ReactNode;
-    asChild?: boolean;
-}
-declare function FloatingActionButton({ leftIcon, rightIcon, disabled, asChild, children, className, ...props }: FloatingActionButtonProps): react_jsx_runtime.JSX.Element;
-
-type BoxRadius = 'none' | keyof typeof borderRadius;
-type BoxPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg';
-type BoxDisplay = 'block' | 'flex' | 'grid' | 'inline-block' | 'inline-flex' | 'none';
-type BoxBackground = 'default' | 'subtle' | 'inverse' | 'transparent';
-interface BoxStylesOptions {
-    padding?: BoxPadding;
-    radius?: BoxRadius;
-    display?: BoxDisplay;
-    background?: BoxBackground;
-}
-
-type BoxBaseProps = BoxStylesOptions;
-type BoxProps<E extends ElementType = 'div'> = PolymorphicProps<E, BoxBaseProps>;
-declare const Box: {
-    <E extends ElementType = "div">({ as, padding, radius, display, background, className, children, ...props }: BoxProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    displayName: string;
-};
-
-type StackDirection = 'horizontal' | 'vertical';
-type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type StackAlign = 'start' | 'center' | 'end' | 'stretch';
-type StackJustify = 'start' | 'center' | 'end' | 'between';
-interface StackStylesOptions {
-    direction?: StackDirection;
-    gap?: StackGap;
-    align?: StackAlign;
-    justify?: StackJustify;
-}
-
-type StackBaseProps = StackStylesOptions;
-type StackProps<E extends ElementType = 'div'> = PolymorphicProps<E, StackBaseProps>;
-/**
- * Stack is a layout component that arranges its children in a horizontal or vertical line.
- * It abstracts Flexbox behaviors to easily manage spacing, alignment, and direction.
- */
-declare const Stack: {
-    <E extends ElementType = "div">({ as, direction, gap, align, justify, className, children, ...props }: StackProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    displayName: string;
-};
-
-type VStackProps<E extends ElementType = 'div'> = Omit<StackProps<E>, 'direction'>;
-declare const VStack: {
-    <E extends ElementType = "div">({ ...props }: VStackProps<E>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type HStackProps<E extends ElementType = 'div'> = Omit<StackProps<E>, 'direction'>;
-declare const HStack: {
-    <E extends ElementType = "div">({ ...props }: HStackProps<E>): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-type FlexGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-interface FlexStylesOptions {
-    direction?: FlexDirection;
-    gap?: FlexGap;
-    align?: FlexAlign;
-    justify?: FlexJustify;
-    wrap?: FlexWrap;
-}
-
-type FlexBaseProps = FlexStylesOptions;
-type FlexProps<E extends ElementType = 'div'> = PolymorphicProps<E, FlexBaseProps>;
-declare const Flex: {
-    <E extends ElementType = "div">({ as, direction, gap, align, justify, wrap, className, children, ...props }: FlexProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    displayName: string;
-};
-
-type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none';
-type GridRows = 1 | 2 | 3 | 4 | 5 | 6 | 'none';
-type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type GridFlow = 'row' | 'col' | 'row-dense' | 'col-dense';
-interface GridStylesOptions {
-    columns?: GridColumns;
-    rows?: GridRows;
-    gap?: GridGap;
-    flow?: GridFlow;
-}
-
-type GridBaseProps = GridStylesOptions;
-type GridProps<E extends ElementType = 'div'> = PolymorphicProps<E, GridBaseProps>;
-declare const Grid: {
-    <E extends ElementType = "div">({ as, columns, rows, gap, flow, className, children, ...props }: GridProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    displayName: string;
-};
-
-type SeparatorOrientation = 'horizontal' | 'vertical';
-interface SeparatorStylesOptions {
-    orientation?: SeparatorOrientation;
-}
-
-type SeparatorBaseProps = SeparatorStylesOptions;
-type SeparatorProps<E extends ElementType = 'div'> = PolymorphicProps<E, SeparatorBaseProps>;
-declare const Separator: {
-    <E extends ElementType = "div">({ as, orientation, className, ...props }: SeparatorProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    displayName: string;
-};
-
-type SpacerSize = 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 'auto';
-interface SpacerStylesOptions {
-    size?: SpacerSize;
-}
-
-type SpacerBaseProps = SpacerStylesOptions;
-type SpacerProps<E extends ElementType = 'div'> = PolymorphicProps<E, SpacerBaseProps>;
-declare const Spacer: {
-    <E extends ElementType = "div">({ as, size, className, ...props }: SpacerProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    displayName: string;
-};
-
-export { Box, type BoxBackground, type BoxDisplay, type BoxPadding, type BoxProps, type BoxRadius, Button, type ButtonProps, CTAButton, type CTAButtonProps, Checkbox, type CheckboxLabelProps, type CheckboxRootProps, Field, type FieldDescriptionProps, type FieldErrorDescriptionProps, type FieldLabelProps, type FieldProps, Flex, type FlexAlign, type FlexDirection, type FlexGap, type FlexJustify, type FlexProps, FloatingActionButton, type FloatingActionButtonProps, Grid, type GridColumns, type GridFlow, type GridGap, type GridProps, type GridRows, HStack, type HStackProps, type PolymorphicProps, type PolymorphicPropsWithoutRef, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Separator, type SeparatorOrientation, type SeparatorProps, Spacer, type SpacerProps, type SpacerSize, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, Text, TextArea, type TextAreaFooterProps, type TextAreaInputProps, type TextAreaProps, type TextColor, TextInput, type TextInputProps, type TextInputVariant, type TextProps, type TextStyleProps, Toggle, type ToggleLabelProps, type ToggleRootProps, type Typography, VStack, type VStackProps, mergeStyles, useRadioGroupContext };
+import { TextVariants } from "./components/Text/Text.styles.mjs";
+import { PolymorphicProps, PolymorphicPropsWithoutRef } from "./utils/polymorphic/polymorphic.mjs";
+import { Text, TextElement, TextProps } from "./components/Text/Text.mjs";
+import { Field, FieldDescriptionProps, FieldErrorDescriptionProps, FieldLabelProps, FieldProps } from "./components/Field/Field.mjs";
+import { TextInputVariants } from "./components/TextInput/TextInput.styles.mjs";
+import { TextInput, TextInputProps } from "./components/TextInput/TextInput.mjs";
+import { Primitive, PrimitiveProps } from "./components/Primitive/Primitive.mjs";
+import { TextArea, TextAreaFooterProps, TextAreaInputProps, TextAreaProps } from "./components/TextArea/TextArea.mjs";
+import { Radio, RadioGroup, RadioGroupProps, RadioProps, useRadioGroupContext } from "./components/Radio/Radio.mjs";
+import { mergeStyles } from "./utils/mergeStyles/mergeStyles.mjs";
+import { convertPxToRem } from "./utils/converter/converter.mjs";
+import { splitVariantProps } from "./utils/splitter/splitter.mjs";
+import "./utils/index.mjs";
+import { Toggle, ToggleLabelProps, ToggleRootProps } from "./components/Toggle/Toggle.mjs";
+import { Checkbox, CheckboxLabelProps, CheckboxRootProps } from "./components/Checkbox/Checkbox.mjs";
+import { Button, ButtonProps } from "./components/Button/Button.mjs";
+import { CTAButton, CTAButtonProps } from "./components/CTAButton/CTAButton.mjs";
+import { FloatingActionButton, FloatingActionButtonProps } from "./components/FloatingActionButton/FloatingActionButton.mjs";
+import { BoxVariants, box } from "./components/Box/Box.styles.mjs";
+import { Box, BoxProps } from "./components/Box/Box.mjs";
+import { StackVariants } from "./components/Stack/Stack.styles.mjs";
+import { Stack, StackProps } from "./components/Stack/Stack.mjs";
+import { VStack, VStackProps } from "./components/VStack/VStack.mjs";
+import { HStack, HStackProps } from "./components/HStack/HStack.mjs";
+import { FlexAlign, FlexDirection, FlexGap, FlexJustify } from "./components/Flex/Flex.styles.mjs";
+import { Flex, FlexProps } from "./components/Flex/Flex.mjs";
+import { Grid, GridProps } from "./components/Grid/Grid.mjs";
+import { SeparatorVariants } from "./components/Separator/Separator.styles.mjs";
+import { Separator, SeparatorProps } from "./components/Separator/Separator.mjs";
+import { SpacerVariants } from "./components/Spacer/Spacer.styles.mjs";
+import { Spacer, SpacerProps } from "./components/Spacer/Spacer.mjs";
+import { RatioChart, RatioChartFooterProps, RatioChartItemProps, RatioChartRootProps } from "./components/RatioChart/RatioChart.mjs";
+import { RatioChartEditor, RatioChartEditorOption, RatioChartEditorProps } from "./components/RatioChart/RatioChartEditor.mjs";
+import { SelectVariants } from "./components/Select/Select.styles.mjs";
+import { Select, SelectContentProps, SelectGroupProps, SelectItemProps, SelectLabelProps, SelectProps, SelectTriggerProps, SelectValueProps } from "./components/Select/Select.mjs";
+import { DialogVariants } from "./components/Dialog/Dialog.styles.mjs";
+import { Dialog, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogOverlayProps, DialogPortalProps, DialogProps, DialogTitleProps, DialogTriggerProps } from "./components/Dialog/Dialog.mjs";
+import { DropdownVariants } from "./components/Dropdown/Dropdown.styles.mjs";
+import { Dropdown, DropdownContentProps, DropdownItemProps, DropdownProps, DropdownTriggerProps } from "./components/Dropdown/Dropdown.mjs";
+import { Float, FloatProps } from "./components/Float/Float.mjs";
+import { ChipVariants } from "./components/Chip/Chip.styles.mjs";
+import { Chip, ChipProps } from "./components/Chip/Chip.mjs";
+import { AvatarVariants } from "./components/Avatar/Avatar.styles.mjs";
+import { Avatar, AvatarProps } from "./components/Avatar/Avatar.mjs";
+import { TabVariants } from "./components/Tab/Tab.styles.mjs";
+import { Tab, TabContentProps, TabListProps, TabRootProps, TabTabItemProps } from "./components/Tab/Tab.mjs";
+import { ToastVariants } from "./components/Toast/Toast.styles.mjs";
+import { Toast, ToastProps, ToastProvider, ToastViewport, ToastViewportProps } from "./components/Toast/Toast.mjs";
+import { ModalVariants } from "./components/Modal/Modal.styles.mjs";
+import { Modal, ModalActionProps, ModalContentProps, ModalDescriptionProps, ModalFooterProps, ModalOverlayProps, ModalTitleProps } from "./components/Modal/Modal.mjs";
+import "./components/index.mjs";
+export { Avatar, AvatarProps, AvatarVariants, Box, BoxProps, BoxVariants, Button, ButtonProps, CTAButton, CTAButtonProps, Checkbox, CheckboxLabelProps, CheckboxRootProps, Chip, ChipProps, ChipVariants, Dialog, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogOverlayProps, DialogPortalProps, DialogProps, DialogTitleProps, DialogTriggerProps, DialogVariants, Dropdown, DropdownContentProps, DropdownItemProps, DropdownProps, DropdownTriggerProps, DropdownVariants, Field, FieldDescriptionProps, FieldErrorDescriptionProps, FieldLabelProps, FieldProps, Flex, FlexAlign, FlexDirection, FlexGap, FlexJustify, FlexProps, Float, FloatProps, FloatingActionButton, FloatingActionButtonProps, Grid, GridProps, HStack, HStackProps, Modal, ModalActionProps, ModalContentProps, ModalDescriptionProps, ModalFooterProps, ModalOverlayProps, ModalTitleProps, ModalVariants, PolymorphicProps, PolymorphicPropsWithoutRef, Primitive, PrimitiveProps, Radio, RadioGroup, RadioGroupProps, RadioProps, RatioChart, RatioChartEditor, RatioChartEditorOption, RatioChartEditorProps, RatioChartFooterProps, RatioChartItemProps, RatioChartRootProps, Select, SelectContentProps, SelectGroupProps, SelectItemProps, SelectLabelProps, SelectProps, SelectTriggerProps, SelectValueProps, SelectVariants, Separator, SeparatorProps, SeparatorVariants, Spacer, SpacerProps, SpacerVariants, Stack, StackProps, StackVariants, Tab, TabContentProps, TabListProps, TabRootProps, TabTabItemProps, TabVariants, Text, TextArea, TextAreaFooterProps, TextAreaInputProps, TextAreaProps, TextElement, TextInput, TextInputProps, TextInputVariants, TextProps, TextVariants, Toast, ToastProps, ToastProvider, ToastVariants, ToastViewport, ToastViewportProps, Toggle, ToggleLabelProps, ToggleRootProps, VStack, VStackProps, box, convertPxToRem, mergeStyles, splitVariantProps, useRadioGroupContext };