@lets-events/react 12.10.13 → 12.10.15

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@12.10.13 build
+> @lets-events/react@12.10.15 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -10,10 +10,10 @@
 ESM Build start
 CJS Build start
 CJS dist\index.js 432.14 KB
-CJS ⚡️ Build success in 259ms
+CJS ⚡️ Build success in 302ms
 ESM dist\index.mjs 416.46 KB
-ESM ⚡️ Build success in 260ms
+ESM ⚡️ Build success in 303ms
 DTS Build start
-DTS ⚡️ Build success in 4950ms
-DTS dist\index.d.mts 405.45 KB
-DTS dist\index.d.ts  405.45 KB
+DTS ⚡️ Build success in 5091ms
+DTS dist\index.d.mts 409.63 KB
+DTS dist\index.d.ts  409.63 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.10.15
+
+### Patch Changes
+
+- fix button props
+
+## 12.10.14
+
+### Patch Changes
+
+- flex text prop
+
 ## 12.10.13
 
 ### Patch Changes

package/dist/index.d.mts

@@ -5,11 +5,10 @@ import PropTypes from 'prop-types';
 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 * as React$1 from 'react';
-import React__default, { ComponentProps, ElementType, ReactNode, MouseEvent, HTMLAttributes, JSX } from 'react';
+import React__default, { ElementType, ReactNode, CSSProperties, ComponentProps, ButtonHTMLAttributes, MouseEvent, HTMLAttributes, JSX } from 'react';
 import * as _radix_ui_themes from '@radix-ui/themes';
 import { TextField as TextField$1, RadioGroup as RadioGroup$1, CheckboxGroup as CheckboxGroup$1, DropdownMenu as DropdownMenu$1, AlertDialog, Switch as Switch$1 } from '@radix-ui/themes';
 import { Colors } from '@lets-events/tokens';
-import { VariantProps } from '@stitches/react';
 import { MaskOptions, format, unformat } from '@react-input/mask';
 import { Dialog } from 'radix-ui';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -31,6 +30,148 @@ declare const Icon: {
     };
 };
 
+declare const typographyValues: {
+    displayLarge: {
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    displayMedium: {
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    displaySmall: {
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    headline1: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    headline2: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    headline3: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    headline4: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    headline5: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    headline6: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    headline7: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    headline8: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    bodyXL: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    bodyL: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    bodyM: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    bodyS: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    bodyXS: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    bodyXXS: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    badgeLarge: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    badgeMedium: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    badgeSmall: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    badgeExtraSmall: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    tooltip: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    popoversRegular: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    captionLarge: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    captionMedium: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    captionSmall: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    buttonLarge: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    buttonMedium: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    buttonSmall: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    buttonExtraSmall: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    labelLarge: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    labelMedium: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    labelSmall: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    labelExtraSmall: {
+        fontSize: string;
+        lineHeight: string;
+    };
+};
+
 declare const TextStyle: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<_radix_ui_themes.TextProps & React$1.RefAttributes<HTMLSpanElement>>, {
     typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
@@ -408,10 +549,24 @@ declare const TextStyle: _stitches_react_types_styled_component.StyledComponent<
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type TextProps = Omit<ComponentProps<typeof TextStyle>, "color"> & {
+type Typography = keyof typeof typographyValues;
+type FontWeight = "regular" | "medium" | "semibold" | "bold";
+type TextProps = {
     as?: ElementType;
     asChild?: boolean;
     color?: keyof Colors;
+    typography?: Typography;
+    fontWeight?: FontWeight;
+    children?: ReactNode;
+    id?: string;
+    role?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-hidden"?: boolean | "true" | "false";
+    className?: string;
+    style?: CSSProperties;
+    css?: ComponentProps<typeof TextStyle>["css"];
 };
 declare function Text({ color, ...props }: TextProps): react_jsx_runtime.JSX.Element;
 
@@ -799,10 +954,22 @@ declare const ButtonStyled: _stitches_react_types_styled_component.StyledCompone
     zIndex: "zIndices";
 }, {}>>;
 
-type ButtonVariantProps = VariantProps<typeof ButtonStyled>;
-interface ButtonProps extends ComponentProps<typeof ButtonStyled>, ButtonVariantProps {
+type TextAlign = "center" | "left" | "right";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    color?: "brand" | "purple" | "error" | "info" | "success" | "warning" | "neutral" | "white";
+    size?: "extraSmall" | "small" | "medium" | "large";
+    variant?: "text" | "toggle" | "contained" | "outlined" | "menuDropdownItem" | "menuDropdownItemDelete";
+    fontWeight?: "regular" | "medium" | "semibold" | "bold";
+    textAlign?: TextAlign;
+    outlinedBgColor?: "neutral" | "transparent";
+    radii?: "full";
+    isCircle?: boolean;
     asChild?: boolean;
     loading?: boolean;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    css?: ComponentProps<typeof ButtonStyled>["css"];
 }
 declare function Button({ asChild, children, loading, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
@@ -13154,9 +13321,21 @@ declare const FlexStyled: _stitches_react_types_styled_component.StyledComponent
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type FlexProps = ComponentProps<typeof FlexStyled> & {
+type StitchesFlexProps = ComponentProps<typeof FlexStyled>;
+type GapValue = NonNullable<StitchesFlexProps['gap']>;
+type FlexProps = {
     as?: ElementType;
-    children: React.ReactNode;
+    children: ReactNode;
+    display?: 'flex' | 'inline-flex';
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    gap?: GapValue;
+    gapX?: Exclude<GapValue, 0 | '0'>;
+    gapY?: Exclude<GapValue, 0 | '0'>;
+    className?: string;
+    style?: CSSProperties;
+    css?: StitchesFlexProps['css'];
 };
 declare function Flex({ children, ...props }: FlexProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -5,11 +5,10 @@ import PropTypes from 'prop-types';
 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 * as React$1 from 'react';
-import React__default, { ComponentProps, ElementType, ReactNode, MouseEvent, HTMLAttributes, JSX } from 'react';
+import React__default, { ElementType, ReactNode, CSSProperties, ComponentProps, ButtonHTMLAttributes, MouseEvent, HTMLAttributes, JSX } from 'react';
 import * as _radix_ui_themes from '@radix-ui/themes';
 import { TextField as TextField$1, RadioGroup as RadioGroup$1, CheckboxGroup as CheckboxGroup$1, DropdownMenu as DropdownMenu$1, AlertDialog, Switch as Switch$1 } from '@radix-ui/themes';
 import { Colors } from '@lets-events/tokens';
-import { VariantProps } from '@stitches/react';
 import { MaskOptions, format, unformat } from '@react-input/mask';
 import { Dialog } from 'radix-ui';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -31,6 +30,148 @@ declare const Icon: {
     };
 };
 
+declare const typographyValues: {
+    displayLarge: {
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    displayMedium: {
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    displaySmall: {
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+    headline1: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    headline2: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    headline3: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    headline4: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    headline5: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    headline6: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    headline7: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    headline8: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    bodyXL: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    bodyL: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    bodyM: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    bodyS: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    bodyXS: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    bodyXXS: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    badgeLarge: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    badgeMedium: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    badgeSmall: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    badgeExtraSmall: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    tooltip: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    popoversRegular: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    captionLarge: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    captionMedium: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    captionSmall: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    buttonLarge: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    buttonMedium: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    buttonSmall: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    buttonExtraSmall: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    labelLarge: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    labelMedium: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    labelSmall: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    labelExtraSmall: {
+        fontSize: string;
+        lineHeight: string;
+    };
+};
+
 declare const TextStyle: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<_radix_ui_themes.TextProps & React$1.RefAttributes<HTMLSpanElement>>, {
     typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
@@ -408,10 +549,24 @@ declare const TextStyle: _stitches_react_types_styled_component.StyledComponent<
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type TextProps = Omit<ComponentProps<typeof TextStyle>, "color"> & {
+type Typography = keyof typeof typographyValues;
+type FontWeight = "regular" | "medium" | "semibold" | "bold";
+type TextProps = {
     as?: ElementType;
     asChild?: boolean;
     color?: keyof Colors;
+    typography?: Typography;
+    fontWeight?: FontWeight;
+    children?: ReactNode;
+    id?: string;
+    role?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-hidden"?: boolean | "true" | "false";
+    className?: string;
+    style?: CSSProperties;
+    css?: ComponentProps<typeof TextStyle>["css"];
 };
 declare function Text({ color, ...props }: TextProps): react_jsx_runtime.JSX.Element;
 
@@ -799,10 +954,22 @@ declare const ButtonStyled: _stitches_react_types_styled_component.StyledCompone
     zIndex: "zIndices";
 }, {}>>;
 
-type ButtonVariantProps = VariantProps<typeof ButtonStyled>;
-interface ButtonProps extends ComponentProps<typeof ButtonStyled>, ButtonVariantProps {
+type TextAlign = "center" | "left" | "right";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    color?: "brand" | "purple" | "error" | "info" | "success" | "warning" | "neutral" | "white";
+    size?: "extraSmall" | "small" | "medium" | "large";
+    variant?: "text" | "toggle" | "contained" | "outlined" | "menuDropdownItem" | "menuDropdownItemDelete";
+    fontWeight?: "regular" | "medium" | "semibold" | "bold";
+    textAlign?: TextAlign;
+    outlinedBgColor?: "neutral" | "transparent";
+    radii?: "full";
+    isCircle?: boolean;
     asChild?: boolean;
     loading?: boolean;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    css?: ComponentProps<typeof ButtonStyled>["css"];
 }
 declare function Button({ asChild, children, loading, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
@@ -13154,9 +13321,21 @@ declare const FlexStyled: _stitches_react_types_styled_component.StyledComponent
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type FlexProps = ComponentProps<typeof FlexStyled> & {
+type StitchesFlexProps = ComponentProps<typeof FlexStyled>;
+type GapValue = NonNullable<StitchesFlexProps['gap']>;
+type FlexProps = {
     as?: ElementType;
-    children: React.ReactNode;
+    children: ReactNode;
+    display?: 'flex' | 'inline-flex';
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    gap?: GapValue;
+    gapX?: Exclude<GapValue, 0 | '0'>;
+    gapY?: Exclude<GapValue, 0 | '0'>;
+    className?: string;
+    style?: CSSProperties;
+    css?: StitchesFlexProps['css'];
 };
 declare function Flex({ children, ...props }: FlexProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -2881,7 +2881,7 @@ var TextField = import_react3.default.forwardRef(
       onInput == null ? void 0 : onInput(e);
     };
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { direction: "column", css: { width: "100%", position: "relative" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { gap: "0", css: { width: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { gap: 0, css: { width: "100%" }, children: [
         !!addon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           InputAddon,
           {
@@ -9424,7 +9424,7 @@ function Alert(_a) {
           ] })
         ] }),
         completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialoghrStyled, {}) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogRowStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex, { gap: "10", justify: "end", width: "100%", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogRowStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex, { justify: "end", css: { width: "100%" }, children: [
           completAlert.onAction && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes13.AlertDialog.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             Button,
             {

package/dist/index.mjs

@@ -2760,7 +2760,7 @@ var TextField = React.forwardRef(
       onInput == null ? void 0 : onInput(e);
     };
     return /* @__PURE__ */ jsxs2(Flex, { direction: "column", css: { width: "100%", position: "relative" }, children: [
-      /* @__PURE__ */ jsxs2(Flex, { gap: "0", css: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxs2(Flex, { gap: 0, css: { width: "100%" }, children: [
         !!addon && /* @__PURE__ */ jsx7(
           InputAddon,
           {
@@ -9307,7 +9307,7 @@ function Alert(_a) {
           ] })
         ] }),
         completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ jsx19(AlertDialoghrStyled, {}) : null,
-        /* @__PURE__ */ jsx19(AlertDialogRowStyled, { children: /* @__PURE__ */ jsxs11(Flex, { gap: "10", justify: "end", width: "100%", children: [
+        /* @__PURE__ */ jsx19(AlertDialogRowStyled, { children: /* @__PURE__ */ jsxs11(Flex, { justify: "end", css: { width: "100%" }, children: [
           completAlert.onAction && /* @__PURE__ */ jsx19(AlertDialog.Action, { children: /* @__PURE__ */ jsx19(
             Button,
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.10.13",
+  "version": "12.10.15",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Alert.tsx

@@ -274,7 +274,7 @@ export function Alert({
                 <AlertDialoghrStyled />
               ) : null}
               <AlertDialogRowStyled>
-                <Flex gap="10" justify="end" width={"100%"}>
+                <Flex justify="end" css={{ width: "100%" }}>
                   {completAlert.onAction && (
                     <AlertDialog.Action>
                       <Button

package/src/components/Button/index.tsx

@@ -1,13 +1,12 @@
-import { ComponentProps, useMemo } from "react";
+import { ButtonHTMLAttributes, ComponentProps, CSSProperties, ReactNode, useMemo } from "react";
 import { ButtonStyled, SpinningDiv } from "./styledComponents";
 import { Button as ButtonRadix } from "@radix-ui/themes";
-import type { VariantProps } from "@stitches/react";
 import Icon, { IconProps } from "../Icon";
 import { Flex } from "../Flex";
 
-type ButtonVariantProps = VariantProps<typeof ButtonStyled>;
+type TextAlign = "center" | "left" | "right";
 
-const getJustifyByTextAlign = (textAlign: ButtonVariantProps["textAlign"]) => {
+const getJustifyByTextAlign = (textAlign: TextAlign) => {
   switch (textAlign) {
     case "left":
       return "start";
@@ -18,11 +17,21 @@ const getJustifyByTextAlign = (textAlign: ButtonVariantProps["textAlign"]) => {
   }
 };
 
-export interface ButtonProps
-  extends ComponentProps<typeof ButtonStyled>,
-    ButtonVariantProps {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  color?: "brand" | "purple" | "error" | "info" | "success" | "warning" | "neutral" | "white";
+  size?: "extraSmall" | "small" | "medium" | "large";
+  variant?: "text" | "toggle" | "contained" | "outlined" | "menuDropdownItem" | "menuDropdownItemDelete";
+  fontWeight?: "regular" | "medium" | "semibold" | "bold";
+  textAlign?: TextAlign;
+  outlinedBgColor?: "neutral" | "transparent";
+  radii?: "full";
+  isCircle?: boolean;
   asChild?: boolean;
   loading?: boolean;
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  css?: ComponentProps<typeof ButtonStyled>["css"];
 }
 
 export function Button({ asChild, children, loading, ...props }: ButtonProps) {
@@ -45,7 +54,7 @@ export function Button({ asChild, children, loading, ...props }: ButtonProps) {
   }, [size]);
 
   return (
-    <ButtonStyled as={Component} {...props} disabled={disabled || loading}>
+    <ButtonStyled as={Component} {...(props as ComponentProps<typeof ButtonStyled>)} disabled={disabled || loading}>
       <div style={{ position: "relative" }}>
         <Flex
           justify={getJustifyByTextAlign(textAlign)}

package/src/components/Flex.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, ElementType } from 'react';
+import { ComponentProps, CSSProperties, ElementType, ReactNode } from 'react';
 import { styled } from '../styles'
 import { Flex as FlexRadix } from "@radix-ui/themes";
 export const FlexStyled = styled(FlexRadix, {
@@ -104,15 +104,27 @@ export const FlexStyled = styled(FlexRadix, {
 
 })
 
-export type FlexProps = ComponentProps<typeof FlexStyled> & {
-  as?: ElementType,
-  children: React.ReactNode
-}
+type StitchesFlexProps = ComponentProps<typeof FlexStyled>;
+type GapValue = NonNullable<StitchesFlexProps['gap']>;
 
+export type FlexProps = {
+  as?: ElementType;
+  children: ReactNode;
+  display?: 'flex' | 'inline-flex';
+  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  gap?: GapValue;
+  gapX?: Exclude<GapValue, 0 | '0'>;
+  gapY?: Exclude<GapValue, 0 | '0'>;
+  className?: string;
+  style?: CSSProperties;
+  css?: StitchesFlexProps['css'];
+};
 
 export function Flex({ children, ...props }: FlexProps) {
   return (
-    <FlexStyled {...props}>
+    <FlexStyled {...(props as ComponentProps<typeof FlexStyled>)}>
       {children}
     </FlexStyled>
   )

package/src/components/Text.tsx

@@ -1,9 +1,9 @@
-import { ComponentProps, ElementType } from "react";
+import { ComponentProps, CSSProperties, ElementType, ReactNode } from "react";
 import { styled } from "../styles";
 import { Text as TextRadix } from "@radix-ui/themes";
 import { typographyValues } from "../types/typographyValues";
 
-import { colors, Colors } from "@lets-events/tokens";
+import { Colors } from "@lets-events/tokens";
 
 export const TextStyle = styled(TextRadix, {
   fontFamily: "$default",
@@ -19,10 +19,25 @@ export const TextStyle = styled(TextRadix, {
   },
 });
 
-export type TextProps = Omit<ComponentProps<typeof TextStyle>, "color"> & {
+type Typography = keyof typeof typographyValues;
+type FontWeight = "regular" | "medium" | "semibold" | "bold";
+
+export type TextProps = {
   as?: ElementType;
   asChild?: boolean;
   color?: keyof Colors;
+  typography?: Typography;
+  fontWeight?: FontWeight;
+  children?: ReactNode;
+  id?: string;
+  role?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+  "aria-hidden"?: boolean | "true" | "false";
+  className?: string;
+  style?: CSSProperties;
+  css?: ComponentProps<typeof TextStyle>["css"];
 };
 
 export function Text({ color, ...props }: TextProps) {

package/src/components/TextField.tsx

@@ -329,7 +329,7 @@ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
 
     return (
       <Flex direction="column" css={{ width: "100%", position: "relative" }}>
-        <Flex gap={"0"} css={{ width: "100%" }}>
+        <Flex gap={0} css={{ width: "100%" }}>
           {!!addon && (
             <InputAddon
               color={hasError ? "error" : color}