@rarui/components 1.28.0 → 1.28.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { AvatarProps, BadgeProps, DividerProps, IconProps, StepperProps, TextProps, TitleProps, TooltipProps, ProgressProps as ProgressProps$1, StatusProps, ButtonProps, CheckboxProps, ChipProps, DropdownProps, IconButtonProps, BreadcrumbProps, AccordionProps } from '@rarui/typings';
 import { IconName } from '@rarui/icons/dist/html/types';
+import { BreadcrumbProps, AccordionProps } from '@rarui/typings';
 
 /**
  * @license
@@ -1044,208 +1044,6 @@ declare class LitElement extends ReactiveElement {
     protected render(): unknown;
 }
 
-type AriaInvalid = "false" | "true" | "grammar" | "spelling" | null;
-
-/**
- * Utility types for Web Components property handling in Rarui Design System
- *
- * These types help convert React-style camelCase properties to web component
- * kebab-case attributes while maintaining type safety.
- */
-/**
- * Converts a camelCase string to kebab-case
- *
- * @example
- * CamelToKebab<"maxWidth"> // "max-width"
- * CamelToKebab<"portalId"> // "portal-id"
- * CamelToKebab<"position"> // "position"
- */
-type CamelToKebab<T extends string> = T extends `${infer Start}${infer Rest}` ? Rest extends `${infer First}${infer End}` ? First extends Uppercase<First> ? `${Lowercase<Start>}-${CamelToKebab<`${Lowercase<First>}${End}`>}` : `${Lowercase<Start>}${CamelToKebab<Rest>}` : Lowercase<T> : T;
-type CamelToKebabKeys<T> = {
-    [K in keyof T as CamelToKebab<string & K>]: T[K];
-};
-/**
- * Common React properties that should be excluded from web component types
- */
-type CommonReactExclusions = "children" | "className" | "style" | "ref" | "key";
-type WebComponentProperties<TReactProps, TExclude extends keyof TReactProps = never> = CamelToKebabKeys<Omit<Partial<TReactProps>, CommonReactExclusions | TExclude>>;
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "rarui-avatar": RaruiAvatar;
-    }
-}
-/**
- * ## Rarui Avatar
- * ---
- * The Avatar component is normally used to display circular photos of the user's profile.
- *
- See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/avatar) for more details.
- */
-type AvatarManifestProperties = Pick<AvatarProps, "size">;
-type AvatarProperties = WebComponentProperties<AvatarManifestProperties>;
-
-declare const RaruiAvatar_base: (new (...args: any[]) => {
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
-}) & typeof LitElement;
-declare class RaruiAvatar extends RaruiAvatar_base {
-    size?: AvatarProperties["size"];
-    static styles: CSSResult;
-    render(): TemplateResult<1>;
-    private handleSlotChange;
-    private handleImageError;
-    private handleImageLoad;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "rarui-badge": RaruiBagde;
-    }
-}
-/**
- * ## Rarui Badge
- * ---
- * The Badge components are only used to transmit dynamic information, such as a connection or status.
- *
- See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/badge) for more details.
- */
-type BadgeManifestProperties = BadgeProps;
-type BadgeProperties = WebComponentProperties<BadgeManifestProperties>;
-
-declare const RaruiBagde_base: (new (...args: any[]) => {
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
-}) & typeof LitElement;
-declare class RaruiBagde extends RaruiBagde_base {
-    variant?: BadgeProperties["variant"];
-    size?: BadgeProperties["size"];
-    appearance?: BadgeProperties["appearance"];
-    static styles: CSSResult;
-    render(): TemplateResult<1>;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "rarui-divider": RaruiDivider;
-    }
-}
-/**
- * ## Rarui Divider
- * ---
- * A Divider is a thin line used to separate or group content in lists and layouts.
- *
- See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/divider) for more details.
- */
-type DividerManifestProperties = DividerProps;
-type DividerProperties = WebComponentProperties<DividerManifestProperties>;
-
-declare const RaruiDivider_base: (new (...args: any[]) => {
-    cssProps: Record<string, any>;
-    sprinkleAttrs: Record<string, any>;
-}) & (new (...args: any[]) => {
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
-}) & typeof LitElement;
-declare class RaruiDivider extends RaruiDivider_base {
-    sprinkleAttrs: Record<string, string>;
-    direction?: DividerProperties["direction"];
-    type?: DividerProperties["type"];
-    thickness?: DividerProperties["thickness"];
-    color?: DividerProperties["color"];
-    size?: DividerProperties["size"];
-    private get _isPercentageSize();
-    static styles: CSSResult;
-    updated(changedProperties: PropertyValues): void;
-    connectedCallback(): void;
-    private _updateHostWidth;
-    render(): TemplateResult<1>;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "rarui-icon": RaruiIcon;
-    }
-}
-/**
- * ## Rarui Icon
- * ---
- * Iconography used in the system based on Google's Material Design.
- *
- See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/icon) for more details.
- */
-type Sizes = "small" | "medium" | "large";
-type IconManifestProperties = IconProps & {
-    /**
-     * Name of the icon to be rendered (must be in the @rarui/icons package).
-     */
-    name: IconName;
-    /**
-     * Icon size, can be 'small' |'medium' |'large' or a number.
-     * @default medium
-     */
-    size?: Sizes | number;
-};
-type IconProperties = WebComponentProperties<IconManifestProperties>;
-
-declare const RaruiIcon_base: (new (...args: any[]) => {
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
-}) & (new (...args: any[]) => {
-    cssProps: Record<string, any>;
-    sprinkleAttrs: Record<string, any>;
-}) & typeof LitElement;
-declare class RaruiIcon extends RaruiIcon_base {
-    sprinkleAttrs: Record<string, string>;
-    name: IconProperties["name"];
-    size: Sizes | string;
-    static styles: CSSResult;
-    private getSvgWithSize;
-    render(): TemplateResult<1> | null;
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "rarui-label": RaruiLabel;
-    }
-}
-/**
- * ## Rarui Label
- * ---
- * The label component allows us to name elements within a form.
- *
- See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/label) for more details.
- */
-type LabelManifestProperties = {
-    /**
-     * The for attribute specifies which form element a label is bound to.
-     */
-    for?: string;
-    /**
-     * Specifies whether the label is hidden or not
-     * @default false
-     */
-    hidden?: boolean;
-};
-type LabelProperties = WebComponentProperties<LabelManifestProperties>;
-
-declare const RaruiLabel_base: (new (...args: any[]) => {
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
-}) & typeof LitElement;
-declare class RaruiLabel extends RaruiLabel_base {
-    for: LabelProperties["for"];
-    hidden: boolean;
-    static styles: CSSResult;
-    render(): TemplateResult<1>;
-    private _handleClick;
-}
-
 interface StandardLonghandProperties$1<TLength = (string & {}) | 0, TTime = string & {}> {
   /**
    * The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements.
@@ -15458,60 +15256,351 @@ interface StandardLonghandProperties {
      */
     zoom?: Property.Zoom | Conditions<Property.Zoom>;
 }
-type OnlyObject = Record<never, never>;
-type OnlyNumber = number & OnlyObject;
-type OnlyString = string & OnlyObject;
-type OnlyStringNumeric = (number | string) & OnlyObject;
-declare namespace Property {
-    type AlignContent = DataType.ContentDistribution | DataType.ContentPosition | "baseline" | "normal" | OnlyString;
-    type AlignItems = DataType.SelfPosition | "baseline" | "normal" | "stretch" | OnlyString;
-    type AlignSelf = DataType.SelfPosition | "auto" | "baseline" | "normal" | "stretch" | OnlyString;
-    type AlignTracks = DataType.ContentDistribution | DataType.ContentPosition | "baseline" | "normal" | OnlyString;
-    type All = never;
-    type Animation = DataType.SingleAnimation | OnlyString;
-    type AnimationDelay = never | OnlyString;
-    type AnimationDirection = DataType.SingleAnimationDirection | OnlyString;
-    type AnimationDuration = never | OnlyString;
-    type AnimationFillMode = DataType.SingleAnimationFillMode | OnlyString;
-    type AnimationIterationCount = "infinite" | OnlyStringNumeric;
-    type AnimationName = "none" | OnlyString;
-    type AnimationPlayState = "paused" | "running" | OnlyString;
-    type AnimationTimingFunction = DataType.EasingFunction | OnlyString;
-    type Appearance = DataType.CompatAuto | "auto" | "menulist-button" | "none" | "textfield";
-    type AspectRatio = "auto" | OnlyString;
-    type Azimuth = "behind" | "center" | "center-left" | "center-right" | "far-left" | "far-right" | "left" | "left-side" | "leftwards" | "right" | "right-side" | "rightwards" | OnlyString;
-    type BackdropFilter = "none" | OnlyString;
-    type BackfaceVisibility = "hidden" | "visible";
-    type Background = DataType.FinalBgLayer | OnlyString;
-    type BackgroundAttachment = DataType.Attachment | OnlyString;
-    type BackgroundBlendMode = DataType.BlendMode | OnlyString;
-    type BackgroundClip = DataType.Box | OnlyString;
-    type BackgroundColor = DataType.Color;
-    type BackgroundImage = string;
-    type BackgroundOrigin = DataType.Box | OnlyString;
-    type BackgroundPosition = DataType.BgPosition | OnlyString;
-    type BackgroundPositionX = "center" | "left" | "right" | "x-end" | "x-start" | OnlyStringNumeric;
-    type BackgroundPositionY = "bottom" | "center" | "top" | "y-end" | "y-start" | OnlyStringNumeric;
-    type BackgroundRepeat = DataType.RepeatStyle | OnlyString;
-    type BackgroundSize = DataType.BgSize | OnlyString;
-    type BlockOverflow = "clip" | "ellipsis" | OnlyString;
-    type BlockSize = number | "auto" | "stretch" | "fit-content" | "max-content" | "min-content" | OnlyString;
-    type Border = DataType.LineWidth | DataType.LineStyle | DataType.Color | OnlyString;
-    type BorderBlock = DataType.LineWidth | DataType.LineStyle | DataType.Color | OnlyString;
-    type BorderBlockColor = DataType.Color | OnlyString;
-    type BorderBlockEnd = DataType.LineWidth | DataType.LineStyle | DataType.Color | OnlyString;
-    type BorderBlockEndColor = DataType.Color;
-    type BorderBlockEndStyle = DataType.LineStyle;
-    type BorderBlockEndWidth = DataType.LineWidth;
-    type BorderBlockStart = DataType.LineWidth | DataType.LineStyle | DataType.Color | OnlyString;
-    type BorderBlockStartColor = DataType.Color;
-    type BorderBlockStartStyle = DataType.LineStyle;
-    type BorderBlockStartWidth = DataType.LineWidth;
-    type BorderBlockStyle = DataType.LineStyle;
-    type BorderBlockWidth = DataType.LineWidth;
-    type BorderBottom = DataType.LineWidth | DataType.LineStyle | DataType.Color | OnlyString;
-    type BorderBottomColor = DataType.Color;
-    type BorderBottomLeftRadius = OnlyStringNumeric;
+interface StandardShorthandProperties {
+    /**
+     * The `**all**` shorthand CSS property resets all of an element's properties except `unicode-bidi`, `direction`, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another stylesheet origin.
+     *
+     *
+     * **Initial value**: There is no practical initial value for it.
+     *
+     */
+    all?: Property.All | Conditions<Property.All>;
+    /**
+     * The **`animation`** shorthand CSS property applies an animation between styles. It is a shorthand for `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, and `animation-play-state`.
+     *
+     *
+     */
+    animation?: Property.Animation | Conditions<Property.Animation>;
+    /**
+     * The **`background`** shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.
+     *
+     *
+     */
+    background?: Property.Background | Conditions<Property.Background>;
+    /**
+     * The **`background-position`** CSS property sets the initial position for each background image. The position is relative to the position layer set by `background-origin`.
+     *
+     *
+     * **Initial value**: `0% 0%`
+     *
+     */
+    backgroundPosition?: Property.BackgroundPosition | Conditions<Property.BackgroundPosition>;
+    /**
+     * The **`border`** shorthand CSS property sets an element's border. It sets the values of `border-width`, `border-style`, and `border-color`.
+     *
+     *
+     */
+    border?: Property.Border | Conditions<Property.Border>;
+    /**
+     * The **`border-block`** CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.
+     *
+     *
+     */
+    borderBlock?: Property.BorderBlock | Conditions<Property.BorderBlock>;
+    /**
+     * The **`border-block-end`** CSS property is a shorthand property for setting the individual logical block-end border property values in a single place in the style sheet.
+     *
+     *
+     */
+    borderBlockEnd?: Property.BorderBlockEnd | Conditions<Property.BorderBlockEnd>;
+    /**
+     * The **`border-block-start`** CSS property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet.
+     *
+     *
+     */
+    borderBlockStart?: Property.BorderBlockStart | Conditions<Property.BorderBlockStart>;
+    /**
+     * The **`border-bottom`** shorthand CSS property sets an element's bottom border. It sets the values of `border-bottom-width`, `border-bottom-style` and `border-bottom-color`.
+     *
+     *
+     */
+    borderBottom?: Property.BorderBottom | Conditions<Property.BorderBottom>;
+    /**
+     * The **`border-color`** shorthand CSS property sets the color of an element's border.
+     *
+     *
+     */
+    borderColor?: Property.BorderColor | Conditions<Property.BorderColor>;
+    /**
+     * The **`border-image`** CSS property draws an image around a given element. It replaces the element's regular border.
+     *
+     *
+     */
+    borderImage?: Property.BorderImage | Conditions<Property.BorderImage>;
+    /**
+     * The **`border-inline`** CSS property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.
+     *
+     *
+     */
+    borderInline?: Property.BorderInline | Conditions<Property.BorderInline>;
+    /**
+     * The **`border-inline-end`** CSS property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.
+     *
+     *
+     */
+    borderInlineEnd?: Property.BorderInlineEnd | Conditions<Property.BorderInlineEnd>;
+    /**
+     * The **`border-inline-start`** CSS property is a shorthand property for setting the individual logical inline-start border property values in a single place in the style sheet.
+     *
+     *
+     */
+    borderInlineStart?: Property.BorderInlineStart | Conditions<Property.BorderInlineStart>;
+    /**
+     * The **`border-left`** shorthand CSS property sets all the properties of an element's left border.
+     *
+     *
+     */
+    borderLeft?: Property.BorderLeft | Conditions<Property.BorderLeft>;
+    /**
+     * The **`border-radius`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
+     *
+     *
+     */
+    borderRadius?: Property.BorderRadius | Conditions<Property.BorderRadius>;
+    /**
+     * The **`border-right`** shorthand CSS property sets all the properties of an element's right border.
+     *
+     *
+     */
+    borderRight?: Property.BorderRight | Conditions<Property.BorderRight>;
+    /**
+     * The **`border-style`** shorthand CSS property sets the line style for all four sides of an element's border.
+     *
+     *
+     */
+    borderStyle?: Property.BorderStyle | Conditions<Property.BorderStyle>;
+    /**
+     * The **`border-top`** shorthand CSS property sets all the properties of an element's top border.
+     *
+     *
+     */
+    borderTop?: Property.BorderTop | Conditions<Property.BorderTop>;
+    /**
+     * The **`border-width`** shorthand CSS property sets the width of an element's border.
+     *
+     *
+     */
+    borderWidth?: Property.BorderWidth | Conditions<Property.BorderWidth>;
+    /**
+     * The **`column-rule`** shorthand CSS property sets the width, style, and color of the line drawn between columns in a multi-column layout.
+     *
+     *
+     */
+    columnRule?: Property.ColumnRule | Conditions<Property.ColumnRule>;
+    /**
+     * The **`columns`** CSS shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.
+     *
+     *
+     */
+    columns?: Property.Columns | Conditions<Property.Columns>;
+    /**
+     * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.
+     *
+     *
+     */
+    flex?: Property.Flex | Conditions<Property.Flex>;
+    /**
+     * The **`flex-flow`** CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.
+     *
+     *
+     */
+    flexFlow?: Property.FlexFlow | Conditions<Property.FlexFlow>;
+    /**
+     * The **`font`** CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.
+     *
+     *
+     */
+    font?: Property.Font | Conditions<Property.Font>;
+    /**
+     * The **`gap`** CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for `row-gap` and `column-gap`.
+     *
+     *
+     */
+    gap?: Property.Gap | Conditions<Property.Gap>;
+    /**
+     * The **`grid`** CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.
+     *
+     *
+     */
+    grid?: Property.Grid | Conditions<Property.Grid>;
+    /**
+     * The **`grid-area`** CSS shorthand property specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
+     *
+     *
+     */
+    gridArea?: Property.GridArea | Conditions<Property.GridArea>;
+    /**
+     * The **`grid-column`** CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
+     *
+     *
+     */
+    gridColumn?: Property.GridColumn | Conditions<Property.GridColumn>;
+    /**
+     * The **`grid-row`** CSS shorthand property specifies a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
+     *
+     *
+     */
+    gridRow?: Property.GridRow | Conditions<Property.GridRow>;
+    /**
+     * The **`grid-template`** CSS property is a shorthand property for defining grid columns, rows, and areas.
+     *
+     *
+     */
+    gridTemplate?: Property.GridTemplate | Conditions<Property.GridTemplate>;
+    /**
+     *
+     * **Initial value**: `none`
+     */
+    lineClamp?: Property.LineClamp | Conditions<Property.LineClamp>;
+    /**
+     * The **`list-style`** CSS shorthand property allows you set all the list style properties at once.
+     *
+     *
+     */
+    listStyle?: Property.ListStyle | Conditions<Property.ListStyle>;
+    /**
+     * The **`margin`** CSS property sets the margin area on all four sides of an element. It is a shorthand for `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`.
+     *
+     *
+     */
+    margin?: Property.Margin | Conditions<Property.Margin>;
+    /**
+     * The **`mask`** CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.
+     *
+     *
+     */
+    mask?: Property.Mask | Conditions<Property.Mask>;
+    /**
+     * The **`mask-border`** CSS shorthand property lets you create a mask along the edge of an element's border.
+     *
+     *
+     */
+    maskBorder?: Property.MaskBorder | Conditions<Property.MaskBorder>;
+    /**
+     * The **`offset`** CSS shorthand property sets all the properties required for animating an element along a defined path.
+     *
+     *
+     */
+    motion?: Property.Offset | Conditions<Property.Offset>;
+    /**
+     * The **`offset`** CSS shorthand property sets all the properties required for animating an element along a defined path.
+     *
+     *
+     */
+    offset?: Property.Offset | Conditions<Property.Offset>;
+    /**
+     * The **`outline`** CSS shorthand property set all the outline properties in a single declaration.
+     *
+     *
+     */
+    outline?: Property.Outline | Conditions<Property.Outline>;
+    /**
+     * The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.
+     *
+     *
+     * **Initial value**: `visible`
+     *
+     */
+    overflow?: Property.Overflow | Conditions<Property.Overflow>;
+    /**
+     * The **`overscroll-behavior`** CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for `overscroll-behavior-x` and `overscroll-behavior-y`.
+     *
+     *
+     * **Initial value**: `auto`
+     *
+     */
+    overscrollBehavior?: Property.OverscrollBehavior | Conditions<Property.OverscrollBehavior>;
+    /**
+     * The **`padding`** CSS shorthand property sets the padding area on all four sides of an element at once.
+     *
+     *
+     */
+    padding?: Property.Padding | Conditions<Property.Padding>;
+    /**
+     * The CSS **`place-items`** shorthand property allows you to align items along both the block and inline directions at once (i.e. the `align-items` and `justify-items` properties) in a relevant layout system such as Grid or Flexbox. If the second value is not set, the first value is also used for it.
+     *
+     *
+     */
+    placeItems?: Property.PlaceItems | Conditions<Property.PlaceItems>;
+    /**
+     * The **`place-self`** CSS shorthand property allows you to align an individual item in both the block and inline directions at once (i.e. the `align-self` and `justify-self` properties) in a relevant layout system such as Grid or Flexbox. If the second value is not present, the first value is also used for it.
+     *
+     *
+     */
+    placeSelf?: Property.PlaceSelf | Conditions<Property.PlaceSelf>;
+    /**
+     * The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.
+     *
+     *
+     */
+    textDecoration?: Property.TextDecoration | Conditions<Property.TextDecoration>;
+    /**
+     * The **`text-emphasis`** CSS property applies emphasis marks to text (except spaces and control characters). It is a shorthand for `text-emphasis-style` and `text-emphasis-color`.
+     *
+     *
+     */
+    textEmphasis?: Property.TextEmphasis | Conditions<Property.TextEmphasis>;
+    /**
+     * The **`transition`** CSS property is a shorthand property for `transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay`.
+     *
+     *
+     */
+    transition?: Property.Transition | Conditions<Property.Transition>;
+}
+type OnlyObject = Record<never, never>;
+type OnlyNumber = number & OnlyObject;
+type OnlyString = string & OnlyObject;
+type OnlyStringNumeric = (number | string) & OnlyObject;
+declare namespace Property {
+    type AlignContent = DataType.ContentDistribution | DataType.ContentPosition | "baseline" | "normal" | OnlyString;
+    type AlignItems = DataType.SelfPosition | "baseline" | "normal" | "stretch" | OnlyString;
+    type AlignSelf = DataType.SelfPosition | "auto" | "baseline" | "normal" | "stretch" | OnlyString;
+    type AlignTracks = DataType.ContentDistribution | DataType.ContentPosition | "baseline" | "normal" | OnlyString;
+    type All = never;
+    type Animation = DataType.SingleAnimation | OnlyString;
+    type AnimationDelay = never | OnlyString;
+    type AnimationDirection = DataType.SingleAnimationDirection | OnlyString;
+    type AnimationDuration = never | OnlyString;
+    type AnimationFillMode = DataType.SingleAnimationFillMode | OnlyString;
+    type AnimationIterationCount = "infinite" | OnlyStringNumeric;
+    type AnimationName = "none" | OnlyString;
+    type AnimationPlayState = "paused" | "running" | OnlyString;
+    type AnimationTimingFunction = DataType.EasingFunction | OnlyString;
+    type Appearance = DataType.CompatAuto | "auto" | "menulist-button" | "none" | "textfield";
+    type AspectRatio = "auto" | OnlyString;
+    type Azimuth = "behind" | "center" | "center-left" | "center-right" | "far-left" | "far-right" | "left" | "left-side" | "leftwards" | "right" | "right-side" | "rightwards" | OnlyString;
+    type BackdropFilter = "none" | OnlyString;
+    type BackfaceVisibility = "hidden" | "visible";
+    type Background = DataType.FinalBgLayer | OnlyString;
+    type BackgroundAttachment = DataType.Attachment | OnlyString;
+    type BackgroundBlendMode = DataType.BlendMode | OnlyString;
+    type BackgroundClip = DataType.Box | OnlyString;
+    type BackgroundColor = DataType.Color;
+    type BackgroundImage = string;
+    type BackgroundOrigin = DataType.Box | OnlyString;
+    type BackgroundPosition = DataType.BgPosition | OnlyString;
+    type BackgroundPositionX = "center" | "left" | "right" | "x-end" | "x-start" | OnlyStringNumeric;
+    type BackgroundPositionY = "bottom" | "center" | "top" | "y-end" | "y-start" | OnlyStringNumeric;
+    type BackgroundRepeat = DataType.RepeatStyle | OnlyString;
+    type BackgroundSize = DataType.BgSize | OnlyString;
+    type BlockOverflow = "clip" | "ellipsis" | OnlyString;
+    type BlockSize = number | "auto" | "stretch" | "fit-content" | "max-content" | "min-content" | OnlyString;
+    type Border = DataType.LineWidth | DataType.LineStyle | DataType.Color | OnlyString;
+    type BorderBlock = DataType.LineWidth | DataType.LineStyle | DataType.Color | OnlyString;
+    type BorderBlockColor = DataType.Color | OnlyString;
+    type BorderBlockEnd = DataType.LineWidth | DataType.LineStyle | DataType.Color | OnlyString;
+    type BorderBlockEndColor = DataType.Color;
+    type BorderBlockEndStyle = DataType.LineStyle;
+    type BorderBlockEndWidth = DataType.LineWidth;
+    type BorderBlockStart = DataType.LineWidth | DataType.LineStyle | DataType.Color | OnlyString;
+    type BorderBlockStartColor = DataType.Color;
+    type BorderBlockStartStyle = DataType.LineStyle;
+    type BorderBlockStartWidth = DataType.LineWidth;
+    type BorderBlockStyle = DataType.LineStyle;
+    type BorderBlockWidth = DataType.LineWidth;
+    type BorderBottom = DataType.LineWidth | DataType.LineStyle | DataType.Color | OnlyString;
+    type BorderBottomColor = DataType.Color;
+    type BorderBottomLeftRadius = OnlyStringNumeric;
     type BorderBottomRightRadius = OnlyStringNumeric;
     type BorderBottomStyle = DataType.LineStyle;
     type BorderBottomWidth = DataType.LineWidth;
@@ -16049,6 +16138,12 @@ declare namespace DataType {
     type ViewportLength = "auto" | OnlyStringNumeric;
     type VisualBox = "border-box" | "content-box" | "padding-box";
 }
+declare const fontWeightProperties: {
+    regular: `var(--${string})` | `var(--${string}, ${string})`;
+    medium: `var(--${string})` | `var(--${string}, ${string})`;
+    semiBold: `var(--${string})` | `var(--${string}, ${string})`;
+    bold: `var(--${string})` | `var(--${string}, ${string})`;
+};
 declare const zIndexProperties: {
     "100": `var(--${string})` | `var(--${string}, ${string})`;
     "200": `var(--${string})` | `var(--${string}, ${string})`;
@@ -16060,10 +16155,661 @@ declare const zIndexProperties: {
     "800": `var(--${string})` | `var(--${string}, ${string})`;
     "900": `var(--${string})` | `var(--${string}, ${string})`;
 };
-
-declare const styles$6: {
-    container: RuntimeFn<{
-        /**
+declare const colorProperties: {
+    currentColor: string;
+    brand: `var(--${string})` | `var(--${string}, ${string})`;
+    "brand-alt": `var(--${string})` | `var(--${string}, ${string})`;
+    disabled: `var(--${string})` | `var(--${string}, ${string})`;
+    error: `var(--${string})` | `var(--${string}, ${string})`;
+    info: `var(--${string})` | `var(--${string}, ${string})`;
+    invert: `var(--${string})` | `var(--${string}, ${string})`;
+    "invert-disabled": `var(--${string})` | `var(--${string}, ${string})`;
+    "invert-secondary": `var(--${string})` | `var(--${string}, ${string})`;
+    "on-brand": `var(--${string})` | `var(--${string}, ${string})`;
+    "on-error": `var(--${string})` | `var(--${string}, ${string})`;
+    "on-info": `var(--${string})` | `var(--${string}, ${string})`;
+    "on-success": `var(--${string})` | `var(--${string}, ${string})`;
+    "on-warning": `var(--${string})` | `var(--${string}, ${string})`;
+    primary: `var(--${string})` | `var(--${string}, ${string})`;
+    secondary: `var(--${string})` | `var(--${string}, ${string})`;
+    success: `var(--${string})` | `var(--${string}, ${string})`;
+    warning: `var(--${string})` | `var(--${string}, ${string})`;
+    "warning-alt": `var(--${string})` | `var(--${string}, ${string})`;
+};
+declare const borderColorProperties: {
+    transparent: string;
+    brand: `var(--${string})` | `var(--${string}, ${string})`;
+    "brand-alt": `var(--${string})` | `var(--${string}, ${string})`;
+    disabled: `var(--${string})` | `var(--${string}, ${string})`;
+    divider: `var(--${string})` | `var(--${string}, ${string})`;
+    error: `var(--${string})` | `var(--${string}, ${string})`;
+    info: `var(--${string})` | `var(--${string}, ${string})`;
+    invert: `var(--${string})` | `var(--${string}, ${string})`;
+    "invert-disabled": `var(--${string})` | `var(--${string}, ${string})`;
+    primary: `var(--${string})` | `var(--${string}, ${string})`;
+    secondary: `var(--${string})` | `var(--${string}, ${string})`;
+    subdued: `var(--${string})` | `var(--${string}, ${string})`;
+    success: `var(--${string})` | `var(--${string}, ${string})`;
+    warning: `var(--${string})` | `var(--${string}, ${string})`;
+};
+
+declare const chipStyles: {
+    chip: RuntimeFn<{
+        /**
+         * Specifies whether the chip will be displayed in the pill shape
+         * @default false
+         */
+        pill: {
+            true: {
+                borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+        /**
+         * Specifies whether the chip is selected
+         * @default false
+         */
+        selected: {
+            true: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+                ":hover": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+        /**
+         * Specifies the size of the chip
+         * @default medium
+         */
+        size: {
+            medium: {
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                height: "2rem";
+            };
+            small: {
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                height: "1.5rem";
+            };
+        };
+        /**
+         * Specifies whether to handle text overflow within the chip.
+         * When true, overflowing text is typically truncated with an ellipsis.
+         * @default false
+         */
+        textOverflow: {
+            true: {
+                minWidth: "auto";
+                width: "100%";
+            };
+        };
+    }>;
+    content: RuntimeFn<{
+        /**
+         * Specifies whether to handle text overflow within the chip.
+         * When true, overflowing text is typically truncated with an ellipsis.
+         */
+        textOverflow: {
+            true: {
+                textOverflow: "ellipsis";
+                whiteSpace: "nowrap";
+                width: "100%";
+                display: "block";
+                overflow: "hidden";
+            };
+        };
+    }>;
+    close: string;
+    overlay: string;
+};
+declare const paddingProperties: {
+    medium: string;
+    small: string;
+};
+
+type ChipVariants = NonNullable<RecipeVariants<typeof chipStyles.chip>>;
+type ChipDynamicProperties = Pick<StandardLonghandProperties, "textTransform">;
+interface ChipSprinkle extends ChipDynamicProperties {
+    /**
+     * The padding properties are used to generate space around an chip's content area.
+     */
+    padding?: AddDollar<keyof typeof paddingProperties> | Conditions<AddDollar<keyof typeof paddingProperties>>;
+}
+
+declare const dividerBorderWidthProperties: {
+    "1": string;
+    "2": string;
+};
+
+type DividerBorderStyle = "solid" | "dashed";
+interface DividerSprinkle {
+    /**
+     * The **`size`** CSS property sets an element's area.
+     * @default 100%
+     */
+    size?: string | Conditions<string>;
+    /**
+     * The **`type`** shorthand CSS property sets the line style for all four sides of an element's.
+     * @default solid
+     */
+    type?: AddDollar<DividerBorderStyle> | Conditions<AddDollar<DividerBorderStyle>>;
+    /**
+     * The **`thickness`** shorthand CSS property sets the width of an element's.
+     * @default $1
+     */
+    thickness?: AddDollar<keyof typeof dividerBorderWidthProperties> | Conditions<AddDollar<keyof typeof dividerBorderWidthProperties>>;
+    /**
+     * The **`color`** CSS property sets an element's color.
+     * @default $divider
+     */
+    color?: AddDollar<keyof typeof borderColorProperties> | Conditions<AddDollar<keyof typeof borderColorProperties>>;
+}
+
+type IconDynamicProperties = Pick<StandardLonghandProperties, "cursor">;
+interface IconSprinkle extends IconDynamicProperties {
+    /**
+     * The color property sets the icon.
+     */
+    color?: AddDollar<keyof typeof colorProperties> | Conditions<AddDollar<keyof typeof colorProperties>>;
+}
+
+declare const textLineHeightProperties: {
+    xxs: `var(--${string})` | `var(--${string}, ${string})`;
+    xs: `var(--${string})` | `var(--${string}, ${string})`;
+    s: `var(--${string})` | `var(--${string}, ${string})`;
+    m: `var(--${string})` | `var(--${string}, ${string})`;
+    l: `var(--${string})` | `var(--${string}, ${string})`;
+    xl: `var(--${string})` | `var(--${string}, ${string})`;
+};
+declare const textFontSizeProperties: {
+    xxs: `var(--${string})` | `var(--${string}, ${string})`;
+    xs: `var(--${string})` | `var(--${string}, ${string})`;
+    s: `var(--${string})` | `var(--${string}, ${string})`;
+    m: `var(--${string})` | `var(--${string}, ${string})`;
+    l: `var(--${string})` | `var(--${string}, ${string})`;
+    xl: `var(--${string})` | `var(--${string}, ${string})`;
+};
+
+type TextDynamicProperties = Pick<StandardLonghandProperties, "textAlign" | "wordBreak" | "textTransform" | "textOverflow" | "width" | "whiteSpace"> & Pick<StandardShorthandProperties, "textDecoration" | "overflow">;
+interface TextSprinkle extends TextDynamicProperties {
+    /**
+     * The color property is used to set the color of the title.
+     */
+    color?: AddDollar<keyof typeof colorProperties> | Conditions<AddDollar<keyof typeof colorProperties>>;
+    /**
+     * The color property is used to set the color of the title.
+     * @default $regular
+     */
+    fontWeight?: AddDollar<keyof typeof fontWeightProperties> | Conditions<AddDollar<keyof typeof fontWeightProperties>>;
+    /**
+     * The fontSize property sets the size of the text.
+     */
+    fontSize?: AddDollar<keyof typeof textFontSizeProperties> | Conditions<AddDollar<keyof typeof textFontSizeProperties>>;
+    /**
+     * The lineHeight property specifies the line height of the title.
+     */
+    lineHeight?: AddDollar<keyof typeof textLineHeightProperties> | Conditions<AddDollar<keyof typeof textLineHeightProperties>>;
+}
+
+declare const titleLineHeightProperties: {
+    hero: `var(--${string})` | `var(--${string}, ${string})`;
+    xs: `var(--${string})` | `var(--${string}, ${string})`;
+    s: `var(--${string})` | `var(--${string}, ${string})`;
+    m: `var(--${string})` | `var(--${string}, ${string})`;
+    l: `var(--${string})` | `var(--${string}, ${string})`;
+    xl: `var(--${string})` | `var(--${string}, ${string})`;
+};
+declare const titleFontSizeProperties: {
+    hero: `var(--${string})` | `var(--${string}, ${string})`;
+    xs: `var(--${string})` | `var(--${string}, ${string})`;
+    s: `var(--${string})` | `var(--${string}, ${string})`;
+    m: `var(--${string})` | `var(--${string}, ${string})`;
+    l: `var(--${string})` | `var(--${string}, ${string})`;
+    xl: `var(--${string})` | `var(--${string}, ${string})`;
+};
+
+type TitleDynamicProperties = Pick<StandardLonghandProperties, "textAlign" | "textTransform"> & Pick<StandardShorthandProperties, "textDecoration">;
+interface TitleSprinkle extends TitleDynamicProperties {
+    /**
+     * The color property is used to set the color of the title.
+     */
+    color?: AddDollar<keyof typeof colorProperties> | Conditions<AddDollar<keyof typeof colorProperties>>;
+    /**
+     * The color property is used to set the color of the title.
+     * @default $regular
+     */
+    fontWeight?: AddDollar<keyof typeof fontWeightProperties> | Conditions<AddDollar<keyof typeof fontWeightProperties>>;
+    /**
+     * The fontSize property sets the size of the title.
+     */
+    fontSize?: AddDollar<keyof typeof titleFontSizeProperties> | Conditions<AddDollar<keyof typeof titleFontSizeProperties>>;
+    /**
+     * The lineHeight property specifies the line height of the title.
+     */
+    lineHeight?: AddDollar<keyof typeof titleLineHeightProperties> | Conditions<AddDollar<keyof typeof titleLineHeightProperties>>;
+}
+
+declare const avatarStyles: {
+    container: string;
+    avatar: RuntimeFn<{
+        /**
+         * Specifies the size of the Avatar component.
+         * @default medium
+         */
+        size: {
+            small: {
+                width: "20px";
+                height: "20px";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            medium: {
+                width: "30px";
+                height: "30px";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            large: {
+                width: "40px";
+                height: "40px";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                borderWidth: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            xLarge: {
+                width: "60px";
+                height: "60px";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                borderWidth: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+    }>;
+    badge: RuntimeFn<{
+        size: {
+            small: {
+                left: "18px";
+            };
+            medium: {
+                left: "24px";
+            };
+            large: {
+                top: "-4px";
+                left: "30px";
+            };
+            xLarge: {
+                left: "44px";
+            };
+        };
+    }>;
+};
+
+type AvatarVariants = NonNullable<RecipeVariants<typeof avatarStyles.avatar>>;
+
+declare const badgeStyles: {
+    badge: RuntimeFn<{
+        /**
+         * Determines the visual style of the badge, influencing its color scheme and appearance.
+         * @default brand
+         */
+        appearance: {
+            brand: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            danger: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            success: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            warning: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            info: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            neutral: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            inverted: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+        /**
+         * Specifies the size of the badge, controlling its dimensions.
+         * @default medium
+         */
+        size: {
+            large: {
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
+                height: "3rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                fontWeight: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            medium: {
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
+                height: "2em";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                fontWeight: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            small: {
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
+                height: "1.5rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+                fontWeight: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            dot: {
+                height: "0.5rem";
+                width: "0.5rem";
+            };
+        };
+        /**
+         * Defines the visual variant of the badge, affecting its background style.
+         * @default solid
+         */
+        variant: {
+            solid: {};
+            outlined: {
+                borderWidth: `var(--${string})` | `var(--${string}, ${string})`;
+                borderStyle: "solid";
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+    }>;
+};
+
+type BadgeVariants = NonNullable<RecipeVariants<typeof badgeStyles.badge>>;
+
+declare const buttonStyles: {
+    button: RuntimeFn<{
+        /**
+         * Specifies whether the button should take up the full width of its container.
+         * This variant is useful when you want to make a button span the entire width of its parent container.
+         *
+         */
+        full: {
+            true: {
+                width: "100%";
+            };
+        };
+        /**
+         * Defines the appearance variants for the button component.
+         * Each appearance variant corresponds to a specific background color, border color, and text color.
+         * @default brand
+         */
+        appearance: {
+            brand: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            danger: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            success: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            warning: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            neutral: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            inverted: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+        /**
+         * Defines the size of the button component.
+         * @default large
+         */
+        size: {
+            large: {
+                gap: `var(--${string})` | `var(--${string}, ${string})`;
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
+                height: "3rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            medium: {
+                gap: `var(--${string})` | `var(--${string}, ${string})`;
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
+                height: "2.5rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            small: {
+                gap: `var(--${string})` | `var(--${string}, ${string})`;
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
+                height: "2rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+        /**
+         * Defines the visual variant of the badge, affecting its background style, border and text.
+         * @default solid
+         */
+        variant: {
+            solid: {
+                selectors: {
+                    "&:hover:after": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                    };
+                    "&:active:after": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                    };
+                };
+            };
+            outlined: {
+                backgroundColor: "transparent";
+            };
+            text: {
+                backgroundColor: "transparent";
+                textDecoration: "underline";
+                borderColor: "transparent";
+            };
+            tonal: {
+                borderColor: "transparent";
+            };
+        };
+    }>;
+};
+
+type ButtonVariants = NonNullable<RecipeVariants<typeof buttonStyles.button>>;
+
+declare const overlayBackgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+declare const checkboxStyles: {
+    checkbox: RuntimeFn<{
+        /**
+         * Specifies whether the checkbox is in error state
+         */
+        error: {
+            true: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                ":checked": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+        /**
+         * Specifies the size of the checkbox
+         */
+        size: {
+            medium: {
+                width: "1.25rem";
+                height: "1.25rem";
+            };
+            large: {
+                width: "1.5rem";
+                height: "1.5rem";
+            };
+        };
+        /**
+         * Specifies whether the checkbox is indeterminate state
+         */
+        indeterminate: {
+            true: {
+                selectors: {
+                    "&:checked:after": {
+                        top: number;
+                        bottom: number;
+                        margin: "auto";
+                        height: number;
+                        borderLeft: "none";
+                        transform: "rotate(0deg)";
+                    };
+                };
+            };
+        };
+    }>;
+    label: RuntimeFn<{
+        /**
+         * Specifies whether the label is in error state
+         */
+        error: {
+            true: {
+                vars: {
+                    [overlayBackgroundColor]: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+    }>;
+    container: string;
+    overlay: string;
+};
+
+type CheckboxVariants = NonNullable<RecipeVariants<typeof checkboxStyles.checkbox>>;
+
+declare const iconButtonStyles: {
+    iconButton: RuntimeFn<{
+        /**
+         * Determines the visual style of the icon button, influencing its color scheme and appearance.
+         * @default brand
+         */
+        appearance: {
+            brand: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            danger: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            success: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            warning: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            neutral: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            inverted: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+        /**
+         * Defines the size of the icon button component.
+         * @default medium
+         */
+        size: {
+            large: {
+                height: "3rem";
+                width: "3rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            medium: {
+                height: "2.5rem";
+                width: "2.5rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            small: {
+                height: "2rem";
+                width: "2rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+        variant: {
+            /**
+             * Defines the visual variant of the icon button, affecting its background style, border and text.
+             * @default solid
+             */
+            solid: {
+                selectors: {
+                    "&:hover:after": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                    };
+                    "&:active:after": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                    };
+                };
+            };
+            outlined: {
+                backgroundColor: "transparent";
+            };
+            ghost: {
+                backgroundColor: "transparent";
+                borderColor: "transparent";
+            };
+            tonal: {
+                borderColor: "transparent";
+            };
+        };
+        /**
+         * Defines if the button should have rounded edges.
+         *
+         * - `true`: The button will be rendered with completely rounded edges, useful for circular -shaped icons.
+         * - `false` (default): The button will have standard edges or defined by the component style.
+         * @default false
+         */
+        rounded: {
+            true: {
+                borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
+                ":after": {
+                    borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+    }>;
+};
+
+type IconButtonVariants = NonNullable<RecipeVariants<typeof iconButtonStyles.iconButton>>;
+
+declare const styles$6: {
+    container: RuntimeFn<{
+        /**
          * Determines the visual style of the input, affecting its border
          */
         appearance: {
@@ -16370,6 +17116,98 @@ declare const dropdownStyles: {
 };
 
 type DropdownVariants = NonNullable<RecipeVariants<typeof dropdownStyles.dropdown> & RecipeVariants<typeof dropdownStyles.item>>;
+type DropdownDynamicProperties = Pick<StandardLonghandProperties, "width" | "maxWidth">;
+interface DropdownSprinkle extends DropdownDynamicProperties {
+    /**
+     * The zIndex property specifies the stack order of the box.
+     */
+    zIndex?: AddDollar<keyof typeof zIndexProperties> | Conditions<AddDollar<keyof typeof zIndexProperties>>;
+}
+
+declare const statusStyles: {
+    status: RuntimeFn<{
+        /**
+         * Specifies whether the status should take up the full width of its container.
+         * This variant is useful when you want to make a status span the entire width of its parent container.
+         * @default false
+         *
+         */
+        full: {
+            true: {
+                width: "100%";
+            };
+        };
+        /**
+         * Determines the visual style of the status, influencing its color scheme.
+         * @default success
+         */
+        appearance: {
+            success: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            warning: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            danger: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            inverted: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            neutral: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            info: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+        /**
+         * Specifies the size of the badge, controlling its dimensions.
+         * @default normal
+         */
+        size: {
+            normal: {
+                height: "1.75rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            small: {
+                height: "1.5rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+        /**
+         * Specifies the variant of the status
+         * @default solid
+         */
+        variant: {
+            solid: {};
+            text: {
+                backgroundColor: "transparent";
+            };
+            subdued: {};
+        };
+    }>;
+    dot: RuntimeFn<{
+        size: {
+            normal: {
+                height: ".5rem";
+                width: ".5rem";
+            };
+            small: {
+                height: ".25rem";
+                width: ".25rem";
+            };
+        };
+    }>;
+};
+
+type StatusVariants = NonNullable<RecipeVariants<typeof statusStyles.status>>;
 
 declare const bannerStyles: {
     banner: RuntimeFn<{
@@ -16564,6 +17402,50 @@ declare const styles$1: {
 
 type ToggleVariants = RecipeVariants<typeof styles$1.toggle>;
 
+declare const styles: {
+    tooltip: RuntimeFn<{
+        /**
+         * Specifies whether the color scheme should be inverted
+         * @default false
+         */
+        inverted: {
+            true: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            false: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                color: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+        };
+        /**
+         * Specifies the padding for the tooltip
+         * @default base
+         */
+        padding: {
+            base: {
+                padding: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+    header: RuntimeFn<{
+        padding: {
+            base: {
+                padding: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+    container: string;
+};
+
+type TooltipVariants = NonNullable<RecipeVariants<typeof styles.tooltip>>;
+
 declare const accordionStyles: {
     item: RuntimeFn<{
         selected: {
@@ -16949,31 +17831,215 @@ declare const stepperStyles: {
 
 type StepperVariants = NonNullable<RecipeVariants<typeof stepperStyles.stepper> & RecipeVariants<typeof stepperStyles.circle>>;
 
-interface StepperStepTyping {
+type BadgeProps = BadgeVariants;
+
+interface AvatarTypings {
+    /**
+     * Renders a Badge component along with the Avatar. The badge prop accepts an object of type Badge, representing the Badge component.
+     * @TJS-type Badge
+     */
+    badge?: BadgeProps;
+}
+type AvatarProps = AvatarTypings & AvatarVariants;
+
+interface DividerProps extends DividerSprinkle {
+    /**
+     * The direction of the Divider.
+     * @default horizontal
+     */
+    direction?: "vertical" | "horizontal";
+}
+
+type IconProps = IconSprinkle;
+
+type StepperProps = Pick<StepperVariants, "direction">;
+
+interface TitleProps extends TitleSprinkle {
+    /**
+     * Type of html tag to create for the title.
+     * @default h1
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}
+
+interface TextProps extends TextSprinkle {
+    /**
+     * Type of html tag to create for the Text component.
+     * @default p
+     */
+    as?: "p" | "span";
+    /**
+     * The -webkit-line-clamp CSS property allows limiting of the contents of a block to the specified number of lines.
+     */
+    lineClamp?: number;
+}
+
+interface TooltipTyping {
+    /**
+     * Conditional for displaying the popover arrow.
+     * @default true
+     */
+    arrow?: boolean;
+    /**
+     * A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.
+     * @default false
+     */
+    matchReferenceWidth?: boolean;
+    /**
+     * Adds hover event listeners that change the open state, like CSS :hover.
+     * @default false
+     */
+    enabledHover?: boolean;
+    /**
+     * Adds click event listeners that change the open state.
+     * @default true
+     */
+    enabledClick?: boolean;
+    /**
+     * Adds listeners that dismiss (close) the floating element.
+     * @default true
+     */
+    enabledDismiss?: boolean;
+    /**
+     * Offest displaces the floating element from its core placement along the specified axes.
+     * @default 10
+     */
+    offset?: number;
+    /**
+     * Specifies the ID of the portal element where the tooltip should be rendered.
+     * This can be useful for rendering the tooltip in a different part of the DOM, such as a modal or overlay.
+     */
+    portalId?: string;
+    /**
+     * If true, the component is shown.
+     */
+    visible?: boolean;
+    /**
+     * Function to control popover opening and closing.
+     * @TJS-type (visible: boolean) => void;
+     */
+    onVisibility?: (visible: boolean) => void;
+}
+type TooltipProps = TooltipTyping & TooltipVariants;
+
+interface StepperStepTyping {
+    /**
+     * The title of the step. This provides a brief summary of the step's purpose.
+     */
+    title?: string;
+    /**
+     * A more detailed description of the step. This can provide additional context or instructions.
+     */
+    description?: string;
+}
+type StepperStepProps = StepperStepTyping & Pick<StepperVariants, "active" | "done">;
+
+interface ProgressTyping {
+    /**
+     * The progress percentage, represented as a number between 0 and 100.
+     * This indicates the completion level of the process.
+     */
+    percentage: number;
+}
+type ProgressProps = ProgressTyping & ProgressSprinkle;
+
+type ProgressCircleProps = ProgressProps & ProgressVariants;
+
+interface StatusTyping {
+    /**
+     * Specifies whether to display a dot indicator alongside the status text. When true, a dot is shown to visually represent the status.
+     * @default true
+     */
+    dot?: boolean;
+}
+type StatusProps = StatusTyping & StatusVariants;
+
+interface ButtonTyping {
+    /**
+     * Disables the button, disallowing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+}
+type ButtonProps = ButtonTyping & ButtonVariants;
+
+interface CheckboxTyping {
     /**
-     * The title of the step. This provides a brief summary of the step's purpose.
+     * The label of the checkbox.
      */
-    title?: string;
+    label?: string;
     /**
-     * A more detailed description of the step. This can provide additional context or instructions.
+     * The id of the checkbox.
      */
-    description?: string;
+    id: string;
+    /**
+     * Whether the checkbox is checked.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Whether the checkbox is readonly.
+     * @default false
+     */
+    readonly?: boolean;
 }
-type StepperStepProps = StepperStepTyping & Pick<StepperVariants, "active" | "done">;
+type CheckboxProps = CheckboxTyping & CheckboxVariants;
 
-interface ProgressTyping {
+interface ChipTyping extends ChipSprinkle {
     /**
-     * The progress percentage, represented as a number between 0 and 100.
-     * This indicates the completion level of the process.
+     * Displays a delete icon and adds user interaction.
+     * @default false
      */
-    percentage: number;
+    closeable?: boolean;
 }
-type ProgressProps = ProgressTyping & ProgressSprinkle;
-
-type ProgressCircleProps = ProgressProps & ProgressVariants;
+type ChipProps = ChipTyping & ChipVariants;
 
 type InputProps = InputVariants;
 
+interface DropdownTyping {
+    /**
+     * A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.
+     * @default false
+     */
+    matchReferenceWidth?: boolean;
+    /**
+     * Adds listeners that dismiss (close) the floating element.
+     * @default true
+     */
+    enabledDismiss?: boolean;
+    /**
+     * Adds click event listeners that change the open state.
+     * @default true
+     */
+    enabledClick?: boolean;
+    /**
+     * Determines whether the dropdown should enable flipping the options' dropdown when there is not enough space to display it in its default direction.
+     * This can help ensure the dropdown is always visible on the screen.
+     * @default true
+     */
+    enabledFlip?: boolean;
+    /**
+     * Offest displaces the floating element from its core placement along the specified axes.
+     * @default 10
+     */
+    offset?: number;
+    /**
+     * Specifies the ID of the portal element where the dropdown should be rendered.
+     * This can be useful for rendering the dropdown in a different part of the DOM, such as a modal or overlay.
+     */
+    portalId?: string;
+    /**
+     * If true, the component is shown.
+     */
+    visible?: boolean;
+    /**
+     * Function to control dropdown opening and closing.
+     * @TJS-type (visible: boolean) => void;
+     */
+    onVisibility?: (visible: boolean) => void;
+}
+type DropdownProps = DropdownTyping & DropdownSprinkle & Pick<DropdownVariants, "padding">;
+
 interface DropdownItemTyping {
     /**
      * The name of the dropdown item. This is typically the text that is displayed for the item.
@@ -16982,6 +18048,15 @@ interface DropdownItemTyping {
 }
 type DropdownItemProps = DropdownItemTyping & Pick<DropdownVariants, "selected">;
 
+interface IconButtonTyping {
+    /**
+     * Disables the button, disallowing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+}
+type IconButtonProps = IconButtonTyping & IconButtonVariants;
+
 interface RadioButtonTyping {
     /**
      * Sets radio state to activated or deactivated.
@@ -17183,6 +18258,208 @@ interface SideNavigationItemTypings {
 }
 type SideNavigationItemProps = SideNavigationItemTypings & Pick<SideNavigationVariants, "level">;
 
+type AriaInvalid = "false" | "true" | "grammar" | "spelling" | null;
+
+/**
+ * Utility types for Web Components property handling in Rarui Design System
+ *
+ * These types help convert React-style camelCase properties to web component
+ * kebab-case attributes while maintaining type safety.
+ */
+/**
+ * Converts a camelCase string to kebab-case
+ *
+ * @example
+ * CamelToKebab<"maxWidth"> // "max-width"
+ * CamelToKebab<"portalId"> // "portal-id"
+ * CamelToKebab<"position"> // "position"
+ */
+type CamelToKebab<T extends string> = T extends `${infer Start}${infer Rest}` ? Rest extends `${infer First}${infer End}` ? First extends Uppercase<First> ? `${Lowercase<Start>}-${CamelToKebab<`${Lowercase<First>}${End}`>}` : `${Lowercase<Start>}${CamelToKebab<Rest>}` : Lowercase<T> : T;
+type CamelToKebabKeys<T> = {
+    [K in keyof T as CamelToKebab<string & K>]: T[K];
+};
+/**
+ * Common React properties that should be excluded from web component types
+ */
+type CommonReactExclusions = "children" | "className" | "style" | "ref" | "key";
+type WebComponentProperties<TReactProps, TExclude extends keyof TReactProps = never> = CamelToKebabKeys<Omit<Partial<TReactProps>, CommonReactExclusions | TExclude>>;
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-avatar": RaruiAvatar;
+    }
+}
+/**
+ * ## Rarui Avatar
+ * ---
+ * The Avatar component is normally used to display circular photos of the user's profile.
+ *
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/avatar) for more details.
+ */
+type AvatarManifestProperties = Pick<AvatarProps, "size">;
+type AvatarProperties = WebComponentProperties<AvatarManifestProperties>;
+
+declare const RaruiAvatar_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiAvatar extends RaruiAvatar_base {
+    size?: AvatarProperties["size"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+    private handleSlotChange;
+    private handleImageError;
+    private handleImageLoad;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-badge": RaruiBagde;
+    }
+}
+/**
+ * ## Rarui Badge
+ * ---
+ * The Badge components are only used to transmit dynamic information, such as a connection or status.
+ *
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/badge) for more details.
+ */
+type BadgeManifestProperties = BadgeProps;
+type BadgeProperties = WebComponentProperties<BadgeManifestProperties>;
+
+declare const RaruiBagde_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiBagde extends RaruiBagde_base {
+    variant?: BadgeProperties["variant"];
+    size?: BadgeProperties["size"];
+    appearance?: BadgeProperties["appearance"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-divider": RaruiDivider;
+    }
+}
+/**
+ * ## Rarui Divider
+ * ---
+ * A Divider is a thin line used to separate or group content in lists and layouts.
+ *
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/divider) for more details.
+ */
+type DividerManifestProperties = DividerProps;
+type DividerProperties = WebComponentProperties<DividerManifestProperties>;
+
+declare const RaruiDivider_base: (new (...args: any[]) => {
+    cssProps: Record<string, any>;
+    sprinkleAttrs: Record<string, any>;
+}) & (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiDivider extends RaruiDivider_base {
+    sprinkleAttrs: Record<string, string>;
+    direction?: DividerProperties["direction"];
+    type?: DividerProperties["type"];
+    thickness?: DividerProperties["thickness"];
+    color?: DividerProperties["color"];
+    size?: DividerProperties["size"];
+    private get _isPercentageSize();
+    static styles: CSSResult;
+    updated(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    private _updateHostWidth;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-icon": RaruiIcon;
+    }
+}
+/**
+ * ## Rarui Icon
+ * ---
+ * Iconography used in the system based on Google's Material Design.
+ *
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/icon) for more details.
+ */
+type Sizes = "small" | "medium" | "large";
+type IconManifestProperties = IconProps & {
+    /**
+     * Name of the icon to be rendered (must be in the @rarui/icons package).
+     */
+    name: IconName;
+    /**
+     * Icon size, can be 'small' |'medium' |'large' or a number.
+     * @default medium
+     */
+    size?: Sizes | number;
+};
+type IconProperties = WebComponentProperties<IconManifestProperties>;
+
+declare const RaruiIcon_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & (new (...args: any[]) => {
+    cssProps: Record<string, any>;
+    sprinkleAttrs: Record<string, any>;
+}) & typeof LitElement;
+declare class RaruiIcon extends RaruiIcon_base {
+    sprinkleAttrs: Record<string, string>;
+    name: IconProperties["name"];
+    size: Sizes | string;
+    static styles: CSSResult;
+    private getSvgWithSize;
+    render(): TemplateResult<1> | null;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-label": RaruiLabel;
+    }
+}
+/**
+ * ## Rarui Label
+ * ---
+ * The label component allows us to name elements within a form.
+ *
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/label) for more details.
+ */
+type LabelManifestProperties = {
+    /**
+     * The for attribute specifies which form element a label is bound to.
+     */
+    for?: string;
+    /**
+     * Specifies whether the label is hidden or not
+     * @default false
+     */
+    hidden?: boolean;
+};
+type LabelProperties = WebComponentProperties<LabelManifestProperties>;
+
+declare const RaruiLabel_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiLabel extends RaruiLabel_base {
+    for: LabelProperties["for"];
+    hidden: boolean;
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+    private _handleClick;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-stepper-step": RaruiStepperStep;
@@ -17446,7 +18723,7 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/badge) for more details.
  */
-type ProgressManifestProperties = ProgressProps$1;
+type ProgressManifestProperties = ProgressProps;
 type ProgressProperties = WebComponentProperties<ProgressManifestProperties>;
 
 declare const RaruiProgress_base: (new (...args: any[]) => {