@purple/phoenix-components 4.36.0 → 5.0.0-alpha.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 (10) hide show
  1. package/CHANGELOG.md +15 -35
  2. package/README.md +108 -2
  3. package/dist/bundle.cjs.js +1 -1
  4. package/dist/bundle.cjs.js.map +1 -1
  5. package/dist/bundle.esm.js +2 -2
  6. package/dist/bundle.esm.js.map +1 -1
  7. package/dist/bundle.umd.js +1 -1
  8. package/dist/bundle.umd.js.map +1 -1
  9. package/dist/index.d.ts +737 -202
  10. package/package.json +37 -35
package/dist/index.d.ts CHANGED
@@ -1,12 +1,12 @@
1
- import * as React$1 from 'react';
2
- import React__default, { HTMLAttributes, ReactElement, InputHTMLAttributes, FocusEventHandler, JSXElementConstructor, MouseEventHandler, TextareaHTMLAttributes } from 'react';
1
+ import React$1, { HTMLAttributes, PropsWithChildren, ReactElement, InputHTMLAttributes, JSXElementConstructor, MouseEventHandler, FocusEventHandler, TextareaHTMLAttributes } from 'react';
3
2
  import * as styled_components from 'styled-components';
4
- import { IntrinsicElementsKeys } from 'styled-components';
3
+ import { DefaultTheme, IntrinsicElementsKeys } from 'styled-components';
5
4
  import { LayoutProps, FlexboxProps, GridProps, BackgroundColorProps, BackgroundProps, OpacityProps, PositionProps, BorderProps } from 'styled-system';
6
5
  import * as CSS from 'csstype';
7
- import { OptionTypeBase, NamedProps } from 'react-select';
8
6
  import { DayPickerProps } from 'react-day-picker';
9
7
  import { Props } from 'tippy.js';
8
+ import { Accept } from 'react-dropzone';
9
+ import { Props as Props$1 } from 'react-select';
10
10
  import { TippyProps } from '@tippyjs/react';
11
11
  export { TabPanel, Tabs } from 'react-tabs';
12
12
 
@@ -15,41 +15,47 @@ declare type GenericComponentProps = {
15
15
  className?: string;
16
16
  };
17
17
 
18
- declare const Spacing: readonly ["xxxs", "xxs", "xs", "s", "m", "l", "xl", "xxl", "xxxl"];
18
+ declare type CSSValue = (string & {}) | number;
19
+ declare type CSSColor = string & {};
20
+
21
+ declare const Spacing: readonly ["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
19
22
  declare type Spacing = typeof Spacing[number];
23
+ declare const isSpacing: (size?: Spacing | CSSValue) => size is "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
24
+ declare const getSpacingCssValue: (theme: DefaultTheme, value?: Spacing | CSSValue, defaultValue?: string) => string;
20
25
 
21
26
  interface MarginProps {
22
- ml?: Spacing | string | number;
23
- mr?: Spacing | string | number;
24
- mt?: Spacing | string | number;
25
- mb?: Spacing | string | number;
26
- mx?: Spacing | string | number;
27
- my?: Spacing | string | number;
28
- m?: Spacing | string | number;
27
+ ml?: Spacing | CSSValue;
28
+ mr?: Spacing | CSSValue;
29
+ mt?: Spacing | CSSValue;
30
+ mb?: Spacing | CSSValue;
31
+ mx?: Spacing | CSSValue;
32
+ my?: Spacing | CSSValue;
33
+ m?: Spacing | CSSValue;
29
34
  }
30
35
 
31
36
  interface PaddingProps {
32
- pl?: Spacing | string | number;
33
- pr?: Spacing | string | number;
34
- pt?: Spacing | string | number;
35
- pb?: Spacing | string | number;
36
- px?: Spacing | string | number;
37
- py?: Spacing | string | number;
38
- p?: Spacing | string | number;
37
+ pl?: Spacing | CSSValue;
38
+ pr?: Spacing | CSSValue;
39
+ pt?: Spacing | CSSValue;
40
+ pb?: Spacing | CSSValue;
41
+ px?: Spacing | CSSValue;
42
+ py?: Spacing | CSSValue;
43
+ p?: Spacing | CSSValue;
39
44
  }
40
45
 
41
- declare const ColorTheme: readonly ["primary", "success", "warning", "error", "info", "neutral"];
46
+ declare const ColorTheme: readonly ["brand", "success", "warning", "error", "info", "neutral"];
42
47
  declare type ColorTheme = typeof ColorTheme[number];
48
+ declare const isColorTheme: (color?: Color) => color is "brand" | "success" | "warning" | "error" | "info" | "neutral";
49
+ declare const TextColor: readonly ["primary", "secondary", "tertiary", "quaternary"];
50
+ declare type TextColor = typeof TextColor[number];
51
+ declare const isTextColor: (color?: Color) => color is "primary" | "secondary" | "tertiary" | "quaternary";
52
+ declare type Color = TextColor | ColorTheme | CSSColor;
43
53
 
44
54
  declare const TextAlignment: readonly ["left", "center", "right", "justify"];
45
55
  declare type TextAlignment = typeof TextAlignment[number];
46
56
 
47
- declare const TextColor: readonly ["darkest", "dark", "light", "lightest", "white"];
48
- declare type TextColor = typeof TextColor[number];
49
-
50
57
  interface CommonTextProps<T> extends HTMLAttributes<T>, GenericComponentProps, TextAlignProp {
51
- colorTheme?: ColorTheme;
52
- color?: TextColor;
58
+ color?: Color;
53
59
  bold?: boolean;
54
60
  }
55
61
  interface TextAlignProp {
@@ -58,23 +64,14 @@ interface TextAlignProp {
58
64
 
59
65
  interface GapProps {
60
66
  gap?: CSS.Property.Gap;
61
- rowGap?: Spacing | string | number;
62
- columnGap?: Spacing | string | number;
67
+ rowGap?: Spacing | CSSValue;
68
+ columnGap?: Spacing | CSSValue;
63
69
  }
64
70
 
65
71
  interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, LayoutProps, FlexboxProps, GridProps, MarginProps, PaddingProps, BackgroundColorProps, BackgroundProps, OpacityProps, PositionProps, TextAlignProp, BorderProps, GenericComponentProps, GapProps {
66
72
  element?: IntrinsicElementsKeys;
67
73
  }
68
- declare const Box: React__default.FC<BoxProps>;
69
-
70
- declare const ComponentSize: readonly ["tiny", "small", "medium", "large"];
71
- declare type ComponentSize = typeof ComponentSize[number];
72
- declare const ComponentSizeSmallMedium: readonly ["small", "medium"];
73
- declare type ComponentSizeSmallMedium = typeof ComponentSizeSmallMedium[number];
74
- declare const ComponentSizeMediumLarge: readonly ["medium", "large"];
75
- declare type ComponentSizeMediumLarge = typeof ComponentSizeMediumLarge[number];
76
- declare const ComponentSizeSmallMediumLarge: readonly ["small", "medium", "large"];
77
- declare type ComponentSizeSmallMediumLarge = typeof ComponentSizeSmallMediumLarge[number];
74
+ declare const Box: React$1.FC<BoxProps>;
78
75
 
79
76
  declare const IconAlignment: readonly ["left", "right"];
80
77
  declare type IconAlignment = typeof IconAlignment[number];
@@ -275,41 +272,53 @@ declare const PhoenixIconsSrc: {
275
272
  readonly withdrawal: string;
276
273
  readonly wrench: string;
277
274
  };
278
- declare const PhoenixIconsOutlined: ("filter" | "search" | "revert" | "document" | "list" | "email" | "copy" | "download" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "bell" | "browser" | "bullet-point" | "burger" | "calendar" | "camera" | "chat" | "check" | "check-circle" | "clock" | "cog" | "cross" | "deposit" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "driving-licence" | "edit" | "ellipsis" | "exclamation" | "exit" | "external" | "eye" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "later" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "refund" | "scales" | "star" | "smartphone" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench")[];
275
+ declare const PhoenixIconsOutlined: ("filter" | "revert" | "document" | "list" | "search" | "email" | "copy" | "download" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "bell" | "browser" | "bullet-point" | "burger" | "calendar" | "camera" | "chat" | "check" | "check-circle" | "clock" | "cog" | "cross" | "deposit" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "driving-licence" | "edit" | "ellipsis" | "exclamation" | "exit" | "external" | "eye" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "later" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "refund" | "scales" | "star" | "smartphone" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench")[];
279
276
  declare type PhoenixIconsOutlined = keyof typeof PhoenixIconsOutlinedSrc;
280
277
  declare const PhoenixIconsColored: ("browser-primary" | "calendar-primary" | "camera-primary" | "driving-licence-primary" | "email-primary" | "exclamation-error" | "exclamation-warning" | "house-primary" | "id-card-primary" | "lock-primary" | "lock-success" | "paper-primary" | "passport-primary" | "photo-user-primary" | "pin-primary" | "question-circle-primary" | "smartphone-primary" | "star-primary" | "star-warning" | "trash-error")[];
281
278
  declare type PhoenixIconsColored = keyof typeof PhoenixIconsColoredSrc;
282
- declare const PhoenixIcons: ("filter" | "search" | "revert" | "document" | "list" | "email" | "copy" | "download" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "bell" | "browser" | "bullet-point" | "burger" | "calendar" | "camera" | "chat" | "check" | "check-circle" | "clock" | "cog" | "cross" | "deposit" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "driving-licence" | "edit" | "ellipsis" | "exclamation" | "exit" | "external" | "eye" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "later" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "refund" | "scales" | "star" | "smartphone" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench" | "browser-primary" | "calendar-primary" | "camera-primary" | "driving-licence-primary" | "email-primary" | "exclamation-error" | "exclamation-warning" | "house-primary" | "id-card-primary" | "lock-primary" | "lock-success" | "paper-primary" | "passport-primary" | "photo-user-primary" | "pin-primary" | "question-circle-primary" | "smartphone-primary" | "star-primary" | "star-warning" | "trash-error")[];
279
+ declare const PhoenixIcons: ("filter" | "revert" | "document" | "list" | "search" | "email" | "copy" | "download" | "actions" | "add-circle" | "android" | "angled-arrow-left" | "angled-arrow-right" | "apple" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "asterisk" | "bell" | "browser" | "bullet-point" | "burger" | "calendar" | "camera" | "chat" | "check" | "check-circle" | "clock" | "cog" | "cross" | "deposit" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "dots-handle-reorder" | "driving-licence" | "edit" | "ellipsis" | "exclamation" | "exit" | "external" | "eye" | "forward-arrow" | "gift" | "history" | "house" | "id-card" | "info-circle" | "language" | "later" | "lock" | "paper" | "passport" | "photo-user" | "pin" | "play-circle" | "profile" | "question-circle" | "refresh" | "refund" | "scales" | "star" | "smartphone" | "star-circle" | "stopwatch" | "subtract-circle" | "times-circle" | "transfer" | "trash" | "upload" | "windows" | "withdrawal" | "wrench" | "browser-primary" | "calendar-primary" | "camera-primary" | "driving-licence-primary" | "email-primary" | "exclamation-error" | "exclamation-warning" | "house-primary" | "id-card-primary" | "lock-primary" | "lock-success" | "paper-primary" | "passport-primary" | "photo-user-primary" | "pin-primary" | "question-circle-primary" | "smartphone-primary" | "star-primary" | "star-warning" | "trash-error")[];
283
280
  declare type PhoenixIcons = keyof typeof PhoenixIconsSrc;
284
281
 
285
282
  declare type IconType = PhoenixIconsOutlined | React.ReactElement | string;
286
283
 
284
+ declare const Sizing: readonly ["xs", "sm", "md", "lg"];
285
+ declare type Sizing = typeof Sizing[number];
286
+ declare const isSizing: (size?: Sizing | CSSValue) => size is "xs" | "sm" | "md" | "lg";
287
+ declare const SizingSmMd: readonly ["sm", "md"];
288
+ declare type SizingSmMd = typeof SizingSmMd[number];
289
+ declare const SizingMdLg: readonly ["md", "lg"];
290
+ declare type SizingMdLg = typeof SizingMdLg[number];
291
+ declare const SizingSmMdLg: readonly ["sm", "md", "lg"];
292
+ declare type SizingSmMdLg = typeof SizingSmMdLg[number];
293
+
287
294
  interface CommonButtonProps extends MarginProps {
288
295
  colorTheme?: ColorTheme;
289
- size?: ComponentSize;
296
+ size?: Sizing;
290
297
  minimal?: boolean;
291
- light?: boolean;
298
+ secondary?: boolean;
299
+ outline?: boolean;
292
300
  icon?: IconType;
293
301
  iconAlignment?: IconAlignment;
294
302
  loading?: boolean;
295
303
  }
296
304
 
297
- interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement>, CommonButtonProps, GenericComponentProps {
305
+ interface ButtonProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, CommonButtonProps, GenericComponentProps {
306
+ light?: boolean;
298
307
  }
299
- declare const Button: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ButtonProps> & React__default.RefAttributes<HTMLButtonElement>>;
308
+ declare const Button: React$1.ForwardRefExoticComponent<React$1.PropsWithoutRef<ButtonProps> & React$1.RefAttributes<HTMLButtonElement>>;
300
309
 
301
310
  interface ButtonGroupProps extends GenericComponentProps {
302
311
  children: JSX.Element[];
303
312
  dividers?: boolean;
304
313
  }
305
- declare const ButtonGroup: React__default.FC<ButtonGroupProps>;
314
+ declare const ButtonGroup: React$1.FC<ButtonGroupProps>;
306
315
 
307
316
  interface CardProps extends PaddingProps, MarginProps, GenericComponentProps {
308
317
  elevated?: boolean;
309
318
  disabled?: boolean;
310
- onClick?: React__default.MouseEventHandler<HTMLDivElement>;
319
+ onClick?: React$1.MouseEventHandler<HTMLDivElement>;
311
320
  }
312
- declare const Card: React__default.FC<CardProps>;
321
+ declare const Card: React$1.FC<PropsWithChildren<CardProps>>;
313
322
 
314
323
  declare type FormControlWarningType = ReactElement | string;
315
324
  declare type FormControlErrorType = ReactElement | string | boolean;
@@ -317,78 +326,34 @@ declare type FormControlErrorType = ReactElement | string | boolean;
317
326
  interface CheckboxRadioCommonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, GenericComponentProps {
318
327
  RTL?: boolean;
319
328
  colorTheme?: ColorTheme;
320
- size?: ComponentSizeMediumLarge;
321
- label?: React__default.ReactNode;
329
+ label?: React$1.ReactNode;
322
330
  warning?: FormControlWarningType;
323
331
  error?: FormControlErrorType;
324
332
  }
325
333
 
326
334
  declare type CheckboxProps = CheckboxRadioCommonProps;
327
- declare const Checkbox: React__default.VoidFunctionComponent<CheckboxProps>;
335
+ declare const Checkbox: React$1.VoidFunctionComponent<CheckboxProps>;
328
336
 
329
- interface ClosableButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement>, GenericComponentProps {
330
- onClose?: React__default.MouseEventHandler<HTMLButtonElement>;
337
+ interface ClosableButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, GenericComponentProps {
338
+ onClose?: React$1.MouseEventHandler<HTMLButtonElement>;
331
339
  }
332
- declare const ClosableButton: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<ClosableButtonProps> & React__default.RefAttributes<HTMLButtonElement>>;
340
+ declare const ClosableButton: React$1.ForwardRefExoticComponent<React$1.PropsWithoutRef<ClosableButtonProps> & React$1.RefAttributes<HTMLButtonElement>>;
333
341
 
334
342
  interface ClosableItemProps extends GenericComponentProps {
335
- onClose?: React__default.MouseEventHandler<HTMLButtonElement>;
343
+ onClose?: React$1.MouseEventHandler<HTMLButtonElement>;
336
344
  }
337
- declare const ClosableItem: React__default.FC<ClosableItemProps>;
345
+ declare const ClosableItem: React$1.FC<ClosableItemProps>;
338
346
 
339
347
  interface CollapsibleProps extends GenericComponentProps {
340
348
  collapsed: boolean;
341
349
  }
342
- declare const Collapsible: React$1.FC<CollapsibleProps>;
350
+ declare const Collapsible: React$1.FC<PropsWithChildren<CollapsibleProps>>;
343
351
 
344
352
  interface CollapsibleCardProps extends CardProps, GenericComponentProps {
345
353
  heading: string;
346
354
  rightContent?: React$1.ReactNode;
347
355
  }
348
- declare const CollapsibleCard: React$1.FC<CollapsibleCardProps>;
349
-
350
- interface FormControlProps extends GenericComponentProps {
351
- label?: string;
352
- success?: boolean;
353
- warning?: FormControlWarningType;
354
- error?: FormControlErrorType;
355
- contentRight?: string | React__default.ReactNode;
356
- helperText?: string;
357
- RTL?: boolean;
358
- size?: ComponentSize;
359
- disabled?: boolean;
360
- focused?: boolean;
361
- minimal?: boolean;
362
- }
363
-
364
- interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'onChange'>, FormControlProps {
365
- value: number | null;
366
- onChange: (value: number | null) => void;
367
- numberFormatErrorMessage?: string;
368
- maxDecimalCount?: number;
369
- }
370
- declare const NumberInput: React__default.FC<NumberInputProps>;
371
-
372
- interface CommonSelectProps extends FormControlProps {
373
- name?: string;
374
- options?: SelectOption[];
375
- onFocus?: FocusEventHandler<HTMLSelectElement>;
376
- onBlur?: FocusEventHandler<HTMLSelectElement>;
377
- reactSelectProps?: Omit<NamedProps, 'theme'>;
378
- preventSearch?: boolean;
379
- }
380
- interface SelectOption extends OptionTypeBase {
381
- label: string;
382
- value: string | number;
383
- isDisabled?: boolean;
384
- }
385
-
386
- interface SelectProps extends CommonSelectProps {
387
- onChange: (option: SelectOption | null) => void;
388
- value?: SelectOption | null;
389
- useNativeSelectOnMobile?: boolean;
390
- }
391
- declare const Select: React__default.FC<SelectProps>;
356
+ declare const CollapsibleCard: React$1.FC<PropsWithChildren<CollapsibleCardProps>>;
392
357
 
393
358
  interface Month {
394
359
  value: number;
@@ -415,14 +380,11 @@ interface DateInputProps extends GenericComponentProps {
415
380
  dateFormatError?: string;
416
381
  locale?: 'eu' | 'us' | 'ja';
417
382
  RTL?: boolean;
418
- size?: ComponentSizeSmallMediumLarge;
383
+ size?: SizingSmMdLg;
419
384
  disabled?: boolean;
420
385
  setTouched?: (touched: boolean) => void;
421
- dayProps?: Omit<NumberInputProps, 'value' | 'onChange'>;
422
- monthProps?: Omit<SelectProps, 'onChange'>;
423
- yearProps?: Omit<NumberInputProps, 'value' | 'onChange'>;
424
386
  }
425
- declare const DateInput: React__default.FC<DateInputProps>;
387
+ declare const DateInput: React$1.FC<DateInputProps>;
426
388
 
427
389
  interface CommonDatePickerProps extends GenericComponentProps, Pick<DayPickerProps, 'className' | 'selectedDays' | 'modifiers' | 'onDayClick' | 'locale' | 'months' | 'weekdaysLong' | 'weekdaysShort'> {
428
390
  dayPickerProps?: DayPickerProps;
@@ -433,7 +395,7 @@ interface DatePickerProps extends CommonDatePickerProps, GenericComponentProps {
433
395
  value: Date | null;
434
396
  onChange: (date: Date | null) => void;
435
397
  }
436
- declare const DatePicker: React__default.FC<DatePickerProps>;
398
+ declare const DatePicker: React$1.FC<DatePickerProps>;
437
399
 
438
400
  interface DateRangeValue {
439
401
  from: Date | null;
@@ -443,30 +405,25 @@ interface DateRangePickerProps extends CommonDatePickerProps, GenericComponentPr
443
405
  value: DateRangeValue;
444
406
  onChange: (dates: DateRangeValue) => void;
445
407
  }
446
- declare const DateRangePicker: React__default.FC<DateRangePickerProps>;
408
+ declare const DateRangePicker: React$1.FC<DateRangePickerProps>;
447
409
 
448
410
  interface DropdownProps extends Partial<Omit<Props, 'content' | 'render'>>, GenericComponentProps {
449
411
  children: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
450
- content: (hide?: () => void) => React__default.ReactNode;
412
+ content: (hide?: () => void) => React$1.ReactNode;
451
413
  }
452
- declare const Dropdown: React__default.FC<DropdownProps>;
414
+ declare const Dropdown: React$1.FC<DropdownProps>;
453
415
 
454
416
  interface FileWithPreview extends File {
455
417
  preview: string;
456
418
  }
457
- interface FilePreviewCommonProps {
458
- setFiles: (files: FileWithPreview[]) => void;
459
- onPassword?(filename: string, password: string): void;
460
- passwordPromptText?: string;
461
- passwordIncorrectText?: string;
462
- }
463
- interface FileUploadProps extends GenericComponentProps, FilePreviewCommonProps {
419
+ interface FileUploadProps extends GenericComponentProps {
464
420
  files: FileWithPreview[];
421
+ setFiles: (files: FileWithPreview[]) => void;
465
422
  label?: string;
466
423
  labelTouchDevice?: string;
467
424
  dragInstructions?: string;
468
425
  onFileDrop?: (newFiles: File[]) => void;
469
- acceptedFilePattern?: Array<string>;
426
+ acceptedFilePattern?: Accept;
470
427
  uploadButtonText?: string;
471
428
  uploadButtonTextTouchDevice?: string;
472
429
  onFileRemove?: (file: File) => void;
@@ -478,71 +435,68 @@ interface FileUploadProps extends GenericComponentProps, FilePreviewCommonProps
478
435
  fileValidation?: (file: File) => Promise<string | null>;
479
436
  withIcon?: boolean;
480
437
  }
481
- declare const FileUpload: React__default.FC<FileUploadProps>;
438
+ declare const FileUpload: React$1.FC<FileUploadProps>;
482
439
 
483
- declare const Flex: React__default.FC<BoxProps>;
440
+ declare const Flex: React$1.FC<BoxProps>;
484
441
 
485
- declare const Grid: React__default.FC<BoxProps>;
442
+ declare const Grid: React$1.FC<BoxProps>;
486
443
 
487
- declare type HeadingSizes = 'h1' | 'h2' | 'h3' | 'h4';
444
+ declare type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4';
488
445
  interface HeadingProps extends CommonTextProps<HTMLHeadingElement>, PaddingProps, MarginProps {
489
- element?: HeadingSizes;
490
- size?: string | number;
446
+ element?: HeadingElement;
447
+ size?: Sizing | CSSValue;
491
448
  }
492
- declare const Heading: React__default.FC<HeadingProps>;
449
+ declare const Heading: React$1.FC<HeadingProps>;
493
450
 
494
451
  interface HorizontalDividerProps extends MarginProps, GenericComponentProps {
495
452
  colorTheme?: ColorTheme;
496
453
  height?: number;
497
454
  }
498
- declare const HorizontalDivider: React__default.FC<HorizontalDividerProps>;
455
+ declare const HorizontalDivider: React$1.FC<HorizontalDividerProps>;
499
456
 
500
457
  interface IconProps extends MarginProps, GenericComponentProps {
501
458
  icon: PhoenixIcons;
502
- size?: Spacing | string | number;
459
+ size?: Spacing | CSSValue;
503
460
  colorTheme?: ColorTheme;
504
461
  light?: boolean;
505
462
  }
506
- declare const Icon: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<IconProps> & React__default.RefAttributes<HTMLSpanElement>>;
463
+ declare const Icon: React$1.ForwardRefExoticComponent<React$1.PropsWithoutRef<IconProps> & React$1.RefAttributes<HTMLSpanElement>>;
507
464
 
508
- declare type LabelProps = React__default.LabelHTMLAttributes<HTMLLabelElement> & GenericComponentProps & PaddingProps & MarginProps;
509
- declare const Label: React__default.FC<LabelProps>;
465
+ declare type LabelProps = React$1.LabelHTMLAttributes<HTMLLabelElement> & GenericComponentProps & PaddingProps & MarginProps;
466
+ declare const Label: React$1.FC<LabelProps>;
510
467
 
511
- interface LinkProps extends React__default.AnchorHTMLAttributes<HTMLAnchorElement>, GenericComponentProps, MarginProps, PaddingProps {
468
+ interface LinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement>, GenericComponentProps, MarginProps, PaddingProps {
512
469
  icon?: IconType;
513
470
  iconAlignment?: IconAlignment;
514
- colorTheme?: ColorTheme;
515
- color?: TextColor;
471
+ color?: Color;
516
472
  bold?: boolean;
517
473
  noUnderline?: boolean;
518
474
  }
519
- declare const Link: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<LinkProps> & React__default.RefAttributes<HTMLAnchorElement>>;
475
+ declare const Link: React$1.ForwardRefExoticComponent<React$1.PropsWithoutRef<LinkProps> & React$1.RefAttributes<HTMLAnchorElement>>;
520
476
 
521
- interface LinkButtonProps extends React__default.AnchorHTMLAttributes<HTMLAnchorElement>, CommonButtonProps, GenericComponentProps {
477
+ interface LinkButtonProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement>, CommonButtonProps, GenericComponentProps {
478
+ light?: boolean;
522
479
  }
523
- declare const LinkButton: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<LinkButtonProps> & React__default.RefAttributes<HTMLAnchorElement>>;
480
+ declare const LinkButton: React$1.ForwardRefExoticComponent<React$1.PropsWithoutRef<LinkButtonProps> & React$1.RefAttributes<HTMLAnchorElement>>;
524
481
 
525
482
  interface ListCommonProps {
526
- size?: ComponentSizeSmallMediumLarge | string | number;
527
- color?: TextColor;
483
+ size?: Sizing | CSSValue;
484
+ color?: Color;
528
485
  icon?: IconType | PhoenixIconsColored | null;
529
- colorTheme?: ColorTheme;
530
- bulletColor?: TextColor;
486
+ bulletColor?: Color;
531
487
  }
532
488
 
533
489
  interface ListProps extends ListCommonProps, Omit<HTMLAttributes<HTMLUListElement>, 'color'>, PaddingProps, MarginProps, GenericComponentProps {
534
490
  }
535
- declare const List: React__default.FC<ListProps>;
491
+ declare const List: React$1.FC<ListProps>;
536
492
 
537
493
  interface ListItemProps extends ListCommonProps, Omit<HTMLAttributes<HTMLLIElement>, 'size' | 'color'>, MarginProps, GenericComponentProps {
538
494
  }
539
- declare const ListItem: React__default.FC<ListItemProps>;
495
+ declare const ListItem: React$1.FC<ListItemProps>;
540
496
 
541
497
  interface MenuProps extends MarginProps, PaddingProps, GenericComponentProps {
542
498
  }
543
- declare const Menu: React__default.FC<MenuProps>;
544
-
545
- declare const MenuDivider: React__default.FC;
499
+ declare const Menu: React$1.FC<PropsWithChildren<MenuProps>>;
546
500
 
547
501
  interface MenuItemProps extends MarginProps, PaddingProps, GenericComponentProps {
548
502
  target?: string;
@@ -552,26 +506,19 @@ interface MenuItemProps extends MarginProps, PaddingProps, GenericComponentProps
552
506
  colorTheme?: ColorTheme;
553
507
  disabled?: boolean;
554
508
  }
555
- declare const MenuItem: React__default.FC<MenuItemProps>;
509
+ declare const MenuItem: React$1.FC<PropsWithChildren<MenuItemProps>>;
556
510
 
557
511
  interface ModalProps extends GenericComponentProps, PaddingProps, MarginProps {
558
512
  open: boolean;
559
513
  onClose?: () => void;
560
514
  showCloseButton?: boolean;
561
- size?: ComponentSize;
515
+ size?: Sizing;
562
516
  animate?: boolean;
563
517
  center?: boolean;
564
518
  closeOnOverlayClick?: boolean;
565
519
  container?: Element;
566
520
  }
567
- declare const Modal: React__default.FC<ModalProps>;
568
-
569
- interface MultiSelectProps extends CommonSelectProps, GenericComponentProps {
570
- onChange: (option: SelectOption[]) => void;
571
- value: SelectOption[];
572
- maxVisibleSelectedItems?: number;
573
- }
574
- declare const MultiSelect: React__default.FC<MultiSelectProps>;
521
+ declare const Modal: React$1.FC<PropsWithChildren<ModalProps>>;
575
522
 
576
523
  declare type SubRange = number | [number] | [number, number];
577
524
  interface CommonSliderProps extends GenericComponentProps {
@@ -590,7 +537,7 @@ interface MultiSliderProps extends CommonSliderProps {
590
537
  onChange(value: MultiSliderValue): void;
591
538
  onRelease?(value: MultiSliderValue): void;
592
539
  }
593
- declare const MultiSlider: React__default.FC<MultiSliderProps>;
540
+ declare const MultiSlider: React$1.FC<MultiSliderProps>;
594
541
 
595
542
  interface NoticeProps extends GenericComponentProps, MarginProps, PaddingProps {
596
543
  colorTheme?: ColorTheme;
@@ -600,29 +547,72 @@ interface NoticeProps extends GenericComponentProps, MarginProps, PaddingProps {
600
547
  buttonIconAlignment?: IconAlignment;
601
548
  buttonTestId?: string;
602
549
  closeTestId?: string;
603
- onClick?: (event: React__default.MouseEvent) => void;
604
- onClose?: (event: React__default.MouseEvent) => void;
550
+ onClick?: (event: React$1.MouseEvent) => void;
551
+ onClose?: (event: React$1.MouseEvent) => void;
605
552
  breakpoint?: number;
606
553
  }
607
- declare const Notice: React__default.FC<NoticeProps>;
554
+ declare const Notice: React$1.FC<PropsWithChildren<NoticeProps>>;
555
+
556
+ interface FormControlProps extends GenericComponentProps {
557
+ label?: string;
558
+ success?: boolean;
559
+ warning?: FormControlWarningType;
560
+ error?: FormControlErrorType;
561
+ contentRight?: string | React$1.ReactNode;
562
+ helperText?: string;
563
+ RTL?: boolean;
564
+ size?: Sizing;
565
+ disabled?: boolean;
566
+ focused?: boolean;
567
+ minimal?: boolean;
568
+ }
569
+
570
+ interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'onChange'>, FormControlProps {
571
+ value: number | null;
572
+ onChange: (value: number | null) => void;
573
+ numberFormatErrorMessage?: string;
574
+ maxDecimalCount?: number;
575
+ }
576
+ declare const NumberInput: React$1.FC<NumberInputProps>;
608
577
 
609
578
  interface ParagraphProps extends CommonTextProps<HTMLParagraphElement>, PaddingProps, MarginProps {
610
- size?: ComponentSizeSmallMediumLarge | string | number;
579
+ size?: Sizing | CSSValue;
611
580
  }
612
- declare const Paragraph: React__default.FC<ParagraphProps>;
581
+ declare const Paragraph: React$1.FC<ParagraphProps>;
613
582
 
614
583
  declare type RadioProps = CheckboxRadioCommonProps;
615
- declare const Radio: React__default.VoidFunctionComponent<RadioProps>;
584
+ declare const Radio: React$1.VoidFunctionComponent<RadioProps>;
616
585
 
617
- interface SelectNativeProps extends FormControlProps {
618
- onChange: (option: SelectOption | null) => void;
619
- value?: SelectOption | null;
586
+ interface CommonSelectProps<Option extends SelectOption = SelectOption, IsMulti extends boolean = false> extends FormControlProps {
620
587
  name?: string;
621
- options?: SelectOption[];
588
+ options?: Option[];
589
+ onFocus?: FocusEventHandler<HTMLInputElement | HTMLSelectElement>;
590
+ onBlur?: FocusEventHandler<HTMLInputElement | HTMLSelectElement>;
591
+ reactSelectProps?: Omit<Props$1<Option, IsMulti>, 'theme'>;
592
+ preventSearch?: boolean;
593
+ }
594
+ interface SelectOption {
595
+ label: string;
596
+ value: string | number;
597
+ isDisabled?: boolean;
598
+ }
599
+
600
+ interface SelectProps<Option extends SelectOption = SelectOption> extends CommonSelectProps<Option, false> {
601
+ onChange: (option: Option | null) => void;
602
+ value?: Option | null;
603
+ useNativeSelectOnMobile?: boolean;
604
+ }
605
+ declare const Select: <Option extends SelectOption = SelectOption>({ testId, useNativeSelectOnMobile, ...props }: SelectProps<Option>) => React$1.ReactElement;
606
+
607
+ interface SelectNativeProps<Option extends SelectOption = SelectOption> extends FormControlProps {
608
+ onChange: (option: Option | null) => void;
609
+ value?: Option | null;
610
+ name?: string;
611
+ options?: Option[];
622
612
  onFocus?: FocusEventHandler<HTMLSelectElement>;
623
613
  onBlur?: FocusEventHandler<HTMLSelectElement>;
624
614
  }
625
- declare const SelectNative: React__default.FC<SelectNativeProps>;
615
+ declare const SelectNative: <Option extends SelectOption = SelectOption>({ testId, size, options, ...props }: SelectNativeProps<Option>) => React$1.ReactElement;
626
616
 
627
617
  interface SelectPickerProps extends GenericComponentProps {
628
618
  value: string | string[];
@@ -632,10 +622,10 @@ interface SelectPickerProps extends GenericComponentProps {
632
622
  multiSelect?: boolean;
633
623
  error?: string | boolean;
634
624
  warning?: string;
635
- onMouseOver?: (event: React__default.MouseEvent) => void;
636
- onMouseLeave?: (event: React__default.MouseEvent) => void;
625
+ onMouseOver?: (event: React$1.MouseEvent) => void;
626
+ onMouseLeave?: (event: React$1.MouseEvent) => void;
637
627
  colorTheme?: ColorTheme;
638
- size?: ComponentSizeMediumLarge;
628
+ size?: SizingMdLg;
639
629
  imageSize?: string;
640
630
  }
641
631
  interface SelectPickerOption {
@@ -645,7 +635,7 @@ interface SelectPickerOption {
645
635
  image?: string;
646
636
  isDisabled?: boolean;
647
637
  }
648
- declare const SelectPicker: React__default.FC<SelectPickerProps>;
638
+ declare const SelectPicker: React$1.FC<SelectPickerProps>;
649
639
 
650
640
  declare type SliderValue = number | string;
651
641
  interface SliderProps extends CommonSliderProps, GenericComponentProps {
@@ -653,76 +643,74 @@ interface SliderProps extends CommonSliderProps, GenericComponentProps {
653
643
  onChange(value: SliderValue): void;
654
644
  onRelease?(value: SliderValue): void;
655
645
  }
656
- declare const Slider: React__default.FC<SliderProps>;
646
+ declare const Slider: React$1.FC<SliderProps>;
657
647
 
658
648
  interface SpacerProps extends HTMLAttributes<HTMLDivElement>, PaddingProps, MarginProps {
659
- w?: Spacing | string | number;
660
- h?: Spacing | string | number;
649
+ w?: Spacing | CSSValue;
650
+ h?: Spacing | CSSValue;
661
651
  className?: string;
662
652
  }
663
- declare const Spacer: React__default.FC<SpacerProps>;
653
+ declare const Spacer: React$1.FC<SpacerProps>;
664
654
 
665
655
  interface SpinnerProps extends MarginProps, GenericComponentProps {
666
- size?: ComponentSize | string | number;
656
+ size?: Sizing | CSSValue;
667
657
  colorTheme?: ColorTheme;
668
658
  light?: boolean;
669
659
  }
670
- declare const Spinner: React__default.FC<SpinnerProps>;
660
+ declare const Spinner: React$1.FC<SpinnerProps>;
671
661
 
672
- interface TabListCommonProps {
662
+ interface TabProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, 'tabIndex'>, GenericComponentProps {
673
663
  animate?: boolean;
674
- size?: ComponentSizeSmallMediumLarge;
675
- }
676
- interface TabCommonProps extends TabListCommonProps {
677
664
  selected?: boolean;
678
665
  disabled?: boolean;
679
- }
680
-
681
- interface TabProps extends Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'tabIndex'>, GenericComponentProps, TabCommonProps {
682
666
  disabledClassName?: string;
683
667
  selectedClassName?: string;
684
668
  tabIndex?: string;
685
669
  id?: string;
686
670
  }
687
- declare type TabFunctionProps = React__default.ForwardRefExoticComponent<TabProps> & {
671
+ declare type TabFunctionProps = React$1.ForwardRefExoticComponent<TabProps> & {
688
672
  tabsRole?: 'Tab';
689
- } & React__default.RefAttributes<HTMLAnchorElement>;
673
+ } & React$1.RefAttributes<HTMLAnchorElement>;
690
674
  declare const Tab: TabFunctionProps;
691
675
 
692
- declare type TabListProps = GenericComponentProps & TabListCommonProps;
693
- declare const TabList: React__default.FC<TabListProps> & {
676
+ interface TabListProps extends GenericComponentProps {
677
+ animate?: boolean;
678
+ }
679
+ declare const TabList: React$1.FC<PropsWithChildren<TabListProps>> & {
694
680
  tabsRole: 'TabList';
695
681
  };
696
682
 
697
683
  interface TagProps extends GenericComponentProps, MarginProps {
698
684
  colorTheme?: ColorTheme;
699
- size?: ComponentSizeSmallMedium;
685
+ size?: SizingSmMd;
686
+ secondary?: boolean;
687
+ outline?: boolean;
700
688
  }
701
- declare const Tag: React__default.FC<TagProps>;
689
+ declare const Tag: React$1.FC<TagProps>;
702
690
 
703
691
  interface TextProps extends CommonTextProps<HTMLDivElement>, PaddingProps, MarginProps {
704
- size?: ComponentSizeSmallMediumLarge | string | number;
692
+ size?: Sizing | CSSValue;
705
693
  ellipsize?: boolean;
706
694
  element?: 'div' | 'span';
707
695
  title?: string;
708
696
  }
709
- declare const Text: React__default.FC<TextProps>;
697
+ declare const Text: React$1.FC<TextProps>;
710
698
 
711
699
  interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FormControlProps {
712
700
  }
713
- declare const TextArea: React__default.FC<TextAreaProps>;
701
+ declare const TextArea: React$1.FC<TextAreaProps>;
714
702
 
715
703
  interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, FormControlProps {
716
704
  }
717
- declare const TextInput: React__default.FC<TextInputProps>;
705
+ declare const TextInput: React$1.FC<TextInputProps>;
718
706
 
719
707
  declare type TimezonePickerProps = Omit<SelectProps, 'options'> & GenericComponentProps;
720
- declare const TimezonePicker: React__default.FC<TimezonePickerProps>;
708
+ declare const TimezonePicker: React$1.FC<TimezonePickerProps>;
721
709
 
722
710
  declare const getOptions: () => SelectOption[];
723
711
 
724
712
  declare type TooltipProps = Omit<TippyProps, 'theme'> & GenericComponentProps;
725
- declare const Tooltip: React__default.FC<TooltipProps>;
713
+ declare const Tooltip: React$1.FC<TooltipProps>;
726
714
 
727
715
  declare const prefixedTheme: {
728
716
  $pc: {
@@ -961,13 +949,6 @@ declare const prefixedTheme: {
961
949
  large: number;
962
950
  };
963
951
  };
964
- tabs: {
965
- size: {
966
- small: number;
967
- medium: number;
968
- large: number;
969
- };
970
- };
971
952
  tag: {
972
953
  padding: {
973
954
  small: string;
@@ -986,8 +967,562 @@ declare const prefixedTheme: {
986
967
  boxShadow: string;
987
968
  };
988
969
  };
970
+ tokens: {
971
+ ref: {
972
+ color: {
973
+ purple: {
974
+ "2": string;
975
+ "5": string;
976
+ "10": string;
977
+ "15": string;
978
+ "20": string;
979
+ "50": string;
980
+ "60": string;
981
+ };
982
+ gray: {
983
+ "0": string;
984
+ "15": string;
985
+ "20": string;
986
+ "25": string;
987
+ "30": string;
988
+ "35": string;
989
+ "40": string;
990
+ "45": string;
991
+ "50": string;
992
+ "60": string;
993
+ "80": string;
994
+ "85": string;
995
+ "90": string;
996
+ "100": string;
997
+ };
998
+ green: {
999
+ "2": string;
1000
+ "5": string;
1001
+ "10": string;
1002
+ "15": string;
1003
+ "20": string;
1004
+ "50": string;
1005
+ "60": string;
1006
+ };
1007
+ blue: {
1008
+ "2": string;
1009
+ "5": string;
1010
+ "15": string;
1011
+ "30": string;
1012
+ };
1013
+ red: {
1014
+ "1": string;
1015
+ "5": string;
1016
+ "10": string;
1017
+ "15": string;
1018
+ "20": string;
1019
+ "30": string;
1020
+ "40": string;
1021
+ };
1022
+ orange: {
1023
+ "2": string;
1024
+ "20": string;
1025
+ "35": string;
1026
+ };
1027
+ };
1028
+ fontWeight: {
1029
+ regular: string;
1030
+ bold: string;
1031
+ };
1032
+ spacing: {
1033
+ "3xs": string;
1034
+ "2xs": string;
1035
+ xs: string;
1036
+ sm: string;
1037
+ md: string;
1038
+ lg: string;
1039
+ xl: string;
1040
+ "2xl": string;
1041
+ "3xl": string;
1042
+ };
1043
+ fontFamily: {
1044
+ base: string;
1045
+ };
1046
+ fontSize: {
1047
+ xs: string;
1048
+ sm: string;
1049
+ md: string;
1050
+ lg: string;
1051
+ xl: string;
1052
+ "2xl": string;
1053
+ "3xl": string;
1054
+ "4xl": string;
1055
+ };
1056
+ borderRadius: {
1057
+ pill: string;
1058
+ circle: string;
1059
+ sm: string;
1060
+ md: string;
1061
+ lg: string;
1062
+ };
1063
+ lineHeight: {
1064
+ none: string;
1065
+ tight: string;
1066
+ normal: string;
1067
+ };
1068
+ boxShadow: {
1069
+ sm: string;
1070
+ md: string;
1071
+ lg: string;
1072
+ };
1073
+ transition: {
1074
+ duration: {
1075
+ base: string;
1076
+ };
1077
+ };
1078
+ };
1079
+ button: {
1080
+ fontWeight: string;
1081
+ spacing: {
1082
+ x: {
1083
+ xs: string;
1084
+ sm: string;
1085
+ md: string;
1086
+ lg: string;
1087
+ };
1088
+ };
1089
+ boxShadow: {
1090
+ primary: string;
1091
+ };
1092
+ sizing: {
1093
+ icon: {
1094
+ xs: string;
1095
+ sm: string;
1096
+ md: string;
1097
+ lg: string;
1098
+ };
1099
+ };
1100
+ fontSize: {
1101
+ xs: string;
1102
+ sm: string;
1103
+ md: string;
1104
+ lg: string;
1105
+ };
1106
+ borderWidth: string;
1107
+ };
1108
+ text: {
1109
+ regular: {
1110
+ lg: {
1111
+ fontFamily: string;
1112
+ fontWeight: string;
1113
+ lineHeight: string;
1114
+ fontSize: string;
1115
+ };
1116
+ md: {
1117
+ fontFamily: string;
1118
+ fontWeight: string;
1119
+ lineHeight: string;
1120
+ fontSize: string;
1121
+ };
1122
+ sm: {
1123
+ fontFamily: string;
1124
+ fontWeight: string;
1125
+ lineHeight: string;
1126
+ fontSize: string;
1127
+ };
1128
+ xs: {
1129
+ fontFamily: string;
1130
+ fontWeight: string;
1131
+ lineHeight: string;
1132
+ fontSize: string;
1133
+ };
1134
+ };
1135
+ bold: {
1136
+ lg: {
1137
+ fontFamily: string;
1138
+ fontWeight: string;
1139
+ lineHeight: string;
1140
+ fontSize: string;
1141
+ };
1142
+ md: {
1143
+ fontFamily: string;
1144
+ fontWeight: string;
1145
+ lineHeight: string;
1146
+ fontSize: string;
1147
+ };
1148
+ sm: {
1149
+ fontFamily: string;
1150
+ fontWeight: string;
1151
+ lineHeight: string;
1152
+ fontSize: string;
1153
+ };
1154
+ xs: {
1155
+ fontFamily: string;
1156
+ fontWeight: string;
1157
+ lineHeight: string;
1158
+ fontSize: string;
1159
+ };
1160
+ };
1161
+ lineHeight: string;
1162
+ fontSize: {
1163
+ xs: string;
1164
+ sm: string;
1165
+ md: string;
1166
+ lg: string;
1167
+ };
1168
+ };
1169
+ heading: {
1170
+ regular: {
1171
+ lg: {
1172
+ fontFamily: string;
1173
+ fontWeight: string;
1174
+ lineHeight: string;
1175
+ fontSize: string;
1176
+ };
1177
+ md: {
1178
+ fontFamily: string;
1179
+ fontWeight: string;
1180
+ lineHeight: string;
1181
+ fontSize: string;
1182
+ };
1183
+ sm: {
1184
+ fontFamily: string;
1185
+ fontWeight: string;
1186
+ lineHeight: string;
1187
+ fontSize: string;
1188
+ };
1189
+ xs: {
1190
+ fontFamily: string;
1191
+ fontWeight: string;
1192
+ lineHeight: string;
1193
+ fontSize: string;
1194
+ };
1195
+ };
1196
+ bold: {
1197
+ lg: {
1198
+ fontFamily: string;
1199
+ fontWeight: string;
1200
+ lineHeight: string;
1201
+ fontSize: string;
1202
+ };
1203
+ md: {
1204
+ fontFamily: string;
1205
+ fontWeight: string;
1206
+ lineHeight: string;
1207
+ fontSize: string;
1208
+ };
1209
+ sm: {
1210
+ fontFamily: string;
1211
+ fontWeight: string;
1212
+ lineHeight: string;
1213
+ fontSize: string;
1214
+ };
1215
+ xs: {
1216
+ fontFamily: string;
1217
+ fontWeight: string;
1218
+ lineHeight: string;
1219
+ fontSize: string;
1220
+ };
1221
+ };
1222
+ lineHeight: string;
1223
+ fontSize: {
1224
+ xs: string;
1225
+ sm: string;
1226
+ md: string;
1227
+ lg: string;
1228
+ };
1229
+ };
1230
+ paragraph: {
1231
+ lineHeight: string;
1232
+ regular: {
1233
+ lg: {
1234
+ fontFamily: string;
1235
+ fontWeight: string;
1236
+ lineHeight: string;
1237
+ fontSize: string;
1238
+ };
1239
+ md: {
1240
+ fontFamily: string;
1241
+ fontWeight: string;
1242
+ lineHeight: string;
1243
+ fontSize: string;
1244
+ };
1245
+ sm: {
1246
+ fontFamily: string;
1247
+ fontWeight: string;
1248
+ lineHeight: string;
1249
+ fontSize: string;
1250
+ };
1251
+ xs: {
1252
+ fontFamily: string;
1253
+ fontWeight: string;
1254
+ lineHeight: string;
1255
+ fontSize: string;
1256
+ };
1257
+ };
1258
+ bold: {
1259
+ lg: {
1260
+ fontFamily: string;
1261
+ fontWeight: string;
1262
+ lineHeight: string;
1263
+ fontSize: string;
1264
+ };
1265
+ md: {
1266
+ fontFamily: string;
1267
+ fontWeight: string;
1268
+ lineHeight: string;
1269
+ fontSize: string;
1270
+ };
1271
+ sm: {
1272
+ fontFamily: string;
1273
+ fontWeight: string;
1274
+ lineHeight: string;
1275
+ fontSize: string;
1276
+ };
1277
+ xs: {
1278
+ fontFamily: string;
1279
+ fontWeight: string;
1280
+ lineHeight: string;
1281
+ fontSize: string;
1282
+ };
1283
+ };
1284
+ fontSize: {
1285
+ xs: string;
1286
+ sm: string;
1287
+ md: string;
1288
+ lg: string;
1289
+ };
1290
+ };
1291
+ inputButton: {
1292
+ sizing: {
1293
+ height: {
1294
+ xs: string;
1295
+ sm: string;
1296
+ md: string;
1297
+ lg: string;
1298
+ };
1299
+ };
1300
+ };
1301
+ tag: {
1302
+ sizing: {
1303
+ height: {
1304
+ sm: string;
1305
+ md: string;
1306
+ };
1307
+ };
1308
+ spacing: {
1309
+ x: {
1310
+ sm: string;
1311
+ md: string;
1312
+ };
1313
+ };
1314
+ fontSize: {
1315
+ sm: string;
1316
+ md: string;
1317
+ };
1318
+ fontWeight: string;
1319
+ borderWidth: string;
1320
+ };
1321
+ card: {
1322
+ color: {
1323
+ background: string;
1324
+ border: {
1325
+ default: {
1326
+ base: string;
1327
+ interaction: string;
1328
+ };
1329
+ elevated: {
1330
+ base: string;
1331
+ interaction: string;
1332
+ };
1333
+ };
1334
+ };
1335
+ boxShadow: string;
1336
+ };
1337
+ tooltip: {
1338
+ boxShadow: string;
1339
+ color: {
1340
+ background: string;
1341
+ };
1342
+ };
1343
+ color: {
1344
+ text: {
1345
+ primary: string;
1346
+ secondary: string;
1347
+ tertiary: string;
1348
+ quaternary: string;
1349
+ inverse: string;
1350
+ brand: {
1351
+ primary: string;
1352
+ disabled: string;
1353
+ };
1354
+ success: {
1355
+ primary: string;
1356
+ disabled: string;
1357
+ };
1358
+ error: {
1359
+ primary: string;
1360
+ disabled: string;
1361
+ };
1362
+ warning: {
1363
+ primary: string;
1364
+ disabled: string;
1365
+ };
1366
+ info: {
1367
+ primary: string;
1368
+ disabled: string;
1369
+ };
1370
+ neutral: {
1371
+ primary: string;
1372
+ disabled: string;
1373
+ };
1374
+ };
1375
+ background: {
1376
+ primary: string;
1377
+ secondary: string;
1378
+ tertiary: string;
1379
+ brand: {
1380
+ primary: string;
1381
+ primaryInteraction: string;
1382
+ primaryDisabled: string;
1383
+ secondary: string;
1384
+ secondaryInteraction: string;
1385
+ secondaryDisabled: string;
1386
+ };
1387
+ success: {
1388
+ primary: string;
1389
+ primaryInteraction: string;
1390
+ primaryDisabled: string;
1391
+ secondary: string;
1392
+ secondaryInteraction: string;
1393
+ secondaryDisabled: string;
1394
+ };
1395
+ error: {
1396
+ primary: string;
1397
+ primaryInteraction: string;
1398
+ primaryDisabled: string;
1399
+ secondary: string;
1400
+ secondaryInteraction: string;
1401
+ secondaryDisabled: string;
1402
+ };
1403
+ warning: {
1404
+ primary: string;
1405
+ primaryInteraction: string;
1406
+ primaryDisabled: string;
1407
+ secondary: string;
1408
+ secondaryInteraction: string;
1409
+ secondaryDisabled: string;
1410
+ };
1411
+ info: {
1412
+ primary: string;
1413
+ primaryInteraction: string;
1414
+ primaryDisabled: string;
1415
+ secondary: string;
1416
+ secondaryInteraction: string;
1417
+ secondaryDisabled: string;
1418
+ };
1419
+ neutral: {
1420
+ primary: string;
1421
+ primaryInteraction: string;
1422
+ primaryDisabled: string;
1423
+ secondary: string;
1424
+ secondaryInteraction: string;
1425
+ secondaryDisabled: string;
1426
+ };
1427
+ };
1428
+ border: {
1429
+ focus: string;
1430
+ primary: string;
1431
+ secondary: string;
1432
+ interaction: string;
1433
+ brand: {
1434
+ primary: string;
1435
+ };
1436
+ success: {
1437
+ primary: string;
1438
+ };
1439
+ error: {
1440
+ primary: string;
1441
+ };
1442
+ warning: {
1443
+ primary: string;
1444
+ };
1445
+ info: {
1446
+ primary: string;
1447
+ };
1448
+ neutral: {
1449
+ primary: string;
1450
+ };
1451
+ };
1452
+ };
1453
+ dropdown: {
1454
+ boxShadow: string;
1455
+ };
1456
+ spinner: {
1457
+ sizing: {
1458
+ xs: string;
1459
+ sm: string;
1460
+ md: string;
1461
+ lg: string;
1462
+ };
1463
+ };
1464
+ checkboxRadio: {
1465
+ sizing: {
1466
+ md: string;
1467
+ };
1468
+ };
1469
+ fontSize: {
1470
+ base: string;
1471
+ };
1472
+ input: {
1473
+ spacing: {
1474
+ x: string;
1475
+ };
1476
+ borderWidth: string;
1477
+ };
1478
+ borderWidth: {
1479
+ focus: string;
1480
+ };
1481
+ multiSelect: {
1482
+ spacing: {
1483
+ multiValueLabel: {
1484
+ x: {
1485
+ xs: string;
1486
+ sm: string;
1487
+ md: string;
1488
+ lg: string;
1489
+ };
1490
+ y: {
1491
+ xs: string;
1492
+ sm: string;
1493
+ md: string;
1494
+ lg: string;
1495
+ };
1496
+ };
1497
+ };
1498
+ fontSize: {
1499
+ multiValueLabel: {
1500
+ xs: string;
1501
+ sm: string;
1502
+ md: string;
1503
+ lg: string;
1504
+ };
1505
+ };
1506
+ };
1507
+ modal: {
1508
+ sizing: {
1509
+ maxWidth: {
1510
+ xs: string;
1511
+ sm: string;
1512
+ md: string;
1513
+ lg: string;
1514
+ };
1515
+ };
1516
+ boxShadow: string;
1517
+ color: {
1518
+ background: {
1519
+ overlay: string;
1520
+ };
1521
+ };
1522
+ };
1523
+ };
989
1524
  };
990
1525
 
991
1526
  declare const GlobalStyles: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
992
1527
 
993
- export { Box, BoxProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, Checkbox, CheckboxProps, ClosableButton, ClosableButtonProps, ClosableItem, ClosableItemProps, Collapsible, CollapsibleCard, CollapsibleCardProps, CollapsibleProps, ColorTheme, ComponentSize, ComponentSizeMediumLarge, ComponentSizeSmallMedium, ComponentSizeSmallMediumLarge, DateInput, DateInputProps, DatePicker, DatePickerProps, DateRangePicker, DateRangePickerProps, DateRangeValue, DateValue, Dropdown, DropdownProps, FilePreviewCommonProps, FileUpload, FileUploadProps, FileWithPreview, Flex, GlobalStyles, Grid, Heading, HeadingProps, HeadingSizes, HorizontalDivider, HorizontalDividerProps, Icon, IconAlignment, IconProps, IconType, Label, LabelProps, Link, LinkButton, LinkButtonProps, LinkProps, List, ListItem, ListItemProps, ListProps, Menu, MenuDivider, MenuItem, MenuItemProps, MenuProps, Modal, ModalProps, MultiSelect, MultiSelectProps, MultiSlider, MultiSliderProps, MultiSliderValue, Notice, NoticeProps, NumberInput, NumberInputProps, Paragraph, ParagraphProps, PhoenixIcons, PhoenixIconsColored, PhoenixIconsColoredSrc, PhoenixIconsOutlined, PhoenixIconsOutlinedSrc, PhoenixIconsSrc, Radio, RadioProps, Select, SelectNative, SelectNativeProps, SelectOption, SelectPicker, SelectPickerOption, SelectPickerProps, SelectProps, Slider, SliderProps, SliderValue, Spacer, SpacerProps, Spacing, Spinner, SpinnerProps, Tab, TabFunctionProps, TabList, TabListProps, TabProps, Tag, TagProps, Text, TextArea, TextAreaProps, TextColor, TextInput, TextInputProps, TextProps, prefixedTheme as Theme, TimezonePicker, TimezonePickerProps, Tooltip, TooltipProps, getOptions as getTimezoneOptions };
1528
+ export { Box, BoxProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, Checkbox, CheckboxProps, ClosableButton, ClosableButtonProps, ClosableItem, ClosableItemProps, Collapsible, CollapsibleCard, CollapsibleCardProps, CollapsibleProps, Color, ColorTheme, DateInput, DateInputProps, DatePicker, DatePickerProps, DateRangePicker, DateRangePickerProps, DateRangeValue, DateValue, Dropdown, DropdownProps, FileUpload, FileUploadProps, FileWithPreview, Flex, GlobalStyles, Grid, Heading, HeadingElement, HeadingProps, HorizontalDivider, HorizontalDividerProps, Icon, IconAlignment, IconProps, IconType, Label, LabelProps, Link, LinkButton, LinkButtonProps, LinkProps, List, ListItem, ListItemProps, ListProps, Menu, MenuItem, MenuItemProps, MenuProps, Modal, ModalProps, MultiSlider, MultiSliderProps, MultiSliderValue, Notice, NoticeProps, NumberInput, NumberInputProps, Paragraph, ParagraphProps, PhoenixIcons, PhoenixIconsColored, PhoenixIconsColoredSrc, PhoenixIconsOutlined, PhoenixIconsOutlinedSrc, PhoenixIconsSrc, Radio, RadioProps, Select, SelectNative, SelectNativeProps, SelectOption, SelectPicker, SelectPickerOption, SelectPickerProps, SelectProps, Sizing, SizingMdLg, SizingSmMd, SizingSmMdLg, Slider, SliderProps, SliderValue, Spacer, SpacerProps, Spacing, Spinner, SpinnerProps, Tab, TabFunctionProps, TabList, TabListProps, TabProps, Tag, TagProps, Text, TextArea, TextAreaProps, TextColor, TextInput, TextInputProps, TextProps, prefixedTheme as Theme, TimezonePicker, TimezonePickerProps, Tooltip, TooltipProps, getSpacingCssValue, getOptions as getTimezoneOptions, isColorTheme, isSizing, isSpacing, isTextColor };