@rarui/components 1.27.0-rc.3 → 1.28.0

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+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';
+
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -1041,6 +1044,208 @@ 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.
@@ -15253,297 +15458,6 @@ interface StandardLonghandProperties {
      */
     zoom?: Property.Zoom | Conditions<Property.Zoom>;
 }
-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;
@@ -16135,12 +16049,6 @@ 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})`;
@@ -16152,752 +16060,101 @@ declare const zIndexProperties: {
     "800": `var(--${string})` | `var(--${string}, ${string})`;
     "900": `var(--${string})` | `var(--${string}, ${string})`;
 };
-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<{
+declare const styles$6: {
+    container: RuntimeFn<{
         /**
-         * Specifies whether the chip will be displayed in the pill shape
-         * @default false
+         * Determines the visual style of the input, affecting its border
          */
-        pill: {
-            true: {
-                borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
+        appearance: {
+            success: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                ":hover": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":focus": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+            error: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                ":hover": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+                ":focus": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
             };
         };
         /**
-         * Specifies whether the chip is selected
-         * @default false
+         * Determines if the input have borders or not.
+         * @default true
          */
-        selected: {
+        border: {
             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})`;
-                };
+                borderWidth: `var(--${string})` | `var(--${string}, ${string})`;
             };
+            false: {
+                borderWidth: number;
+            };
+        };
+        size: {
+            large: {
+                height: "3rem";
+            };
+            medium: {
+                height: "2.5rem";
+            };
+            small: {
+                height: "2rem";
+            };
+        };
+    }>;
+    input: RuntimeFn<{
+        /**
+         * Places a divider between the input and the leading components
+         * @default true
+         */
+        divider: {
+            false: {};
         };
         /**
-         * Specifies the size of the chip
+         * Specifies the size of the input, controlling its dimensions.
          * @default medium
          */
         size: {
-            medium: {
+            large: {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
                 lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            medium: {
                 fontSize: `var(--${string})` | `var(--${string}, ${string})`;
-                height: "2rem";
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
             };
             small: {
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
                 fontSize: `var(--${string})` | `var(--${string}, ${string})`;
-                height: "1.5rem";
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
             };
         };
-        /**
-         * 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%";
+    }>;
+    leading: RuntimeFn<{
+        position: {
+            start: {
+                borderRightWidth: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            end: {
+                borderLeftWidth: `var(--${string})` | `var(--${string}, ${string})`;
             };
         };
-    }>;
-    content: RuntimeFn<{
-        /**
-         * Specifies whether to handle text overflow within the chip.
-         * When true, overflowing text is typically truncated with an ellipsis.
-         */
-        textOverflow: {
+        divider: {
             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: {
-            success: {
-                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
-                ":hover": {
-                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
-                };
-                ":focus": {
-                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
-                };
-            };
-            error: {
-                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
-                ":hover": {
-                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
-                };
-                ":focus": {
-                    borderColor: `var(--${string})` | `var(--${string}, ${string})`;
-                };
-            };
-        };
-        /**
-         * Determines if the input have borders or not.
-         * @default true
-         */
-        border: {
-            true: {
-                borderWidth: `var(--${string})` | `var(--${string}, ${string})`;
-            };
-            false: {
-                borderWidth: number;
-            };
-        };
-        size: {
-            large: {
-                height: "3rem";
-            };
-            medium: {
-                height: "2.5rem";
-            };
-            small: {
-                height: "2rem";
-            };
-        };
-    }>;
-    input: RuntimeFn<{
-        /**
-         * Places a divider between the input and the leading components
-         * @default true
-         */
-        divider: {
-            false: {};
-        };
-        /**
-         * Specifies the size of the input, controlling its dimensions.
-         * @default medium
-         */
-        size: {
-            large: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
-            };
-            medium: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
-            };
-            small: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
-                padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
-            };
-        };
-    }>;
-    leading: RuntimeFn<{
-        position: {
-            start: {
-                borderRightWidth: `var(--${string})` | `var(--${string}, ${string})`;
-            };
-            end: {
-                borderLeftWidth: `var(--${string})` | `var(--${string}, ${string})`;
-            };
-        };
-        divider: {
-            true: {
-                borderStyle: "solid";
-                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
-            };
-            false: {
-                borderRightWidth: number;
-                borderLeftWidth: number;
+                borderStyle: "solid";
+                borderColor: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            false: {
+                borderRightWidth: number;
+                borderLeftWidth: number;
             };
         };
         appearance: {
@@ -17113,98 +16370,6 @@ 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<{
@@ -17399,50 +16564,6 @@ 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: {
@@ -17817,107 +16938,16 @@ declare const stepperStyles: {
                 marginTop: "20px";
             };
             vertical: {
-                width: "1px";
-                marginTop: `var(--${string})` | `var(--${string}, ${string})`;
-                marginBottom: `var(--${string})` | `var(--${string}, ${string})`;
-                marginLeft: "18px";
-            };
-        };
-    }>;
-};
-
-type StepperVariants = NonNullable<RecipeVariants<typeof stepperStyles.stepper> & RecipeVariants<typeof stepperStyles.circle>>;
-
-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;
+                width: "1px";
+                marginTop: `var(--${string})` | `var(--${string}, ${string})`;
+                marginBottom: `var(--${string})` | `var(--${string}, ${string})`;
+                marginLeft: "18px";
+            };
+        };
+    }>;
+};
+
+type StepperVariants = NonNullable<RecipeVariants<typeof stepperStyles.stepper> & RecipeVariants<typeof stepperStyles.circle>>;
 
 interface StepperStepTyping {
     /**
@@ -17942,101 +16972,8 @@ 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 label of the checkbox.
-     */
-    label?: string;
-    /**
-     * The id of the checkbox.
-     */
-    id: string;
-    /**
-     * Whether the checkbox is checked.
-     * @default false
-     */
-    checked?: boolean;
-    /**
-     * Whether the checkbox is readonly.
-     * @default false
-     */
-    readonly?: boolean;
-}
-type CheckboxProps = CheckboxTyping & CheckboxVariants;
-
-interface ChipTyping extends ChipSprinkle {
-    /**
-     * Displays a delete icon and adds user interaction.
-     * @default false
-     */
-    closeable?: boolean;
-}
-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.
@@ -18045,15 +16982,6 @@ 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.
@@ -18090,18 +17018,6 @@ interface ToggleTyping {
 }
 type ToggleProps = ToggleTyping & ToggleVariants;
 
-interface AccordionProps {
-    /**
-     * Informs which accordion item is open by default, this value must be the same as informed in the index of each item
-     */
-    selectedDefault?: string;
-    /**
-     * Disables the accordion, disallowing user interaction.
-     * @default false
-     */
-    disabled?: boolean;
-}
-
 type AccordionBodyProps = Pick<AccordionVariants, "padding">;
 
 interface AccordionHeaderTyping {
@@ -18210,266 +17126,62 @@ interface SidebarTyping {
 }
 type SidebarProps = SidebarTyping & SidebarSprinkle & SidebarVariants;
 
-interface BreadcrumbProps {
-    /**
-     * Specifies the number of breadcrumb items to display after truncation.
-     * This is useful for managing the display of long breadcrumb lists.
-     * @default 10
-     */
-    itemsAfterTruncate?: number;
-}
-
-interface BreadcrumbItemTyping {
-    /**
-     * The name of the breadcrumb item. This is typically the text that is displayed for the item.
-     */
-    name?: string;
-}
-type BreadcrumbItemProps = BreadcrumbItemTyping & BreadcrumbVariants;
-
-type LinkProps = LinkVariants;
-
-interface PaginationTyping {
-    /**
-     * The currently selected page.
-     */
-    activePage: number;
-    /**
-     * The total number of pages.
-     */
-    pageCount: number;
-    /**
-     * Determines whether page numbers should be shown.
-     * @default true
-     */
-    showNumbers?: boolean;
-    /**
-     * Determines whether page arrows should be shown.
-     * @default true
-     */
-    showArrows?: boolean;
-    /**
-     * Called with event and page number when a page is clicked.
-     * @TJS-type (page: number) => void;
-     */
-    onPageChange: (page: number) => void;
-}
-type PaginationProps = PaginationTyping & PaginationVariants;
-
-interface SideNavigationTyping {
-    /**
-     * Title of the sideNavigation
-     */
-    name: string;
-    /**
-     * Description of the sideNavigation.
-     */
-    description?: string;
-}
-type SideNavigationProps = SideNavigationTyping & SideNavigationVariants;
-
-interface SideNavigationItemTypings {
-    /**
-     * Determines if the item is active or not.
-     */
-    active?: boolean;
-}
-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>;
-}) & 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>;
+interface BreadcrumbItemTyping {
+    /**
+     * The name of the breadcrumb item. This is typically the text that is displayed for the item.
+     */
+    name?: string;
 }
+type BreadcrumbItemProps = BreadcrumbItemTyping & BreadcrumbVariants;
 
-type IconName = "add-circle-filled" | "add-circle-outlined" | "alarm-filled" | "alarm-outlined" | "alternate-email" | "archive-all-filled" | "archive-all-outlined" | "archive-filled" | "archive-in-filled" | "archive-in-outlined" | "archive-outlined" | "arrow-alt-down" | "arrow-alt-left" | "arrow-alt-right" | "arrow-alt-up" | "arrow-circle-down-filled" | "arrow-circle-down-outlined" | "arrow-circle-up-filled" | "arrow-circle-up-outlined" | "arrow-circled-down-circle-outlined" | "arrow-circled-down-filled" | "arrow-circled-up-circle-outlined" | "arrow-direction-down-up" | "arrow-direction-left-right" | "arrow-direction-right-left" | "arrow-direction-up-down" | "arrow-directions" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-first-page" | "arrow-last-page" | "arrow-left" | "arrow-line-down" | "arrow-line-left" | "arrow-line-long-down" | "arrow-line-long-left" | "arrow-line-long-right" | "arrow-line-long-up" | "arrow-line-right" | "arrow-line-up" | "arrow-right" | "arrow-subdirectory-left" | "arrow-subdirectory-right" | "arrow-trending-down" | "arrow-trending-up" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "attachment" | "backspace" | "backspace-outlined" | "barley" | "barley-off" | "bolt-circle-filled" | "bolt-circle-outlined" | "bookmark-filled" | "bookmark-outlined" | "calendar-date-range-filled" | "calendar-date-range-outlined" | "calendar-event-filled" | "calendar-event-outlined" | "calendar-filled" | "calendar-outlined" | "camera-filled" | "camera-outlined" | "camera-shutter-filled" | "camera-shutter-outlined" | "cancel-circle-filled" | "cancel-circle-outlined" | "car-filled" | "car-outlined" | "chart-bars-filled" | "chart-bars-outlined" | "chat-bubble-filled" | "chat-bubble-outlined" | "chat-message-filled" | "chat-message-outlined" | "check" | "check-circle-filled" | "check-circle-outlined" | "check-small" | "chevron-big-down" | "chevron-big-left" | "chevron-big-right" | "chevron-big-up" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "clock-filled" | "clock-outlined" | "close" | "cloud-filled" | "cloud-outlined" | "contact-support-filled" | "contact-support-outlined" | "content-copy-filled" | "content-copy-outlined" | "content-paste-filled" | "content-paste-outlined" | "conversation-filled" | "conversation-outlined" | "copyright-filled" | "copyright-outlined" | "credit-card-filled" | "credit-card-outlined" | "danger-filled" | "danger-outlined" | "dashboard-filled" | "dashboard-outlined" | "document-filled" | "document-outlined" | "document-text-filled" | "document-text-outlined" | "download-filled" | "download-outlined" | "eco-filled" | "eco-outlined" | "edit-filled" | "edit-outlined" | "euro-symbol" | "exit-fullscreen" | "eye-filled" | "eye-off-filled" | "eye-off-outlined" | "eye-outlined" | "facebook-filled" | "facebook-outlined" | "file-copy-filled" | "file-copy-outlined" | "filter-alt-filled" | "filter-alt-outlined" | "filter-list" | "fingerprint" | "flag-filled" | "flag-outlined" | "flag-tour-filled" | "flag-tour-outlined" | "flower-filled" | "flower-outlined" | "folder-filled" | "folder-list-filled" | "folder-list-outlined" | "folder-open" | "folder-outlined" | "fruit-apple-filled" | "fruit-apple-outlined" | "fullscreen-filled" | "fullscreen-outlined" | "google" | "google-play" | "headphones-filled" | "headphones-outlined" | "heart-filled" | "heart-outlined" | "help-filled" | "help-outlined" | "history" | "home-filled" | "home-outlined" | "image-filled" | "image-outlined" | "info-circle-filled" | "info-circle-outlined" | "instagram" | "instagram-outlined" | "label-filled" | "label-important-filled" | "label-important-outlined" | "label-outlined" | "language" | "lightbulb-filled" | "lightbulb-outlined" | "link" | "linkedin-filled" | "linkedin-outlined" | "loader" | "loading" | "lock-filled" | "lock-open-filled" | "lock-open-outlined" | "lock-outlined" | "login" | "logout" | "mail-filled" | "mail-open-filled" | "mail-open-outlined" | "mail-outlined" | "menu" | "menu-large" | "microphone-filled" | "microphone-outlined" | "minus" | "money-filled" | "money-outlined" | "mood-bad" | "mood-bad-outlined" | "mood-filled" | "mood-outlined" | "more-horiz" | "more-vert" | "music-note-filled" | "music-note-outlined" | "notification-filled" | "notification-outlined" | "open-in-new" | "package" | "package-outlined" | "pause-filled" | "pause-outlined" | "pets-filled" | "pets-outlined" | "phone-call-filled" | "phone-call-outlined" | "phone-filled" | "phone-outlined" | "pin-filled" | "pin-outlined" | "play-arrow-filled" | "play-arrow-outlined" | "play-circle-filled" | "play-circle-outlined" | "plus" | "power-settings-new" | "printer-filled" | "printer-outlined" | "push-pin-filled" | "push-pin-outlined" | "receipt-filled" | "receipt-outlined" | "recycle" | "redeem" | "redo" | "refresh" | "refresh-alt" | "remove" | "remove-circle-filled" | "remove-circle-outlined" | "repeat" | "reply" | "save-alt" | "screen-outlined" | "search" | "send-filled" | "send-outlined" | "sentiment-dissatisfied-filled" | "sentiment-dissatisfied-outlined" | "sentiment-neutral-filled" | "sentiment-neutral-outlined" | "sentiment-satisfied-filled" | "sentiment-satisfied-outlined" | "sentiment-very-dissatisfied-filled" | "sentiment-very-dissatisfied-outlined" | "sentiment-very-satisfied-filled" | "sentiment-very-satisfied-outlined" | "settings-filled" | "settings-outlined" | "share-filled" | "share-outlined" | "shopping-bag-filled" | "shopping-bag-outlined" | "shopping-cart-add" | "shopping-cart-filled" | "shopping-cart-outlined" | "sprout" | "sprout-outline-outlined" | "star-filled" | "star-outlined" | "stay-primary-portrait" | "storefront" | "tag-filled" | "tag-outlined" | "textsms-filled" | "textsms-outlined" | "thumb-down-filled" | "thumb-down-outlined" | "thumb-up-filled" | "thumb-up-outlined" | "tiktok" | "toc" | "trash-filled" | "trash-outlined" | "truck-filled" | "truck-outlined" | "tune" | "twitter" | "undo" | "upload-filled" | "upload-outlined" | "user-circle-filled" | "user-circle-outlined" | "user-filled" | "user-outlined" | "user-square-filled" | "user-square-outlined" | "users-filled" | "users-outlined" | "view-grid-filled" | "view-grid-outlined" | "view-list-filled" | "view-list-outlined" | "warning-bubble-filled" | "warning-bubble-outlined" | "warning-filled" | "warning-outlined" | "whatsapp-filled" | "whatsapp-outlined" | "work-filled" | "work-outlined" | "wysiwyg-filled" | "youtube-filled" | "youtube-outlined" | "zoom-in" | "zoom-out";
+type LinkProps = LinkVariants;
 
-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 & {
+interface PaginationTyping {
     /**
-     * Name of the icon to be rendered (must be in the @rarui/icons package).
+     * The currently selected page.
      */
-    name: IconName;
+    activePage: number;
     /**
-     * Icon size, can be 'small' |'medium' |'large' or a number.
-     * @default medium
+     * The total number of pages.
      */
-    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;
+    pageCount: number;
+    /**
+     * Determines whether page numbers should be shown.
+     * @default true
+     */
+    showNumbers?: boolean;
+    /**
+     * Determines whether page arrows should be shown.
+     * @default true
+     */
+    showArrows?: boolean;
+    /**
+     * Called with event and page number when a page is clicked.
+     * @TJS-type (page: number) => void;
+     */
+    onPageChange: (page: number) => void;
 }
+type PaginationProps = PaginationTyping & PaginationVariants;
 
-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 = {
+interface SideNavigationTyping {
     /**
-     * The for attribute specifies which form element a label is bound to.
+     * Title of the sideNavigation
      */
-    for?: string;
+    name: string;
     /**
-     * Specifies whether the label is hidden or not
-     * @default false
+     * Description of the sideNavigation.
      */
-    hidden?: boolean;
-};
-type LabelProperties = WebComponentProperties<LabelManifestProperties>;
+    description?: string;
+}
+type SideNavigationProps = SideNavigationTyping & SideNavigationVariants;
 
-declare class RaruiLabel extends LitElement {
-    for: LabelProperties["for"];
-    hidden: boolean;
-    static styles: CSSResult;
-    render(): TemplateResult<1>;
-    private _handleClick;
+interface SideNavigationItemTypings {
+    /**
+     * Determines if the item is active or not.
+     */
+    active?: boolean;
 }
+type SideNavigationItemProps = SideNavigationItemTypings & Pick<SideNavigationVariants, "level">;
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -18486,10 +17198,16 @@ declare global {
 type StepperStepManifestProperties = StepperStepProps;
 type StepperStepProperties = WebComponentProperties<StepperStepManifestProperties>;
 
-declare class RaruiStepperStep extends LitElement {
+declare const RaruiStepperStep_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiStepperStep extends RaruiStepperStep_base {
     description?: StepperStepProperties["description"];
     active?: StepperStepProperties["active"];
     done?: StepperStepProperties["done"];
+    title: string;
     private direction;
     static styles: CSSResult;
     connectedCallback(): void;
@@ -18512,11 +17230,13 @@ declare global {
 type StepperManifestProperties = StepperProps;
 type StepperProperties = WebComponentProperties<StepperManifestProperties>;
 
-declare class RaruiStepper extends LitElement {
-    direction: StepperProperties["direction"];
+declare const RaruiStepper_base: (new (...args: any[]) => {
     ariaLabel: string | null;
     ariaLabelledBy: string | null;
     ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiStepper extends RaruiStepper_base {
+    direction: StepperProperties["direction"];
     private assignedSteps;
     private steps;
     static styles: CSSResult;
@@ -18648,7 +17368,12 @@ type TooltipManifestProperties = Omit<TooltipProps, "visible" | "onVisibility" |
 };
 type TooltipProperties = WebComponentProperties<TooltipManifestProperties>;
 
-declare class RaruiTooltip extends LitElement {
+declare const RaruiTooltip_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiTooltip extends RaruiTooltip_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -18666,9 +17391,6 @@ declare class RaruiTooltip extends LitElement {
     position: TooltipProperties["position"];
     strategy: TooltipProperties["strategy"];
     open: boolean;
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     reference: HTMLElement;
     floating: HTMLElement;
     arrowEl: HTMLElement;
@@ -18724,15 +17446,17 @@ declare global {
  *
  See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/exhibition/badge) for more details.
  */
-type ProgressManifestProperties = ProgressProps;
+type ProgressManifestProperties = ProgressProps$1;
 type ProgressProperties = WebComponentProperties<ProgressManifestProperties>;
 
-declare class RaruiProgress extends LitElement {
-    percentage?: ProgressProperties["percentage"];
-    color?: ProgressProperties["color"];
+declare const RaruiProgress_base: (new (...args: any[]) => {
     ariaLabel: string | null;
     ariaLabelledBy: string | null;
     ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiProgress extends RaruiProgress_base {
+    percentage?: ProgressProperties["percentage"];
+    color?: ProgressProperties["color"];
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
@@ -18753,15 +17477,17 @@ declare global {
 type StatusManifestProperties = StatusProps;
 type StatusProperties = WebComponentProperties<StatusManifestProperties>;
 
-declare class RaruiStatus extends LitElement {
+declare const RaruiStatus_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiStatus extends RaruiStatus_base {
     appearance?: StatusProperties["appearance"];
     size?: StatusProperties["size"];
     variant?: StatusProperties["variant"];
     full?: StatusProperties["full"];
     dot: StatusProperties["dot"];
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     static styles: CSSResult;
     render(): TemplateResult<1>;
 }
@@ -19139,10 +17865,18 @@ type DropdownItemManifestProperties = DropdownItemProps & {
      */
     value?: string;
     /**
-     * Defines the native button type.
-     * @default button
+     * Defines the HTML element type to render (button or anchor).
+     * @default "button"
      */
-    type?: "button" | "submit" | "reset";
+    as?: "button" | "a";
+    /**
+     * The href URL when as="a".
+     */
+    href?: string;
+    /**
+     * The target attribute when as="a".
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top";
     /**
      * ARIA role for the dropdown item.
      * @default menuitem
@@ -19151,7 +17885,17 @@ type DropdownItemManifestProperties = DropdownItemProps & {
 };
 type DropdownItemProperties = WebComponentProperties<DropdownItemManifestProperties>;
 
-declare class RaruiDropdownItem extends LitElement {
+declare const RaruiDropdownItem_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & (new (...args: any[]) => {
+    getPassThroughAttributes(allowedPrefixes?: string[], excludedAttributes?: string[]): Record<string, string>;
+    isManagedAttribute(attrName: string, additionalManagedAttrs?: string[]): boolean;
+    getDataAttributes(excludedAttributes?: string[]): Record<string, string>;
+    getDataAndAriaAttributes(excludedAttributes?: string[]): Record<string, string>;
+}) & typeof LitElement;
+declare class RaruiDropdownItem extends RaruiDropdownItem_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -19162,14 +17906,14 @@ declare class RaruiDropdownItem extends LitElement {
     selected: DropdownItemProperties["selected"];
     disabled: DropdownItemProperties["disabled"];
     value: DropdownItemProperties["value"];
-    type: DropdownItemProperties["type"];
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
+    as: DropdownItemProperties["as"];
+    href: DropdownItemProperties["href"];
+    target: DropdownItemProperties["target"];
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     static styles: CSSResult;
     private handleClick;
     private handleKeydown;
+    private renderContent;
     render(): TemplateResult<1>;
 }
 
@@ -19206,7 +17950,12 @@ type IconButtonManifestProperties = IconButtonProps & {
 };
 type IconButtonProperties = WebComponentProperties<IconButtonManifestProperties>;
 
-declare class RaruiIconButton extends LitElement {
+declare const RaruiIconButton_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiIconButton extends RaruiIconButton_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -19222,9 +17971,6 @@ declare class RaruiIconButton extends LitElement {
     name: IconButtonProperties["name"];
     value: IconButtonProperties["value"];
     form: IconButtonProperties["form"];
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     ariaPressed: "true" | "false" | "mixed" | null;
     ariaExpanded: "true" | "false" | null;
     static styles: CSSResult;
@@ -19389,7 +18135,12 @@ type RadioButtonManifestProperties = RadioButtonProps & {
 };
 type RadioButtonProperties = WebComponentProperties<RadioButtonManifestProperties>;
 
-declare class RaruiRadioButton extends LitElement {
+declare const RaruiRadioButton_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiRadioButton extends RaruiRadioButton_base {
     id: string;
     disabled: boolean;
     name?: string;
@@ -19401,9 +18152,6 @@ declare class RaruiRadioButton extends LitElement {
     form: RadioButtonProperties["form"];
     required: RadioButtonProperties["required"];
     readonly: RadioButtonProperties["readonly"];
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     private _internals;
     static formAssociated: boolean;
     constructor();
@@ -19488,7 +18236,12 @@ type TextareaManifestProperties = TextareaProps & {
 };
 type TextareaProperties = WebComponentProperties<TextareaManifestProperties>;
 
-declare class RaruiTextarea extends LitElement {
+declare const RaruiTextarea_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiTextarea extends RaruiTextarea_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -19511,9 +18264,6 @@ declare class RaruiTextarea extends LitElement {
     placeholder: TextareaProperties["placeholder"];
     minlength: TextareaProperties["minlength"];
     maxlength: TextareaProperties["maxlength"];
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     ariaInvalid: AriaInvalid;
     static styles: CSSResult;
     render(): TemplateResult<1>;
@@ -19566,7 +18316,12 @@ type ToggleManifestProperties = ToggleProps & {
 };
 type ToggleProperties = WebComponentProperties<ToggleManifestProperties>;
 
-declare class RaruiToggle extends LitElement {
+declare const RaruiToggle_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiToggle extends RaruiToggle_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -19582,9 +18337,6 @@ declare class RaruiToggle extends LitElement {
     value: ToggleProperties["value"];
     form: ToggleProperties["form"];
     required: ToggleProperties["required"];
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     ariaInvalid: AriaInvalid;
     private _internals;
     static formAssociated: boolean;
@@ -19668,10 +18420,12 @@ declare global {
 type BreadcrumbManifestProperties = BreadcrumbProps;
 type BreadcrumbProperties = WebComponentProperties<BreadcrumbManifestProperties>;
 
-declare class RaruiBreadcrumb extends LitElement {
+declare const RaruiBreadcrumb_base: (new (...args: any[]) => {
     ariaLabel: string | null;
     ariaLabelledBy: string | null;
     ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiBreadcrumb extends RaruiBreadcrumb_base {
     itemsAfterTruncate: BreadcrumbProperties["items-after-truncate"];
     private items;
     private visibleItems;
@@ -19719,16 +18473,23 @@ type BreadcrumbItemManifestProperties = BreadcrumbItemProps & {
 };
 type BreadcrumbItemProperties = WebComponentProperties<BreadcrumbItemManifestProperties>;
 
-declare class RaruiBreadcrumbItem extends LitElement {
+declare const RaruiBreadcrumbItem_base: (new (...args: any[]) => {
+    getPassThroughAttributes(allowedPrefixes?: string[], excludedAttributes?: string[]): Record<string, string>;
+    isManagedAttribute(attrName: string, additionalManagedAttrs?: string[]): boolean;
+    getDataAttributes(excludedAttributes?: string[]): Record<string, string>;
+    getDataAndAriaAttributes(excludedAttributes?: string[]): Record<string, string>;
+}) & (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiBreadcrumbItem extends RaruiBreadcrumbItem_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
     };
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     name?: BreadcrumbItemProperties["name"];
     href?: BreadcrumbItemProperties["href"];
     active?: BreadcrumbItemProperties["active"];
@@ -19855,7 +18616,12 @@ declare global {
 type PaginationManifestProperties = PaginationProps;
 type PaginationProperties = WebComponentProperties<PaginationManifestProperties, "onPageChange">;
 
-declare class RaruiPagination extends LitElement {
+declare const RaruiPagination_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiPagination extends RaruiPagination_base {
     activePage: PaginationProperties["active-page"];
     pageCount: PaginationProperties["page-count"];
     size?: PaginationProperties["size"];
@@ -19899,15 +18665,40 @@ type SideNavigationManifestProperties = SideNavigationProps & {
      * @default "button"
      */
     as?: "button" | "a";
+    /**
+     * The href URL when as="a".
+     */
+    href?: string;
+    /**
+     * The target attribute when as="a".
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    /**
+     * The rel attribute when as="a".
+     */
+    rel?: string;
 };
 type SideNavigationProperties = WebComponentProperties<SideNavigationManifestProperties>;
 
-declare class RaruiSideNavigation extends LitElement {
+declare const RaruiSideNavigation_base: (new (...args: any[]) => {
+    getPassThroughAttributes(allowedPrefixes?: string[], excludedAttributes?: string[]): Record<string, string>;
+    isManagedAttribute(attrName: string, additionalManagedAttrs?: string[]): boolean;
+    getDataAttributes(excludedAttributes?: string[]): Record<string, string>;
+    getDataAndAriaAttributes(excludedAttributes?: string[]): Record<string, string>;
+}) & (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiSideNavigation extends RaruiSideNavigation_base {
     name: SideNavigationProperties["name"];
     description: SideNavigationProperties["description"];
     active: SideNavigationProperties["active"];
     disabled: SideNavigationProperties["disabled"];
     as: SideNavigationProperties["as"];
+    href: SideNavigationProperties["href"];
+    target: SideNavigationProperties["target"];
+    rel: SideNavigationProperties["rel"];
     private _open;
     private _buttonRef;
     static styles: CSSResult;
@@ -19938,22 +18729,44 @@ type SideNavigationItemManifestProperties = SideNavigationItemProps & {
      * @default "button"
      */
     as?: "button" | "a";
+    /**
+     * The href URL when as="a".
+     */
+    href?: string;
+    /**
+     * The target attribute when as="a".
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    /**
+     * The rel attribute when as="a".
+     */
+    rel?: string;
 };
 type SideNavigationItemProperties = WebComponentProperties<SideNavigationItemManifestProperties>;
 
-declare class RaruiSideNavigationItem extends LitElement {
+declare const RaruiSideNavigationItem_base: (new (...args: any[]) => {
+    getPassThroughAttributes(allowedPrefixes?: string[], excludedAttributes?: string[]): Record<string, string>;
+    isManagedAttribute(attrName: string, additionalManagedAttrs?: string[]): boolean;
+    getDataAttributes(excludedAttributes?: string[]): Record<string, string>;
+    getDataAndAriaAttributes(excludedAttributes?: string[]): Record<string, string>;
+}) & (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiSideNavigationItem extends RaruiSideNavigationItem_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
     };
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     active: SideNavigationItemProperties["active"];
     level: SideNavigationItemProperties["level"];
     as: SideNavigationItemProperties["as"];
+    href: SideNavigationItemProperties["href"];
+    target: SideNavigationItemProperties["target"];
+    rel: SideNavigationItemProperties["rel"];
     private _itemRef;
     static styles: CSSResult;
     private _handleClick;
@@ -19997,6 +18810,10 @@ type AccordionProperties = WebComponentProperties<AccordionManifestProperties>;
 declare const RaruiAccordion_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 RaruiAccordion extends RaruiAccordion_base {
     sprinkleAttrs: Record<string, string>;
@@ -20053,7 +18870,12 @@ declare global {
 type AccordionHeaderManifestProperties = AccordionHeaderProps;
 type AccordionHeaderProperties = WebComponentProperties<AccordionHeaderManifestProperties>;
 
-declare class RaruiAccordionHeader extends LitElement {
+declare const RaruiAccordionHeader_base: (new (...args: any[]) => {
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiAccordionHeader extends RaruiAccordionHeader_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -20066,9 +18888,6 @@ declare class RaruiAccordionHeader extends LitElement {
     noIconToggle: AccordionHeaderProperties["no-icon-toggle"];
     disabled: boolean;
     selected: boolean;
-    ariaLabel: string | null;
-    ariaLabelledBy: string | null;
-    ariaDescribedBy: string | null;
     static styles: CSSResult;
     private handleClick;
     private getTitleSize;
@@ -20121,13 +18940,15 @@ type BannerManifestProperties = BannerProps & {
 };
 type BannerProperties = WebComponentProperties<BannerManifestProperties, "onClose">;
 
-declare class RaruiBanner extends LitElement {
-    appearance?: BannerProperties["appearance"];
-    floating: BannerProperties["floating"];
-    closable: BannerProperties["closable"];
+declare const RaruiBanner_base: (new (...args: any[]) => {
     ariaLabel: string | null;
     ariaLabelledBy: string | null;
     ariaDescribedBy: string | null;
+}) & typeof LitElement;
+declare class RaruiBanner extends RaruiBanner_base {
+    appearance?: BannerProperties["appearance"];
+    floating: BannerProperties["floating"];
+    closable: BannerProperties["closable"];
     static styles: CSSResult;
     private handleClose;
     render(): TemplateResult<1>;