@hexure/ui 1.3.2 → 1.3.4

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.
@@ -6,8 +6,8 @@ interface ActionProps {
6
6
  }
7
7
  export interface FieldProps extends AccessibleProps {
8
8
  action?: ActionProps;
9
- margin?: string;
10
9
  required?: boolean;
10
+ style?: object;
11
11
  /** Tie the field label to the nested input. This should match the name defined on the input */
12
12
  htmlFor?: string;
13
13
  /** It is used to pass child nodes, string values and number as child components. */
package/dist/esm/index.js CHANGED
@@ -2134,7 +2134,7 @@ Heading.defaultProps = {
2134
2134
  };
2135
2135
  var templateObject_1$j, templateObject_2$i, templateObject_3$f;
2136
2136
 
2137
- var Wrapper$d = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"], ["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"])));
2137
+ var Wrapper$c = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"], ["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"])));
2138
2138
  var Container$3 = styled.dialog(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n max-width: 600px;\n width: auto;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: relative;\n padding: 40px;\n text-align: center;\n box-sizing: border-box;\n"], ["\n max-width: 600px;\n width: auto;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: relative;\n padding: 40px;\n text-align: center;\n box-sizing: border-box;\n"])));
2139
2139
  var Buttons = styled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 30px;\n box-sizing: border-box;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 30px;\n box-sizing: border-box;\n"])));
2140
2140
  var ActionDialog = function (_a) {
@@ -2149,7 +2149,7 @@ var ActionDialog = function (_a) {
2149
2149
  document.onkeydown = null;
2150
2150
  };
2151
2151
  }, []);
2152
- return (React.createElement(Wrapper$d, __assign({}, accessibleProps),
2152
+ return (React.createElement(Wrapper$c, __assign({}, accessibleProps),
2153
2153
  React.createElement(Container$3, { open: true },
2154
2154
  title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
2155
2155
  description ? React.createElement(Copy, { align: 'center' }, description) : null,
@@ -2159,7 +2159,7 @@ var ActionDialog = function (_a) {
2159
2159
  };
2160
2160
  var templateObject_1$i, templateObject_2$h, templateObject_3$e;
2161
2161
 
2162
- var Wrapper$c = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n border: 1px solid #f1f1f1;\n border-radius: 4px;\n border-left-width: 4px;\n box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: flex-start;\n padding: 20px;\n box-sizing: border-box;\n"], ["\n border: 1px solid #f1f1f1;\n border-radius: 4px;\n border-left-width: 4px;\n box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: flex-start;\n padding: 20px;\n box-sizing: border-box;\n"])));
2162
+ var Wrapper$b = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n border: 1px solid #f1f1f1;\n border-radius: 4px;\n border-left-width: 4px;\n box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: flex-start;\n padding: 20px;\n box-sizing: border-box;\n"], ["\n border: 1px solid #f1f1f1;\n border-radius: 4px;\n border-left-width: 4px;\n box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: flex-start;\n padding: 20px;\n box-sizing: border-box;\n"])));
2163
2163
  var Content$1 = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin-left: 20px;\n"], ["\n margin-left: 20px;\n"])));
2164
2164
  var Action$1 = styled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n cursor: pointer;\n margin-top: 6px;\n"], ["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n cursor: pointer;\n margin-top: 6px;\n"])), Colors.PRIMARY.Hex, FontSizes.DEFAULT, FontStyles.DEFAULT);
2165
2165
  var Alert = function (_a) {
@@ -2182,7 +2182,7 @@ var Alert = function (_a) {
2182
2182
  icon: mdiCheckboxMarkedCircleOutline,
2183
2183
  },
2184
2184
  };
2185
- return (React.createElement(Wrapper$c, __assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
2185
+ return (React.createElement(Wrapper$b, __assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
2186
2186
  React.createElement("div", { style: { flexShrink: 0 } },
2187
2187
  React.createElement(Icon, { color: type_mapping[type].color, path: type_mapping[type].icon, size: '30px' })),
2188
2188
  React.createElement(Content$1, null,
@@ -2192,17 +2192,17 @@ var Alert = function (_a) {
2192
2192
  };
2193
2193
  var templateObject_1$h, templateObject_2$g, templateObject_3$d;
2194
2194
 
2195
- var Wrapper$b = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n"], ["\n border: 1px solid ", ";\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n"])), Colors.PRIMARY.Hex);
2195
+ var Wrapper$a = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n"], ["\n border: 1px solid ", ";\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n"])), Colors.PRIMARY.Hex);
2196
2196
  var Left = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n"])));
2197
2197
  var Info = styled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n margin-right: 30px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n margin-right: 30px;\n"])));
2198
2198
  var Selected = styled.span(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n"], ["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n"])), FontStyles.DEFAULT, Colors.BLACK.Hex);
2199
2199
  var Clear = styled.span(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n cursor: pointer;\n padding-left: 10px;\n margin-left: 10px;\n border-left: 1px solid #ccc;\n"], ["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n cursor: pointer;\n padding-left: 10px;\n margin-left: 10px;\n border-left: 1px solid #ccc;\n"])), FontStyles.DEFAULT, Colors.PRIMARY.Hex);
2200
2200
  var Actions = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n column-gap: 10px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n column-gap: 10px;\n"])));
2201
- var Error$1 = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: rgba(", ", 0.1);\n border-radius: 4px;\n padding: 6px 8px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-left: 30px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: rgba(", ", 0.1);\n border-radius: 4px;\n padding: 6px 8px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-left: 30px;\n"])), Colors.RED.Rgb);
2201
+ var Error$1 = styled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: rgba(", ", 0.1);\n border-radius: 4px;\n padding: 6px 8px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-left: 30px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: rgba(", ", 0.1);\n border-radius: 4px;\n padding: 6px 8px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-left: 30px;\n"])), Colors.RED.Rgb);
2202
2202
  var ErrorMsg = styled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"], ["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"])), FontStyles.DEFAULT, Colors.RED.Hex);
2203
2203
  var BulkActionBar = function (_a) {
2204
2204
  var _b = _a.actions, actions = _b === void 0 ? [] : _b, errorMsg = _a.errorMsg, onClear = _a.onClear, _c = _a.selectedCount, selectedCount = _c === void 0 ? 0 : _c, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
2205
- return (React.createElement(Wrapper$b, __assign({}, accessibleProps),
2205
+ return (React.createElement(Wrapper$a, __assign({}, accessibleProps),
2206
2206
  React.createElement(Left, null,
2207
2207
  React.createElement(Info, null,
2208
2208
  React.createElement(Selected, null,
@@ -2214,14 +2214,14 @@ var BulkActionBar = function (_a) {
2214
2214
  React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
2215
2215
  React.createElement(ErrorMsg, null, errorMsg))) : null));
2216
2216
  };
2217
- var templateObject_1$g, templateObject_2$f, templateObject_3$c, templateObject_4$7, templateObject_5$5, templateObject_6$3, templateObject_7$2, templateObject_8;
2217
+ var templateObject_1$g, templateObject_2$f, templateObject_3$c, templateObject_4$7, templateObject_5$5, templateObject_6$3, templateObject_7$1, templateObject_8;
2218
2218
 
2219
- var Wrapper$a = styled.label(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: center;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n"], ["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: center;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n"])), function (props) { return (props.$disabled ? 'default' : 'pointer'); }, FontSizes.DEFAULT);
2219
+ var Wrapper$9 = styled.label(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: center;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n"], ["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: center;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n"])), function (props) { return (props.$disabled ? 'default' : 'pointer'); }, FontSizes.DEFAULT);
2220
2220
  var Input$2 = styled.input(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n font-size: 20px;\n margin: 0px 0px 2px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n"], ["\n font-size: 20px;\n margin: 0px 0px 2px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n"])));
2221
2221
  var Label$3 = styled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 1.6em;\n color: ", ";\n margin-left: 6px;\n box-sizing: border-box;\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 1.6em;\n color: ", ";\n margin-left: 6px;\n box-sizing: border-box;\n"])), FontStyles.DEFAULT, FontSizes.DEFAULT, Colors.BLACK.Hex);
2222
2222
  var Checkbox = function (_a) {
2223
2223
  var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
2224
- return (React.createElement(Wrapper$a, __assign({}, accessibleProps),
2224
+ return (React.createElement(Wrapper$9, __assign({}, accessibleProps),
2225
2225
  React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
2226
2226
  children ? React.createElement(Label$3, null, children) : null));
2227
2227
  };
@@ -2299,16 +2299,15 @@ var Drawer = function (_a) {
2299
2299
  };
2300
2300
  var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$2;
2301
2301
 
2302
- var Wrapper$9 = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (props) { return props.$margin || '0px 0px 15px 0px'; });
2303
- var LabelRow = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 0 4px 0;\n box-sizing: border-box;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 0 4px 0;\n box-sizing: border-box;\n"])));
2304
- var Label$2 = styled.label(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, Colors.BLACK.Hex);
2305
- var Required = styled.span(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n color: ", ";\n margin-left: 4px;\n"], ["\n color: ", ";\n margin-left: 4px;\n"])), Colors.RED.Hex);
2306
- var Action = styled.span(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n cursor: pointer;\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, Colors.PRIMARY.Hex);
2307
- var Description = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 0 0 8px 0;\n box-sizing: border-box;\n"], ["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 0 0 8px 0;\n box-sizing: border-box;\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.BLACK.Hex);
2308
- var Validation = styled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 4px 0 0 0;\n box-sizing: border-box;\n"], ["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 4px 0 0 0;\n box-sizing: border-box;\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.RED.Hex);
2302
+ var LabelRow = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 0 4px 0;\n box-sizing: border-box;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 0 4px 0;\n box-sizing: border-box;\n"])));
2303
+ var Label$2 = styled.label(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, Colors.BLACK.Hex);
2304
+ var Required = styled.span(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n color: ", ";\n margin-left: 4px;\n"], ["\n color: ", ";\n margin-left: 4px;\n"])), Colors.RED.Hex);
2305
+ var Action = styled.span(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n cursor: pointer;\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, Colors.PRIMARY.Hex);
2306
+ var Description = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 0 0 8px 0;\n box-sizing: border-box;\n"], ["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 0 0 8px 0;\n box-sizing: border-box;\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.BLACK.Hex);
2307
+ var Validation = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 4px 0 0 0;\n box-sizing: border-box;\n"], ["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 4px 0 0 0;\n box-sizing: border-box;\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.RED.Hex);
2309
2308
  var Field = function (_a) {
2310
- var action = _a.action, children = _a.children, validationText = _a.validationText, label = _a.label, margin = _a.margin, description = _a.description, required = _a.required, htmlFor = _a.htmlFor, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "margin", "description", "required", "htmlFor"]);
2311
- return (React.createElement(Wrapper$9, __assign({ "$margin": margin }, accessibleProps),
2309
+ var action = _a.action, children = _a.children, validationText = _a.validationText, label = _a.label, description = _a.description, required = _a.required, htmlFor = _a.htmlFor, style = _a.style, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style"]);
2310
+ return (React.createElement("div", __assign({ style: style }, accessibleProps),
2312
2311
  React.createElement(LabelRow, null,
2313
2312
  React.createElement(Label$2, { htmlFor: htmlFor },
2314
2313
  label,
@@ -2318,7 +2317,7 @@ var Field = function (_a) {
2318
2317
  children,
2319
2318
  validationText ? React.createElement(Validation, null, validationText) : null));
2320
2319
  };
2321
- var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1;
2320
+ var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1;
2322
2321
 
2323
2322
  var formatAsPhone = function (number) {
2324
2323
  var formatted_value = "".concat(number).replace(/[^0-9.]/g, '');
@@ -2561,11 +2560,11 @@ var RadioList = function (_a) {
2561
2560
  };
2562
2561
 
2563
2562
  var StyledTable = styled.table(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: 100%;\n margin-top: 1px;\n table-layout: ", ";\n border-collapse: collapse;\n text-indent: 0px;\n border-spacing: 0px;\n border-color: none;\n box-sizing: border-box;\n"], ["\n width: 100%;\n margin-top: 1px;\n table-layout: ", ";\n border-collapse: collapse;\n text-indent: 0px;\n border-spacing: 0px;\n border-color: none;\n box-sizing: border-box;\n"])), function (props) { return props.$tableLayout || 'auto'; });
2564
- var Header = styled.th(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n padding: 12px;\n text-align: left;\n font-weight: 500;\n border-bottom: 1px solid #e5e5e5;\n border-top: 1px solid #e5e5e5;\n text-transform: uppercase;\n font-size: 12px;\n font-family: ", ";\n letter-spacing: 1px;\n white-space: nowrap;\n line-height: 1em;\n position: relative;\n box-sizing: border-box;\n width: ", ";\n cursor: ", ";\n color: ", ";\n"], ["\n padding: 12px;\n text-align: left;\n font-weight: 500;\n border-bottom: 1px solid #e5e5e5;\n border-top: 1px solid #e5e5e5;\n text-transform: uppercase;\n font-size: 12px;\n font-family: ", ";\n letter-spacing: 1px;\n white-space: nowrap;\n line-height: 1em;\n position: relative;\n box-sizing: border-box;\n width: ", ";\n cursor: ", ";\n color: ", ";\n"])), FontStyles.DEFAULT, function (props) { return props.$width || 'auto'; }, function (props) { return (props.$isSortable ? 'pointer' : 'default'); }, function (props) { return (props.$isSortable ? Colors.PRIMARY.Hex : Colors.BLACK.Hex); });
2563
+ var Header = styled.th(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n padding: 12px !important;\n text-align: left;\n font-weight: 500;\n border-bottom: 1px solid #e5e5e5;\n border-top: 1px solid #e5e5e5;\n text-transform: uppercase;\n font-size: 12px;\n font-family: ", ";\n letter-spacing: 1px;\n white-space: nowrap;\n line-height: 1;\n position: relative;\n box-sizing: border-box;\n width: ", ";\n cursor: ", ";\n color: ", ";\n"], ["\n padding: 12px !important;\n text-align: left;\n font-weight: 500;\n border-bottom: 1px solid #e5e5e5;\n border-top: 1px solid #e5e5e5;\n text-transform: uppercase;\n font-size: 12px;\n font-family: ", ";\n letter-spacing: 1px;\n white-space: nowrap;\n line-height: 1;\n position: relative;\n box-sizing: border-box;\n width: ", ";\n cursor: ", ";\n color: ", ";\n"])), FontStyles.DEFAULT, function (props) { return props.$width || 'auto'; }, function (props) { return (props.$isSortable ? 'pointer' : 'default'); }, function (props) { return (props.$isSortable ? Colors.PRIMARY.Hex : Colors.BLACK.Hex); });
2565
2564
  var Row = styled.tr(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n cursor: ", ";\n transition: all 0.2s;\n background-color: ", ";\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n"], ["\n cursor: ", ";\n transition: all 0.2s;\n background-color: ", ";\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return (props.$isClickable ? 'pointer' : 'default'); }, function (props) { return props.$bgColor; }, function (props) {
2566
2565
  return props.$isClickable ? "rgba(".concat(Colors.PRIMARY.Rgb, ", 0.1)") : props.$bgColor;
2567
2566
  });
2568
- var Column = styled.td(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n padding: 16px 12px;\n vertical-align: middle;\n word-break: break-word;\n line-height: 1.4em;\n box-sizing: border-box;\n width: ", ";\n"], ["\n padding: 16px 12px;\n vertical-align: middle;\n word-break: break-word;\n line-height: 1.4em;\n box-sizing: border-box;\n width: ", ";\n"])), function (props) { return props.$width || 'auto'; });
2567
+ var Column = styled.td(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n padding: 16px 12px !important;\n font-size: ", " !important;\n font-weight: 400 !important;\n font-family: ", ";\n border: none !important;\n word-break: break-word;\n line-height: 1.4em;\n box-sizing: border-box;\n width: ", ";\n"], ["\n padding: 16px 12px !important;\n font-size: ", " !important;\n font-weight: 400 !important;\n font-family: ", ";\n border: none !important;\n word-break: break-word;\n line-height: 1.4em;\n box-sizing: border-box;\n width: ", ";\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return props.$width || 'auto'; });
2569
2568
  var IconWrapper = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n margin-left: 2px;\n"], ["\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n margin-left: 2px;\n"])));
2570
2569
  var Table = function (_a) {
2571
2570
  var _b = _a.columns, columns = _b === void 0 ? [] : _b, _c = _a.data, data = _c === void 0 ? [] : _c, sortBy = _a.sortBy, sortDirection = _a.sortDirection, hideHeaders = _a.hideHeaders, onRowClick = _a.onRowClick, onSortChange = _a.onSortChange, tableLayout = _a.tableLayout, accessibleProps = __rest(_a, ["columns", "data", "sortBy", "sortDirection", "hideHeaders", "onRowClick", "onSortChange", "tableLayout"]);