@primer/components 0.0.0-202192675438 → 0.0.0-202192701132

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 (38) hide show
  1. package/CHANGELOG.md +4 -14
  2. package/dist/browser.esm.js +21 -21
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +1 -1
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.d.ts +0 -6
  7. package/lib/ActionList/Item.js +1 -5
  8. package/lib/Autocomplete/Autocomplete.d.ts +1 -1
  9. package/lib/Autocomplete/AutocompleteInput.d.ts +1 -1
  10. package/lib/Button/ButtonClose.d.ts +1 -1
  11. package/lib/CircleOcticon.d.ts +1 -1
  12. package/lib/Dialog.d.ts +1 -1
  13. package/lib/Dropdown.d.ts +4 -4
  14. package/lib/DropdownMenu/DropdownButton.d.ts +1 -1
  15. package/lib/FilterList.d.ts +1 -1
  16. package/lib/SelectMenu/SelectMenu.d.ts +5 -5
  17. package/lib/TextInputWithTokens.d.ts +1 -1
  18. package/lib/Timeline.d.ts +1 -1
  19. package/lib/sx.d.ts +8 -2
  20. package/lib/theme.d.ts +4 -0
  21. package/lib/theme.js +96 -1
  22. package/lib-esm/ActionList/Item.d.ts +0 -6
  23. package/lib-esm/ActionList/Item.js +1 -5
  24. package/lib-esm/Autocomplete/Autocomplete.d.ts +1 -1
  25. package/lib-esm/Autocomplete/AutocompleteInput.d.ts +1 -1
  26. package/lib-esm/Button/ButtonClose.d.ts +1 -1
  27. package/lib-esm/CircleOcticon.d.ts +1 -1
  28. package/lib-esm/Dialog.d.ts +1 -1
  29. package/lib-esm/Dropdown.d.ts +4 -4
  30. package/lib-esm/DropdownMenu/DropdownButton.d.ts +1 -1
  31. package/lib-esm/FilterList.d.ts +1 -1
  32. package/lib-esm/SelectMenu/SelectMenu.d.ts +5 -5
  33. package/lib-esm/TextInputWithTokens.d.ts +1 -1
  34. package/lib-esm/Timeline.d.ts +1 -1
  35. package/lib-esm/sx.d.ts +8 -2
  36. package/lib-esm/theme.d.ts +4 -0
  37. package/lib-esm/theme.js +95 -1
  38. package/package.json +1 -2
package/lib/ActionList/Item.d.ts CHANGED
@@ -28,19 +28,13 @@ export interface ItemProps extends SxProp {
28
28
  */
29
29
  leadingVisual?: React.FunctionComponent<IconProps>;
30
30
  /**
31
- * @deprecated Use `trailingVisual` instead
32
31
  * Icon (or similar) positioned after `Item` text.
33
32
  */
34
33
  trailingIcon?: React.FunctionComponent<IconProps>;
35
34
  /**
36
- * @deprecated Use `trailingVisual` instead
37
35
  * Text positioned after `Item` text and optional trailing icon.
38
36
  */
39
37
  trailingText?: string;
40
- /**
41
- * Icon or text positioned after `Item` text.
42
- */
43
- trailingVisual?: React.ReactNode;
44
38
  /**
45
39
  * Style variations associated with various `Item` types.
46
40
  *
package/lib/ActionList/Item.js CHANGED
@@ -187,7 +187,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
187
187
  selectionVariant,
188
188
  leadingVisual: LeadingVisual,
189
189
  trailingIcon: TrailingIcon,
190
- trailingVisual: TrailingVisual,
191
190
  trailingText,
192
191
  variant = 'default',
193
192
  showDivider,
@@ -279,10 +278,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
279
278
  title: description,
280
279
  inline: true,
281
280
  maxWidth: "100%"
282
- }, description)) : null), TrailingVisual ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
283
- variant: variant,
284
- disabled: disabled
285
- }, typeof TrailingVisual === 'function' ? /*#__PURE__*/_react.default.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
281
+ }, description)) : null), TrailingIcon || trailingText ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
286
282
  variant: variant,
287
283
  disabled: disabled
288
284
  }, trailingText, TrailingIcon && /*#__PURE__*/_react.default.createElement(TrailingIcon, null)) : null));
package/lib/Autocomplete/Autocomplete.d.ts CHANGED
@@ -288,7 +288,7 @@ declare const _default: React.FC<{
288
288
  onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
289
289
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
290
290
  block?: boolean | undefined;
291
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
291
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
292
292
  disabled?: boolean | undefined;
293
293
  variant?: "large" | "small" | undefined;
294
294
  hasIcon?: boolean | undefined;
package/lib/Autocomplete/AutocompleteInput.d.ts CHANGED
@@ -280,7 +280,7 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
280
280
  onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
281
281
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
282
282
  block?: boolean | undefined;
283
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
283
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
284
284
  disabled?: boolean | undefined;
285
285
  variant?: "large" | "small" | undefined;
286
286
  hasIcon?: boolean | undefined;
package/lib/Button/ButtonClose.d.ts CHANGED
@@ -306,7 +306,7 @@ declare const ButtonClose: React.ForwardRefExoticComponent<Pick<{
306
306
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
307
307
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
308
308
  size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
309
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
309
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
310
310
  autoFocus?: boolean | undefined;
311
311
  disabled?: boolean | undefined;
312
312
  formAction?: string | undefined;
package/lib/CircleOcticon.d.ts CHANGED
@@ -384,7 +384,7 @@ declare namespace CircleOcticon {
384
384
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
385
385
  borderX?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
386
386
  borderY?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
387
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
387
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
388
388
  theme?: any;
389
389
  };
390
390
  }
package/lib/Dialog.d.ts CHANGED
@@ -387,7 +387,7 @@ declare namespace DialogHeader {
387
387
  size?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
388
388
  borderX?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
389
389
  borderY?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
390
- sx?: React.Validator<import("@styled-system/css").SystemStyleObject | undefined> | undefined;
390
+ sx?: React.Validator<import("./sx").BetterSystemStyleObject | undefined> | undefined;
391
391
  theme?: React.Validator<any> | undefined;
392
392
  };
393
393
  var displayName: string;
package/lib/Dropdown.d.ts CHANGED
@@ -307,7 +307,7 @@ declare const _default: {
307
307
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
308
308
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
309
309
  open?: boolean | undefined;
310
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
310
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
311
311
  onToggle?: React.ReactEventHandler<HTMLElement> | undefined;
312
312
  } & {
313
313
  theme?: any;
@@ -604,7 +604,7 @@ declare const _default: {
604
604
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
605
605
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
606
606
  open?: boolean | undefined;
607
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
607
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
608
608
  onToggle?: React.ReactEventHandler<HTMLElement> | undefined;
609
609
  } & {
610
610
  theme?: any;
@@ -923,7 +923,7 @@ declare const _default: {
923
923
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
924
924
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
925
925
  size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
926
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
926
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
927
927
  autoFocus?: boolean | undefined;
928
928
  disabled?: boolean | undefined;
929
929
  formAction?: string | undefined;
@@ -1243,7 +1243,7 @@ declare const _default: {
1243
1243
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1244
1244
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1245
1245
  size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1246
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
1246
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
1247
1247
  autoFocus?: boolean | undefined;
1248
1248
  disabled?: boolean | undefined;
1249
1249
  formAction?: string | undefined;
package/lib/DropdownMenu/DropdownButton.d.ts CHANGED
@@ -308,7 +308,7 @@ export declare const DropdownButton: React.ForwardRefExoticComponent<Pick<React.
308
308
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
309
309
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
310
310
  size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
311
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
311
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
312
312
  autoFocus?: boolean | undefined;
313
313
  disabled?: boolean | undefined;
314
314
  formAction?: string | undefined;
package/lib/FilterList.d.ts CHANGED
@@ -307,7 +307,7 @@ declare const _default: {
307
307
  paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
308
308
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
309
309
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
310
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
310
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
311
311
  } & {
312
312
  theme?: any;
313
313
  }>): JSX.Element;
package/lib/SelectMenu/SelectMenu.d.ts CHANGED
@@ -308,7 +308,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
308
308
  onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
309
309
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
310
310
  block?: boolean | undefined;
311
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
311
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
312
312
  disabled?: boolean | undefined;
313
313
  variant?: "large" | "small" | undefined;
314
314
  hasIcon?: boolean | undefined;
@@ -612,7 +612,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
612
612
  paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
613
613
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
614
614
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
615
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
615
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
616
616
  media?: string | undefined;
617
617
  target?: string | undefined;
618
618
  href?: string | undefined;
@@ -917,7 +917,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
917
917
  paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
918
918
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
919
919
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
920
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
920
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
921
921
  align?: "left" | "right" | undefined;
922
922
  } & {
923
923
  theme?: any;
@@ -1214,7 +1214,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
1214
1214
  paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1215
1215
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1216
1216
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1217
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
1217
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
1218
1218
  } & {
1219
1219
  theme?: any;
1220
1220
  }): JSX.Element;
@@ -1528,7 +1528,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
1528
1528
  paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1529
1529
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1530
1530
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1531
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
1531
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
1532
1532
  } & {
1533
1533
  theme?: any;
1534
1534
  }): JSX.Element;
package/lib/TextInputWithTokens.d.ts CHANGED
@@ -308,7 +308,7 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
308
308
  onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
309
309
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
310
310
  block?: boolean | undefined;
311
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
311
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
312
312
  disabled?: boolean | undefined;
313
313
  variant?: "large" | "small" | undefined;
314
314
  hasIcon?: boolean | undefined;
package/lib/Timeline.d.ts CHANGED
@@ -395,7 +395,7 @@ declare const _default: string & import("styled-components").StyledComponentBase
395
395
  size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
396
396
  borderX?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
397
397
  borderY?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
398
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
398
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
399
399
  } & {
400
400
  theme?: any;
401
401
  }): JSX.Element;
package/lib/sx.d.ts CHANGED
@@ -1,6 +1,12 @@
1
- import { SystemStyleObject } from '@styled-system/css';
1
+ import { SystemCssProperties, SystemStyleObject } from '@styled-system/css';
2
+ import { ThemeColorPaths, ThemeShadowPaths } from './theme';
3
+ import { ColorProps, ShadowProps } from 'styled-system';
4
+ export declare type BetterCssProperties = {
5
+ [K in keyof SystemCssProperties]: K extends keyof ColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof ShadowProps ? ThemeShadowPaths | SystemCssProperties[K] : SystemCssProperties[K];
6
+ };
7
+ export declare type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject;
2
8
  export interface SxProp {
3
- sx?: SystemStyleObject;
9
+ sx?: BetterSystemStyleObject;
4
10
  }
5
11
  declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
6
12
  export default sx;
package/lib/theme.d.ts CHANGED
@@ -1,2 +1,6 @@
1
1
  import { theme } from './theme-preval';
2
2
  export default theme;
3
+ export interface Theme {
4
+ }
5
+ export declare type ThemeColorPaths = 'fg.default' | 'fg.muted' | 'fg.subtle' | 'fg.onEmphasis' | 'canvas.default' | 'canvas.overlay' | 'canvas.inset' | 'canvas.subtle' | 'border.default' | 'border.muted' | 'border.subtle' | 'neutral.emphasisPlus' | 'neutral.emphasis' | 'neutral.muted' | 'neutral.subtle' | 'accent.fg' | 'accent.emphasis' | 'accent.muted' | 'accent.subtle' | 'success.fg' | 'success.emphasis' | 'success.muted' | 'success.subtle' | 'attention.fg' | 'attention.emphasis' | 'attention.muted' | 'attention.subtle' | 'severe.fg' | 'severe.emphasis' | 'severe.muted' | 'severe.subtle' | 'danger.fg' | 'danger.emphasis' | 'danger.muted' | 'danger.subtle' | 'done.fg' | 'done.emphasis' | 'done.muted' | 'done.subtle' | 'sponsors.fg' | 'sponsors.emphasis' | 'sponsors.muted' | 'sponsors.subtle' | 'primer.fg.disabled' | 'primer.canvas.backdrop' | 'primer.canvas.sticky' | 'primer.border.active' | 'primer.border.contrast';
6
+ export declare type ThemeShadowPaths = 'shadow.small' | 'shadow.medium' | 'shadow.large' | 'shadow.extraLarge' | 'primer.shadow.highlight' | 'primer.shadow.inset' | 'primer.shadow.focus';
package/lib/theme.js CHANGED
@@ -7,5 +7,100 @@ exports.default = void 0;
7
7
 
8
8
  var _themePreval = require("./theme-preval");
9
9
 
10
- var _default = _themePreval.theme;
10
+ var _default = _themePreval.theme; // typecheck our theme instance:
11
+ // theme as Theme
12
+ // type ThemeColors = {
13
+ // fg: {
14
+ // default: 'XXXXXXXXXXX',
15
+ // muted: 'XXXXXXXXXXX',
16
+ // subtle: 'XXXXXXXXXXX',
17
+ // onEmphasis: 'XXXXXXXXXXX'
18
+ // },
19
+ // canvas: {
20
+ // default: 'XXXXXXXXXXX',
21
+ // overlay: 'XXXXXXXXXXX',
22
+ // inset: 'XXXXXXXXXXX',
23
+ // subtle: 'XXXXXXXXXXX'
24
+ // },
25
+ // border: {
26
+ // default: 'XXXXXXXXXXX',
27
+ // muted: 'XXXXXXXXXXX',
28
+ // subtle: 'XXXXXXXXXXX'
29
+ // },
30
+ // shadow: {
31
+ // small: 'XXXXXXXXXXX',
32
+ // medium: 'XXXXXXXXXXX',
33
+ // large: 'XXXXXXXXXXX',
34
+ // extraLarge: 'XXXXXXXXXXX'
35
+ // },
36
+ // // Roles
37
+ // neutral: {
38
+ // emphasisPlus: string,
39
+ // emphasis: string,
40
+ // muted: string,
41
+ // subtle: string
42
+ // },
43
+ // accent: {
44
+ // fg: string,
45
+ // emphasis: string,
46
+ // muted: string,
47
+ // subtle: string
48
+ // },
49
+ // success: {
50
+ // fg: string,
51
+ // emphasis: string,
52
+ // muted: string,
53
+ // subtle: string
54
+ // },
55
+ // attention: {
56
+ // fg: string,
57
+ // emphasis: string,
58
+ // muted: string,
59
+ // subtle: string
60
+ // },
61
+ // severe: {
62
+ // fg: string,
63
+ // emphasis: string,
64
+ // muted: string,
65
+ // subtle: string
66
+ // },
67
+ // danger: {
68
+ // fg: string,
69
+ // emphasis: string,
70
+ // muted: string,
71
+ // subtle: string
72
+ // },
73
+ // done: {
74
+ // fg: string,
75
+ // emphasis: string,
76
+ // muted: string,
77
+ // subtle: string
78
+ // },
79
+ // sponsors: {
80
+ // fg: string,
81
+ // emphasis: string,
82
+ // muted: string,
83
+ // subtle: string
84
+ // },
85
+ // // Only meant for Primer components
86
+ // primer: {
87
+ // fg: {
88
+ // disabled: string
89
+ // },
90
+ // canvas: {
91
+ // backdrop: string,
92
+ // sticky: string
93
+ // },
94
+ // border: {
95
+ // active: string,
96
+ // contrast: string
97
+ // },
98
+ // shadow: {
99
+ // highlight: string,
100
+ // inset: string,
101
+ // focus: string
102
+ // }
103
+ // }
104
+ // }
105
+
11
106
  exports.default = _default;
package/lib-esm/ActionList/Item.d.ts CHANGED
@@ -28,19 +28,13 @@ export interface ItemProps extends SxProp {
28
28
  */
29
29
  leadingVisual?: React.FunctionComponent<IconProps>;
30
30
  /**
31
- * @deprecated Use `trailingVisual` instead
32
31
  * Icon (or similar) positioned after `Item` text.
33
32
  */
34
33
  trailingIcon?: React.FunctionComponent<IconProps>;
35
34
  /**
36
- * @deprecated Use `trailingVisual` instead
37
35
  * Text positioned after `Item` text and optional trailing icon.
38
36
  */
39
37
  trailingText?: string;
40
- /**
41
- * Icon or text positioned after `Item` text.
42
- */
43
- trailingVisual?: React.ReactNode;
44
38
  /**
45
39
  * Style variations associated with various `Item` types.
46
40
  *
package/lib-esm/ActionList/Item.js CHANGED
@@ -154,7 +154,6 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
154
154
  selectionVariant,
155
155
  leadingVisual: LeadingVisual,
156
156
  trailingIcon: TrailingIcon,
157
- trailingVisual: TrailingVisual,
158
157
  trailingText,
159
158
  variant = 'default',
160
159
  showDivider,
@@ -246,10 +245,7 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
246
245
  title: description,
247
246
  inline: true,
248
247
  maxWidth: "100%"
249
- }, description)) : null), TrailingVisual ? /*#__PURE__*/React.createElement(TrailingContent, {
250
- variant: variant,
251
- disabled: disabled
252
- }, typeof TrailingVisual === 'function' ? /*#__PURE__*/React.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
248
+ }, description)) : null), TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
253
249
  variant: variant,
254
250
  disabled: disabled
255
251
  }, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));
package/lib-esm/Autocomplete/Autocomplete.d.ts CHANGED
@@ -288,7 +288,7 @@ declare const _default: React.FC<{
288
288
  onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
289
289
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
290
290
  block?: boolean | undefined;
291
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
291
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
292
292
  disabled?: boolean | undefined;
293
293
  variant?: "large" | "small" | undefined;
294
294
  hasIcon?: boolean | undefined;
package/lib-esm/Autocomplete/AutocompleteInput.d.ts CHANGED
@@ -280,7 +280,7 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
280
280
  onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
281
281
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
282
282
  block?: boolean | undefined;
283
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
283
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
284
284
  disabled?: boolean | undefined;
285
285
  variant?: "large" | "small" | undefined;
286
286
  hasIcon?: boolean | undefined;
package/lib-esm/Button/ButtonClose.d.ts CHANGED
@@ -306,7 +306,7 @@ declare const ButtonClose: React.ForwardRefExoticComponent<Pick<{
306
306
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
307
307
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
308
308
  size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
309
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
309
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
310
310
  autoFocus?: boolean | undefined;
311
311
  disabled?: boolean | undefined;
312
312
  formAction?: string | undefined;
package/lib-esm/CircleOcticon.d.ts CHANGED
@@ -384,7 +384,7 @@ declare namespace CircleOcticon {
384
384
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
385
385
  borderX?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
386
386
  borderY?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
387
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
387
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
388
388
  theme?: any;
389
389
  };
390
390
  }
package/lib-esm/Dialog.d.ts CHANGED
@@ -387,7 +387,7 @@ declare namespace DialogHeader {
387
387
  size?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
388
388
  borderX?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
389
389
  borderY?: React.Validator<import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined> | undefined;
390
- sx?: React.Validator<import("@styled-system/css").SystemStyleObject | undefined> | undefined;
390
+ sx?: React.Validator<import("./sx").BetterSystemStyleObject | undefined> | undefined;
391
391
  theme?: React.Validator<any> | undefined;
392
392
  };
393
393
  var displayName: string;
package/lib-esm/Dropdown.d.ts CHANGED
@@ -307,7 +307,7 @@ declare const _default: {
307
307
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
308
308
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
309
309
  open?: boolean | undefined;
310
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
310
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
311
311
  onToggle?: React.ReactEventHandler<HTMLElement> | undefined;
312
312
  } & {
313
313
  theme?: any;
@@ -604,7 +604,7 @@ declare const _default: {
604
604
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
605
605
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
606
606
  open?: boolean | undefined;
607
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
607
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
608
608
  onToggle?: React.ReactEventHandler<HTMLElement> | undefined;
609
609
  } & {
610
610
  theme?: any;
@@ -923,7 +923,7 @@ declare const _default: {
923
923
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
924
924
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
925
925
  size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
926
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
926
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
927
927
  autoFocus?: boolean | undefined;
928
928
  disabled?: boolean | undefined;
929
929
  formAction?: string | undefined;
@@ -1243,7 +1243,7 @@ declare const _default: {
1243
1243
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1244
1244
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1245
1245
  size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1246
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
1246
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
1247
1247
  autoFocus?: boolean | undefined;
1248
1248
  disabled?: boolean | undefined;
1249
1249
  formAction?: string | undefined;
package/lib-esm/DropdownMenu/DropdownButton.d.ts CHANGED
@@ -308,7 +308,7 @@ export declare const DropdownButton: React.ForwardRefExoticComponent<Pick<React.
308
308
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
309
309
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
310
310
  size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
311
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
311
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
312
312
  autoFocus?: boolean | undefined;
313
313
  disabled?: boolean | undefined;
314
314
  formAction?: string | undefined;
package/lib-esm/FilterList.d.ts CHANGED
@@ -307,7 +307,7 @@ declare const _default: {
307
307
  paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
308
308
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
309
309
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
310
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
310
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
311
311
  } & {
312
312
  theme?: any;
313
313
  }>): JSX.Element;
package/lib-esm/SelectMenu/SelectMenu.d.ts CHANGED
@@ -308,7 +308,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
308
308
  onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
309
309
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
310
310
  block?: boolean | undefined;
311
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
311
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
312
312
  disabled?: boolean | undefined;
313
313
  variant?: "large" | "small" | undefined;
314
314
  hasIcon?: boolean | undefined;
@@ -612,7 +612,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
612
612
  paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
613
613
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
614
614
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
615
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
615
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
616
616
  media?: string | undefined;
617
617
  target?: string | undefined;
618
618
  href?: string | undefined;
@@ -917,7 +917,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
917
917
  paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
918
918
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
919
919
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
920
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
920
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
921
921
  align?: "left" | "right" | undefined;
922
922
  } & {
923
923
  theme?: any;
@@ -1214,7 +1214,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
1214
1214
  paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1215
1215
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1216
1216
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1217
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
1217
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
1218
1218
  } & {
1219
1219
  theme?: any;
1220
1220
  }): JSX.Element;
@@ -1528,7 +1528,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<SelectMenuInternalP
1528
1528
  paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1529
1529
  py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1530
1530
  paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
1531
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
1531
+ sx?: import("../sx").BetterSystemStyleObject | undefined;
1532
1532
  } & {
1533
1533
  theme?: any;
1534
1534
  }): JSX.Element;
package/lib-esm/TextInputWithTokens.d.ts CHANGED
@@ -308,7 +308,7 @@ declare const TextInputWithTokens: React.ForwardRefExoticComponent<Pick<{
308
308
  onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
309
309
  onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
310
310
  block?: boolean | undefined;
311
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
311
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
312
312
  disabled?: boolean | undefined;
313
313
  variant?: "large" | "small" | undefined;
314
314
  hasIcon?: boolean | undefined;
package/lib-esm/Timeline.d.ts CHANGED
@@ -395,7 +395,7 @@ declare const _default: string & import("styled-components").StyledComponentBase
395
395
  size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
396
396
  borderX?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
397
397
  borderY?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
398
- sx?: import("@styled-system/css").SystemStyleObject | undefined;
398
+ sx?: import("./sx").BetterSystemStyleObject | undefined;
399
399
  } & {
400
400
  theme?: any;
401
401
  }): JSX.Element;
package/lib-esm/sx.d.ts CHANGED
@@ -1,6 +1,12 @@
1
- import { SystemStyleObject } from '@styled-system/css';
1
+ import { SystemCssProperties, SystemStyleObject } from '@styled-system/css';
2
+ import { ThemeColorPaths, ThemeShadowPaths } from './theme';
3
+ import { ColorProps, ShadowProps } from 'styled-system';
4
+ export declare type BetterCssProperties = {
5
+ [K in keyof SystemCssProperties]: K extends keyof ColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof ShadowProps ? ThemeShadowPaths | SystemCssProperties[K] : SystemCssProperties[K];
6
+ };
7
+ export declare type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject;
2
8
  export interface SxProp {
3
- sx?: SystemStyleObject;
9
+ sx?: BetterSystemStyleObject;
4
10
  }
5
11
  declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
6
12
  export default sx;
package/lib-esm/theme.d.ts CHANGED
@@ -1,2 +1,6 @@
1
1
  import { theme } from './theme-preval';
2
2
  export default theme;
3
+ export interface Theme {
4
+ }
5
+ export declare type ThemeColorPaths = 'fg.default' | 'fg.muted' | 'fg.subtle' | 'fg.onEmphasis' | 'canvas.default' | 'canvas.overlay' | 'canvas.inset' | 'canvas.subtle' | 'border.default' | 'border.muted' | 'border.subtle' | 'neutral.emphasisPlus' | 'neutral.emphasis' | 'neutral.muted' | 'neutral.subtle' | 'accent.fg' | 'accent.emphasis' | 'accent.muted' | 'accent.subtle' | 'success.fg' | 'success.emphasis' | 'success.muted' | 'success.subtle' | 'attention.fg' | 'attention.emphasis' | 'attention.muted' | 'attention.subtle' | 'severe.fg' | 'severe.emphasis' | 'severe.muted' | 'severe.subtle' | 'danger.fg' | 'danger.emphasis' | 'danger.muted' | 'danger.subtle' | 'done.fg' | 'done.emphasis' | 'done.muted' | 'done.subtle' | 'sponsors.fg' | 'sponsors.emphasis' | 'sponsors.muted' | 'sponsors.subtle' | 'primer.fg.disabled' | 'primer.canvas.backdrop' | 'primer.canvas.sticky' | 'primer.border.active' | 'primer.border.contrast';
6
+ export declare type ThemeShadowPaths = 'shadow.small' | 'shadow.medium' | 'shadow.large' | 'shadow.extraLarge' | 'primer.shadow.highlight' | 'primer.shadow.inset' | 'primer.shadow.focus';