@hexure/ui 1.3.6 → 1.3.8

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 (8) hide show
  1. package/dist/cjs/index.js +42 -39
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/Tabs/Tabs.d.ts +3 -1
  4. package/dist/esm/index.js +42 -39
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/esm/types/components/Tabs/Tabs.d.ts +3 -1
  7. package/dist/index.d.ts +3 -1
  8. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -2093,8 +2093,8 @@ var StyledButton = styled.button(templateObject_1$m || (templateObject_1$m = __m
2093
2093
  return props.$format ? button_type_mapping[props.$format].border_color : Colors.PRIMARY.Hex;
2094
2094
  }, function (props) { return (props.$disabled ? 0.6 : 1); });
2095
2095
  var Label$4 = styled.span(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n line-height: ", ";\n"], ["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n line-height: ", ";\n"])), function (props) { return (props.$format ? button_type_mapping[props.$format].content_color : '#fff'); }, function (props) { return (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT); }, FontStyles.DEFAULT, function (props) { return (props.$small ? '2.2em' : '2.9em'); });
2096
- var StyledIcon$2 = styled.span(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n margin-left: ", ";\n margin-right: ", ";\n display: flex;\n align-items: center;\n box-sizing: border-box;\n"], ["\n margin-left: ", ";\n margin-right: ", ";\n display: flex;\n align-items: center;\n box-sizing: border-box;\n"])), function (props) { return (props.$hasChildren ? '6px' : '0px'); }, function (props) { return (props.$hasChildren ? '-4px' : '0px'); });
2097
- var Badge = styled.span(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 100%;\n background-color: ", ";\n color: ", ";\n font-size: ", ";\n font-weight: 600;\n font-family: ", ";\n letter-spacing: -1px;\n margin-left: ", ";\n margin-right: ", ";\n"], ["\n width: ", ";\n height: ", ";\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 100%;\n background-color: ", ";\n color: ", ";\n font-size: ", ";\n font-weight: 600;\n font-family: ", ";\n letter-spacing: -1px;\n margin-left: ", ";\n margin-right: ", ";\n"])), function (props) { return (props.$small ? '20px' : '24px'); }, function (props) { return (props.$small ? '20px' : '24px'); }, function (props) {
2096
+ var StyledIcon$2 = styled.span(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n margin-left: ", ";\n margin-right: ", ";\n display: flex;\n align-items: center;\n box-sizing: border-box;\n"], ["\n margin-left: ", ";\n margin-right: ", ";\n display: flex;\n align-items: center;\n box-sizing: border-box;\n"])), function (props) { return (props.$hasChildren ? '6px' : '0px'); }, function (props) { return (props.$hasChildren ? '-4px' : '0px'); });
2097
+ var Badge$1 = styled.span(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 100%;\n background-color: ", ";\n color: ", ";\n font-size: ", ";\n font-weight: 600;\n font-family: ", ";\n letter-spacing: -1px;\n margin-left: ", ";\n margin-right: ", ";\n"], ["\n width: ", ";\n height: ", ";\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 100%;\n background-color: ", ";\n color: ", ";\n font-size: ", ";\n font-weight: 600;\n font-family: ", ";\n letter-spacing: -1px;\n margin-left: ", ";\n margin-right: ", ";\n"])), function (props) { return (props.$small ? '20px' : '24px'); }, function (props) { return (props.$small ? '20px' : '24px'); }, function (props) {
2098
2098
  return props.$format ? button_type_mapping[props.$format].badge_bg_color : '#fff';
2099
2099
  }, function (props) {
2100
2100
  return props.$format ? button_type_mapping[props.$format].badge_content_color : Colors.PRIMARY.Hex;
@@ -2106,11 +2106,11 @@ var Button = function (_a) {
2106
2106
  children ? (React.createElement(Label$4, { "$format": format, "$small": small }, children)) : null,
2107
2107
  icon && !badge ? (React.createElement(StyledIcon$2, { "$hasChildren": !!has_children },
2108
2108
  React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null,
2109
- badge && !icon ? (React.createElement(Badge, { "$format": format, "$small": small }, badge)) : null));
2109
+ badge && !icon ? (React.createElement(Badge$1, { "$format": format, "$small": small }, badge)) : null));
2110
2110
  };
2111
- var templateObject_1$m, templateObject_2$k, templateObject_3$h, templateObject_4$9;
2111
+ var templateObject_1$m, templateObject_2$k, templateObject_3$i, templateObject_4$9;
2112
2112
 
2113
- var StyledComponent = styled.p(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n font-style: ", ";\n text-decoration: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n text-align: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n font-style: ", ";\n text-decoration: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n text-align: ", ";\n box-sizing: border-box;\n"])), function (props) { return Colors[props.$color].Hex; }, function (props) { return (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT); }, function (props) { return (props.$type === 'small' ? '1.5em' : '1.6em'); }, function (props) { return (props.$type === 'small' ? '1px' : '0px'); }, function (props) { return (props.$type === 'bold' ? '500' : '400'); }, function (props) { return (props.$type === 'italic' ? 'italic' : 'normal'); }, function (props) {
2113
+ var StyledComponent = styled.p(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n font-style: ", ";\n text-decoration: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n text-align: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n font-style: ", ";\n text-decoration: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n text-align: ", ";\n box-sizing: border-box;\n"])), function (props) { return Colors[props.$color || 'BLACK'].Hex; }, function (props) { return (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT); }, function (props) { return (props.$type === 'small' ? '1.5em' : '1.6em'); }, function (props) { return (props.$type === 'small' ? '1px' : '0px'); }, function (props) { return (props.$type === 'bold' ? '500' : '400'); }, function (props) { return (props.$type === 'italic' ? 'italic' : 'normal'); }, function (props) {
2114
2114
  return ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none';
2115
2115
  }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; }, function (props) { return props.$align || 'left'; });
2116
2116
  var Copy = function (_a) {
@@ -2124,7 +2124,7 @@ var templateObject_1$l;
2124
2124
 
2125
2125
  var H1 = styled.h1(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n color: ", ";\n font-size: 30px;\n font-weight: ", ";\n line-height: 1.4em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: 30px;\n font-weight: ", ";\n line-height: 1.4em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
2126
2126
  var H2 = styled.h2(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n color: ", ";\n font-size: 24px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: 24px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
2127
- var H3 = styled.h3(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n color: ", ";\n font-size: 18px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: 18px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
2127
+ var H3 = styled.h3(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n color: ", ";\n font-size: 18px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: 18px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
2128
2128
  var Heading = function (_a) {
2129
2129
  var bold = _a.bold, children = _a.children, margin = _a.margin, padding = _a.padding, type = _a.type, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
2130
2130
  switch (type) {
@@ -2143,11 +2143,11 @@ Heading.defaultProps = {
2143
2143
  bold: false,
2144
2144
  type: 'primary',
2145
2145
  };
2146
- var templateObject_1$k, templateObject_2$j, templateObject_3$g;
2146
+ var templateObject_1$k, templateObject_2$j, templateObject_3$h;
2147
2147
 
2148
2148
  var Wrapper$e = styled.div(templateObject_1$j || (templateObject_1$j = __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"])));
2149
2149
  var Container$3 = styled.dialog(templateObject_2$i || (templateObject_2$i = __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"])));
2150
- var Buttons = styled.div(templateObject_3$f || (templateObject_3$f = __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"])));
2150
+ var Buttons = styled.div(templateObject_3$g || (templateObject_3$g = __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"])));
2151
2151
  var ActionDialog = function (_a) {
2152
2152
  var description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, accessibleProps = __rest(_a, ["description", "title", "onClose", "primaryButton", "secondaryButton"]);
2153
2153
  React.useEffect(function () {
@@ -2168,11 +2168,11 @@ var ActionDialog = function (_a) {
2168
2168
  secondaryButton ? (React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary', margin: '0px 5px' }))) : null,
2169
2169
  primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 5px' })) : null)) : null)));
2170
2170
  };
2171
- var templateObject_1$j, templateObject_2$i, templateObject_3$f;
2171
+ var templateObject_1$j, templateObject_2$i, templateObject_3$g;
2172
2172
 
2173
2173
  var Wrapper$d = styled.div(templateObject_1$i || (templateObject_1$i = __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"])));
2174
2174
  var Content$1 = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n margin-left: 20px;\n"], ["\n margin-left: 20px;\n"])));
2175
- var Action$1 = styled.div(templateObject_3$e || (templateObject_3$e = __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);
2175
+ var Action$1 = styled.div(templateObject_3$f || (templateObject_3$f = __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);
2176
2176
  var Alert = function (_a) {
2177
2177
  var action = _a.action, _b = _a.type, type = _b === void 0 ? 'info' : _b, title = _a.title, description = _a.description, accessibleProps = __rest(_a, ["action", "type", "title", "description"]);
2178
2178
  var type_mapping = {
@@ -2201,11 +2201,11 @@ var Alert = function (_a) {
2201
2201
  description ? React.createElement(Copy, { margin: '6px 0 0 0 !important' }, description) : null,
2202
2202
  action ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
2203
2203
  };
2204
- var templateObject_1$i, templateObject_2$h, templateObject_3$e;
2204
+ var templateObject_1$i, templateObject_2$h, templateObject_3$f;
2205
2205
 
2206
2206
  var Wrapper$c = styled.div(templateObject_1$h || (templateObject_1$h = __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);
2207
2207
  var Left = styled.div(templateObject_2$g || (templateObject_2$g = __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"])));
2208
- var Info = styled.div(templateObject_3$d || (templateObject_3$d = __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"])));
2208
+ var Info = styled.div(templateObject_3$e || (templateObject_3$e = __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"])));
2209
2209
  var Selected = styled.span(templateObject_4$8 || (templateObject_4$8 = __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);
2210
2210
  var Clear = styled.span(templateObject_5$6 || (templateObject_5$6 = __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);
2211
2211
  var Actions = styled.div(templateObject_6$4 || (templateObject_6$4 = __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"])));
@@ -2225,18 +2225,18 @@ var BulkActionBar = function (_a) {
2225
2225
  React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
2226
2226
  React.createElement(ErrorMsg, null, errorMsg))) : null));
2227
2227
  };
2228
- var templateObject_1$h, templateObject_2$g, templateObject_3$d, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$1;
2228
+ var templateObject_1$h, templateObject_2$g, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$1;
2229
2229
 
2230
2230
  var Wrapper$b = styled.label(templateObject_1$g || (templateObject_1$g = __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);
2231
2231
  var Input$2 = styled.input(templateObject_2$f || (templateObject_2$f = __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"])));
2232
- var Label$3 = styled.span(templateObject_3$c || (templateObject_3$c = __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);
2232
+ var Label$3 = styled.span(templateObject_3$d || (templateObject_3$d = __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);
2233
2233
  var Checkbox = function (_a) {
2234
2234
  var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
2235
2235
  return (React.createElement(Wrapper$b, __assign({}, accessibleProps),
2236
2236
  React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
2237
2237
  children ? React.createElement(Label$3, null, children) : null));
2238
2238
  };
2239
- var templateObject_1$g, templateObject_2$f, templateObject_3$c;
2239
+ var templateObject_1$g, templateObject_2$f, templateObject_3$d;
2240
2240
 
2241
2241
  var SelectAll = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n padding: 8px 12px;\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n"], ["\n padding: 8px 12px;\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n"])), Colors.LIGHT_GRAY.Hex);
2242
2242
  var Options$1 = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n padding: 12px;\n box-sizing: border-box;\n"], ["\n padding: 12px;\n box-sizing: border-box;\n"])));
@@ -2277,7 +2277,7 @@ var Container$2 = styled.div(templateObject_2$d || (templateObject_2$d = __makeT
2277
2277
  var $width = _a.$width;
2278
2278
  return $width || '400px';
2279
2279
  });
2280
- var Header$2 = styled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n padding: 30px 20px;\n display: flex;\n align-items: flex-start;\n box-sizing: border-box;\n flex-shrink: 0;\n background: #fff;\n"], ["\n padding: 30px 20px;\n display: flex;\n align-items: flex-start;\n box-sizing: border-box;\n flex-shrink: 0;\n background: #fff;\n"])));
2280
+ var Header$2 = styled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n padding: 30px 20px;\n display: flex;\n align-items: flex-start;\n box-sizing: border-box;\n flex-shrink: 0;\n background: #fff;\n"], ["\n padding: 30px 20px;\n display: flex;\n align-items: flex-start;\n box-sizing: border-box;\n flex-shrink: 0;\n background: #fff;\n"])));
2281
2281
  var Close$1 = styled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n padding-left: 20px;\n cursor: pointer;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n padding-left: 20px;\n cursor: pointer;\n"])));
2282
2282
  var ContentWrapper$1 = styled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n overflow-x: hidden;\n overflow-y: auto;\n box-sizing: border-box;\n flex: 1;\n background: #fff;\n"], ["\n overflow-x: hidden;\n overflow-y: auto;\n box-sizing: border-box;\n flex: 1;\n background: #fff;\n"])));
2283
2283
  var ButtonBar$1 = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n padding: 20px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n box-sizing: border-box;\n gap: 10px;\n flex-shrink: 0;\n background: #fff;\n"], ["\n padding: 20px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n box-sizing: border-box;\n gap: 10px;\n flex-shrink: 0;\n background: #fff;\n"])));
@@ -2308,12 +2308,12 @@ var Drawer = function (_a) {
2308
2308
  primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary' })) : null)) : null),
2309
2309
  scrim ? React.createElement(Scrim$1, { "$scrim": scrim, onClick: onClose }) : null));
2310
2310
  };
2311
- var templateObject_1$e, templateObject_2$d, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$3;
2311
+ var templateObject_1$e, templateObject_2$d, templateObject_3$c, templateObject_4$7, templateObject_5$5, templateObject_6$3;
2312
2312
 
2313
2313
  var Wrapper$a = styled.div(function (props) { return (__assign({ margin: '0px 0px 15px 0px' }, props.style)); });
2314
2314
  var LabelRow = styled.div(templateObject_1$d || (templateObject_1$d = __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"])));
2315
2315
  var Label$2 = styled.label(templateObject_2$c || (templateObject_2$c = __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);
2316
- var Required = styled.span(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n color: ", ";\n margin-left: 4px;\n"], ["\n color: ", ";\n margin-left: 4px;\n"])), Colors.RED.Hex);
2316
+ var Required = styled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n color: ", ";\n margin-left: 4px;\n"], ["\n color: ", ";\n margin-left: 4px;\n"])), Colors.RED.Hex);
2317
2317
  var Action = styled.span(templateObject_4$6 || (templateObject_4$6 = __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);
2318
2318
  var Description = styled.div(templateObject_5$4 || (templateObject_5$4 = __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);
2319
2319
  var Validation = styled.div(templateObject_6$2 || (templateObject_6$2 = __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);
@@ -2329,7 +2329,7 @@ var Field = function (_a) {
2329
2329
  children,
2330
2330
  validationText ? React.createElement(Validation, null, validationText) : null));
2331
2331
  };
2332
- var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$2;
2332
+ var templateObject_1$d, templateObject_2$c, templateObject_3$b, templateObject_4$6, templateObject_5$4, templateObject_6$2;
2333
2333
 
2334
2334
  var Wrapper$9 = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n gap: 16px;\n padding: 20px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n border: 1px dashed ", ";\n background-color: ", ";\n"], ["\n display: flex;\n gap: 16px;\n padding: 20px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n border: 1px dashed ", ";\n background-color: ", ";\n"])), function (_a) {
2335
2335
  var $isDragOver = _a.$isDragOver;
@@ -2342,7 +2342,7 @@ var StyledIcon$1 = styled.div(templateObject_2$b || (templateObject_2$b = __make
2342
2342
  var $isDragOver = _a.$isDragOver;
2343
2343
  return ($isDragOver ? '#fff' : '#f5f5f5');
2344
2344
  });
2345
- var Files = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n"])));
2345
+ var Files = styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n"])));
2346
2346
  var File = styled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 300px;\n padding: 10px;\n align-items: center;\n gap: 2px;\n list-style-type: none;\n border-radius: 4px;\n border: 1px solid #ccc;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 300px;\n padding: 10px;\n align-items: center;\n gap: 2px;\n list-style-type: none;\n border-radius: 4px;\n border: 1px solid #ccc;\n"])));
2347
2347
  var CopyWrapper = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n padding: ", ";\n margin-top: ", ";\n"], ["\n padding: ", ";\n margin-top: ", ";\n"])), function (_a) {
2348
2348
  var $fileState = _a.$fileState;
@@ -2428,7 +2428,7 @@ var FileUpload = function (_a) {
2428
2428
  React.createElement(Copy, { align: 'center', children: 'Drag & drop files here or click to choose', type: 'bold' }),
2429
2429
  React.createElement(Copy, { align: 'center', children: "".concat(maxFileSize, " MB max file size"), color: 'GRAY' }))))));
2430
2430
  };
2431
- var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8;
2431
+ var templateObject_1$c, templateObject_2$b, templateObject_3$a, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8;
2432
2432
 
2433
2433
  var formatAsPhone = function (number) {
2434
2434
  var formatted_value = "".concat(number).replace(/[^0-9.]/g, '');
@@ -2459,7 +2459,7 @@ var formatAsSsn = function (number) {
2459
2459
 
2460
2460
  var StyledInput = styled.input(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.28em;\n color: ", ";\n position: relative;\n height: auto;\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n margin: 0px;\n text-indent: 0px;\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"], ["\n background-color: ", ";\n border-radius: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.28em;\n color: ", ";\n position: relative;\n height: auto;\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n margin: 0px;\n text-indent: 0px;\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$suffix ? '4px 0px 0px 4px' : '4px'); }, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc'); }, FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex); }, function (props) { return (props.$readOnly ? 0.6 : 1); }, function (props) { return (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex); });
2461
2461
  var StyledSuffix = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n height: auto;\n background: #f5f5f5;\n border-width: 1px 1px 1px 0px;\n border-style: solid;\n border-color: #cccccc;\n border-radius: 0px 4px 4px 0px;\n font-family: ", ";\n font-style: normal;\n font-weight: 400;\n font-size: ", ";\n color: Colors.BLACK.Hex;\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n height: auto;\n background: #f5f5f5;\n border-width: 1px 1px 1px 0px;\n border-style: solid;\n border-color: #cccccc;\n border-radius: 0px 4px 4px 0px;\n font-family: ", ";\n font-style: normal;\n font-weight: 400;\n font-size: ", ";\n color: Colors.BLACK.Hex;\n"])), FontStyles.DEFAULT, FontSizes.DEFAULT);
2462
- var StyledWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
2462
+ var StyledWrapper = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
2463
2463
  var StyledTextarea = styled.textarea(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.6em;\n color: ", ";\n position: relative;\n height: ", ";\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n padding: 10px,\n margin: 0px,\n text-indent: 0px,\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"], ["\n background-color: ", ";\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.6em;\n color: ", ";\n position: relative;\n height: ", ";\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n padding: 10px,\n margin: 0px,\n text-indent: 0px,\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc'); }, FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex); }, function (props) { return props.$height || '40px'; }, function (props) { return (props.$readOnly ? 0.6 : 1); }, function (props) { return (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex); });
2464
2464
  var Input$1 = function (_a) {
2465
2465
  var format = _a.format, suffix = _a.suffix, height = _a.height, invalid = _a.invalid, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onKeyDown = _a.onKeyDown, placeholder = _a.placeholder, readOnly = _a.readOnly, step = _a.step, _b = _a.type, type = _b === void 0 ? 'text' : _b, _c = _a.value, value = _c === void 0 ? '' : _c, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "max", "maxLength", "min", "onBlur", "onChange", "onKeyDown", "placeholder", "readOnly", "step", "type", "value"]);
@@ -2505,7 +2505,7 @@ var Input$1 = function (_a) {
2505
2505
  React.createElement(StyledInput, __assign({ "$invalid": invalid, "$readOnly": readOnly, "$suffix": suffix, max: max, maxLength: maxLength, min: min, onBlur: onBlur, onChange: handleInputChange, onKeyDown: onKeyDown, placeholder: placeholder, step: step, type: type, value: formatted_value }, accessibleProps)),
2506
2506
  suffix && React.createElement(StyledSuffix, null, suffix)));
2507
2507
  };
2508
- var templateObject_1$b, templateObject_2$a, templateObject_3$8, templateObject_4$4;
2508
+ var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$4;
2509
2509
 
2510
2510
  var colorMapping = {
2511
2511
  black: {
@@ -2551,7 +2551,7 @@ var Logo = function (_a) {
2551
2551
 
2552
2552
  var Wrapper$8 = styled.div(templateObject_1$a || (templateObject_1$a = __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"], ["\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"])));
2553
2553
  var Container$1 = styled.dialog(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n max-width: ", ";\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: 0px;\n box-sizing: border-box;\n"], ["\n max-width: ", ";\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: 0px;\n box-sizing: border-box;\n"])), function (props) { return props.$maxWidth || '90vw'; });
2554
- var Header$1 = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #e5e5e5;\n display: flex;\n align-items: center;\n background: #ffffff;\n box-sizing: border-box;\n"], ["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #e5e5e5;\n display: flex;\n align-items: center;\n background: #ffffff;\n box-sizing: border-box;\n"])));
2554
+ var Header$1 = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #e5e5e5;\n display: flex;\n align-items: center;\n background: #ffffff;\n box-sizing: border-box;\n"], ["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #e5e5e5;\n display: flex;\n align-items: center;\n background: #ffffff;\n box-sizing: border-box;\n"])));
2555
2555
  var Close = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n padding-left: 20px;\n cursor: pointer;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n padding-left: 20px;\n cursor: pointer;\n"])));
2556
2556
  var CloseMsg = styled.span(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.MEDIUM_GRAY.Hex);
2557
2557
  var ContentWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n overflow-x: hidden;\n overflow-y: auto;\n background: #ffffff;\n max-height: calc(100vh - 260px);\n box-sizing: border-box;\n"], ["\n overflow-x: hidden;\n overflow-y: auto;\n background: #ffffff;\n max-height: calc(100vh - 260px);\n box-sizing: border-box;\n"])));
@@ -2587,11 +2587,11 @@ var Modal = function (_a) {
2587
2587
  secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
2588
2588
  primaryButton ? (React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
2589
2589
  };
2590
- var templateObject_1$a, templateObject_2$9, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6, templateObject_7;
2590
+ var templateObject_1$a, templateObject_2$9, templateObject_3$8, templateObject_4$3, templateObject_5$2, templateObject_6, templateObject_7;
2591
2591
 
2592
2592
  var Wrapper$7 = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n background: #fff;\n border-radius: 8px;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n gap: 4px;\n max-height: ", ";\n padding: 10px;\n width: 200px;\n"], ["\n background: #fff;\n border-radius: 8px;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n gap: 4px;\n max-height: ", ";\n padding: 10px;\n width: 200px;\n"])), function (props) { return props.$maxHeight || '312px'; });
2593
2593
  var MenuItem = styled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n align-items: center;\n border-radius: 8px;\n border: 1px solid transparent;\n display: flex;\n gap: 8px;\n height: 38px;\n padding: 8px;\n &:hover {\n background: rgba(1, 147, 215, 0.1);\n cursor: pointer;\n }\n"], ["\n align-items: center;\n border-radius: 8px;\n border: 1px solid transparent;\n display: flex;\n gap: 8px;\n height: 38px;\n padding: 8px;\n &:hover {\n background: rgba(1, 147, 215, 0.1);\n cursor: pointer;\n }\n"])));
2594
- var Title = styled.span(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n font-family: Roboto;\n font-size: 14px;\n font-weight: 400;\n height: auto;\n letter-spacing: 0px;\n line-height: 22px;\n text-align: left;\n"], ["\n font-family: Roboto;\n font-size: 14px;\n font-weight: 400;\n height: auto;\n letter-spacing: 0px;\n line-height: 22px;\n text-align: left;\n"])));
2594
+ var Title = styled.span(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n font-family: Roboto;\n font-size: 14px;\n font-weight: 400;\n height: auto;\n letter-spacing: 0px;\n line-height: 22px;\n text-align: left;\n"], ["\n font-family: Roboto;\n font-size: 14px;\n font-weight: 400;\n height: auto;\n letter-spacing: 0px;\n line-height: 22px;\n text-align: left;\n"])));
2595
2595
  var MoreMenu = function (_a) {
2596
2596
  var maxHeight = _a.maxHeight, _b = _a.menuItems, menuItems = _b === void 0 ? [] : _b, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
2597
2597
  return (React.createElement(Wrapper$7, __assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map(function (item) {
@@ -2600,7 +2600,7 @@ var MoreMenu = function (_a) {
2600
2600
  React.createElement(Title, null, item.label)));
2601
2601
  })));
2602
2602
  };
2603
- var templateObject_1$9, templateObject_2$8, templateObject_3$6;
2603
+ var templateObject_1$9, templateObject_2$8, templateObject_3$7;
2604
2604
 
2605
2605
  var Wrapper$6 = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
2606
2606
  var Trigger$1 = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n height: 40px;\n padding: 0 10px;\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n background-image: none;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 1;\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n height: 40px;\n padding: 0 10px;\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n background-image: none;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 1;\n"])), function (props) { return (props.$showOptions ? '4px 4px 0px 0px' : '4px'); }, function (props) {
@@ -2614,7 +2614,7 @@ var Trigger$1 = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTem
2614
2614
  return '#cccccc';
2615
2615
  }
2616
2616
  }, function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); });
2617
- var Value = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 2.9em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n"], ["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 2.9em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n"])), Colors.BLACK.Hex, FontStyles.DEFAULT, FontSizes.DEFAULT);
2617
+ var Value = styled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 2.9em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n"], ["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 2.9em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n"])), Colors.BLACK.Hex, FontStyles.DEFAULT, FontSizes.DEFAULT);
2618
2618
  var Options = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n background: #fff;\n border-color: ", ";\n border-radius: 0px 0px 4px 4px;\n border-style: solid;\n border-top: none;\n border-width: 1px;\n left: 0;\n position: absolute;\n right: 0;\n z-index: 2;\n"], ["\n background: #fff;\n border-color: ", ";\n border-radius: 0px 0px 4px 4px;\n border-style: solid;\n border-top: none;\n border-width: 1px;\n left: 0;\n position: absolute;\n right: 0;\n z-index: 2;\n"])), Colors.PRIMARY.Hex);
2619
2619
  var Scrim = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
2620
2620
  var MultiSelect = function (_a) {
@@ -2631,7 +2631,7 @@ var MultiSelect = function (_a) {
2631
2631
  React.createElement(Checklist, { disabled: readOnly, onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
2632
2632
  showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
2633
2633
  };
2634
- var templateObject_1$8, templateObject_2$7, templateObject_3$5, templateObject_4$2, templateObject_5$1;
2634
+ var templateObject_1$8, templateObject_2$7, templateObject_3$6, templateObject_4$2, templateObject_5$1;
2635
2635
 
2636
2636
  var Wrapper$5 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n border-radius: 4px;\n height: 40px;\n background-color: ", ";\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n border-radius: ", ";\n flex-grow: ", ";\n box-sizing: border-box;\n padding: 10px 0px;\n display: flex;\n align-items: center;\n"], ["\n border-radius: 4px;\n height: 40px;\n background-color: ", ";\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n border-radius: ", ";\n flex-grow: ", ";\n box-sizing: border-box;\n padding: 10px 0px;\n display: flex;\n align-items: center;\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid ? Colors.RED.Hex : '#cccccc'); }, function (_a) {
2637
2637
  var $style = _a.$style;
@@ -2641,7 +2641,7 @@ var Wrapper$5 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTem
2641
2641
  return ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0;
2642
2642
  });
2643
2643
  var Trigger = styled.select(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n appearance: none;\n box-shadow: none;\n outline: none;\n border: none;\n color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 2.9em;\n background-color: transparent;\n background-image: none;\n cursor: pointer;\n width: 100%;\n box-sizing: border-box;\n padding: 0px 30px 0px 10px;\n box-sizing: border-box;\n position: relative;\n z-index: 2;\n"], ["\n appearance: none;\n box-shadow: none;\n outline: none;\n border: none;\n color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 2.9em;\n background-color: transparent;\n background-image: none;\n cursor: pointer;\n width: 100%;\n box-sizing: border-box;\n padding: 0px 30px 0px 10px;\n box-sizing: border-box;\n position: relative;\n z-index: 2;\n"])), Colors.BLACK.Hex, FontSizes.DEFAULT, FontStyles.DEFAULT);
2644
- var IconWrapper$1 = styled.span(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n position: absolute;\n right: 4px;\n height: 22px;\n z-index: 1;\n"], ["\n position: absolute;\n right: 4px;\n height: 22px;\n z-index: 1;\n"])));
2644
+ var IconWrapper$1 = styled.span(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n position: absolute;\n right: 4px;\n height: 22px;\n z-index: 1;\n"], ["\n position: absolute;\n right: 4px;\n height: 22px;\n z-index: 1;\n"])));
2645
2645
  var Select = function (_a) {
2646
2646
  var options = _a.options, optionGroups = _a.optionGroups, placeholder = _a.placeholder, readOnly = _a.readOnly, invalid = _a.invalid, value = _a.value, onChange = _a.onChange, style = _a.style, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "value", "onChange", "style"]);
2647
2647
  return (React.createElement(Wrapper$5, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
@@ -2660,7 +2660,7 @@ var Select = function (_a) {
2660
2660
  React.createElement(IconWrapper$1, null,
2661
2661
  React.createElement(Icon, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' }))));
2662
2662
  };
2663
- var templateObject_1$7, templateObject_2$6, templateObject_3$4;
2663
+ var templateObject_1$7, templateObject_2$6, templateObject_3$5;
2664
2664
 
2665
2665
  var Wrapper$4 = styled.nav(templateObject_1$6 || (templateObject_1$6 = __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"])));
2666
2666
  var Pagination = function (_a) {
@@ -2695,14 +2695,14 @@ var templateObject_1$6;
2695
2695
 
2696
2696
  var Wrapper$3 = styled.label(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: center;\n font-size: ", ";\n line-height: 1.6rm;\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.6rm;\n box-sizing: border-box;\n"])), function (props) { return (props.$disabled ? 'default' : 'pointer'); }, FontSizes.DEFAULT);
2697
2697
  var Input = styled.input(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n font-size: 20px;\n margin: 0px 0px 2px 0px;\n line-height: 1.1em;\n"], ["\n font-size: 20px;\n margin: 0px 0px 2px 0px;\n line-height: 1.1em;\n"])));
2698
- var Label$1 = styled.span(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n margin-left: 6px;\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n margin-left: 6px;\n"])), FontStyles.DEFAULT, FontSizes.DEFAULT, Colors.BLACK.Hex);
2698
+ var Label$1 = styled.span(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n margin-left: 6px;\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n margin-left: 6px;\n"])), FontStyles.DEFAULT, FontSizes.DEFAULT, Colors.BLACK.Hex);
2699
2699
  var Radio = function (_a) {
2700
2700
  var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, value = _a.value, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value"]);
2701
2701
  return (React.createElement(Wrapper$3, __assign({ "$disabled": disabled }, accessibleProps),
2702
2702
  React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'radio', value: value }),
2703
2703
  React.createElement(Label$1, null, children)));
2704
2704
  };
2705
- var templateObject_1$5, templateObject_2$5, templateObject_3$3;
2705
+ var templateObject_1$5, templateObject_2$5, templateObject_3$4;
2706
2706
 
2707
2707
  var RadioList = function (_a) {
2708
2708
  var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, value = _a.value, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
@@ -2714,7 +2714,7 @@ var RadioList = function (_a) {
2714
2714
 
2715
2715
  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'; });
2716
2716
  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); });
2717
- 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) {
2717
+ var Row = styled.tr(templateObject_3$3 || (templateObject_3$3 = __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) {
2718
2718
  return props.$isClickable ? "rgba(".concat(Colors.PRIMARY.Rgb, ", 0.1)") : props.$bgColor;
2719
2719
  });
2720
2720
  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'; });
@@ -2735,19 +2735,22 @@ var Table = function (_a) {
2735
2735
  })));
2736
2736
  }))) : null));
2737
2737
  };
2738
- var templateObject_1$4, templateObject_2$4, templateObject_3$2, templateObject_4$1, templateObject_5;
2738
+ var templateObject_1$4, templateObject_2$4, templateObject_3$3, templateObject_4$1, templateObject_5;
2739
2739
 
2740
2740
  var Wrapper$2 = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n box-sizing: border-box;\n align-items: flex-end;\n border-top: 1px solid #e5e5e5;\n border-bottom: 1px solid #e5e5e5;\n flex-shrink: 0;\n align-self: stretch;\n padding: 0;\n margin: 0;\n"], ["\n display: flex;\n box-sizing: border-box;\n align-items: flex-end;\n border-top: 1px solid #e5e5e5;\n border-bottom: 1px solid #e5e5e5;\n flex-shrink: 0;\n align-self: stretch;\n padding: 0;\n margin: 0;\n"])));
2741
- var Tab = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n font-size: ", ";\n font-family: ", ";\n font-weight: ", ";\n color: ", ";\n line-height: 1em;\n padding: 16px 30px 12px;\n margin: 0 0 -1px 0;\n border-bottom-width: 4px;\n border-bottom-style: solid;\n border-bottom-color: ", ";\n cursor: ", ";\n box-sizing: border-box;\n &:hover {\n color: ", ";\n font-weight: 500;\n }\n"], ["\n font-size: ", ";\n font-family: ", ";\n font-weight: ", ";\n color: ", ";\n line-height: 1em;\n padding: 16px 30px 12px;\n margin: 0 0 -1px 0;\n border-bottom-width: 4px;\n border-bottom-style: solid;\n border-bottom-color: ", ";\n cursor: ", ";\n box-sizing: border-box;\n &:hover {\n color: ", ";\n font-weight: 500;\n }\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return (props.$isActive ? 500 : 400); }, function (props) { return (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex); }, function (props) { return (props.$isActive ? Colors.PRIMARY.Hex : 'transparent'); }, function (props) { return (props.$isActive ? 'default' : 'pointer'); }, function (props) { return (props.$isActive ? Colors.BLACK.Hex : Colors.PRIMARY.Hex); });
2741
+ var Tab = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: ", ";\n font-family: ", ";\n font-weight: ", ";\n color: ", ";\n line-height: 1em;\n padding: 16px 30px 12px;\n margin: 0 0 -1px 0;\n border-bottom-width: 4px;\n border-bottom-style: solid;\n border-bottom-color: ", ";\n cursor: ", ";\n box-sizing: border-box;\n &:hover {\n color: ", ";\n font-weight: 500;\n }\n"], ["\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: ", ";\n font-family: ", ";\n font-weight: ", ";\n color: ", ";\n line-height: 1em;\n padding: 16px 30px 12px;\n margin: 0 0 -1px 0;\n border-bottom-width: 4px;\n border-bottom-style: solid;\n border-bottom-color: ", ";\n cursor: ", ";\n box-sizing: border-box;\n &:hover {\n color: ", ";\n font-weight: 500;\n }\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return (props.$isActive ? 500 : 400); }, function (props) { return (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex); }, function (props) { return (props.$isActive ? Colors.PRIMARY.Hex : 'transparent'); }, function (props) { return (props.$isActive ? 'default' : 'pointer'); }, function (props) { return (props.$isActive ? Colors.BLACK.Hex : Colors.PRIMARY.Hex); });
2742
+ var Badge = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n display: flex;\n width: 18px;\n height: 18px;\n justify-content: center;\n align-items: center;\n border-radius: 9px;\n background: ", ";\n color: #fff;\n font-family: ", ";\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n letter-spacing: 1px;\n"], ["\n display: flex;\n width: 18px;\n height: 18px;\n justify-content: center;\n align-items: center;\n border-radius: 9px;\n background: ", ";\n color: #fff;\n font-family: ", ";\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n letter-spacing: 1px;\n"])), function (props) { return (props.$isError ? Colors.RED.Hex : Colors.PRIMARY.Hex); }, FontStyles.DEFAULT);
2742
2743
  var Tabs = function (_a) {
2743
2744
  var tabs = _a.tabs, accessibleProps = __rest(_a, ["tabs"]);
2744
2745
  return (React.createElement(Wrapper$2, __assign({}, accessibleProps), tabs.map(function (_a) {
2745
- var isActive = _a.isActive, label = _a.label, accessibleProps = __rest(_a, ["isActive", "label"]);
2746
- return (React.createElement(Tab, __assign({ "$isActive": isActive || false }, accessibleProps), label));
2746
+ var isActive = _a.isActive, label = _a.label, badgeCount = _a.badgeCount, errorBadge = _a.errorBadge, onClick = _a.onClick, accessibleProps = __rest(_a, ["isActive", "label", "badgeCount", "errorBadge", "onClick"]);
2747
+ return (React.createElement(Tab, __assign({ "$isActive": isActive || false, onClick: isActive ? undefined : onClick }, accessibleProps),
2748
+ badgeCount ? React.createElement(Badge, { "$isError": errorBadge || false }, badgeCount) : null,
2749
+ label));
2747
2750
  })));
2748
2751
  };
2749
2752
  Tabs.defaultProps = {};
2750
- var templateObject_1$3, templateObject_2$3;
2753
+ var templateObject_1$3, templateObject_2$3, templateObject_3$2;
2751
2754
 
2752
2755
  var Wrapper$1 = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: inline-block;\n border-radius: 4px;\n padding: 4px 6px;\n background: ", ";\n color: #ffffff;\n box-sizing: border-box;\n cursor: ", ";\n"], ["\n display: inline-block;\n border-radius: 4px;\n padding: 4px 6px;\n background: ", ";\n color: #ffffff;\n box-sizing: border-box;\n cursor: ", ";\n"])), function (props) { return Colors[props.$color].Hex; }, function (props) { return (props.$removable ? 'pointer' : 'default'); });
2753
2756
  var Content = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));