@dafaz-ui/react 4.0.19 → 7.0.0

package/dist/index.d.mts

@@ -1,9 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ComponentProps, ElementType, ReactNode } from 'react';
+import { ComponentProps, ElementType, CSSProperties, ReactNode, ChangeEvent } from 'react';
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
-import { CSS } from '@stitches/react';
 import * as Checkbox from '@radix-ui/react-checkbox';
 import * as RadioGroup from '@radix-ui/react-radio-group';
 import * as _stitches_react_types_theme from '@stitches/react/types/theme';
@@ -12,12 +11,16 @@ import * as _stitches_react_types_stitches from '@stitches/react/types/stitches'
 import * as _stitches_react_types_util from '@stitches/react/types/util';
 
 declare const BoxUI: _stitches_react_types_styled_component.StyledComponent<"div", {
+    withShadow?: boolean | "true" | undefined;
     stretch?: boolean | "true" | "false" | undefined;
-    dark?: boolean | "true" | "false" | undefined;
+    color?: "dark" | "primary" | "secondary" | "light" | "transparent" | undefined;
+    rounded?: "sm" | "md" | "px" | "full" | undefined;
+    direction?: "none" | "row" | "column" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         white: string;
         black: string;
+        red: string;
         gray100: string;
         gray200: string;
         gray400: string;
@@ -36,6 +39,14 @@ declare const BoxUI: _stitches_react_types_styled_component.StyledComponent<"div
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
     };
     fontWeights: {
         regular: string;
@@ -217,8 +228,11 @@ declare const BoxUI: _stitches_react_types_styled_component.StyledComponent<"div
 interface BoxUIProps extends ComponentProps<typeof BoxUI> {
     as?: ElementType;
     stretch?: boolean;
-    dark?: boolean;
-    css?: CSS;
+    color?: 'dark' | 'primary' | 'secondary' | 'light' | 'transparent';
+    rounded?: 'px' | 'sm' | 'md' | 'full';
+    withShadow?: boolean;
+    style?: CSSProperties;
+    direction?: 'row' | 'column' | 'none';
 }
 
 interface BoxProps {
@@ -238,6 +252,7 @@ declare const ButtonUI: _stitches_react_types_styled_component.StyledComponent<"
     colors: {
         white: string;
         black: string;
+        red: string;
         gray100: string;
         gray200: string;
         gray400: string;
@@ -256,6 +271,14 @@ declare const ButtonUI: _stitches_react_types_styled_component.StyledComponent<"
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
     };
     fontWeights: {
         regular: string;
@@ -444,11 +467,12 @@ interface ButtonUIProps extends ComponentProps<typeof ButtonUI> {
     disabled?: boolean;
     variant?: 'primary' | 'secondary' | 'tertiary';
     flat?: boolean;
+    style?: CSSProperties;
 }
 
 interface ButtonProps {
     children: ReactNode;
-    type: string;
+    type?: string;
     form?: string;
 }
 declare function Button({ children, variant, size, type, form, ...props }: ButtonUIProps & ButtonProps): react_jsx_runtime.JSX.Element;
@@ -462,6 +486,7 @@ declare const CheckBoxUI: _stitches_react_types_styled_component.StyledComponent
     colors: {
         white: string;
         black: string;
+        red: string;
         gray100: string;
         gray200: string;
         gray400: string;
@@ -480,6 +505,14 @@ declare const CheckBoxUI: _stitches_react_types_styled_component.StyledComponent
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
     };
     fontWeights: {
         regular: string;
@@ -661,24 +694,23 @@ declare const CheckBoxUI: _stitches_react_types_styled_component.StyledComponent
 interface CheckboxIUProps extends ComponentProps<typeof CheckBoxUI> {
     size?: 'sm' | 'md' | 'lg';
     disabled?: boolean;
+    style?: CSSProperties;
 }
 
-interface CheckboxProps extends CheckboxIUProps {
-    id: string;
+interface CheckboxItemProps extends CheckboxIUProps {
     label: string;
-    checked: boolean;
-    value: string | number | readonly string[] | undefined;
-    onCheckedChange: (checked: boolean) => void;
+    handleOnChange?: (checked: boolean, id?: string) => void;
 }
-declare const CheckBox: react.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const CheckBox: react.ForwardRefExoticComponent<Omit<CheckboxItemProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 declare const HeadingUI: _stitches_react_types_styled_component.StyledComponent<"h2", {
-    mode?: "white" | "default" | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | undefined;
+    color?: "white" | "black" | "primary" | "lightGray" | "darkGray" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         white: string;
         black: string;
+        red: string;
         gray100: string;
         gray200: string;
         gray400: string;
@@ -697,6 +729,14 @@ declare const HeadingUI: _stitches_react_types_styled_component.StyledComponent<
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
     };
     fontWeights: {
         regular: string;
@@ -877,8 +917,9 @@ declare const HeadingUI: _stitches_react_types_styled_component.StyledComponent<
 }, {}>>;
 interface HeadingUIProps extends ComponentProps<typeof HeadingUI> {
     as?: ElementType;
-    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    mode?: 'default' | 'white';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+    color: 'white' | 'black' | 'primary' | 'lightGray' | 'darkGray';
+    style?: CSSProperties;
 }
 
 interface HeadingProps {
@@ -895,6 +936,7 @@ declare const RadioUI: _stitches_react_types_styled_component.StyledComponent<re
     colors: {
         white: string;
         black: string;
+        red: string;
         gray100: string;
         gray200: string;
         gray400: string;
@@ -913,6 +955,14 @@ declare const RadioUI: _stitches_react_types_styled_component.StyledComponent<re
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
     };
     fontWeights: {
         regular: string;
@@ -1093,27 +1143,28 @@ declare const RadioUI: _stitches_react_types_styled_component.StyledComponent<re
 }, {}>>;
 interface RadioUIProps extends ComponentProps<typeof RadioUI> {
     size?: 'sm' | 'md' | 'lg';
+    style?: CSSProperties;
 }
 
-interface Item$1 {
+interface Item$2 {
     id: string;
     label: string;
     value: string;
 }
 interface RadioGroupProps extends RadioUIProps {
-    items: Item$1[];
-}
-declare function Radio({ items, size, disabled, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;
-declare namespace Radio {
-    var displayName: string;
+    items: Item$2[];
+    value?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
 }
+declare const Radio: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
-declare const SelectUI: _stitches_react_types_styled_component.StyledComponent<"select", {
+declare const SelectUI$1: _stitches_react_types_styled_component.StyledComponent<"select", {
     size?: "sm" | "md" | "lg" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         white: string;
         black: string;
+        red: string;
         gray100: string;
         gray200: string;
         gray400: string;
@@ -1132,6 +1183,14 @@ declare const SelectUI: _stitches_react_types_styled_component.StyledComponent<"
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
     };
     fontWeights: {
         regular: string;
@@ -1310,30 +1369,253 @@ declare const SelectUI: _stitches_react_types_styled_component.StyledComponent<"
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-interface SelectUIProps extends ComponentProps<typeof SelectUI> {
+interface SelectUIProps$1 extends ComponentProps<typeof SelectUI$1> {
     size?: 'sm' | 'md' | 'lg';
 }
 
-interface Item {
+interface Item$1 {
     id: string;
     label: string;
     value: string;
 }
-interface SelectProps {
-    items: Item[];
+interface SelectProps extends SelectUIProps$1 {
+    id: string;
+    items: Item$1[];
     placeholder?: string;
 }
-declare function Select({ size, placeholder, items, ...props }: SelectUIProps & SelectProps): react_jsx_runtime.JSX.Element;
-declare namespace Select {
+declare const Select: react.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & react.RefAttributes<HTMLSelectElement>>;
+
+declare const SeparatorUI: _stitches_react_types_styled_component.StyledComponent<"hr", {
+    color?: "white" | "black" | "primary" | "lightGray" | "darkGray" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | undefined;
+}, {}, _stitches_react_types_css_util.CSS<{}, {
+    colors: {
+        white: string;
+        black: string;
+        red: string;
+        gray100: string;
+        gray200: string;
+        gray400: string;
+        gray800: string;
+        dafaz100: string;
+        dafaz200: string;
+        dafaz400: string;
+        dafaz600: string;
+        dafaz800: string;
+    };
+    fontSizes: {
+        xxs: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
+    };
+    fontWeights: {
+        regular: string;
+        medium: string;
+        bold: string;
+    };
+    fonts: {
+        default: string;
+        app: string;
+        web: string;
+        offer: string;
+        code: string;
+    };
+    lineHeights: {
+        shorter: string;
+        short: string;
+        base: string;
+        tall: string;
+    };
+    radii: {
+        px: string;
+        sm: string;
+        md: string;
+        full: string;
+    };
+    space: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        10: string;
+        12: string;
+        16: string;
+        20: string;
+        40: string;
+        64: string;
+        80: string;
+    };
+    opacities: {
+        opacity400: string;
+        opacity600: string;
+        opacity800: string;
+        opacity900: string;
+    };
+}, {
+    height: "space";
+    width: "space";
+    gap: "space";
+    gridGap: "space";
+    columnGap: "space";
+    gridColumnGap: "space";
+    rowGap: "space";
+    gridRowGap: "space";
+    inset: "space";
+    insetBlock: "space";
+    insetBlockEnd: "space";
+    insetBlockStart: "space";
+    insetInline: "space";
+    insetInlineEnd: "space";
+    insetInlineStart: "space";
+    margin: "space";
+    marginTop: "space";
+    marginRight: "space";
+    marginBottom: "space";
+    marginLeft: "space";
+    marginBlock: "space";
+    marginBlockEnd: "space";
+    marginBlockStart: "space";
+    marginInline: "space";
+    marginInlineEnd: "space";
+    marginInlineStart: "space";
+    padding: "space";
+    paddingTop: "space";
+    paddingRight: "space";
+    paddingBottom: "space";
+    paddingLeft: "space";
+    paddingBlock: "space";
+    paddingBlockEnd: "space";
+    paddingBlockStart: "space";
+    paddingInline: "space";
+    paddingInlineEnd: "space";
+    paddingInlineStart: "space";
+    scrollMargin: "space";
+    scrollMarginTop: "space";
+    scrollMarginRight: "space";
+    scrollMarginBottom: "space";
+    scrollMarginLeft: "space";
+    scrollMarginBlock: "space";
+    scrollMarginBlockEnd: "space";
+    scrollMarginBlockStart: "space";
+    scrollMarginInline: "space";
+    scrollMarginInlineEnd: "space";
+    scrollMarginInlineStart: "space";
+    scrollPadding: "space";
+    scrollPaddingTop: "space";
+    scrollPaddingRight: "space";
+    scrollPaddingBottom: "space";
+    scrollPaddingLeft: "space";
+    scrollPaddingBlock: "space";
+    scrollPaddingBlockEnd: "space";
+    scrollPaddingBlockStart: "space";
+    scrollPaddingInline: "space";
+    scrollPaddingInlineEnd: "space";
+    scrollPaddingInlineStart: "space";
+    top: "space";
+    right: "space";
+    bottom: "space";
+    left: "space";
+    fontSize: "fontSizes";
+    background: "colors";
+    backgroundColor: "colors";
+    backgroundImage: "colors";
+    borderImage: "colors";
+    border: "colors";
+    borderBlock: "colors";
+    borderBlockEnd: "colors";
+    borderBlockStart: "colors";
+    borderBottom: "colors";
+    borderBottomColor: "colors";
+    borderColor: "colors";
+    borderInline: "colors";
+    borderInlineEnd: "colors";
+    borderInlineStart: "colors";
+    borderLeft: "colors";
+    borderLeftColor: "colors";
+    borderRight: "colors";
+    borderRightColor: "colors";
+    borderTop: "colors";
+    borderTopColor: "colors";
+    caretColor: "colors";
+    color: "colors";
+    columnRuleColor: "colors";
+    outline: "colors";
+    outlineColor: "colors";
+    fill: "colors";
+    stroke: "colors";
+    textDecorationColor: "colors";
+    fontFamily: "fonts";
+    fontWeight: "fontWeights";
+    lineHeight: "lineHeights";
+    letterSpacing: "letterSpacings";
+    blockSize: "sizes";
+    minBlockSize: "sizes";
+    maxBlockSize: "sizes";
+    inlineSize: "sizes";
+    minInlineSize: "sizes";
+    maxInlineSize: "sizes";
+    minWidth: "sizes";
+    maxWidth: "sizes";
+    minHeight: "sizes";
+    maxHeight: "sizes";
+    flexBasis: "sizes";
+    gridTemplateColumns: "sizes";
+    gridTemplateRows: "sizes";
+    borderWidth: "borderWidths";
+    borderTopWidth: "borderWidths";
+    borderLeftWidth: "borderWidths";
+    borderRightWidth: "borderWidths";
+    borderBottomWidth: "borderWidths";
+    borderStyle: "borderStyles";
+    borderTopStyle: "borderStyles";
+    borderLeftStyle: "borderStyles";
+    borderRightStyle: "borderStyles";
+    borderBottomStyle: "borderStyles";
+    borderRadius: "radii";
+    borderTopLeftRadius: "radii";
+    borderTopRightRadius: "radii";
+    borderBottomRightRadius: "radii";
+    borderBottomLeftRadius: "radii";
+    boxShadow: "shadows";
+    textShadow: "shadows";
+    transition: "transitions";
+    zIndex: "zIndices";
+}, {}>>;
+interface SeparatorUIProps extends ComponentProps<typeof SeparatorUI> {
+    size?: 'xs' | 'md' | 'sm' | 'lg';
+    color?: 'primary' | 'lightGray' | 'darkGray' | 'white' | 'black';
+    style?: CSSProperties;
+}
+
+declare function Separator({ size, color, style, ...props }: SeparatorUIProps): react_jsx_runtime.JSX.Element;
+declare namespace Separator {
     var displayName: string;
 }
 
 declare const TextUI: _stitches_react_types_styled_component.StyledComponent<"p", {
-    size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+    size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
+    color?: "white" | "black" | "primary" | "lightGray" | "darkGray" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         white: string;
         black: string;
+        red: string;
         gray100: string;
         gray200: string;
         gray400: string;
@@ -1352,6 +1634,14 @@ declare const TextUI: _stitches_react_types_styled_component.StyledComponent<"p"
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
     };
     fontWeights: {
         regular: string;
@@ -1532,13 +1822,15 @@ declare const TextUI: _stitches_react_types_styled_component.StyledComponent<"p"
 }, {}>>;
 interface TextUIProps extends ComponentProps<typeof TextUI> {
     as?: ElementType;
-    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+    color?: 'white' | 'black' | 'primary' | 'lightGray' | 'darkGray';
+    style?: CSSProperties;
 }
 
 interface TextProps {
     children: ReactNode;
 }
-declare function Text({ children, size, ...props }: TextUIProps & TextProps): react_jsx_runtime.JSX.Element;
+declare function Text({ children, size, color, ...props }: TextUIProps & TextProps): react_jsx_runtime.JSX.Element;
 declare namespace Text {
     var displayName: string;
 }
@@ -1547,6 +1839,7 @@ declare const TextAreaUI: _stitches_react_types_styled_component.StyledComponent
     colors: {
         white: string;
         black: string;
+        red: string;
         gray100: string;
         gray200: string;
         gray400: string;
@@ -1565,6 +1858,14 @@ declare const TextAreaUI: _stitches_react_types_styled_component.StyledComponent
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
     };
     fontWeights: {
         regular: string;
@@ -1744,22 +2045,24 @@ declare const TextAreaUI: _stitches_react_types_styled_component.StyledComponent
     zIndex: "zIndices";
 }, {}>>;
 interface TextAreaUIProps extends ComponentProps<typeof TextAreaUI> {
+    style?: CSSProperties;
 }
 
-interface TextAreaProps {
-    children?: ReactNode;
+interface TextAreaProps extends TextAreaUIProps {
+    id: string;
     placeholder?: string;
     disabled?: boolean;
+    children?: ReactNode;
 }
-declare function TextArea({ children, ...props }: TextAreaUIProps & TextAreaProps): react_jsx_runtime.JSX.Element;
-declare namespace TextArea {
-    var displayName: string;
-}
+declare const TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
 
-declare const InputUI: _stitches_react_types_styled_component.StyledComponent<"input", {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const InputUI: _stitches_react_types_styled_component.StyledComponent<"input", {
+    size?: "sm" | "md" | "lg" | undefined;
+}, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         white: string;
         black: string;
+        red: string;
         gray100: string;
         gray200: string;
         gray400: string;
@@ -1778,6 +2081,14 @@ declare const InputUI: _stitches_react_types_styled_component.StyledComponent<"i
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
     };
     fontWeights: {
         regular: string;
@@ -1958,21 +2269,257 @@ declare const InputUI: _stitches_react_types_styled_component.StyledComponent<"i
 }, {}>>;
 
 interface TextInputProps extends ComponentProps<typeof InputUI> {
+    size?: 'lg' | 'md' | 'sm';
     required?: boolean;
     requiredText?: string;
     withShadow?: boolean;
     placeholder?: string;
-    type?: string;
-    id: string;
+    type?: React.HTMLInputTypeAttribute | undefined;
+    style?: CSSProperties;
+    id?: string;
 }
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
+declare const SelectUI: _stitches_react_types_styled_component.StyledComponent<"div", {
+    disabled?: boolean | "true" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+}, {}, _stitches_react_types_css_util.CSS<{}, {
+    colors: {
+        white: string;
+        black: string;
+        red: string;
+        gray100: string;
+        gray200: string;
+        gray400: string;
+        gray800: string;
+        dafaz100: string;
+        dafaz200: string;
+        dafaz400: string;
+        dafaz600: string;
+        dafaz800: string;
+    };
+    fontSizes: {
+        xxs: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
+    };
+    fontWeights: {
+        regular: string;
+        medium: string;
+        bold: string;
+    };
+    fonts: {
+        default: string;
+        app: string;
+        web: string;
+        offer: string;
+        code: string;
+    };
+    lineHeights: {
+        shorter: string;
+        short: string;
+        base: string;
+        tall: string;
+    };
+    radii: {
+        px: string;
+        sm: string;
+        md: string;
+        full: string;
+    };
+    space: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        10: string;
+        12: string;
+        16: string;
+        20: string;
+        40: string;
+        64: string;
+        80: string;
+    };
+    opacities: {
+        opacity400: string;
+        opacity600: string;
+        opacity800: string;
+        opacity900: string;
+    };
+}, {
+    height: "space";
+    width: "space";
+    gap: "space";
+    gridGap: "space";
+    columnGap: "space";
+    gridColumnGap: "space";
+    rowGap: "space";
+    gridRowGap: "space";
+    inset: "space";
+    insetBlock: "space";
+    insetBlockEnd: "space";
+    insetBlockStart: "space";
+    insetInline: "space";
+    insetInlineEnd: "space";
+    insetInlineStart: "space";
+    margin: "space";
+    marginTop: "space";
+    marginRight: "space";
+    marginBottom: "space";
+    marginLeft: "space";
+    marginBlock: "space";
+    marginBlockEnd: "space";
+    marginBlockStart: "space";
+    marginInline: "space";
+    marginInlineEnd: "space";
+    marginInlineStart: "space";
+    padding: "space";
+    paddingTop: "space";
+    paddingRight: "space";
+    paddingBottom: "space";
+    paddingLeft: "space";
+    paddingBlock: "space";
+    paddingBlockEnd: "space";
+    paddingBlockStart: "space";
+    paddingInline: "space";
+    paddingInlineEnd: "space";
+    paddingInlineStart: "space";
+    scrollMargin: "space";
+    scrollMarginTop: "space";
+    scrollMarginRight: "space";
+    scrollMarginBottom: "space";
+    scrollMarginLeft: "space";
+    scrollMarginBlock: "space";
+    scrollMarginBlockEnd: "space";
+    scrollMarginBlockStart: "space";
+    scrollMarginInline: "space";
+    scrollMarginInlineEnd: "space";
+    scrollMarginInlineStart: "space";
+    scrollPadding: "space";
+    scrollPaddingTop: "space";
+    scrollPaddingRight: "space";
+    scrollPaddingBottom: "space";
+    scrollPaddingLeft: "space";
+    scrollPaddingBlock: "space";
+    scrollPaddingBlockEnd: "space";
+    scrollPaddingBlockStart: "space";
+    scrollPaddingInline: "space";
+    scrollPaddingInlineEnd: "space";
+    scrollPaddingInlineStart: "space";
+    top: "space";
+    right: "space";
+    bottom: "space";
+    left: "space";
+    fontSize: "fontSizes";
+    background: "colors";
+    backgroundColor: "colors";
+    backgroundImage: "colors";
+    borderImage: "colors";
+    border: "colors";
+    borderBlock: "colors";
+    borderBlockEnd: "colors";
+    borderBlockStart: "colors";
+    borderBottom: "colors";
+    borderBottomColor: "colors";
+    borderColor: "colors";
+    borderInline: "colors";
+    borderInlineEnd: "colors";
+    borderInlineStart: "colors";
+    borderLeft: "colors";
+    borderLeftColor: "colors";
+    borderRight: "colors";
+    borderRightColor: "colors";
+    borderTop: "colors";
+    borderTopColor: "colors";
+    caretColor: "colors";
+    color: "colors";
+    columnRuleColor: "colors";
+    outline: "colors";
+    outlineColor: "colors";
+    fill: "colors";
+    stroke: "colors";
+    textDecorationColor: "colors";
+    fontFamily: "fonts";
+    fontWeight: "fontWeights";
+    lineHeight: "lineHeights";
+    letterSpacing: "letterSpacings";
+    blockSize: "sizes";
+    minBlockSize: "sizes";
+    maxBlockSize: "sizes";
+    inlineSize: "sizes";
+    minInlineSize: "sizes";
+    maxInlineSize: "sizes";
+    minWidth: "sizes";
+    maxWidth: "sizes";
+    minHeight: "sizes";
+    maxHeight: "sizes";
+    flexBasis: "sizes";
+    gridTemplateColumns: "sizes";
+    gridTemplateRows: "sizes";
+    borderWidth: "borderWidths";
+    borderTopWidth: "borderWidths";
+    borderLeftWidth: "borderWidths";
+    borderRightWidth: "borderWidths";
+    borderBottomWidth: "borderWidths";
+    borderStyle: "borderStyles";
+    borderTopStyle: "borderStyles";
+    borderLeftStyle: "borderStyles";
+    borderRightStyle: "borderStyles";
+    borderBottomStyle: "borderStyles";
+    borderRadius: "radii";
+    borderTopLeftRadius: "radii";
+    borderTopRightRadius: "radii";
+    borderBottomRightRadius: "radii";
+    borderBottomLeftRadius: "radii";
+    boxShadow: "shadows";
+    textShadow: "shadows";
+    transition: "transitions";
+    zIndex: "zIndices";
+}, {}>>;
+interface SelectUIProps extends ComponentProps<typeof SelectUI> {
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    style?: CSSProperties;
+}
+
+interface Item {
+    id: string;
+    label: string;
+    value: string;
+}
+interface SelectContainerProps extends SelectUIProps {
+    id: string;
+    items: Item[];
+    placeholder?: string;
+    name?: string;
+    value?: string[];
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+declare const MultiSelect: react.ForwardRefExoticComponent<Omit<SelectContainerProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
 declare const styled: <Type extends keyof JSX.IntrinsicElements | React.ComponentType<any> | _stitches_react_types_util.Function, Composers extends (string | React.ComponentType<any> | _stitches_react_types_util.Function | {
     [name: string]: unknown;
 })[], CSS = _stitches_react_types_css_util.CSS<{}, {
     colors: {
         white: string;
         black: string;
+        red: string;
         gray100: string;
         gray200: string;
         gray400: string;
@@ -1991,6 +2538,14 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
     };
     fontWeights: {
         regular: string;
@@ -2183,6 +2738,7 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
     colors: {
         white: string;
         black: string;
+        red: string;
         gray100: string;
         gray200: string;
         gray400: string;
@@ -2201,6 +2757,14 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
     };
     fontWeights: {
         regular: string;
@@ -2385,6 +2949,7 @@ declare const css: <Composers extends (string | React.ExoticComponent<any> | Rea
     colors: {
         white: string;
         black: string;
+        red: string;
         gray100: string;
         gray200: string;
         gray400: string;
@@ -2403,6 +2968,14 @@ declare const css: <Composers extends (string | React.ExoticComponent<any> | Rea
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
     };
     fontWeights: {
         regular: string;
@@ -2602,6 +3175,7 @@ declare const globalCss: <Styles extends {
         colors: {
             white: string;
             black: string;
+            red: string;
             gray100: string;
             gray200: string;
             gray400: string;
@@ -2620,6 +3194,14 @@ declare const globalCss: <Styles extends {
             lg: string;
             xl: string;
             '2xl': string;
+            '3xl': string;
+            '4xl': string;
+            '5xl': string;
+            '6xl': string;
+            '7xl': string;
+            '8xl': string;
+            '9xl': string;
+            '10xl': string;
         };
         fontWeights: {
             regular: string;
@@ -2802,6 +3384,7 @@ declare const globalCss: <Styles extends {
     colors: {
         white: string;
         black: string;
+        red: string;
         gray100: string;
         gray200: string;
         gray400: string;
@@ -2820,6 +3403,14 @@ declare const globalCss: <Styles extends {
         lg: string;
         xl: string;
         '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        '10xl': string;
     };
     fontWeights: {
         regular: string;
@@ -3005,6 +3596,7 @@ declare const keyframes: (style: {
         colors: {
             white: string;
             black: string;
+            red: string;
             gray100: string;
             gray200: string;
             gray400: string;
@@ -3023,6 +3615,14 @@ declare const keyframes: (style: {
             lg: string;
             xl: string;
             '2xl': string;
+            '3xl': string;
+            '4xl': string;
+            '5xl': string;
+            '6xl': string;
+            '7xl': string;
+            '8xl': string;
+            '9xl': string;
+            '10xl': string;
         };
         fontWeights: {
             regular: string;
@@ -3213,6 +3813,7 @@ declare const theme: string & {
     colors: {
         white: _stitches_react_types_theme.Token<"white", string, "colors", "">;
         black: _stitches_react_types_theme.Token<"black", string, "colors", "">;
+        red: _stitches_react_types_theme.Token<"red", string, "colors", "">;
         gray100: _stitches_react_types_theme.Token<"gray100", string, "colors", "">;
         gray200: _stitches_react_types_theme.Token<"gray200", string, "colors", "">;
         gray400: _stitches_react_types_theme.Token<"gray400", string, "colors", "">;
@@ -3231,6 +3832,14 @@ declare const theme: string & {
         lg: _stitches_react_types_theme.Token<"lg", string, "fontSizes", "">;
         xl: _stitches_react_types_theme.Token<"xl", string, "fontSizes", "">;
         '2xl': _stitches_react_types_theme.Token<"2xl", string, "fontSizes", "">;
+        '3xl': _stitches_react_types_theme.Token<"3xl", string, "fontSizes", "">;
+        '4xl': _stitches_react_types_theme.Token<"4xl", string, "fontSizes", "">;
+        '5xl': _stitches_react_types_theme.Token<"5xl", string, "fontSizes", "">;
+        '6xl': _stitches_react_types_theme.Token<"6xl", string, "fontSizes", "">;
+        '7xl': _stitches_react_types_theme.Token<"7xl", string, "fontSizes", "">;
+        '8xl': _stitches_react_types_theme.Token<"8xl", string, "fontSizes", "">;
+        '9xl': _stitches_react_types_theme.Token<"9xl", string, "fontSizes", "">;
+        '10xl': _stitches_react_types_theme.Token<"10xl", string, "fontSizes", "">;
     };
     fontWeights: {
         regular: _stitches_react_types_theme.Token<"regular", string, "fontWeights", "">;
@@ -3284,6 +3893,7 @@ declare const createTheme: <Argument0 extends string | ({
     colors?: {
         white?: string | number | boolean | undefined;
         black?: string | number | boolean | undefined;
+        red?: string | number | boolean | undefined;
         gray100?: string | number | boolean | undefined;
         gray200?: string | number | boolean | undefined;
         gray400?: string | number | boolean | undefined;
@@ -3302,6 +3912,14 @@ declare const createTheme: <Argument0 extends string | ({
         lg?: string | number | boolean | undefined;
         xl?: string | number | boolean | undefined;
         '2xl'?: string | number | boolean | undefined;
+        '3xl'?: string | number | boolean | undefined;
+        '4xl'?: string | number | boolean | undefined;
+        '5xl'?: string | number | boolean | undefined;
+        '6xl'?: string | number | boolean | undefined;
+        '7xl'?: string | number | boolean | undefined;
+        '8xl'?: string | number | boolean | undefined;
+        '9xl'?: string | number | boolean | undefined;
+        '10xl'?: string | number | boolean | undefined;
     } | undefined;
     fontWeights?: {
         regular?: string | number | boolean | undefined;
@@ -3359,6 +3977,7 @@ declare const createTheme: <Argument0 extends string | ({
     colors?: {
         white?: string | number | boolean | undefined;
         black?: string | number | boolean | undefined;
+        red?: string | number | boolean | undefined;
         gray100?: string | number | boolean | undefined;
         gray200?: string | number | boolean | undefined;
         gray400?: string | number | boolean | undefined;
@@ -3377,6 +3996,14 @@ declare const createTheme: <Argument0 extends string | ({
         lg?: string | number | boolean | undefined;
         xl?: string | number | boolean | undefined;
         '2xl'?: string | number | boolean | undefined;
+        '3xl'?: string | number | boolean | undefined;
+        '4xl'?: string | number | boolean | undefined;
+        '5xl'?: string | number | boolean | undefined;
+        '6xl'?: string | number | boolean | undefined;
+        '7xl'?: string | number | boolean | undefined;
+        '8xl'?: string | number | boolean | undefined;
+        '9xl'?: string | number | boolean | undefined;
+        '10xl'?: string | number | boolean | undefined;
     } | undefined;
     fontWeights?: {
         regular?: string | number | boolean | undefined;
@@ -3441,6 +4068,7 @@ declare const config: {
         colors: {
             white: string;
             black: string;
+            red: string;
             gray100: string;
             gray200: string;
             gray400: string;
@@ -3459,6 +4087,14 @@ declare const config: {
             lg: string;
             xl: string;
             '2xl': string;
+            '3xl': string;
+            '4xl': string;
+            '5xl': string;
+            '6xl': string;
+            '7xl': string;
+            '8xl': string;
+            '9xl': string;
+            '10xl': string;
         };
         fontWeights: {
             regular: string;
@@ -3641,4 +4277,4 @@ declare const config: {
     utils: {};
 };
 
-export { Box, Button, CheckBox, Heading, Radio, Select, Text, TextArea, TextInput, type TextInputProps, config, createTheme, css, getCssText, globalCss, keyframes, styled, theme };
+export { Box, Button, CheckBox, Heading, type HeadingProps, MultiSelect, Radio, Select, Separator, Text, TextArea, TextInput, type TextInputProps, config, createTheme, css, getCssText, globalCss, keyframes, styled, theme };