@mackin.com/styleguide 7.0.5 → 7.1.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 (3) hide show
  1. package/index.d.ts +54 -113
  2. package/index.js +328 -351
  3. package/package.json +1 -2
package/index.d.ts CHANGED
@@ -1,16 +1,14 @@
1
1
  /// <reference types="react" />
2
- import { jsx } from '@emotion/react';
3
2
  import * as React from 'react';
4
- import React__default from 'react';
3
+ import React__default, { ReactNode } from 'react';
5
4
  import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
6
5
 
7
6
  declare type Alignment = 'left' | 'right' | 'center';
8
7
 
8
+ /** @deprecated This will not work correctly with emotion/css. Use 'cx' for adding multiple class names together. */
9
9
  declare const mergeClassNames: (...classes: (string | boolean | undefined)[]) => string | undefined;
10
10
  declare const getCurrencyDisplay: (value: number, isCents?: boolean | undefined, denomination?: string) => string;
11
11
 
12
- /** @jsx jsx */
13
-
14
12
  declare const Table: (props: {
15
13
  caption?: string | JSX.Element;
16
14
  children?: any;
@@ -18,24 +16,24 @@ declare const Table: (props: {
18
16
  className?: string;
19
17
  /** Colors alternate rows. */
20
18
  altRows?: boolean;
21
- }) => jsx.JSX.Element;
19
+ }) => JSX.Element;
22
20
  declare const Tr: (props: {
23
21
  className?: string;
24
22
  children?: any;
25
- }) => jsx.JSX.Element;
23
+ }) => JSX.Element;
26
24
  declare const Th: (props: {
27
25
  children?: any;
28
26
  align?: Alignment;
29
27
  width?: string;
30
28
  style?: React.CSSProperties;
31
29
  className?: string;
32
- }) => jsx.JSX.Element;
30
+ }) => JSX.Element;
33
31
  declare const Td: (props: {
34
32
  children?: any;
35
33
  align?: Alignment;
36
34
  style?: React.CSSProperties;
37
35
  colSpan?: number;
38
- }) => jsx.JSX.Element;
36
+ }) => JSX.Element;
39
37
 
40
38
  declare const TdCurrency: (props: {
41
39
  value: number;
@@ -46,8 +44,6 @@ declare const TdNumber: (props: {
46
44
  value: number;
47
45
  }) => JSX.Element;
48
46
 
49
- /** @jsx jsx */
50
-
51
47
  declare const ThSort: (props: {
52
48
  text: string | JSX.Element;
53
49
  onClick: () => void;
@@ -56,7 +52,7 @@ declare const ThSort: (props: {
56
52
  style?: React.CSSProperties;
57
53
  width?: string;
58
54
  rightContent?: JSX.Element;
59
- }) => jsx.JSX.Element;
55
+ }) => JSX.Element;
60
56
 
61
57
  declare type SortDirection = 'asc' | 'desc';
62
58
  interface PagerSortOption<TItem> {
@@ -130,8 +126,6 @@ declare class ItemPager<TItem> {
130
126
  private createPageResult;
131
127
  }
132
128
 
133
- /** @jsx jsx */
134
-
135
129
  interface PagerStyleProps {
136
130
  /** Used for localizations. Defaults to 'of' */
137
131
  itemDividerText?: string;
@@ -156,9 +150,9 @@ interface PagerProps extends PagerStyleProps {
156
150
  /** For display purposes. Will show under items text if this if present. */
157
151
  totalPages?: number;
158
152
  }
159
- declare const Pager: (props: PagerProps) => jsx.JSX.Element;
153
+ declare const Pager: (props: PagerProps) => JSX.Element;
160
154
 
161
- interface Props$2<T> extends PagerStyleProps {
155
+ interface Props$1<T> extends PagerStyleProps {
162
156
  pager: ItemPager<T>;
163
157
  onPage: (direction: 1 | -1) => void;
164
158
  /** Defaults to 'Limit' */
@@ -170,10 +164,8 @@ interface Props$2<T> extends PagerStyleProps {
170
164
  /** Shows 'Page X of Y'. */
171
165
  showPageText?: boolean;
172
166
  }
173
- declare const BoundMemoryPager: <T>(p: Props$2<T>) => JSX.Element;
167
+ declare const BoundMemoryPager: <T>(p: Props$1<T>) => JSX.Element;
174
168
 
175
- /** @jsx jsx */
176
-
177
169
  declare type ButtonVariant = 'label' | 'circle' | 'icon' | 'link' | 'inlineLink' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
178
170
  interface ButtonProps {
179
171
  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -208,10 +200,8 @@ interface ButtonProps {
208
200
  tabIndex?: number;
209
201
  id?: string;
210
202
  }
211
- declare const Button: (props: ButtonProps) => jsx.JSX.Element;
203
+ declare const Button: (props: ButtonProps) => JSX.Element;
212
204
 
213
- /** @jsx jsx */
214
-
215
205
  interface CheckboxProps {
216
206
  checked: boolean;
217
207
  onChange: (checked: boolean) => void;
@@ -227,10 +217,8 @@ interface CheckboxProps {
227
217
  /** Background color when checked. Mutually exclusive with 'checkedThemeColor'. */
228
218
  checkedColor?: string;
229
219
  }
230
- declare const Checkbox: (props: CheckboxProps) => jsx.JSX.Element;
220
+ declare const Checkbox: (props: CheckboxProps) => JSX.Element;
231
221
 
232
- /** @jsx jsx */
233
-
234
222
  interface ConfirmModalProps {
235
223
  show: boolean;
236
224
  text: string;
@@ -244,45 +232,37 @@ interface ConfirmModalProps {
244
232
  id?: string;
245
233
  debug?: boolean;
246
234
  }
247
- declare const ConfirmModal: (props: ConfirmModalProps) => jsx.JSX.Element;
235
+ declare const ConfirmModal: (props: ConfirmModalProps) => JSX.Element;
248
236
 
249
- /** @jsx jsx */
250
-
251
- declare const Divider: (props: {}) => jsx.JSX.Element;
237
+ declare const Divider: () => JSX.Element;
252
238
 
253
- /** @jsx jsx */
254
-
255
239
  declare const ErrorModal: (props: {
256
240
  message: string;
257
241
  show: boolean;
258
242
  id?: string;
259
243
  debug?: boolean;
260
244
  close: () => void;
261
- }) => jsx.JSX.Element;
245
+ }) => JSX.Element;
262
246
 
263
- /** @jsx jsx */
264
-
265
- declare type FormProps = Omit<React.ClassAttributes<HTMLFormElement> & React.FormHTMLAttributes<HTMLFormElement>, 'css'>;
247
+ declare type FormProps = React.ClassAttributes<HTMLFormElement> & React.FormHTMLAttributes<HTMLFormElement>;
266
248
  interface IProps extends FormProps {
267
249
  inline?: boolean;
268
250
  }
269
251
  /** Use this instead of <form> directly. If we need to fight Chrome's autofill, we can do so at a global level. */
270
- declare const Form: React.ForwardRefExoticComponent<Pick<IProps, "key" | "acceptCharset" | "action" | "autoComplete" | "encType" | "method" | "name" | "noValidate" | "target" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "inline"> & React.RefAttributes<any>>;
252
+ declare const Form: React.ForwardRefExoticComponent<Pick<IProps, "inline" | "key" | "acceptCharset" | "action" | "autoComplete" | "encType" | "method" | "name" | "noValidate" | "target" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<any>>;
271
253
  declare const FormFlexRow: (props: {
272
254
  children: React.ReactNode;
273
255
  className?: string;
274
256
  style?: React.CSSProperties;
275
257
  justifyContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start";
276
- }) => jsx.JSX.Element;
258
+ }) => JSX.Element;
277
259
  declare const FormColumnRow: (props: {
278
260
  children: React.ReactNode;
279
261
  cols: number;
280
262
  className?: string;
281
263
  style?: React.CSSProperties;
282
- }) => jsx.JSX.Element;
264
+ }) => JSX.Element;
283
265
 
284
- /** @jsx jsx */
285
-
286
266
  declare const Header: (props: {
287
267
  title?: string | JSX.Element;
288
268
  toggleMenu?: () => void | undefined;
@@ -295,14 +275,12 @@ declare const Header: (props: {
295
275
  noMenu?: boolean;
296
276
  /** Will fill the title center aligned with wrapping. */
297
277
  fillTitle?: boolean;
298
- }) => jsx.JSX.Element;
278
+ }) => JSX.Element;
299
279
 
300
- /** @jsx jsx */
301
-
302
280
  declare const Highlight: (props: {
303
281
  text: string;
304
282
  highlightText: string;
305
- }) => jsx.JSX.Element;
283
+ }) => JSX.Element;
306
284
 
307
285
  declare const ICONS: {
308
286
  [key: string]: IconDefinition;
@@ -315,26 +293,20 @@ declare const Icon: (props: {
315
293
  onClick?: ((e: React.MouseEvent<SVGSVGElement | HTMLElement, MouseEvent>) => void) | undefined;
316
294
  }) => JSX.Element;
317
295
 
318
- /** @jsx jsx */
319
-
320
296
  declare const Image: (props: {
321
297
  src: string;
322
298
  alt: string;
323
299
  className?: string;
324
300
  style?: React.CSSProperties;
325
- }) => jsx.JSX.Element;
301
+ }) => JSX.Element;
326
302
 
327
- /** @jsx jsx */
328
-
329
303
  declare const InfoPanel: (props: {
330
304
  children: React.ReactNode;
331
305
  variant?: 'info' | 'warning' | 'error' | 'negative' | 'positive';
332
306
  className?: string;
333
307
  style?: React.CSSProperties;
334
- }) => jsx.JSX.Element;
308
+ }) => JSX.Element;
335
309
 
336
- /** @jsx jsx */
337
-
338
310
  interface InfoTipProps {
339
311
  content?: string | JSX.Element;
340
312
  disabled?: boolean;
@@ -352,10 +324,8 @@ interface InfoTipProps {
352
324
  modalId?: string;
353
325
  modalDebug?: boolean;
354
326
  }
355
- declare const InfoTip: (props: InfoTipProps) => jsx.JSX.Element;
327
+ declare const InfoTip: (props: InfoTipProps) => JSX.Element;
356
328
 
357
- /** @jsx jsx */
358
-
359
329
  declare type InputValue = string | number | undefined;
360
330
  declare type InputType = 'text' | 'number' | 'textarea' | 'date' | 'password' | 'url' | 'email';
361
331
  interface InputProps {
@@ -395,8 +365,6 @@ interface InputProps {
395
365
  }
396
366
  declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<any>>;
397
367
 
398
- /** @jsx jsx */
399
-
400
368
  interface LabelProps {
401
369
  text: string | JSX.Element;
402
370
  children: React.ReactNode;
@@ -416,27 +384,23 @@ interface LabelProps {
416
384
  /** Used with static. Will put label text in the same position it would be if there was an input around it. For lining up forms. */
417
385
  controlAlign?: boolean;
418
386
  }
419
- declare const Label: (props: LabelProps) => jsx.JSX.Element;
387
+ declare const Label: (props: LabelProps) => JSX.Element;
420
388
 
421
- /** @jsx jsx */
422
-
423
389
  declare const List: (props: {
424
390
  children?: any;
425
391
  altRowColor?: boolean;
426
392
  noLines?: boolean;
427
393
  className?: string;
428
394
  items?: (string | JSX.Element)[];
429
- }) => jsx.JSX.Element;
395
+ }) => JSX.Element;
430
396
  declare const ListItem: (props: {
431
397
  children?: any;
432
398
  id?: string | number;
433
399
  /** For variant 'full', the content will take up the entire space of the parent (no padding applied by this component). */
434
400
  variant?: 'full';
435
401
  className?: string;
436
- }) => jsx.JSX.Element;
402
+ }) => JSX.Element;
437
403
 
438
- /** @jsx jsx */
439
-
440
404
  interface ModalProps {
441
405
  show: boolean;
442
406
  children: React__default.ReactNode;
@@ -457,18 +421,14 @@ interface ModalProps {
457
421
  }
458
422
  declare const Modal: (p: ModalProps) => React__default.ReactPortal | null;
459
423
 
460
- /** @jsx jsx */
461
-
462
424
  declare const Nav: (props: {
463
425
  show: boolean;
464
426
  toggle: (show: boolean) => void;
465
427
  children?: React.ReactNode;
466
428
  responsive?: boolean | undefined;
467
429
  className?: string | undefined;
468
- }) => jsx.JSX.Element;
430
+ }) => JSX.Element;
469
431
 
470
- /** @jsx jsx */
471
-
472
432
  interface OmniLinkProps {
473
433
  href: string;
474
434
  children: React.ReactNode;
@@ -494,10 +454,8 @@ interface OmniLinkProps {
494
454
  /** Overrides the default color (theme.colors.link) for non-button variants. To be used under exceptional circumstances. To change all link colors, override theme.colors.link directly. */
495
455
  colorOverride?: string;
496
456
  }
497
- declare const OmniLink: (props: OmniLinkProps) => jsx.JSX.Element;
457
+ declare const OmniLink: (props: OmniLinkProps) => JSX.Element;
498
458
 
499
- /** @jsx jsx */
500
-
501
459
  declare type PickerValue = string | number;
502
460
  interface PickerProps<T extends PickerValue> {
503
461
  type: 'select';
@@ -513,10 +471,8 @@ interface PickerProps<T extends PickerValue> {
513
471
  className?: string;
514
472
  readonly?: boolean;
515
473
  }
516
- declare const Picker: <T extends PickerValue>(props: PickerProps<T>) => jsx.JSX.Element | null;
474
+ declare const Picker: <T extends PickerValue>(props: PickerProps<T>) => JSX.Element | null;
517
475
 
518
- /** @jsx jsx */
519
-
520
476
  interface ProgressBarProps {
521
477
  pct: number;
522
478
  round?: boolean;
@@ -528,10 +484,8 @@ declare const ProgressBar: (props: {
528
484
  round?: boolean;
529
485
  showPct?: boolean;
530
486
  className?: string;
531
- }) => jsx.JSX.Element;
487
+ }) => JSX.Element;
532
488
 
533
- /** @jsx jsx */
534
-
535
489
  interface SearchBoxProps {
536
490
  value: string | undefined;
537
491
  onChange: (value: string | undefined | number) => void;
@@ -544,7 +498,7 @@ interface SearchBoxProps {
544
498
  /** Defaults to 250ms */
545
499
  debounceMs?: number;
546
500
  }
547
- declare const SearchBox: (props: SearchBoxProps) => jsx.JSX.Element;
501
+ declare const SearchBox: (props: SearchBoxProps) => JSX.Element;
548
502
 
549
503
  interface TextProps {
550
504
  children: any;
@@ -567,7 +521,7 @@ interface TextProps {
567
521
  }
568
522
  declare const Text: (props: TextProps) => React.DetailedReactHTMLElement<{
569
523
  style: React.CSSProperties;
570
- className: string | undefined;
524
+ className: string;
571
525
  }, HTMLElement>;
572
526
 
573
527
  declare type ToggleButtonVariant = 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
@@ -590,8 +544,6 @@ interface ToggleButtonProps {
590
544
  }
591
545
  declare const ToggleButton: (props: ToggleButtonProps) => JSX.Element;
592
546
 
593
- /** @jsx jsx */
594
-
595
547
  interface ToggleButtonGroupProps {
596
548
  value: string | number;
597
549
  options: {
@@ -609,19 +561,15 @@ interface ToggleButtonGroupProps {
609
561
  small?: boolean;
610
562
  width?: string;
611
563
  }
612
- declare const ToggleButtonGroup: (props: ToggleButtonGroupProps) => jsx.JSX.Element;
564
+ declare const ToggleButtonGroup: (props: ToggleButtonGroupProps) => JSX.Element;
613
565
 
614
- /** @jsx jsx */
615
-
616
566
  declare const WaitingIndicator: (p: {
617
567
  show: boolean;
618
568
  minShowTimeMs?: number;
619
569
  id?: string;
620
570
  debug?: boolean;
621
- }) => jsx.JSX.Element;
571
+ }) => JSX.Element;
622
572
 
623
- /** @jsx jsx */
624
-
625
573
  interface CalendarProps {
626
574
  month: number;
627
575
  year: number;
@@ -649,10 +597,8 @@ interface CalendarProps {
649
597
  /** This is the ms from Date.valueOf(). */
650
598
  max?: number;
651
599
  }
652
- declare const Calendar: (p: CalendarProps) => jsx.JSX.Element;
600
+ declare const Calendar: (p: CalendarProps) => JSX.Element;
653
601
 
654
- /** @jsx jsx */
655
-
656
602
  interface DatePickerProps {
657
603
  value: number | undefined;
658
604
  /** Called with debounce when the input changes. */
@@ -677,10 +623,8 @@ interface DatePickerProps {
677
623
  /** Whether to move the popover on collision with the parent's bounds. Default is true. */
678
624
  reposition?: boolean;
679
625
  }
680
- declare const DatePicker: (p: DatePickerProps) => jsx.JSX.Element;
626
+ declare const DatePicker: (p: DatePickerProps) => JSX.Element;
681
627
 
682
- /** @jsx jsx */
683
-
684
628
  interface TabHeaderTabProps {
685
629
  name: string;
686
630
  }
@@ -694,11 +638,9 @@ interface TabHeaderProps {
694
638
  /** Defaults to 'tab'. */
695
639
  variant?: 'tab' | 'button';
696
640
  }
697
- declare const TabHeader: (p: TabHeaderProps) => jsx.JSX.Element;
641
+ declare const TabHeader: (p: TabHeaderProps) => JSX.Element;
698
642
 
699
- interface Props$1 {
700
- }
701
- declare const GlobalStyles: (p: Props$1) => JSX.Element;
643
+ declare const GlobalStyles: () => null;
702
644
 
703
645
  interface MackinTheme {
704
646
  colors: {
@@ -793,14 +735,17 @@ declare const defaultTheme: MackinTheme;
793
735
  /** Returns a user-provided theme if ThemeProvider was used correctly, or the default theme. */
794
736
  declare const useThemeSafely: () => MackinTheme;
795
737
 
738
+ declare const ThemeProvider: <T extends MackinTheme>(p: {
739
+ children?: ReactNode;
740
+ theme: T;
741
+ }) => JSX.Element;
742
+
796
743
  declare const TabLocker: (props: {
797
744
  disabled?: boolean;
798
745
  children?: React.ReactNode;
799
746
  style?: React.CSSProperties;
800
747
  }) => JSX.Element;
801
748
 
802
- /** @jsx jsx */
803
-
804
749
  interface FileUploaderProps {
805
750
  onUpload: (files: FileList) => Promise<void>;
806
751
  /** Defaults to 'Upload'. */
@@ -816,8 +761,12 @@ interface FileUploaderProps {
816
761
  maxBytes?: number;
817
762
  multiple?: boolean;
818
763
  accept?: string;
764
+ /** Defaults to 'Click or drag and drop files.'*/
765
+ instructionMessage?: string;
766
+ /** For additional info below the instructionMessage. */
767
+ infoMessage?: string | JSX.Element;
819
768
  }
820
- declare const FileUploader: (p: FileUploaderProps) => jsx.JSX.Element;
769
+ declare const FileUploader: (p: FileUploaderProps) => JSX.Element;
821
770
 
822
771
  interface CopyButtonProps {
823
772
  /** HTML selector of the target input to copy from. */
@@ -826,8 +775,6 @@ interface CopyButtonProps {
826
775
  }
827
776
  declare const CopyButton: (props: CopyButtonProps) => JSX.Element;
828
777
 
829
- /** @jsx jsx */
830
-
831
778
  interface PopoverProps {
832
779
  isOpen: boolean;
833
780
  /** The content inside the popover. */
@@ -847,7 +794,7 @@ interface PopoverProps {
847
794
  /** Order of positions as the Popover colides with the window edge. */
848
795
  positions?: ("bottom" | "left" | "right" | "top")[] | undefined;
849
796
  }
850
- declare const Popover: (p: PopoverProps) => jsx.JSX.Element;
797
+ declare const Popover: (p: PopoverProps) => JSX.Element;
851
798
 
852
799
  interface TogglePasswordInputProps extends Omit<InputProps, 'type' | 'rightControl'> {
853
800
  }
@@ -909,8 +856,6 @@ interface Props<T> extends PagerStyleProps {
909
856
  }
910
857
  declare const BoundStaticPager: <T>(p: Props<T>) => JSX.Element;
911
858
 
912
- /** @jsx jsx */
913
-
914
859
  declare type SliderValue = number | [number, number];
915
860
  interface SliderProps<T extends SliderValue> {
916
861
  min: number;
@@ -928,10 +873,8 @@ interface SliderProps<T extends SliderValue> {
928
873
  /** Used with renderValue for the custom element width. Defaults to theme.controls.height * 2. */
929
874
  renderValueWidth?: string;
930
875
  }
931
- declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => jsx.JSX.Element;
876
+ declare const Slider: <T extends SliderValue>(p: SliderProps<T>) => JSX.Element;
932
877
 
933
- /** @jsx jsx */
934
-
935
878
  /** @deprecated Use Backdrop2 going forward. */
936
879
  declare const Backdrop$1: (props: {
937
880
  show: boolean;
@@ -947,17 +890,15 @@ declare const Backdrop$1: (props: {
947
890
  allowScroll?: boolean;
948
891
  /** Fade in time. Defaults to 250ms. */
949
892
  showTimeMs?: number;
950
- }) => jsx.JSX.Element;
893
+ }) => JSX.Element;
951
894
 
952
- /** @jsx jsx */
953
-
954
895
  declare const Backdrop: (p: {
955
896
  children: React__default.ReactNode;
956
897
  /** Fade in time. Defaults to 250ms. */
957
898
  showTimeMs?: number;
958
899
  debug?: boolean;
959
- }) => jsx.JSX.Element;
900
+ }) => JSX.Element;
960
901
 
961
902
  declare const useMediaQuery: (query: string) => boolean;
962
903
 
963
- export { Alignment, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, MackinTheme, Modal, Nav, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextProps, Th, ThSort, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };
904
+ export { Alignment, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, MackinTheme, Modal, Nav, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };