@loadsmart/loadsmart-ui 6.0.14 → 6.0.16

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 (55) hide show
  1. package/dist/components/Banner/Banner.d.ts +4 -4
  2. package/dist/components/Banner/Banner.stories.d.ts +2 -1
  3. package/dist/components/Button/Button.stories.d.ts +3 -2
  4. package/dist/components/DatePicker/useDatePicker.d.ts +8 -2
  5. package/dist/components/DatePicker/useDateRangePicker.d.ts +12 -3
  6. package/dist/components/Dialog/Dialog.d.ts +4 -4
  7. package/dist/components/DragDropFile/DragDropFile.d.ts +2 -1
  8. package/dist/components/DragDropFile/components/Wrapper.d.ts +2 -1
  9. package/dist/components/DragDropFile/styles.d.ts +3 -2
  10. package/dist/components/ErrorMessage/ErrorMessage.d.ts +2 -1
  11. package/dist/components/Modal/Modal.d.ts +1 -1
  12. package/dist/components/Popover/Popover.types.d.ts +6 -8
  13. package/dist/components/Section/Section.d.ts +2 -2
  14. package/dist/components/SideNavigation/Menu/Menu.d.ts +1 -1
  15. package/dist/components/SideNavigation/SideNavigation.d.ts +1 -1
  16. package/dist/components/Tabs/Tabs.d.ts +5 -5
  17. package/dist/components/Tag/Tag.stories.d.ts +2 -1
  18. package/dist/components/Text/Text.d.ts +1 -1
  19. package/dist/index.js +284 -243
  20. package/dist/index.js.map +1 -1
  21. package/dist/miranda-compatibility.theme-22a9ce26.js +2 -0
  22. package/dist/miranda-compatibility.theme-22a9ce26.js.map +1 -0
  23. package/dist/{prop-82e9ff9d.js → prop-201ffe28.js} +2 -2
  24. package/dist/{prop-82e9ff9d.js.map → prop-201ffe28.js.map} +1 -1
  25. package/dist/testing/index.js +1 -1
  26. package/dist/theming/index.js +1 -1
  27. package/dist/theming/themes/alice.theme.d.ts +70 -15
  28. package/dist/theming/themes/loadsmart.theme.d.ts +70 -15
  29. package/dist/theming/themes/miranda-compatibility.theme.d.ts +141 -85
  30. package/dist/tools/index.js +1 -1
  31. package/package.json +5 -5
  32. package/src/common/CloseButton/CloseButton.tsx +4 -1
  33. package/src/common/SelectionWrapper.tsx +8 -0
  34. package/src/components/Button/Button.tsx +44 -21
  35. package/src/components/Checkbox/Checkbox.tsx +1 -1
  36. package/src/components/Dropdown/Dropdown.test.tsx +1 -1
  37. package/src/components/Dropdown/DropdownMenu.tsx +3 -0
  38. package/src/components/Dropdown/DropdownTrigger.tsx +9 -11
  39. package/src/components/Link/Link.tsx +9 -0
  40. package/src/components/Popover/Popover.test.tsx +1 -2
  41. package/src/components/Popover/Popover.tsx +25 -68
  42. package/src/components/Popover/Popover.types.ts +6 -8
  43. package/src/components/Radio/Radio.tsx +1 -1
  44. package/src/components/Select/SelectTrigger.tsx +2 -9
  45. package/src/components/Switch/Switch.tsx +3 -1
  46. package/src/components/Tag/Tag.tsx +24 -4
  47. package/src/components/TextField/TextField.tsx +5 -2
  48. package/src/components/Textarea/Textarea.tsx +5 -2
  49. package/src/components/ToggleGroup/Toggle.tsx +3 -1
  50. package/src/components/Tooltip/Tooltip.tsx +1 -8
  51. package/src/theming/themes/alice.theme.ts +83 -15
  52. package/src/theming/themes/loadsmart.theme.ts +85 -16
  53. package/src/theming/themes/miranda-compatibility.theme.ts +181 -113
  54. package/dist/miranda-compatibility.theme-f99913ed.js +0 -2
  55. package/dist/miranda-compatibility.theme-f99913ed.js.map +0 -1
@@ -1,4 +1,4 @@
1
- import { ReactElement } from 'react';
1
+ import React, { ReactElement } from 'react';
2
2
  import DefaultCloseButton from "../../common/CloseButton";
3
3
  export interface BannerProps {
4
4
  className?: string;
@@ -18,8 +18,8 @@ export interface BannerActionProps extends BannerProps {
18
18
  }
19
19
  export declare const CloseButton: import("styled-components").StyledComponent<typeof DefaultCloseButton, any, {}, never>;
20
20
  export declare const Icon: import("styled-components").StyledComponent<(props: import("../IconFactory").IconProps<import("../IconFactory").IconMapping>) => JSX.Element, any, {}, never>;
21
- declare function Banner({ scale, variant, icon, title, description, onClose, dismissible, ...others }: BannerProps): JSX.Element | null;
22
- export declare function BannerLarge({ scale, variant, icon, title, description, onClose, dismissible, ...others }: BannerProps): JSX.Element | null;
21
+ declare function Banner({ scale, variant, icon, title, description, onClose, dismissible, ...others }: BannerProps): React.JSX.Element | null;
22
+ export declare function BannerLarge({ scale, variant, icon, title, description, onClose, dismissible, ...others }: BannerProps): React.JSX.Element | null;
23
23
  export declare function BannerAction({ scale, variant, icon, title, action, secondaryAction, onActionButtonClick, onSecondaryActionButtonClick, ...others }: BannerActionProps): JSX.Element;
24
- export declare function BannerActionLarge({ scale, variant, icon, title, description, action, secondaryAction, onActionButtonClick, onSecondaryActionButtonClick, onClose, dismissible, ...others }: BannerActionProps): JSX.Element | null;
24
+ export declare function BannerActionLarge({ scale, variant, icon, title, description, action, secondaryAction, onActionButtonClick, onSecondaryActionButtonClick, onClose, dismissible, ...others }: BannerActionProps): React.JSX.Element | null;
25
25
  export default Banner;
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import type { BannerProps, BannerActionProps } from './Banner';
2
3
  declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
3
4
  export default _default;
@@ -39,7 +40,7 @@ export declare namespace CustomIcon {
39
40
  scale: string;
40
41
  variant: string;
41
42
  title: string;
42
- icon: JSX.Element;
43
+ icon: React.JSX.Element;
43
44
  };
44
45
  }
45
46
  export declare function Large(args: BannerProps): JSX.Element;
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import type { BackButtonProps } from '../../common/BackButton';
2
3
  import type { ButtonProps } from './Button';
3
4
  import type { CloseButtonProps } from '../../common/CloseButton';
@@ -8,8 +9,8 @@ export declare namespace Playground {
8
9
  var args: {
9
10
  scale: string;
10
11
  variant: string;
11
- leading: JSX.Element;
12
- trailing: JSX.Element;
12
+ leading: React.JSX.Element;
13
+ trailing: React.JSX.Element;
13
14
  };
14
15
  }
15
16
  export declare function Base(args: ButtonProps): JSX.Element;
@@ -78,11 +78,14 @@ declare function useDatePicker(props: DatePickerProps): {
78
78
  radioGroup?: string | undefined;
79
79
  role?: import("react").AriaRole | undefined;
80
80
  about?: string | undefined;
81
+ content?: string | undefined;
81
82
  datatype?: string | undefined;
82
83
  inlist?: any;
83
84
  prefix?: string | undefined;
84
85
  property?: string | undefined;
86
+ rel?: string | undefined;
85
87
  resource?: string | undefined;
88
+ rev?: string | undefined;
86
89
  typeof?: string | undefined;
87
90
  vocab?: string | undefined;
88
91
  autoCapitalize?: string | undefined;
@@ -148,7 +151,7 @@ declare function useDatePicker(props: DatePickerProps): {
148
151
  'aria-valuenow'?: number | undefined;
149
152
  'aria-valuetext'?: string | undefined;
150
153
  dangerouslySetInnerHTML?: {
151
- __html: string;
154
+ __html: string | TrustedHTML;
152
155
  } | undefined;
153
156
  onCopy?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
154
157
  onCopyCapture?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
@@ -347,11 +350,14 @@ declare function useDatePicker(props: DatePickerProps): {
347
350
  radioGroup?: string | undefined;
348
351
  role?: import("react").AriaRole | undefined;
349
352
  about?: string | undefined;
353
+ content?: string | undefined;
350
354
  datatype?: string | undefined;
351
355
  inlist?: any;
352
356
  prefix?: string | undefined;
353
357
  property?: string | undefined;
358
+ rel?: string | undefined;
354
359
  resource?: string | undefined;
360
+ rev?: string | undefined;
355
361
  typeof?: string | undefined;
356
362
  vocab?: string | undefined;
357
363
  autoCapitalize?: string | undefined;
@@ -418,7 +424,7 @@ declare function useDatePicker(props: DatePickerProps): {
418
424
  'aria-valuetext'?: string | undefined;
419
425
  children?: import("react").ReactNode;
420
426
  dangerouslySetInnerHTML?: {
421
- __html: string;
427
+ __html: string | TrustedHTML;
422
428
  } | undefined;
423
429
  onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
424
430
  onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
@@ -71,11 +71,14 @@ declare function useDateRangePicker(props: DateRangePickerProps): {
71
71
  radioGroup?: string | undefined;
72
72
  role?: import("react").AriaRole | undefined;
73
73
  about?: string | undefined;
74
+ content?: string | undefined;
74
75
  datatype?: string | undefined;
75
76
  inlist?: any;
76
77
  prefix?: string | undefined;
77
78
  property?: string | undefined;
79
+ rel?: string | undefined;
78
80
  resource?: string | undefined;
81
+ rev?: string | undefined;
79
82
  typeof?: string | undefined;
80
83
  vocab?: string | undefined;
81
84
  autoCapitalize?: string | undefined;
@@ -141,7 +144,7 @@ declare function useDateRangePicker(props: DateRangePickerProps): {
141
144
  'aria-valuenow'?: number | undefined;
142
145
  'aria-valuetext'?: string | undefined;
143
146
  dangerouslySetInnerHTML?: {
144
- __html: string;
147
+ __html: string | TrustedHTML;
145
148
  } | undefined;
146
149
  onCopy?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
147
150
  onCopyCapture?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
@@ -368,11 +371,14 @@ declare function useDateRangePicker(props: DateRangePickerProps): {
368
371
  radioGroup?: string | undefined;
369
372
  role?: import("react").AriaRole | undefined;
370
373
  about?: string | undefined;
374
+ content?: string | undefined;
371
375
  datatype?: string | undefined;
372
376
  inlist?: any;
373
377
  prefix?: string | undefined;
374
378
  property?: string | undefined;
379
+ rel?: string | undefined;
375
380
  resource?: string | undefined;
381
+ rev?: string | undefined;
376
382
  typeof?: string | undefined;
377
383
  vocab?: string | undefined;
378
384
  autoCapitalize?: string | undefined;
@@ -438,7 +444,7 @@ declare function useDateRangePicker(props: DateRangePickerProps): {
438
444
  'aria-valuenow'?: number | undefined;
439
445
  'aria-valuetext'?: string | undefined;
440
446
  dangerouslySetInnerHTML?: {
441
- __html: string;
447
+ __html: string | TrustedHTML;
442
448
  } | undefined;
443
449
  onCopy?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
444
450
  onCopyCapture?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
@@ -636,11 +642,14 @@ declare function useDateRangePicker(props: DateRangePickerProps): {
636
642
  radioGroup?: string | undefined;
637
643
  role?: import("react").AriaRole | undefined;
638
644
  about?: string | undefined;
645
+ content?: string | undefined;
639
646
  datatype?: string | undefined;
640
647
  inlist?: any;
641
648
  prefix?: string | undefined;
642
649
  property?: string | undefined;
650
+ rel?: string | undefined;
643
651
  resource?: string | undefined;
652
+ rev?: string | undefined;
644
653
  typeof?: string | undefined;
645
654
  vocab?: string | undefined;
646
655
  autoCapitalize?: string | undefined;
@@ -707,7 +716,7 @@ declare function useDateRangePicker(props: DateRangePickerProps): {
707
716
  'aria-valuetext'?: string | undefined;
708
717
  children?: import("react").ReactNode;
709
718
  dangerouslySetInnerHTML?: {
710
- __html: string;
719
+ __html: string | TrustedHTML;
711
720
  } | undefined;
712
721
  onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
713
722
  onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
@@ -1,4 +1,4 @@
1
- import { ReactNode } from 'react';
1
+ import React, { ReactNode } from 'react';
2
2
  import type { ButtonProps } from '../Button';
3
3
  interface WithScaleProps {
4
4
  scale?: 'small' | 'default' | 'large';
@@ -14,15 +14,15 @@ declare function DialogActions({ scale, direction, children, }: {
14
14
  scale?: 'small' | 'default' | 'large';
15
15
  direction?: 'vertical' | 'horizontal';
16
16
  children: ReactNode;
17
- }): JSX.Element;
17
+ }): React.JSX.Element;
18
18
  export interface DialogActionConfirmProps extends Omit<ButtonProps, 'onClick' | 'variant'> {
19
19
  onConfirm: () => void;
20
20
  }
21
- declare function DialogActionConfirm({ onConfirm, children, ...others }: DialogActionConfirmProps): JSX.Element;
21
+ declare function DialogActionConfirm({ onConfirm, children, ...others }: DialogActionConfirmProps): React.JSX.Element;
22
22
  export interface DialogActionCancelProps extends Omit<ButtonProps, 'onClick' | 'variant'> {
23
23
  onCancel: () => void;
24
24
  }
25
- declare function DialogActionCancel({ onCancel, children, ...others }: DialogActionCancelProps): JSX.Element;
25
+ declare function DialogActionCancel({ onCancel, children, ...others }: DialogActionCancelProps): React.JSX.Element;
26
26
  declare function Dialog({ scale, open, ...others }: DialogProps): JSX.Element;
27
27
  declare namespace Dialog {
28
28
  var Header: import("styled-components").StyledComponent<"h1", any, {}, never>;
@@ -1,6 +1,7 @@
1
+ /// <reference types="react" />
1
2
  declare const DragDropFile: {
2
3
  (): null;
3
- Wrapper: ({ children, ...props }: Partial<import("../..").StackProps>) => JSX.Element;
4
+ Wrapper: ({ children, ...props }: Partial<import("../..").StackProps>) => import("react").JSX.Element;
4
5
  DropZone: ({ className, hint, multiple, accept, disabled, error, renderCustomContent, ...props }: import("./types").DropZoneProps) => JSX.Element;
5
6
  FileList: ({ disabled, ...props }: import("./types").FileListProps) => JSX.Element | null;
6
7
  };
@@ -1,6 +1,7 @@
1
+ import React from 'react';
1
2
  import type { WrapperProps } from '../types';
2
3
  /**
3
4
  * This is a `Stack` component customized with the needed spacing between the DragDropFile inner components
4
5
  */
5
- declare const Wrapper: ({ children, ...props }: WrapperProps) => JSX.Element;
6
+ declare const Wrapper: ({ children, ...props }: WrapperProps) => React.JSX.Element;
6
7
  export default Wrapper;
@@ -1,10 +1,11 @@
1
+ import React from 'react';
1
2
  import { StackProps, Stack } from "../Layout/Stack";
2
3
  import type { DropZoneProps } from './types';
3
4
  export declare const DragDropFileWrapper: import("styled-components").StyledComponent<typeof Stack, any, {
4
5
  withFileList: boolean;
5
6
  }, never>;
6
- export declare const DropZoneWrapper: import("styled-components").StyledComponent<(props: StackProps) => JSX.Element, any, Pick<DropZoneProps, "disabled" | "error">, never>;
7
+ export declare const DropZoneWrapper: import("styled-components").StyledComponent<(props: StackProps) => React.JSX.Element, any, Pick<DropZoneProps, "disabled" | "error">, never>;
7
8
  export declare const HiddenInput: import("styled-components").StyledComponent<"input", any, {}, never>;
8
9
  export declare const UploadIcon: import("styled-components").StyledComponent<(props: import("../IconFactory").IconProps<import("../IconFactory").IconMapping>) => JSX.Element, any, {}, never>;
9
- export declare const FileListUL: import("styled-components").StyledComponent<(props: StackProps) => JSX.Element, any, {}, never>;
10
+ export declare const FileListUL: import("styled-components").StyledComponent<(props: StackProps) => React.JSX.Element, any, {}, never>;
10
11
  export declare const Divider: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -1,4 +1,5 @@
1
+ import React from 'react';
1
2
  import { TextProps } from "../Text";
2
3
  export declare type ErrorMessageProps = Partial<TextProps>;
3
- declare const ErrorMessage: ({ children, ...props }: ErrorMessageProps) => JSX.Element | null;
4
+ declare const ErrorMessage: ({ children, ...props }: ErrorMessageProps) => React.JSX.Element | null;
4
5
  export default ErrorMessage;
@@ -14,7 +14,7 @@ declare function Modal({ scale, children, open, fullscreen, onOverlayClick, ...o
14
14
  declare namespace Modal {
15
15
  var Header: ({ title, children }: React.PropsWithChildren<{
16
16
  title: string;
17
- }>) => JSX.Element;
17
+ }>) => React.JSX.Element;
18
18
  var Close: import("styled-components").StyledComponent<typeof CloseButton, any, {
19
19
  size: 16;
20
20
  }, "size">;
@@ -1,15 +1,13 @@
1
- import type { HTMLAttributes, MutableRefObject, PropsWithChildren } from 'react';
1
+ import type { UseFloatingReturn } from '@floating-ui/react-dom';
2
+ import type { CSSProperties, HTMLAttributes, MutableRefObject, PropsWithChildren } from 'react';
2
3
  export interface UsePopoverReturn {
3
4
  register: {
4
- reference: (el: HTMLElement) => void;
5
- floating: (el: HTMLElement) => void;
6
- arrow: (el: HTMLElement) => void;
5
+ setReference: UseFloatingReturn['refs']['setReference'];
6
+ setFloating: UseFloatingReturn['refs']['setFloating'];
7
+ setArrow: MutableRefObject<Element | null>;
7
8
  };
8
9
  result: {
9
- floating: {
10
- top: number;
11
- left: number;
12
- };
10
+ floatingStyles: CSSProperties;
13
11
  arrow: {
14
12
  top: number | undefined;
15
13
  left: number | undefined;
@@ -1,10 +1,10 @@
1
- import { HTMLAttributes, ReactNode } from 'react';
1
+ import React, { HTMLAttributes, ReactNode } from 'react';
2
2
  export declare type SectionProps = HTMLAttributes<HTMLElement>;
3
3
  export interface SectionTitleProps extends HTMLAttributes<HTMLElement> {
4
4
  children: ReactNode;
5
5
  leading?: ReactNode;
6
6
  }
7
- declare function SectionTitle({ children, leading, ...others }: SectionTitleProps): JSX.Element;
7
+ declare function SectionTitle({ children, leading, ...others }: SectionTitleProps): React.JSX.Element;
8
8
  declare function Section({ children, ...others }: SectionProps): JSX.Element;
9
9
  declare namespace Section {
10
10
  var Title: typeof SectionTitle;
@@ -9,7 +9,7 @@ declare function Menu({ label, children, ...props }: MenuProps): JSX.Element;
9
9
  declare type MenuItemProps = {
10
10
  active?: boolean;
11
11
  } & PropsWithChildren<MenuLinkProps & MenuExpandableProps>;
12
- declare function MenuItem(props: MenuItemProps): JSX.Element;
12
+ declare function MenuItem(props: MenuItemProps): React.JSX.Element;
13
13
  declare const _default: string & import("styled-components").StyledComponentBase<typeof Menu, any, {}, never> & import("hoist-non-react-statics").NonReactStatics<typeof Menu, {}> & {
14
14
  Item: typeof MenuItem;
15
15
  SubItem: import("styled-components").StyledComponent<({ url, ...props }: MenuLinkProps) => JSX.Element, any, {}, never>;
@@ -25,7 +25,7 @@ declare namespace SideNavigation {
25
25
  label: string;
26
26
  } & {
27
27
  children?: React.ReactNode;
28
- }) => JSX.Element;
28
+ }) => React.JSX.Element;
29
29
  SubItem: import("styled-components").StyledComponent<({ url, ...props }: import("./Menu/MenuLink").MenuLinkProps) => JSX.Element, any, {}, never>;
30
30
  };
31
31
  var Separator: typeof import("./Separator/Separator").default;
@@ -1,16 +1,16 @@
1
- import { HTMLAttributes, ReactNode } from 'react';
1
+ import React, { HTMLAttributes, ReactNode } from 'react';
2
2
  import type { WithDirectionProps } from './Tabs.types';
3
3
  declare type TabsItemsProps = HTMLAttributes<HTMLUListElement>;
4
- declare function TabsItems({ children, ...props }: TabsItemsProps): JSX.Element;
4
+ declare function TabsItems({ children, ...props }: TabsItemsProps): React.JSX.Element;
5
5
  interface TabsItemProps extends HTMLAttributes<HTMLInputElement> {
6
6
  name: string;
7
7
  default?: boolean;
8
8
  leading?: ReactNode;
9
9
  disabled?: boolean;
10
10
  }
11
- declare function TabsItem({ children, name, default: isDefault, className, onChange, leading, disabled, ...props }: TabsItemProps): JSX.Element;
11
+ declare function TabsItem({ children, name, default: isDefault, className, onChange, leading, disabled, ...props }: TabsItemProps): React.JSX.Element;
12
12
  declare type PanelsItemsProps = HTMLAttributes<HTMLDivElement>;
13
- declare function PanelsItems({ children, ...props }: PanelsItemsProps): JSX.Element;
13
+ declare function PanelsItems({ children, ...props }: PanelsItemsProps): React.JSX.Element;
14
14
  interface PanelsItemProps extends HTMLAttributes<HTMLElement> {
15
15
  name: string;
16
16
  /**
@@ -19,7 +19,7 @@ interface PanelsItemProps extends HTMLAttributes<HTMLElement> {
19
19
  */
20
20
  lazy?: boolean;
21
21
  }
22
- declare function PanelsItem({ children, name, lazy, ...props }: PanelsItemProps): JSX.Element;
22
+ declare function PanelsItem({ children, name, lazy, ...props }: PanelsItemProps): React.JSX.Element;
23
23
  declare namespace PanelsItem {
24
24
  var defaultProps: {
25
25
  lazy: boolean;
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import { TagProps } from './Tag';
2
3
  declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
3
4
  export default _default;
@@ -15,7 +16,7 @@ export declare namespace Icon {
15
16
  var args: {
16
17
  size: string;
17
18
  variant: string;
18
- leading: JSX.Element;
19
+ leading: React.JSX.Element;
19
20
  removable: boolean;
20
21
  };
21
22
  }
@@ -8,7 +8,7 @@ export declare type TextProps = PropsWithChildren<{
8
8
  declare const _default: import("styled-components").StyledComponent<"span", any, {
9
9
  variant?: TypographyVariants | undefined;
10
10
  italic?: boolean | undefined;
11
- color?: "left" | "center" | "right" | "color-neutral-darker" | "button-border-radius" | "button-border-width" | "button-font-weight" | "button-font-height" | "button-small-font-size" | "button-small-height" | "button-small-padding-x" | "button-small-padding-y" | "button-font-size" | "button-height" | "button-width" | "button-padding-y" | "button-padding-x" | "button-spacing-x" | "button-large-font-size" | "button-large-height" | "button-large-padding-x" | "button-large-padding-y" | "button-primary-background" | "button-primary-background--hover" | "button-primary-background--focus" | "button-primary-background--active" | "button-primary-background--disabled" | "button-primary-border-color" | "button-primary-border-color--hover" | "button-primary-border-color--focus" | "button-primary-border-color--active" | "button-primary-border-color--disabled" | "button-primary-color" | "button-primary-color--hover" | "button-primary-color--focus" | "button-primary-color--active" | "button-primary-color--disabled" | "button-primary-outline" | "button-secondary-background" | "button-secondary-background--hover" | "button-secondary-background--focus" | "button-secondary-background--active" | "button-secondary-background--disabled" | "button-secondary-border-color" | "button-secondary-border-color--hover" | "button-secondary-border-color--focus" | "button-secondary-border-color--active" | "button-secondary-border-color--disabled" | "button-secondary-color" | "button-secondary-color--hover" | "button-secondary-color--focus" | "button-secondary-color--active" | "button-secondary-color--disabled" | "button-secondary-outline" | "button-secondary-dark-background" | "button-secondary-dark-background--hover" | "button-secondary-dark-background--focus" | "button-secondary-dark-background--active" | "button-secondary-dark-background--disabled" | "button-secondary-dark-border-color" | "button-secondary-dark-border-color--hover" | "button-secondary-dark-border-color--focus" | "button-secondary-dark-border-color--active" | "button-secondary-dark-border-color--disabled" | "button-secondary-dark-color" | "button-secondary-dark-color--hover" | "button-secondary-dark-color--focus" | "button-secondary-dark-color--active" | "button-secondary-dark-color--disabled" | "button-warning-background" | "button-warning-background--hover" | "button-warning-background--focus" | "button-warning-background--active" | "button-warning-background--disabled" | "button-warning-border-color" | "button-warning-border-color--hover" | "button-warning-border-color--focus" | "button-warning-border-color--active" | "button-warning-border-color--disabled" | "button-warning-color" | "button-warning-color--hover" | "button-warning-color--focus" | "button-warning-color--active" | "button-warning-color--disabled" | "button-warning-outline" | "button-icon-border-radius" | "button-icon-small-width" | "button-icon-width" | "button-icon-large-width" | "button-icon-background" | "button-icon-background--hover" | "button-icon-background--focus" | "button-icon-background--active" | "button-icon-background--disabled" | "button-icon-border-color" | "button-icon-border-color--hover" | "button-icon-border-color--focus" | "button-icon-border-color--active" | "button-icon-border-color--disabled" | "button-icon-color" | "button-icon-color--hover" | "button-icon-color--focus" | "button-icon-color--active" | "button-icon-color--disabled" | "button-icon-outline" | "tag-border-radius" | "tag-border-width" | "tag-font-weight" | "tag-font-height" | "tag-spacing" | "tag-spacing-removable" | "tag-width" | "tag-outline" | "tag-remove-button-background" | "tag-remove-button-border-radius" | "tag-icon-spacing" | "tag-small-font-size" | "tag-small-height" | "tag-small-transform" | "tag-small-leading-display" | "tag-small-remove-button-size" | "tag-small-remove-button-icon-size" | "tag-small-spacing-removable" | "tag-font-size" | "tag-height" | "tag-transform" | "tag-leading-display" | "tag-remove-button-size" | "tag-remove-button-icon-size" | "tag-large-font-size" | "tag-large-height" | "tag-large-transform" | "tag-large-leading-display" | "tag-large-remove-button-size" | "tag-large-remove-button-icon-size" | "tag-default-background" | "tag-default-background--hover" | "tag-default-background--focus" | "tag-default-color" | "tag-default-color--hover" | "tag-default-color--focus" | "tag-default-border-color" | "tag-default-border-color--hover" | "tag-default-border-color--focus" | "tag-outlined-background" | "tag-outlined-background--hover" | "tag-outlined-background--focus" | "tag-outlined-color" | "tag-outlined-color--hover" | "tag-outlined-color--focus" | "tag-outlined-border-color" | "tag-outlined-border-color--hover" | "tag-outlined-border-color--focus" | "tag-accent-background" | "tag-accent-background--hover" | "tag-accent-background--focus" | "tag-accent-color" | "tag-accent-color--hover" | "tag-accent-color--focus" | "tag-accent-border-color" | "tag-accent-border-color--hover" | "tag-accent-border-color--focus" | "tag-success-background" | "tag-success-background--hover" | "tag-success-background--focus" | "tag-success-color" | "tag-success-color--hover" | "tag-success-color--focus" | "tag-success-border-color" | "tag-success-border-color--hover" | "tag-success-border-color--focus" | "tag-warning-background" | "tag-warning-background--hover" | "tag-warning-background--focus" | "tag-warning-color" | "tag-warning-color--hover" | "tag-warning-color--focus" | "tag-warning-border-color" | "tag-warning-border-color--hover" | "tag-warning-border-color--focus" | "tag-danger-background" | "tag-danger-background--hover" | "tag-danger-background--focus" | "tag-danger-color" | "tag-danger-color--hover" | "tag-danger-color--focus" | "tag-danger-border-color" | "tag-danger-border-color--hover" | "tag-danger-border-color--focus" | "checkbox-color" | "checkbox-font-weight" | "checkbox-font-size" | "checkbox-selector-border-radius" | "checkbox-selector-size" | "checkbox-selector-outline" | "checkbox-small-font-size" | "checkbox-selector-icon-color" | "checkbox-selector-background" | "checkbox-selector-background--hover" | "checkbox-selector-background--focus" | "checkbox-selector-background--disabled" | "checkbox-selector-checked-background" | "checkbox-selector-checked-background--hover" | "checkbox-selector-checked-background--focus" | "checkbox-selector-checked-background--disabled" | "checkbox-selector-border-color" | "checkbox-selector-border-color--hover" | "checkbox-selector-border-color--focus" | "checkbox-selector-border-color--disabled" | "checkbox-selector-checked-border-color" | "checkbox-selector-checked-border-color--hover" | "checkbox-selector-checked-border-color--focus" | "checkbox-selector-checked-border-color--disabled" | "checkbox-dark-color" | "checkbox-dark-selector-background" | "checkbox-dark-selector-background--hover" | "checkbox-dark-selector-background--focus" | "checkbox-dark-selector-background--disabled" | "checkbox-dark-selector-border-color" | "checkbox-dark-selector-border-color--hover" | "checkbox-dark-selector-border-color--focus" | "checkbox-dark-selector-border-color--disabled" | "radio-color" | "radio-font-weight" | "radio-font-size" | "radio-selector-border-radius" | "radio-selector-size" | "radio-selector-outline" | "radio-small-font-size" | "radio-small-selector-size" | "radio-selector-background" | "radio-selector-background--hover" | "radio-selector-background--focus" | "radio-selector-background--disabled" | "radio-selector-border-color" | "radio-selector-border-color--hover" | "radio-selector-border-color--focus" | "radio-selector-border-color--disabled" | "radio-selector-border-color--checked" | "radio-dark-color" | "radio-dark-selector-background" | "radio-dark-selector-background--hover" | "radio-dark-selector-background--focus" | "radio-dark-selector-background--disabled" | "radio-dark-selector-border-color" | "radio-dark-selector-border-color--hover" | "radio-dark-selector-border-color--focus" | "radio-dark-selector-border-color--disabled" | "tooltip-arrow-height" | "tooltip-arrow-width" | "tooltip-background" | "tooltip-border-radius" | "tooltip-color" | "tooltip-dark-outline" | "tooltip-font-size" | "tooltip-font-height" | "tooltip-max-width" | "tooltip-min-width" | "tooltip-outline" | "tooltip-padding-x" | "tooltip-padding-y" | "tooltip-margin" | "tooltip-shadow" | "modal-small-max-width" | "modal-max-width" | "modal-large-max-width" | "modal-overlay-background" | "dialog-header-color" | "dialog-header-border-color" | "dialog-body-font-color" | "text-field-border-radius" | "text-field-color" | "text-field-font-size" | "text-field-font-weight" | "text-field-font-height" | "text-field-height" | "text-field-padding-x" | "text-field-padding-y" | "text-field-outline" | "text-field-small-height" | "text-field-small-padding-x" | "text-field-small-padding-y" | "text-field-small-font-size" | "text-field-large-height" | "text-field-large-padding-x" | "text-field-large-padding-y" | "text-field-large-font-size" | "text-field-background" | "text-field-background--hover" | "text-field-background--focus" | "text-field-background--disabled" | "text-field-border-color" | "text-field-border-color--hover" | "text-field-border-color--focus" | "text-field-border-color--disabled" | "text-field-dark-color" | "text-field-dark-background" | "text-field-dark-border-color" | "text-field-dark-border-color--hover" | "text-field-dark-border-color--focus" | "text-field-dark-border-color--disabled" | "text-field-success-border-color" | "text-field-danger-border-color" | "text-field-dark-outline" | "textarea-border-radius" | "textarea-color" | "textarea-font-size" | "textarea-font-weight" | "textarea-font-height" | "textarea-min-height" | "textarea-padding-x" | "textarea-padding-y" | "textarea-outline" | "textarea-small-padding-x" | "textarea-small-padding-y" | "textarea-small-font-size" | "textarea-large-height" | "textarea-large-padding-x" | "textarea-large-padding-y" | "textarea-large-font-size" | "textarea-background" | "textarea-background--hover" | "textarea-background--focus" | "textarea-background--disabled" | "textarea-border-color" | "textarea-border-color--hover" | "textarea-border-color--focus" | "textarea-border-color--disabled" | "textarea-dark-color" | "textarea-dark-background" | "textarea-dark-border-color" | "textarea-dark-border-color--hover" | "textarea-dark-border-color--focus" | "textarea-dark-border-color--disabled" | "textarea-success-border-color" | "textarea-danger-border-color" | "textarea-dark-outline" | "link-font-size" | "link-font-height" | "link-color" | "link-font-weight" | "link-font-weight--hover" | "breadcrumbs-font-size" | "breadcrumbs-font-height" | "breadcrumbs-font-weight" | "breadcrumbs-font-weight--active" | "breadcrumbs-spacing-x" | "banner-font-size" | "banner-font-height" | "banner-default-height" | "banner-min-width" | "banner-description-color" | "banner-title-font-weight" | "banner-border-radius" | "banner-border-width" | "banner-close-button-color" | "banner-icon-width" | "banner-icon-height" | "banner-icon-margin-right" | "banner-default-padding-x" | "banner-default-padding-y" | "banner-large-padding" | "banner-default-icon-alignment" | "banner-large-icon-alignment" | "banner-default-close-top" | "banner-default-close-right" | "banner-large-close-top" | "banner-large-close-right" | "banner-title-color-success" | "banner-border-color-success" | "banner-background-success" | "banner-title-color-danger" | "banner-border-color-danger" | "banner-background-danger" | "banner-title-color-warning" | "banner-border-color-warning" | "banner-background-warning" | "banner-title-color-neutral" | "banner-border-color-neutral" | "banner-background-neutral" | "banner-button-background-success" | "banner-button-background-neutral" | "banner-button-background-danger" | "banner-button-background-warning" | "banner-button-background-secondary" | "banner-button-text-color" | "banner-secondary-button-margin-left" | "progressbar-height" | "progressbar-background" | "progressbar-line" | "progressbar-neutral-fill" | "progressbar-success-fill" | "progressbar-danger-fill" | "progressbar-warning-fill" | "toast-padding-x" | "toast-padding-y" | "toast-border-radius" | "toast-font-color" | "toast-font-size" | "toast-font-weight" | "toast-font-height" | "toast-close-x" | "toast-close-y" | "toast-shadow" | "toast-width" | "toast-neutral-background" | "toast-success-background" | "toast-danger-background" | "toast-warning-background" | "label-font-size" | "label-font-weight" | "label-font-height" | "label-font-color" | "label-required-color" | "label-tooltip-margin-left" | "label-tooltip-font-weight" | "label-tooltip-font-size" | "label-tooltip-font-color" | "label-tooltip-background-color" | "label-dark-font-color" | "label-tooltip-dark-font-color" | "label-tooltip-dark-background-color" | "switch-width" | "switch-height" | "switch-border-radius" | "switch-outline" | "switch-large-width" | "switch-large-height" | "switch-large-border-radius" | "switch-icon-height" | "switch-icon-width" | "switch-icon-color" | "switch-large-icon-height" | "switch-large-icon-width" | "switch-icon-active-x" | "switch-icon-active-y" | "switch-large-icon-active-x" | "switch-large-icon-active-y" | "switch-icon-inactive-x" | "switch-icon-inactive-y" | "switch-large-icon-inactive-x" | "switch-large-icon-inactive-y" | "switch-inactive-background-color" | "switch-inactive-background-color--hover" | "switch-active-background-color" | "switch-active-background-color--hover" | "switch-slider-x" | "switch-slider-active-x" | "switch-slider-y" | "switch-slider-active-y" | "switch-slider-size" | "switch-slider-background-color" | "switch-slider-border-radius" | "switch-slider-large-x" | "switch-slider-large-active-x" | "switch-slider-large-y" | "switch-slider-large-active-y" | "switch-slider-large-size" | "steps-step-padding-y" | "steps-step-padding-x" | "steps-color" | "steps-progress-padding-y" | "steps-progress-padding-x" | "steps-spacing-y" | "steps-indicator-size" | "steps-conector-height" | "steps-conector-height--complete" | "steps-conector-top" | "steps-conector-top--complete" | "steps-progress-step-background-color" | "steps-progress-step-background-color--complete" | "card-background" | "card-border-color" | "card-border-radius" | "card-color" | "card-flag-background-danger" | "card-flag-background-neutral" | "card-flag-background-success" | "card-flag-background-warning" | "card-flag-width" | "card-font-height" | "card-padding-x" | "card-padding-y" | "card-separator-background" | "card-subtitle-font-size" | "card-subtitle-font-weight" | "card-title-font-height" | "card-title-font-size" | "card-title-font-weight" | "dropdown-background" | "dropdown-border-color" | "dropdown-border-radius" | "dropdown-shadow" | "popover-background" | "popover-border-color" | "popover-border-radius" | "popover-shadow" | "side-navigation-collapsing-breakpoint" | "side-navigation-width" | "side-navigation-width-large" | "side-navigation-padding-bottom" | "side-navigation-background-color" | "side-navigation-component-margin-top" | "side-navigation-logo-padding-x" | "side-navigation-separator-color" | "side-navigation-menu-title-font-weight" | "side-navigation-menu-title-font-size" | "side-navigation-menu-title-line-height" | "side-navigation-menu-link-color--hover" | "side-navigation-menu-link-background-color--active" | "side-navigation-menu-link-box-shadow-color--active" | "side-navigation-menu-item-color--focus" | "table-row-default-color" | "table-row-variant-color" | "table-row-selected-color" | "top-navigation-height" | "top-navigation-background-color" | "top-navigation-border-color" | "top-navigation-dropdown-separator-color" | "top-navigation-dropdown-trigger-color" | "top-navigation-dropdown-subitem-color" | "top-navigation-item-icon-color" | "top-navigation-item-color" | "top-navigation-item-color--hover" | "select-selected-option-check-color" | "select-selected-option-background-color" | "toggle-text-transform" | "toggle-background-color" | "toggle-background-color--hover" | "toggle-background-color--focus" | "toggle-background-color--active" | "toggle-background-color--disabled" | "toggle-checked-background-color" | "toggle-checked-background-color--hover" | "toggle-checked-background-color--focus" | "toggle-checked-background-color--active" | "toggle-checked-background-color--disabled" | "toggle-color" | "toggle-color--hover" | "toggle-color--focus" | "toggle-color--active" | "toggle-color--disabled" | "toggle-checked-color" | "toggle-checked-color--hover" | "toggle-checked-color--focus" | "toggle-checked-color--active" | "toggle-checked-color--disabled" | "toggle-single-border-color" | "toggle-single-border-color--hover" | "toggle-single-border-color--focus" | "toggle-single-border-color--active" | "toggle-single-border-color--disabled" | "toggle-single-checked-border-color" | "toggle-single-checked-border-color--disabled" | "toggle-single-font-size" | "toggle-single-small-font-size" | "toggle-single-height" | "toggle-single-small-height" | "toggle-multiple-border-color" | "toggle-multiple-border-color--hover" | "toggle-multiple-border-color--focus" | "toggle-multiple-border-color--active" | "toggle-multiple-border-color--disabled" | "toggle-multiple-checked-border-color" | "toggle-multiple-checked-border-color--disabled" | "toggle-multiple-font-size" | "toggle-multiple-small-font-size" | "toggle-multiple-height" | "toggle-multiple-small-height" | "toggle-group-border-color--disabled" | "toggle-group-multiple-border-width" | "toggle-group-multiple-border-style" | "toggle-group-multiple-border-color" | "toggle-group-multiple-border-radius" | "toggle-group-multiple-padding" | "toggle-group-single-border-width" | "toggle-group-single-border-style" | "toggle-group-single-border-color" | "toggle-group-single-border-radius" | "toggle-group-single-padding" | "dropdown-trigger-expanded-color" | "dropdown-trigger-height" | "dropdown-trigger-small-height" | "dropdown-trigger-large-height" | "height-small" | "height-default" | "height-large" | "z-index-none" | "z-index-default" | "z-index-droplist" | "z-index-tooltip" | "z-index-overlay" | "z-index-modal" | "space-none" | "space-2xs" | "space-xs" | "space-s" | "space-m" | "space-l" | "space-xl" | "space-2xl" | "space-3xl" | "shadow-none" | "shadow-modal" | "shadow-droplist" | "shadow-glow-primary" | "shadow-glow-warning" | "opacity-0" | "opacity-20" | "opacity-40" | "opacity-60" | "opacity-100" | "font-weight-regular" | "font-weight-medium" | "font-weight-bold" | "font-size-6" | "font-size-5" | "font-size-4" | "font-size-3" | "font-size-2" | "font-size-1" | "font-height-1" | "font-height-2" | "font-height-3" | "font-family-default" | "font-family-monospace" | "color-primary" | "color-accent" | "color-neutral-darkest" | "color-neutral-dark" | "color-neutral" | "color-neutral-light" | "color-neutral-lighter" | "color-neutral-lightest" | "color-neutral-white" | "color-success-dark" | "color-success" | "color-success-light" | "color-transparent" | "color-warning-dark" | "color-warning" | "color-warning-light" | "color-danger-dark" | "color-danger" | "color-danger-light" | "border-width-none" | "border-width-thin" | "border-width-medium" | "border-width-bold" | "border-radius-none" | "border-radius-s" | "border-radius-m" | "border-radius-l" | "border-radius-circle" | undefined;
11
+ color?: "left" | "center" | "right" | "color-neutral-darker" | "button-border-radius" | "button-border-width" | "button-font-weight" | "button-font-height" | "button-small-font-size" | "button-small-height" | "button-small-padding-x" | "button-small-padding-y" | "button-font-size" | "button-height" | "button-width" | "button-padding-y" | "button-padding-x" | "button-spacing-x" | "button-large-font-size" | "button-large-height" | "button-large-padding-x" | "button-large-padding-y" | "button-outline-offset" | "button-primary-background" | "button-primary-background--hover" | "button-primary-background--focus" | "button-primary-background--active" | "button-primary-background--disabled" | "button-primary-border-color" | "button-primary-border-color--hover" | "button-primary-border-color--focus" | "button-primary-border-color--active" | "button-primary-border-color--disabled" | "button-primary-color" | "button-primary-color--hover" | "button-primary-color--focus" | "button-primary-color--active" | "button-primary-color--disabled" | "button-primary-outline" | "button-primary-box-shadow" | "button-secondary-background" | "button-secondary-background--hover" | "button-secondary-background--focus" | "button-secondary-background--active" | "button-secondary-background--disabled" | "button-secondary-border-color" | "button-secondary-border-color--hover" | "button-secondary-border-color--focus" | "button-secondary-border-color--active" | "button-secondary-border-color--disabled" | "button-secondary-color" | "button-secondary-color--hover" | "button-secondary-color--focus" | "button-secondary-color--active" | "button-secondary-color--disabled" | "button-secondary-outline" | "button-secondary-box-shadow" | "button-secondary-dark-background" | "button-secondary-dark-background--hover" | "button-secondary-dark-background--focus" | "button-secondary-dark-background--active" | "button-secondary-dark-background--disabled" | "button-secondary-dark-border-color" | "button-secondary-dark-border-color--hover" | "button-secondary-dark-border-color--focus" | "button-secondary-dark-border-color--active" | "button-secondary-dark-border-color--disabled" | "button-secondary-dark-color" | "button-secondary-dark-color--hover" | "button-secondary-dark-color--focus" | "button-secondary-dark-color--active" | "button-secondary-dark-color--disabled" | "button-tertiary-background" | "button-tertiary-background--hover" | "button-tertiary-background--focus" | "button-tertiary-background--active" | "button-tertiary-background--disabled" | "button-tertiary-border-color" | "button-tertiary-border-color--hover" | "button-tertiary-border-color--focus" | "button-tertiary-border-color--active" | "button-tertiary-border-color--disabled" | "button-tertiary-color" | "button-tertiary-color--hover" | "button-tertiary-color--focus" | "button-tertiary-color--active" | "button-tertiary-color--disabled" | "button-tertiary-outline" | "button-tertiary-box-shadow" | "button-warning-background" | "button-warning-background--hover" | "button-warning-background--focus" | "button-warning-background--active" | "button-warning-background--disabled" | "button-warning-border-color" | "button-warning-border-color--hover" | "button-warning-border-color--focus" | "button-warning-border-color--active" | "button-warning-border-color--disabled" | "button-warning-color" | "button-warning-color--hover" | "button-warning-color--focus" | "button-warning-color--active" | "button-warning-color--disabled" | "button-warning-outline" | "button-warning-box-shadow" | "button-icon-border-radius" | "button-icon-small-width" | "button-icon-width" | "button-icon-large-width" | "button-icon-background" | "button-icon-background--hover" | "button-icon-background--focus" | "button-icon-background--active" | "button-icon-background--disabled" | "button-icon-border-color" | "button-icon-border-color--hover" | "button-icon-border-color--focus" | "button-icon-border-color--active" | "button-icon-border-color--disabled" | "button-icon-color" | "button-icon-color--hover" | "button-icon-color--focus" | "button-icon-color--active" | "button-icon-color--disabled" | "button-icon-box-shadow" | "button-icon-outline" | "tag-border-radius" | "tag-border-width" | "tag-font-height" | "tag-spacing" | "tag-removable-spacing" | "tag-width" | "tag-box-shadow" | "tag-outline-offset" | "tag-remove-button-background" | "tag-remove-button-border-radius" | "tag-icon-spacing" | "tag-small-font-size" | "tag-small-font-weight" | "tag-small-height" | "tag-small-transform" | "tag-small-leading-display" | "tag-small-remove-button-size" | "tag-small-remove-button-icon-size" | "tag-small-spacing" | "tag-small-removable-spacing" | "tag-font-size" | "tag-font-weight" | "tag-height" | "tag-transform" | "tag-leading-display" | "tag-remove-button-size" | "tag-remove-button-icon-size" | "tag-large-font-size" | "tag-large-font-weight" | "tag-large-height" | "tag-large-transform" | "tag-large-leading-display" | "tag-large-remove-button-size" | "tag-large-remove-button-icon-size" | "tag-large-spacing" | "tag-default-background" | "tag-default-background--hover" | "tag-default-background--focus" | "tag-default-color" | "tag-default-color--hover" | "tag-default-color--focus" | "tag-default-border-color" | "tag-default-border-color--hover" | "tag-default-border-color--focus" | "tag-default-outline" | "tag-outlined-background" | "tag-outlined-background--hover" | "tag-outlined-background--focus" | "tag-outlined-color" | "tag-outlined-color--hover" | "tag-outlined-color--focus" | "tag-outlined-border-color" | "tag-outlined-border-color--hover" | "tag-outlined-border-color--focus" | "tag-outline-outline" | "tag-accent-background" | "tag-accent-background--hover" | "tag-accent-background--focus" | "tag-accent-color" | "tag-accent-color--hover" | "tag-accent-color--focus" | "tag-accent-border-color" | "tag-accent-border-color--hover" | "tag-accent-border-color--focus" | "tag-accent-outline" | "tag-success-background" | "tag-success-background--hover" | "tag-success-background--focus" | "tag-success-color" | "tag-success-color--hover" | "tag-success-color--focus" | "tag-success-border-color" | "tag-success-border-color--hover" | "tag-success-border-color--focus" | "tag-success-outline" | "tag-warning-background" | "tag-warning-background--hover" | "tag-warning-background--focus" | "tag-warning-color" | "tag-warning-color--hover" | "tag-warning-color--focus" | "tag-warning-border-color" | "tag-warning-border-color--hover" | "tag-warning-border-color--focus" | "tag-warning-outline" | "tag-danger-background" | "tag-danger-background--hover" | "tag-danger-background--focus" | "tag-danger-color" | "tag-danger-color--hover" | "tag-danger-color--focus" | "tag-danger-border-color" | "tag-danger-border-color--hover" | "tag-danger-border-color--focus" | "tag-danger-outline" | "checkbox-color" | "checkbox-font-weight" | "checkbox-font-size" | "checkbox-selector-border-radius" | "checkbox-selector-size" | "checkbox-selector-box-shadow" | "checkbox-selector-outline" | "checkbox-selector-outline-offset" | "checkbox-small-font-size" | "checkbox-selector-icon-color" | "checkbox-selector-background" | "checkbox-selector-background--hover" | "checkbox-selector-background--focus" | "checkbox-selector-background--disabled" | "checkbox-selector-checked-background" | "checkbox-selector-checked-background--hover" | "checkbox-selector-checked-background--focus" | "checkbox-selector-checked-background--disabled" | "checkbox-selector-border-color" | "checkbox-selector-border-color--hover" | "checkbox-selector-border-color--focus" | "checkbox-selector-border-color--disabled" | "checkbox-selector-checked-border-color" | "checkbox-selector-checked-border-color--hover" | "checkbox-selector-checked-border-color--focus" | "checkbox-selector-checked-border-color--disabled" | "checkbox-dark-color" | "checkbox-dark-selector-background" | "checkbox-dark-selector-background--hover" | "checkbox-dark-selector-background--focus" | "checkbox-dark-selector-background--disabled" | "checkbox-dark-selector-border-color" | "checkbox-dark-selector-border-color--hover" | "checkbox-dark-selector-border-color--focus" | "checkbox-dark-selector-border-color--disabled" | "radio-color" | "radio-font-weight" | "radio-font-size" | "radio-selector-border-radius" | "radio-selector-size" | "radio-selector-box-shadow" | "radio-small-font-size" | "radio-small-selector-size" | "radio-selector-background" | "radio-selector-background--hover" | "radio-selector-background--focus" | "radio-selector-background--disabled" | "radio-selector-border-color" | "radio-selector-border-color--hover" | "radio-selector-border-color--focus" | "radio-selector-border-color--disabled" | "radio-selector-border-color--checked" | "radio-dark-color" | "radio-dark-selector-background" | "radio-dark-selector-background--hover" | "radio-dark-selector-background--focus" | "radio-dark-selector-background--disabled" | "radio-dark-selector-border-color" | "radio-dark-selector-border-color--hover" | "radio-dark-selector-border-color--focus" | "radio-dark-selector-border-color--disabled" | "tooltip-arrow-height" | "tooltip-arrow-width" | "tooltip-background" | "tooltip-border-radius" | "tooltip-color" | "tooltip-dark-outline" | "tooltip-font-size" | "tooltip-font-height" | "tooltip-max-width" | "tooltip-min-width" | "tooltip-outline" | "tooltip-padding-x" | "tooltip-padding-y" | "tooltip-margin" | "tooltip-shadow" | "modal-small-max-width" | "modal-max-width" | "modal-large-max-width" | "modal-overlay-background" | "dialog-header-color" | "dialog-header-border-color" | "dialog-body-font-color" | "text-field-border-radius" | "text-field-color" | "text-field-font-size" | "text-field-font-weight" | "text-field-font-height" | "text-field-height" | "text-field-padding-x" | "text-field-padding-y" | "text-field-box-shadow" | "text-field-outline" | "text-field-outline-offset" | "text-field-small-height" | "text-field-small-padding-x" | "text-field-small-padding-y" | "text-field-small-font-size" | "text-field-large-height" | "text-field-large-padding-x" | "text-field-large-padding-y" | "text-field-large-font-size" | "text-field-background" | "text-field-background--hover" | "text-field-background--focus" | "text-field-background--disabled" | "text-field-border-color" | "text-field-border-color--hover" | "text-field-border-color--focus" | "text-field-border-color--disabled" | "text-field-dark-color" | "text-field-dark-background" | "text-field-dark-border-color" | "text-field-dark-border-color--hover" | "text-field-dark-border-color--focus" | "text-field-dark-border-color--disabled" | "text-field-success-border-color" | "text-field-danger-border-color" | "text-field-dark-box-shadow" | "textarea-border-radius" | "textarea-color" | "textarea-font-size" | "textarea-font-weight" | "textarea-font-height" | "textarea-min-height" | "textarea-padding-x" | "textarea-padding-y" | "textarea-box-shadow" | "textarea-outline" | "textarea-outline-offset" | "textarea-small-padding-x" | "textarea-small-padding-y" | "textarea-small-font-size" | "textarea-large-height" | "textarea-large-padding-x" | "textarea-large-padding-y" | "textarea-large-font-size" | "textarea-background" | "textarea-background--hover" | "textarea-background--focus" | "textarea-background--disabled" | "textarea-border-color" | "textarea-border-color--hover" | "textarea-border-color--focus" | "textarea-border-color--disabled" | "textarea-dark-color" | "textarea-dark-background" | "textarea-dark-border-color" | "textarea-dark-border-color--hover" | "textarea-dark-border-color--focus" | "textarea-dark-border-color--disabled" | "textarea-success-border-color" | "textarea-danger-border-color" | "textarea-dark-box-shadow" | "link-font-size" | "link-font-height" | "link-color" | "link-font-weight" | "link-font-weight--hover" | "link-box-shadow" | "link-outline" | "link-outline-offset" | "breadcrumbs-font-size" | "breadcrumbs-font-height" | "breadcrumbs-font-weight" | "breadcrumbs-font-weight--active" | "breadcrumbs-spacing-x" | "banner-font-size" | "banner-font-height" | "banner-default-height" | "banner-min-width" | "banner-description-color" | "banner-title-font-weight" | "banner-border-radius" | "banner-border-width" | "banner-close-button-color" | "banner-icon-width" | "banner-icon-height" | "banner-icon-margin-right" | "banner-default-padding-x" | "banner-default-padding-y" | "banner-large-padding" | "banner-default-icon-alignment" | "banner-large-icon-alignment" | "banner-default-close-top" | "banner-default-close-right" | "banner-large-close-top" | "banner-large-close-right" | "banner-title-color-success" | "banner-border-color-success" | "banner-background-success" | "banner-title-color-danger" | "banner-border-color-danger" | "banner-background-danger" | "banner-title-color-warning" | "banner-border-color-warning" | "banner-background-warning" | "banner-title-color-neutral" | "banner-border-color-neutral" | "banner-background-neutral" | "banner-button-background-success" | "banner-button-background-neutral" | "banner-button-background-danger" | "banner-button-background-warning" | "banner-button-background-secondary" | "banner-button-text-color" | "banner-secondary-button-margin-left" | "progressbar-height" | "progressbar-background" | "progressbar-line" | "progressbar-neutral-fill" | "progressbar-success-fill" | "progressbar-danger-fill" | "progressbar-warning-fill" | "toast-padding-x" | "toast-padding-y" | "toast-border-radius" | "toast-font-color" | "toast-font-size" | "toast-font-weight" | "toast-font-height" | "toast-close-x" | "toast-close-y" | "toast-shadow" | "toast-width" | "toast-neutral-background" | "toast-success-background" | "toast-danger-background" | "toast-warning-background" | "label-font-size" | "label-font-weight" | "label-font-height" | "label-font-color" | "label-required-color" | "label-tooltip-margin-left" | "label-tooltip-font-weight" | "label-tooltip-font-size" | "label-tooltip-font-color" | "label-tooltip-background-color" | "label-dark-font-color" | "label-tooltip-dark-font-color" | "label-tooltip-dark-background-color" | "switch-width" | "switch-height" | "switch-border-radius" | "switch-box-shadow" | "switch-outline" | "switch-outline-offset" | "switch-large-width" | "switch-large-height" | "switch-large-border-radius" | "switch-icon-height" | "switch-icon-width" | "switch-icon-color" | "switch-large-icon-height" | "switch-large-icon-width" | "switch-icon-active-x" | "switch-icon-active-y" | "switch-large-icon-active-x" | "switch-large-icon-active-y" | "switch-icon-inactive-x" | "switch-icon-inactive-y" | "switch-large-icon-inactive-x" | "switch-large-icon-inactive-y" | "switch-inactive-background-color" | "switch-inactive-background-color--hover" | "switch-active-background-color" | "switch-active-background-color--hover" | "switch-slider-x" | "switch-slider-active-x" | "switch-slider-y" | "switch-slider-active-y" | "switch-slider-size" | "switch-slider-background-color" | "switch-slider-border-radius" | "switch-slider-large-x" | "switch-slider-large-active-x" | "switch-slider-large-y" | "switch-slider-large-active-y" | "switch-slider-large-size" | "steps-step-padding-y" | "steps-step-padding-x" | "steps-color" | "steps-progress-padding-y" | "steps-progress-padding-x" | "steps-spacing-y" | "steps-indicator-size" | "steps-conector-height" | "steps-conector-height--complete" | "steps-conector-top" | "steps-conector-top--complete" | "steps-progress-step-background-color" | "steps-progress-step-background-color--complete" | "card-background" | "card-border-color" | "card-border-radius" | "card-color" | "card-flag-background-danger" | "card-flag-background-neutral" | "card-flag-background-success" | "card-flag-background-warning" | "card-flag-width" | "card-font-height" | "card-padding-x" | "card-padding-y" | "card-separator-background" | "card-subtitle-font-size" | "card-subtitle-font-weight" | "card-title-font-height" | "card-title-font-size" | "card-title-font-weight" | "dropdown-background" | "dropdown-border-color" | "dropdown-border-radius" | "dropdown-shadow" | "popover-background" | "popover-border-color" | "popover-border-radius" | "popover-shadow" | "side-navigation-collapsing-breakpoint" | "side-navigation-width" | "side-navigation-width-large" | "side-navigation-padding-bottom" | "side-navigation-background-color" | "side-navigation-component-margin-top" | "side-navigation-logo-padding-x" | "side-navigation-separator-color" | "side-navigation-menu-title-font-weight" | "side-navigation-menu-title-font-size" | "side-navigation-menu-title-line-height" | "side-navigation-menu-link-color--hover" | "side-navigation-menu-link-background-color--active" | "side-navigation-menu-link-box-shadow-color--active" | "side-navigation-menu-item-color--focus" | "table-row-default-color" | "table-row-variant-color" | "table-row-selected-color" | "top-navigation-height" | "top-navigation-background-color" | "top-navigation-border-color" | "top-navigation-dropdown-separator-color" | "top-navigation-dropdown-trigger-color" | "top-navigation-dropdown-subitem-color" | "top-navigation-item-icon-color" | "top-navigation-item-color" | "top-navigation-item-color--hover" | "select-trigger-height" | "select-trigger-border-color" | "select-selected-option-check-color" | "select-selected-option-background-color" | "toggle-text-transform" | "toggle-box-shadow" | "toggle-outline" | "toggle-outline-offset" | "toggle-background-color" | "toggle-background-color--hover" | "toggle-background-color--focus" | "toggle-background-color--active" | "toggle-background-color--disabled" | "toggle-checked-background-color" | "toggle-checked-background-color--hover" | "toggle-checked-background-color--focus" | "toggle-checked-background-color--active" | "toggle-checked-background-color--disabled" | "toggle-color" | "toggle-color--hover" | "toggle-color--focus" | "toggle-color--active" | "toggle-color--disabled" | "toggle-checked-color" | "toggle-checked-color--hover" | "toggle-checked-color--focus" | "toggle-checked-color--active" | "toggle-checked-color--disabled" | "toggle-single-border-color" | "toggle-single-border-color--hover" | "toggle-single-border-color--focus" | "toggle-single-border-color--active" | "toggle-single-border-color--disabled" | "toggle-single-checked-border-color" | "toggle-single-checked-border-color--disabled" | "toggle-single-font-size" | "toggle-single-small-font-size" | "toggle-single-height" | "toggle-single-small-height" | "toggle-multiple-border-color" | "toggle-multiple-border-color--hover" | "toggle-multiple-border-color--focus" | "toggle-multiple-border-color--active" | "toggle-multiple-border-color--disabled" | "toggle-multiple-checked-border-color" | "toggle-multiple-checked-border-color--disabled" | "toggle-multiple-font-size" | "toggle-multiple-small-font-size" | "toggle-multiple-height" | "toggle-multiple-small-height" | "toggle-group-border-color--disabled" | "toggle-group-multiple-border-width" | "toggle-group-multiple-border-style" | "toggle-group-multiple-border-color" | "toggle-group-multiple-border-radius" | "toggle-group-multiple-padding" | "toggle-group-single-border-width" | "toggle-group-single-border-style" | "toggle-group-single-border-color" | "toggle-group-single-border-radius" | "toggle-group-single-padding" | "dropdown-trigger-border-color" | "dropdown-trigger-dark-border-color" | "dropdown-trigger-outlined-border-color" | "dropdown-trigger-expanded-color" | "dropdown-trigger-height" | "dropdown-trigger-small-height" | "dropdown-trigger-large-height" | "dropdown-trigger-box-shadow" | "dropdown-trigger-outline" | "dropdown-trigger-outline-offset" | "height-small" | "height-default" | "height-large" | "z-index-none" | "z-index-default" | "z-index-droplist" | "z-index-tooltip" | "z-index-overlay" | "z-index-modal" | "space-none" | "space-2xs" | "space-xs" | "space-s" | "space-m" | "space-l" | "space-xl" | "space-2xl" | "space-3xl" | "shadow-none" | "shadow-modal" | "shadow-droplist" | "shadow-glow-primary" | "shadow-glow-warning" | "opacity-0" | "opacity-20" | "opacity-40" | "opacity-60" | "opacity-100" | "font-weight-regular" | "font-weight-medium" | "font-weight-bold" | "font-size-6" | "font-size-5" | "font-size-4" | "font-size-3" | "font-size-2" | "font-size-1" | "font-height-1" | "font-height-2" | "font-height-3" | "font-family-default" | "font-family-monospace" | "color-primary" | "color-accent" | "color-neutral-darkest" | "color-neutral-dark" | "color-neutral" | "color-neutral-light" | "color-neutral-lighter" | "color-neutral-lightest" | "color-neutral-white" | "color-success-dark" | "color-success" | "color-success-light" | "color-transparent" | "color-warning-dark" | "color-warning" | "color-warning-light" | "color-danger-dark" | "color-danger" | "color-danger-light" | "border-width-none" | "border-width-thin" | "border-width-medium" | "border-width-bold" | "border-radius-none" | "border-radius-s" | "border-radius-m" | "border-radius-l" | "border-radius-circle" | undefined;
12
12
  } & {
13
13
  children?: import("react").ReactNode;
14
14
  }, never>;