@hyphen/hyphen-components 8.0.1 → 9.0.0-beta.1

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 (66) hide show
  1. package/dist/css/utilities.css +1 -1
  2. package/dist/css/utilities.css.map +1 -1
  3. package/dist/hyphen-components.cjs.development.js +353 -313
  4. package/dist/hyphen-components.cjs.development.js.map +1 -1
  5. package/dist/hyphen-components.cjs.production.min.js +2 -2
  6. package/dist/hyphen-components.cjs.production.min.js.map +1 -1
  7. package/dist/hyphen-components.esm.js +357 -314
  8. package/dist/hyphen-components.esm.js.map +1 -1
  9. package/dist/index.d.ts +222 -212
  10. package/package.json +6 -5
  11. package/src/components/Alert/Alert.tsx +5 -6
  12. package/src/components/Badge/Badge.test.tsx +12 -0
  13. package/src/components/Badge/Badge.tsx +52 -20
  14. package/src/components/Box/Box.mdx +1 -1
  15. package/src/components/Box/Box.stories.tsx +1 -1
  16. package/src/components/Box/Box.test.tsx +24 -1
  17. package/src/components/Box/Box.tsx +108 -82
  18. package/src/components/Card/Card.tsx +5 -1
  19. package/src/components/Card/components/CardFooter/CardFooter.tsx +0 -4
  20. package/src/components/Card/components/CardHeader/CardHeader.tsx +4 -1
  21. package/src/components/Card/components/CardSection/CardSection.tsx +4 -5
  22. package/src/components/CheckboxInput/CheckboxInput.test.tsx +17 -0
  23. package/src/components/CheckboxInput/CheckboxInput.tsx +15 -4
  24. package/src/components/CheckboxInput/components/Checkbox.test.tsx +36 -0
  25. package/src/components/CheckboxInput/components/Checkbox.tsx +8 -2
  26. package/src/components/Details/Details.test.tsx +8 -0
  27. package/src/components/Details/Details.tsx +5 -2
  28. package/src/components/Details/DetailsSummary.tsx +4 -1
  29. package/src/components/Drawer/Drawer.test.tsx +8 -0
  30. package/src/components/Drawer/Drawer.tsx +1 -1
  31. package/src/components/FormLabel/FormLabel.tsx +6 -3
  32. package/src/components/Formik/FormikCheckboxInput/FormikCheckboxInput.test.tsx +9 -0
  33. package/src/components/Formik/FormikCheckboxInput/FormikCheckboxInput.tsx +1 -0
  34. package/src/components/Formik/FormikSelectInput/FormikSelectInput.tsx +21 -11
  35. package/src/components/Formik/FormikSelectInputNative/FormikSelectInputNative.tsx +1 -1
  36. package/src/components/Formik/FormikTimePicker/FormikTimePicker.tsx +1 -1
  37. package/src/components/Heading/Heading.tsx +5 -6
  38. package/src/components/Icon/Icon.test.tsx +8 -0
  39. package/src/components/Icon/Icon.tsx +6 -7
  40. package/src/components/Modal/Modal.test.tsx +31 -1
  41. package/src/components/Modal/Modal.tsx +13 -7
  42. package/src/components/Popover/Popover.test.tsx +3 -4
  43. package/src/components/RadioGroup/RadioGroup.tsx +11 -6
  44. package/src/components/RadioGroup/RadioInput/RadioInputIcon.tsx +0 -4
  45. package/src/components/SelectInput/SelectInput.test.tsx +18 -0
  46. package/src/components/SelectInput/SelectInput.tsx +47 -27
  47. package/src/components/SelectInputInset/SelectInputInset.tsx +8 -9
  48. package/src/components/SelectInputNative/SelectInputNative.test.tsx +24 -0
  49. package/src/components/SelectInputNative/SelectInputNative.tsx +79 -14
  50. package/src/components/Switch/Switch.tsx +1 -1
  51. package/src/components/Table/Table.mdx +21 -1
  52. package/src/components/Table/Table.stories.tsx +5 -1
  53. package/src/components/Table/Table.tsx +7 -7
  54. package/src/components/Table/TableBody/TableBody.test.tsx +89 -1
  55. package/src/components/Table/TableBody/TableBody.tsx +23 -8
  56. package/src/components/Table/TableHead/TableHead.tsx +6 -6
  57. package/src/components/Table/TableHead/TableHeaderCell/TableHeaderCell.tsx +6 -6
  58. package/src/components/Table/common/TableRow/TableRow.test.tsx +17 -1
  59. package/src/components/Table/common/TableRow/TableRow.tsx +30 -10
  60. package/src/components/TextInput/TextInput.tsx +10 -8
  61. package/src/components/TextInputInset/TextInputInset.tsx +5 -6
  62. package/src/components/TextareaInput/TextareaInput.tsx +4 -5
  63. package/src/components/TextareaInputInset/TextareaInputInset.tsx +10 -17
  64. package/src/components/Toast/Toast.stories.tsx +5 -1
  65. package/src/lib/getColumnKeys.ts +5 -3
  66. package/src/types/index.ts +6 -7
package/dist/index.d.ts CHANGED
@@ -1,16 +1,18 @@
1
1
  import * as React from 'react';
2
- import React__default, { ReactNode, Key, MouseEvent, KeyboardEvent, CSSProperties, FC, ButtonHTMLAttributes, RefObject, ChangeEvent, FocusEvent, HTMLProps, ForwardRefExoticComponent, InputHTMLAttributes, useEffect, AnchorHTMLAttributes } from 'react';
3
- import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
4
- import { BorderRadiusSize as BorderRadiusSize$1, BreakpointSize, SpacingSize, WidthSize, HeightSize, BackgroundColor, BorderColor, BorderSize, FontColor, FontFamily, FontSize, FontWeight, BoxShadowSize, TextTransform, TextWrap, ZIndexSize, IconName, HeadingSize, ColorName, BaseColor, LineHeightSize } from '@hyphen/hyphen-design-tokens/build/types';
5
- export { BackgroundColor, BaseColor, BorderColor, BorderSize, BoxShadowSize, BreakpointSize, ColorName, FontColor, FontFamily, FontSize, FontWeight, HeadingSize, HeightSize, IconName, LineHeightSize, SpacingSize, TextDecorationLine, TextDecorationStyle, TextTransform, TextWrap, WhiteSpace, WidthSize, WordBreak, ZIndexSize } from '@hyphen/hyphen-design-tokens/build/types';
2
+ import React__default, { ReactNode, Key, MouseEvent, KeyboardEvent, ElementType, CSSProperties, ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ButtonHTMLAttributes, FC, RefObject, ChangeEvent, FocusEvent, ForwardRefExoticComponent, TextareaHTMLAttributes, InputHTMLAttributes, HTMLAttributes, useEffect, AnchorHTMLAttributes } from 'react';
6
3
  import * as CSS from 'csstype';
4
+ import { BreakpointSize, SpacingSize, WidthSize, HeightSize, BorderRadiusSize as BorderRadiusSize$1, BackgroundColor, BorderColor, BorderSize, FontColor, FontFamily, FontSize, FontWeight, BoxShadowSize, TextTransform, TextWrap, ZIndexSize, IconName, HeadingSize, ColorName, BaseColor, LineHeightSize } from '@hyphen/hyphen-design-tokens/build/types';
5
+ export { BackgroundColor, BaseColor, BorderColor, BorderSize, BoxShadowSize, BreakpointSize, ColorName, FontColor, FontFamily, FontSize, FontWeight, HeadingSize, HeightSize, IconName, LineHeightSize, SpacingSize, TextDecorationLine, TextDecorationStyle, TextTransform, TextWrap, WhiteSpace, WidthSize, WordBreak, ZIndexSize } from '@hyphen/hyphen-design-tokens/build/types';
6
+ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
7
7
  import { DayPickerProps } from '@daypicker/react';
8
8
  export { Matcher } from '@daypicker/react';
9
9
  import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
10
10
  import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
11
11
  import { FieldAttributes, FormikTouched, FormikValues, FormikErrors } from 'formik';
12
- import { OnChangeValue, OptionsOrGroups, GroupBase } from 'react-select';
12
+ import { OnChangeValue, GroupBase, OptionsOrGroups } from 'react-select';
13
+ import { AsyncCreatableProps } from 'react-select/async-creatable';
13
14
  import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
15
+ import ReactModal from 'react-modal';
14
16
  import * as PopoverPrimitive from '@radix-ui/react-popover';
15
17
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
16
18
  import * as TogglePrimitive from '@radix-ui/react-toggle';
@@ -21,9 +23,7 @@ type Breakpoint = {
21
23
  minWidth: number;
22
24
  };
23
25
  type DimensionSize = WidthSize | HeightSize;
24
- type UnknownPropertiesObjType = {
25
- [key: string]: any;
26
- };
26
+ type UnknownPropertiesObjType = Record<string, unknown>;
27
27
  interface FlexProperty {
28
28
  flexGrow?: number | string;
29
29
  flexShrink?: number | string;
@@ -54,10 +54,8 @@ declare type ResponsiveProp<T> = {
54
54
  [breakpoint in BreakpointSizeWithBase]?: T;
55
55
  };
56
56
  type Row = UnknownPropertiesObjType;
57
- type Cell = string | number | {
58
- [key: string]: unknown;
59
- } | unknown[];
60
- declare type Column = {
57
+ type Cell = Row[string];
58
+ declare type Column<TRow extends object = Row> = {
61
59
  /**
62
60
  * Text alignment for column cells (including header alignment). Cells will default to left if not defined.
63
61
  */
@@ -65,11 +63,11 @@ declare type Column = {
65
63
  /**
66
64
  * CSS Class to be applied uniformly to all individual cells in a column.
67
65
  */
68
- cellClassName?: string | ((cell?: Cell, row?: Row, rowIndex?: number) => string);
66
+ cellClassName?: string | ((cell?: Cell, row?: TRow, rowIndex?: number) => string);
69
67
  /**
70
68
  * The key value to be rendered based on the table `rows`.
71
69
  */
72
- dataKey?: string;
70
+ dataKey?: Extract<keyof TRow, string>;
73
71
  /**
74
72
  * Placeholder for empty cells Applies only to the cells of the particular column with this prop.
75
73
  */
@@ -95,7 +93,7 @@ declare type Column = {
95
93
  * Render method for column cell data. Provides ability to render any aspect of the cell/row with custom
96
94
  * markup.
97
95
  */
98
- render?: (cell?: Cell, row?: Row, rowIndex?: number) => ReactNode;
96
+ render?: (cell?: Cell, row?: TRow, rowIndex?: number) => ReactNode;
99
97
  /**
100
98
  * Whether the column is stuck to the left or right.
101
99
  */
@@ -116,61 +114,8 @@ type EventWithColumnKey = (MouseEvent<HTMLTableHeaderCellElement> | KeyboardEven
116
114
  type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;
117
115
  type ValueOrFunction<TValue, TArg> = TValue | ValueFunction<TValue, TArg>;
118
116
 
119
- type AlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'default';
120
-
121
- interface AlertProps {
122
- /**
123
- * The alert's contents.
124
- */
125
- children?: ReactNode;
126
- /**
127
- * Custom class to apply to the alert.
128
- */
129
- className?: string;
130
- /**
131
- * Whether the alert as an icon that corresponds to its variant (Success, warning, etc.).
132
- */
133
- hasIcon?: boolean;
134
- /**
135
- * Renders a version of the alert with smaller padding.
136
- */
137
- isCompact?: boolean;
138
- /**
139
- * Whether the alert can be closed by the user. If `true` it will render
140
- * the 'close' icon on the right hand side of the alert.
141
- */
142
- onClose?: (event: MouseEvent<HTMLOrSVGElement> | KeyboardEvent<HTMLSpanElement>) => void;
143
- /**
144
- * A render function that returns JSX if preferred over a static ReactNode or string.
145
- */
146
- render?: () => ReactNode;
147
- /**
148
- * The title for the alert.
149
- */
150
- title?: string;
151
- /**
152
- * The type/color of the alert to show.
153
- */
154
- variant?: AlertVariant;
155
- /**
156
- * Additional props to be spread to rendered element
157
- */
158
- [x: string]: any;
159
- }
160
- declare const Alert: React__default.NamedExoticComponent<AlertProps>;
161
-
162
- declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
163
-
164
- type KnownKeys<T> = keyof {
165
- [K in keyof T as string extends K ? never : K]: K;
166
- };
167
-
168
117
  type HoverableBoxProperties = 'color' | 'borderColor' | 'shadow' | 'background';
169
- interface BoxProps {
170
- /**
171
- * The element type to be rendered.
172
- */
173
- as?: string;
118
+ interface BoxOwnProps {
174
119
  /**
175
120
  * How to align the contents along the cross axis.
176
121
  */
@@ -251,11 +196,11 @@ interface BoxProps {
251
196
  * `* shadow`
252
197
  */
253
198
  focus?: {
254
- background?: BoxProps['background'];
255
- borderColor?: BoxProps['borderColor'];
256
- borderWidth?: BoxProps['borderWidth'];
257
- color?: BoxProps['color'];
258
- shadow?: BoxProps['shadow'];
199
+ background?: BoxOwnProps['background'];
200
+ borderColor?: BoxOwnProps['borderColor'];
201
+ borderWidth?: BoxOwnProps['borderWidth'];
202
+ color?: BoxOwnProps['color'];
203
+ shadow?: BoxOwnProps['shadow'];
259
204
  };
260
205
  /**
261
206
  * The [font family token](/?path=/docs/foundation-design-tokens--docs#font-family) identifier for the Box's text
@@ -284,12 +229,12 @@ interface BoxProps {
284
229
  * `* shadow`
285
230
  */
286
231
  hover?: {
287
- background?: BoxProps['background'];
288
- borderColor?: BoxProps['borderColor'];
289
- borderWidth?: BoxProps['borderWidth'];
290
- color?: BoxProps['color'];
291
- fontSize?: BoxProps['fontSize'];
292
- shadow?: BoxProps['shadow'];
232
+ background?: BoxOwnProps['background'];
233
+ borderColor?: BoxOwnProps['borderColor'];
234
+ borderWidth?: BoxOwnProps['borderWidth'];
235
+ color?: BoxOwnProps['color'];
236
+ fontSize?: BoxOwnProps['fontSize'];
237
+ shadow?: BoxOwnProps['shadow'];
293
238
  };
294
239
  /**
295
240
  * Sets the gaps (gutters) between rows and columns.
@@ -397,17 +342,73 @@ interface BoxProps {
397
342
  * Can be responsive.
398
343
  */
399
344
  zIndex?: ZIndexSize | ResponsiveProp<ZIndexSize>;
345
+ }
346
+ type BoxElement = ElementType;
347
+ type BoxProps<T extends BoxElement = 'div'> = BoxOwnProps & {
348
+ /**
349
+ * The element type to be rendered. Defaults to `div`.
350
+ *
351
+ * The element is no longer inferred from other props: passing `href` alone
352
+ * renders a `div` with an inert `href` attribute rather than an anchor, so
353
+ * links must set `as="a"` explicitly.
354
+ */
355
+ as?: T;
356
+ } & Omit<ComponentPropsWithoutRef<T>, keyof BoxOwnProps | 'as'>;
357
+ type BoxRef<T extends BoxElement> = ComponentPropsWithRef<T>['ref'];
358
+ type BoxComponent = {
359
+ <T extends BoxElement>(props: BoxProps<T> & {
360
+ as: T;
361
+ ref?: BoxRef<T>;
362
+ }): ReactElement | null;
363
+ (props: BoxProps<'div'> & {
364
+ ref?: BoxRef<'div'>;
365
+ }): ReactElement | null;
366
+ displayName?: string;
367
+ };
368
+ declare const Box: BoxComponent;
369
+ declare const boxPropsKeys: (keyof BoxOwnProps | "as")[];
370
+
371
+ type AlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'default';
372
+
373
+ interface AlertOwnProps {
374
+ /**
375
+ * The alert's contents.
376
+ */
377
+ children?: ReactNode;
378
+ /**
379
+ * Custom class to apply to the alert.
380
+ */
381
+ className?: string;
382
+ /**
383
+ * Whether the alert as an icon that corresponds to its variant (Success, warning, etc.).
384
+ */
385
+ hasIcon?: boolean;
386
+ /**
387
+ * Renders a version of the alert with smaller padding.
388
+ */
389
+ isCompact?: boolean;
390
+ /**
391
+ * Whether the alert can be closed by the user. If `true` it will render
392
+ * the 'close' icon on the right hand side of the alert.
393
+ */
394
+ onClose?: (event: MouseEvent<HTMLOrSVGElement> | KeyboardEvent<HTMLSpanElement>) => void;
395
+ /**
396
+ * A render function that returns JSX if preferred over a static ReactNode or string.
397
+ */
398
+ render?: () => ReactNode;
400
399
  /**
401
- * Additional props to be spread to rendered element
400
+ * The title for the alert.
401
+ */
402
+ title?: string;
403
+ /**
404
+ * The type/color of the alert to show.
402
405
  */
403
- [x: string]: any;
406
+ variant?: AlertVariant;
404
407
  }
405
- /**
406
- * A `<Box>` is a layout component to build UIs with consistent padding and spacing between
407
- * elements.
408
- */
409
- declare const Box: FC<BoxProps>;
410
- declare const boxPropsKeys: (keyof Pick<BoxProps, KnownKeys<BoxProps>>)[];
408
+ type AlertProps = AlertOwnProps & Omit<BoxProps<'div'>, keyof AlertOwnProps | 'as'>;
409
+ declare const Alert: React__default.NamedExoticComponent<AlertProps>;
410
+
411
+ declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>>;
411
412
 
412
413
  type BadgeSize = 'sm' | 'md' | 'lg';
413
414
  type BadgeVariant = 'solid' | 'soft' | 'surface' | 'outline';
@@ -415,7 +416,7 @@ type BadgeHue = 'grey' | 'blue' | 'green' | 'yellow' | 'red' | 'purple' | 'orang
415
416
  type BadgeSemanticColor = 'danger' | 'success' | 'warning' | 'info';
416
417
  type BadgeColor = BadgeHue | BadgeSemanticColor;
417
418
  type BadgeRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
418
- interface BadgeProps extends Omit<BoxProps, 'color' | 'radius'> {
419
+ interface BadgeOwnProps {
419
420
  /**
420
421
  * The color of the badge. Accepts a hue, or one of the semantic names
421
422
  * (`danger`, `success`, `warning`, `info`) which map onto `red`, `green`, `yellow` and `blue`.
@@ -434,7 +435,18 @@ interface BadgeProps extends Omit<BoxProps, 'color' | 'radius'> {
434
435
  */
435
436
  variant?: BadgeVariant;
436
437
  }
437
- declare const Badge: React__default.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
438
+ type BadgeProps<T extends BoxElement = 'div'> = BadgeOwnProps & Omit<BoxProps<T>, keyof BadgeOwnProps>;
439
+ type BadgeComponent = {
440
+ <T extends BoxElement>(props: BadgeProps<T> & {
441
+ as: T;
442
+ ref?: BoxRef<T>;
443
+ }): ReactElement | null;
444
+ (props: BadgeProps<'div'> & {
445
+ ref?: BoxRef<'div'>;
446
+ }): ReactElement | null;
447
+ displayName?: string;
448
+ };
449
+ declare const Badge: BadgeComponent;
438
450
 
439
451
  type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'success' | 'link';
440
452
  type ButtonSize = 'sm' | 'md' | 'lg';
@@ -496,14 +508,10 @@ interface CardFooterProps extends BoxProps {
496
508
  * Contents of the Footer.
497
509
  */
498
510
  children?: ReactNode;
499
- /**
500
- * Additional props to be spread to rendered element
501
- */
502
- [x: string]: any;
503
511
  }
504
512
  declare const CardFooter: FC<CardFooterProps>;
505
513
 
506
- interface CardHeaderProps extends BoxProps {
514
+ interface CardHeaderOwnProps {
507
515
  /**
508
516
  * The title of the card
509
517
  */
@@ -513,9 +521,10 @@ interface CardHeaderProps extends BoxProps {
513
521
  */
514
522
  description?: ReactNode;
515
523
  }
524
+ type CardHeaderProps = CardHeaderOwnProps & Omit<BoxProps<'div'>, keyof CardHeaderOwnProps | 'as'>;
516
525
  declare const CardHeader: FC<CardHeaderProps>;
517
526
 
518
- interface CardSectionProps extends BoxProps {
527
+ interface CardSectionOwnProps {
519
528
  /**
520
529
  * Any valid background color token, or a `url()` for an image
521
530
  */
@@ -552,11 +561,8 @@ interface CardSectionProps extends BoxProps {
552
561
  * Title for the section.
553
562
  */
554
563
  title?: ReactNode;
555
- /**
556
- * Additional props to be spread to rendered element
557
- */
558
- [x: string]: any;
559
564
  }
565
+ type CardSectionProps = CardSectionOwnProps & Omit<BoxProps<'div'>, keyof CardSectionOwnProps | 'as'>;
560
566
  declare const CardSection: FC<CardSectionProps>;
561
567
 
562
568
  interface CardProps extends BoxProps {
@@ -564,8 +570,12 @@ interface CardProps extends BoxProps {
564
570
  * The Card's contents.
565
571
  */
566
572
  children?: ReactNode;
573
+ /**
574
+ * Whether the card uses its subdued background.
575
+ */
576
+ subdued?: boolean;
567
577
  }
568
- declare const CardBaseComponent: React__default.FC<CardProps>;
578
+ declare const CardBaseComponent: React__default.ForwardRefExoticComponent<CardProps & React__default.RefAttributes<HTMLDivElement>>;
569
579
  interface CardStatic {
570
580
  Header: typeof CardHeader;
571
581
  Section: typeof CardSection;
@@ -606,6 +616,10 @@ interface CheckboxProps extends Omit<BoxProps, 'radius' | 'background' | 'as' |
606
616
  * id of the element that labels the Checkbox
607
617
  */
608
618
  labelledby?: string;
619
+ /**
620
+ * The checkbox input's name attribute.
621
+ */
622
+ name?: string;
609
623
  /**
610
624
  * If the input should be disabled and not focusable.
611
625
  */
@@ -640,9 +654,9 @@ interface CheckboxProps extends Omit<BoxProps, 'radius' | 'background' | 'as' |
640
654
  */
641
655
  value?: string | number;
642
656
  }
643
- declare const Checkbox: React__default.FC<CheckboxProps>;
657
+ declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLDivElement>>;
644
658
 
645
- interface CheckboxInputProps {
659
+ interface CheckboxInputOwnProps {
646
660
  /**
647
661
  * The id attribute of the input.
648
662
  */
@@ -690,6 +704,10 @@ interface CheckboxInputProps {
690
704
  * The required and aria-required attributes on the input
691
705
  */
692
706
  isRequired?: boolean;
707
+ /**
708
+ * The name attribute of the checkbox input element.
709
+ */
710
+ name?: CheckboxProps['name'];
693
711
  /**
694
712
  * Callback function when input is blurred.
695
713
  */
@@ -707,29 +725,32 @@ interface CheckboxInputProps {
707
725
  */
708
726
  size?: CheckboxSize;
709
727
  /**
710
- * Additional props to be spread to rendered element
728
+ * Value of the checkbox input element.
711
729
  */
712
- [x: string]: any;
730
+ value?: CheckboxProps['value'];
713
731
  }
732
+ type CheckboxInputProps = CheckboxInputOwnProps & Omit<BoxProps<'div'>, keyof CheckboxInputOwnProps | 'as'>;
714
733
  declare const CheckboxInput: React__default.FC<CheckboxInputProps>;
715
734
 
716
735
  declare const Collapsible: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
717
736
  declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
718
737
  declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
719
738
 
720
- interface DetailsSummaryProps extends BoxProps {
739
+ interface DetailsSummaryOwnProps {
721
740
  isDetailsOpen: boolean;
722
741
  onToggle?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
723
742
  }
743
+ type DetailsSummaryProps = DetailsSummaryOwnProps & Omit<BoxProps<'summary'>, keyof DetailsSummaryOwnProps | 'as'>;
724
744
  declare const DetailsSummary: React__default.FC<DetailsSummaryProps>;
725
745
 
726
- interface DetailsProps extends BoxProps {
746
+ interface DetailsOwnProps {
727
747
  /**
728
748
  * Whether the details below the summary are opened. Directly corresponds to `open` property in <details> element.
729
749
  */
730
750
  isOpen: boolean;
731
751
  }
732
- declare const DetailsBaseComponent: React__default.FC<DetailsProps>;
752
+ type DetailsProps = DetailsOwnProps & Omit<BoxProps<'details'>, keyof DetailsOwnProps | 'as' | 'open'>;
753
+ declare const DetailsBaseComponent: React__default.ForwardRefExoticComponent<DetailsOwnProps & Omit<BoxProps<"details">, "as" | "open" | "isOpen"> & React__default.RefAttributes<HTMLDetailsElement>>;
733
754
  interface DetailsStatic {
734
755
  Summary: typeof DetailsSummary;
735
756
  }
@@ -830,13 +851,19 @@ interface DrawerProps {
830
851
  */
831
852
  width?: DimensionSize | CssDimensionValue;
832
853
  }
833
- declare const Drawer: React__default.FC<DrawerProps>;
834
- declare const DrawerHeader: React__default.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
835
- declare const DrawerTitle: React__default.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
854
+ declare const Drawer: React__default.ForwardRefExoticComponent<DrawerProps & React__default.RefAttributes<HTMLDivElement>>;
855
+ declare const DrawerHeader: React__default.ForwardRefExoticComponent<BoxOwnProps & {
856
+ as?: "div" | undefined;
857
+ } & Omit<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof BoxOwnProps | "as"> & React__default.RefAttributes<HTMLDivElement>>;
858
+ declare const DrawerTitle: React__default.ForwardRefExoticComponent<BoxOwnProps & {
859
+ as?: "div" | undefined;
860
+ } & Omit<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof BoxOwnProps | "as"> & React__default.RefAttributes<HTMLDivElement>>;
836
861
  declare const DrawerCloseButton: React__default.ForwardRefExoticComponent<BaseButtonProps & React__default.ButtonHTMLAttributes<HTMLButtonElement> & {
837
862
  onClose?: () => void;
838
863
  } & React__default.RefAttributes<HTMLButtonElement>>;
839
- declare const DrawerContent: React__default.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
864
+ declare const DrawerContent: React__default.ForwardRefExoticComponent<BoxOwnProps & {
865
+ as?: "div" | undefined;
866
+ } & Omit<Omit<React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof BoxOwnProps | "as"> & React__default.RefAttributes<HTMLDivElement>>;
840
867
 
841
868
  declare const DropdownMenu: React__default.FC<DropdownMenuPrimitive.DropdownMenuProps>;
842
869
  declare const DropdownMenuTrigger: React__default.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
@@ -896,7 +923,7 @@ interface FormControlProps extends BoxProps {
896
923
  */
897
924
  requiredIndicator?: ReactNode;
898
925
  }
899
- declare const FormControl: React__default.ForwardRefExoticComponent<Omit<FormControlProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
926
+ declare const FormControl: React__default.ForwardRefExoticComponent<FormControlProps & React__default.RefAttributes<HTMLDivElement>>;
900
927
 
901
928
  interface FormikCheckboxInputProps extends Omit<CheckboxInputProps, 'onChange'> {
902
929
  field: FieldAttributes<HTMLInputElement>;
@@ -962,7 +989,7 @@ interface RadioInputProps {
962
989
  size: RadioSize;
963
990
  }
964
991
 
965
- interface RadioGroupProps {
992
+ interface RadioGroupOwnProps {
966
993
  /**
967
994
  * Radio group name.
968
995
  */
@@ -1029,11 +1056,8 @@ interface RadioGroupProps {
1029
1056
  * The value of selected radio input.
1030
1057
  */
1031
1058
  value?: string;
1032
- /**
1033
- * Additional props to be spread to rendered element
1034
- */
1035
- [x: string]: any;
1036
1059
  }
1060
+ type RadioGroupProps = RadioGroupOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof RadioGroupOwnProps>;
1037
1061
  declare const RadioGroup: FC<RadioGroupProps>;
1038
1062
 
1039
1063
  interface FormikRadioGroupProps extends Omit<RadioGroupProps, 'onChange'> {
@@ -1060,7 +1084,7 @@ type SimulatedEventPayloadType = {
1060
1084
  };
1061
1085
  };
1062
1086
  type TextInputSize = 'sm' | 'md' | 'lg' | ResponsiveProp<'sm' | 'md' | 'lg'>;
1063
- interface SelectInputProps {
1087
+ interface SelectInputOwnProps {
1064
1088
  /**
1065
1089
  * The id attribute of the input.
1066
1090
  */
@@ -1077,10 +1101,6 @@ interface SelectInputProps {
1077
1101
  * The value(s) of select.
1078
1102
  */
1079
1103
  value: any | any[];
1080
- /**
1081
- * Options for dropdown list.
1082
- */
1083
- options: SelectInputOptions | AsyncOptions;
1084
1104
  /**
1085
1105
  * Autofocus select input on render.
1086
1106
  */
@@ -1102,10 +1122,6 @@ interface SelectInputProps {
1102
1122
  * Visually hide the label.
1103
1123
  */
1104
1124
  hideLabel?: boolean;
1105
- /**
1106
- * Load the input asynchronously.
1107
- */
1108
- isAsync?: boolean;
1109
1125
  /**
1110
1126
  * If the input value is clearable programmatically.
1111
1127
  */
@@ -1155,15 +1171,12 @@ interface SelectInputProps {
1155
1171
  * The size of the text input.
1156
1172
  */
1157
1173
  size?: TextInputSize;
1158
- /**
1159
- * Additional props to be spread. These will be applied specifically to
1160
- * the `react-select` component that powers the select. For full docs on
1161
- * react-select props, [Click Here](https://react-select.com/props)
1162
- */
1163
- [x: string]: any;
1164
1174
  }
1175
+ type ReactSelectAsyncProps = AsyncCreatableProps<SelectOption, boolean, SelectGroupOptions>;
1176
+ type ControlledReactSelectProps = 'aria-label' | 'aria-labelledby' | 'cacheOptions' | 'classNamePrefix' | 'components' | 'defaultOptions' | 'inputId' | 'loadOptions' | 'options' | 'styles';
1177
+ type SelectInputBaseProps = SelectInputOwnProps & Omit<ReactSelectAsyncProps, keyof SelectInputOwnProps | ControlledReactSelectProps>;
1165
1178
  type AsyncOptions = (inputValue: string) => Promise<OptionsOrGroups<SelectOption, SelectGroupOptions>>;
1166
- type AsyncSelectInputProps = SelectInputProps & {
1179
+ type AsyncSelectInputProps = SelectInputBaseProps & {
1167
1180
  /**
1168
1181
  * Load the input asynchronously.
1169
1182
  */
@@ -1175,13 +1188,13 @@ type AsyncSelectInputProps = SelectInputProps & {
1175
1188
  /**
1176
1189
  * If cacheOptions is passed, then the loaded data will be cached.
1177
1190
  */
1178
- cacheOptions?: boolean;
1191
+ cacheOptions?: ReactSelectAsyncProps['cacheOptions'];
1179
1192
  /**
1180
1193
  * The default set of options to show before the user starts searching.
1181
1194
  */
1182
- defaultOptions?: boolean;
1195
+ defaultOptions?: ReactSelectAsyncProps['defaultOptions'];
1183
1196
  };
1184
- type SyncSelectInputProps = SelectInputProps & {
1197
+ type SyncSelectInputProps = SelectInputBaseProps & {
1185
1198
  /**
1186
1199
  * Load the input synchronously.
1187
1200
  */
@@ -1190,11 +1203,13 @@ type SyncSelectInputProps = SelectInputProps & {
1190
1203
  * Options for dropdown list.
1191
1204
  */
1192
1205
  options: SelectInputOptions;
1206
+ cacheOptions?: never;
1207
+ defaultOptions?: never;
1193
1208
  };
1194
- declare function SelectInput(props: AsyncSelectInputProps): JSX.Element;
1195
- declare function SelectInput(props: SyncSelectInputProps): JSX.Element;
1209
+ type SelectInputProps = AsyncSelectInputProps | SyncSelectInputProps;
1210
+ declare function SelectInput(props: SelectInputProps): JSX.Element;
1196
1211
 
1197
- interface FormikSelectInputProps extends Omit<SelectInputProps, 'onChange'> {
1212
+ interface FormikSelectInputOwnProps {
1198
1213
  field: FieldAttributes<HTMLSelectElement>;
1199
1214
  form: {
1200
1215
  touched: FormikTouched<FormikValues>;
@@ -1205,6 +1220,8 @@ interface FormikSelectInputProps extends Omit<SelectInputProps, 'onChange'> {
1205
1220
  label?: string;
1206
1221
  }>;
1207
1222
  }
1223
+ type FormikControlledSelectProps = keyof FormikSelectInputOwnProps | 'name' | 'onBlur' | 'value';
1224
+ type FormikSelectInputProps = FormikSelectInputOwnProps & (Omit<AsyncSelectInputProps, FormikControlledSelectProps> | Omit<SyncSelectInputProps, FormikControlledSelectProps>);
1208
1225
  declare const FormikSelectInput: React__default.FC<FormikSelectInputProps>;
1209
1226
 
1210
1227
  type SelectInputInsetSize = 'md' | 'lg';
@@ -1227,11 +1244,15 @@ interface SelectInputInsetProps {
1227
1244
  /**
1228
1245
  * Callback function to call on change event.
1229
1246
  */
1230
- onChange: (event: ChangeEvent<HTMLInputElement>) => void;
1247
+ onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
1231
1248
  /**
1232
1249
  * Value of selected option. Should match the value key in the option object.
1233
1250
  */
1234
1251
  value: string | number | null;
1252
+ /**
1253
+ * The select's autocomplete behavior.
1254
+ */
1255
+ autoComplete?: boolean | string;
1235
1256
  /**
1236
1257
  * Automatically focus the input when the page is loaded.
1237
1258
  */
@@ -1252,7 +1273,7 @@ interface SelectInputInsetProps {
1252
1273
  /**
1253
1274
  * Props passed directly to the input element of the component
1254
1275
  */
1255
- inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
1276
+ inputProps?: Omit<BoxProps<'select'>, 'as'>;
1256
1277
  /**
1257
1278
  * The input's disabled attribute
1258
1279
  */
@@ -1268,7 +1289,7 @@ interface SelectInputInsetProps {
1268
1289
  /**
1269
1290
  * Callback function to call on blur event.
1270
1291
  */
1271
- onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
1292
+ onBlur?: (event: FocusEvent<HTMLSelectElement>) => void;
1272
1293
  /**
1273
1294
  * Callback function to call when input us cleared. When this is passed,
1274
1295
  * the input will display an icon on the right side, for triggering this callback.
@@ -1277,7 +1298,7 @@ interface SelectInputInsetProps {
1277
1298
  /**
1278
1299
  * Callback function to call on focus event.
1279
1300
  */
1280
- onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
1301
+ onFocus?: (event: FocusEvent<HTMLSelectElement>) => void;
1281
1302
  /**
1282
1303
  * The input placeholder attribute.
1283
1304
  */
@@ -1290,10 +1311,6 @@ interface SelectInputInsetProps {
1290
1311
  * The size of the text input.
1291
1312
  */
1292
1313
  size?: SelectInputInsetSize | ResponsiveProp<SelectInputInsetSize>;
1293
- /**
1294
- * Additional props to be spread to rendered element
1295
- */
1296
- [x: string]: any;
1297
1314
  }
1298
1315
  declare const SelectInputInset: ForwardRefExoticComponent<SelectInputInsetProps>;
1299
1316
 
@@ -1320,11 +1337,15 @@ interface TextareaInputInsetProps {
1320
1337
  /**
1321
1338
  * Callback function to call on change event.
1322
1339
  */
1323
- onChange: (event: ChangeEvent<HTMLInputElement>) => void;
1340
+ onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
1324
1341
  /**
1325
1342
  * The text value of the input. Required since our Input is a controlled component.
1326
1343
  */
1327
- value: InputHTMLAttributes<HTMLInputElement>['value'];
1344
+ value: TextareaHTMLAttributes<HTMLTextAreaElement>['value'];
1345
+ /**
1346
+ * The textarea's autocomplete behavior.
1347
+ */
1348
+ autoComplete?: boolean | string;
1328
1349
  /**
1329
1350
  * Automatically focus the input when the page is loaded.
1330
1351
  */
@@ -1345,7 +1366,7 @@ interface TextareaInputInsetProps {
1345
1366
  /**
1346
1367
  * Props passed directly to the input element of the component
1347
1368
  */
1348
- inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
1369
+ inputProps?: Omit<BoxProps<'textarea'>, 'as'>;
1349
1370
  /**
1350
1371
  * The input's disabled attribute
1351
1372
  */
@@ -1366,11 +1387,11 @@ interface TextareaInputInsetProps {
1366
1387
  /**
1367
1388
  * Callback function to call on blur event.
1368
1389
  */
1369
- onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
1390
+ onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
1370
1391
  /**
1371
1392
  * Callback function to call on focus event.
1372
1393
  */
1373
- onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
1394
+ onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
1374
1395
  /**
1375
1396
  * The input placeholder attribute.
1376
1397
  */
@@ -1399,14 +1420,6 @@ interface TextareaInputInsetProps {
1399
1420
  * An input helper rendered after the input field value
1400
1421
  */
1401
1422
  suffix?: ReactNode;
1402
- /**
1403
- * The input 'type' value. Defaults to type 'text'.
1404
- */
1405
- type?: InputHTMLAttributes<HTMLInputElement>['type'];
1406
- /**
1407
- * Additional props to be spread to rendered element
1408
- */
1409
- [x: string]: any;
1410
1423
  }
1411
1424
  declare const TextareaInputInset: ForwardRefExoticComponent<TextareaInputInsetProps>;
1412
1425
 
@@ -1438,6 +1451,10 @@ interface TextInputInsetProps {
1438
1451
  * The text value of the input. Required since our Input is a controlled component.
1439
1452
  */
1440
1453
  value: InputHTMLAttributes<HTMLInputElement>['value'];
1454
+ /**
1455
+ * The input's autocomplete behavior.
1456
+ */
1457
+ autoComplete?: boolean | string;
1441
1458
  /**
1442
1459
  * Automatically focus the input when the page is loaded.
1443
1460
  */
@@ -1458,7 +1475,7 @@ interface TextInputInsetProps {
1458
1475
  /**
1459
1476
  * Props passed directly to the input element of the component
1460
1477
  */
1461
- inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
1478
+ inputProps?: Omit<BoxProps<'input'>, 'as'>;
1462
1479
  /**
1463
1480
  * The input's disabled attribute
1464
1481
  */
@@ -1513,10 +1530,6 @@ interface TextInputInsetProps {
1513
1530
  * The input 'type' value. Defaults to type 'text'.
1514
1531
  */
1515
1532
  type?: InputHTMLAttributes<HTMLInputElement>['type'];
1516
- /**
1517
- * Additional props to be spread to rendered element
1518
- */
1519
- [x: string]: any;
1520
1533
  }
1521
1534
  declare const TextInputInset: ForwardRefExoticComponent<TextInputInsetProps>;
1522
1535
 
@@ -1536,7 +1549,7 @@ interface SelectInputNativeOption {
1536
1549
  label: string | number;
1537
1550
  disabled?: boolean;
1538
1551
  }
1539
- interface SelectInputNativeProps extends BoxProps, FormControlProps {
1552
+ interface SelectInputNativeOwnProps {
1540
1553
  /**
1541
1554
  * List of options for the select input.
1542
1555
  */
@@ -1548,11 +1561,19 @@ interface SelectInputNativeProps extends BoxProps, FormControlProps {
1548
1561
  /**
1549
1562
  * Value of selected option. Should match the value key in the option object.
1550
1563
  */
1551
- value: string | number | null;
1564
+ value: React__default.ComponentPropsWithoutRef<'select'>['value'] | null;
1565
+ /**
1566
+ * Props passed directly to the select element of the component.
1567
+ */
1568
+ inputProps?: Omit<BoxProps<'select'>, 'aria-label' | 'aria-labelledby' | 'aria-required' | 'as' | 'autoFocus' | 'children' | 'color' | 'defaultValue' | 'disabled' | 'id' | 'name' | 'onChange' | 'required' | 'size' | 'value'>;
1552
1569
  /**
1553
1570
  * The input's 'name' attribute.
1554
1571
  */
1555
1572
  name?: string;
1573
+ /**
1574
+ * Placeholder option displayed before a value is selected.
1575
+ */
1576
+ placeholder?: string;
1556
1577
  /**
1557
1578
  * Visual indicator that the field is required, that gets appended to the label
1558
1579
  */
@@ -1565,14 +1586,13 @@ interface SelectInputNativeProps extends BoxProps, FormControlProps {
1565
1586
  * Whether the input is autofocused on initial render.
1566
1587
  */
1567
1588
  autoFocus?: HTMLSelectElement['autofocus'];
1568
- /**
1569
- * Additional props to be spread.
1570
- */
1571
- [x: string]: any;
1572
1589
  }
1590
+ type SelectInputNativeFormControlProps = Pick<FormControlProps, 'error' | 'helpText' | 'hideLabel' | 'id' | 'isDisabled' | 'isRequired' | 'label'>;
1591
+ type SelectInputNativeElementProps = Omit<React__default.ComponentPropsWithoutRef<'select'>, keyof SelectInputNativeOwnProps | keyof SelectInputNativeFormControlProps | keyof BoxOwnProps | 'aria-label' | 'aria-labelledby' | 'aria-required' | 'children' | 'dangerouslySetInnerHTML' | 'defaultValue' | 'size'>;
1592
+ type SelectInputNativeProps = SelectInputNativeOwnProps & SelectInputNativeFormControlProps & Omit<BoxOwnProps, 'children'> & SelectInputNativeElementProps;
1573
1593
  declare const SelectInputNative: React__default.FC<SelectInputNativeProps>;
1574
1594
 
1575
- interface FormikSelectInputNativeProps extends Omit<SelectInputNativeProps, 'onChange'> {
1595
+ interface FormikSelectInputNativeProps extends Omit<SelectInputNativeProps, 'form' | 'onChange'> {
1576
1596
  field: FieldAttributes<HTMLSelectElement>;
1577
1597
  form: {
1578
1598
  touched: FormikTouched<FormikValues>;
@@ -1583,7 +1603,7 @@ interface FormikSelectInputNativeProps extends Omit<SelectInputNativeProps, 'onC
1583
1603
  declare const FormikSelectInputNative: React__default.FC<FormikSelectInputNativeProps>;
1584
1604
 
1585
1605
  type TextInputSizeType = 'sm' | 'md' | 'lg';
1586
- interface TextInputProps {
1606
+ interface TextInputOwnProps {
1587
1607
  /**
1588
1608
  * The input's id attribute. Used to programmatically tie the input with its label.
1589
1609
  */
@@ -1600,6 +1620,10 @@ interface TextInputProps {
1600
1620
  * The text value of the input. Required since our Input is a controlled component.
1601
1621
  */
1602
1622
  value: InputHTMLAttributes<HTMLInputElement>['value'];
1623
+ /**
1624
+ * The input's autocomplete behavior.
1625
+ */
1626
+ autoComplete?: boolean | string;
1603
1627
  /**
1604
1628
  * Automatically focus the input when the page is loaded.
1605
1629
  */
@@ -1624,7 +1648,7 @@ interface TextInputProps {
1624
1648
  /**
1625
1649
  * Props passed directly to the input element of the component
1626
1650
  */
1627
- inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
1651
+ inputProps?: Omit<BoxProps<'input'>, 'as'>;
1628
1652
  /**
1629
1653
  * The input's disabled attribute
1630
1654
  */
@@ -1679,11 +1703,8 @@ interface TextInputProps {
1679
1703
  * The input 'type' value. Defaults to type 'text'.
1680
1704
  */
1681
1705
  type?: InputHTMLAttributes<HTMLInputElement>['type'];
1682
- /**
1683
- * Additional props to be spread to rendered element
1684
- */
1685
- [x: string]: any;
1686
1706
  }
1707
+ type TextInputProps = TextInputOwnProps & Omit<FormControlProps, keyof TextInputOwnProps>;
1687
1708
  declare const TextInput: ForwardRefExoticComponent<TextInputProps>;
1688
1709
 
1689
1710
  interface FormikTextInputProps extends Omit<TextInputProps, 'onChange'> {
@@ -1697,7 +1718,7 @@ interface FormikTextInputProps extends Omit<TextInputProps, 'onChange'> {
1697
1718
  declare const FormikTextInput: React__default.FC<FormikTextInputProps>;
1698
1719
 
1699
1720
  type TextareaInputSize = 'sm' | 'md' | 'lg';
1700
- interface TextareaInputProps extends Omit<BoxProps, 'as' | 'width'> {
1721
+ interface TextareaInputOwnProps {
1701
1722
  /**
1702
1723
  * The input's id attribute. Used to programmatically tie the input with its label.
1703
1724
  */
@@ -1784,11 +1805,8 @@ interface TextareaInputProps extends Omit<BoxProps, 'as' | 'width'> {
1784
1805
  * The size of the text input.
1785
1806
  */
1786
1807
  size?: TextareaInputSize | ResponsiveProp<TextareaInputSize>;
1787
- /**
1788
- * Additional props to be spread to rendered element
1789
- */
1790
- [x: string]: any;
1791
1808
  }
1809
+ type TextareaInputProps = TextareaInputOwnProps & Omit<BoxProps<'div'>, keyof TextareaInputOwnProps | 'as' | 'width'>;
1792
1810
  declare const TextareaInput: FC<TextareaInputProps>;
1793
1811
 
1794
1812
  interface FormikTextareaInputProps extends Omit<TextareaInputProps, 'onChange'> {
@@ -1839,7 +1857,7 @@ interface TimePickerProps extends Omit<SelectInputNativeProps, 'options'> {
1839
1857
  }
1840
1858
  declare const TimePicker: FC<TimePickerProps>;
1841
1859
 
1842
- interface FormikTimePickerProps extends Omit<TimePickerProps, 'onChange'> {
1860
+ interface FormikTimePickerProps extends Omit<TimePickerProps, 'form' | 'onChange'> {
1843
1861
  field: FieldAttributes<HTMLSelectElement>;
1844
1862
  form: {
1845
1863
  touched: FormikTouched<FormikValues>;
@@ -1911,7 +1929,7 @@ interface FormikToggleGroupMultiProps {
1911
1929
  }
1912
1930
  declare const FormikToggleGroupMulti: ({ name, options, helpText, label, children, variant, gap, ...props }: FormikToggleGroupMultiProps) => React__default.JSX.Element;
1913
1931
 
1914
- interface FormLabelProps extends BoxProps {
1932
+ interface FormLabelOwnProps {
1915
1933
  /**
1916
1934
  * Content to be rendered inside the label.
1917
1935
  */
@@ -1945,15 +1963,16 @@ interface FormLabelProps extends BoxProps {
1945
1963
  */
1946
1964
  requiredIndicator?: ReactNode;
1947
1965
  /**
1948
- * Additional props to be spread to rendered element
1966
+ * The label size.
1949
1967
  */
1950
- [x: string]: any;
1968
+ size?: 'sm' | 'md' | 'lg';
1951
1969
  }
1970
+ type FormLabelProps = FormLabelOwnProps & Omit<BoxProps<'label'>, keyof FormLabelOwnProps | 'as' | 'htmlFor'>;
1952
1971
  declare const FormLabel: FC<FormLabelProps>;
1953
1972
 
1954
1973
  type HEADING_LEVELS_TYPE = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
1955
1974
 
1956
- interface HeadingProps {
1975
+ interface HeadingOwnProps {
1957
1976
  /**
1958
1977
  * The DOM tag or react component to use for the element.
1959
1978
  * Select the appropriate semantic element (h1-h6).
@@ -1979,14 +1998,11 @@ interface HeadingProps {
1979
1998
  * [here](https://github.com/Hyphen/hyphen-components/blob/main/packages/design-tokens/tokens/size/font.json).
1980
1999
  */
1981
2000
  size?: HeadingSize | ResponsiveProp<HeadingSize>;
1982
- /**
1983
- * Additional props to be spread to rendered element
1984
- */
1985
- [x: string]: any;
1986
2001
  }
2002
+ type HeadingProps = HeadingOwnProps & Omit<HTMLAttributes<HTMLHeadingElement>, keyof HeadingOwnProps>;
1987
2003
  declare const Heading: FC<HeadingProps>;
1988
2004
 
1989
- interface IconProps {
2005
+ interface IconOwnProps {
1990
2006
  className?: string;
1991
2007
  /**
1992
2008
  * A color token identifier to use for the text color.
@@ -2000,12 +2016,9 @@ interface IconProps {
2000
2016
  * Name of the icon
2001
2017
  */
2002
2018
  name: IconName;
2003
- /**
2004
- * Additional props to be spread to rendered element
2005
- */
2006
- [x: string]: any;
2007
2019
  }
2008
- declare const Icon: FC<IconProps>;
2020
+ type IconProps = IconOwnProps & Omit<ComponentPropsWithoutRef<'svg'>, keyof IconOwnProps>;
2021
+ declare const Icon: React__default.ForwardRefExoticComponent<IconOwnProps & Omit<Omit<React__default.SVGProps<SVGSVGElement>, "ref">, keyof IconOwnProps> & React__default.RefAttributes<SVGSVGElement>>;
2009
2022
 
2010
2023
  type ModalFooterProps = Omit<BoxProps, 'as' | 'radius'>;
2011
2024
  declare const ModalFooter: FC<ModalFooterProps>;
@@ -2033,7 +2046,7 @@ declare const ModalHeader: FC<ModalHeaderProps>;
2033
2046
  type ModalBodyProps = BoxProps;
2034
2047
  declare const ModalBody: FC<ModalBodyProps>;
2035
2048
 
2036
- interface ModalProps {
2049
+ interface ModalOwnProps {
2037
2050
  /**
2038
2051
  * Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
2039
2052
  */
@@ -2099,12 +2112,9 @@ interface ModalProps {
2099
2112
  * Inline styles for the modal container
2100
2113
  */
2101
2114
  style?: React__default.CSSProperties;
2102
- /**
2103
- * Allows spread props
2104
- */
2105
- [x: string]: any;
2106
2115
  }
2107
- declare const ModalBaseComponent: React__default.FC<ModalProps>;
2116
+ type ModalProps = ModalOwnProps & Omit<ReactModal.Props, keyof ModalOwnProps | 'ariaHideApp' | 'onRequestClose' | 'overlayClassName' | 'parentSelector'>;
2117
+ declare const ModalBaseComponent: React__default.ForwardRefExoticComponent<ModalOwnProps & Omit<ReactModal.Props, "overlayClassName" | "onRequestClose" | "ariaHideApp" | "parentSelector" | keyof ModalOwnProps> & React__default.RefAttributes<HTMLDivElement>>;
2108
2118
  interface ModalStatic {
2109
2119
  Body: typeof ModalBody;
2110
2120
  Header: typeof ModalHeader;
@@ -2391,20 +2401,20 @@ interface SwitchProps {
2391
2401
  }
2392
2402
  declare const Switch: FC<SwitchProps>;
2393
2403
 
2394
- interface TableProps {
2404
+ interface TableProps<TRow extends object = Row> {
2395
2405
  /**
2396
2406
  * Columns for the table. See Column definition below for details.
2397
2407
  */
2398
- columns: Column[];
2408
+ columns: Column<TRow>[];
2399
2409
  /**
2400
2410
  * The data rows to be displayed
2401
2411
  */
2402
- rows: Row[];
2412
+ rows: TRow[];
2403
2413
  /**
2404
2414
  * Key that represents a unique value for a row. This is necessary in
2405
2415
  * order to supply React with a node key on each row.
2406
2416
  */
2407
- rowKey: string;
2417
+ rowKey: Extract<keyof TRow, string>;
2408
2418
  /**
2409
2419
  * Additional classes to add.
2410
2420
  */
@@ -2474,7 +2484,7 @@ interface TableProps {
2474
2484
  */
2475
2485
  truncateOverflow?: boolean;
2476
2486
  }
2477
- declare const Table: FC<TableProps>;
2487
+ declare const Table: <TRow extends object = Row>({ columns, rows, rowKey, align, className, emptyCellPlaceholder, hoverableRows, isBorderless, isCompact, hasStickyHeader, isLoading, isScrollable, isStriped, onSort, sortedColumn, useFixedTableLayout, truncateOverflow, }: TableProps<TRow>) => React__default.JSX.Element;
2478
2488
 
2479
2489
  type Theme = 'dark' | 'light' | 'system';
2480
2490
  type ThemeProviderProps = {
@@ -2719,7 +2729,7 @@ declare function generateResponsiveClasses(classRoot: string, value: ResponsiveP
2719
2729
 
2720
2730
  declare function getAutoCompleteValue(value: string | boolean): string;
2721
2731
 
2722
- declare const getColumnKeys: (columns: Column[]) => Key[];
2732
+ declare const getColumnKeys: <TRow extends object = Row>(columns: Column<TRow>[]) => Key[];
2723
2733
 
2724
2734
  declare function getDimensionStyles(dimension: CssDimensionAbbreviation, value?: DimensionSize | ResponsiveProp<DimensionSize> | string): {
2725
2735
  [key: string]: string;
@@ -2802,4 +2812,4 @@ declare const Z_INDEX_OPTIONS: ZIndexSize[];
2802
2812
  declare const Z_INDEX_VALUES: any;
2803
2813
  declare const BOX_SHADOW_OPTIONS: BoxShadowSize[];
2804
2814
 
2805
- export { Alert, type AlertProps, AspectRatio, BACKGROUND_COLOR_OPTIONS, BASE_COLOR_NAMES, BASE_COLOR_OPTIONS, BORDER_COLOR_OPTIONS, BORDER_RADIUS_OPTIONS, BORDER_SIZE_OPTIONS, BOX_SHADOW_OPTIONS, BREAKPOINTS, BREAKPOINT_OPTIONS, Badge, type BadgeColor, type BadgeHue, type BadgeProps, type BadgeRadius, type BadgeSemanticColor, type BadgeSize, type BadgeVariant, type BaseButtonProps, type BaseSpacing, type BorderRadiusSize, Box, type BoxProps, type Breakpoint, type BreakpointSizeWithBase, type BreakpointState, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, CardBaseComponent, type CardProps, type CardStatic, type CardWithStaticComponents, type Cell, Checkbox, CheckboxInput, type CheckboxInputProps, type CheckboxProps, type CheckboxSize, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, type CssAlignContentValue, type CssAlignItemsValue, type CssDimensionAbbreviation, type CssDimensionUnit, type CssDimensionValue, type CssDisplayValue, type CssFlexDirectionValue, type CssFlexValue, type CssJustifyContentValue, type CssOverflowValue, type CssSpacingAbbreviation, type CssTextAlignValue, type CssWhiteSpaceValue, type CssWordBreakValue, Details, DetailsBaseComponent, type DetailsProps, type DetailsStatic, DetailsSummary, type DetailsSummaryProps, type DetailsWithStaticComponents, type DimensionSize, Drawer, DrawerCloseButton, DrawerContent, DrawerHeader, type DrawerPlacementType, type DrawerProps, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EventWithColumnKey, type ExtendedToastOptions, FONT_COLOR_OPTIONS, FONT_FAMILY_OPTIONS, FONT_SIZE_OPTIONS, FONT_WEIGHT_OPTIONS, type FilterFunction, type FlexProperty, FormControl, type FormControlProps, FormLabel, type FormLabelProps, FormikCheckboxInput, type FormikCheckboxInputProps, FormikRadioGroup, type FormikRadioGroupProps, FormikSelectInput, FormikSelectInputInset, type FormikSelectInputInsetProps, FormikSelectInputNative, type FormikSelectInputNativeProps, type FormikSelectInputProps, FormikSwitch, type FormikSwitchProps, FormikTextInput, FormikTextInputInset, type FormikTextInputInsetProps, type FormikTextInputProps, FormikTextareaInput, FormikTextareaInputInset, type FormikTextareaInputInsetProps, type FormikTextareaInputProps, FormikTimePicker, type FormikTimePickerProps, FormikToggleGroup, FormikToggleGroupMulti, type FormikToggleGroupMultiProps, type FormikToggleGroupProps, HEADING_SIZE_OPTIONS, HEIGHT_OPTIONS, Heading, type HeadingProps, type HookWindowSize, type HoverableBoxProperties, ICON_NAMES, Icon, type IconProps, type InputRangeProps, LINE_HEIGHT_OPTIONS, Modal, ModalBaseComponent, type ModalProps, type ModalStatic, type ModalWithStaticComponents, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverPortal, PopoverTrigger, RadioGroup, type RadioGroupProps, RangeInput, ResponsiveContext, type ResponsiveContextShape, type ResponsiveProp, ResponsiveProvider, type ResponsiveProviderProps, type Row, SPACING_OPTIONS, SelectInput, SelectInputInset, type SelectInputInsetProps, type SelectInputInsetSize, SelectInputNative, type SelectInputNativeOption, type SelectInputNativeProps, type SelectInputNativeSize, type SelectInputOptions, type SelectInputProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, type SimulatedEventPayloadType, Spinner, type SpinnerProps, type StylesAndClasses, Switch, type SwitchProps, type SwitchSize, Table, type TableProps, TextInput, TextInputInset, type TextInputInsetProps, type TextInputInsetSize, type TextInputProps, type TextInputSize, type TextInputSizeType, TextareaInput, TextareaInputInset, type TextareaInputInsetProps, type TextareaInputInsetSize, type TextareaInputProps, type TextareaInputSize, type Theme, ThemeProvider, ThemeProviderContext, TimePicker, type TimePickerProps, type Toast, ToastContainer, type ToastContainerProps, type ToastOptions, type ToastPosition, type ToastType, Toggle, ToggleGroup, ToggleGroupItem, type ToggleVariant$1 as ToggleVariant, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, type UnknownPropertiesObjType, type UseOpenCloseProps, type UseOpenCloseState, type ValueFunction, type ValueOrFunction, WIDTH_OPTIONS, Z_INDEX_OPTIONS, Z_INDEX_VALUES, boxPropsKeys, createRectRef, cssShorthandToClasses, doesStringIncludeCssUnit, filter, generateBaseClasses, generateResponsiveClasses, getAutoCompleteValue, getColumnKeys, getDimensionClasses, getDimensionCss, getDimensionStyles, getElementType, getFlexClasses, getFlexCss, getFlexStyles, handleReactRouterClick, isFunction, isModifiedEvent, isValidSpacingValue, mergeRefs, parsePropertyValue, prefersReducedMotion, resolveValue, toast, useBreakpoint, useDrawer, useIsMobile, useIsomorphicLayoutEffect, useOpenClose, useSidebar, useTheme, useToasts, useWindowSize };
2815
+ export { Alert, type AlertProps, AspectRatio, type AsyncSelectInputProps, BACKGROUND_COLOR_OPTIONS, BASE_COLOR_NAMES, BASE_COLOR_OPTIONS, BORDER_COLOR_OPTIONS, BORDER_RADIUS_OPTIONS, BORDER_SIZE_OPTIONS, BOX_SHADOW_OPTIONS, BREAKPOINTS, BREAKPOINT_OPTIONS, Badge, type BadgeColor, type BadgeHue, type BadgeProps, type BadgeRadius, type BadgeSemanticColor, type BadgeSize, type BadgeVariant, type BaseButtonProps, type BaseSpacing, type BorderRadiusSize, Box, type BoxElement, type BoxOwnProps, type BoxProps, type BoxRef, type Breakpoint, type BreakpointSizeWithBase, type BreakpointState, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, CardBaseComponent, type CardProps, type CardStatic, type CardWithStaticComponents, type Cell, Checkbox, CheckboxInput, type CheckboxInputProps, type CheckboxProps, type CheckboxSize, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, type CssAlignContentValue, type CssAlignItemsValue, type CssDimensionAbbreviation, type CssDimensionUnit, type CssDimensionValue, type CssDisplayValue, type CssFlexDirectionValue, type CssFlexValue, type CssJustifyContentValue, type CssOverflowValue, type CssSpacingAbbreviation, type CssTextAlignValue, type CssWhiteSpaceValue, type CssWordBreakValue, Details, DetailsBaseComponent, type DetailsProps, type DetailsStatic, DetailsSummary, type DetailsSummaryProps, type DetailsWithStaticComponents, type DimensionSize, Drawer, DrawerCloseButton, DrawerContent, DrawerHeader, type DrawerPlacementType, type DrawerProps, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EventWithColumnKey, type ExtendedToastOptions, FONT_COLOR_OPTIONS, FONT_FAMILY_OPTIONS, FONT_SIZE_OPTIONS, FONT_WEIGHT_OPTIONS, type FilterFunction, type FlexProperty, FormControl, type FormControlProps, FormLabel, type FormLabelProps, FormikCheckboxInput, type FormikCheckboxInputProps, FormikRadioGroup, type FormikRadioGroupProps, FormikSelectInput, FormikSelectInputInset, type FormikSelectInputInsetProps, FormikSelectInputNative, type FormikSelectInputNativeProps, type FormikSelectInputProps, FormikSwitch, type FormikSwitchProps, FormikTextInput, FormikTextInputInset, type FormikTextInputInsetProps, type FormikTextInputProps, FormikTextareaInput, FormikTextareaInputInset, type FormikTextareaInputInsetProps, type FormikTextareaInputProps, FormikTimePicker, type FormikTimePickerProps, FormikToggleGroup, FormikToggleGroupMulti, type FormikToggleGroupMultiProps, type FormikToggleGroupProps, HEADING_SIZE_OPTIONS, HEIGHT_OPTIONS, Heading, type HeadingProps, type HookWindowSize, type HoverableBoxProperties, ICON_NAMES, Icon, type IconProps, type InputRangeProps, LINE_HEIGHT_OPTIONS, Modal, ModalBaseComponent, type ModalProps, type ModalStatic, type ModalWithStaticComponents, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverPortal, PopoverTrigger, RadioGroup, type RadioGroupProps, RangeInput, ResponsiveContext, type ResponsiveContextShape, type ResponsiveProp, ResponsiveProvider, type ResponsiveProviderProps, type Row, SPACING_OPTIONS, SelectInput, SelectInputInset, type SelectInputInsetProps, type SelectInputInsetSize, SelectInputNative, type SelectInputNativeOption, type SelectInputNativeProps, type SelectInputNativeSize, type SelectInputOptions, type SelectInputProps, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarTrigger, type SimulatedEventPayloadType, Spinner, type SpinnerProps, type StylesAndClasses, Switch, type SwitchProps, type SwitchSize, type SyncSelectInputProps, Table, type TableProps, TextInput, TextInputInset, type TextInputInsetProps, type TextInputInsetSize, type TextInputProps, type TextInputSize, type TextInputSizeType, TextareaInput, TextareaInputInset, type TextareaInputInsetProps, type TextareaInputInsetSize, type TextareaInputProps, type TextareaInputSize, type Theme, ThemeProvider, ThemeProviderContext, TimePicker, type TimePickerProps, type Toast, ToastContainer, type ToastContainerProps, type ToastOptions, type ToastPosition, type ToastType, Toggle, ToggleGroup, ToggleGroupItem, type ToggleVariant$1 as ToggleVariant, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, type UnknownPropertiesObjType, type UseOpenCloseProps, type UseOpenCloseState, type ValueFunction, type ValueOrFunction, WIDTH_OPTIONS, Z_INDEX_OPTIONS, Z_INDEX_VALUES, boxPropsKeys, createRectRef, cssShorthandToClasses, doesStringIncludeCssUnit, filter, generateBaseClasses, generateResponsiveClasses, getAutoCompleteValue, getColumnKeys, getDimensionClasses, getDimensionCss, getDimensionStyles, getElementType, getFlexClasses, getFlexCss, getFlexStyles, handleReactRouterClick, isFunction, isModifiedEvent, isValidSpacingValue, mergeRefs, parsePropertyValue, prefersReducedMotion, resolveValue, toast, useBreakpoint, useDrawer, useIsMobile, useIsomorphicLayoutEffect, useOpenClose, useSidebar, useTheme, useToasts, useWindowSize };