@kroo-web/design-system 1.13.0 → 1.13.4

package/README.MD

@@ -29,9 +29,10 @@ Next, add the following the highest up in your application, usually in the `App.
 This adds the tokens used in the design system to the root of the application. (the css modules come prebundled in the build this step is only for the tokens and odd global styles included in the design system).
 
 ```jsx
-import "@kroo-web/design-system/dist/styles/global.css";
-// For using the icons package
-import "react-material-symbols/rounded";
+import '@kroo-web/design-system/dist/styles/styles/global.css' <-- this is the tokens
+
+import '@kroo-web/design-system/dist/styles/styles/style.css' <-- this is the css modules
+
 ```
 
 That's all folks! You can now use the components in the design system in your application.
@@ -48,35 +49,80 @@ for setup you will need to add the `ToastContainer` component from `react-toasti
 
 ## Testing without deploying the package
 
-If you would like to test the design system without deploying the package you can run the following command in the root of the project.
+If you would like to test the design system without deploying the package, you can use `npm pack` to create a local tarball of the package:
 
 ```bash
-  npm link
-```
-
-in the design system repo you will also have to run to use the react version from the repo where the design system is being used
-
-```
-npm link ../myproject/node_modules/react
-npm link ../myproject/node_modules/react-dom
+# In the design system repo
+npm run build  # Make sure to build the package first
+npm pack       # This creates a .tgz file
 ```
 
-then in a project where the design system is being used run the following command.
+Then in your project where you want to use the design system, you can install the local package:
 
 ```bash
-  npm link @kroo-web/design-system
+# In your project directory
+npm install /path/to/design-system/kroo-web-design-system-1.0.0.tgz
 ```
 
-This will overwrite the package with the local version of the package and will update when rebuilt. 
-
-<i>**Note**: Does not show up in the package.json it just replaces the node_modules package. this is so an unreleased version of the package cannot be deployed to prod (so after development make sure you npm install again to overwrite the local version of the package).</i>
+The exact filename will depend on your package version. This method will properly update your package.json and is more reliable than using `npm link`.
 
+To update the package after making changes:
+1. Make your changes in the design system
+2. Run `npm run build`
+3. Run `npm pack` again
+4. Reinstall the new .tgz file in your project
 
 ## Next Steps
 
-This sways more on the side of component library rather than a design system due to the lack of tokens and living documentation. However, next steps would be to create a seperate package called @kroo-web/tokens allowing us to version the tokens and use them in the design system.
-
-We could also use Token Studio with Figma to enable the designers to have control over the tokens allowing them to change the design system and see the changes in the design system in real time.
+Here are the key areas for improving and evolving the design system:
+
+### 1. Token Management
+- Create a separate `@kroo-web/tokens` package to manage design tokens independently
+- Implement Token Studio integration with Figma for real-time token management
+- Set up a CI/CD pipeline for automatic token updates from Figma to code
+- Add support for theme switching (light/dark mode) using token sets
+- Document token usage and naming conventions
+
+### 2. Documentation Improvements
+- Set up a documentation site using tools like Docusaurus or Storybook Docs
+- Create comprehensive usage guidelines for each component
+- Add accessibility documentation and WCAG compliance status
+- Include interactive examples and code playgrounds
+- Document component composition patterns and best practices
+- Add visual regression testing documentation
+
+### 3. Component Architecture
+- Implement a more robust component composition system
+- Add support for component variants using a consistent API
+- Create higher-order components for common patterns
+- Improve type definitions and prop documentation
+- Add performance benchmarks for components
+
+### 4. Testing and Quality
+- Implement end-to-end testing using Cypress or Playwright
+- Add visual regression testing with tools like Percy or Chromatic
+- Improve unit test coverage
+- Add accessibility testing using tools like axe-core
+- Set up automated performance monitoring
+
+### 5. Developer Experience
+- Add better error messages and development-time warnings
+- Create codemods for breaking changes
+
+### 6. Design-Development Workflow
+- Set up automated design token sync from Figma
+- Implement a component request and review process
+- Create a changelog automation system
+- Add design system analytics to track component usage
+- Establish a regular design system review process
+
+### 7. Performance Optimization
+- Add bundle size monitoring
+- Optimize asset loading and delivery
+
+## Automated Changelog
+
+We use [Conventional Commits](https://www.conventionalcommits.org/) and [Release-Please](https://github.com/googleapis/release-please) to automate our changelog generation.
 
 ## Deployments of storybook
 

package/dist/components/Accordion/config.d.ts

@@ -1,12 +1,12 @@
-import { default as React, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 
-export declare const AccordionContext: React.Context<{
+export declare const AccordionContext: import('react').Context<{
     active: string[];
     setActive?: (value: string[]) => void;
 }>;
-export declare const AccordionContextProvider: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const AccordionItemContext: React.Context<{
+export declare const AccordionContextProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionItemContext: import('react').Context<{
     setValue: (value: string) => void;
     value: string;
 }>;
-export declare const AccordionItemContextProvider: ({ children }: PropsWithChildren) => React.JSX.Element;
+export declare const AccordionItemContextProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 export type TAccordionRootProps = {
     children: React.ReactNode;
@@ -10,12 +9,12 @@ export type TAccordionTriggerProps<C extends React.ElementType = 'p'> = {
     size?: 'large' | 'regular';
 } & React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>;
 export declare const Accordion: {
-    Content: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Item: (props: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>) => React.JSX.Element;
-    Root: (props: TAccordionRootProps) => React.JSX.Element;
-    Trigger: React.ForwardRefExoticComponent<{
+    Content: import('react').ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Item: (props: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>) => import("react/jsx-runtime").JSX.Element;
+    Root: (props: TAccordionRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: import('react').ForwardRefExoticComponent<{
         as?: "p" | undefined;
         controls?: React.ReactNode;
         size?: "large" | "regular";
-    } & Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    } & Omit<AccordionPrimitive.AccordionTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 };

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

@@ -1,4 +1,4 @@
-import { default as React, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { PolymorphicPropsWithoutRef } from '../../types/PolymorphicWithoutRef';
 
 declare const defaultElement = "button";
@@ -21,5 +21,5 @@ type TButtonOwnProps = {
     onlyIcon?: boolean;
 } & PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement> & TButtonVisualTypes;
 export type TButtonProps<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<TButtonOwnProps, T>;
-export declare function Button<T extends React.ElementType = typeof defaultElement>({ as, children, className, onlyIcon, variant, visualType, ...rest }: TButtonProps<T>): React.JSX.Element;
+export declare function Button<T extends React.ElementType = typeof defaultElement>({ as, children, className, onlyIcon, variant, visualType, ...rest }: TButtonProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { default as React, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { TTypographyProps } from '../Typography';
 
 export type TCalloutRootProps = {
@@ -6,7 +6,7 @@ export type TCalloutRootProps = {
 };
 export type TCalloutTextProps = TTypographyProps<'p'>;
 export declare const Callout: {
-    Icon: ({ size, weight, ...rest }: import('../Icon').TIconProps) => React.JSX.Element;
-    Root: ({ children, type }: PropsWithChildren<TCalloutRootProps>) => React.JSX.Element;
-    Text: ({ children, ...props }: PropsWithChildren<TCalloutTextProps>) => React.JSX.Element;
+    Icon: ({ size, weight, ...rest }: import('..').TIconProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, type }: PropsWithChildren<TCalloutRootProps>) => import("react/jsx-runtime").JSX.Element;
+    Text: ({ children, ...props }: PropsWithChildren<TCalloutTextProps>) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,4 +1,4 @@
-import { default as React, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { PolymorphicPropsWithoutRef } from '../../types/PolymorphicWithoutRef';
 
 declare const defaultElement = "div";
@@ -18,5 +18,5 @@ export interface ICardOwnProps extends React.HTMLAttributes<HTMLDivElement>, Pro
     variants?: TCardVariants;
 }
 export type ICardProps<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<ICardOwnProps, T>;
-export declare function Card<T extends React.ElementType = typeof defaultElement>({ as, children, className, isSquare, variants, ...rest }: ICardProps<T>): React.JSX.Element;
+export declare function Card<T extends React.ElementType = typeof defaultElement>({ as, children, className, isSquare, variants, ...rest }: ICardProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { default as React, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 
 export type CardsVariants = {
     layout?: 'bento-five' | 'bento-four' | 'bento-three';
@@ -7,4 +7,4 @@ export interface ICardsProps extends PropsWithChildren {
     as: 'div' | 'ol' | 'section' | 'ul';
     variants: CardsVariants;
 }
-export declare const Cards: ({ as, children, variants }: ICardsProps) => React.JSX.Element;
+export declare const Cards: ({ as, children, variants }: ICardsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { default as React, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 
 export type TCheckboxProps<T extends FieldValues> = {
@@ -9,7 +9,7 @@ export type TCheckboxProps<T extends FieldValues> = {
     name: Path<T>;
     variant?: 'checkbox' | 'radio';
 };
-export declare const Checkbox: <T extends FieldValues>(props: TCheckboxProps<T>) => React.JSX.Element;
+export declare const Checkbox: <T extends FieldValues>(props: TCheckboxProps<T>) => import("react/jsx-runtime").JSX.Element;
 export type TNativeCheckboxProps = {
     disabled?: boolean;
     error?: {
@@ -21,4 +21,4 @@ export type TNativeCheckboxProps = {
     id: string;
     label: ReactNode | string;
 } & React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export declare const NativeCheckbox: React.ForwardRefExoticComponent<Omit<TNativeCheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const NativeCheckbox: import('react').ForwardRefExoticComponent<Omit<TNativeCheckboxProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -1,7 +1,5 @@
-import { default as React } from 'react';
-
 export type TColumnsProps = {
     children: React.ReactNode;
     cols: number;
 };
-export declare const Columns: ({ children, cols }: TColumnsProps) => React.JSX.Element;
+export declare const Columns: ({ children, cols }: TColumnsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ComboBox/ComboBox.stories.d.ts

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { default as React } from 'react';
 import { ComboBox } from '.';
 
 declare const _default: Meta<typeof ComboBox>;
@@ -9,5 +8,5 @@ export declare const GeneralUsage: Story;
 export declare const AlwaysOpen: Story;
 export declare const Render: Story;
 export declare const Native: {
-    render: () => React.JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,4 +1,4 @@
-import { default as React, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { ComboBoxProps } from 'react-aria-components';
 import { ControllerRenderProps, FieldValues } from 'react-hook-form';
 
@@ -15,8 +15,8 @@ export type TComboBoxProps = {
     onSelect?: (item: TComboBoxItem) => void;
     options: TComboBoxItem[];
 };
-export declare const ComboBox: (props: Omit<TComboBoxProps, "field">) => React.JSX.Element;
-export declare const Field: ({ alwaysOpen, field: { onBlur, ...restField }, label, onSelect, options }: TComboBoxProps) => React.JSX.Element;
+export declare const ComboBox: (props: Omit<TComboBoxProps, "field">) => import("react/jsx-runtime").JSX.Element;
+export declare const Field: ({ alwaysOpen, field: { onBlur, ...restField }, label, onSelect, options }: TComboBoxProps) => import("react/jsx-runtime").JSX.Element;
 export type TNativeComboBoxRootProps = {
     children: ReactNode;
     disabled?: boolean;
@@ -32,21 +32,21 @@ export type TNativeComboBoxRootProps = {
     missing?: boolean;
     placeholder?: string;
 } & Omit<ComboBoxProps<TComboBoxItem>, 'children' | 'isDisabled' | 'label' | 'onOpenChange' | 'placeholder'>;
-export declare const Root: ({ children, disabled, error, helper, hideLabel, id, label, missing, placeholder, ...rest }: TNativeComboBoxRootProps) => React.JSX.Element;
+export declare const Root: ({ children, disabled, error, helper, hideLabel, id, label, missing, placeholder, ...rest }: TNativeComboBoxRootProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Options: ({ children }: {
     children: ReactNode;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Item: ({ children, img }: {
     children: ReactNode;
     img?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const NativeComboBox: {
     Item: ({ children, img }: {
         children: ReactNode;
         img?: string;
-    }) => React.JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     Options: ({ children }: {
         children: ReactNode;
-    }) => React.JSX.Element;
-    Root: ({ children, disabled, error, helper, hideLabel, id, label, missing, placeholder, ...rest }: TNativeComboBoxRootProps) => React.JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, disabled, error, helper, hideLabel, id, label, missing, placeholder, ...rest }: TNativeComboBoxRootProps) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,4 +1,4 @@
-import { default as React, DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 
 export type TDatePicker<T extends FieldValues> = {
@@ -12,7 +12,7 @@ export type TDatePicker<T extends FieldValues> = {
     min?: string;
     name: Path<T>;
 };
-export declare const DatePicker: <T extends FieldValues>(props: TDatePicker<T>) => React.JSX.Element;
+export declare const DatePicker: <T extends FieldValues>(props: TDatePicker<T>) => import("react/jsx-runtime").JSX.Element;
 export type TNativeDatePickerProps = {
     error?: {
         message: string;
@@ -26,4 +26,4 @@ export type TNativeDatePickerProps = {
     min?: number | string;
     missing?: boolean;
 } & Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'max' | 'min' | 'type'>;
-export declare const NativeDatePicker: React.ForwardRefExoticComponent<Omit<TNativeDatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const NativeDatePicker: import('react').ForwardRefExoticComponent<Omit<TNativeDatePickerProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -1,7 +1,5 @@
-import { default as React } from 'react';
-
 export type TDisclosureProps = {
     children: React.ReactNode;
     condition: boolean;
 };
-export declare const Disclosure: ({ children, condition }: TDisclosureProps) => React.JSX.Element;
+export declare const Disclosure: ({ children, condition }: TDisclosureProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,9 @@
-import { default as React, HTMLProps, PropsWithChildren } from 'react';
+import { HTMLProps, PropsWithChildren } from 'react';
 import { FieldValues, UseFormReturn } from 'react-hook-form';
 
 type TFormProps<T extends FieldValues> = {
     methods: UseFormReturn<T>;
     onSubmit: (values: T) => void;
 } & PropsWithChildren<HTMLProps<HTMLFormElement>>;
-export declare const Form: <T extends FieldValues>({ children, methods, onSubmit, ...rest }: TFormProps<T>) => React.JSX.Element;
+export declare const Form: <T extends FieldValues>({ children, methods, onSubmit, ...rest }: TFormProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,9 +1,8 @@
-import { default as React } from 'react';
 import { MaterialSymbolProps } from './types';
 
-export declare const MaterialSymbol: React.ForwardRefExoticComponent<MaterialSymbolProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const MaterialSymbol: import('react').ForwardRefExoticComponent<MaterialSymbolProps & import('react').RefAttributes<HTMLSpanElement>>;
 export type TIconProps = {
     size?: 'large' | 'regular' | 'xlarge';
     weight?: 'light' | 'medium' | 'normal';
 } & Omit<MaterialSymbolProps, 'size' | 'weight'>;
-export declare const Icon: ({ size, weight, ...rest }: TIconProps) => React.JSX.Element;
+export declare const Icon: ({ size, weight, ...rest }: TIconProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { default as React, ElementType, PropsWithChildren } from 'react';
+import { ElementType, PropsWithChildren } from 'react';
 
 type PolymorphicLink<T extends ElementType> = {
     as?: T;
@@ -8,5 +8,5 @@ type AnchorProps = {
     as?: undefined;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
 export type TLink<T extends ElementType> = AnchorProps | PolymorphicLink<T>;
-export declare const Link: <T extends ElementType = "a">({ as, children, className, ...rest }: TLink<T>) => React.JSX.Element;
+export declare const Link: <T extends ElementType = "a">({ as, children, className, ...rest }: TLink<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,3 @@
-import { default as React } from 'react';
-
 declare const sizes: {
     full: string;
     large: string;
@@ -9,5 +7,5 @@ declare const sizes: {
 export type TLoadingProps = {
     size?: keyof typeof sizes;
 };
-export declare const Loading: ({ size }: TLoadingProps) => React.JSX.Element;
+export declare const Loading: ({ size }: TLoadingProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { default as React, ButtonHTMLAttributes, PropsWithChildren } from 'react';
+import { ButtonHTMLAttributes, PropsWithChildren } from 'react';
 import { TButtonProps } from '../Button';
 
 export type TUseModalProps = {
@@ -25,10 +25,10 @@ export type TModalHeaderProps = {
     variant?: 'action';
 };
 export type TModalButtonProps = PropsWithChildren;
-export declare const Buttons: ({ children }: TModalButtonProps) => React.JSX.Element;
+export declare const Buttons: ({ children }: TModalButtonProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Modal: {
-    Buttons: ({ children }: TModalButtonProps) => React.JSX.Element;
-    Content: ({ children, closeOnBackdropClick, focusTrap, value }: TModalContentProps) => React.JSX.Element;
-    Control: ({ children, value, ...rest }: TModalControlProps) => React.JSX.Element;
-    Header: ({ actionButtonProps, onClick, title, variant }: TModalHeaderProps) => React.JSX.Element;
+    Buttons: ({ children }: TModalButtonProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, closeOnBackdropClick, focusTrap, value }: TModalContentProps) => import("react/jsx-runtime").JSX.Element;
+    Control: ({ children, value, ...rest }: TModalControlProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ actionButtonProps, onClick, title, variant }: TModalHeaderProps) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,4 +1,4 @@
-import { default as React, DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 
 export type TNumberFieldProps<T extends FieldValues> = {
@@ -11,7 +11,7 @@ export type TNumberFieldProps<T extends FieldValues> = {
     name: Path<T>;
     width?: number;
 };
-export declare const NumberField: <T extends FieldValues>(props: TNumberFieldProps<T>) => React.JSX.Element;
+export declare const NumberField: <T extends FieldValues>(props: TNumberFieldProps<T>) => import("react/jsx-runtime").JSX.Element;
 export type TNativeNumberFieldProps = {
     defaultValue?: number;
     disabled?: boolean;
@@ -28,4 +28,4 @@ export type TNativeNumberFieldProps = {
     missing?: boolean;
     width?: number;
 } & Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'max' | 'min' | 'type'>;
-export declare const NativeNumberField: React.ForwardRefExoticComponent<Omit<TNativeNumberFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const NativeNumberField: import('react').ForwardRefExoticComponent<Omit<TNativeNumberFieldProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/NumberField/numberField.stories.d.ts

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { default as React } from 'react';
 import { NumberField } from '.';
 
 declare const _default: Meta<typeof NumberField>;
@@ -7,9 +6,9 @@ export default _default;
 type Story = StoryObj<typeof NumberField>;
 export declare const GeneralUsage: Story;
 export declare const Error: {
-    render: () => React.JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
 };
 export declare const Helper: {
-    render: () => React.JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
 };
 export declare const Native: Story;

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

@@ -1,4 +1,4 @@
-import { default as React, ChangeEventHandler, DetailedHTMLProps, InputHTMLAttributes, ReactNode } from 'react';
+import { ChangeEventHandler, DetailedHTMLProps, InputHTMLAttributes, ReactNode } from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 
 export type TPhoneFieldProps<T extends FieldValues> = {
@@ -11,7 +11,7 @@ export type TPhoneFieldProps<T extends FieldValues> = {
     name: Path<T>;
     placeholder?: string;
 };
-export declare const PhoneField: <T extends FieldValues>(props: TPhoneFieldProps<T>) => React.JSX.Element;
+export declare const PhoneField: <T extends FieldValues>(props: TPhoneFieldProps<T>) => import("react/jsx-runtime").JSX.Element;
 export type TNativeCountrySelectProps = {
     id: string;
     missing?: boolean;
@@ -27,9 +27,9 @@ export type TNativeInputProps = {
     placeholder: string;
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 export declare const NativePhoneField: {
-    CountrySelect: React.ForwardRefExoticComponent<Omit<TNativeCountrySelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
-    Input: React.ForwardRefExoticComponent<Omit<TNativeInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    CountrySelect: import('react').ForwardRefExoticComponent<Omit<TNativeCountrySelectProps, "ref"> & import('react').RefAttributes<HTMLSelectElement>>;
+    Input: import('react').ForwardRefExoticComponent<Omit<TNativeInputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
     Root: ({ children }: {
         children: ReactNode;
-    }) => React.JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/PinInput/PinInput.stories.d.ts

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { default as React } from 'react';
 import { PinInput } from '.';
 
 declare const _default: Meta<typeof PinInput>;
@@ -25,5 +24,5 @@ export declare const OTP: {
     };
 };
 export declare const NewOTPInput: {
-    render: () => React.JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,5 +1,4 @@
 import { OTPInputProps } from 'input-otp';
-import { default as React } from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 
 export interface TPinInputProps<T extends FieldValues> {
@@ -10,5 +9,5 @@ export interface TPinInputProps<T extends FieldValues> {
     length: number;
     name: Path<T>;
 }
-export declare const PinInput: <T extends FieldValues>(props: TPinInputProps<T>) => React.JSX.Element;
-export declare const OTPInput: (props: Pick<OTPInputProps, "inputMode" | "onChange" | "onComplete" | "value">) => React.JSX.Element;
+export declare const PinInput: <T extends FieldValues>(props: TPinInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const OTPInput: (props: Pick<OTPInputProps, "inputMode" | "onChange" | "onComplete" | "value">) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,9 @@
-import { default as React } from 'react';
 import * as RadixPopover from '@radix-ui/react-popover';
 export type TPopoverRootProps = React.ComponentPropsWithoutRef<typeof RadixPopover.Root>;
 export type TPopoverTriggerProps = React.ComponentPropsWithoutRef<typeof RadixPopover.Trigger>;
 export type TPopoverContentProps = React.ComponentPropsWithoutRef<typeof RadixPopover.Content>;
 export declare const Popover: {
-    Content: ({ children, ...rest }: TPopoverContentProps) => React.JSX.Element;
-    Root: (props: TPopoverRootProps) => React.JSX.Element;
-    Trigger: ({ children, ...rest }: TPopoverTriggerProps) => React.JSX.Element;
+    Content: ({ children, ...rest }: TPopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+    Root: (props: TPopoverRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, ...rest }: TPopoverTriggerProps) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,9 +1,7 @@
-import { default as React } from 'react';
-
 export type TProgressIndicatorProps = {
     current?: number;
     label?: string;
     max?: number;
     size?: 'full-width' | 'medium' | 'small';
 };
-export declare const ProgressIndicator: ({ current, label, max, size }: TProgressIndicatorProps) => React.JSX.Element;
+export declare const ProgressIndicator: ({ current, label, max, size }: TProgressIndicatorProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { FieldError, FieldValues, Path } from 'react-hook-form';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
 export type TRadioGroupProps<T extends FieldValues> = {
@@ -8,9 +7,9 @@ export type TRadioGroupProps<T extends FieldValues> = {
     variant?: 'cards' | 'circle';
 } & Omit<RadixRadioGroup.RadioGroupProps, 'name'>;
 export declare const RadioGroup: {
-    Indicator: ({ className, ...props }: RadixRadioGroup.RadioGroupIndicatorProps) => React.JSX.Element;
+    Indicator: ({ className, ...props }: RadixRadioGroup.RadioGroupIndicatorProps) => import("react/jsx-runtime").JSX.Element;
     Item: ({ children, className, variant, ...props }: {
         variant?: "cards" | "circle";
-    } & RadixRadioGroup.RadioGroupItemProps) => React.JSX.Element;
-    Root: <T extends FieldValues>({ children, className, disabled, label, name, variant, ...props }: TRadioGroupProps<T>) => React.JSX.Element;
+    } & RadixRadioGroup.RadioGroupItemProps) => import("react/jsx-runtime").JSX.Element;
+    Root: <T extends FieldValues>({ children, className, disabled, label, name, variant, ...props }: TRadioGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 
 export type TRangeProps<T extends FieldValues> = {
@@ -13,4 +12,4 @@ export type TRangeProps<T extends FieldValues> = {
     showValue?: boolean;
     step?: number;
 };
-export declare const Range: <T extends FieldValues>(props: TRangeProps<T>) => React.JSX.Element;
+export declare const Range: <T extends FieldValues>(props: TRangeProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { default as React, DetailedHTMLProps, OptionHTMLAttributes, ReactNode, SelectHTMLAttributes } from 'react';
+import { DetailedHTMLProps, OptionHTMLAttributes, ReactNode, SelectHTMLAttributes } from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 
 export type TItem = {
@@ -23,7 +23,7 @@ export type TSelectProps<T extends FieldValues> = {
     name: Path<T>;
     placeholder?: string;
 };
-export declare const Select: <T extends FieldValues>(props: TSelectProps<T>) => React.JSX.Element;
+export declare const Select: <T extends FieldValues>(props: TSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export type TNativeSelectProps = {
     error?: {
         message: string;
@@ -40,4 +40,4 @@ export type TNativeSelectProps = {
     missing?: boolean;
     placeholder?: string;
 } & Omit<DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'children'>;
-export declare const NativeSelect: React.ForwardRefExoticComponent<Omit<TNativeSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export declare const NativeSelect: import('react').ForwardRefExoticComponent<Omit<TNativeSelectProps, "ref"> & import('react').RefAttributes<HTMLSelectElement>>;

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

@@ -1,8 +1,6 @@
-import { default as React } from 'react';
-
 export type TSkeletonProps = {
     height?: string;
     rounded?: boolean;
     width?: string;
 };
-export declare const Skeleton: ({ height, rounded, width }: TSkeletonProps) => React.JSX.Element;
+export declare const Skeleton: ({ height, rounded, width }: TSkeletonProps) => import("react/jsx-runtime").JSX.Element;