welcome-ui 7.1.1 → 7.3.0

package/dist/types/components/Accordion/styles.d.ts

@@ -1,6 +1,6 @@
 import * as Ariakit from '@ariakit/react';
-export declare const Accordion: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const Accordion: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const Icon: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
 export declare const Disclosure: import('styled-components').StyledComponent<(props: Ariakit.DisclosureProps) => import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>, import('@xstyled/system').Theme, {}, never>;
 export declare const Content: import('styled-components').StyledComponent<({ unmountOnHide, ...props }: Ariakit.DisclosureContentProps) => import("react/jsx-runtime").JSX.Element | null, import('@xstyled/system').Theme, {}, never>;
-export declare const ContentChild: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const ContentChild: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/dist/types/components/Alert/index.d.ts

@@ -1,8 +1,7 @@
 import { default as React } from 'react';
+import { Size, Variant } from './theme';
 import { ButtonProps } from '../Button';
 import { CreateWuiProps } from '../System';
-type Size = 'sm' | 'md';
-type Variant = 'danger' | 'success' | 'warning' | 'info' | 'default' | 'beige';
 export interface AlertOptions {
     closeButtonDataTestId?: string;
     cta?: JSX.Element;
@@ -18,7 +17,6 @@ export interface AlertOptions {
 export type AlertProps = CreateWuiProps<'div', AlertOptions>;
 export declare const Alert: import('../System').CreateWuiComponent<"div", AlertProps> & {
     Title: React.FC<import('./Title').AlertTitleProps>;
-    Button: import('../System').CreateWuiComponent<"button", Omit<ButtonProps, "size" | "variant">>;
-    SecondaryButton: import('../System').CreateWuiComponent<"button", Omit<ButtonProps, "size" | "variant">>;
+    Button: import('../System').CreateWuiComponent<"button", Omit<ButtonProps, "size">>;
+    SecondaryButton: import('../System').CreateWuiComponent<"button", Omit<ButtonProps, "size">>;
 };
-export {};

package/dist/types/components/Alert/theme.d.ts

@@ -1,15 +1,15 @@
 import { CSSObject } from '@xstyled/styled-components';
 import { ThemeValues } from '../../theme';
-type State = 'default' | 'danger' | 'warning' | 'info' | 'success' | 'beige';
-type Sizes = 'sm' | 'md';
+export type Variant = 'default' | 'danger' | 'warning' | 'info' | 'success' | 'beige' | 'ai';
+export type Size = 'sm' | 'md';
 type AttributesState = CSSObject;
 export type ThemeAlerts = {
     default: CSSObject;
-    sizes: Record<Sizes, CSSObject>;
+    sizes: Record<Size, CSSObject>;
     title: {
         default: CSSObject;
-        sizes: Record<Sizes, CSSObject>;
+        sizes: Record<Size, CSSObject>;
     };
-} & Record<State, AttributesState>;
+} & Record<Variant, AttributesState>;
 export declare const getAlerts: (theme: ThemeValues) => ThemeAlerts;
 export {};

package/dist/types/components/Avatar/index.d.ts

@@ -1,11 +1,9 @@
 import { default as React } from 'react';
-import { Theme } from '@xstyled/styled-components';
+import { AvatarColors, Size } from './theme';
 import { ShapeOptions } from '../Shape';
 import { CreateWuiProps } from '../System';
-type SubColor = Theme['colors'];
-type Size = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export interface AvatarOptions {
-    color?: string | SubColor;
+    color?: AvatarColors;
     getInitials?: (name: string) => string;
     name: string;
     size?: Size;
@@ -13,4 +11,3 @@ export interface AvatarOptions {
 }
 export type AvatarProps = CreateWuiProps<'div', AvatarOptions & ShapeOptions>;
 export declare const Avatar: React.FC<AvatarProps>;
-export {};

package/dist/types/components/Avatar/theme.d.ts

@@ -1,9 +1,10 @@
 import { CSSObject } from '@xstyled/styled-components';
-import { ThemeValues } from '../../theme';
-type Size = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+import { ThemeColorTokens, ThemeValues } from '../../theme';
+import { LiteralUnion } from '../../utils';
+export type Size = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type AvatarColors = LiteralUnion<ThemeColorTokens>;
 export type ThemeAvatars = {
     sizes: Record<Size, string>;
     text: CSSObject;
 };
 export declare const getAvatars: (theme: ThemeValues) => ThemeAvatars;
-export {};

package/dist/types/components/Avatar/utils.d.ts

@@ -1,3 +1,3 @@
-import { Theme } from '@xstyled/styled-components';
-export declare function getColorByLength(colors: Theme['colors'], text?: string): string;
+import { ThemeColorTokens } from '../../theme';
+export declare function getColorByLength(colors: ThemeColorTokens, text?: string): string;
 export declare function getInitials(name?: string): string;

package/dist/types/components/Badge/styles.d.ts

@@ -3,6 +3,6 @@ import { WuiProps } from '../System';
 export type StyledBadgeProps = Pick<BadgeOptions, 'disabled' | 'size' | 'variant'> & {
     length: number;
 };
-export declare const Badge: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, Pick<BadgeOptions, "size" | "disabled" | "variant"> & {
+export declare const Badge: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, Pick<BadgeOptions, "disabled" | "size" | "variant"> & {
     length: number;
 } & WuiProps, never>;

package/dist/types/components/Breadcrumb/index.d.ts

@@ -1,11 +1,10 @@
 import { default as React } from 'react';
-import { Theme } from '@xstyled/styled-components';
 import { CreateWuiProps } from '../System';
-type Colors = Theme['colors'];
+import { ThemeColorTokens } from '../../theme';
 export interface BreadcrumbOptions {
     children: React.ReactNode | React.ReactNode[];
     /** color from theme, add for scroll gradient on mobile */
-    gradientBackground?: Colors;
+    gradientBackground?: ThemeColorTokens;
     /** set clickable or not the last child */
     lastChildNotClickable?: boolean;
     separator?: string | React.ReactNode;
@@ -15,4 +14,3 @@ export declare const BreadcrumbComponent: import('../System').CreateWuiComponent
 export declare const Breadcrumb: import('../System').CreateWuiComponent<"div", BreadcrumbProps> & {
     Item: import('../System').CreateWuiComponent<"a", import('./Item').ItemProps>;
 };
-export {};

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

@@ -1,14 +1,17 @@
 import { default as React } from 'react';
+import { Size, Variant } from './theme';
 import { CreateWuiProps } from '../System';
-type Shape = 'circle' | 'square';
-type Size = 'xs' | 'sm' | 'md' | 'lg';
-type Variant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'disabled';
 export interface ButtonOptions {
-    /** Danger button with 3 variants: primary / tertiary / ghost */
+    /** AI button with 3 variants: primary / tertiary / ghost */
+    ai?: boolean;
+    /**
+     * Danger button with 3 variants: primary / tertiary / ghost
+     * Take precedence hover the AI prop
+     */
     danger?: boolean;
     disabled?: boolean;
     isLoading?: boolean;
-    shape?: Shape;
+    shape?: 'circle' | 'square';
     size?: Size;
     variant?: Variant;
 }
@@ -18,4 +21,3 @@ export type ButtonProps = CreateWuiProps<'button', ButtonOptions>;
  */
 export declare const Button: import('../System').CreateWuiComponent<"button", ButtonProps>;
 export declare const StyledButton: import('styled-components').StyledComponent<(props: import('@ariakit/react').ButtonProps) => import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>, import('@xstyled/system').Theme, ButtonOptions, never>;
-export {};

package/dist/types/components/Button/theme.d.ts

@@ -3,10 +3,10 @@ import { ThemeFocus } from '../../theme/focus';
 import { ThemeValues } from '../../theme';
 type CommonAttributesButton = CSSObject;
 type SizeAttributesButton = CSSObject;
-type Variant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
-type Size = 'xs' | 'sm' | 'md' | 'lg';
+export type Variant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
 type Icon = 'only' | 'default';
-export type ThemeButtons = Record<Variant | 'danger', CommonAttributesButton> & Record<'hover', Record<Variant | 'danger', CommonAttributesButton>> & Record<'focus', Record<Variant | 'danger', unknown>> & Record<'active', Record<Variant | 'danger', CommonAttributesButton>> & Record<'disabled', CommonAttributesButton & {
+export type ThemeButtons = Record<Variant | 'danger' | 'ai', CommonAttributesButton> & Record<'hover', Record<Variant | 'danger' | 'ai', CommonAttributesButton>> & Record<'focus', Record<Variant | 'danger' | 'ai', unknown>> & Record<'active', Record<Variant | 'danger' | 'ai', CommonAttributesButton>> & Record<'disabled', CommonAttributesButton & {
     '&:focus': ReturnType<ThemeFocus>;
 }> & Record<'sizes', Record<Size, SizeAttributesButton>> & Record<'icon', Record<Icon, Record<Size, string>>>;
 export declare const getButtons: (theme: ThemeValues) => ThemeButtons;

package/dist/types/components/ButtonGroup/styles.d.ts

@@ -1 +1 @@
-export declare const ButtonGroup: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
+export declare const ButtonGroup: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;

package/dist/types/components/DateTimePickerCommon/CustomInput.d.ts

@@ -14,4 +14,4 @@ export interface CustomInputOptions {
     value?: string | null;
 }
 export type CustomInputProps = Omit<React.ComponentProps<'input'>, keyof CustomInputOptions> & CustomInputOptions;
-export declare const CustomInput: React.ForwardRefExoticComponent<Pick<CustomInputProps, "form" | "slot" | "style" | "title" | "pattern" | "type" | "name" | "hidden" | "color" | "multiple" | "disabled" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "width" | "height" | "max" | "min" | "crossOrigin" | "alt" | "list" | "src" | "autoComplete" | "accept" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "readOnly" | "required" | "step" | keyof CustomInputOptions> & React.RefAttributes<HTMLInputElement>>;
+export declare const CustomInput: React.ForwardRefExoticComponent<Omit<CustomInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/types/components/DateTimePickerCommon/styles.d.ts

@@ -4,6 +4,6 @@ export declare const StyledTimePicker: import('styled-components').StyledCompone
 export declare const CustomInput: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     focused: Focused;
 }, never>;
-export declare const CustomHeader: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
-export declare const Selects: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const CustomHeader: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Selects: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const fixAriaMessageStyle: import('styled-components').FlattenSimpleInterpolation;

package/dist/types/components/Drawer/styles.d.ts

@@ -1,7 +1,7 @@
 import { DrawerOptions } from '.';
 import * as Ariakit from '@ariakit/react';
 export declare const Drawer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & Pick<DrawerOptions, "size" | "placement">, never>;
-export declare const Backdrop: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {
+export declare const Backdrop: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     hideOnInteractOutside: Ariakit.DialogProps["hideOnInteractOutside"];
 }, never>;
 export declare const Title: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;

package/dist/types/components/DropdownMenu/Item.styled.d.ts

@@ -1 +1 @@
-export declare const Item: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const Item: import('styled-components').StyledComponent<"button", import('@xstyled/system').Theme, {}, never>;

package/dist/types/components/DropdownMenu/Separator.styled.d.ts

@@ -1 +1 @@
-export declare const Separator: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const Separator: import('styled-components').StyledComponent<"hr", import('@xstyled/system').Theme, {}, never>;

package/dist/types/components/Field/styles.d.ts

@@ -8,8 +8,8 @@ type StyledFieldProps = {
     withHintText?: boolean;
 };
 export declare const Field: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, StyledFieldProps, never>;
-export declare const Label: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
-export declare const LabelWithHint: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const Label: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const LabelWithHint: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 type IconWrapperProps = {
     iconPlacement: 'left' | 'right';
     size?: DefaultFieldIconSize;

package/dist/types/components/FileDrop/styles.d.ts

@@ -4,6 +4,6 @@ export interface StyledFileDropProps {
     isDragReject?: boolean;
 }
 export declare const FileDrop: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, StyledFileDropProps, never>;
-export declare const FilePreview: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const FilePreview: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const ImagePreview: import('styled-components').StyledComponent<"img", import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
-export declare const Actions: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const Actions: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/dist/types/components/Hint/index.d.ts

@@ -5,6 +5,6 @@ export interface HintOptions {
 }
 export type HintProps = CreateWuiProps<'div', HintOptions>;
 export declare const Hint: import('../System').CreateWuiComponent<"div", HintProps>;
-export declare const StyledHint: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {
+export declare const StyledHint: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     variant: HintOptions["variant"];
 }, never>;

package/dist/types/components/Hint/styles.d.ts

@@ -1,4 +1,4 @@
 import { HintOptions } from '.';
-export declare const Hint: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {
+export declare const Hint: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
     variant: HintOptions["variant"];
 }, never>;

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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { Size } from './theme';
 import { CreateWuiProps } from '../System';
 import * as S from './styles';
 type IconContent = {
@@ -9,7 +10,6 @@ type IconContent = {
     viewBox?: string;
     width?: number;
 };
-type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | string;
 export interface IconOptions {
     content?: IconContent;
     name?: string;

package/dist/types/components/Icon/theme.d.ts

@@ -1,10 +1,7 @@
 import { ThemeValues } from '../../theme';
-export type ThemeIcons = {
-    lg: string;
-    md: string;
-    sm: string;
-    xl: string;
-    xs: string;
-    xxl: string;
-};
+import { LiteralUnion } from '../../utils';
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type Size = LiteralUnion<IconSize, number | string>;
+export type ThemeIcons = Record<IconSize, string>;
 export declare const getIcons: ({ toRem }: ThemeValues) => ThemeIcons;
+export {};

package/dist/types/components/IconsFont/index.d.ts

@@ -1,7 +1,7 @@
 import { StyledIconProps } from './styles';
 import { IconProps } from '../Icon';
 export type IconsFontProps = StyledIconProps;
-export declare const IconsFontStyled: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, StyledIconProps, never>;
+export declare const IconsFontStyled: import('styled-components').StyledComponent<"i", import('@xstyled/system').Theme, StyledIconProps, never>;
 type FormatIconJSX<S extends string> = S extends `${infer F}${infer R}` ? F extends '_' ? FormatIconJSX<Capitalize<R>> : `${F}${FormatIconJSX<R>}` : '';
 declare const unicodeMap: {
     actions: string;

package/dist/types/components/IconsFont/styles.d.ts

@@ -4,4 +4,4 @@ export type StyledIconProps = {
     name: keyof typeof unicodeMap;
     size: IconOptions['size'];
 };
-export declare const Icon: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, StyledIconProps, never>;
+export declare const Icon: import('styled-components').StyledComponent<"i", import('@xstyled/system').Theme, StyledIconProps, never>;

package/dist/types/components/InputText/styles.d.ts

@@ -1,3 +1,3 @@
 import { InputTextOptions } from './index';
-export declare const InputText: import('styled-components').StyledComponent<"input", import('@xstyled/system').Theme, Pick<InputTextOptions, "transparent" | "size" | "variant" | "iconPlacement" | "isClearable">, never>;
-export declare const Wrapper: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const InputText: import('styled-components').StyledComponent<"input", import('@xstyled/system').Theme, Pick<InputTextOptions, "size" | "transparent" | "iconPlacement" | "isClearable" | "variant">, never>;
+export declare const Wrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/dist/types/components/Label/styles.d.ts

@@ -2,4 +2,4 @@ export declare const Label: import('styled-components').StyledComponent<"label",
     required: boolean;
 }, never>;
 export declare const requiredStyles: import('styled-components').FlattenSimpleInterpolation;
-export declare const Disabled: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const Disabled: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/dist/types/components/Loader/index.d.ts

@@ -1,6 +1,6 @@
 import { CSSObject } from '@xstyled/styled-components';
-import { CreateWuiProps, ExtraSize } from '../System';
-type Size = 'xs' | 'sm' | 'md' | 'lg' | ExtraSize;
+import { Size } from './theme';
+import { CreateWuiProps } from '../System';
 export interface LoaderOptions {
     color?: CSSObject['color'];
     /** Predefined size xs, sm, md, lg or custom size */
@@ -8,4 +8,3 @@ export interface LoaderOptions {
 }
 export type LoaderProps = CreateWuiProps<'div', LoaderOptions>;
 export declare const Loader: import('../System').CreateWuiComponent<"div", LoaderProps>;
-export {};

package/dist/types/components/Loader/theme.d.ts

@@ -1,8 +1,7 @@
 import { ThemeValues } from '../../theme';
-export type ThemeLoaders = {
-    lg: string;
-    md: string;
-    sm: string;
-    xs: string;
-};
+import { LiteralUnion } from '../../utils';
+type LoaderSize = 'xs' | 'sm' | 'md' | 'lg';
+export type Size = LiteralUnion<LoaderSize, string | number>;
+export type ThemeLoaders = Record<LoaderSize, string>;
 export declare const getLoaders: ({ toRem }: ThemeValues) => ThemeLoaders;
+export {};

package/dist/types/components/Logo/styles.d.ts

@@ -1 +1 @@
-export declare const Svg: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
+export declare const Svg: import('styled-components').StyledComponent<"svg", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;

package/dist/types/components/Modal/Assets/Iframe.d.ts

@@ -1,5 +1,6 @@
+import { default as React } from 'react';
 type IframeProps = {
     children: JSX.Element;
 };
-export declare const Iframe: ({ children }: IframeProps) => JSX.Element;
+export declare const Iframe: ({ children }: IframeProps) => React.JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-export declare const Assets: string & import('styled-components').StyledComponentBase<string, import('@xstyled/system').Theme, {}, never> & import('hoist-non-react-statics').NonReactStatics<never, {}> & {
+export declare const Assets: string & import('styled-components').StyledComponentBase<"div", import('@xstyled/system').Theme, {}, never> & import('hoist-non-react-statics').NonReactStatics<never, {}> & {
     AssetWithTitle: import('../../System').CreateWuiComponent<"div", {
         children: React.ReactNode;
         customContent?: JSX.Element | string;
@@ -9,9 +9,9 @@ export declare const Assets: string & import('styled-components').StyledComponen
     Content: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
     Iframe: ({ children }: {
         children: JSX.Element;
-    }) => JSX.Element;
+    }) => import("react").JSX.Element;
     Title: import('styled-components').StyledComponent<import('../../System').CreateWuiComponent<"p", import('../../Text').TextProps>, import('@xstyled/system').Theme, {
         lines: 2;
         variant: "h4";
-    }, "lines" | "variant">;
+    }, "variant" | "lines">;
 };

package/dist/types/components/Modal/Assets/styles.d.ts

@@ -1,7 +1,7 @@
-export declare const Iframe: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const Iframe: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const Content: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
-export declare const Dialog: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const Dialog: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const Title: import('styled-components').StyledComponent<import('../../System').CreateWuiComponent<"p", import('../../Text').TextProps>, import('@xstyled/system').Theme, {
     lines: 2;
     variant: "h4";
-}, "lines" | "variant">;
+}, "variant" | "lines">;

package/dist/types/components/Modal/Close.d.ts

@@ -1,6 +1,7 @@
+import { default as React } from 'react';
 import { CloseButtonProps } from '../CloseButton';
 type CloseProps = CloseButtonProps & {
     isOnHeader?: boolean;
 };
-export declare const Close: ({ isOnHeader, ...rest }: CloseProps) => JSX.Element;
+export declare const Close: ({ isOnHeader, ...rest }: CloseProps) => React.JSX.Element;
 export {};

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

@@ -1,9 +1,9 @@
 import { default as React } from 'react';
+import { Size } from './theme';
 import { As, CreateWuiProps } from '../System';
 import { BoxProps } from '../Box';
 import { ShapeProps } from '../Shape';
 import * as Ariakit from '@ariakit/react';
-type Size = 'xs' | 'sm' | 'md' | 'lg' | 'auto';
 export interface ModalOptions extends Omit<Ariakit.DialogOptions<'div'>, 'as'> {
     ariaLabel: string;
     children: React.ReactElement;
@@ -33,7 +33,7 @@ export declare const Modal: import('../System').CreateWuiComponent<"div", ModalP
     Footer: import('../System').CreateWuiComponent<"div", import('./Footer').FooterProps>;
     Cover: React.FC<ShapeProps>;
 };
-export declare const AssetModal: string & import('styled-components').StyledComponentBase<string, import('@xstyled/system').Theme, {}, never> & import('hoist-non-react-statics').NonReactStatics<never, {}> & {
+export declare const AssetModal: string & import('styled-components').StyledComponentBase<"div", import('@xstyled/system').Theme, {}, never> & import('hoist-non-react-statics').NonReactStatics<never, {}> & {
     AssetWithTitle: import('../System').CreateWuiComponent<"div", {
         children: React.ReactNode;
         customContent?: JSX.Element | string;
@@ -44,10 +44,10 @@ export declare const AssetModal: string & import('styled-components').StyledComp
     Content: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
     Iframe: ({ children }: {
         children: JSX.Element;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
     Title: import('styled-components').StyledComponent<import('../System').CreateWuiComponent<"p", import('../Text').TextProps>, import('@xstyled/system').Theme, {
         lines: 2;
         variant: "h4";
-    }, "lines" | "variant">;
+    }, "variant" | "lines">;
 };
 export {};

package/dist/types/components/Modal/theme.d.ts

@@ -1,6 +1,6 @@
 import { CSSObject } from '@xstyled/styled-components';
 import { ThemeValues } from '../../theme';
-type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'auto';
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'auto';
 export type ThemeModals = {
     backdrop: CSSObject;
     body: CSSObject;
@@ -9,9 +9,8 @@ export type ThemeModals = {
     footer: CSSObject;
     gutter: string;
     header: CSSObject;
-    sizes: Record<Sizes, {
+    sizes: Record<Size, {
         width?: string;
     }>;
 };
 export declare const getModals: (theme: ThemeValues) => ThemeModals;
-export {};

package/dist/types/components/Pagination/styles.d.ts

@@ -1,7 +1,7 @@
-export declare const Pagination: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
-export declare const List: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const Pagination: import('styled-components').StyledComponent<"nav", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
+export declare const List: import('styled-components').StyledComponent<"ul", import('@xstyled/system').Theme, {}, never>;
 export declare const Item: import('styled-components').StyledComponent<"li", import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
-export declare const Dots: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const Dots: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
 export declare const abstractLinkStyle: import('styled-components').FlattenInterpolation<import('styled-components').ThemeProps<import('@xstyled/system').Theme>>;
 export declare const ArrowLink: import('styled-components').StyledComponent<"a", import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
 export declare const PageLink: import('styled-components').StyledComponent<"a", import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;

package/dist/types/components/Popover/Arrow.d.ts

@@ -1,6 +1,7 @@
+import { default as React } from 'react';
 import { UsePopover } from './usePopover';
 type ArrowProps = {
     store: UsePopover;
 };
-export declare const Arrow: ({ store }: ArrowProps) => JSX.Element;
+export declare const Arrow: ({ store }: ArrowProps) => React.JSX.Element;
 export {};

package/dist/types/components/Popover/Content.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { UsePopover, UsePopoverHover } from './usePopover';
 import { PopoverProps } from './Popover';
 export interface ContentOptions {
@@ -6,4 +7,4 @@ export interface ContentOptions {
     onClose?: () => void;
     store: UsePopover | UsePopoverHover;
 }
-export declare const Content: ({ children, onClose, store }: ContentOptions) => JSX.Element;
+export declare const Content: ({ children, onClose, store }: ContentOptions) => React.JSX.Element;

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

@@ -8,7 +8,7 @@ export interface PopoverOptions extends Ariakit.PopoverProps {
 }
 export type PopoverProps = CreateWuiProps<'div', PopoverOptions>;
 export declare const Popover: import('../System').CreateWuiComponent<"div", PopoverProps> & {
-    Content: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
-    Title: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+    Content: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+    Title: import('styled-components').StyledComponent<"h6", import('@xstyled/system').Theme, {}, never>;
     Trigger: import('../System').CreateWuiComponent<"button", import('./Trigger').PopoverTriggerProps>;
 };

package/dist/types/components/Popover/PopoverHover.d.ts

@@ -8,7 +8,7 @@ export interface PopoverHoverOptions extends Ariakit.HovercardProps {
 }
 export type PopoverHoverProps = CreateWuiProps<'div', PopoverHoverOptions>;
 export declare const PopoverHover: import('../System').CreateWuiComponent<"div", PopoverHoverProps> & {
-    Content: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
-    Title: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+    Content: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+    Title: import('styled-components').StyledComponent<"h6", import('@xstyled/system').Theme, {}, never>;
     Trigger: import('../System').CreateWuiComponent<"button", import('./Trigger').PopoverHoverTriggerProps>;
 };

package/dist/types/components/Popover/styles.d.ts

@@ -3,8 +3,8 @@ export declare const Arrow: import('styled-components').StyledComponent<(props:
 export declare const ArrowItem: import('styled-components').StyledComponent<"svg", import('@xstyled/system').Theme, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
     $transform: string;
 }, never>;
-export declare const Content: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
-export declare const Title: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const Content: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Title: import('styled-components').StyledComponent<"h6", import('@xstyled/system').Theme, {}, never>;
 export declare const Popover: import('styled-components').StyledComponent<(props: Ariakit.PopoverProps<"div">) => import("react/jsx-runtime").JSX.Element | null, import('@xstyled/system').Theme, {
     $withCloseButton: boolean;
 }, never>;

package/dist/types/components/Radio/styles.d.ts

@@ -2,6 +2,6 @@ import { RadioProps } from './index';
 import * as Ariakit from '@ariakit/react';
 export declare const Radio: import('styled-components').StyledComponent<(props: Ariakit.RadioProps) => import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>, import('@xstyled/system').Theme, RadioProps, never>;
 export declare const Label: import('styled-components').StyledComponent<import('../System').CreateWuiComponent<"label", import('../Label').LabelProps>, import('@xstyled/system').Theme, {}, never>;
-export declare const Input: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const Input: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export declare const Wrapper: import('styled-components').StyledComponent<import('../System').CreateWuiComponent<"div", import('../Box').BoxProps>, import('@xstyled/system').Theme, {}, never>;
-export declare const LabelWithHint: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const LabelWithHint: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;

package/dist/types/components/RadioTab/styles.d.ts

@@ -1,7 +1,7 @@
 import { WuiProps } from '../System';
 import * as Ariakit from '@ariakit/react';
 export declare const Radio: import('styled-components').StyledComponent<(props: Ariakit.RadioProps) => import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>, import('@xstyled/system').Theme, {}, never>;
-export declare const Label: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {
+export declare const Label: import('styled-components').StyledComponent<"label", import('@xstyled/system').Theme, {
     checked?: boolean;
     disabled?: boolean;
     disabledIcon?: React.ReactElement;
@@ -14,5 +14,5 @@ export declare const Label: import('styled-components').StyledComponent<string,
     transparent?: boolean;
     variant: "danger" | "success" | "warning";
 }>, never>;
-export declare const Input: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
-export declare const Content: import('styled-components').StyledComponent<string, import('@xstyled/system').Theme, {}, never>;
+export declare const Input: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Content: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;