@zealicsolutions/web-ui 0.3.0 → 0.3.1

package/dist/esm/src/atoms/Tooltip/Tooltip.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import { TooltipProps as TooltipComponentProps } from 'rc-tooltip/lib/Tooltip';
+import { OverrideStyles, StylesType } from 'typescript';
 import 'rc-tooltip/assets/bootstrap.css';
-export declare type TooltipProps = Pick<TooltipComponentProps, 'overlay' | 'placement' | 'trigger' | 'visible' | 'children'>;
-export declare const StyleWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const Tooltip: ({ trigger, placement, ...props }: TooltipProps) => JSX.Element;
+export declare type TooltipProps = Pick<TooltipComponentProps, 'overlay' | 'placement' | 'trigger' | 'visible' | 'children'> & {
+    styles?: StylesType;
+};
+export declare const StyleWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, OverrideStyles, never>;
+export declare const Tooltip: ({ trigger, placement, styles, ...props }: TooltipProps) => JSX.Element;

package/dist/esm/src/atoms/Tooltip/Tooltip.stories.d.ts

@@ -3,7 +3,7 @@ import { FC } from 'react';
 import { TooltipProps } from './Tooltip';
 declare const _default: {
     title: string;
-    component: ({ trigger, placement, ...props }: TooltipProps) => JSX.Element;
+    component: ({ trigger, placement, styles, ...props }: TooltipProps) => JSX.Element;
 };
 export default _default;
 export declare const Tooltip: ComponentStory<FC<TooltipProps>>;

package/dist/esm/src/atoms/index.d.ts

@@ -1,4 +1,3 @@
-export * from './Buttons/Button';
 export * from './Buttons/TouchableOpacity';
 export * from './Checkbox/Checkbox';
 export * from './Select/Select';
@@ -7,10 +6,9 @@ export * from './TextWrapper/TextWrapper';
 export * from './Icon/Icon';
 export * from './Spacer/Spacer';
 export * from './Spinner/Spinner';
-export * from './Image/Image';
+export * from './RegularImage/RegularImage';
 export * from './Buttons/TextButton';
 export * from './ValidationTag/ValidationTag';
-export * from './Video/Video';
 export * from './Tooltip/Tooltip';
 export * from './Toast/toast';
 export * from './HorizontalButtons/HorizontalButtons';
@@ -23,3 +21,4 @@ export * from './RadioButtons/RadioButtons';
 export * from './Circle/Circle';
 export * from './CircularIndicator/CircularIndicator';
 export * from './Buttons/IconButton';
+export * from './Tab/Tab';

package/dist/esm/src/containers/Container.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ContainerComponentProps, ContainerProps } from 'containers';
+export declare const Container: ({ children, wide, compact, type, props }: ContainerProps) => JSX.Element;
+export declare const ContainerComponent: ({ type, items, config, tabsProps }: ContainerComponentProps) => JSX.Element | null;

package/dist/esm/src/containers/Container.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { ContainerComponent, ContainerComponentProps } from 'containers';
+declare const meta: Meta<typeof ContainerComponent>;
+export default meta;
+declare type Story = StoryFn<ContainerComponentProps>;
+export declare const Container: Story;

package/dist/esm/src/containers/FormContainer.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { ValidationMode } from 'react-hook-form';
+export declare type FormContainerProps = PropsWithChildren<{
+    mode?: keyof ValidationMode;
+}>;
+export declare const FormContainer: ({ mode, children }: FormContainerProps) => JSX.Element;

package/dist/esm/src/containers/MoleculeItem.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Molecule } from 'containers';
+import { TabGroupProps } from 'molecules';
+export declare const getFullLink: (url: string) => string;
+export declare const navigateToPage: (url: string) => void;
+export declare const MoleculeItem: ({ type, config, attributes, tabsProps, form, id: moleculeId, }: Molecule & {
+    tabsProps?: Pick<TabGroupProps<string, string>, "tabs" | "activeTabKey" | "onTabChange"> | undefined;
+}) => JSX.Element;

package/dist/esm/src/containers/OrganismItem.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ContainerComponentProps, Molecule } from 'containers';
+import { TabGroupProps } from 'molecules';
+export declare const OrganismItem: ({ item, tabsProps, }: {
+    item: ContainerComponentProps | Molecule;
+    tabsProps?: Pick<TabGroupProps<string, string>, "tabs" | "activeTabKey" | "onTabChange"> | undefined;
+}) => JSX.Element | null;

package/dist/esm/src/containers/helpers.d.ts

@@ -0,0 +1,2 @@
+import { ContainerScrollBehaviourType } from 'containers/types/types';
+export declare const getScrollBehaviour: (scrollBehaviour?: ContainerScrollBehaviourType) => "overflow-y: scroll" | "overflow-x: scroll" | "overflow: visible" | "overflow: unset";

package/dist/esm/src/containers/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Container';
+export * from './types/types';
+export * from './types/moleculeTypes';
+export * from './styles';
+export * from './OrganismItem';

package/dist/esm/src/containers/mock-data.d.ts

@@ -0,0 +1,3 @@
+import { ContainerComponentProps } from 'containers';
+export declare const formContainerProps: ContainerComponentProps;
+export declare const columnContainerProps: ContainerComponentProps;

package/dist/esm/src/containers/styles.d.ts

@@ -0,0 +1,12 @@
+import { ContainerProps } from 'containers/types/types';
+export declare const ContainerWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<ContainerProps, "type"> & {
+    containerProps?: Partial<{
+        position: import("containers/types/types").ContainerPositionType;
+        scrollBehaviour: import("containers/types/types").ContainerScrollBehaviourType;
+        cornerRadius: number;
+        styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+        formProps: {
+            mode: keyof import("react-hook-form").ValidationMode;
+        };
+    }> | undefined;
+}, never>;

package/dist/esm/src/containers/types/moleculeTypes.d.ts

@@ -0,0 +1,161 @@
+import { SelectOption } from 'atoms';
+import { ButtonProps, CheckboxFieldProps, ImageProps, InputFieldProps, RadioButtonFieldProps, SelectFieldProps, TabGroupProps, TextMoleculeProps } from 'molecules';
+import { UseFormReturn } from 'react-hook-form';
+import { CSSProperties } from 'styled-components';
+import type { Nullable, StrictUnion } from 'typescript';
+export declare type ImageAttributes = {
+    attributeType: 'image';
+    imageSource: string;
+};
+export interface TextAttributes {
+    attributeType: 'text';
+    isRichText: boolean;
+    text: string;
+}
+export interface VideoAttributes {
+    attributeType: 'video';
+    videoSource: string;
+}
+export interface LinkAttributes {
+    id: string;
+    attributeType: 'link';
+    type: 'internalLink' | 'externalLink';
+    internalLink: Nullable<string>;
+    externalLink: Nullable<string>;
+    name: string;
+}
+export interface SelectAttributes {
+    attributeType: 'select';
+    value: string;
+    options: SelectOption[];
+}
+export interface BooleanAttributes {
+    attributeType: 'boolean';
+    value: boolean;
+}
+export interface IterableAttributes {
+    attributeType: 'iterable';
+    options: SelectOption[];
+}
+export declare type MoleculeTypes = 'image' | 'text' | 'button' | 'video' | 'header_tab_group' | 'input_field' | 'select_field' | 'radio_button_field' | 'checkbox_field';
+export interface BaseMolecule {
+    id: string;
+    instance: 'molecule';
+    type: MoleculeTypes;
+}
+export interface ImageMolecule extends BaseMolecule {
+    type: 'image';
+    attributes: {
+        image: ImageAttributes;
+        altText: Omit<TextAttributes, 'isRichText'>;
+        link: LinkAttributes;
+    };
+    config: {
+        props: Omit<ImageProps, 'src' | 'link' | 'altText'>;
+    };
+}
+export interface TextMoleculeType extends BaseMolecule {
+    type: 'text';
+    attributes: {
+        text: TextAttributes;
+        seoStyle: SelectAttributes;
+    };
+    config: {
+        props: TextMoleculeProps;
+    };
+}
+export interface ButtonMolecule extends BaseMolecule {
+    type: 'button';
+    attributes: {
+        title: TextAttributes;
+        buttonLink: LinkAttributes;
+    };
+    config: {
+        props: Partial<Omit<ButtonProps, 'disabled' | 'children' | 'link' | 'text' | 'onClick' | 'elementId'>>;
+    };
+}
+export interface VideoMolecule extends BaseMolecule {
+    type: 'video';
+    attributes: {
+        video: VideoAttributes;
+        altText: Omit<TextAttributes, 'isRichText'>;
+        autoPlayVideo: BooleanAttributes;
+        enableCoverImage: BooleanAttributes;
+        coverImage: ImageAttributes;
+    };
+    config: {
+        props: Partial<{
+            width: number;
+            styles: CSSProperties;
+        }>;
+    };
+}
+export interface TabGroupMolecule extends BaseMolecule {
+    type: 'header_tab_group';
+    config: {
+        props: TabGroupProps;
+        wide: {
+            containerStyle?: CSSProperties;
+            containerProps?: Record<string, unknown>;
+        };
+        compact: {
+            containerStyle?: CSSProperties;
+            containerProps?: Record<string, unknown>;
+        };
+    };
+}
+export interface TextInputMolecule extends BaseMolecule {
+    type: 'input_field';
+    attributes: {
+        label: TextAttributes;
+        required: BooleanAttributes;
+        inputType: SelectAttributes;
+    };
+    config: {
+        props: Partial<{
+            state: 'default' | 'error';
+        } & InputFieldProps>;
+    };
+}
+export interface SelectFieldMolecule extends BaseMolecule {
+    type: 'select_field';
+    attributes: {
+        label: TextAttributes;
+        required: BooleanAttributes;
+        options: IterableAttributes;
+    };
+    config: {
+        props: Partial<{
+            state: 'default' | 'error';
+        } & SelectFieldProps>;
+    };
+}
+export interface RadioButtonFieldMolecule extends BaseMolecule {
+    type: 'radio_button_field';
+    attributes: {
+        label: TextAttributes;
+        required: BooleanAttributes;
+        options: IterableAttributes;
+    };
+    config: {
+        props: Partial<{
+            state: 'default' | 'error';
+        } & RadioButtonFieldProps<string>>;
+    };
+}
+export interface CheckboxFieldMolecule extends BaseMolecule {
+    type: 'checkbox_field';
+    attributes: {
+        label: TextAttributes;
+        required: BooleanAttributes;
+        options: IterableAttributes;
+    };
+    config: {
+        props: Partial<{
+            state: 'default' | 'error';
+        } & CheckboxFieldProps>;
+    };
+}
+export declare type Molecule = StrictUnion<ImageMolecule | TextMoleculeType | ButtonMolecule | VideoMolecule | TabGroupMolecule | TextInputMolecule | SelectFieldMolecule | RadioButtonFieldMolecule | CheckboxFieldMolecule> & {
+    form?: UseFormReturn<any>;
+};

package/dist/esm/src/containers/types/types.d.ts

@@ -0,0 +1,40 @@
+import { TabGroupProps } from 'molecules';
+import { PropsWithChildren } from 'react';
+import { CSSProperties } from 'styled-components';
+import { Molecule } from './moleculeTypes';
+import { ValidationMode } from 'react-hook-form';
+import { StylesType } from 'typescript';
+export declare type ContainerType = 'row' | 'column' | 'slider' | 'form';
+export declare type ContainerPositionType = 'fixed' | 'sticky' | 'static';
+export declare type ContainerScrollBehaviourType = 'vertical' | 'horizontal' | 'auto' | 'none';
+export declare type ContainerPropsType = Partial<{
+    position: ContainerPositionType;
+    scrollBehaviour: ContainerScrollBehaviourType;
+    cornerRadius: number;
+    styles: StylesType;
+    formProps: {
+        mode: keyof ValidationMode;
+    };
+}>;
+export declare type AdditionalContainerProps = Partial<{
+    containerStyle: CSSProperties;
+    containerProps: ContainerPropsType;
+}>;
+export declare type ContainerProps = PropsWithChildren<Partial<{
+    type: ContainerType;
+    wide: AdditionalContainerProps;
+    compact: AdditionalContainerProps;
+    props: ContainerPropsType;
+}>>;
+export declare type ContainerComponentProps = {
+    id: string;
+    instance: 'container';
+    type: ContainerType;
+    config: {
+        wide?: AdditionalContainerProps;
+        compact?: AdditionalContainerProps;
+        props?: ContainerPropsType;
+    };
+    items: (ContainerComponentProps | Molecule)[];
+    tabsProps?: Pick<TabGroupProps, 'tabs' | 'activeTabKey' | 'onTabChange'>;
+};

package/dist/esm/src/contexts/MlrRichTextViewerContext/types.d.ts

@@ -4,7 +4,8 @@ export declare type AnnotationsList = {
         label: string;
     }[];
     links: {
-        id: string;
+        referencedById: string;
+        moleculeId: string;
         text: string;
         url: string;
     }[];

package/dist/esm/src/fieldsConfiguration/types.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { SelectOption } from 'atoms/Select/types';
 import { ControllerProps } from 'react-hook-form';
-export declare type InputFieldTypes = 'number' | 'text' | 'email' | 'password';
+import { SelectOption } from 'atoms';
+import { InputFieldProps, SelectFieldProps } from 'molecules';
+export declare type InputFieldTypes = 'phone-number' | 'text' | 'email' | 'password' | 'numerical' | 'any';
 export declare type FieldTypes = 'input' | 'select' | 'checkbox';
 export declare type UIField<T = string> = (UIInputField & UISelectField & UICheckboxField) & {
     name: T;
@@ -10,7 +11,6 @@ export declare type UIField<T = string> = (UIInputField & UISelectField & UIChec
     label?: string;
     placeholder?: string;
     required?: boolean;
-    optional?: boolean;
     tooltip?: string;
     rules?: ControllerProps['rules'];
     order?: number;
@@ -19,10 +19,10 @@ export declare type UIInputField = {
     inputType?: InputFieldTypes;
     maxLength?: number;
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-};
+} & InputFieldProps;
 export declare type UISelectField = {
     options?: SelectOption[];
-};
+} & SelectFieldProps;
 export declare type UICheckboxField = {
     checkboxLabel?: string;
 };

package/dist/esm/src/helpers/constants.d.ts

@@ -0,0 +1,6 @@
+import { FontSizesTypes, FontWeight, SizesTypes } from 'theme';
+import { SeoTags } from 'atoms';
+export declare const sizings: (SizesTypes | 0)[];
+export declare const fonts: FontSizesTypes[];
+export declare const seoTags: SeoTags[];
+export declare const fontWeight: FontWeight[];

package/dist/esm/src/helpers/utils.d.ts

@@ -0,0 +1 @@
+export declare const validateAndOpenUrl: (url: string) => void;

package/dist/esm/src/helpers/validations.d.ts

@@ -1,5 +1,8 @@
 import { InputFieldTypes } from 'fieldsConfiguration';
 import { ValidationRule } from 'react-hook-form';
+export declare const urlPattern: RegExp;
 export declare const phoneNumberValidation: RegExp;
+export declare const numberValidation: RegExp;
 export declare const emailValidation: RegExp;
+export declare const textValidation: RegExp;
 export declare const getInputValidation: (type?: InputFieldTypes) => ValidationRule<RegExp> | undefined;

package/dist/esm/src/icons/CaretDown.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { IconProps } from 'atoms/Icon/Icon';
-export declare const CaretDown: ({ color, size }: Omit<IconProps, 'name'>) => JSX.Element;
+export declare const CaretDown: ({ color, size, }: Omit<IconProps, 'name'>) => JSX.Element;

package/dist/esm/src/icons/Check.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { IconProps } from '../atoms/Icon/Icon';
-export declare const Check: ({ size, color }: Omit<IconProps, 'name'>) => JSX.Element;
+import type { IconProps } from 'atoms';
+export declare const Check: ({ size, color, }: Omit<IconProps, 'name'>) => JSX.Element;

package/dist/esm/src/icons/Close.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { IconProps } from 'atoms/Icon/Icon';
-export declare const Close: ({ size, color }: Omit<IconProps, 'name'>) => JSX.Element;
+export declare const Close: ({ size, color, }: Omit<IconProps, 'name'>) => JSX.Element;

package/dist/esm/src/icons/Filter.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { IconProps } from '../atoms/Icon/Icon';
-export declare const Filter: ({ size, color }: Omit<IconProps, 'name'>) => JSX.Element;
+import type { IconProps } from 'atoms';
+export declare const Filter: ({ size, color, }: Omit<IconProps, 'name'>) => JSX.Element;

package/dist/esm/src/icons/Hide.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { IconProps } from '../atoms';
+import type { IconProps } from 'atoms';
 export declare const Hide: ({ color, size }: Omit<IconProps, 'name'>) => JSX.Element;

package/dist/esm/src/icons/Info.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { IconProps } from '../atoms/Icon/Icon';
+import type { IconProps } from 'atoms';
 export declare const Info: ({ size, color }: Omit<IconProps, 'name'>) => JSX.Element;

package/dist/esm/src/icons/Mail.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { IconProps } from '../atoms/Icon/Icon';
+import type { IconProps } from 'atoms';
 export declare const Mail: ({ size, color }: Omit<IconProps, 'name'>) => JSX.Element;

package/dist/esm/src/icons/Minus.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { IconProps } from '../atoms';
-export declare const Minus: ({ size, color }: Omit<IconProps, 'name'>) => JSX.Element;
+import { IconProps } from 'atoms';
+export declare const Minus: ({ size, color, }: Omit<IconProps, 'name'>) => JSX.Element;

package/dist/esm/src/icons/Mobile.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { IconProps } from '../atoms/Icon/Icon';
-export declare const Mobile: ({ size, color }: Omit<IconProps, 'name'>) => JSX.Element;
+import type { IconProps } from 'atoms';
+export declare const Mobile: ({ size, color, }: Omit<IconProps, 'name'>) => JSX.Element;

package/dist/esm/src/icons/Play.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { IconProps } from '../atoms';
+import { IconProps } from 'atoms';
 export declare const Play: ({ size, color }: Omit<IconProps, 'name'>) => JSX.Element;

package/dist/esm/src/icons/Search.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { IconProps } from '../atoms/Icon/Icon';
+import type { IconProps } from 'atoms';
 export declare const Search: ({ size, color, ...props }: Omit<IconProps, 'name'>) => JSX.Element;

package/dist/esm/src/icons/View.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { IconProps } from '../atoms';
-export declare const View: ({ color, size }: Omit<IconProps, 'name'>) => JSX.Element;
+import type { IconProps } from 'atoms';
+export declare const View: ({ color, size, }: Omit<IconProps, 'name'>) => JSX.Element;

package/dist/esm/src/icons/Warning.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { IconProps } from 'atoms/Icon/Icon';
-export declare const Warning: ({ size, color }: Omit<IconProps, 'name'>) => JSX.Element;
+export declare const Warning: ({ size, color, }: Omit<IconProps, 'name'>) => JSX.Element;

package/dist/esm/src/index.d.ts

@@ -1,8 +1,10 @@
 export * from './atoms';
-export * from './molecules';
 export * from './organisms';
 export * from './templates';
 export * from './hooks';
 export * from './theme';
 export * from './fieldsConfiguration';
 export * from './contexts';
+export * from 'helpers/constants';
+export * from './molecules';
+export * from './containers';

package/dist/esm/src/molecules/AvatarDropdown/AvatarDropdown.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import { AvatarProps } from 'atoms';
 import { MenuItemsProps } from '../MenuItems/MenuItems';
-import { AvatarProps } from '../../atoms';
 import 'rc-dropdown/assets/index.css';
 export declare type AvatarDropdownProps<T> = {
     avatarProps: AvatarProps;

package/dist/esm/src/molecules/Button/Button.d.ts

@@ -0,0 +1,42 @@
+import { PropsWithChildren } from 'react';
+import { FontSizesTypes, SizesTypes, ThemeColors } from 'theme';
+import type { Callback } from 'typescript';
+import { StylesType } from 'typescript';
+export declare type ButtonVariant = 'primary' | 'secondary' | 'text' | 'custom';
+export declare type ButtonType = 'button' | 'submit' | 'reset';
+export declare type BaseButtonProps = PropsWithChildren<{
+    onClick?: Callback;
+    variant?: ButtonVariant;
+    disabled?: boolean;
+    state?: 'disabled' | 'enabled';
+    fullWidth?: boolean;
+    size?: 'medium' | 'small';
+    buttonFont?: FontSizesTypes;
+    textColor?: ThemeColors | string;
+    textSize?: number;
+    horizontalPadding?: SizesTypes;
+    verticalPadding?: SizesTypes;
+    buttonColor?: ThemeColors | string;
+    buttonStroke?: ThemeColors | string;
+    cornerRadius?: SizesTypes | number;
+    hoverButtonColor?: ThemeColors | string;
+    hoverStrokeColor?: ThemeColors | string;
+    inactiveButtonColor?: ThemeColors | string;
+    inactiveStrokeColor?: ThemeColors | string;
+    inactiveTextColor?: ThemeColors | string;
+    styles?: StylesType;
+    colorTheme?: 'light' | 'dark';
+    href?: string;
+    type?: ButtonType;
+}>;
+export declare type ButtonProps = BaseButtonProps & {
+    fullWidth?: boolean;
+    text?: string;
+    link?: string;
+    elementId?: string;
+    loading?: boolean;
+    isRichText?: boolean;
+    containerStyle?: StylesType;
+    buttonStyle?: StylesType;
+};
+export declare const Button: ({ text: textProp, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, state, href, ...props }: ButtonProps) => JSX.Element | null;

package/dist/esm/src/molecules/Button/Button.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { StoryFn } from '@storybook/react';
+import { Button as ButtonComponent } from 'molecules/Button/Button';
+declare const _default: {
+    title: string;
+    component: ({ text: textProp, onClick, loading, disabled, variant, isRichText, fullWidth, elementId, link, containerStyle, children, buttonStyle, size, textColor, inactiveTextColor, state, href, ...props }: import("molecules/Button/Button").ButtonProps) => JSX.Element | null;
+};
+export default _default;
+export declare const Button: StoryFn<typeof ButtonComponent>;

package/dist/esm/src/molecules/CheckboxField/CheckboxField.d.ts

@@ -1,10 +1,29 @@
 /// <reference types="react" />
-import { Control } from 'react-hook-form/dist/types';
-import { CheckBoxProps } from '../../atoms';
-export declare type CheckboxFieldProps = {
+import { Control, ControllerProps } from 'react-hook-form/dist/types';
+import { SelectOption } from 'atoms';
+import type { StylesType } from 'typescript';
+import { CheckboxInternalConfigProps } from 'atoms/Checkbox/types';
+import { FieldLabelsProps } from '../FieldLabels/FieldLabels';
+export declare type CheckboxesProps = Partial<{
+    checkboxGroupWrapperStyles: StylesType;
+    checkboxFieldWrapperStyles: StylesType;
+    onChange: (id: string) => void;
+    disabled: boolean;
+    options?: SelectOption[];
+    selectedIds?: string[];
+    isError?: boolean;
+    isEditMode?: boolean;
+    isRichText: boolean;
+    internalConfig: CheckboxInternalConfigProps;
+}>;
+export declare type CheckboxFieldProps = Partial<{
+    checkboxesProps: CheckboxesProps;
+    labelsProps: FieldLabelsProps;
     name: string;
-    control?: Control<any>;
-    defaultValue?: boolean;
-    checkboxProps: Omit<CheckBoxProps, 'error' | 'onClick' | 'value'>;
-};
-export declare const CheckboxField: ({ control, name, checkboxProps, defaultValue, }: CheckboxFieldProps) => JSX.Element;
+    rules: ControllerProps['rules'];
+    control: Control<any>;
+    required: boolean;
+    optional: boolean;
+    wrapperStyles: StylesType;
+}>;
+export declare const CheckboxField: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, }: CheckboxFieldProps) => JSX.Element;

package/dist/esm/src/molecules/CheckboxField/CheckboxField.stories.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import type { StoryFn } from '@storybook/react';
+import { CheckboxField as CheckboxFieldComponent } from 'molecules';
+declare const _default: {
+    title: string;
+    component: ({ checkboxesProps, name, rules, control, optional, required, labelsProps, wrapperStyles, }: Partial<{
+        checkboxesProps: Partial<{
+            checkboxGroupWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            checkboxFieldWrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+            onChange: (id: string) => void;
+            disabled: boolean;
+            options?: import("../..").SelectOption[] | undefined;
+            selectedIds?: string[] | undefined;
+            isError?: boolean | undefined;
+            isEditMode?: boolean | undefined;
+            isRichText: boolean;
+            internalConfig: Partial<{
+                selectedCheckboxBackgroundColor: string;
+                selectedCheckboxIconColor: string;
+                buttonPadding: number;
+                textPadding: number;
+                styles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+                wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+                buttonOptionSpacing?: import("theme").SizesTypes | undefined;
+            }>;
+        }>;
+        labelsProps: import("molecules").FieldLabelsProps;
+        name: string;
+        rules: Omit<import("react-hook-form").RegisterOptions<import("react-hook-form").FieldValues, string>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs"> | undefined;
+        control: import("react-hook-form").Control<any, any>;
+        required: boolean;
+        optional: boolean;
+        wrapperStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<object, import("styled-components").DefaultTheme>>;
+    }>) => JSX.Element;
+};
+export default _default;
+export declare const CheckboxField: StoryFn<typeof CheckboxFieldComponent>;

package/dist/esm/src/molecules/CheckboxField/CheckboxGroup.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CheckboxesProps } from './CheckboxField';
+export declare type CheckboxGroupProps = Partial<{
+    onChange: (checkedIds: string[]) => void;
+    checkboxesProps: CheckboxesProps;
+}>;
+export declare const CheckboxGroup: ({ onChange, checkboxesProps }: CheckboxGroupProps) => JSX.Element;