@kubit-ui-web/react-components 1.6.1 → 1.6.2

package/dist/esm/components/accordion/accordion.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CommonStyleType } from '../../types/styles';
 import { LineSeparatorLinePropsStylesType } from '../lineSeparator';
 export interface IAccordionStyles {
@@ -7,19 +6,19 @@ export interface IAccordionStyles {
     displayOption?: string;
     $rotate?: boolean;
 }
-export declare const AccordionContainerStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>>;
-export declare const AccordionDecorativeBackgroundStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>>;
-export declare const AccordionHeaderExternalContainerStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>>;
-export declare const AccordionHeaderInternalContainerStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>>;
-export declare const AccordionHeaderMainContainerStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>>;
-export declare const AccordionHeaderTitleHeadlineStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
-export declare const AccordionTitleStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IAccordionStyles>>;
-export declare const AccordionHeaderRightContentStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>>;
-export declare const AccordionSubHeaderContainerStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>>;
-export declare const AccordionTriggerStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IAccordionStyles>>;
-export declare const AccordionTriggerIconContainerStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IAccordionStyles>>;
-export declare const AccordionContentStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, IAccordionStyles>>;
-export declare const LineSeparatorContainerStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>>;
-export declare const AccordionPanelStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>>;
-export declare const AccordionFooterStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>>;
-export declare const AccordionTitleIconWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IAccordionStyles>>;
+export declare const AccordionContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>> & string;
+export declare const AccordionDecorativeBackgroundStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>> & string;
+export declare const AccordionHeaderExternalContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>> & string;
+export declare const AccordionHeaderInternalContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>> & string;
+export declare const AccordionHeaderMainContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>> & string;
+export declare const AccordionHeaderTitleHeadlineStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const AccordionTitleStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IAccordionStyles>> & string;
+export declare const AccordionHeaderRightContentStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>> & string;
+export declare const AccordionSubHeaderContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>> & string;
+export declare const AccordionTriggerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IAccordionStyles>> & string;
+export declare const AccordionTriggerIconContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IAccordionStyles>> & string;
+export declare const AccordionContentStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, IAccordionStyles>> & string;
+export declare const LineSeparatorContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>> & string;
+export declare const AccordionPanelStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>> & string;
+export declare const AccordionFooterStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAccordionStyles>> & string;
+export declare const AccordionTitleIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IAccordionStyles>> & string;

package/dist/esm/components/accordion/accordionControlled.d.ts

@@ -7,7 +7,7 @@ declare const AccordionBoundary: <V extends string | undefined>(props: IAccordio
  * @param {React.PropsWithChildren<IAccordionControlled<V>>} props
  * @returns {JSX.Element}
  */
-declare const AccordionControlled: <V extends unknown>(props: React.PropsWithChildren<IAccordionControlled<V>> & {
+declare const AccordionControlled: <V extends string | unknown>(props: React.PropsWithChildren<IAccordionControlled<V>> & {
     ref?: React.ForwardedRef<HTMLDivElement> | undefined | null;
 }) => ReturnType<typeof AccordionBoundary>;
 export { AccordionControlled };

package/dist/esm/components/accordion/accordionStandAlone.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import type { IAccordionStandAlone } from './types';
 export declare const AccordionStandAlone: React.ForwardRefExoticComponent<IAccordionStandAlone & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/accordion/accordionUnControlled.d.ts

@@ -7,7 +7,7 @@ declare const AccordionUnControlledComponent: <V extends string | undefined>({ c
  * @param {React.PropsWithChildren<IAccordion<V>>} props
  * @returns {JSX.Element}
  */
-declare const AccordionUnControlled: <V extends unknown>(props: React.PropsWithChildren<IAccordion<V>> & {
+declare const AccordionUnControlled: <V extends string | unknown>(props: React.PropsWithChildren<IAccordion<V>> & {
     ref?: React.ForwardedRef<HTMLDivElement> | undefined | null;
 }) => ReturnType<typeof AccordionUnControlledComponent>;
 export { AccordionUnControlled };

package/dist/esm/components/actionBottomSheet/actionBottomSheet.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CommonStyleType } from '../../types';
 import { ActionBottomSheetVariantStylesType } from './types/actionBottomSheetTheme';
 type ActionBottomSheetStylesTypes = {
@@ -7,12 +6,12 @@ type ActionBottomSheetStylesTypes = {
 type IActionBottomSheetStyles = {
     styles?: CommonStyleType;
 };
-export declare const ActionBottomSheetStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IActionBottomSheetStyles & {
-    $height?: string | undefined;
-}>>;
-export declare const ActionBottomSheetHeaderStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IActionBottomSheetStyles>>;
-export declare const ActionBottomSheetIconSyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IActionBottomSheetStyles>>;
-export declare const ActionBottomSheetTitleSyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ActionBottomSheetStylesTypes>>;
-export declare const ActionBottomSheetHeaderContentStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ActionBottomSheetStylesTypes>>;
-export declare const ActionBottomSheetContentStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IActionBottomSheetStyles>>;
+export declare const ActionBottomSheetStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IActionBottomSheetStyles & {
+    $height?: string;
+}>> & string;
+export declare const ActionBottomSheetHeaderStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IActionBottomSheetStyles>> & string;
+export declare const ActionBottomSheetIconSyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IActionBottomSheetStyles>> & string;
+export declare const ActionBottomSheetTitleSyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ActionBottomSheetStylesTypes>> & string;
+export declare const ActionBottomSheetHeaderContentStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ActionBottomSheetStylesTypes>> & string;
+export declare const ActionBottomSheetContentStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IActionBottomSheetStyles>> & string;
 export {};

package/dist/esm/components/actionBottomSheet/actionBottomSheetControlled.d.ts

@@ -18,7 +18,7 @@ declare const ActionBottomSheetControlledComponentBoundary: (props: IActionBotto
  * </ActionBottomSheetControlled>
  *
  */
-declare const ActionBottomSheetControlled: <V extends unknown>(props: React.PropsWithChildren<IActionBottomSheetControlled<V>> & {
+declare const ActionBottomSheetControlled: <V extends string | unknown>(props: React.PropsWithChildren<IActionBottomSheetControlled<V>> & {
     ref?: React.ForwardedRef<HTMLDivElement> | undefined | null;
 }) => ReturnType<typeof ActionBottomSheetControlledComponentBoundary>;
 export { ActionBottomSheetControlled };

package/dist/esm/components/actionBottomSheet/actionBottomSheetUnControlled.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { ActionBottomSheetUnControlledType } from './types';
-export declare const ActionBottomSheetUnControlledComponent: <V extends unknown>({ open, popover, closeIcon, ...props }: ActionBottomSheetUnControlledType<V>, ref: React.ForwardedRef<HTMLDivElement> | undefined | null) => JSX.Element;
+export declare const ActionBottomSheetUnControlledComponent: <V extends string | unknown>({ open, popover, closeIcon, ...props }: ActionBottomSheetUnControlledType<V>, ref: React.ForwardedRef<HTMLDivElement> | undefined | null) => JSX.Element;
 /**
  * @description
  * ActionBottomSheetUnControlled component is a controlled action bottom sheet that use a Popover component to show the content.
  * @param {React.PropsWithChildren<ActionBottomSheetUnControlledType<V>>} props
  * @returns {JSX.Element}
  */
-declare const ActionBottomSheetUnControlled: <V extends unknown>(props: React.PropsWithChildren<ActionBottomSheetUnControlledType<V>> & {
+declare const ActionBottomSheetUnControlled: <V extends string | unknown>(props: React.PropsWithChildren<ActionBottomSheetUnControlledType<V>> & {
     ref?: React.ForwardedRef<HTMLDivElement> | undefined | null;
 }) => ReturnType<typeof ActionBottomSheetUnControlledComponent>;
 export { ActionBottomSheetUnControlled };

package/dist/esm/components/actionBottomSheet/types/actionBottomSheet.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IElementOrIcon } from '../../../components/elementOrIcon';
 import { IPopoverControlled } from '../../../components/popover';
 import { IText } from '../../../components/text';

package/dist/esm/components/avatar/avatar.d.ts

@@ -15,7 +15,7 @@ declare const AvatarBoundary: <S extends string | undefined>(props: IAvatar<S>,
  * size="M"
  * />
  */
-declare const Avatar: <S extends unknown>(props: React.PropsWithChildren<IAvatar<S>> & {
+declare const Avatar: <S extends string | unknown>(props: React.PropsWithChildren<IAvatar<S>> & {
     ref?: React.ForwardedRef<HTMLDivElement | HTMLButtonElement> | undefined | null;
 }) => ReturnType<typeof AvatarBoundary>;
 export { Avatar };

package/dist/esm/components/avatar/avatar.styled.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
 import { AvatarBackgroundColor, AvatarContentStylesType } from './types';
 type AvatarPropStylesType = {
     styles?: AvatarContentStylesType;
     image?: string;
     backgroundColor: AvatarBackgroundColor;
 };
-export declare const AvatarStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, AvatarPropStylesType>>;
-export declare const AvatarLinkStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AvatarPropStylesType>>;
-export declare const AvatarDotStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+export declare const AvatarStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, AvatarPropStylesType>> & string;
+export declare const AvatarLinkStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AvatarPropStylesType>> & string;
+export declare const AvatarDotStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export {};

package/dist/esm/components/avatar/types/avatar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IDot } from '../../../components/dot';
 import { IElementOrIcon } from '../../../components/elementOrIcon';
 import { ILink } from '../../../components/link';

package/dist/esm/components/backToTop/backToTop.styled.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IBackTopButtonStyled } from './types';
-export declare const BackToTopStyled: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IBackTopButtonStyled>>;
+export declare const BackToTopStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IBackTopButtonStyled>> & string;

package/dist/esm/components/backToTop/backToTopControlled.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { IBackToTopControlled } from './types/backToTop';
-declare const BackToTopBoundary: <V extends unknown>(props: IBackToTopControlled<V>, ref: React.ForwardedRef<HTMLButtonElement> | undefined | null) => JSX.Element;
+declare const BackToTopBoundary: <V extends string | unknown>(props: IBackToTopControlled<V>, ref: React.ForwardedRef<HTMLButtonElement> | undefined | null) => JSX.Element;
 /**
  * @description
  * BackToTop component is a component that shows a button to scroll to the top of the page.
  * @param {React.PropsWithChildren<IBackToTopControlled<V>>} props
  * @returns {JSX.Element}
  */
-declare const BackToTopControlled: <V extends unknown>(props: React.PropsWithChildren<IBackToTopControlled<V>> & {
+declare const BackToTopControlled: <V extends string | unknown>(props: React.PropsWithChildren<IBackToTopControlled<V>> & {
     ref?: React.ForwardedRef<HTMLButtonElement> | undefined | null;
 }) => ReturnType<typeof BackToTopBoundary>;
 export { BackToTopControlled };

package/dist/esm/components/backToTop/backToTopUnControlled.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IBackToTopUncontrolled } from './types/backToTop';
-declare const BackToTopUnControlledComponent: <V extends unknown>({ ...props }: IBackToTopUncontrolled<V>, ref: React.ForwardedRef<HTMLButtonElement> | undefined | null) => JSX.Element;
-declare const BackToTopUnControlled: <V extends unknown>(props: React.PropsWithChildren<IBackToTopUncontrolled<V>> & {
+declare const BackToTopUnControlledComponent: <V extends string | unknown>({ ...props }: IBackToTopUncontrolled<V>, ref: React.ForwardedRef<HTMLButtonElement> | undefined | null) => JSX.Element;
+declare const BackToTopUnControlled: <V extends string | unknown>(props: React.PropsWithChildren<IBackToTopUncontrolled<V>> & {
     ref?: React.ForwardedRef<HTMLButtonElement> | undefined | null;
 }) => ReturnType<typeof BackToTopUnControlledComponent>;
 export { BackToTopUnControlled };

package/dist/esm/components/backToTop/types/backToTop.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IIcon } from '../../../components/icon';
 import { CustomTokenTypes } from '../../../types';
 import { BackToTopStatesStyles } from './backToTopTheme';

package/dist/esm/components/badge/badge.styled.d.ts

@@ -0,0 +1,16 @@
+import { DotUseStateType } from './types';
+import { BadgeVariantStylesType } from './types/badgeTheme';
+type BadgeStylesProps = {
+    styles: BadgeVariantStylesType;
+};
+type BadgeDotProps = {
+    dotSize?: string;
+    dotWidthHeight?: DotUseStateType | null;
+    customDotTranslate?: string;
+};
+export declare const BadgeStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, BadgeStylesProps>> & string;
+export declare const SpanContainerIconAndDot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const BadgeDotStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, BadgeDotProps>> & string;
+export declare const BadgeLabelStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, BadgeStylesProps>> & string;
+export declare const BadgeContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

package/dist/esm/components/badge/badge.styled.js

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+import { getStyles } from '../../utils/getStyles/getStyles';
+const getTransformProp = (dotWidth, dotHeight) => {
+    return `translate(${dotWidth * 0.3}px, -${dotHeight * 0.3}px)`;
+};
+export const BadgeStyled = styled.button `
+  display: inline-flex;
+  align-items: center;
+  flex-direction: column;
+  cursor: pointer;
+  ${props => getStyles(props.styles.container)}
+`;
+export const SpanContainerIconAndDot = styled.span `
+  position: relative;
+  display: inline-flex;
+`;
+export const BadgeDotStyled = styled.span `
+  z-index: ${props => props.theme.Z_INDEX?.INTERN_1};
+  position: absolute;
+  top: 0;
+  right: 0;
+  line-height: 0;
+  transform: ${({ customDotTranslate, dotWidthHeight }) => {
+    if (customDotTranslate) {
+        return customDotTranslate;
+    }
+    if (dotWidthHeight) {
+        return getTransformProp(dotWidthHeight.dotWidth, dotWidthHeight.dotHeight);
+    }
+    return undefined;
+}};
+`;
+export const BadgeLabelStyled = styled.span `
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  ${props => getStyles(props.styles.labelContainer)}
+`;
+export const BadgeContainerStyled = styled.div `
+  position: relative;
+`;
+//# sourceMappingURL=badge.styled.js.map

package/dist/esm/components/badge/badge.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.styled.js","sourceRoot":"","sources":["../../../../src/components/badge/badge.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAexD,MAAM,gBAAgB,GAAG,CAAC,QAAgB,EAAE,SAAiB,EAAE,EAAE;IAC/D,OAAO,aAAa,QAAQ,GAAG,GAAG,QAAQ,SAAS,GAAG,GAAG,KAAK,CAAC;AACjE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAkB;;;;;IAKtD,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;CAC7C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAGjD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAe;aAC3C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ;;;;;eAKpC,CAAC,EAAE,kBAAkB,EAAE,cAAc,EAAE,EAAE,EAAE;IACtD,IAAI,kBAAkB,EAAE,CAAC;QACvB,OAAO,kBAAkB,CAAC;IAC5B,CAAC;IACD,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,gBAAgB,CAAC,cAAc,CAAC,QAAQ,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAC7E,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAkB;;;;;IAKzD,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC;CAClD,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE7C,CAAC"}

package/dist/esm/components/badge/badgeControlled.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { IBadgeControlled } from './types/badge';
+/**
+ * @description
+ * Badge component is a component that shows a badge with a number or a dot.
+ * @param {React.PropsWithChildren<IBadgeControlled<V>>} props
+ * @returns {JSX.Element}
+ */
+declare const BadgeControlled: <V = undefined extends string | unknown ? string | undefined : string | unknown, S = undefined extends string | unknown ? string | undefined : string | unknown>(props: React.PropsWithChildren<IBadgeControlled<V, S>> & {
+    ref?: React.ForwardedRef<HTMLDivElement> | undefined | null;
+}) => JSX.Element;
+export { BadgeControlled };

package/dist/esm/components/badge/badgeControlled.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { STYLES_NAME } from '../../constants';
+import { useStyles } from '../../hooks/useStyles/useStyles';
+import { ErrorBoundary, FallbackComponent } from '../../provider/errorBoundary';
+import { BadgeStandAlone } from './badgeStandAlone';
+import { BadgeStatus } from './types';
+const BadgeControlledComponent = React.forwardRef(({ ctv, cts, ...props }, ref) => {
+    const styles = useStyles(STYLES_NAME.BADGE, props.variant, ctv);
+    const iconStyles = styles[props.open ? BadgeStatus.OPEN : BadgeStatus.CLOSE];
+    const sizeStyles = useStyles(STYLES_NAME.BADGE, props.size, cts);
+    return (_jsx(BadgeStandAlone, { ...props, ref: ref, iconStyles: iconStyles, sizeStyles: sizeStyles, styles: styles }));
+});
+BadgeControlledComponent.displayName = 'BadgeControlledComponent';
+const BagdeBoundary = (props, ref) => (_jsx(ErrorBoundary, { fallBackComponent: _jsx(FallbackComponent, { children: _jsx(BadgeStandAlone, { ...props, ref: ref }) }), children: _jsx(BadgeControlledComponent, { ...props, ref: ref }) }));
+/**
+ * @description
+ * Badge component is a component that shows a badge with a number or a dot.
+ * @param {React.PropsWithChildren<IBadgeControlled<V>>} props
+ * @returns {JSX.Element}
+ */
+const BadgeControlled = React.forwardRef(BagdeBoundary);
+export { BadgeControlled };
+//# sourceMappingURL=badgeControlled.js.map

package/dist/esm/components/badge/badgeControlled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badgeControlled.js","sourceRoot":"","sources":["../../../../src/components/badge/badgeControlled.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAItC,MAAM,wBAAwB,GAAG,KAAK,CAAC,UAAU,CAC/C,CAIE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,EAA0B,EAC9C,GAA0D,EAC7C,EAAE;IACf,MAAM,MAAM,GAAG,SAAS,CAA4B,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IAC3F,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC7E,MAAM,UAAU,GAAG,SAAS,CAAwB,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAExF,OAAO,CACL,KAAC,eAAe,OACV,KAAK,EACT,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,wBAAwB,CAAC,WAAW,GAAG,0BAA0B,CAAC;AAElE,MAAM,aAAa,GAAG,CAIpB,KAA6B,EAC7B,GAA0D,EAC7C,EAAE,CAAC,CAChB,KAAC,aAAa,IACZ,iBAAiB,EACf,KAAC,iBAAiB,cAChB,KAAC,eAAe,OAAM,KAAqC,EAAE,GAAG,EAAE,GAAG,GAAI,GACvD,YAGtB,KAAC,wBAAwB,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,GACnC,CACjB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAOtC,CAAC;AAEjB,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/esm/components/badge/badgeStandAlone.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IBadgeStandAlone } from './types';
+export declare const BadgeStandAlone: React.ForwardRefExoticComponent<IBadgeStandAlone & React.RefAttributes<unknown>>;

package/dist/esm/components/badge/badgeStandAlone.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ButtonType } from '../../components/button';
+import { Dot } from '../../components/dot';
+//components
+import { ElementOrIcon } from '../../components/elementOrIcon';
+import { PopoverControlled as Popover } from '../../components/popover';
+import { ScreenReaderOnly } from '../../components/screenReaderOnly';
+import { Text, TextComponentType } from '../../components/text';
+import { useId } from '../../hooks';
+import { POSITIONS } from '../../types';
+import { AriaLiveOptionType } from '../../types/ariaLiveOption';
+import { BadgeContainerStyled, BadgeDotStyled, BadgeLabelStyled, BadgeStyled, SpanContainerIconAndDot, } from './badge.styled';
+const BadgeStandAloneComponent = ({ ...props }, ref) => {
+    const badgeButtonRef = React.useRef(null);
+    const [dotWidthHeight, setDotWidthHeight] = React.useState(null);
+    const id = useId('badget');
+    const dotRef = React.useRef(null);
+    const popoverRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    // catch the reference when the popover appears
+    const callbackRef = React.useCallback(node => {
+        if (node) {
+            popoverRef.current = node;
+        }
+    }, []);
+    React.useEffect(() => {
+        if (dotRef && dotRef.current) {
+            setDotWidthHeight({
+                dotWidth: dotRef.current.offsetWidth,
+                dotHeight: dotRef.current.offsetHeight,
+            });
+        }
+    }, [props.dot?.size]);
+    React.useImperativeHandle(ref, () => ({
+        get badge() {
+            return containerRef.current;
+        },
+        get popover() {
+            return popoverRef.current;
+        },
+    }));
+    const getCustomDotTranslate = () => {
+        if (props.customDotTranslate) {
+            return props.customDotTranslate;
+        }
+        if (props.sizeStyles.customDotNumberTranslate && props.dot?.number !== undefined) {
+            return props.sizeStyles.customDotNumberTranslate;
+        }
+        return props.sizeStyles.customDotTranslate;
+    };
+    const labelStyles = { ...props.styles.label, ...props.sizeStyles.label };
+    return (_jsxs(BadgeContainerStyled, { ref: containerRef, "data-testid": `${props.dataTestId}BadgeContainer`, onBlur: props.onBadgeBlur, children: [_jsxs(BadgeStyled, { ref: badgeButtonRef, "aria-controls": `${id}-popover`, "aria-expanded": props.open, "aria-label": props['aria-label'], "data-testid": `${props.dataTestId}Badge`, styles: props.styles, type: ButtonType.BUTTON, onClick: props.onClick, children: [_jsxs(SpanContainerIconAndDot, { children: [props.hasDot && props.dot && (_jsx(BadgeDotStyled, { "aria-hidden": true, customDotTranslate: getCustomDotTranslate(), dotWidthHeight: dotWidthHeight, children: _jsx(Dot, { ref: dotRef, dataTestId: `${props.dataTestId}Dot`, ...props.dot }) })), _jsx(ElementOrIcon, { color: props.iconStyles?.iconColor, customIconStyles: props.sizeStyles.icon, ...props.icon })] }), props.label?.content && (_jsxs(BadgeLabelStyled, { "aria-hidden": true, styles: props.styles, children: [_jsx(Text, { color: props.iconStyles?.labelFontColor, component: TextComponentType.SPAN, customTypography: labelStyles, dataTestId: `${props.dataTestId}Label`, ...props.label, children: props.label.content }), _jsx(ElementOrIcon, { color: props.iconStyles?.labelIconColor, customIconStyles: props.styles.labelIcon, rotate: props.open ? '180deg' : '0deg', ...props.labelIcon })] })), _jsx(ScreenReaderOnly, { ariaLive: AriaLiveOptionType.POLITE, dataTestId: `${props.dataTestId}ScreenReader`, children: props.ariaLiveText })] }), props.popover.variant && props.popover.content && (_jsx(Popover, { ref: callbackRef, align: POSITIONS.BOTTOM_GAP_RIGHT, dataTestId: `${props.dataTestId}Popover`, id: `${id}-popover`, open: props.open, preventCloseOnClickElements: [badgeButtonRef.current], tabIndex: 0, ...props.popover, children: props.popover?.content }))] }));
+};
+export const BadgeStandAlone = React.forwardRef(BadgeStandAloneComponent);
+//# sourceMappingURL=badgeStandAlone.js.map

package/dist/esm/components/badge/badgeStandAlone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badgeStandAlone.js","sourceRoot":"","sources":["../../../../src/components/badge/badgeStandAlone.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/badge/badgeUnControlled.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { IBadgeUnControlled } from './types/badge';
+/**
+ * @description
+ * Badge component is a component that shows a badge with a number or a dot.
+ * @param {React.PropsWithChildren<IBadgeUnControlled<V>>} props
+ * @returns {JSX.Element}
+ * @example
+ * <BadgeUnControlled />
+ * <BadgeUnControlled variant="primary" />
+ * <BadgeUnControlled variant="primary" size="small" />
+ */
+declare const BadgeUnControlled: <V = undefined extends string | unknown ? string | undefined : string | unknown, S = undefined extends string | unknown ? string | undefined : string | unknown>(props: React.PropsWithChildren<IBadgeUnControlled<V, S>> & {
+    ref?: React.ForwardedRef<HTMLDivElement> | undefined | null;
+}) => JSX.Element;
+export { BadgeUnControlled };

package/dist/esm/components/badge/badgeUnControlled.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { BadgeControlled } from './badgeControlled';
+const BadgeUnControlledComponent = ({ hasDot = true, ...props }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    const onClick = event => {
+        setOpen(!open);
+        if (!open) {
+            props.onClick?.(event);
+        }
+    };
+    const handleOnPopoverCloseInternally = () => {
+        setOpen(false);
+    };
+    const handleOnBadgeBlur = event => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+            setOpen(false);
+        }
+    };
+    return (_jsx(BadgeControlled, { ...props, ref: ref, hasDot: hasDot, open: open, popover: {
+            ...props.popover,
+            onCloseInternally: () => {
+                props.popover.onCloseInternally?.();
+                handleOnPopoverCloseInternally();
+            },
+        }, onBadgeBlur: handleOnBadgeBlur, onClick: onClick }));
+};
+/**
+ * @description
+ * Badge component is a component that shows a badge with a number or a dot.
+ * @param {React.PropsWithChildren<IBadgeUnControlled<V>>} props
+ * @returns {JSX.Element}
+ * @example
+ * <BadgeUnControlled />
+ * <BadgeUnControlled variant="primary" />
+ * <BadgeUnControlled variant="primary" size="small" />
+ */
+const BadgeUnControlled = React.forwardRef(BadgeUnControlledComponent);
+export { BadgeUnControlled };
+//# sourceMappingURL=badgeUnControlled.js.map

package/dist/esm/components/badge/badgeUnControlled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badgeUnControlled.js","sourceRoot":"","sources":["../../../../src/components/badge/badgeUnControlled.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,MAAM,0BAA0B,GAAG,CAIjC,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,KAAK,EAA4B,EACrD,GAA0D,EAC7C,EAAE;IACf,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,OAAO,GAA+C,KAAK,CAAC,EAAE;QAClE,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,KAAK,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,8BAA8B,GAAG,GAAG,EAAE;QAC1C,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAA4C,KAAK,CAAC,EAAE;QACzE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;YACvD,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,eAAe,OACV,KAAK,EACT,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE;YACP,GAAG,KAAK,CAAC,OAAO;YAChB,iBAAiB,EAAE,GAAG,EAAE;gBACtB,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC;gBACpC,8BAA8B,EAAE,CAAC;YACnC,CAAC;SACF,EACD,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,0BAA0B,CAOrD,CAAC;AAEjB,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/esm/components/badge/index.d.ts

@@ -0,0 +1,3 @@
+export type * from './types';
+export { BadgeUnControlled as Badge } from './badgeUnControlled';
+export { BadgeControlled } from './badgeControlled';

package/dist/esm/components/badge/index.js

@@ -0,0 +1,3 @@
+export { BadgeUnControlled as Badge } from './badgeUnControlled';
+export { BadgeControlled } from './badgeControlled';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/badge/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,IAAI,KAAK,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/esm/components/badge/types/badge.d.ts

@@ -0,0 +1,62 @@
+import { IDot } from '../../../components/dot';
+import { IElementOrIcon } from '../../../components/elementOrIcon';
+import { IPopoverControlled } from '../../../components/popover';
+import { IText } from '../../../components/text';
+import { CustomTokenTypes } from '../../../types';
+import { BadgeSizePropsType, BadgeStatusIcon, BadgeVariantStylesType } from './badgeTheme';
+export type BadgeLabelType = Omit<IText<string>, 'children'> & {
+    content?: string;
+};
+export type BadgePopoverType = Omit<IPopoverControlled, 'children'> & {
+    content: JSX.Element;
+};
+export interface IBadgeStandAlone {
+    styles: BadgeVariantStylesType;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    onBadgeBlur: React.FocusEventHandler<HTMLDivElement>;
+    dot?: IDot;
+    hasDot?: boolean;
+    icon: IElementOrIcon;
+    label?: BadgeLabelType;
+    labelIcon?: IElementOrIcon;
+    open: boolean;
+    ['aria-label']: string;
+    ariaLiveText?: string;
+    dataTestId?: string;
+    sizeStyles: BadgeSizePropsType;
+    iconStyles?: BadgeStatusIcon;
+    customDotTranslate?: string;
+    popover: BadgePopoverType;
+}
+type propsBadgeControlledToOmit = 'styles' | 'sizeStyles' | 'iconStyles';
+/**
+ * @description
+ * interface for the badge controlled
+ * @interface IBadgeControlled
+ * @template V
+ * @template S
+ * @property {V} variant - Variant of the badge.
+ * @property {S} size - Size of the badge.
+ */
+export interface IBadgeControlled<V = undefined extends string | unknown ? string | undefined : string | unknown, S = undefined extends string | unknown ? string | undefined : string | unknown> extends Omit<IBadgeStandAlone, propsBadgeControlledToOmit>, Omit<CustomTokenTypes<BadgeVariantStylesType, BadgeSizePropsType>, 'extraCt'> {
+    variant: V;
+    size: S;
+}
+type propsBadgeUnControlledToOmit = 'open' | 'onClick' | 'onPopoverCloseInternally' | 'onBadgeBlur';
+/**
+ * @description
+ * interface for the badge uncontrolled
+ * @interface IBadgeUnControlled
+ * @template V
+ * @template S
+ * @property {V} variant - Variant of the badge.
+ * @property {S} size - Size of the badge.
+ */
+export interface IBadgeUnControlled<V = undefined extends string | unknown ? string | undefined : string | unknown, S = undefined extends string | unknown ? string | undefined : string | unknown> extends Omit<IBadgeControlled<V, S>, propsBadgeUnControlledToOmit> {
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export type DotUseStateType = {
+    dotWidth: number;
+    dotHeight: number;
+};
+export {};

package/dist/esm/components/badge/types/badge.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=badge.js.map

package/dist/esm/components/badge/types/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../../src/components/badge/types/badge.ts"],"names":[],"mappings":""}

package/dist/esm/components/badge/types/badgeTheme.d.ts

@@ -0,0 +1,36 @@
+import { CommonStyleType, IconTypes, TypographyTypes } from '../../../types';
+import { BadgeStatus } from './status';
+export type BadgeStatusIcon = {
+    iconColor?: string;
+    labelIconColor?: string;
+    labelFontColor?: string;
+};
+export type BadgeVariantStylesType = {
+    container?: CommonStyleType;
+    labelContainer?: CommonStyleType;
+    label?: TypographyTypes;
+    labelIcon?: IconTypes;
+    [BadgeStatus.OPEN]?: BadgeStatusIcon;
+    [BadgeStatus.CLOSE]?: BadgeStatusIcon;
+};
+export type BadgeSizePropsType = {
+    icon?: IconTypes;
+    label?: TypographyTypes;
+    customDotTranslate?: string;
+    customDotNumberTranslate?: string;
+};
+export type BadgeStylesVariantType<P extends string | number | symbol> = {
+    [key in P]?: BadgeVariantStylesType;
+};
+export type BadgeStylesSizeType<S extends string | number | symbol> = {
+    [key in S]?: BadgeSizePropsType;
+};
+/**
+ * @description
+ * Badge styles type
+ * @template P
+ * @template S
+ * @property {P} [key] - Variant of the badge.
+ * @property {S} [key] - Size of the badge.
+ */
+export type BadgeStylesType<P extends string | number | symbol, S extends string | number | symbol> = BadgeStylesVariantType<P> & BadgeStylesSizeType<S>;

package/dist/esm/components/badge/types/badgeTheme.js

@@ -0,0 +1,2 @@
+import { BadgeStatus } from './status';
+//# sourceMappingURL=badgeTheme.js.map