@teamturing/react-kit 2.60.3 → 2.61.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 (74) hide show
  1. package/dist/core/GradientText/index.d.ts +3 -285
  2. package/dist/core/Pagination/index.d.ts +10 -287
  3. package/dist/core/Text/index.d.ts +7 -285
  4. package/dist/core/_UnstyledButton.d.ts +1 -280
  5. package/dist/index.js +695 -1677
  6. package/esm/core/ActionList/ActionListItem.js +31 -111
  7. package/esm/core/ActionList/ActionListSectionHeader.js +9 -17
  8. package/esm/core/ActionList/index.js +4 -7
  9. package/esm/core/Avatar/index.js +6 -10
  10. package/esm/core/AvatarGroup/AvatarGroupItem.js +4 -6
  11. package/esm/core/AvatarGroup/index.js +13 -34
  12. package/esm/core/BadgeAttacher/index.js +4 -6
  13. package/esm/core/Breadcrumbs/BreadcrumbsItem.js +10 -27
  14. package/esm/core/Breadcrumbs/index.js +15 -34
  15. package/esm/core/Button/index.js +8 -2
  16. package/esm/core/Card/index.js +6 -11
  17. package/esm/core/Checkbox/index.js +26 -122
  18. package/esm/core/CheckboxOrRadioGroupFormControl/CheckboxOrRadioGroupFormControlErrorMessage.js +4 -3
  19. package/esm/core/CheckboxOrRadioGroupFormControl/CheckboxOrRadioGroupFormControlLabel.js +15 -30
  20. package/esm/core/CheckboxOrRadioGroupFormControl/CheckboxOrRadioGroupFormControlSuccessMessage.js +4 -3
  21. package/esm/core/Chip/index.js +4 -1
  22. package/esm/core/ClickArea/index.js +5 -6
  23. package/esm/core/CounterBadge/index.js +7 -14
  24. package/esm/core/Datagrid/DatagridBody.js +5 -19
  25. package/esm/core/Datagrid/DatagridHeader.js +6 -15
  26. package/esm/core/Datagrid/DatagridSubheader.js +7 -13
  27. package/esm/core/Datagrid/index.js +10 -18
  28. package/esm/core/Dialog/_UnstyledDialogBody.js +5 -9
  29. package/esm/core/Dialog/_UnstyledDialogFooter.js +5 -8
  30. package/esm/core/Dialog/_UnstyledDialogHeader.js +5 -8
  31. package/esm/core/Dialog/index.js +9 -15
  32. package/esm/core/Drawer/_UnstyledDrawerBody.js +5 -9
  33. package/esm/core/Drawer/_UnstyledDrawerFooter.js +5 -8
  34. package/esm/core/Drawer/_UnstyledDrawerHeader.js +5 -8
  35. package/esm/core/Drawer/index.js +9 -16
  36. package/esm/core/EmptyState/index.js +12 -31
  37. package/esm/core/FileItem/index.js +4 -1
  38. package/esm/core/Flash/index.js +14 -59
  39. package/esm/core/FormControl/FormControlErrorMessage.js +4 -3
  40. package/esm/core/FormControl/FormControlLabel.js +15 -30
  41. package/esm/core/FormControl/FormControlSuccessMessage.js +4 -3
  42. package/esm/core/GradientText/index.js +15 -3
  43. package/esm/core/Grid/index.js +4 -1
  44. package/esm/core/HorizontalDivider/index.js +4 -11
  45. package/esm/core/IconButton/index.js +4 -1
  46. package/esm/core/IconToggleButton/index.js +4 -1
  47. package/esm/core/Image/index.js +4 -4
  48. package/esm/core/Overlay/index.js +8 -18
  49. package/esm/core/Pagination/index.js +45 -109
  50. package/esm/core/Pill/index.js +12 -46
  51. package/esm/core/Radio/index.js +21 -90
  52. package/esm/core/SearchSelectInput/index.js +26 -88
  53. package/esm/core/Select/SelectOption.js +4 -1
  54. package/esm/core/Select/index.js +30 -96
  55. package/esm/core/Space/index.js +4 -5
  56. package/esm/core/Spinner/index.js +10 -10
  57. package/esm/core/Stack/index.js +4 -1
  58. package/esm/core/Switch/index.js +17 -65
  59. package/esm/core/Tab/TabItem.js +4 -1
  60. package/esm/core/Text/index.js +15 -3
  61. package/esm/core/TextInput/TextInputTrailingAction.js +10 -31
  62. package/esm/core/TextInput/index.js +40 -107
  63. package/esm/core/Textarea/index.js +40 -109
  64. package/esm/core/Toast/index.js +4 -1
  65. package/esm/core/Tooltip/BaseTooltip.js +12 -41
  66. package/esm/core/UploadInput/index.js +22 -90
  67. package/esm/core/View/index.js +4 -4
  68. package/esm/core/_UnstyledButton.js +15 -11
  69. package/esm/core/_UnstyledTable/UnstyledTableBody.js +4 -3
  70. package/esm/core/_UnstyledTable/UnstyledTableCell.js +4 -3
  71. package/esm/core/_UnstyledTable/UnstyledTableHead.js +4 -3
  72. package/esm/core/_UnstyledTable/UnstyledTableRow.js +4 -3
  73. package/esm/core/_UnstyledTable/index.js +4 -5
  74. package/package.json +3 -2
@@ -25,146 +25,50 @@ const Checkbox = ({
25
25
  ...props
26
26
  });
27
27
  };
28
- const UnstyledCheckbox = styled.input.attrs({
28
+ const UnstyledCheckbox = /*#__PURE__*/styled.input.attrs({
29
29
  type: 'checkbox'
30
- })`
31
- appearance: none;
32
-
33
- ${sx}
34
- `;
35
- const BaseCheckbox = styled(UnstyledCheckbox)`
36
- position: relative;
37
-
38
- width: ${forcePixelValue(20)};
39
- height: ${forcePixelValue(20)};
40
-
41
- border-width: ${forcePixelValue(2)};
42
- border-style: solid;
43
- border-color: ${({
30
+ }).withConfig({
31
+ displayName: "Checkbox__UnstyledCheckbox",
32
+ componentId: "sc-19q1r3f-0"
33
+ })(["appearance:none;", ""], sx);
34
+ const BaseCheckbox = /*#__PURE__*/styled(UnstyledCheckbox).withConfig({
35
+ displayName: "Checkbox__BaseCheckbox",
36
+ componentId: "sc-19q1r3f-1"
37
+ })(["position:relative;width:", ";height:", ";border-width:", ";border-style:solid;border-color:", ";border-radius:", ";cursor:pointer;transition:visibility 200ms;&::before{visibility:hidden;content:'';display:grid;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:", ";background-color:", ";mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A\");mask-size:100%;-webkit-mask-size:100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;}&:disabled{background-color:", ";border-color:", ";cursor:not-allowed;}&:checked{background-color:", ";border-width:0;&::before{visibility:visible;}&:disabled{background-color:", ";border-color:", ";&::before{background-color:", ";}}}&:indeterminate{background-color:", ";border-width:0;&::before{visibility:visible;mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.05 13.2H4.05001C3.73175 13.2 3.42652 13.0736 3.20148 12.8485C2.97643 12.6235 2.85001 12.3182 2.85001 12C2.85001 11.6817 2.97643 11.3765 3.20148 11.1515C3.42652 10.9264 3.73175 10.8 4.05001 10.8H20.05C20.3683 10.8 20.6735 10.9264 20.8985 11.1515C21.1236 11.3765 21.25 11.6817 21.25 12C21.25 12.3182 21.1236 12.6235 20.8985 12.8485C20.6735 13.0736 20.3683 13.2 20.05 13.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A\");-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.05 13.2H4.05001C3.73175 13.2 3.42652 13.0736 3.20148 12.8485C2.97643 12.6235 2.85001 12.3182 2.85001 12C2.85001 11.6817 2.97643 11.3765 3.20148 11.1515C3.42652 10.9264 3.73175 10.8 4.05001 10.8H20.05C20.3683 10.8 20.6735 10.9264 20.8985 11.1515C21.1236 11.3765 21.25 11.6817 21.25 12C21.25 12.3182 21.1236 12.6235 20.8985 12.8485C20.6735 13.0736 20.3683 13.2 20.05 13.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A\");mask-size:100%;-webkit-mask-size:100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;}&:disabled{background-color:", ";border-color:", ";&::before{background-color:", ";}}}&:focus-visible{outline-width:", ";outline-style:solid;outline-color:", ";}", " ", ""], forcePixelValue(20), forcePixelValue(20), forcePixelValue(2), ({
44
38
  theme
45
- }) => theme.colors['border/neutral']};
46
- border-radius: ${({
39
+ }) => theme.colors['border/neutral'], ({
47
40
  theme
48
- }) => `${forcePixelValue(theme.radii.xxs)}`};
49
- cursor: pointer;
50
-
51
- transition: visibility 200ms;
52
-
53
- &::before {
54
- visibility: hidden;
55
-
56
- content: '';
57
- display: grid;
58
- position: absolute;
59
-
60
- top: 0;
61
- right: 0;
62
- bottom: 0;
63
- left: 0;
64
-
65
- border-radius: ${({
41
+ }) => `${forcePixelValue(theme.radii.xxs)}`, ({
66
42
  theme
67
- }) => `${forcePixelValue(theme.radii.xxs)}`};
68
-
69
- background-color: ${({
70
- theme
71
- }) => theme.colors['icon/inverse']};
72
- mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A");
73
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A");
74
- mask-size: 100%;
75
- -webkit-mask-size: 100%;
76
- mask-repeat: no-repeat;
77
- -webkit-mask-repeat: no-repeat;
78
- mask-position: center;
79
- -webkit-mask-position: center;
80
- }
81
-
82
- &:disabled {
83
- background-color: ${({
43
+ }) => `${forcePixelValue(theme.radii.xxs)}`, ({
84
44
  theme
85
- }) => theme.colors['bg/disabled']};
86
- border-color: ${({
45
+ }) => theme.colors['icon/inverse'], ({
87
46
  theme
88
- }) => theme.colors['border/disabled']};
89
- cursor: not-allowed;
90
- }
91
-
92
- &:checked {
93
- background-color: ${({
47
+ }) => theme.colors['bg/disabled'], ({
94
48
  theme
95
- }) => theme.colors['bg/primary']};
96
- border-width: 0;
97
-
98
- &::before {
99
- visibility: visible;
100
- }
101
-
102
- &:disabled {
103
- background-color: ${({
49
+ }) => theme.colors['border/disabled'], ({
104
50
  theme
105
- }) => theme.colors['bg/disabled']};
106
- border-color: ${({
51
+ }) => theme.colors['bg/primary'], ({
107
52
  theme
108
- }) => theme.colors['border/disabled']};
109
-
110
- &::before {
111
- background-color: ${({
53
+ }) => theme.colors['bg/disabled'], ({
112
54
  theme
113
- }) => theme.colors['icon/disabled']};
114
- }
115
- }
116
- }
117
-
118
- &:indeterminate {
119
- background-color: ${({
55
+ }) => theme.colors['border/disabled'], ({
120
56
  theme
121
- }) => theme.colors['bg/primary']};
122
- border-width: 0;
123
-
124
- &::before {
125
- visibility: visible;
126
- mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.05 13.2H4.05001C3.73175 13.2 3.42652 13.0736 3.20148 12.8485C2.97643 12.6235 2.85001 12.3182 2.85001 12C2.85001 11.6817 2.97643 11.3765 3.20148 11.1515C3.42652 10.9264 3.73175 10.8 4.05001 10.8H20.05C20.3683 10.8 20.6735 10.9264 20.8985 11.1515C21.1236 11.3765 21.25 11.6817 21.25 12C21.25 12.3182 21.1236 12.6235 20.8985 12.8485C20.6735 13.0736 20.3683 13.2 20.05 13.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A");
127
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.05 13.2H4.05001C3.73175 13.2 3.42652 13.0736 3.20148 12.8485C2.97643 12.6235 2.85001 12.3182 2.85001 12C2.85001 11.6817 2.97643 11.3765 3.20148 11.1515C3.42652 10.9264 3.73175 10.8 4.05001 10.8H20.05C20.3683 10.8 20.6735 10.9264 20.8985 11.1515C21.1236 11.3765 21.25 11.6817 21.25 12C21.25 12.3182 21.1236 12.6235 20.8985 12.8485C20.6735 13.0736 20.3683 13.2 20.05 13.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A");
128
- mask-size: 100%;
129
- -webkit-mask-size: 100%;
130
- mask-repeat: no-repeat;
131
- -webkit-mask-repeat: no-repeat;
132
- mask-position: center;
133
- -webkit-mask-position: center;
134
- }
135
-
136
- &:disabled {
137
- background-color: ${({
57
+ }) => theme.colors['icon/disabled'], ({
138
58
  theme
139
- }) => theme.colors['bg/disabled']};
140
- border-color: ${({
59
+ }) => theme.colors['bg/primary'], ({
141
60
  theme
142
- }) => theme.colors['border/disabled']};
143
-
144
- &::before {
145
- background-color: ${({
61
+ }) => theme.colors['bg/disabled'], ({
146
62
  theme
147
- }) => theme.colors['icon/disabled']};
148
- }
149
- }
150
- }
151
-
152
- &:focus-visible {
153
- outline-width: ${forcePixelValue(2)};
154
- outline-style: solid;
155
- outline-color: ${({
63
+ }) => theme.colors['border/disabled'], ({
156
64
  theme
157
- }) => theme.colors['border/focused']};
158
- }
159
-
160
- ${props => props.validationStatus === 'error' && css`
65
+ }) => theme.colors['icon/disabled'], forcePixelValue(2), ({
66
+ theme
67
+ }) => theme.colors['border/focused'], props => props.validationStatus === 'error' && css`
161
68
  border-color: ${({
162
69
  theme
163
70
  }) => theme.colors['border/danger']};
164
- `}
165
-
166
- ${sx}
167
- `;
71
+ `, sx);
168
72
  var Checkbox$1 = /*#__PURE__*/forwardRef(Checkbox);
169
73
 
170
74
  export { Checkbox$1 as default };
@@ -27,8 +27,9 @@ const errorMessageKeyframe = keyframes`
27
27
  transform: translateY(0);
28
28
  }
29
29
  `;
30
- const StyledText = styled(Text)`
31
- animation: 170ms ${errorMessageKeyframe} cubic-bezier(0.44, 0.74, 0.36, 1);
32
- `;
30
+ const StyledText = /*#__PURE__*/styled(Text).withConfig({
31
+ displayName: "CheckboxOrRadioGroupFormControlErrorMessage__StyledText",
32
+ componentId: "sc-ulbr7g-0"
33
+ })(["animation:170ms ", " cubic-bezier(0.44,0.74,0.36,1);"], errorMessageKeyframe);
33
34
 
34
35
  export { CheckboxOrRadioGroupFormControlErrorMessage as default };
@@ -36,8 +36,10 @@ const CheckboxOrRadioGroupFormControlLabel = ({
36
36
  })
37
37
  });
38
38
  };
39
- const VisuallyHidden = styled.span`
40
- ${({
39
+ const VisuallyHidden = /*#__PURE__*/styled.span.withConfig({
40
+ displayName: "CheckboxOrRadioGroupFormControlLabel__VisuallyHidden",
41
+ componentId: "sc-1eoo1ew-0"
42
+ })(["", ""], ({
41
43
  isVisible = false
42
44
  }) => {
43
45
  if (isVisible) {
@@ -54,39 +56,22 @@ const VisuallyHidden = styled.span`
54
56
  white-space: nowrap;
55
57
  border-width: 0;
56
58
  `;
57
- }}
58
- `;
59
- const LabelWrapper = styled(View)`
60
- display: inline-block;
61
- align-self: flex-start;
62
-
63
- font-size: ${({
59
+ });
60
+ const LabelWrapper = /*#__PURE__*/styled(View).withConfig({
61
+ displayName: "CheckboxOrRadioGroupFormControlLabel__LabelWrapper",
62
+ componentId: "sc-1eoo1ew-1"
63
+ })(["display:inline-block;align-self:flex-start;font-size:", ";font-weight:", ";line-height:", ";color:", ";cursor:", ";span.checkbox_or_radio_group_form_control_label__required__false{font-size:inherit;font-weight:inherit;color:", ";}", ";"], ({
64
64
  theme
65
- }) => forcePixelValue(theme.fontSizes.xs)};
66
- font-weight: ${({
65
+ }) => forcePixelValue(theme.fontSizes.xs), ({
67
66
  theme
68
- }) => theme.fontWeights.medium};
69
- line-height: ${({
67
+ }) => theme.fontWeights.medium, ({
70
68
  theme
71
- }) => theme.lineHeights[2]};
72
-
73
- color: ${({
69
+ }) => theme.lineHeights[2], ({
74
70
  theme
75
- }) => theme.colors['text/neutral/subtle']};
76
-
77
- cursor: ${({
71
+ }) => theme.colors['text/neutral/subtle'], ({
78
72
  disabled
79
- }) => disabled ? 'not-allowed' : 'pointer'};
80
-
81
- span.checkbox_or_radio_group_form_control_label__required__false {
82
- font-size: inherit;
83
- font-weight: inherit;
84
- color: ${({
73
+ }) => disabled ? 'not-allowed' : 'pointer', ({
85
74
  theme
86
- }) => theme.colors['text/neutral/subtlest']};
87
- }
88
-
89
- ${sx};
90
- `;
75
+ }) => theme.colors['text/neutral/subtlest'], sx);
91
76
 
92
77
  export { CheckboxOrRadioGroupFormControlLabel as default };
@@ -27,8 +27,9 @@ const successMessageKeyframe = keyframes`
27
27
  transform: translateY(0);
28
28
  }
29
29
  `;
30
- const StyledText = styled(Text)`
31
- animation: 170ms ${successMessageKeyframe} cubic-bezier(0.44, 0.74, 0.36, 1);
32
- `;
30
+ const StyledText = /*#__PURE__*/styled(Text).withConfig({
31
+ displayName: "CheckboxOrRadioGroupFormControlSuccessMessage__StyledText",
32
+ componentId: "sc-c7dwbg-0"
33
+ })(["animation:170ms ", " cubic-bezier(0.44,0.74,0.36,1);"], successMessageKeyframe);
33
34
 
34
35
  export { CheckboxOrRadioGroupFormControlSuccessMessage as default };
@@ -23,7 +23,10 @@ const Chip = ({
23
23
  className: 'chip__trailing_icon'
24
24
  }) : null]
25
25
  });
26
- const BaseChip = styled.span(({
26
+ const BaseChip = /*#__PURE__*/styled.span.withConfig({
27
+ displayName: "Chip__BaseChip",
28
+ componentId: "sc-sq73uo-0"
29
+ })(({
27
30
  theme
28
31
  }) => ({
29
32
  position: 'relative',
@@ -17,13 +17,12 @@ const ClickArea = ({
17
17
  onClick
18
18
  } : {})
19
19
  });
20
- const BaseClickArea = styled(View)`
21
- &:hover {
22
- cursor: ${({
20
+ const BaseClickArea = /*#__PURE__*/styled(View).withConfig({
21
+ displayName: "ClickArea__BaseClickArea",
22
+ componentId: "sc-1pd8ned-0"
23
+ })(["&:hover{cursor:", ";}"], ({
23
24
  disabled
24
- }) => disabled ? 'not-allowed' : 'pointer'};
25
- }
26
- `;
25
+ }) => disabled ? 'not-allowed' : 'pointer');
27
26
  var index = /*#__PURE__*/forwardRef(ClickArea);
28
27
 
29
28
  export { index as default };
@@ -22,15 +22,12 @@ const CounterBadge = ({
22
22
  children: children
23
23
  });
24
24
  };
25
- const BaseCounterBadge = styled.span`
26
- display: inline-flex;
27
- align-items: center;
28
- justify-content: center;
29
- border-radius: ${({
25
+ const BaseCounterBadge = /*#__PURE__*/styled.span.withConfig({
26
+ displayName: "CounterBadge__BaseCounterBadge",
27
+ componentId: "sc-1tqkdbw-0"
28
+ })(["display:inline-flex;align-items:center;justify-content:center;border-radius:", ";", " ", " ", ""], ({
30
29
  theme
31
- }) => forcePixelValue(theme.radii.full)};
32
-
33
- ${variant({
30
+ }) => forcePixelValue(theme.radii.full), variant({
34
31
  prop: 'variant',
35
32
  variants: {
36
33
  red: {
@@ -38,8 +35,7 @@ const BaseCounterBadge = styled.span`
38
35
  color: 'text/inverse'
39
36
  }
40
37
  }
41
- })}
42
- ${variant({
38
+ }), variant({
43
39
  prop: 'size',
44
40
  variants: {
45
41
  m: {
@@ -51,9 +47,6 @@ const BaseCounterBadge = styled.span`
51
47
  py: 0.25
52
48
  }
53
49
  }
54
- })}
55
-
56
- ${sx}
57
- `;
50
+ }), sx);
58
51
 
59
52
  export { CounterBadge as default };
@@ -8,25 +8,11 @@ const DatagridBody = ({
8
8
  }) => /*#__PURE__*/jsx(BaseDatagridBody, {
9
9
  ...props
10
10
  });
11
- const BaseDatagridBody = styled.div`
12
- width: inherit;
13
-
14
- border-radius: inherit;
15
-
16
- & > *:not(:last-child) {
17
- border-bottom-width: ${forcePixelValue(1)};
18
- border-bottom-style: solid;
19
- border-bottom-color: ${({
11
+ const BaseDatagridBody = /*#__PURE__*/styled.div.withConfig({
12
+ displayName: "DatagridBody__BaseDatagridBody",
13
+ componentId: "sc-pt3o0h-0"
14
+ })(["width:inherit;border-radius:inherit;& > *:not(:last-child){border-bottom-width:", ";border-bottom-style:solid;border-bottom-color:", ";}& > *:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;}", ""], forcePixelValue(1), ({
20
15
  theme
21
- }) => theme.colors['border/neutral']};
22
- }
23
-
24
- & > *:last-child {
25
- border-bottom-left-radius: inherit;
26
- border-bottom-right-radius: inherit;
27
- }
28
-
29
- ${sx}
30
- `;
16
+ }) => theme.colors['border/neutral'], sx);
31
17
 
32
18
  export { DatagridBody as default };
@@ -23,22 +23,13 @@ const DatagridHeader = ({
23
23
  children: trailingAction
24
24
  })]
25
25
  });
26
- const DataGridHeaderWrapper = styled.div`
27
- display: flex;
28
- align-items: center;
29
- justify-content: space-between;
30
- height: 40px;
31
- padding: ${({
26
+ const DataGridHeaderWrapper = /*#__PURE__*/styled.div.withConfig({
27
+ displayName: "DatagridHeader__DataGridHeaderWrapper",
28
+ componentId: "sc-r0eskc-0"
29
+ })(["display:flex;align-items:center;justify-content:space-between;height:40px;padding:", ";background-color:", ";border-top-left-radius:inherit;border-top-right-radius:inherit;", ""], ({
32
30
  theme
33
- }) => `${forcePixelValue(theme.space[1])} ${forcePixelValue(theme.space[4])}`};
34
- background-color: ${({
31
+ }) => `${forcePixelValue(theme.space[1])} ${forcePixelValue(theme.space[4])}`, ({
35
32
  theme
36
- }) => theme.colors['bg/neutral']};
37
-
38
- border-top-left-radius: inherit;
39
- border-top-right-radius: inherit;
40
-
41
- ${sx}
42
- `;
33
+ }) => theme.colors['bg/neutral'], sx);
43
34
 
44
35
  export { DatagridHeader as default };
@@ -8,21 +8,15 @@ const DatagridSubheader = ({
8
8
  }) => /*#__PURE__*/jsx(DataGridSubheaderWrapper, {
9
9
  ...props
10
10
  });
11
- const DataGridSubheaderWrapper = styled.div`
12
- padding: ${({
11
+ const DataGridSubheaderWrapper = /*#__PURE__*/styled.div.withConfig({
12
+ displayName: "DatagridSubheader__DataGridSubheaderWrapper",
13
+ componentId: "sc-1l1yg6c-0"
14
+ })(["padding:", ";background-color:", ";border-bottom-width:", ";border-bottom-style:solid;border-bottom-color:", ";", ";"], ({
13
15
  theme
14
- }) => `${forcePixelValue(theme.space[2])} ${forcePixelValue(theme.space[4])}`};
15
- background-color: ${({
16
+ }) => `${forcePixelValue(theme.space[2])} ${forcePixelValue(theme.space[4])}`, ({
16
17
  theme
17
- }) => theme.colors.surface};
18
-
19
- border-bottom-width: ${forcePixelValue(1)};
20
- border-bottom-style: solid;
21
- border-bottom-color: ${({
18
+ }) => theme.colors.surface, forcePixelValue(1), ({
22
19
  theme
23
- }) => theme.colors['border/neutral']};
24
-
25
- ${sx};
26
- `;
20
+ }) => theme.colors['border/neutral'], sx);
27
21
 
28
22
  export { DatagridSubheader as default };
@@ -29,26 +29,18 @@ const Datagrid = ({
29
29
  })]
30
30
  });
31
31
  };
32
- const DatagridWrapper = styled.div`
33
- width: 100%;
34
-
35
- border-width: ${forcePixelValue(1)};
36
- border-style: solid;
37
- border-color: ${({
32
+ const DatagridWrapper = /*#__PURE__*/styled.div.withConfig({
33
+ displayName: "Datagrid__DatagridWrapper",
34
+ componentId: "sc-1pt4ew-0"
35
+ })(["width:100%;border-width:", ";border-style:solid;border-color:", ";border-radius:", ";isolation:isolate;", ""], forcePixelValue(1), ({
38
36
  theme
39
- }) => theme.colors['border/neutral']};
40
- border-radius: ${({
37
+ }) => theme.colors['border/neutral'], ({
41
38
  theme
42
- }) => forcePixelValue(theme.radii.s)};
43
- isolation: isolate;
44
-
45
- ${sx}
46
- `;
47
- const BaseDatagrid = styled.div`
48
- width: inherit;
49
-
50
- border-radius: inherit;
51
- `;
39
+ }) => forcePixelValue(theme.radii.s), sx);
40
+ const BaseDatagrid = /*#__PURE__*/styled.div.withConfig({
41
+ displayName: "Datagrid__BaseDatagrid",
42
+ componentId: "sc-1pt4ew-1"
43
+ })(["width:inherit;border-radius:inherit;"]);
52
44
  var index = Object.assign(Datagrid, {
53
45
  Header: DatagridHeader,
54
46
  Subheader: DatagridSubheader,
@@ -1,15 +1,11 @@
1
1
  import styled from 'styled-components';
2
2
  import { sx } from '../../utils/styled-system/index.js';
3
3
 
4
- const UnstyledDialogBody = styled.div.attrs({
4
+ const UnstyledDialogBody = /*#__PURE__*/styled.div.attrs({
5
5
  className: 'trk-dialog_body'
6
- })`
7
- flex-grow: 1;
8
- flex-shrink: 1;
9
- flex-basis: auto;
10
- overflow-y: auto;
11
-
12
- ${sx}
13
- `;
6
+ }).withConfig({
7
+ displayName: "_UnstyledDialogBody__UnstyledDialogBody",
8
+ componentId: "sc-1wirkbs-0"
9
+ })(["flex-grow:1;flex-shrink:1;flex-basis:auto;overflow-y:auto;", ""], sx);
14
10
 
15
11
  export { UnstyledDialogBody as default };
@@ -1,14 +1,11 @@
1
1
  import styled from 'styled-components';
2
2
  import { sx } from '../../utils/styled-system/index.js';
3
3
 
4
- const UnstyledDialogFooter = styled.div.attrs({
4
+ const UnstyledDialogFooter = /*#__PURE__*/styled.div.attrs({
5
5
  className: 'trk-dialog_footer'
6
- })`
7
- flex-grow: 0;
8
- flex-shrink: 0;
9
- flex-basis: auto;
10
-
11
- ${sx}
12
- `;
6
+ }).withConfig({
7
+ displayName: "_UnstyledDialogFooter__UnstyledDialogFooter",
8
+ componentId: "sc-6fc8qd-0"
9
+ })(["flex-grow:0;flex-shrink:0;flex-basis:auto;", ""], sx);
13
10
 
14
11
  export { UnstyledDialogFooter as default };
@@ -1,14 +1,11 @@
1
1
  import styled from 'styled-components';
2
2
  import { sx } from '../../utils/styled-system/index.js';
3
3
 
4
- const UnstyledDialogHeader = styled.div.attrs({
4
+ const UnstyledDialogHeader = /*#__PURE__*/styled.div.attrs({
5
5
  className: 'trk-dialog_header'
6
- })`
7
- flex-grow: 0;
8
- flex-shrink: 0;
9
- flex-basis: auto;
10
-
11
- ${sx}
12
- `;
6
+ }).withConfig({
7
+ displayName: "_UnstyledDialogHeader__UnstyledDialogHeader",
8
+ componentId: "sc-11xdjox-0"
9
+ })(["flex-grow:0;flex-shrink:0;flex-basis:auto;", ""], sx);
13
10
 
14
11
  export { UnstyledDialogHeader as default };
@@ -153,22 +153,16 @@ const Dialog = ({
153
153
  }) : null
154
154
  });
155
155
  };
156
- const Blanket = styled.span`
157
- &:before {
158
- position: fixed;
159
- top: 0;
160
- right: 0;
161
- bottom: 0;
162
- left: 0;
163
- display: block;
164
- cursor: default;
165
- content: '';
166
- background: ${({
156
+ const Blanket = /*#__PURE__*/styled.span.withConfig({
157
+ displayName: "Dialog__Blanket",
158
+ componentId: "sc-1c7dkhn-0"
159
+ })(["&:before{position:fixed;top:0;right:0;bottom:0;left:0;display:block;cursor:default;content:'';background:", ";}"], ({
167
160
  theme
168
- }) => theme.colors.dim};
169
- }
170
- `;
171
- const BaseDialog = styled.div(({
161
+ }) => theme.colors.dim);
162
+ const BaseDialog = /*#__PURE__*/styled.div.withConfig({
163
+ displayName: "Dialog__BaseDialog",
164
+ componentId: "sc-1c7dkhn-1"
165
+ })(({
172
166
  theme
173
167
  }) => ({
174
168
  display: 'flex',
@@ -1,15 +1,11 @@
1
1
  import styled from 'styled-components';
2
2
  import { sx } from '../../utils/styled-system/index.js';
3
3
 
4
- const UnstyledDrawerBody = styled.div.attrs({
4
+ const UnstyledDrawerBody = /*#__PURE__*/styled.div.attrs({
5
5
  className: 'trk-drawer_body'
6
- })`
7
- flex-grow: 1;
8
- flex-shrink: 1;
9
- flex-basis: auto;
10
- overflow-y: auto;
11
-
12
- ${sx}
13
- `;
6
+ }).withConfig({
7
+ displayName: "_UnstyledDrawerBody__UnstyledDrawerBody",
8
+ componentId: "sc-128haqe-0"
9
+ })(["flex-grow:1;flex-shrink:1;flex-basis:auto;overflow-y:auto;", ""], sx);
14
10
 
15
11
  export { UnstyledDrawerBody as default };
@@ -1,14 +1,11 @@
1
1
  import styled from 'styled-components';
2
2
  import { sx } from '../../utils/styled-system/index.js';
3
3
 
4
- const UnstyledDrawerFooter = styled.div.attrs({
4
+ const UnstyledDrawerFooter = /*#__PURE__*/styled.div.attrs({
5
5
  className: 'trk-drawer_footer'
6
- })`
7
- flex-grow: 0;
8
- flex-shrink: 0;
9
- flex-basis: auto;
10
-
11
- ${sx}
12
- `;
6
+ }).withConfig({
7
+ displayName: "_UnstyledDrawerFooter__UnstyledDrawerFooter",
8
+ componentId: "sc-l06yi3-0"
9
+ })(["flex-grow:0;flex-shrink:0;flex-basis:auto;", ""], sx);
13
10
 
14
11
  export { UnstyledDrawerFooter as default };
@@ -1,14 +1,11 @@
1
1
  import styled from 'styled-components';
2
2
  import { sx } from '../../utils/styled-system/index.js';
3
3
 
4
- const UnstyledDrawerHeader = styled.div.attrs({
4
+ const UnstyledDrawerHeader = /*#__PURE__*/styled.div.attrs({
5
5
  className: 'trk-drawer_header'
6
- })`
7
- flex-grow: 0;
8
- flex-shrink: 0;
9
- flex-basis: auto;
10
-
11
- ${sx}
12
- `;
6
+ }).withConfig({
7
+ displayName: "_UnstyledDrawerHeader__UnstyledDrawerHeader",
8
+ componentId: "sc-1jvii2r-0"
9
+ })(["flex-grow:0;flex-shrink:0;flex-basis:auto;", ""], sx);
13
10
 
14
11
  export { UnstyledDrawerHeader as default };