@veeqo/ui 14.9.1 → 14.10.0-beta-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (163) hide show
  1. package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/DodecadeCalendar.cjs +2 -2
  2. package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/DodecadeCalendar.cjs.map +1 -1
  3. package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/DodecadeCalendar.js +1 -1
  4. package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/YearCalendar.cjs +2 -2
  5. package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/YearCalendar.cjs.map +1 -1
  6. package/dist/components/Calendars/components/subcomponents/CalendarGrid/subCalendars/YearCalendar.js +1 -1
  7. package/dist/components/DataTable/DataTable.d.ts +4 -4
  8. package/dist/components/DataTable/components/ActionBar.cjs +3 -8
  9. package/dist/components/DataTable/components/ActionBar.cjs.map +1 -1
  10. package/dist/components/DataTable/components/ActionBar.js +3 -7
  11. package/dist/components/DataTable/components/ActionBar.js.map +1 -1
  12. package/dist/components/DataTable/components/Cell.cjs +15 -4
  13. package/dist/components/DataTable/components/Cell.cjs.map +1 -1
  14. package/dist/components/DataTable/components/Cell.d.ts +6 -2
  15. package/dist/components/DataTable/components/Cell.js +15 -4
  16. package/dist/components/DataTable/components/Cell.js.map +1 -1
  17. package/dist/components/DataTable/components/ColumnDivider.cjs +4 -6
  18. package/dist/components/DataTable/components/ColumnDivider.cjs.map +1 -1
  19. package/dist/components/DataTable/components/ColumnDivider.d.ts +0 -1
  20. package/dist/components/DataTable/components/ColumnDivider.js +5 -5
  21. package/dist/components/DataTable/components/ColumnDivider.js.map +1 -1
  22. package/dist/components/DataTable/components/ColumnHeader.cjs +8 -9
  23. package/dist/components/DataTable/components/ColumnHeader.cjs.map +1 -1
  24. package/dist/components/DataTable/components/ColumnHeader.d.ts +16 -6
  25. package/dist/components/DataTable/components/ColumnHeader.js +7 -8
  26. package/dist/components/DataTable/components/ColumnHeader.js.map +1 -1
  27. package/dist/components/DataTable/components/DataTable.module.scss.cjs +9 -0
  28. package/dist/components/DataTable/components/DataTable.module.scss.cjs.map +1 -0
  29. package/dist/components/DataTable/components/DataTable.module.scss.js +7 -0
  30. package/dist/components/DataTable/components/DataTable.module.scss.js.map +1 -0
  31. package/dist/components/DataTable/components/EmptyBodyContent.cjs +10 -5
  32. package/dist/components/DataTable/components/EmptyBodyContent.cjs.map +1 -1
  33. package/dist/components/DataTable/components/EmptyBodyContent.d.ts +10 -3
  34. package/dist/components/DataTable/components/EmptyBodyContent.js +9 -4
  35. package/dist/components/DataTable/components/EmptyBodyContent.js.map +1 -1
  36. package/dist/components/DataTable/components/Header.cjs +16 -4
  37. package/dist/components/DataTable/components/Header.cjs.map +1 -1
  38. package/dist/components/DataTable/components/Header.d.ts +2 -1
  39. package/dist/components/DataTable/components/Header.js +16 -4
  40. package/dist/components/DataTable/components/Header.js.map +1 -1
  41. package/dist/components/DataTable/components/LoadingCellContent.cjs +7 -7
  42. package/dist/components/DataTable/components/LoadingCellContent.cjs.map +1 -1
  43. package/dist/components/DataTable/components/LoadingCellContent.d.ts +5 -1
  44. package/dist/components/DataTable/components/LoadingCellContent.js +6 -6
  45. package/dist/components/DataTable/components/LoadingCellContent.js.map +1 -1
  46. package/dist/components/DataTable/components/NoWrap.cjs +7 -3
  47. package/dist/components/DataTable/components/NoWrap.cjs.map +1 -1
  48. package/dist/components/DataTable/components/NoWrap.d.ts +6 -1
  49. package/dist/components/DataTable/components/NoWrap.js +6 -2
  50. package/dist/components/DataTable/components/NoWrap.js.map +1 -1
  51. package/dist/components/DataTable/components/Row.cjs +21 -24
  52. package/dist/components/DataTable/components/Row.cjs.map +1 -1
  53. package/dist/components/DataTable/components/Row.d.ts +5 -2
  54. package/dist/components/DataTable/components/Row.js +20 -23
  55. package/dist/components/DataTable/components/Row.js.map +1 -1
  56. package/dist/components/DataTable/components/ScrollContainer.cjs +7 -3
  57. package/dist/components/DataTable/components/ScrollContainer.cjs.map +1 -1
  58. package/dist/components/DataTable/components/ScrollContainer.d.ts +6 -1
  59. package/dist/components/DataTable/components/ScrollContainer.js +6 -2
  60. package/dist/components/DataTable/components/ScrollContainer.js.map +1 -1
  61. package/dist/components/DataTable/components/TableGrid.cjs +13 -5
  62. package/dist/components/DataTable/components/TableGrid.cjs.map +1 -1
  63. package/dist/components/DataTable/components/TableGrid.d.ts +10 -2
  64. package/dist/components/DataTable/components/TableGrid.js +12 -4
  65. package/dist/components/DataTable/components/TableGrid.js.map +1 -1
  66. package/dist/components/DataTable/components/Truncate.cjs +7 -3
  67. package/dist/components/DataTable/components/Truncate.cjs.map +1 -1
  68. package/dist/components/DataTable/components/Truncate.d.ts +6 -1
  69. package/dist/components/DataTable/components/Truncate.js +6 -2
  70. package/dist/components/DataTable/components/Truncate.js.map +1 -1
  71. package/dist/components/DataTable/components/Wrapper.cjs +11 -8
  72. package/dist/components/DataTable/components/Wrapper.cjs.map +1 -1
  73. package/dist/components/DataTable/components/Wrapper.d.ts +5 -2
  74. package/dist/components/DataTable/components/Wrapper.js +10 -7
  75. package/dist/components/DataTable/components/Wrapper.js.map +1 -1
  76. package/dist/components/DataTable/constants.cjs +0 -2
  77. package/dist/components/DataTable/constants.cjs.map +1 -1
  78. package/dist/components/DataTable/constants.js +1 -2
  79. package/dist/components/DataTable/constants.js.map +1 -1
  80. package/dist/components/DataTable/hooks/useTableId.cjs +23 -0
  81. package/dist/components/DataTable/hooks/useTableId.cjs.map +1 -0
  82. package/dist/components/DataTable/hooks/useTableId.d.ts +13 -0
  83. package/dist/components/DataTable/hooks/useTableId.js +21 -0
  84. package/dist/components/DataTable/hooks/useTableId.js.map +1 -0
  85. package/dist/components/DataTable/utils/generateTableCss.cjs +2 -2
  86. package/dist/components/DataTable/utils/generateTableCss.cjs.map +1 -1
  87. package/dist/components/DataTable/utils/generateTableCss.js +2 -2
  88. package/dist/components/DataTable/utils/generateTableCss.js.map +1 -1
  89. package/dist/components/DateInputField/DateInputField.cjs +1 -1
  90. package/dist/components/DateInputField/DateInputField.js +1 -1
  91. package/dist/components/DatePicker/DatePicker.cjs +1 -1
  92. package/dist/components/DatePicker/DatePicker.js +1 -1
  93. package/dist/components/DateRangePicker/DateRangePicker.cjs +1 -1
  94. package/dist/components/DateRangePicker/DateRangePicker.js +1 -1
  95. package/dist/components/Grid/Grid.cjs +24 -0
  96. package/dist/components/Grid/Grid.cjs.map +1 -0
  97. package/dist/components/Grid/Grid.d.ts +3 -0
  98. package/dist/components/Grid/Grid.js +18 -0
  99. package/dist/components/Grid/Grid.js.map +1 -0
  100. package/dist/components/Grid/Grid.module.scss.cjs +9 -0
  101. package/dist/components/Grid/Grid.module.scss.cjs.map +1 -0
  102. package/dist/components/Grid/Grid.module.scss.js +7 -0
  103. package/dist/components/Grid/Grid.module.scss.js.map +1 -0
  104. package/dist/components/Grid/index.d.ts +2 -3
  105. package/dist/components/LegacyDataTable/LegacyDataTable.d.ts +1 -1
  106. package/dist/components/LegacyDataTable/LegacyDataTable.module.scss.cjs +9 -0
  107. package/dist/components/LegacyDataTable/LegacyDataTable.module.scss.cjs.map +1 -0
  108. package/dist/components/LegacyDataTable/LegacyDataTable.module.scss.js +7 -0
  109. package/dist/components/LegacyDataTable/LegacyDataTable.module.scss.js.map +1 -0
  110. package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.cjs +8 -8
  111. package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.cjs.map +1 -1
  112. package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.js +8 -7
  113. package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.js.map +1 -1
  114. package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.module.scss.cjs +9 -0
  115. package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.module.scss.cjs.map +1 -0
  116. package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.module.scss.js +7 -0
  117. package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.module.scss.js.map +1 -0
  118. package/dist/components/LegacyDataTable/SpecificState/SpecificState.cjs +8 -5
  119. package/dist/components/LegacyDataTable/SpecificState/SpecificState.cjs.map +1 -1
  120. package/dist/components/LegacyDataTable/SpecificState/SpecificState.js +8 -5
  121. package/dist/components/LegacyDataTable/SpecificState/SpecificState.js.map +1 -1
  122. package/dist/components/LegacyDataTable/SpecificState/SpecificState.module.scss.cjs +9 -0
  123. package/dist/components/LegacyDataTable/SpecificState/SpecificState.module.scss.cjs.map +1 -0
  124. package/dist/components/LegacyDataTable/SpecificState/SpecificState.module.scss.js +7 -0
  125. package/dist/components/LegacyDataTable/SpecificState/SpecificState.module.scss.js.map +1 -0
  126. package/dist/components/LegacyDataTable/StickyHeader.cjs.map +1 -1
  127. package/dist/components/LegacyDataTable/StickyHeader.js.map +1 -1
  128. package/dist/components/LegacyDataTable/cells/ClickableCell.cjs +6 -8
  129. package/dist/components/LegacyDataTable/cells/ClickableCell.cjs.map +1 -1
  130. package/dist/components/LegacyDataTable/cells/ClickableCell.d.ts +1 -1
  131. package/dist/components/LegacyDataTable/cells/ClickableCell.js +4 -5
  132. package/dist/components/LegacyDataTable/cells/ClickableCell.js.map +1 -1
  133. package/dist/components/LegacyDataTable/cells/EditableCell.cjs +5 -8
  134. package/dist/components/LegacyDataTable/cells/EditableCell.cjs.map +1 -1
  135. package/dist/components/LegacyDataTable/cells/EditableCell.d.ts +1 -1
  136. package/dist/components/LegacyDataTable/cells/EditableCell.js +3 -5
  137. package/dist/components/LegacyDataTable/cells/EditableCell.js.map +1 -1
  138. package/dist/components/LegacyDataTable/cells/cells.module.scss.cjs +9 -0
  139. package/dist/components/LegacyDataTable/cells/cells.module.scss.cjs.map +1 -0
  140. package/dist/components/LegacyDataTable/cells/cells.module.scss.js +7 -0
  141. package/dist/components/LegacyDataTable/cells/cells.module.scss.js.map +1 -0
  142. package/dist/components/LegacyDataTable/styled.cjs +119 -97
  143. package/dist/components/LegacyDataTable/styled.cjs.map +1 -1
  144. package/dist/components/LegacyDataTable/styled.d.ts +40 -28
  145. package/dist/components/LegacyDataTable/styled.js +118 -96
  146. package/dist/components/LegacyDataTable/styled.js.map +1 -1
  147. package/dist/index.cjs +10 -10
  148. package/dist/index.js +1 -1
  149. package/package.json +1 -1
  150. package/dist/components/Grid/index.cjs +0 -20
  151. package/dist/components/Grid/index.cjs.map +0 -1
  152. package/dist/components/Grid/index.js +0 -14
  153. package/dist/components/Grid/index.js.map +0 -1
  154. package/dist/components/LegacyDataTable/SpecificState/styled.cjs +0 -21
  155. package/dist/components/LegacyDataTable/SpecificState/styled.cjs.map +0 -1
  156. package/dist/components/LegacyDataTable/SpecificState/styled.d.ts +0 -17
  157. package/dist/components/LegacyDataTable/SpecificState/styled.js +0 -12
  158. package/dist/components/LegacyDataTable/SpecificState/styled.js.map +0 -1
  159. package/dist/components/LegacyDataTable/cells/styled.cjs +0 -14
  160. package/dist/components/LegacyDataTable/cells/styled.cjs.map +0 -1
  161. package/dist/components/LegacyDataTable/cells/styled.d.ts +0 -1
  162. package/dist/components/LegacyDataTable/cells/styled.js +0 -8
  163. package/dist/components/LegacyDataTable/cells/styled.js.map +0 -1
@@ -1,116 +1,138 @@
1
- import styled from 'styled-components';
2
- import { theme } from '../../theme/index.js';
1
+ import React__default, { createContext, useRef, useContext } from 'react';
2
+ import { buildClassnames } from '../../utils/buildClassnames.js';
3
+ import 'uid/secure';
4
+ import { assignCssVars } from '../../utils/assignCssVars.js';
5
+ import styles from './LegacyDataTable.module.scss.js';
3
6
  import { ScrollPosition } from './utils/constants.js';
4
7
 
5
- const { text, sizes } = theme;
6
- const { blue } = theme.colors.secondary;
7
- const { grey } = theme.colors.neutral;
8
- const { scrollbar } = theme.colors.system;
9
- const fixedColumnShadow = `
10
- position: absolute;
11
- top: 0;
12
- bottom: -1px;
13
- width: 30px;
14
- content: "";
15
- pointer-events: none;
16
- box-sizing: border-box;
17
- transition: box-shadow .3s;
18
- `;
19
- const startFixedColumnShadow = `
20
- box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);
21
- `;
22
- const endFixedColumnShadow = `
23
- box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);
24
- `;
25
- const TooltipContent = styled.div.withConfig({ displayName: "vui--TooltipContent", componentId: "vui--11ytygc" }) `display:flex;flex-direction:row;align-items:center;`;
26
- const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--1g4i0cu" }) `width:100%;overflow-x:${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};overflow-y:hidden;position:relative;border-top:1px solid ${grey.dark};border-bottom:1px solid ${grey.dark};${({ showScrollbar }) => showScrollbar
27
- ? `
28
- scrollbar-width: auto;
29
-
30
- &::-webkit-scrollbar {
31
- margin-top: 10px;
32
- width: 6px;
33
- height: 6px;
34
- }
35
-
36
- &::-webkit-scrollbar-track {
37
- background: ${scrollbar.background};
38
- }
39
-
40
- &::-webkit-scrollbar-thumb {
41
- background: ${scrollbar.thumb};
42
- border-radius: 4px;
8
+ /* --- Instance ID for scoped styles --- */
9
+ let legacyTableIdCounter = 0;
10
+ function useLegacyTableId() {
11
+ const idRef = useRef(null);
12
+ if (idRef.current === null) {
13
+ legacyTableIdCounter += 1;
14
+ idRef.current = `ldt-${legacyTableIdCounter}`;
43
15
  }
44
- `
45
- : ''} ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) => scrollDisabled
46
- ? ''
47
- : `
16
+ return idRef.current;
17
+ }
18
+ const TableIdContext = createContext('');
19
+ function useScopedShadowCss({ scrollDisabled, scrollPosition, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, }) {
20
+ if (scrollDisabled)
21
+ return '';
22
+ if (!lastStartFixedColumnsIndex && !firstEndFixedColumnsIndex)
23
+ return '';
24
+ const fixedColumnShadow = `
25
+ position: absolute;
26
+ top: 0;
27
+ bottom: -1px;
28
+ width: 30px;
29
+ content: "";
30
+ pointer-events: none;
31
+ box-sizing: border-box;
32
+ transition: box-shadow .3s;
33
+ `;
34
+ const startShadowVisible = scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end;
35
+ const endShadowVisible = scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle;
36
+ const startShadow = startShadowVisible
37
+ ? 'box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);'
38
+ : '';
39
+ const endShadow = endShadowVisible
40
+ ? 'box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);'
41
+ : '';
42
+ const startBlock = lastStartFixedColumnsIndex ? `
48
43
  td:nth-child(${lastStartFixedColumnsIndex}):after,
49
44
  th:nth-child(${lastStartFixedColumnsIndex}):after {
50
45
  right: 0;
51
46
  transform: translate(100%);
52
- ${fixedColumnShadow};
53
-
54
- ${scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end
55
- ? startFixedColumnShadow
56
- : ''};
57
- };
58
-
47
+ ${fixedColumnShadow}
48
+ ${startShadow}
49
+ }
50
+ ` : '';
51
+ const endBlock = firstEndFixedColumnsIndex ? `
59
52
  td:nth-last-child(${firstEndFixedColumnsIndex}):after,
60
53
  th:nth-last-child(${firstEndFixedColumnsIndex}):after {
61
54
  left: 0;
62
55
  transform: translate(-100%);
63
- ${fixedColumnShadow};
64
-
65
- ${scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle
66
- ? endFixedColumnShadow
67
- : ''};
68
- };
69
- `}`;
70
- const WrapperBordered = styled(Wrapper).withConfig({ displayName: "vui--WrapperBordered", componentId: "vui--wtdkab" }) `border:1px solid ${grey.dark};border-radius:4px;`;
71
- const Head = styled.thead.withConfig({ displayName: "vui--Head", componentId: "vui--1j5avrf" }) `background-color:white;`;
72
- const Body = styled.tbody.withConfig({ displayName: "vui--Body", componentId: "vui--n8uysg" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& + & > tr:first-child > td{border-top:1px solid ${grey.base};}tr:not(:first-child)> td{border-top:1px solid transparent;}&&& tr:hover td{background-color:#ebf4fb;}`;
73
- styled.tfoot.withConfig({ displayName: "vui--Foot", componentId: "vui--qckqty" }) `& td{background-color:${grey.lightest};padding:1.5rem 1rem;border-top:1px solid ${blue.base};}`;
74
- const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--10drh9k" }) `&.hidden{visibility:collapse;}${({ accentColor }) => accentColor &&
75
- `
76
- & > td:first-child::before {
77
- content: "";
78
- position: absolute;
79
- top: 0;
80
- left: 0;
81
- bottom: 0;
82
- width: 4px;
83
- background-color: ${accentColor};
56
+ ${fixedColumnShadow}
57
+ ${endShadow}
84
58
  }
85
- `}`;
86
- const Cell = styled.td.withConfig({ displayName: "vui--Cell", componentId: "vui--tljl4p" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.bodySmall.fontFamily};font-size:${text.bodySmall.fontSize};font-weight:${text.bodySmall.fontWeight};color:${text.bodySmall.color};line-height:${sizes.base};width:${({ grow }) => (grow ? '100%' : 'auto')};& > *{vertical-align:middle;}`;
87
- const HeaderCell = styled(Cell).attrs({
88
- as: 'th',
89
- }).withConfig({ displayName: "vui--HeaderCell", componentId: "vui--10p2duv" }) `user-select:none;border-bottom:1px solid ${grey.dark};font-family:${text.bodySmallBold.fontFamily};font-size:${text.bodySmallBold.fontSize};font-weight:${text.bodySmallBold.fontWeight};color:${text.bodySmallBold.color};& span{white-space:pre-line;}&.sortable:hover{cursor:pointer;background-color:${grey.light};}`;
59
+ ` : '';
60
+ return `${startBlock}${endBlock}`;
61
+ }
62
+ const Wrapper = React__default.forwardRef(({ scrollDisabled, scrollPosition, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, showScrollbar, className, children, ...rest }, ref) => {
63
+ const tableId = useLegacyTableId();
64
+ const scopedCss = useScopedShadowCss({
65
+ scrollDisabled,
66
+ scrollPosition,
67
+ lastStartFixedColumnsIndex,
68
+ firstEndFixedColumnsIndex,
69
+ });
70
+ return (React__default.createElement("div", { ref: ref, "data-legacy-table-id": tableId, className: buildClassnames([
71
+ styles.wrapper,
72
+ scrollDisabled ? styles.wrapperScrollDisabled : styles.wrapperScrollEnabled,
73
+ showScrollbar && styles.wrapperShowScrollbar,
74
+ className,
75
+ ]), ...rest },
76
+ scopedCss && React__default.createElement("style", null, `[data-legacy-table-id="${tableId}"] { ${scopedCss} }`),
77
+ React__default.createElement(TableIdContext.Provider, { value: tableId }, children)));
78
+ });
79
+ Wrapper.displayName = 'Wrapper';
80
+ const WrapperBordered = React__default.forwardRef((props, ref) => (React__default.createElement(Wrapper, { ref: ref, ...props, className: buildClassnames([styles.wrapperBordered, props.className]) })));
81
+ WrapperBordered.displayName = 'WrapperBordered';
82
+ /* --- TooltipContent --- */
83
+ const TooltipContent = ({ children, ...rest }) => (React__default.createElement("div", { className: styles.tooltipContent, ...rest }, children));
84
+ /* --- Head --- */
85
+ const Head = ({ children, ...rest }) => (React__default.createElement("thead", { className: styles.head, ...rest }, children));
86
+ const Body = ({ fixedColumnsStyle, className, children, ...rest }) => {
87
+ const tableId = useContext(TableIdContext);
88
+ const scopeSelector = tableId ? `[data-legacy-table-id="${tableId}"]` : '';
89
+ return (React__default.createElement("tbody", { className: buildClassnames([styles.body, styles.bodyBorderTop, className]), ...rest },
90
+ fixedColumnsStyle && React__default.createElement("style", null, `${scopeSelector} .${styles.body} tr { ${fixedColumnsStyle} }`),
91
+ children));
92
+ };
93
+ const Row = ({ accentColor, className, children, style, ...rest }) => (React__default.createElement("tr", { className: buildClassnames([styles.row, accentColor && styles.rowAccentColor, className]), style: {
94
+ ...assignCssVars({ rowAccentColor: accentColor }),
95
+ ...style,
96
+ }, ...rest }, children));
97
+ const Cell = ({ align, grow, className, children, style, ...rest }) => (React__default.createElement("td", { className: buildClassnames([styles.cell, grow && styles.cellGrow, className]), style: {
98
+ ...assignCssVars({ cellAlign: align }),
99
+ ...style,
100
+ }, ...rest }, children));
101
+ const HeaderCell = ({ align, grow, className, children, style, ...rest }) => (React__default.createElement("th", { className: buildClassnames([styles.headerCell, grow && styles.cellGrow, className]), style: {
102
+ ...assignCssVars({ cellAlign: align }),
103
+ ...style,
104
+ }, ...rest }, children));
105
+ /* --- HeaderCellLayout --- */
90
106
  const alignmentMap = {
91
107
  left: 'flex-start',
92
108
  center: 'center',
93
109
  right: 'flex-end',
94
110
  };
95
- const HeaderCellLayout = styled.div.withConfig({ displayName: "vui--HeaderCellLayout", componentId: "vui--13i0t50" }) `display:flex;align-items:center;justify-content:${({ align }) => (align ? alignmentMap[align] : 'flex-start')};& > * + *{margin-left:0.25rem;}`;
96
- const Table = styled.table.withConfig({ displayName: "vui--Table", componentId: "vui--1bp83gy" }) `width:100%;border-spacing:0;table-layout:${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};${({ striped }) => striped &&
97
- `
98
- & ${Body}:nth-child(even) td {
99
- background-color: ${grey.lightest};
100
- }
101
- `} & *{box-sizing:border-box;${({ tableLoading }) => tableLoading &&
102
- `
103
- user-select: none;
104
- pointer-events: none;
105
- `}}${({ noWrap }) => noWrap &&
106
- `
107
- & ${HeaderCell}, & ${HeaderCell} span {
108
- white-space: nowrap;
109
- }
110
- `}`;
111
- const Footer = styled.tfoot.withConfig({ displayName: "vui--Footer", componentId: "vui--44p3gi" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& ${Cell}{border-top:1px solid ${grey.dark};background-color:${grey.lightest};padding-top:${sizes.base};padding-bottom:${sizes.base};line-height:2rem;}`;
112
- const StickyHeaderWrapper = styled.div.withConfig({ displayName: "vui--StickyHeaderWrapper", componentId: "vui--wokb93" }) `position:fixed;top:0;z-index:2;overflow-x:hidden;`;
113
- const FakeHeaderTable = styled(Table).withConfig({ displayName: "vui--FakeHeaderTable", componentId: "vui--6s4d56" }) ``;
111
+ const HeaderCellLayout = ({ align, className, children, style, ...rest }) => (React__default.createElement("div", { className: buildClassnames([styles.headerCellLayout, className]), style: {
112
+ ...assignCssVars({ layoutAlign: align ? alignmentMap[align] : undefined }),
113
+ ...style,
114
+ }, ...rest }, children));
115
+ const Table = React__default.forwardRef(({ striped, noWrap, tableLoading, isFixedLayout, className, children, ...rest }, ref) => (React__default.createElement("table", { ref: ref, className: buildClassnames([
116
+ styles.table,
117
+ isFixedLayout && styles.tableFixedLayout,
118
+ tableLoading && styles.tableLoading,
119
+ striped && styles.tableStriped,
120
+ noWrap && styles.tableNoWrap,
121
+ className,
122
+ ]), ...rest }, children)));
123
+ Table.displayName = 'Table';
124
+ const Footer = ({ fixedColumnsStyle, className, children, ...rest }) => {
125
+ const tableId = useContext(TableIdContext);
126
+ const scopeSelector = tableId ? `[data-legacy-table-id="${tableId}"]` : '';
127
+ return (React__default.createElement("tfoot", { className: buildClassnames([styles.footer, className]), ...rest },
128
+ fixedColumnsStyle && React__default.createElement("style", null, `${scopeSelector} .${styles.footer} tr { ${fixedColumnsStyle} }`),
129
+ children));
130
+ };
131
+ /* --- StickyHeaderWrapper --- */
132
+ const StickyHeaderWrapper = React__default.forwardRef(({ className, children, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.stickyHeaderWrapper, className]), ...rest }, children)));
133
+ StickyHeaderWrapper.displayName = 'StickyHeaderWrapper';
134
+ /* --- FakeHeaderTable (same as Table) --- */
135
+ const FakeHeaderTable = Table;
114
136
 
115
137
  export { Body, Cell, FakeHeaderTable, Footer, Head, HeaderCell, HeaderCellLayout, Row, StickyHeaderWrapper, Table, TooltipContent, Wrapper, WrapperBordered };
116
138
  //# sourceMappingURL=styled.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"styled.js","sources":["../../../src/components/LegacyDataTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { NoWrapType, StripedType } from './utils/types';\nimport { ScrollPosition } from './utils/constants';\n\nconst { text, sizes } = theme;\nconst { blue } = theme.colors.secondary;\nconst { grey } = theme.colors.neutral;\nconst { scrollbar } = theme.colors.system;\n\nconst fixedColumnShadow = `\n position: absolute;\n top: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n transition: box-shadow .3s;\n`;\n\nconst startFixedColumnShadow = `\n box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\nconst endFixedColumnShadow = `\n box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\ntype WrapperPropTypes = {\n scrollDisabled: boolean;\n scrollPosition?: ScrollPosition;\n lastStartFixedColumnsIndex?: number;\n firstEndFixedColumnsIndex?: number;\n showScrollbar?: boolean;\n};\n\nexport const TooltipContent = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n`;\n\nexport const Wrapper = styled.div<WrapperPropTypes>`\n width: 100%;\n overflow-x: ${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};\n overflow-y: hidden;\n position: relative;\n border-top: 1px solid ${grey.dark};\n border-bottom: 1px solid ${grey.dark};\n\n ${({ showScrollbar }) =>\n showScrollbar\n ? `\n scrollbar-width: auto;\n\n &::-webkit-scrollbar {\n margin-top: 10px;\n width: 6px;\n height: 6px;\n }\n \n &::-webkit-scrollbar-track {\n background: ${scrollbar.background}; \n }\n \n &::-webkit-scrollbar-thumb {\n background: ${scrollbar.thumb};\n border-radius: 4px; \n }\n `\n : ''}\n\n ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) =>\n scrollDisabled\n ? ''\n : `\n td:nth-child(${lastStartFixedColumnsIndex}):after,\n th:nth-child(${lastStartFixedColumnsIndex}):after {\n right: 0;\n transform: translate(100%);\n ${fixedColumnShadow};\n\n ${\n scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end\n ? startFixedColumnShadow\n : ''\n };\n };\n\n td:nth-last-child(${firstEndFixedColumnsIndex}):after,\n th:nth-last-child(${firstEndFixedColumnsIndex}):after {\n left: 0;\n transform: translate(-100%);\n ${fixedColumnShadow};\n\n ${\n scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle\n ? endFixedColumnShadow\n : ''\n };\n };\n `}\n`;\n\nexport const WrapperBordered = styled(Wrapper)`\n border: 1px solid ${grey.dark};\n border-radius: 4px;\n`;\n\nexport const Head = styled.thead`\n background-color: white;\n`;\n\nexport const Body = styled.tbody<{ fixedColumnsStyle?: string }>`\n tr {\n ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n }\n\n & + & > tr:first-child > td {\n border-top: 1px solid ${grey.base};\n }\n\n tr:not(:first-child) > td {\n border-top: 1px solid transparent;\n }\n\n &&& tr:hover td {\n background-color: #ebf4fb; /* TODO: Remove magic hex value */\n }\n`;\n\nexport const Foot = styled.tfoot`\n & td {\n background-color: ${grey.lightest};\n padding: 1.5rem 1rem;\n border-top: 1px solid ${blue.base};\n }\n`;\n\nexport interface RowProps {\n accentColor?: string;\n}\n\nexport const Row = styled.tr<RowProps>`\n &.hidden {\n visibility: collapse;\n }\n\n ${({ accentColor }) =>\n accentColor &&\n `\n & > td:first-child::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 4px;\n background-color: ${accentColor}; \n }\n `}\n`;\n\nexport interface CellProps {\n align?: 'left' | 'center' | 'right';\n grow?: boolean;\n}\n\nexport const Cell = styled.td<CellProps>`\n position: relative;\n padding: 1.25rem 1rem;\n text-align: ${({ align }) => align || 'left'};\n background-color: white;\n\n font-family: ${text.bodySmall.fontFamily};\n font-size: ${text.bodySmall.fontSize};\n font-weight: ${text.bodySmall.fontWeight};\n color: ${text.bodySmall.color};\n line-height: ${sizes.base};\n\n width: ${({ grow }) => (grow ? '100%' : 'auto')};\n\n & > * {\n vertical-align: middle;\n }\n`;\n\nexport const HeaderCell = styled(Cell).attrs({\n as: 'th',\n})`\n user-select: none;\n border-bottom: 1px solid ${grey.dark};\n\n font-family: ${text.bodySmallBold.fontFamily};\n font-size: ${text.bodySmallBold.fontSize};\n font-weight: ${text.bodySmallBold.fontWeight};\n color: ${text.bodySmallBold.color};\n\n & span {\n white-space: pre-line;\n }\n\n &.sortable:hover {\n cursor: pointer;\n background-color: ${grey.light};\n }\n`;\n\nconst alignmentMap = {\n left: 'flex-start',\n center: 'center',\n right: 'flex-end',\n};\n\nexport interface HeaderCellLayoutProps {\n align?: 'left' | 'center' | 'right';\n}\n\nexport const HeaderCellLayout = styled.div<HeaderCellLayoutProps>`\n display: flex;\n align-items: center;\n justify-content: ${({ align }) => (align ? alignmentMap[align] : 'flex-start')};\n\n & > * + * {\n margin-left: 0.25rem;\n }\n`;\n\ntype TablePropTypes = {\n striped?: StripedType;\n noWrap?: NoWrapType;\n tableLoading?: boolean;\n isFixedLayout?: boolean;\n};\n\nexport const Table = styled.table<TablePropTypes>`\n width: 100%;\n border-spacing: 0;\n table-layout: ${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};\n\n ${({ striped }) =>\n striped &&\n `\n & ${Body}:nth-child(even) td {\n background-color: ${grey.lightest};\n }\n `}\n\n & * {\n box-sizing: border-box;\n\n ${({ tableLoading }) =>\n tableLoading &&\n `\n user-select: none;\n pointer-events: none;\n `}\n }\n\n ${({ noWrap }) =>\n noWrap &&\n `\n & ${HeaderCell}, & ${HeaderCell} span {\n white-space: nowrap;\n }\n `}\n`;\n\nexport const Footer = styled.tfoot<{ fixedColumnsStyle?: string }>`\n tr {\n ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n }\n\n & ${Cell} {\n border-top: 1px solid ${grey.dark};\n background-color: ${grey.lightest};\n padding-top: ${sizes.base};\n padding-bottom: ${sizes.base};\n line-height: 2rem;\n }\n`;\n\nexport const StickyHeaderWrapper = styled.div`\n position: fixed;\n top: 0;\n z-index: 2;\n overflow-x: hidden;\n`;\n\nexport const FakeHeaderTable = styled(Table)``;\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"styled.js","sources":["../../../src/components/LegacyDataTable/styled.tsx"],"sourcesContent":["import React, { createContext, useContext, useRef } from 'react';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport styles from './LegacyDataTable.module.scss';\nimport { ScrollPosition } from './utils/constants';\n\n/* --- Instance ID for scoped styles --- */\n\nlet legacyTableIdCounter = 0;\n\nfunction useLegacyTableId(): string {\n const idRef = useRef<string | null>(null);\n\n if (idRef.current === null) {\n legacyTableIdCounter += 1;\n idRef.current = `ldt-${legacyTableIdCounter}`;\n }\n\n return idRef.current;\n}\n\n/**\n * Reset the counter between test runs for deterministic snapshots.\n * @internal Test utility only.\n */\nexport function resetLegacyTableIdCounter(): void {\n legacyTableIdCounter = 0;\n}\n\nconst TableIdContext = createContext<string>('');\n\n/* --- Wrapper --- */\n\ntype WrapperPropTypes = {\n scrollDisabled: boolean;\n scrollPosition?: ScrollPosition;\n lastStartFixedColumnsIndex?: number;\n firstEndFixedColumnsIndex?: number;\n showScrollbar?: boolean;\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n};\n\nfunction useScopedShadowCss({\n scrollDisabled,\n scrollPosition,\n lastStartFixedColumnsIndex,\n firstEndFixedColumnsIndex,\n}: Pick<WrapperPropTypes, 'scrollDisabled' | 'scrollPosition' | 'lastStartFixedColumnsIndex' | 'firstEndFixedColumnsIndex'>): string {\n if (scrollDisabled) return '';\n if (!lastStartFixedColumnsIndex && !firstEndFixedColumnsIndex) return '';\n\n const fixedColumnShadow = `\n position: absolute;\n top: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n transition: box-shadow .3s;\n `;\n\n const startShadowVisible =\n scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end;\n const endShadowVisible =\n scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle;\n\n const startShadow = startShadowVisible\n ? 'box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);'\n : '';\n const endShadow = endShadowVisible\n ? 'box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);'\n : '';\n\n const startBlock = lastStartFixedColumnsIndex ? `\n td:nth-child(${lastStartFixedColumnsIndex}):after,\n th:nth-child(${lastStartFixedColumnsIndex}):after {\n right: 0;\n transform: translate(100%);\n ${fixedColumnShadow}\n ${startShadow}\n }\n ` : '';\n\n const endBlock = firstEndFixedColumnsIndex ? `\n td:nth-last-child(${firstEndFixedColumnsIndex}):after,\n th:nth-last-child(${firstEndFixedColumnsIndex}):after {\n left: 0;\n transform: translate(-100%);\n ${fixedColumnShadow}\n ${endShadow}\n }\n ` : '';\n\n return `${startBlock}${endBlock}`;\n}\n\nexport const Wrapper = React.forwardRef<HTMLDivElement, WrapperPropTypes>(\n (\n {\n scrollDisabled,\n scrollPosition,\n lastStartFixedColumnsIndex,\n firstEndFixedColumnsIndex,\n showScrollbar,\n className,\n children,\n ...rest\n },\n ref,\n ) => {\n const tableId = useLegacyTableId();\n const scopedCss = useScopedShadowCss({\n scrollDisabled,\n scrollPosition,\n lastStartFixedColumnsIndex,\n firstEndFixedColumnsIndex,\n });\n\n return (\n <div\n ref={ref}\n data-legacy-table-id={tableId}\n className={buildClassnames([\n styles.wrapper,\n scrollDisabled ? styles.wrapperScrollDisabled : styles.wrapperScrollEnabled,\n showScrollbar && styles.wrapperShowScrollbar,\n className,\n ])}\n {...rest}\n >\n {scopedCss && <style>{`[data-legacy-table-id=\"${tableId}\"] { ${scopedCss} }`}</style>}\n <TableIdContext.Provider value={tableId}>\n {children}\n </TableIdContext.Provider>\n </div>\n );\n },\n);\n\nWrapper.displayName = 'Wrapper';\n\nexport const WrapperBordered = React.forwardRef<HTMLDivElement, WrapperPropTypes>(\n (props, ref) => (\n <Wrapper ref={ref} {...props} className={buildClassnames([styles.wrapperBordered, props.className])} />\n ),\n);\n\nWrapperBordered.displayName = 'WrapperBordered';\n\n/* --- TooltipContent --- */\n\nexport const TooltipContent = ({ children, ...rest }: React.HTMLAttributes<HTMLDivElement>) => (\n <div className={styles.tooltipContent} {...rest}>\n {children}\n </div>\n);\n\n/* --- Head --- */\n\nexport const Head = ({ children, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>) => (\n <thead className={styles.head} {...rest}>\n {children}\n </thead>\n);\n\n/* --- Body --- */\n\ninterface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {\n fixedColumnsStyle?: string;\n}\n\nexport const Body = ({ fixedColumnsStyle, className, children, ...rest }: BodyProps) => {\n const tableId = useContext(TableIdContext);\n const scopeSelector = tableId ? `[data-legacy-table-id=\"${tableId}\"]` : '';\n return (\n <tbody className={buildClassnames([styles.body, styles.bodyBorderTop, className])} {...rest}>\n {/* SAFETY: fixedColumnsStyle is internally generated by convertFixedColumnInlineStyleToStyled. Do not pass user-controlled strings. */}\n {fixedColumnsStyle && <style>{`${scopeSelector} .${styles.body} tr { ${fixedColumnsStyle} }`}</style>}\n {children}\n </tbody>\n );\n};\n\n/* --- Foot --- */\n\nexport const Foot = ({ children, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>) => (\n <tfoot className={styles.foot} {...rest}>\n {children}\n </tfoot>\n);\n\n/* --- Row --- */\n\nexport interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n accentColor?: string;\n}\n\nexport const Row = ({ accentColor, className, children, style, ...rest }: RowProps) => (\n <tr\n className={buildClassnames([styles.row, accentColor && styles.rowAccentColor, className])}\n style={{\n ...assignCssVars({ rowAccentColor: accentColor }),\n ...style,\n }}\n {...rest}\n >\n {children}\n </tr>\n);\n\n/* --- Cell --- */\n\nexport interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n align?: 'left' | 'center' | 'right';\n grow?: boolean;\n}\n\nexport const Cell = ({ align, grow, className, children, style, ...rest }: CellProps) => (\n <td\n className={buildClassnames([styles.cell, grow && styles.cellGrow, className])}\n style={{\n ...assignCssVars({ cellAlign: align }),\n ...style,\n }}\n {...rest}\n >\n {children}\n </td>\n);\n\n/* --- HeaderCell --- */\n\nexport interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n align?: 'left' | 'center' | 'right';\n grow?: boolean;\n}\n\nexport const HeaderCell = ({ align, grow, className, children, style, ...rest }: HeaderCellProps) => (\n <th\n className={buildClassnames([styles.headerCell, grow && styles.cellGrow, className])}\n style={{\n ...assignCssVars({ cellAlign: align }),\n ...style,\n }}\n {...rest}\n >\n {children}\n </th>\n);\n\n/* --- HeaderCellLayout --- */\n\nconst alignmentMap: Record<string, string> = {\n left: 'flex-start',\n center: 'center',\n right: 'flex-end',\n};\n\nexport interface HeaderCellLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n align?: 'left' | 'center' | 'right';\n}\n\nexport const HeaderCellLayout = ({ align, className, children, style, ...rest }: HeaderCellLayoutProps) => (\n <div\n className={buildClassnames([styles.headerCellLayout, className])}\n style={{\n ...assignCssVars({ layoutAlign: align ? alignmentMap[align] : undefined }),\n ...style,\n }}\n {...rest}\n >\n {children}\n </div>\n);\n\n/* --- Table --- */\n\ninterface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {\n striped?: boolean;\n noWrap?: boolean;\n tableLoading?: boolean;\n isFixedLayout?: boolean;\n}\n\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n ({ striped, noWrap, tableLoading, isFixedLayout, className, children, ...rest }, ref) => (\n <table\n ref={ref}\n className={buildClassnames([\n styles.table,\n isFixedLayout && styles.tableFixedLayout,\n tableLoading && styles.tableLoading,\n striped && styles.tableStriped,\n noWrap && styles.tableNoWrap,\n className,\n ])}\n {...rest}\n >\n {children}\n </table>\n ),\n);\n\nTable.displayName = 'Table';\n\n/* --- Footer --- */\n\ninterface FooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {\n fixedColumnsStyle?: string;\n}\n\nexport const Footer = ({ fixedColumnsStyle, className, children, ...rest }: FooterProps) => {\n const tableId = useContext(TableIdContext);\n const scopeSelector = tableId ? `[data-legacy-table-id=\"${tableId}\"]` : '';\n return (\n <tfoot className={buildClassnames([styles.footer, className])} {...rest}>\n {fixedColumnsStyle && <style>{`${scopeSelector} .${styles.footer} tr { ${fixedColumnsStyle} }`}</style>}\n {children}\n </tfoot>\n );\n};\n\n/* --- StickyHeaderWrapper --- */\n\nexport const StickyHeaderWrapper = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, children, ...rest }, ref) => (\n <div ref={ref} className={buildClassnames([styles.stickyHeaderWrapper, className])} {...rest}>\n {children}\n </div>\n ),\n);\n\nStickyHeaderWrapper.displayName = 'StickyHeaderWrapper';\n\n/* --- FakeHeaderTable (same as Table) --- */\n\nexport const FakeHeaderTable = Table;\n"],"names":["React"],"mappings":"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"}
package/dist/index.cjs CHANGED
@@ -41,7 +41,7 @@ var Divider = require('./components/Divider/Divider.cjs');
41
41
  var Dropdown = require('./components/Dropdown/Dropdown.cjs');
42
42
  var FeatureBanner = require('./components/FeatureBanner/FeatureBanner.cjs');
43
43
  var FilterTag = require('./components/FilterTag/FilterTag.cjs');
44
- var index$1 = require('./components/Grid/index.cjs');
44
+ var Grid = require('./components/Grid/Grid.cjs');
45
45
  var Image = require('./components/Image/Image.cjs');
46
46
  var InputAffix = require('./components/InputAffix/InputAffix.cjs');
47
47
  var InputGroup = require('./components/InputGroup/InputGroup.cjs');
@@ -68,7 +68,7 @@ var Stepper = require('./components/Stepper/Stepper.cjs');
68
68
  var SystemBanner = require('./components/SystemBanner/SystemBanner.cjs');
69
69
  var Tag = require('./components/Tag/Tag.cjs');
70
70
  var Text = require('./components/Text/Text.cjs');
71
- var index$4 = require('./components/TextField/index.cjs');
71
+ var index$3 = require('./components/TextField/index.cjs');
72
72
  var ToastsLayout = require('./components/ToastsLayout/ToastsLayout.cjs');
73
73
  var Toggle = require('./components/Toggle/Toggle.cjs');
74
74
  var ToggleButton = require('./components/ToggleButton/ToggleButton.cjs');
@@ -84,13 +84,13 @@ var ViewTab = require('./components/ViewTab/ViewTab.cjs');
84
84
  var ViewsContainer = require('./components/ViewsContainer/ViewsContainer.cjs');
85
85
  var WeightInput = require('./components/WeightInput/WeightInput.cjs');
86
86
  var Indicator = require('./components/Indicator/Indicator.cjs');
87
- var index$3 = require('./components/SelectDropdown/index.cjs');
87
+ var index$2 = require('./components/SelectDropdown/index.cjs');
88
88
  var ThemeInjector = require('./components/ThemeInjector/ThemeInjector.cjs');
89
89
  var TokenProvider = require('./components/TokenProvider/TokenProvider.cjs');
90
90
  var DataGrid = require('./components/DataGrid/DataGrid.cjs');
91
91
  var FlexCol = require('./components/Flex/FlexCol/FlexCol.cjs');
92
92
  var FlexRow = require('./components/Flex/FlexRow/FlexRow.cjs');
93
- var index$2 = require('./components/PhoneInput/index.cjs');
93
+ var index$1 = require('./components/PhoneInput/index.cjs');
94
94
  var ChannelMark = require('./components/ChannelMark/ChannelMark.cjs');
95
95
  var constants$2 = require('./components/ChannelMark/constants.cjs');
96
96
  var CarrierMark = require('./components/CarrierMark/CarrierMark.cjs');
@@ -118,7 +118,7 @@ var assignCssVars = require('./utils/assignCssVars.cjs');
118
118
  var buildChannelMarkUrl = require('./utils/buildChannelMarkUrl.cjs');
119
119
  var buildCarrierMarkUrl = require('./utils/buildCarrierMarkUrl.cjs');
120
120
  var getContextAwareLink = require('./utils/getContextAwareLink.cjs');
121
- var index$5 = require('./theme/index.cjs');
121
+ var index$4 = require('./theme/index.cjs');
122
122
  var AccountsIcon = require('./icons/design-system/components/AccountsIcon.cjs');
123
123
  var AccountsOutlineIcon = require('./icons/design-system/components/AccountsOutlineIcon.cjs');
124
124
  var AddIcon = require('./icons/design-system/components/AddIcon.cjs');
@@ -401,7 +401,7 @@ exports.Divider = Divider.Divider;
401
401
  exports.Dropdown = Dropdown.Dropdown;
402
402
  exports.FeatureBanner = FeatureBanner.FeatureBanner;
403
403
  exports.FilterTag = FilterTag.FilterTag;
404
- exports.Grid = index$1.Grid;
404
+ exports.Grid = Grid.Grid;
405
405
  exports.Image = Image.Image;
406
406
  exports.InputAffix = InputAffix.InputAffix;
407
407
  exports.InputGroup = InputGroup.InputGroup;
@@ -428,7 +428,7 @@ exports.Stepper = Stepper.Stepper;
428
428
  exports.SystemBanner = SystemBanner.SystemBanner;
429
429
  exports.Tag = Tag.Tag;
430
430
  exports.Text = Text.Text;
431
- exports.TextField = index$4.TextField;
431
+ exports.TextField = index$3.TextField;
432
432
  exports.ToastsLayout = ToastsLayout.ToastsLayout;
433
433
  exports.Toggle = Toggle.Toggle;
434
434
  exports.ToggleButton = ToggleButton.ToggleButton;
@@ -451,13 +451,13 @@ exports.ViewTab = ViewTab.ViewTab;
451
451
  exports.ViewsContainer = ViewsContainer.ViewsContainer;
452
452
  exports.WeightInput = WeightInput.WeightInput;
453
453
  exports.Indicator = Indicator.Indicator;
454
- exports.SelectDropdown = index$3.SelectDropdown;
454
+ exports.SelectDropdown = index$2.SelectDropdown;
455
455
  exports.ThemeInjector = ThemeInjector.ThemeInjector;
456
456
  exports.TokenProvider = TokenProvider.TokenProvider;
457
457
  exports.DataGrid = DataGrid.DataGrid;
458
458
  exports.FlexCol = FlexCol.FlexCol;
459
459
  exports.FlexRow = FlexRow.FlexRow;
460
- exports.PhoneInput = index$2.PhoneInput;
460
+ exports.PhoneInput = index$1.PhoneInput;
461
461
  exports.ChannelMark = ChannelMark.ChannelMark;
462
462
  exports.ChannelTypeMap = constants$2.ChannelTypeMap;
463
463
  exports.CarrierMark = CarrierMark.CarrierMark;
@@ -487,7 +487,7 @@ exports.assignCssVars = assignCssVars.assignCssVars;
487
487
  exports.buildChannelMarkUrl = buildChannelMarkUrl.buildChannelMarkUrl;
488
488
  exports.buildCarrierMarkUrl = buildCarrierMarkUrl.buildCarrierMarkUrl;
489
489
  exports.getContextAwareLink = getContextAwareLink.getContextAwareLink;
490
- exports.theme = index$5.theme;
490
+ exports.theme = index$4.theme;
491
491
  exports.AccountsIcon = AccountsIcon.ReactComponent;
492
492
  exports.AccountsOutlineIcon = AccountsOutlineIcon.ReactComponent;
493
493
  exports.AddIcon = AddIcon.ReactComponent;
package/dist/index.js CHANGED
@@ -39,7 +39,7 @@ export { Divider } from './components/Divider/Divider.js';
39
39
  export { Dropdown } from './components/Dropdown/Dropdown.js';
40
40
  export { FeatureBanner } from './components/FeatureBanner/FeatureBanner.js';
41
41
  export { FilterTag } from './components/FilterTag/FilterTag.js';
42
- export { Grid } from './components/Grid/index.js';
42
+ export { Grid } from './components/Grid/Grid.js';
43
43
  export { Image } from './components/Image/Image.js';
44
44
  export { InputAffix } from './components/InputAffix/InputAffix.js';
45
45
  export { InputGroup } from './components/InputGroup/InputGroup.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veeqo/ui",
3
- "version": "14.9.1",
3
+ "version": "14.10.0-beta-1",
4
4
  "description": "New optimised component library for Veeqo.",
5
5
  "author": "Robert Wealthall",
6
6
  "license": "ISC",
@@ -1,20 +0,0 @@
1
- 'use strict';
2
-
3
- var styled = require('styled-components');
4
- var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
5
- var sizes = require('../../theme/modules/sizes.cjs');
6
-
7
- function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
8
-
9
- var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
10
-
11
- const Grid = styled__default.default(BaseContainer.BaseContainer).withConfig({
12
- shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),
13
- }) `
14
- display: grid;
15
- grid-template-columns: repeat(${({ columns }) => columns}, 1fr);
16
- grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes.sizes[spacing] : 0)};
17
- `;
18
-
19
- exports.Grid = Grid;
20
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.cjs","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { GridProps } from './types';\n\nexport const Grid = styled(BaseContainer).withConfig({\n shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),\n})<GridProps>`\n display: grid;\n grid-template-columns: repeat(${({ columns }) => columns}, 1fr);\n grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};\n`;\n"],"names":["styled","BaseContainer","sizes"],"mappings":";;;;;;;;;;AAOO,MAAM,IAAI,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,UAAU,CAAC;AACnD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AACpE,CAAA,CAAC,CAAW;;AAEqB,gCAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA;cAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAGC,WAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;;;;;"}
@@ -1,14 +0,0 @@
1
- import styled from 'styled-components';
2
- import { BaseContainer } from '../BaseContainer/BaseContainer.js';
3
- import { sizes } from '../../theme/modules/sizes.js';
4
-
5
- const Grid = styled(BaseContainer).withConfig({
6
- shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),
7
- }) `
8
- display: grid;
9
- grid-template-columns: repeat(${({ columns }) => columns}, 1fr);
10
- grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};
11
- `;
12
-
13
- export { Grid };
14
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { GridProps } from './types';\n\nexport const Grid = styled(BaseContainer).withConfig({\n shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),\n})<GridProps>`\n display: grid;\n grid-template-columns: repeat(${({ columns }) => columns}, 1fr);\n grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};\n`;\n"],"names":[],"mappings":";;;;AAOO,MAAM,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC;AACnD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AACpE,CAAA,CAAC,CAAW;;AAEqB,gCAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA;cAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;;;;;"}
@@ -1,21 +0,0 @@
1
- 'use strict';
2
-
3
- var styled = require('styled-components');
4
- var index = require('../../../theme/index.cjs');
5
- var BaseContainer = require('../../BaseContainer/BaseContainer.cjs');
6
- var Text = require('../../Text/Text.cjs');
7
-
8
- function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
9
-
10
- var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
11
-
12
- const SpecificStateContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--SpecificStateContainer", componentId: "vui--991hgo" }) `display:flex;flex-direction:column;justify-content:center;align-items:center;height:${(props) => props.height}px;background:white;`;
13
- const EllipseContainer = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--EllipseContainer", componentId: "vui--1oi4ebm" }) `display:flex;justify-content:center;align-items:center;width:120px;height:120px;border-radius:100px;background:${index.theme.colors.neutral.grey.base};svg{width:64px !important;height:64px !important;}`;
14
- const TitleText = styled__default.default(Text.Text).withConfig({ displayName: "vui--TitleText", componentId: "vui--pj8i0k" }) `margin-top:24px;`;
15
- const SubTitleText = styled__default.default(Text.Text).withConfig({ displayName: "vui--SubTitleText", componentId: "vui--19x6udv" }) `margin-top:8px;`;
16
-
17
- exports.EllipseContainer = EllipseContainer;
18
- exports.SpecificStateContainer = SpecificStateContainer;
19
- exports.SubTitleText = SubTitleText;
20
- exports.TitleText = TitleText;
21
- //# sourceMappingURL=styled.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styled.cjs","sources":["../../../../src/components/LegacyDataTable/SpecificState/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\n\ntype SpecificStateContainerPropTypes = {\n height: number;\n};\n\nconst SpecificStateContainer = styled(BaseContainer)<SpecificStateContainerPropTypes>`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: ${(props) => props.height}px;\n background: white;\n`;\n\nconst EllipseContainer = styled(BaseContainer)`\n display: flex;\n justify-content: center;\n align-items: center;\n width: 120px;\n height: 120px;\n border-radius: 100px;\n background: ${theme.colors.neutral.grey.base};\n\n svg {\n width: 64px !important;\n height: 64px !important;\n }\n`;\n\nconst TitleText = styled(Text)`\n margin-top: 24px;\n`;\n\nconst SubTitleText = styled(Text)`\n margin-top: 8px;\n`;\n\nexport { SpecificStateContainer, EllipseContainer, TitleText, SubTitleText };\n"],"names":["styled","BaseContainer","theme","Text"],"mappings":";;;;;;;;;;;AASA,MAAM,sBAAsB,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,oFAAA,EAKxC,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM;AAInC,MAAM,gBAAgB,GAAGD,uBAAM,CAACC,2BAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO9BC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAQ9C,MAAM,SAAS,GAAGF,uBAAM,CAACG,SAAI,CAAC;AAI9B,MAAM,YAAY,GAAGH,uBAAM,CAACG,SAAI,CAAC;;;;;;;"}
@@ -1,17 +0,0 @@
1
- /// <reference types="react" />
2
- type SpecificStateContainerPropTypes = {
3
- height: number;
4
- };
5
- declare const SpecificStateContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, SpecificStateContainerPropTypes, never>;
6
- declare const EllipseContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
7
- declare const TitleText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
8
- as?: import("../../Text").ValidTextTag | undefined;
9
- muted?: boolean | undefined;
10
- variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
11
- } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
12
- declare const SubTitleText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
13
- as?: import("../../Text").ValidTextTag | undefined;
14
- muted?: boolean | undefined;
15
- variant?: "body" | "button" | "link" | "placeholder" | "headingXXL" | "headingXL" | "headingLarge" | "headingMedium" | "headingSmall" | "headingTable" | "subheadingLarge" | "subheadingMedium" | "subheadingSmall" | "subheadingSmallBold" | "bodySmall" | "bodyBold" | "bodyBoldDark" | "bodySmallBold" | "inputLabel" | "inputLabelSmall" | "hintText" | "placeholderSmall" | "placeholderCode" | "placeholderCodeSmall" | "error" | "errorSmall" | "successSmall" | "buttonSmall" | "linkLarge" | "linkMedium" | "linkSmall" | undefined;
16
- } & import("react").HTMLAttributes<HTMLElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
17
- export { SpecificStateContainer, EllipseContainer, TitleText, SubTitleText };
@@ -1,12 +0,0 @@
1
- import styled from 'styled-components';
2
- import { theme } from '../../../theme/index.js';
3
- import { BaseContainer } from '../../BaseContainer/BaseContainer.js';
4
- import { Text } from '../../Text/Text.js';
5
-
6
- const SpecificStateContainer = styled(BaseContainer).withConfig({ displayName: "vui--SpecificStateContainer", componentId: "vui--991hgo" }) `display:flex;flex-direction:column;justify-content:center;align-items:center;height:${(props) => props.height}px;background:white;`;
7
- const EllipseContainer = styled(BaseContainer).withConfig({ displayName: "vui--EllipseContainer", componentId: "vui--1oi4ebm" }) `display:flex;justify-content:center;align-items:center;width:120px;height:120px;border-radius:100px;background:${theme.colors.neutral.grey.base};svg{width:64px !important;height:64px !important;}`;
8
- const TitleText = styled(Text).withConfig({ displayName: "vui--TitleText", componentId: "vui--pj8i0k" }) `margin-top:24px;`;
9
- const SubTitleText = styled(Text).withConfig({ displayName: "vui--SubTitleText", componentId: "vui--19x6udv" }) `margin-top:8px;`;
10
-
11
- export { EllipseContainer, SpecificStateContainer, SubTitleText, TitleText };
12
- //# sourceMappingURL=styled.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styled.js","sources":["../../../../src/components/LegacyDataTable/SpecificState/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BaseContainer } from '../../BaseContainer';\nimport { Text } from '../../Text';\n\ntype SpecificStateContainerPropTypes = {\n height: number;\n};\n\nconst SpecificStateContainer = styled(BaseContainer)<SpecificStateContainerPropTypes>`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: ${(props) => props.height}px;\n background: white;\n`;\n\nconst EllipseContainer = styled(BaseContainer)`\n display: flex;\n justify-content: center;\n align-items: center;\n width: 120px;\n height: 120px;\n border-radius: 100px;\n background: ${theme.colors.neutral.grey.base};\n\n svg {\n width: 64px !important;\n height: 64px !important;\n }\n`;\n\nconst TitleText = styled(Text)`\n margin-top: 24px;\n`;\n\nconst SubTitleText = styled(Text)`\n margin-top: 8px;\n`;\n\nexport { SpecificStateContainer, EllipseContainer, TitleText, SubTitleText };\n"],"names":[],"mappings":";;;;;AASA,MAAM,sBAAsB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,oFAAA,EAKxC,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM;AAInC,MAAM,gBAAgB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+GAAA,EAO9B,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAQ9C,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC;AAI9B,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC;;;;"}
@@ -1,14 +0,0 @@
1
- 'use strict';
2
-
3
- var styled = require('styled-components');
4
- var index = require('../../../theme/index.cjs');
5
-
6
- function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
7
-
8
- var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
9
-
10
- /* eslint-disable import/prefer-default-export */
11
- const CellButton = styled__default.default.button.withConfig({ displayName: "vui--CellButton", componentId: "vui--1w0np52" }) `appearance:none;border:0;background-color:transparent;font:inherit;display:inline-block;box-sizing:border-box;width:calc(100% + 1.5rem);margin:-0.75rem -0.75rem;padding:0.75rem 0.75rem;text-align:inherit;line-height:${index.theme.sizes.base};border-radius:${index.theme.radius.base};&:hover{cursor:pointer;background-color:${index.theme.colors.secondary.blue.lightest};}`;
12
-
13
- exports.CellButton = CellButton;
14
- //# sourceMappingURL=styled.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styled.cjs","sources":["../../../../src/components/LegacyDataTable/cells/styled.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\n\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const CellButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n font: inherit;\n\n display: inline-block;\n box-sizing: border-box;\n width: calc(100% + 1.5rem);\n margin: -0.75rem -0.75rem;\n padding: 0.75rem 0.75rem;\n text-align: inherit;\n line-height: ${theme.sizes.base};\n border-radius: ${theme.radius.base};\n\n &:hover {\n cursor: pointer;\n background-color: ${theme.colors.secondary.blue.lightest};\n }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAAA;AAKO,MAAM,UAAU,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wNAAA,EAYtBC,WAAK,CAAC,KAAK,CAAC,IAAI,CAAA,eAAA,EACdA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,yCAAA,EAIZA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ;;;;"}
@@ -1 +0,0 @@
1
- export declare const CellButton: import("styled-components").StyledComponent<"button", any, {}, never>;
@@ -1,8 +0,0 @@
1
- import styled from 'styled-components';
2
- import { theme } from '../../../theme/index.js';
3
-
4
- /* eslint-disable import/prefer-default-export */
5
- const CellButton = styled.button.withConfig({ displayName: "vui--CellButton", componentId: "vui--1w0np52" }) `appearance:none;border:0;background-color:transparent;font:inherit;display:inline-block;box-sizing:border-box;width:calc(100% + 1.5rem);margin:-0.75rem -0.75rem;padding:0.75rem 0.75rem;text-align:inherit;line-height:${theme.sizes.base};border-radius:${theme.radius.base};&:hover{cursor:pointer;background-color:${theme.colors.secondary.blue.lightest};}`;
6
-
7
- export { CellButton };
8
- //# sourceMappingURL=styled.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styled.js","sources":["../../../../src/components/LegacyDataTable/cells/styled.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\n\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const CellButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n font: inherit;\n\n display: inline-block;\n box-sizing: border-box;\n width: calc(100% + 1.5rem);\n margin: -0.75rem -0.75rem;\n padding: 0.75rem 0.75rem;\n text-align: inherit;\n line-height: ${theme.sizes.base};\n border-radius: ${theme.radius.base};\n\n &:hover {\n cursor: pointer;\n background-color: ${theme.colors.secondary.blue.lightest};\n }\n`;\n"],"names":[],"mappings":";;;AAAA;AAKO,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wNAAA,EAYtB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAA,eAAA,EACd,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,yCAAA,EAIZ,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ;;;;"}