@zealicsolutions/web-ui 0.3.0 → 0.3.1

package/dist/cjs/src/atoms/Avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { Callback } from 'typescript';
-import { SizesTypes, ThemeColors } from 'theme';
+import { FontSizesTypes, SizesTypes, ThemeColors } from 'theme';
 import { IconNames } from '..';
 export declare type AvatarProps = {
     size?: SizesTypes | number;
@@ -9,7 +9,7 @@ export declare type AvatarProps = {
     backgroundColor?: ThemeColors;
     textConfig?: {
         color?: ThemeColors;
-        font?: SizesTypes;
+        font?: FontSizesTypes;
     };
     content: {
         initials?: string;

package/dist/{esm/src/atoms/Buttons/Button.stories.d.ts → cjs/src/atoms/Buttons/Buttons.stories.d.ts}

@@ -1,15 +1,16 @@
 import type { ComponentStory } from '@storybook/react';
-import { FC } from 'react';
 import { TextButtonProps } from 'atoms/Buttons/TextButton';
-import { Button as ButtonComponent } from './Button';
-import { TouchableOpacityProps } from './TouchableOpacity';
+import { FC } from 'react';
 import { IconButton as IconButtonComponent } from './IconButton';
+import { TouchableOpacityProps } from './TouchableOpacity';
 declare const _default: {
     title: string;
-    component: ({ text: textProp, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, size, }: import("./Button").ButtonProps) => JSX.Element | null;
+    component: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Pick<import("../..").BaseButtonProps, "children" | "onClick" | "disabled" | "size" | "colorTheme"> & {
+        buttonLink?: string | undefined;
+        elementId?: string | undefined;
+    }, never>;
 };
 export default _default;
-export declare const Button: ComponentStory<typeof ButtonComponent>;
 export declare const TouchableOpacity: ComponentStory<FC<TouchableOpacityProps>>;
 export declare const TextButton: ComponentStory<FC<TextButtonProps>>;
 export declare const IconButton: ComponentStory<typeof IconButtonComponent>;

package/dist/cjs/src/atoms/Buttons/TextButton.d.ts

@@ -1,24 +1,9 @@
-import { PropsWithChildren } from 'react';
-import type { Callback } from 'typescript';
-export declare type TextButtonProps = PropsWithChildren<{
-    activeOpacity?: number;
-    withoutOpacityEffect?: boolean;
-    disabled?: boolean;
-    onClick?: Callback;
+import { BaseButtonProps } from 'molecules';
+export declare type TextButtonProps = Pick<BaseButtonProps, 'disabled' | 'onClick' | 'children' | 'colorTheme' | 'size'> & {
     buttonLink?: string;
     elementId?: string;
-}>;
-export declare const TextButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    activeOpacity?: number | undefined;
-    withoutOpacityEffect?: boolean | undefined;
-    disabled?: boolean | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & {
-    activeOpacity?: number | undefined;
-    withoutOpacityEffect?: boolean | undefined;
-    disabled?: boolean | undefined;
-    onClick?: Callback | undefined;
+};
+export declare const TextButton: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Pick<BaseButtonProps, "children" | "onClick" | "disabled" | "size" | "colorTheme"> & {
     buttonLink?: string | undefined;
     elementId?: string | undefined;
 }, never>;

package/dist/cjs/src/atoms/Checkbox/Checkbox.d.ts

@@ -1,9 +1,15 @@
-import { ReactNode } from 'react';
-export declare type CheckBoxProps = {
-    value: boolean;
-    onClick: (value: boolean) => void;
-    disabled?: boolean;
-    error?: boolean;
-    label?: string | ReactNode;
-};
-export declare const Checkbox: ({ label, onClick, value, disabled, error }: CheckBoxProps) => JSX.Element;
+/// <reference types="react" />
+import { CheckboxInternalConfigProps } from './types';
+export declare type CheckboxProps = {
+    id: string;
+    onClick: (id: string) => void;
+    label: string;
+} & Partial<{
+    isError: boolean;
+    disabled: boolean;
+    isEditMode: boolean;
+    isSelected: boolean;
+    isRichText: boolean;
+    internalConfig: CheckboxInternalConfigProps;
+}>;
+export declare const Checkbox: ({ id, onClick, label, isError, disabled, isEditMode, isSelected, isRichText, internalConfig, }: CheckboxProps) => JSX.Element;

package/dist/cjs/src/atoms/Checkbox/Checkbox.stories.d.ts

@@ -3,7 +3,7 @@ import type { ComponentStory } from '@storybook/react';
 import { Checkbox as CheckboxComponent } from './Checkbox';
 declare const _default: {
     title: string;
-    component: ({ label, onClick, value, disabled, error }: import("./Checkbox").CheckBoxProps) => JSX.Element;
+    component: ({ id, onClick, label, isError, disabled, isEditMode, isSelected, isRichText, internalConfig, }: import("./Checkbox").CheckboxProps) => JSX.Element;
 };
 export default _default;
 export declare const Checkbox: ComponentStory<typeof CheckboxComponent>;

package/dist/cjs/src/atoms/Checkbox/helpers.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxInternalConfigProps, CheckBoxStates, CheckboxStylesConfig } from './types';
+export declare const getCheckboxStyles: (isHovered: boolean, checkboxState: CheckBoxStates, internalConfig?: CheckboxInternalConfigProps) => CheckboxStylesConfig;

package/dist/cjs/src/atoms/Checkbox/types.d.ts

@@ -0,0 +1,18 @@
+import { SizesTypes, ThemeColors } from 'theme';
+import type { StylesType } from 'typescript';
+export declare type CheckboxInternalConfigProps = Partial<{
+    selectedCheckboxBackgroundColor: ThemeColors | string;
+    selectedCheckboxIconColor: ThemeColors | string;
+    buttonPadding: number;
+    textPadding: number;
+    styles: StylesType;
+    wrapperStyles: StylesType;
+    buttonOptionSpacing?: SizesTypes;
+}>;
+export declare type CheckboxStylesConfig = {
+    checkboxIconWrapperColor: StylesType;
+    checkboxIconColor: ThemeColors | string;
+    checkboxWrapperStyles: StylesType;
+    checkboxTextStyles: StylesType;
+};
+export declare type CheckBoxStates = 'selected' | 'disabled' | 'error' | 'default';

package/dist/cjs/src/atoms/CircularIndicator/CircularIndicator.stories.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 import { CircularIndicator as CircularIndicatorComponent } from './CircularIndicator';
 declare const _default: {
     title: string;
     component: ({ activeColor, inactiveColor, ...props }: import("./CircularIndicator").CircularIndicatorProps) => JSX.Element;
 };
 export default _default;
-export declare const CircularIndicator: ComponentStory<typeof CircularIndicatorComponent>;
+export declare const CircularIndicator: StoryFn<typeof CircularIndicatorComponent>;

package/dist/cjs/src/atoms/Icon/Icon.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { CSSProperties } from 'styled-components';
 import { ThemeColors } from 'theme';
 export declare type IconProps = {
     name: IconNames;
@@ -6,30 +7,32 @@ export declare type IconProps = {
     color?: ThemeColors | string;
     fill?: ThemeColors | string;
     pointerEvents?: 'auto' | 'none';
-    style?: React.CSSProperties;
+    style?: CSSProperties;
 };
 declare const availableIcons: {
-    CaretDown: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
-    CaretUp: ({ color, ...props }: Omit<IconProps, "name">) => JSX.Element;
+    ArrowRight: ({ color, ...props }: Omit<IconProps, "name">) => JSX.Element;
+    Bell: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Bookmark: ({ fill, color, size, ...props }: Omit<IconProps, "name">) => JSX.Element;
+    CaretDown: ({ color, size, }: Omit<IconProps, "name">) => JSX.Element;
     CaretLeft: ({ color, size, ...props }: Omit<IconProps, "name">) => JSX.Element;
     CaretRight: ({ color, size, ...props }: Omit<IconProps, "name">) => JSX.Element;
-    Filter: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
-    Check: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
-    Info: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
-    View: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
+    CaretUp: ({ color, ...props }: Omit<IconProps, "name">) => JSX.Element;
+    Check: ({ size, color, }: Omit<IconProps, "name">) => JSX.Element;
+    Close: ({ size, color, }: Omit<IconProps, "name">) => JSX.Element;
+    Edit: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Filter: ({ size, color, }: Omit<IconProps, "name">) => JSX.Element;
     Hide: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
-    Close: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
-    Play: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
-    Minus: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Info: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
     InfoBoxIcon: ({ color, size }: Omit<IconProps, "name">) => JSX.Element;
-    Warning: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
-    Bell: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
-    Mobile: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
     Mail: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
     Menu: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Minus: ({ size, color, }: Omit<IconProps, "name">) => JSX.Element;
+    Mobile: ({ size, color, }: Omit<IconProps, "name">) => JSX.Element;
+    Play: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
+    Save: ({ size, color }: Omit<IconProps, "name">) => JSX.Element;
     Search: ({ size, color, ...props }: Omit<IconProps, "name">) => JSX.Element;
-    Bookmark: ({ fill, color, size, ...props }: Omit<IconProps, "name">) => JSX.Element;
-    ArrowRight: ({ color, ...props }: Omit<IconProps, "name">) => JSX.Element;
+    View: ({ color, size, }: Omit<IconProps, "name">) => JSX.Element;
+    Warning: ({ size, color, }: Omit<IconProps, "name">) => JSX.Element;
 };
 export declare type IconNames = keyof typeof availableIcons;
 export declare const Icon: ({ name, color, ...props }: IconProps) => JSX.Element;

package/dist/cjs/src/atoms/Input/Input.d.ts

@@ -1,7 +1,18 @@
 import type { IconNames } from 'atoms/Icon/Icon';
 import { InputFieldTypes } from 'fieldsConfiguration/types';
 import React from 'react';
-import type { Callback } from 'typescript';
+import { ThemeColors } from 'theme/types';
+import type { Callback, StylesType } from 'typescript';
+export declare type InputFieldInternalConfigProps = Partial<{
+    textColor: ThemeColors | string;
+    textFontSize: number;
+    placeholderTextColor: ThemeColors | string;
+    placeholderTextFontSize: number;
+    verticalPadding: number;
+    horizontalPadding: number;
+    styles: StylesType;
+    wrapperStyles: StylesType;
+}>;
 export declare type InputIconProps = {
     name: IconNames;
     onClick?: Callback;
@@ -19,5 +30,6 @@ export declare type InputProps = {
     maxLength?: number;
     onChange?: (value: string) => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    internalConfig?: InputFieldInternalConfigProps;
 };
-export declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, ...rest }: InputProps) => JSX.Element;
+export declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, ...rest }: InputProps) => JSX.Element;

package/dist/cjs/src/atoms/Input/Input.stories.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import type { ComponentStory } from '@storybook/react';
-import { Input as InputComponent } from './Input';
+import type { StoryFn } from '@storybook/react';
+import { InputProps } from './Input';
 declare const _default: {
     title: string;
-    component: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, ...rest }: import("./Input").InputProps) => JSX.Element;
+    component: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, ...rest }: InputProps) => JSX.Element;
 };
 export default _default;
-export declare const Input: ComponentStory<typeof InputComponent>;
+export declare const Input: StoryFn<InputProps>;

package/dist/cjs/src/atoms/RadioButtons/RadioButtons.d.ts

@@ -1,4 +1,15 @@
 /// <reference types="react" />
+import { SizesTypes, ThemeColors } from 'theme';
+import { StylesType } from 'typescript';
+export declare type RadioButtonInternalConfigProps = {
+    selectedRadioOptionBackgroundColor: ThemeColors | string;
+    selectedRadioOptionIndicatorColor: ThemeColors | string;
+    buttonPadding: number;
+    textPadding: number;
+    styles: StylesType;
+    wrapperStyles: StylesType;
+    buttonOptionSpacing?: SizesTypes;
+};
 export declare type RadioButtonType<T extends string = string> = {
     id: T;
     label?: string;
@@ -6,12 +17,21 @@ export declare type RadioButtonType<T extends string = string> = {
     disabled?: boolean;
     isRichText?: boolean;
 };
-export declare type RadioButtonsProps<T extends string> = {
-    isEditMode?: boolean;
+export declare type RadioButtonsProps<T extends string> = Partial<{
+    isEditMode: boolean;
     onChange: (value: T) => void;
     value: T;
-    isRow?: boolean;
+    isRow: boolean;
     items: RadioButtonType<T>[];
     name: string;
-};
-export declare const RadioButtons: <T extends string>({ value, items, isRow, isEditMode, onChange, name, }: RadioButtonsProps<T>) => JSX.Element;
+    internalConfig: RadioButtonInternalConfigProps;
+}>;
+export declare const RadioButtons: <T extends string>({ value, items, isRow, isEditMode, onChange, name, internalConfig, }: Partial<{
+    isEditMode: boolean;
+    onChange: (value: T) => void;
+    value: T;
+    isRow: boolean;
+    items: RadioButtonType<T>[];
+    name: string;
+    internalConfig: RadioButtonInternalConfigProps;
+}>) => JSX.Element;

package/dist/cjs/src/atoms/RadioButtons/RadioButtons.stories.d.ts

@@ -3,7 +3,15 @@ import type { ComponentStory } from '@storybook/react';
 import { RadioButtons as RadioButtonsComponent } from './RadioButtons';
 declare const _default: {
     title: string;
-    component: <T extends string>({ value, items, isRow, isEditMode, onChange, name, }: import("./RadioButtons").RadioButtonsProps<T>) => JSX.Element;
+    component: <T extends string>({ value, items, isRow, isEditMode, onChange, name, internalConfig, }: Partial<{
+        isEditMode: boolean;
+        onChange: (value: T) => void;
+        value: T;
+        isRow: boolean;
+        items: import("./RadioButtons").RadioButtonType<T>[];
+        name: string;
+        internalConfig: import("./RadioButtons").RadioButtonInternalConfigProps;
+    }>) => JSX.Element;
 };
 export default _default;
 export declare const RadioButtons: ComponentStory<typeof RadioButtonsComponent>;

package/dist/cjs/src/atoms/RadioButtons/RadioOption.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { RadioButtonInternalConfigProps, RadioButtonType } from 'atoms';
+declare type RadioOptionProps = {
+    item: RadioButtonType;
+    isEditMode?: boolean;
+    internalConfig?: RadioButtonInternalConfigProps;
+};
+export declare const RadioOption: ({ item, internalConfig, isEditMode }: RadioOptionProps) => JSX.Element;
+export {};

package/dist/cjs/src/atoms/RadioButtons/helpers.d.ts

@@ -0,0 +1,9 @@
+import { RadioButtonInternalConfigProps, RadioButtonType } from 'atoms';
+import { StylesType } from 'typescript';
+declare type RadioOptionStylesConfig = {
+    textStyles: StylesType;
+    radioIconWrapperStyles: StylesType;
+    radioLabelWrapperStyles: StylesType;
+};
+export declare const getRadioOptionStyles: (item: RadioButtonType, internalConfig?: RadioButtonInternalConfigProps) => RadioOptionStylesConfig;
+export {};

package/dist/cjs/src/atoms/RadioButtons/styles.d.ts

@@ -0,0 +1,9 @@
+import { FormControlLabel, Radio } from '@mui/material';
+import { OverrideStyles } from 'typescript';
+export declare const RadioLabelWrapper: import("styled-components").StyledComponent<typeof FormControlLabel, import("styled-components").DefaultTheme, {
+    error: boolean;
+} & OverrideStyles, never>;
+export declare const RadioIconWrapper: import("styled-components").StyledComponent<typeof Radio, import("styled-components").DefaultTheme, {
+    disabled: boolean;
+    error: boolean;
+} & OverrideStyles, never>;

package/dist/cjs/src/atoms/RegularImage/RegularImage.d.ts

@@ -0,0 +1,29 @@
+import type { Callback } from 'typescript';
+import { OverrideStyles } from 'typescript';
+export declare type RegularImageProps = {
+    src: string;
+} & Partial<{
+    alt: string;
+    width: number | string;
+    height: number | string;
+    onClick: Callback;
+    cornerRadius: number;
+}> & OverrideStyles;
+export declare const RegularImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {
+    src: string;
+} & Partial<{
+    alt: string;
+    width: number | string;
+    height: number | string;
+    onClick: Callback;
+    cornerRadius: number;
+}> & OverrideStyles, never>;
+export declare const BackgroundImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {
+    src: string;
+} & Partial<{
+    alt: string;
+    width: number | string;
+    height: number | string;
+    onClick: Callback;
+    cornerRadius: number;
+}> & OverrideStyles, never>;

package/dist/cjs/src/atoms/RegularImage/RegularImage.stories.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentStory } from '@storybook/react';
+import { RegularImage as RegularImageComponent } from './RegularImage';
+declare const _default: {
+    title: string;
+    component: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {
+        src: string;
+    } & Partial<{
+        alt: string;
+        width: string | number;
+        height: string | number;
+        onClick: import("../../typescript").Callback;
+        cornerRadius: number;
+    }> & import("../../typescript").OverrideStyles, never>;
+};
+export default _default;
+export declare const RegularImage: ComponentStory<typeof RegularImageComponent>;

package/dist/cjs/src/atoms/RichTextViewer/RichTextViewer.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { CSSProperties } from 'styled-components';
+import { TextProps } from 'atoms';
 import { FontSizesTypes, ThemeColors } from 'theme';
+import { StylesType } from 'typescript';
 export declare const MATRIX_MESSAGE_ELEMENT_ID = "matrix-message";
 export declare const COMMUNICATION_LINK_ELEMENT_ID = "communication-link";
 export declare const MATRIX_MESSAGE_DATA_ID = "matrix-message-id";
@@ -9,8 +10,9 @@ export declare const COMMUNICATION_LINK_DATA_TEXT = "communication-link-text";
 export declare type RichTextEditorProps = Partial<{
     value: string;
     font: FontSizesTypes;
-    color: ThemeColors;
-    textStyles: CSSProperties;
+    color: ThemeColors | string;
+    textStyles: StylesType;
     numberOfLines?: number;
+    extraTextProps?: TextProps;
 }>;
-export declare const RichTextViewer: ({ value, color, textStyles, font, numberOfLines, }: RichTextEditorProps) => JSX.Element | null;
+export declare const RichTextViewer: ({ value, color, textStyles, font, numberOfLines, extraTextProps, }: RichTextEditorProps) => JSX.Element | null;

package/dist/cjs/src/atoms/Select/Select.d.ts

@@ -1,3 +1,30 @@
 /// <reference types="react" />
-import type { SelectProps } from './types';
-export declare const Select: ({ onChange, value, placeholder, options, disabled, optionsPresentation, isError, }: SelectProps) => JSX.Element;
+import { ThemeColors } from 'theme';
+import { StylesType } from 'typescript';
+export declare type SelectOption = {
+    id: string;
+    label: string;
+};
+export declare type SelectInternalConfigurationOptions = {
+    placeholderTextColor: ThemeColors | string;
+    placeholderTextFontSize: number;
+    selectedTextColor: ThemeColors | string;
+    selectedTextFontSize: number;
+    verticalPadding: number;
+    horizontalPadding: number;
+    wrapperStyles: StylesType;
+    styles: StylesType;
+};
+export declare type SelectProps = {
+    value?: string;
+    optionsPresentation?: boolean;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    options?: SelectOption[];
+    isError?: boolean;
+    isEditMode?: boolean;
+    selectInternalConfig?: SelectInternalConfigurationOptions;
+    isRichText?: boolean;
+};
+export declare const Select: ({ onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;

package/dist/cjs/src/atoms/Select/Select.stories.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import type { ComponentStory } from '@storybook/react';
-import { Select as SelectComponent } from './Select';
+import { StoryFn } from '@storybook/react';
+import { SelectProps } from './Select';
 declare const _default: {
     title: string;
-    component: ({ onChange, value, placeholder, options, disabled, optionsPresentation, isError, }: import("./types").SelectProps) => JSX.Element;
+    component: ({ onChange, value, placeholder, options, disabled, optionsPresentation, isError, selectInternalConfig, isRichText, }: SelectProps) => JSX.Element;
 };
 export default _default;
-export declare const Select: ComponentStory<typeof SelectComponent>;
+export declare const Select: StoryFn<SelectProps>;

package/dist/cjs/src/atoms/Select/styles.d.ts

@@ -1,12 +1,16 @@
+import { StylesType } from 'typescript';
+import { SelectInternalConfigurationOptions } from './Select';
 declare type SelectContainerProps = {
     hasValue: boolean;
     disabled: boolean;
     isOpen: boolean;
     hasError: boolean;
+    $styles: StylesType;
 };
 export declare const SelectContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SelectContainerProps, never>;
 export declare const DropdownMenu: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DropdownMenuItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    selected: boolean;
+    $selected: boolean;
 }, never>;
+export declare const getSelectStyles: (internalConfig?: SelectInternalConfigurationOptions, isSelectedOption?: boolean) => import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
 export {};

package/dist/cjs/src/atoms/Tab/Tab.d.ts

@@ -0,0 +1,56 @@
+import { MenuItem } from 'molecules';
+import React from 'react';
+import { FontSizesTypes, SizesTypes, ThemeColors } from 'theme';
+import { StylesType } from 'typescript';
+export declare type TabOption<T = string> = {
+    menuText: string;
+    menuKey: T;
+    onMenuClick?: (key: T) => void;
+    isSelected?: boolean;
+};
+declare type TabElement = HTMLDivElement | null;
+export declare type TabTheme = 'light' | 'dark';
+export declare type TabProps<T = string, K = string> = {
+    tabKey: T;
+    text: string;
+} & Partial<{
+    disabled: boolean;
+    vertical: boolean;
+    isActive: boolean;
+    onClick: (key: T) => void;
+    options: MenuItem<K>[];
+    onOptionClick: (optionKey: K) => void;
+    tabTheme: TabTheme;
+    divider: boolean;
+    tabFont: FontSizesTypes;
+    textSize: number;
+    tabPadding: SizesTypes | number;
+    defaultTabTextColor: ThemeColors | string;
+    selectedTabTextColor: ThemeColors | string;
+    selectedTabIndicatorColor: ThemeColors | string;
+    styles: StylesType;
+}>;
+declare const ZealTab: <T extends string, K extends string>({ options, onClick, text, tabKey, vertical, onOptionClick, tabTheme, tabFont, tabPadding, selectedTabIndicatorColor, textSize, defaultTabTextColor, ...tabProps }: TabProps<T, K>, ref: React.ForwardedRef<TabElement>) => JSX.Element;
+export declare const Tab: <T, K>(props: {
+    tabKey: T;
+    text: string;
+} & Partial<{
+    disabled: boolean;
+    vertical: boolean;
+    isActive: boolean;
+    onClick: (key: T) => void;
+    options: MenuItem<K>[];
+    onOptionClick: (optionKey: K) => void;
+    tabTheme: TabTheme;
+    divider: boolean;
+    tabFont: FontSizesTypes;
+    textSize: number;
+    tabPadding: SizesTypes | number;
+    defaultTabTextColor: ThemeColors | string;
+    selectedTabTextColor: ThemeColors | string;
+    selectedTabIndicatorColor: ThemeColors | string;
+    styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+}> & {
+    ref?: React.ForwardedRef<TabElement> | undefined;
+}) => ReturnType<typeof ZealTab>;
+export {};

package/dist/cjs/src/atoms/Tab/Tab.stories.d.ts

@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import { Tab as TabComponent } from './Tab';
+declare const _default: {
+    title: string;
+    component: <T, K>(props: {
+        tabKey: T;
+        text: string;
+    } & Partial<{
+        disabled: boolean;
+        vertical: boolean;
+        isActive: boolean;
+        onClick: (key: T) => void;
+        options: import("../..").MenuItem<K>[];
+        onOptionClick: (optionKey: K) => void;
+        tabTheme: import("atoms").TabTheme;
+        divider: boolean;
+        tabFont: import("theme").FontSizesTypes;
+        textSize: number;
+        tabPadding: number | import("theme").SizesTypes;
+        defaultTabTextColor: string;
+        selectedTabTextColor: string;
+        selectedTabIndicatorColor: string;
+        styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+    }> & {
+        ref?: React.ForwardedRef<HTMLDivElement | null> | undefined;
+    }) => JSX.Element;
+};
+export default _default;
+declare type Story = StoryObj<typeof TabComponent>;
+export declare const Tab: Story;

package/dist/cjs/src/{molecules → atoms}/Tab/styles.d.ts

@@ -1,8 +1,8 @@
-import { TabProps } from './Tab';
-declare type TabContainerProps = Pick<TabProps, 'isActive' | 'disabled'>;
-export declare const TabText: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").BoxTypeMap<{}, "div">>, import("styled-components").DefaultTheme, import("../../atoms/TextWrapper/TextWrapper").TextWrapperProps & {
-    variant: string;
-}, "variant">;
+/// <reference types="react" />
+import { TabProps } from 'atoms/Tab/Tab';
+declare type TabContainerProps = Pick<TabProps, 'isActive' | 'disabled' | 'tabTheme' | 'selectedTabTextColor' | 'styles' | 'defaultTabTextColor'>;
+declare type TabTextProps = Pick<TabProps, 'tabTheme' | 'textSize' | 'defaultTabTextColor' | 'tabPadding' | 'tabFont'>;
+export declare const TabText: import("styled-components").StyledComponent<({ children, seoTag, ...textProps }: import("atoms").TextWrapperProps) => JSX.Element, import("styled-components").DefaultTheme, TabTextProps, never>;
 export declare const TabContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TabContainerProps, never>;
 export declare const CaretIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TabContainerProps, never>;
 export {};

package/dist/cjs/src/atoms/Tab/utils.d.ts

@@ -0,0 +1,4 @@
+import { TabTheme } from 'atoms/Tab/Tab';
+import { ThemeColors } from 'theme';
+export declare const getColorForCaretDownIcon: (color?: ThemeColors | string, tabTheme?: TabTheme, disabled?: boolean) => string;
+export declare const getSelectionIndicatorColor: (selectedTabIndicatorColor?: ThemeColors | string, isActiveTab?: boolean, tabTheme?: TabTheme) => string;

package/dist/cjs/src/atoms/TextWrapper/TextWrapper.d.ts

@@ -1,10 +1,10 @@
-import { ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 import { FontSizesTypes, ThemeColors } from 'theme/types';
-import { StylesType } from 'typescript';
+import type { StylesType } from 'typescript';
 export declare type TextTypes = 'primary' | 'secondary' | 'error' | 'success';
 export declare type TextAlign = 'center' | 'right' | 'left';
-export declare type TextWrapperProps = {
-    children: ReactNode;
+export declare type SeoTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+export declare type TextProps = {
     variant: FontSizesTypes;
     layout?: 'div' | 'span';
     type?: TextTypes;
@@ -13,5 +13,10 @@ export declare type TextWrapperProps = {
     numberOfLines?: number;
     textAlign?: TextAlign;
     behaveAs?: 'text' | 'button';
+    seoTag?: SeoTags;
 };
-export declare const TextWrapper: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").BoxTypeMap<{}, "div">>, import("styled-components").DefaultTheme, TextWrapperProps, never>;
+export declare type TextWrapperProps = PropsWithChildren<TextProps>;
+export declare const TextWrapper: ({ children, seoTag, ...textProps }: TextWrapperProps) => JSX.Element;
+export declare const ErrorText: ({ text }: {
+    text: string;
+}) => JSX.Element;

package/dist/cjs/src/atoms/TextWrapper/TextWrapper.stories.d.ts

@@ -1,9 +1,9 @@
-import type { ComponentStory } from '@storybook/react';
-import { FC } from 'react';
-import { TextWrapperProps } from './TextWrapper';
+/// <reference types="react" />
+import type { StoryFn } from '@storybook/react';
+import { TextWrapperProps } from 'atoms';
 declare const _default: {
     title: string;
-    component: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").BoxTypeMap<{}, "div">>, import("styled-components").DefaultTheme, TextWrapperProps, never>;
+    component: ({ children, seoTag, ...textProps }: TextWrapperProps) => JSX.Element;
 };
 export default _default;
-export declare const Text: ComponentStory<FC<TextWrapperProps>>;
+export declare const Text: StoryFn<TextWrapperProps>;