@hexure/ui 1.3.5 → 1.3.7

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 (12) 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/Input/Input.d.ts +1 -1
  4. package/dist/cjs/types/components/Modal/Modal.d.ts +6 -2
  5. package/dist/cjs/types/components/Tabs/Tabs.d.ts +3 -1
  6. package/dist/esm/index.js +42 -39
  7. package/dist/esm/index.js.map +1 -1
  8. package/dist/esm/types/components/Input/Input.d.ts +1 -1
  9. package/dist/esm/types/components/Modal/Modal.d.ts +6 -2
  10. package/dist/esm/types/components/Tabs/Tabs.d.ts +3 -1
  11. package/dist/index.d.ts +10 -4
  12. package/package.json +1 -1
package/dist/cjs/types/components/Input/Input.d.ts CHANGED
@@ -14,7 +14,7 @@ export interface InputProps extends AccessibleProps {
14
14
  placeholder?: string;
15
15
  readOnly?: boolean;
16
16
  step?: number;
17
- type?: 'email' | 'number' | 'password' | 'tel' | 'text' | 'url' | 'textarea';
17
+ type?: 'date' | 'email' | 'number' | 'password' | 'tel' | 'text' | 'url' | 'textarea';
18
18
  value?: string;
19
19
  }
20
20
  declare const Input: FC<InputProps>;
package/dist/cjs/types/components/Modal/Modal.d.ts CHANGED
@@ -8,10 +8,14 @@ interface ButtonProps {
8
8
  tabIndex?: number;
9
9
  }
10
10
  export interface ModalProps extends AccessibleProps {
11
- primaryButton: ButtonProps;
11
+ /** Defines a button to be displayed on the far right of the bottom button bar */
12
+ primaryButton?: ButtonProps;
13
+ /** Defines a button to be displayed to the left of the primary button. Should only be used if primary button is used */
12
14
  secondaryButton?: ButtonProps;
15
+ /** Defines a button to be displayed on the far left of the bottom button bar */
13
16
  tertiaryButton?: ButtonProps;
14
- maxWidth?: string | number;
17
+ /** Overrides the default max width of the modal (90vw) */
18
+ maxWidth?: string;
15
19
  /** It is used to pass child nodes, string values and number as child components. */
16
20
  children: ReactNode;
17
21
  /** It is used to give title. */
package/dist/cjs/types/components/Tabs/Tabs.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import { FC } from 'react';
2
2
  import { AccessibleProps } from '../../utils/Accessibility';
3
3
  interface TabProps extends AccessibleProps {
4
+ badgeCount?: number;
5
+ errorBadge?: boolean;
4
6
  label: string;
5
- onClick: (e?: any) => void;
7
+ onClick?: (e?: any) => void;
6
8
  isActive?: boolean;
7
9
  }
8
10
  export interface TabsProps extends AccessibleProps {
package/dist/esm/index.js CHANGED
@@ -2091,8 +2091,8 @@ var StyledButton = styled.button(templateObject_1$m || (templateObject_1$m = __m
2091
2091
  return props.$format ? button_type_mapping[props.$format].border_color : Colors.PRIMARY.Hex;
2092
2092
  }, function (props) { return (props.$disabled ? 0.6 : 1); });
2093
2093
  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'); });
2094
- 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'); });
2095
- 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) {
2094
+ 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'); });
2095
+ 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) {
2096
2096
  return props.$format ? button_type_mapping[props.$format].badge_bg_color : '#fff';
2097
2097
  }, function (props) {
2098
2098
  return props.$format ? button_type_mapping[props.$format].badge_content_color : Colors.PRIMARY.Hex;
@@ -2104,11 +2104,11 @@ var Button = function (_a) {
2104
2104
  children ? (React.createElement(Label$4, { "$format": format, "$small": small }, children)) : null,
2105
2105
  icon && !badge ? (React.createElement(StyledIcon$2, { "$hasChildren": !!has_children },
2106
2106
  React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null,
2107
- badge && !icon ? (React.createElement(Badge, { "$format": format, "$small": small }, badge)) : null));
2107
+ badge && !icon ? (React.createElement(Badge$1, { "$format": format, "$small": small }, badge)) : null));
2108
2108
  };
2109
- var templateObject_1$m, templateObject_2$k, templateObject_3$h, templateObject_4$9;
2109
+ var templateObject_1$m, templateObject_2$k, templateObject_3$i, templateObject_4$9;
2110
2110
 
2111
- 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) {
2111
+ 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) {
2112
2112
  return ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none';
2113
2113
  }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; }, function (props) { return props.$align || 'left'; });
2114
2114
  var Copy = function (_a) {
@@ -2122,7 +2122,7 @@ var templateObject_1$l;
2122
2122
 
2123
2123
  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'; });
2124
2124
  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'; });
2125
- 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'; });
2125
+ 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'; });
2126
2126
  var Heading = function (_a) {
2127
2127
  var bold = _a.bold, children = _a.children, margin = _a.margin, padding = _a.padding, type = _a.type, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
2128
2128
  switch (type) {
@@ -2141,11 +2141,11 @@ Heading.defaultProps = {
2141
2141
  bold: false,
2142
2142
  type: 'primary',
2143
2143
  };
2144
- var templateObject_1$k, templateObject_2$j, templateObject_3$g;
2144
+ var templateObject_1$k, templateObject_2$j, templateObject_3$h;
2145
2145
 
2146
2146
  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"])));
2147
2147
  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"])));
2148
- 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"])));
2148
+ 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"])));
2149
2149
  var ActionDialog = function (_a) {
2150
2150
  var description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, accessibleProps = __rest(_a, ["description", "title", "onClose", "primaryButton", "secondaryButton"]);
2151
2151
  useEffect(function () {
@@ -2166,11 +2166,11 @@ var ActionDialog = function (_a) {
2166
2166
  secondaryButton ? (React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary', margin: '0px 5px' }))) : null,
2167
2167
  primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 5px' })) : null)) : null)));
2168
2168
  };
2169
- var templateObject_1$j, templateObject_2$i, templateObject_3$f;
2169
+ var templateObject_1$j, templateObject_2$i, templateObject_3$g;
2170
2170
 
2171
2171
  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"])));
2172
2172
  var Content$1 = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n margin-left: 20px;\n"], ["\n margin-left: 20px;\n"])));
2173
- 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);
2173
+ 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);
2174
2174
  var Alert = function (_a) {
2175
2175
  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"]);
2176
2176
  var type_mapping = {
@@ -2199,11 +2199,11 @@ var Alert = function (_a) {
2199
2199
  description ? React.createElement(Copy, { margin: '6px 0 0 0 !important' }, description) : null,
2200
2200
  action ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
2201
2201
  };
2202
- var templateObject_1$i, templateObject_2$h, templateObject_3$e;
2202
+ var templateObject_1$i, templateObject_2$h, templateObject_3$f;
2203
2203
 
2204
2204
  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);
2205
2205
  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"])));
2206
- 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"])));
2206
+ 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"])));
2207
2207
  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);
2208
2208
  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);
2209
2209
  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"])));
@@ -2223,18 +2223,18 @@ var BulkActionBar = function (_a) {
2223
2223
  React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
2224
2224
  React.createElement(ErrorMsg, null, errorMsg))) : null));
2225
2225
  };
2226
- 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;
2226
+ 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;
2227
2227
 
2228
2228
  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);
2229
2229
  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"])));
2230
- 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);
2230
+ 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);
2231
2231
  var Checkbox = function (_a) {
2232
2232
  var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
2233
2233
  return (React.createElement(Wrapper$b, __assign({}, accessibleProps),
2234
2234
  React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
2235
2235
  children ? React.createElement(Label$3, null, children) : null));
2236
2236
  };
2237
- var templateObject_1$g, templateObject_2$f, templateObject_3$c;
2237
+ var templateObject_1$g, templateObject_2$f, templateObject_3$d;
2238
2238
 
2239
2239
  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);
2240
2240
  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"])));
@@ -2275,7 +2275,7 @@ var Container$2 = styled.div(templateObject_2$d || (templateObject_2$d = __makeT
2275
2275
  var $width = _a.$width;
2276
2276
  return $width || '400px';
2277
2277
  });
2278
- 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"])));
2278
+ 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"])));
2279
2279
  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"])));
2280
2280
  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"])));
2281
2281
  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"])));
@@ -2306,12 +2306,12 @@ var Drawer = function (_a) {
2306
2306
  primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary' })) : null)) : null),
2307
2307
  scrim ? React.createElement(Scrim$1, { "$scrim": scrim, onClick: onClose }) : null));
2308
2308
  };
2309
- var templateObject_1$e, templateObject_2$d, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$3;
2309
+ var templateObject_1$e, templateObject_2$d, templateObject_3$c, templateObject_4$7, templateObject_5$5, templateObject_6$3;
2310
2310
 
2311
2311
  var Wrapper$a = styled.div(function (props) { return (__assign({ margin: '0px 0px 15px 0px' }, props.style)); });
2312
2312
  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"])));
2313
2313
  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);
2314
- 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);
2314
+ 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);
2315
2315
  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);
2316
2316
  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);
2317
2317
  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);
@@ -2327,7 +2327,7 @@ var Field = function (_a) {
2327
2327
  children,
2328
2328
  validationText ? React.createElement(Validation, null, validationText) : null));
2329
2329
  };
2330
- var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$2;
2330
+ var templateObject_1$d, templateObject_2$c, templateObject_3$b, templateObject_4$6, templateObject_5$4, templateObject_6$2;
2331
2331
 
2332
2332
  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) {
2333
2333
  var $isDragOver = _a.$isDragOver;
@@ -2340,7 +2340,7 @@ var StyledIcon$1 = styled.div(templateObject_2$b || (templateObject_2$b = __make
2340
2340
  var $isDragOver = _a.$isDragOver;
2341
2341
  return ($isDragOver ? '#fff' : '#f5f5f5');
2342
2342
  });
2343
- 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"])));
2343
+ 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"])));
2344
2344
  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"])));
2345
2345
  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) {
2346
2346
  var $fileState = _a.$fileState;
@@ -2426,7 +2426,7 @@ var FileUpload = function (_a) {
2426
2426
  React.createElement(Copy, { align: 'center', children: 'Drag & drop files here or click to choose', type: 'bold' }),
2427
2427
  React.createElement(Copy, { align: 'center', children: "".concat(maxFileSize, " MB max file size"), color: 'GRAY' }))))));
2428
2428
  };
2429
- var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8;
2429
+ var templateObject_1$c, templateObject_2$b, templateObject_3$a, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8;
2430
2430
 
2431
2431
  var formatAsPhone = function (number) {
2432
2432
  var formatted_value = "".concat(number).replace(/[^0-9.]/g, '');
@@ -2457,7 +2457,7 @@ var formatAsSsn = function (number) {
2457
2457
 
2458
2458
  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); });
2459
2459
  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);
2460
- var StyledWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
2460
+ var StyledWrapper = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
2461
2461
  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); });
2462
2462
  var Input$1 = function (_a) {
2463
2463
  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"]);
@@ -2503,7 +2503,7 @@ var Input$1 = function (_a) {
2503
2503
  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)),
2504
2504
  suffix && React.createElement(StyledSuffix, null, suffix)));
2505
2505
  };
2506
- var templateObject_1$b, templateObject_2$a, templateObject_3$8, templateObject_4$4;
2506
+ var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$4;
2507
2507
 
2508
2508
  var colorMapping = {
2509
2509
  black: {
@@ -2549,7 +2549,7 @@ var Logo = function (_a) {
2549
2549
 
2550
2550
  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"])));
2551
2551
  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'; });
2552
- 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"])));
2552
+ 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"])));
2553
2553
  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"])));
2554
2554
  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);
2555
2555
  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"])));
@@ -2585,11 +2585,11 @@ var Modal = function (_a) {
2585
2585
  secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
2586
2586
  primaryButton ? (React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
2587
2587
  };
2588
- var templateObject_1$a, templateObject_2$9, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6, templateObject_7;
2588
+ var templateObject_1$a, templateObject_2$9, templateObject_3$8, templateObject_4$3, templateObject_5$2, templateObject_6, templateObject_7;
2589
2589
 
2590
2590
  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'; });
2591
2591
  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"])));
2592
- 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"])));
2592
+ 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"])));
2593
2593
  var MoreMenu = function (_a) {
2594
2594
  var maxHeight = _a.maxHeight, _b = _a.menuItems, menuItems = _b === void 0 ? [] : _b, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
2595
2595
  return (React.createElement(Wrapper$7, __assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map(function (item) {
@@ -2598,7 +2598,7 @@ var MoreMenu = function (_a) {
2598
2598
  React.createElement(Title, null, item.label)));
2599
2599
  })));
2600
2600
  };
2601
- var templateObject_1$9, templateObject_2$8, templateObject_3$6;
2601
+ var templateObject_1$9, templateObject_2$8, templateObject_3$7;
2602
2602
 
2603
2603
  var Wrapper$6 = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
2604
2604
  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) {
@@ -2612,7 +2612,7 @@ var Trigger$1 = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTem
2612
2612
  return '#cccccc';
2613
2613
  }
2614
2614
  }, function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); });
2615
- 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);
2615
+ 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);
2616
2616
  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);
2617
2617
  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"])));
2618
2618
  var MultiSelect = function (_a) {
@@ -2629,7 +2629,7 @@ var MultiSelect = function (_a) {
2629
2629
  React.createElement(Checklist, { disabled: readOnly, onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
2630
2630
  showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
2631
2631
  };
2632
- var templateObject_1$8, templateObject_2$7, templateObject_3$5, templateObject_4$2, templateObject_5$1;
2632
+ var templateObject_1$8, templateObject_2$7, templateObject_3$6, templateObject_4$2, templateObject_5$1;
2633
2633
 
2634
2634
  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) {
2635
2635
  var $style = _a.$style;
@@ -2639,7 +2639,7 @@ var Wrapper$5 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTem
2639
2639
  return ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0;
2640
2640
  });
2641
2641
  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);
2642
- 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"])));
2642
+ 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"])));
2643
2643
  var Select = function (_a) {
2644
2644
  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"]);
2645
2645
  return (React.createElement(Wrapper$5, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
@@ -2658,7 +2658,7 @@ var Select = function (_a) {
2658
2658
  React.createElement(IconWrapper$1, null,
2659
2659
  React.createElement(Icon, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' }))));
2660
2660
  };
2661
- var templateObject_1$7, templateObject_2$6, templateObject_3$4;
2661
+ var templateObject_1$7, templateObject_2$6, templateObject_3$5;
2662
2662
 
2663
2663
  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"])));
2664
2664
  var Pagination = function (_a) {
@@ -2693,14 +2693,14 @@ var templateObject_1$6;
2693
2693
 
2694
2694
  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);
2695
2695
  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"])));
2696
- 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);
2696
+ 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);
2697
2697
  var Radio = function (_a) {
2698
2698
  var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, value = _a.value, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value"]);
2699
2699
  return (React.createElement(Wrapper$3, __assign({ "$disabled": disabled }, accessibleProps),
2700
2700
  React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'radio', value: value }),
2701
2701
  React.createElement(Label$1, null, children)));
2702
2702
  };
2703
- var templateObject_1$5, templateObject_2$5, templateObject_3$3;
2703
+ var templateObject_1$5, templateObject_2$5, templateObject_3$4;
2704
2704
 
2705
2705
  var RadioList = function (_a) {
2706
2706
  var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, value = _a.value, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
@@ -2712,7 +2712,7 @@ var RadioList = function (_a) {
2712
2712
 
2713
2713
  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'; });
2714
2714
  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); });
2715
- 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) {
2715
+ 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) {
2716
2716
  return props.$isClickable ? "rgba(".concat(Colors.PRIMARY.Rgb, ", 0.1)") : props.$bgColor;
2717
2717
  });
2718
2718
  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'; });
@@ -2733,19 +2733,22 @@ var Table = function (_a) {
2733
2733
  })));
2734
2734
  }))) : null));
2735
2735
  };
2736
- var templateObject_1$4, templateObject_2$4, templateObject_3$2, templateObject_4$1, templateObject_5;
2736
+ var templateObject_1$4, templateObject_2$4, templateObject_3$3, templateObject_4$1, templateObject_5;
2737
2737
 
2738
2738
  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"])));
2739
- 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); });
2739
+ 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); });
2740
+ 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);
2740
2741
  var Tabs = function (_a) {
2741
2742
  var tabs = _a.tabs, accessibleProps = __rest(_a, ["tabs"]);
2742
2743
  return (React.createElement(Wrapper$2, __assign({}, accessibleProps), tabs.map(function (_a) {
2743
- var isActive = _a.isActive, label = _a.label, accessibleProps = __rest(_a, ["isActive", "label"]);
2744
- return (React.createElement(Tab, __assign({ "$isActive": isActive || false }, accessibleProps), label));
2744
+ var isActive = _a.isActive, label = _a.label, badgeCount = _a.badgeCount, errorBadge = _a.errorBadge, onClick = _a.onClick, accessibleProps = __rest(_a, ["isActive", "label", "badgeCount", "errorBadge", "onClick"]);
2745
+ return (React.createElement(Tab, __assign({ "$isActive": isActive || false, onClick: isActive ? onClick : undefined }, accessibleProps),
2746
+ badgeCount ? React.createElement(Badge, { "$isError": errorBadge || false }, badgeCount) : null,
2747
+ label));
2745
2748
  })));
2746
2749
  };
2747
2750
  Tabs.defaultProps = {};
2748
- var templateObject_1$3, templateObject_2$3;
2751
+ var templateObject_1$3, templateObject_2$3, templateObject_3$2;
2749
2752
 
2750
2753
  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'); });
2751
2754
  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"])));