npm - @luscii-healthtech/web-ui - Versions diffs - 58.19.2 → 59.0.0 - Mend

@luscii-healthtech/web-ui 58.19.2 → 59.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (310) hide show

package/dist/stories/DetailsDisclosure.stories.d.ts CHANGED Viewed

@@ -2,14 +2,14 @@ import { type FC } from "react";
 import { type StoryObj } from "@storybook/react-vite";
 declare const meta: {
     title: string;
-    component: FC<Omit<Omit<import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & Partial<Record<"_p" | "_pt" | "_pr" | "_pb" | "_pl" | "_px" | "_py" | "_m" | "_mt" | "_mr" | "_mb" | "_ml" | "_mx" | "_my", "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl">> & {
+    component: FC<Omit<Omit<import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & Partial<Record<"_p" | "_pt" | "_pr" | "_pb" | "_pl" | "_px" | "_py" | "_m" | "_mt" | "_mr" | "_mb" | "_ml" | "_mx" | "_my", "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl">> & {
         as?: "details" | undefined;
-        elevation?: "base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge";
-        width?: "full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES;
+        elevation?: "small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge";
+        width?: "full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES;
         backgroundColor?: import("../src/types/general.types").BackgroundColor;
-        borderRadius?: keyof typeof import("../src").SIZES;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES;
-        borderRadiusRight?: keyof typeof import("../src").SIZES;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor;
         cursor?: import("../src/types/general.types").CursorOption;
     } & {
@@ -60,50 +60,19 @@ export declare const OpenByDefault: {
         open?: undefined;
         content?: string | undefined;
         dir?: string | undefined;
-        accessKey?: string | undefined;
-        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
-        autoFocus?: boolean | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-        contextMenu?: string | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
-        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-        hidden?: boolean | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
         id?: string | undefined;
         lang?: string | undefined;
+        name?: string | undefined;
         nonce?: string | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined;
-        translate?: "yes" | "no" | undefined;
-        radioGroup?: string | undefined;
-        role?: import("react").AriaRole | undefined;
-        about?: string | undefined;
-        datatype?: string | undefined;
-        inlist?: any;
-        prefix?: string | undefined;
-        property?: string | undefined;
-        rel?: string | undefined;
-        resource?: string | undefined;
-        rev?: string | undefined;
-        typeof?: string | undefined;
-        vocab?: string | undefined;
-        autoCorrect?: string | undefined;
-        autoSave?: string | undefined;
-        itemProp?: string | undefined;
-        itemScope?: boolean | undefined;
-        itemType?: string | undefined;
-        itemID?: string | undefined;
-        itemRef?: string | undefined;
-        results?: number | undefined;
-        security?: string | undefined;
-        unselectable?: "on" | "off" | undefined;
-        popover?: "" | "auto" | "manual" | "hint" | undefined;
-        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
-        popoverTarget?: string | undefined;
-        inert?: boolean | undefined;
-        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
-        is?: string | undefined;
-        exportparts?: string | undefined;
         part?: string | undefined;
+        width?: "full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined;
+        cursor?: import("../src/types/general.types").CursorOption;
+        elevation?: "small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge";
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -157,9 +126,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined;
         "aria-valuenow"?: number | undefined;
         "aria-valuetext"?: string | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -329,48 +295,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined;
-        width?: "full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES;
-        cursor?: import("../src/types/general.types").CursorOption;
-        elevation?: "base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge";
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES;
-        borderRadiusRight?: keyof typeof import("../src").SIZES;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor;
-        omitBorder?: boolean;
-        omitSummaryDivider?: boolean;
-        onToggleDetails?: (isOpen: boolean) => void;
-    } | {
-        openByDefault: boolean;
-        backgroundColor?: import("../src/types/general.types").BackgroundColor;
-        children?: import("react").ReactNode | undefined;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined;
-        slot?: string | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined;
-        color?: string | undefined;
-        suppressHydrationWarning?: boolean | undefined;
-        defaultChecked?: boolean | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined;
-        open?: undefined;
-        content?: string | undefined;
-        dir?: string | undefined;
         accessKey?: string | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
@@ -379,14 +303,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
-        id?: string | undefined;
-        lang?: string | undefined;
-        nonce?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined;
         translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined;
         datatype?: string | undefined;
         inlist?: any;
@@ -414,7 +333,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
         exportparts?: string | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor;
+        omitBorder?: boolean;
+        omitSummaryDivider?: boolean;
+        onToggleDetails?: (isOpen: boolean) => void;
+    } | {
+        openByDefault: boolean;
+        backgroundColor?: import("../src/types/general.types").BackgroundColor;
+        children?: import("react").ReactNode | undefined;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined;
+        slot?: string | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined;
+        color?: string | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        open?: undefined;
+        content?: string | undefined;
+        dir?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        name?: string | undefined;
+        nonce?: string | undefined;
         part?: string | undefined;
+        width?: "full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined;
+        cursor?: import("../src/types/general.types").CursorOption;
+        elevation?: "small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge";
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -468,9 +437,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined;
         "aria-valuenow"?: number | undefined;
         "aria-valuetext"?: string | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -640,48 +606,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined;
-        width?: "full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES;
-        cursor?: import("../src/types/general.types").CursorOption;
-        elevation?: "base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge";
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES;
-        borderRadiusRight?: keyof typeof import("../src").SIZES;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor;
-        omitBorder?: boolean;
-        omitSummaryDivider?: boolean;
-        onToggleDetails?: (isOpen: boolean) => void;
-    } | {
-        openByDefault: boolean;
-        backgroundColor?: import("../src/types/general.types").BackgroundColor;
-        children?: import("react").ReactNode | undefined;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined;
-        slot?: string | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined;
-        color?: string | undefined;
-        suppressHydrationWarning?: boolean | undefined;
-        defaultChecked?: boolean | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined;
-        open?: undefined;
-        content?: string | undefined;
-        dir?: string | undefined;
         accessKey?: string | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
@@ -690,14 +614,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
-        id?: string | undefined;
-        lang?: string | undefined;
-        nonce?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined;
         translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined;
         datatype?: string | undefined;
         inlist?: any;
@@ -725,7 +644,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
         exportparts?: string | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor;
+        omitBorder?: boolean;
+        omitSummaryDivider?: boolean;
+        onToggleDetails?: (isOpen: boolean) => void;
+    } | {
+        openByDefault: boolean;
+        backgroundColor?: import("../src/types/general.types").BackgroundColor;
+        children?: import("react").ReactNode | undefined;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined;
+        slot?: string | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined;
+        color?: string | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        open?: undefined;
+        content?: string | undefined;
+        dir?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        name?: string | undefined;
+        nonce?: string | undefined;
         part?: string | undefined;
+        width?: "full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined;
+        cursor?: import("../src/types/general.types").CursorOption;
+        elevation?: "small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge";
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -779,9 +748,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined;
         "aria-valuenow"?: number | undefined;
         "aria-valuetext"?: string | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -951,48 +917,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined;
-        width?: "full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES;
-        cursor?: import("../src/types/general.types").CursorOption;
-        elevation?: "base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge";
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES;
-        borderRadiusRight?: keyof typeof import("../src").SIZES;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor;
-        omitBorder?: boolean;
-        omitSummaryDivider?: boolean;
-        onToggleDetails?: (isOpen: boolean) => void;
-    } | {
-        openByDefault: boolean;
-        backgroundColor?: import("../src/types/general.types").BackgroundColor;
-        children?: import("react").ReactNode | undefined;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined;
-        slot?: string | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined;
-        color?: string | undefined;
-        suppressHydrationWarning?: boolean | undefined;
-        defaultChecked?: boolean | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined;
-        open?: boolean | undefined;
-        content?: string | undefined;
-        dir?: string | undefined;
         accessKey?: string | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
@@ -1001,14 +925,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
-        id?: string | undefined;
-        lang?: string | undefined;
-        nonce?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined;
         translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined;
         datatype?: string | undefined;
         inlist?: any;
@@ -1036,7 +955,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
         exportparts?: string | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor;
+        omitBorder?: boolean;
+        omitSummaryDivider?: boolean;
+        onToggleDetails?: (isOpen: boolean) => void;
+    } | {
+        openByDefault: boolean;
+        backgroundColor?: import("../src/types/general.types").BackgroundColor;
+        children?: import("react").ReactNode | undefined;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined;
+        slot?: string | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined;
+        color?: string | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        open?: boolean | undefined;
+        content?: string | undefined;
+        dir?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        name?: string | undefined;
+        nonce?: string | undefined;
         part?: string | undefined;
+        width?: "full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined;
+        cursor?: import("../src/types/general.types").CursorOption;
+        elevation?: "small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge";
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -1090,9 +1059,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined;
         "aria-valuenow"?: number | undefined;
         "aria-valuetext"?: string | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -1262,92 +1228,95 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined;
-        width?: "full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES;
-        cursor?: import("../src/types/general.types").CursorOption;
-        elevation?: "base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge";
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES;
-        borderRadiusRight?: keyof typeof import("../src").SIZES;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor;
-        omitBorder?: boolean;
-        omitSummaryDivider?: boolean;
-        onToggleDetails?: (isOpen: boolean) => void;
-    };
-    decorators?: import("storybook/internal/csf").DecoratorFunction<import("@storybook/react").ReactRenderer, {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
+        accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+        autoFocus?: boolean | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        hidden?: boolean | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        exportparts?: string | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor;
+        omitBorder?: boolean;
+        omitSummaryDivider?: boolean;
+        onToggleDetails?: (isOpen: boolean) => void;
+    };
+    decorators?: import("storybook/internal/csf").DecoratorFunction<import("@storybook/react").ReactRenderer, {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
         open?: undefined;
         content?: string | undefined | undefined;
         dir?: string | undefined | undefined;
-        accessKey?: string | undefined | undefined;
-        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-        autoFocus?: boolean | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
-        contextMenu?: string | undefined | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
-        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-        hidden?: boolean | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
-        translate?: "yes" | "no" | undefined | undefined;
-        radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
-        about?: string | undefined | undefined;
-        datatype?: string | undefined | undefined;
-        inlist?: any;
-        prefix?: string | undefined | undefined;
-        property?: string | undefined | undefined;
-        rel?: string | undefined | undefined;
-        resource?: string | undefined | undefined;
-        rev?: string | undefined | undefined;
-        typeof?: string | undefined | undefined;
-        vocab?: string | undefined | undefined;
-        autoCorrect?: string | undefined | undefined;
-        autoSave?: string | undefined | undefined;
-        itemProp?: string | undefined | undefined;
-        itemScope?: boolean | undefined | undefined;
-        itemType?: string | undefined | undefined;
-        itemID?: string | undefined | undefined;
-        itemRef?: string | undefined | undefined;
-        results?: number | undefined | undefined;
-        security?: string | undefined | undefined;
-        unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
-        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-        popoverTarget?: string | undefined | undefined;
-        inert?: boolean | undefined | undefined;
-        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-        is?: string | undefined | undefined;
-        exportparts?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -1401,9 +1370,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -1573,48 +1539,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: boolean | undefined;
-    } | {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: boolean | undefined | undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -1623,14 +1547,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -1658,7 +1577,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: boolean | undefined;
+    } | {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: boolean | undefined | undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -1712,9 +1681,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -1884,48 +1850,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: never | undefined;
-    }> | import("storybook/internal/csf").DecoratorFunction<import("@storybook/react").ReactRenderer, {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -1934,14 +1858,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -1969,7 +1888,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: never | undefined;
+    }> | import("storybook/internal/csf").DecoratorFunction<import("@storybook/react").ReactRenderer, {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -2023,9 +1992,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -2195,48 +2161,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: boolean | undefined;
-    } | {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: boolean | undefined | undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -2245,14 +2169,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -2280,7 +2199,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: boolean | undefined;
+    } | {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: boolean | undefined | undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -2334,9 +2303,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -2505,51 +2471,7 @@ export declare const OpenByDefault: {
         onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
-        key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: never | undefined;
-    }>[] | undefined;
-    parameters?: import("@storybook/react").Parameters | undefined;
-    argTypes?: Partial<import("@storybook/react").ArgTypes<{
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
+        key?: import("react").Key | null | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -2558,14 +2480,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -2593,7 +2510,59 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: never | undefined;
+    }>[] | undefined;
+    parameters?: import("@storybook/react").Parameters | undefined;
+    argTypes?: Partial<import("@storybook/react").ArgTypes<{
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -2647,9 +2616,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -2819,48 +2785,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: boolean | undefined;
-    } | {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: boolean | undefined | undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -2869,14 +2793,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -2904,7 +2823,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: boolean | undefined;
+    } | {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: boolean | undefined | undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -2958,9 +2927,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -3130,49 +3096,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: never | undefined;
-    }>> | undefined;
-    loaders?: import("storybook/internal/csf").LoaderFunction<import("@storybook/react").ReactRenderer, {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -3181,14 +3104,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -3216,7 +3134,58 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: never | undefined;
+    }>> | undefined;
+    loaders?: import("storybook/internal/csf").LoaderFunction<import("@storybook/react").ReactRenderer, {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -3270,9 +3239,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -3442,48 +3408,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: boolean | undefined;
-    } | {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: boolean | undefined | undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -3492,14 +3416,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -3527,7 +3446,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: boolean | undefined;
+    } | {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: boolean | undefined | undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -3581,9 +3550,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -3750,51 +3716,9 @@ export declare const OpenByDefault: {
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionRun?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
-        onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
-        onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
-        key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: never | undefined;
-    }> | import("storybook/internal/csf").LoaderFunction<import("@storybook/react").ReactRenderer, {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
+        onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
+        onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
+        key?: import("react").Key | null | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -3803,14 +3727,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -3838,7 +3757,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: never | undefined;
+    }> | import("storybook/internal/csf").LoaderFunction<import("@storybook/react").ReactRenderer, {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -3892,9 +3861,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -4064,48 +4030,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: boolean | undefined;
-    } | {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: boolean | undefined | undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -4114,14 +4038,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -4149,7 +4068,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: boolean | undefined;
+    } | {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: boolean | undefined | undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -4203,9 +4172,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -4375,49 +4341,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: never | undefined;
-    }>[] | undefined;
-    beforeEach?: import("storybook/internal/csf").BeforeEach<import("@storybook/react").ReactRenderer, {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -4426,14 +4349,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -4461,7 +4379,58 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: never | undefined;
+    }>[] | undefined;
+    beforeEach?: import("storybook/internal/csf").BeforeEach<import("@storybook/react").ReactRenderer, {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -4515,9 +4484,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -4687,48 +4653,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: boolean | undefined;
-    } | {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: boolean | undefined | undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -4737,14 +4661,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -4772,7 +4691,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: boolean | undefined;
+    } | {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: boolean | undefined | undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -4826,9 +4795,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -4998,48 +4964,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: never | undefined;
-    }> | import("storybook/internal/csf").BeforeEach<import("@storybook/react").ReactRenderer, {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -5048,14 +4972,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -5083,7 +5002,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: never | undefined;
+    }> | import("storybook/internal/csf").BeforeEach<import("@storybook/react").ReactRenderer, {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -5137,9 +5106,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -5309,48 +5275,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: boolean | undefined;
-    } | {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: boolean | undefined | undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -5359,14 +5283,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -5394,7 +5313,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: boolean | undefined;
+    } | {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: boolean | undefined | undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -5448,9 +5417,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -5620,49 +5586,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: never | undefined;
-    }>[] | undefined;
-    afterEach?: import("storybook/internal/csf").AfterEach<import("@storybook/react").ReactRenderer, {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -5671,14 +5594,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -5706,7 +5624,58 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: never | undefined;
+    }>[] | undefined;
+    afterEach?: import("storybook/internal/csf").AfterEach<import("@storybook/react").ReactRenderer, {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -5760,9 +5729,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -5932,48 +5898,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: boolean | undefined;
-    } | {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: boolean | undefined | undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -5982,14 +5906,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -6017,7 +5936,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: boolean | undefined;
+    } | {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: boolean | undefined | undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -6071,9 +6040,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -6243,48 +6209,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: never | undefined;
-    }> | import("storybook/internal/csf").AfterEach<import("@storybook/react").ReactRenderer, {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -6293,14 +6217,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -6328,7 +6247,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: never | undefined;
+    }> | import("storybook/internal/csf").AfterEach<import("@storybook/react").ReactRenderer, {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -6382,9 +6351,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -6554,48 +6520,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: boolean | undefined;
-    } | {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: boolean | undefined | undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -6604,14 +6528,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -6639,7 +6558,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: boolean | undefined;
+    } | {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: boolean | undefined | undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -6693,9 +6662,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -6865,49 +6831,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: never | undefined;
-    }>[] | undefined;
-    render?: import("storybook/internal/csf").ArgsStoryFn<import("@storybook/react").ReactRenderer, {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -6916,14 +6839,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -6951,7 +6869,58 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: never | undefined;
+    }>[] | undefined;
+    render?: import("storybook/internal/csf").ArgsStoryFn<import("@storybook/react").ReactRenderer, {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -7005,9 +6974,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -7177,48 +7143,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: boolean | undefined;
-    } | {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: boolean | undefined | undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -7227,14 +7151,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -7262,7 +7181,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: boolean | undefined;
+    } | {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: boolean | undefined | undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -7316,9 +7285,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -7488,50 +7454,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: never | undefined;
-    }> | undefined;
-    tags?: string[] | undefined;
-    mount?: ((context: import("storybook/internal/csf").StoryContext<import("@storybook/react").ReactRenderer, {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -7540,14 +7462,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -7575,7 +7492,59 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: never | undefined;
+    }> | undefined;
+    tags?: string[] | undefined;
+    mount?: ((context: import("storybook/internal/csf").StoryContext<import("@storybook/react").ReactRenderer, {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -7629,9 +7598,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -7801,48 +7767,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: boolean | undefined;
-    } | {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: boolean | undefined | undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -7851,14 +7775,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -7886,7 +7805,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: boolean | undefined;
+    } | {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: boolean | undefined | undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -7940,9 +7909,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -8112,51 +8078,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: never | undefined;
-    }>) => (ui?: import("react").JSX.Element) => Promise<import("storybook/internal/csf").Canvas>) | undefined;
-    name?: import("storybook/internal/csf").StoryName;
-    storyName?: import("storybook/internal/csf").StoryName;
-    play?: import("storybook/internal/csf").PlayFunction<import("@storybook/react").ReactRenderer, {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -8165,14 +8086,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -8200,7 +8116,60 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: never | undefined;
+    }>) => (ui?: import("react").JSX.Element) => Promise<import("storybook/internal/csf").Canvas>) | undefined;
+    name?: import("storybook/internal/csf").StoryName;
+    storyName?: import("storybook/internal/csf").StoryName;
+    play?: import("storybook/internal/csf").PlayFunction<import("@storybook/react").ReactRenderer, {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -8254,9 +8223,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -8426,48 +8392,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: boolean | undefined;
-    } | {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: boolean | undefined | undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -8476,14 +8400,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -8511,7 +8430,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: boolean | undefined;
+    } | {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: boolean | undefined | undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -8565,9 +8534,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -8737,50 +8703,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: never | undefined;
-    }> | undefined;
-    globals?: Partial<import("storybook/internal/csf").Globals> | undefined;
-    story?: Omit<import("storybook/internal/csf").StoryAnnotations<import("@storybook/react").ReactRenderer, {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -8789,14 +8711,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -8824,7 +8741,59 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: never | undefined;
+    }> | undefined;
+    globals?: Partial<import("storybook/internal/csf").Globals> | undefined;
+    story?: Omit<import("storybook/internal/csf").StoryAnnotations<import("@storybook/react").ReactRenderer, {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -8878,9 +8847,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -9050,48 +9016,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: boolean | undefined;
-    } | {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: boolean | undefined | undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -9100,14 +9024,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -9135,7 +9054,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: boolean | undefined;
+    } | {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: boolean | undefined | undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -9189,9 +9158,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -9361,48 +9327,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: never | undefined;
-    }, Partial<{
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -9411,14 +9335,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -9446,7 +9365,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: never | undefined;
+    }, Partial<{
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -9500,9 +9469,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -9672,48 +9638,6 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
-        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        omitBorder?: boolean | undefined;
-        omitSummaryDivider?: boolean | undefined;
-        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
-        openByDefault?: boolean | undefined;
-    } | {
-        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
-        children?: import("react").ReactNode;
-        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
-        className?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        style?: import("react").CSSProperties | undefined;
-        title?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        open?: boolean | undefined | undefined;
-        content?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
@@ -9722,14 +9646,9 @@ export declare const OpenByDefault: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
-        role?: import("react").AriaRole | undefined;
         about?: string | undefined | undefined;
         datatype?: string | undefined | undefined;
         inlist?: any;
@@ -9757,7 +9676,57 @@ export declare const OpenByDefault: {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
+        omitSummaryDivider?: boolean | undefined;
+        onToggleDetails?: ((isOpen: boolean) => void) | undefined;
+        openByDefault?: boolean | undefined;
+    } | {
+        backgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        children?: import("react").ReactNode;
+        ref?: import("react").Ref<HTMLDetailsElement> | undefined;
+        className?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        open?: boolean | undefined | undefined;
+        content?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
         part?: string | undefined | undefined;
+        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/system/Sizes").SIZES) | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        cursor?: import("../src/types/general.types").CursorOption | undefined;
+        elevation?: ("small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge") | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -9811,9 +9780,6 @@ export declare const OpenByDefault: {
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLDetailsElement> | undefined;
@@ -9983,27 +9949,61 @@ export declare const OpenByDefault: {
         onTransitionStart?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
         key?: import("react").Key | null | undefined;
-        name?: string | undefined | undefined;
-        width?: ("full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src").SIZES) | undefined;
-        cursor?: import("../src/types/general.types").CursorOption | undefined;
-        elevation?: ("base" | "small" | "medium" | "large" | "drag" | "surface" | "extraLarge") | undefined;
-        _p?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _pl?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _px?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _py?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _m?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mt?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mr?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mb?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _ml?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _mx?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        _my?: "none" | "xs" | "s" | "base" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-        borderRadius?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
-        borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
+        accessKey?: string | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contextMenu?: string | undefined | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        hidden?: boolean | undefined | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        radioGroup?: string | undefined | undefined;
+        about?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
+        inlist?: any;
+        prefix?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        rel?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        rev?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autoCorrect?: string | undefined | undefined;
+        autoSave?: string | undefined | undefined;
+        itemProp?: string | undefined | undefined;
+        itemScope?: boolean | undefined | undefined;
+        itemType?: string | undefined | undefined;
+        itemID?: string | undefined | undefined;
+        itemRef?: string | undefined | undefined;
+        results?: number | undefined | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+        popoverTarget?: string | undefined | undefined;
+        inert?: boolean | undefined | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        _p?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _pl?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _px?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _py?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _m?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mt?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mr?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mb?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _ml?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _mx?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        _my?: "none" | "base" | "s" | "xs" | "xl" | "m" | "l" | "2xl" | "3xl" | "4xl" | undefined;
+        borderRadius?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusLeft?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
+        borderRadiusRight?: keyof typeof import("../src/system/Sizes").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
         omitBorder?: boolean | undefined;
         omitSummaryDivider?: boolean | undefined;