@hexure/ui 1.6.10 → 1.7.0

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.
package/dist/cjs/index.js CHANGED
@@ -2040,8 +2040,8 @@ var FontSizes = {
2040
2040
  SMALL: '13px',
2041
2041
  };
2042
2042
 
2043
- var Header$3 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n background: #f5f5f5;\n border: 1px solid #e5e5e5;\n padding: 14px 20px;\n height: 50px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n background: #f5f5f5;\n border: 1px solid #e5e5e5;\n padding: 14px 20px;\n height: 50px;\n cursor: pointer;\n"])));
2044
- var Title$1 = styled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n font-family: ", ";\n box-sizing: border-box;\n"], ["\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n font-family: ", ";\n box-sizing: border-box;\n"])), FontSizes.DEFAULT, Colors.BLACK.Hex, FontStyles.DEFAULT);
2043
+ var Header$3 = styled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n background: #f5f5f5;\n border: 1px solid #e5e5e5;\n padding: 14px 20px;\n height: 50px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n background: #f5f5f5;\n border: 1px solid #e5e5e5;\n padding: 14px 20px;\n height: 50px;\n cursor: pointer;\n"])));
2044
+ var Title$1 = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n font-family: ", ";\n box-sizing: border-box;\n"], ["\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n font-family: ", ";\n box-sizing: border-box;\n"])), FontSizes.DEFAULT, Colors.BLACK.Hex, FontStyles.DEFAULT);
2045
2045
  var Accordion = function (_a) {
2046
2046
  var title = _a.title, children = _a.children, open = _a.open, onClick = _a.onClick, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
2047
2047
  return (React.createElement(React.Fragment, null,
@@ -2050,7 +2050,7 @@ var Accordion = function (_a) {
2050
2050
  React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
2051
2051
  open ? children : null));
2052
2052
  };
2053
- var templateObject_1$p, templateObject_2$m;
2053
+ var templateObject_1$q, templateObject_2$n;
2054
2054
 
2055
2055
  var button_type_mapping = {
2056
2056
  primary: {
@@ -2075,7 +2075,7 @@ var button_type_mapping = {
2075
2075
  badge_content_color: Colors.RED.Hex,
2076
2076
  },
2077
2077
  };
2078
- var StyledButton = styled.button(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n height: ", ";\n line-height: 1em;\n border-radius: ", ";\n margin: ", ";\n padding: ", ";\n outline: none;\n background: ", ";\n width: ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n &:hover {\n opacity: ", ";\n }\n"], ["\n height: ", ";\n line-height: 1em;\n border-radius: ", ";\n margin: ", ";\n padding: ", ";\n outline: none;\n background: ", ";\n width: ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n &:hover {\n opacity: ", ";\n }\n"])), function (props) { return (props.$small ? '30px' : '40px'); }, function (props) { return (props.$small ? '15px' : '20px'); }, function (props) { return props.$margin || '0px'; }, function (props) {
2078
+ var StyledButton = styled.button(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n height: ", ";\n line-height: 1em;\n border-radius: ", ";\n margin: ", ";\n padding: ", ";\n outline: none;\n background: ", ";\n width: ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n &:hover {\n opacity: ", ";\n }\n"], ["\n height: ", ";\n line-height: 1em;\n border-radius: ", ";\n margin: ", ";\n padding: ", ";\n outline: none;\n background: ", ";\n width: ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n &:hover {\n opacity: ", ";\n }\n"])), function (props) { return (props.$small ? '30px' : '40px'); }, function (props) { return (props.$small ? '15px' : '20px'); }, function (props) { return props.$margin || '0px'; }, function (props) {
2079
2079
  if (props.$hasChildren) {
2080
2080
  if (props.$small) {
2081
2081
  return '0 10px';
@@ -2098,8 +2098,8 @@ var StyledButton = styled.button(templateObject_1$o || (templateObject_1$o = __m
2098
2098
  }, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); }, function (props) {
2099
2099
  return props.$format ? button_type_mapping[props.$format].border_color : Colors.PRIMARY.Hex;
2100
2100
  }, function (props) { return (props.$disabled ? 0.6 : 1); });
2101
- var Label$4 = styled.span(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n line-height: 1;\n"], ["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n line-height: 1;\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);
2102
- 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'); });
2101
+ var Label$4 = styled.span(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n line-height: 1;\n"], ["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n line-height: 1;\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);
2102
+ var StyledIcon$3 = 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'); });
2103
2103
  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) {
2104
2104
  return props.$format ? button_type_mapping[props.$format].badge_bg_color : '#fff';
2105
2105
  }, function (props) {
@@ -2110,13 +2110,13 @@ var Button = function (_a) {
2110
2110
  var has_children = children && children.length > 0;
2111
2111
  return (React.createElement(StyledButton, __assign({ "$disabled": disabled || loading, "$format": format, "$hasChildren": !!has_children, "$margin": margin, "$small": small, onClick: disabled || loading ? undefined : onClick, type: isForm ? 'submit' : undefined }, accessibleProps),
2112
2112
  children ? (React.createElement(Label$4, { "$format": format, "$small": small }, children)) : null,
2113
- icon && !badge ? (React.createElement(StyledIcon$2, { "$hasChildren": !!has_children },
2113
+ icon && !badge ? (React.createElement(StyledIcon$3, { "$hasChildren": !!has_children },
2114
2114
  React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
2115
2115
  badge && !icon ? (React.createElement(Badge$1, { "$format": format, "$small": small }, badge)) : null));
2116
2116
  };
2117
- var templateObject_1$o, templateObject_2$l, templateObject_3$i, templateObject_4$9;
2117
+ var templateObject_1$p, templateObject_2$m, templateObject_3$i, templateObject_4$9;
2118
2118
 
2119
- var StyledComponent = styled.p(templateObject_1$n || (templateObject_1$n = __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) {
2119
+ var StyledComponent = styled.p(templateObject_1$o || (templateObject_1$o = __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) {
2120
2120
  return ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none';
2121
2121
  }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; }, function (props) { return props.$align || 'left'; });
2122
2122
  var Copy = function (_a) {
@@ -2126,10 +2126,10 @@ var Copy = function (_a) {
2126
2126
  Copy.defaultProps = {
2127
2127
  type: 'default',
2128
2128
  };
2129
- var templateObject_1$n;
2129
+ var templateObject_1$o;
2130
2130
 
2131
- var H1 = styled.h1(templateObject_1$m || (templateObject_1$m = __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'; });
2132
- var H2 = styled.h2(templateObject_2$k || (templateObject_2$k = __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'; });
2131
+ var H1 = styled.h1(templateObject_1$n || (templateObject_1$n = __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'; });
2132
+ var H2 = styled.h2(templateObject_2$l || (templateObject_2$l = __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'; });
2133
2133
  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'; });
2134
2134
  var Heading = function (_a) {
2135
2135
  var bold = _a.bold, children = _a.children, margin = _a.margin, padding = _a.padding, type = _a.type, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
@@ -2149,14 +2149,14 @@ Heading.defaultProps = {
2149
2149
  bold: false,
2150
2150
  type: 'primary',
2151
2151
  };
2152
- var templateObject_1$m, templateObject_2$k, templateObject_3$h;
2152
+ var templateObject_1$n, templateObject_2$l, templateObject_3$h;
2153
2153
 
2154
- var Wrapper$f = styled.div(templateObject_1$l || (templateObject_1$l = __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"])));
2155
- var Container$3 = styled.dialog(templateObject_2$j || (templateObject_2$j = __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"])));
2154
+ var Wrapper$g = styled.div(templateObject_1$m || (templateObject_1$m = __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"])));
2155
+ var Container$3 = styled.dialog(templateObject_2$k || (templateObject_2$k = __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"])));
2156
2156
  var Buttons = styled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n gap: 10px;\n align-items: center;\n justify-content: center;\n margin-top: 30px;\n box-sizing: border-box;\n"], ["\n display: flex;\n gap: 10px;\n align-items: center;\n justify-content: center;\n margin-top: 30px;\n box-sizing: border-box;\n"])));
2157
2157
  var ActionDialog = function (_a) {
2158
2158
  var description = _a.description, title = _a.title, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton"]);
2159
- return (React.createElement(Wrapper$f, __assign({}, accessibleProps),
2159
+ return (React.createElement(Wrapper$g, __assign({}, accessibleProps),
2160
2160
  React.createElement(Container$3, { open: true },
2161
2161
  title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
2162
2162
  description ? React.createElement(Copy, { align: 'center' }, description) : null,
@@ -2165,10 +2165,10 @@ var ActionDialog = function (_a) {
2165
2165
  secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
2166
2166
  primaryButton ? (React.createElement(Button, __assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
2167
2167
  };
2168
- var templateObject_1$l, templateObject_2$j, templateObject_3$g;
2168
+ var templateObject_1$m, templateObject_2$k, templateObject_3$g;
2169
2169
 
2170
- var Wrapper$e = styled.div(templateObject_1$k || (templateObject_1$k = __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"])));
2171
- var Content$1 = styled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin-left: 20px;\n"], ["\n margin-left: 20px;\n"])));
2170
+ var Wrapper$f = styled.div(templateObject_1$l || (templateObject_1$l = __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"])));
2171
+ var Content$2 = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin-left: 20px;\n"], ["\n margin-left: 20px;\n"])));
2172
2172
  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);
2173
2173
  var Alert = function (_a) {
2174
2174
  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"]);
@@ -2190,18 +2190,18 @@ var Alert = function (_a) {
2190
2190
  icon: js.mdiCheckboxMarkedCircleOutline,
2191
2191
  },
2192
2192
  };
2193
- return (React.createElement(Wrapper$e, __assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
2193
+ return (React.createElement(Wrapper$f, __assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
2194
2194
  React.createElement("div", { style: { flexShrink: 0 } },
2195
2195
  React.createElement(Icon, { color: type_mapping[type].color, path: type_mapping[type].icon, size: '30px' })),
2196
- React.createElement(Content$1, null,
2196
+ React.createElement(Content$2, null,
2197
2197
  title ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
2198
2198
  description ? React.createElement(Copy, { margin: '6px 0 0 0 !important' }, description) : null,
2199
2199
  action ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
2200
2200
  };
2201
- var templateObject_1$k, templateObject_2$i, templateObject_3$f;
2201
+ var templateObject_1$l, templateObject_2$j, templateObject_3$f;
2202
2202
 
2203
- var Wrapper$d = styled.div(templateObject_1$j || (templateObject_1$j = __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);
2204
- var Left = styled.div(templateObject_2$h || (templateObject_2$h = __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"])));
2203
+ var Wrapper$e = styled.div(templateObject_1$k || (templateObject_1$k = __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);
2204
+ var Left = styled.div(templateObject_2$i || (templateObject_2$i = __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"])));
2205
2205
  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"])));
2206
2206
  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);
2207
2207
  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);
@@ -2210,7 +2210,7 @@ var Error$1 = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTempl
2210
2210
  var ErrorMsg = styled.span(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"], ["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"])), FontStyles.DEFAULT, Colors.RED.Hex);
2211
2211
  var BulkActionBar = function (_a) {
2212
2212
  var _b = _a.actions, actions = _b === void 0 ? [] : _b, errorMsg = _a.errorMsg, onClear = _a.onClear, _c = _a.selectedCount, selectedCount = _c === void 0 ? 0 : _c, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
2213
- return (React.createElement(Wrapper$d, __assign({}, accessibleProps),
2213
+ return (React.createElement(Wrapper$e, __assign({}, accessibleProps),
2214
2214
  React.createElement(Left, null,
2215
2215
  React.createElement(Info, null,
2216
2216
  React.createElement(Selected, null,
@@ -2222,21 +2222,21 @@ var BulkActionBar = function (_a) {
2222
2222
  React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
2223
2223
  React.createElement(ErrorMsg, null, errorMsg))) : null));
2224
2224
  };
2225
- var templateObject_1$j, templateObject_2$h, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$2;
2225
+ var templateObject_1$k, templateObject_2$i, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$2;
2226
2226
 
2227
- var Wrapper$c = styled.label(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: flex-start;\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: flex-start;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n"])), function (props) { return (props.$disabled ? 'default' : 'pointer'); }, FontSizes.DEFAULT);
2228
- var Input$2 = styled.input(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n font-size: 20px;\n margin: 5px 0px 0px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n"], ["\n font-size: 20px;\n margin: 5px 0px 0px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n"])));
2227
+ var Wrapper$d = styled.label(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: flex-start;\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: flex-start;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n"])), function (props) { return (props.$disabled ? 'default' : 'pointer'); }, FontSizes.DEFAULT);
2228
+ var Input$2 = styled.input(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n font-size: 20px;\n margin: 5px 0px 0px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n"], ["\n font-size: 20px;\n margin: 5px 0px 0px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n"])));
2229
2229
  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);
2230
2230
  var Checkbox = function (_a) {
2231
2231
  var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
2232
- return (React.createElement(Wrapper$c, __assign({}, accessibleProps),
2232
+ return (React.createElement(Wrapper$d, __assign({}, accessibleProps),
2233
2233
  React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
2234
2234
  children ? React.createElement(Label$3, null, children) : null));
2235
2235
  };
2236
- var templateObject_1$i, templateObject_2$g, templateObject_3$d;
2236
+ var templateObject_1$j, templateObject_2$h, templateObject_3$d;
2237
2237
 
2238
- var SelectAll = styled.div(templateObject_1$h || (templateObject_1$h = __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);
2239
- var Options$1 = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n padding: 12px;\n box-sizing: border-box;\n"], ["\n padding: 12px;\n box-sizing: border-box;\n"])));
2238
+ var SelectAll = styled.div(templateObject_1$i || (templateObject_1$i = __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);
2239
+ var Options$1 = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n padding: 12px;\n box-sizing: border-box;\n"], ["\n padding: 12px;\n box-sizing: border-box;\n"])));
2240
2240
  var Checklist = function (_a) {
2241
2241
  var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, _b = _a.selected, selected = _b === void 0 ? [] : _b, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
2242
2242
  var values = options.map(function (option) { return option.value; });
@@ -2273,7 +2273,7 @@ var Checklist = function (_a) {
2273
2273
  return (React.createElement(Checkbox, __assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
2274
2274
  }))));
2275
2275
  };
2276
- var templateObject_1$h, templateObject_2$f;
2276
+ var templateObject_1$i, templateObject_2$g;
2277
2277
 
2278
2278
  var dayjs_min = {exports: {}};
2279
2279
 
@@ -2593,7 +2593,7 @@ var dayjs_min = {exports: {}};
2593
2593
  var dayjs_minExports = dayjs_min.exports;
2594
2594
  var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
2595
2595
 
2596
- var Wrapper$b = styled.div(templateObject_1$g || (templateObject_1$g = __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 width: ", ";\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 width: ", ";\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid ? Colors.RED.Hex : '#cccccc'); }, function (_a) {
2596
+ var Wrapper$c = styled.div(templateObject_1$h || (templateObject_1$h = __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 width: ", ";\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 width: ", ";\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid ? Colors.RED.Hex : '#cccccc'); }, function (_a) {
2597
2597
  var $style = _a.$style;
2598
2598
  return ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px';
2599
2599
  }, function (_a) {
@@ -2603,11 +2603,11 @@ var Wrapper$b = styled.div(templateObject_1$g || (templateObject_1$g = __makeTem
2603
2603
  var $style = _a.$style;
2604
2604
  return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
2605
2605
  });
2606
- var Trigger$1 = styled.select(templateObject_2$e || (templateObject_2$e = __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);
2606
+ var Trigger$1 = styled.select(templateObject_2$f || (templateObject_2$f = __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);
2607
2607
  var IconWrapper$2 = styled(Icon)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n position: absolute;\n right: 9px;\n z-index: 1;\n"], ["\n position: absolute;\n right: 9px;\n z-index: 1;\n"])));
2608
2608
  var Select = function (_a) {
2609
2609
  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"]);
2610
- return (React.createElement(Wrapper$b, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
2610
+ return (React.createElement(Wrapper$c, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
2611
2611
  React.createElement(Trigger$1, __assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
2612
2612
  placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
2613
2613
  optionGroups &&
@@ -2622,13 +2622,13 @@ var Select = function (_a) {
2622
2622
  })),
2623
2623
  React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' })));
2624
2624
  };
2625
- var templateObject_1$g, templateObject_2$e, templateObject_3$c;
2625
+ var templateObject_1$h, templateObject_2$f, templateObject_3$c;
2626
2626
 
2627
- var DatePickerWrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n width: ", ";\n"], ["\n display: flex;\n width: ", ";\n"])), function (_a) {
2627
+ var DatePickerWrapper = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n width: ", ";\n"], ["\n display: flex;\n width: ", ";\n"])), function (_a) {
2628
2628
  var $style = _a.$style;
2629
2629
  return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
2630
2630
  });
2631
- var Middle = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin: 0px -1px;\n flex-grow: 1;\n"], ["\n margin: 0px -1px;\n flex-grow: 1;\n"])));
2631
+ var Middle = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin: 0px -1px;\n flex-grow: 1;\n"], ["\n margin: 0px -1px;\n flex-grow: 1;\n"])));
2632
2632
  var DatePicker = function (_a) {
2633
2633
  var _b = _a.readOnly, readOnly = _b === void 0 ? false : _b, _c = _a.invalid, invalid = _c === void 0 ? false : _c, _d = _a.maxDate, maxDate = _d === void 0 ? null : _d, _e = _a.minDate, minDate = _e === void 0 ? null : _e, date = _a.date, onChange = _a.onChange, style = _a.style;
2634
2634
  var dMaxDate = maxDate ? dayjs(maxDate) : dayjs();
@@ -2688,9 +2688,9 @@ var DatePicker = function (_a) {
2688
2688
  React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
2689
2689
  React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
2690
2690
  };
2691
- var templateObject_1$f, templateObject_2$d;
2691
+ var templateObject_1$g, templateObject_2$e;
2692
2692
 
2693
- var Scrim$1 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n position: ", ";\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: ", ";\n background: ", ";\n"], ["\n position: ", ";\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: ", ";\n background: ", ";\n"])), function (_a) {
2693
+ var Scrim$1 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n position: ", ";\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: ", ";\n background: ", ";\n"], ["\n position: ", ";\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: ", ";\n background: ", ";\n"])), function (_a) {
2694
2694
  var $position = _a.$position;
2695
2695
  return $position;
2696
2696
  }, function (_a) {
@@ -2700,7 +2700,7 @@ var Scrim$1 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTempl
2700
2700
  var $scrim = _a.$scrim;
2701
2701
  return ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent');
2702
2702
  });
2703
- var Container$2 = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n z-index: ", ";\n min-width: 400px;\n width: ", ";\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: ", ";\n top: 0;\n right: 0;\n bottom: 0;\n padding: 0px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n background: #fff;\n"], ["\n z-index: ", ";\n min-width: 400px;\n width: ", ";\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: ", ";\n top: 0;\n right: 0;\n bottom: 0;\n padding: 0px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n background: #fff;\n"])), function (_a) {
2703
+ var Container$2 = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n z-index: ", ";\n min-width: 400px;\n width: ", ";\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: ", ";\n top: 0;\n right: 0;\n bottom: 0;\n padding: 0px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n background: #fff;\n"], ["\n z-index: ", ";\n min-width: 400px;\n width: ", ";\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: ", ";\n top: 0;\n right: 0;\n bottom: 0;\n padding: 0px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n background: #fff;\n"])), function (_a) {
2704
2704
  var $position = _a.$position;
2705
2705
  return ($position === 'fixed' ? 9999 : 11);
2706
2706
  }, function (_a) {
@@ -2741,22 +2741,63 @@ var Drawer = function (_a) {
2741
2741
  primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary' })) : null)) : null),
2742
2742
  scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
2743
2743
  };
2744
- var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$3;
2744
+ var templateObject_1$f, templateObject_2$d, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$3;
2745
+
2746
+ var Wrapper$b = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: inline-block;\n position: relative;\n height: 16px;\n"], ["\n display: inline-block;\n position: relative;\n height: 16px;\n"])));
2747
+ var StyledIcon$2 = styled(Icon)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n width: 16px;\n height: 16px;\n padding: 0px 6px;\n color: ", ";\n cursor: pointer;\n"], ["\n width: 16px;\n height: 16px;\n padding: 0px 6px;\n color: ", ";\n cursor: pointer;\n"])), Colors.PRIMARY.Hex);
2748
+ var positions = {
2749
+ 'right-top': {
2750
+ top: '0px',
2751
+ left: '28px',
2752
+ },
2753
+ 'right-bottom': {
2754
+ bottom: '0px',
2755
+ left: '28px',
2756
+ },
2757
+ 'right-center': {
2758
+ top: '50%',
2759
+ left: '28px',
2760
+ transform: 'translateY(-50%)',
2761
+ },
2762
+ 'left-top': {
2763
+ top: '0px',
2764
+ right: '28px',
2765
+ },
2766
+ 'left-bottom': {
2767
+ bottom: '0px',
2768
+ right: '28px',
2769
+ },
2770
+ 'left-center': {
2771
+ top: '50%',
2772
+ right: '28px',
2773
+ transform: 'translateY(-50%)',
2774
+ },
2775
+ };
2776
+ var Content$1 = styled.div(function (props) { return (__assign({ position: 'absolute', borderRadius: '4px', borderWidth: '1px', borderStyle: 'solid', borderColor: Colors.PRIMARY.Hex, background: '#ffffff', boxShadow: '0px 5px 30px -10px rgba(0, 0, 0, 0.5)', width: props.$width || '240px', padding: '10px 12px', zIndex: 10 }, positions[props.$position])); });
2777
+ var Tooltip = function (_a) {
2778
+ var children = _a.children, _b = _a.position, position = _b === void 0 ? 'right-top' : _b, _c = _a.width, width = _c === void 0 ? '240px' : _c;
2779
+ var _d = React.useState(false), show_content = _d[0], toggleContent = _d[1];
2780
+ return (React.createElement(Wrapper$b, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
2781
+ React.createElement(StyledIcon$2, { path: js.mdiInformationOutline }),
2782
+ show_content ? (React.createElement(Content$1, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
2783
+ };
2784
+ var templateObject_1$e, templateObject_2$c;
2745
2785
 
2746
2786
  var Wrapper$a = styled.div(function (props) { return (__assign({ margin: '0px 0px 18px 0px' }, props.style)); });
2747
2787
  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"])));
2748
- var Label$2 = styled.label(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, Colors.BLACK.Hex);
2788
+ var Label$2 = styled.label(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n"], ["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, Colors.BLACK.Hex);
2749
2789
  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);
2750
2790
  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);
2751
2791
  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);
2752
2792
  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);
2753
2793
  var Field = function (_a) {
2754
- var action = _a.action, children = _a.children, validationText = _a.validationText, label = _a.label, description = _a.description, required = _a.required, htmlFor = _a.htmlFor, style = _a.style, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style"]);
2794
+ var action = _a.action, children = _a.children, validationText = _a.validationText, label = _a.label, description = _a.description, required = _a.required, htmlFor = _a.htmlFor, style = _a.style, tooltip = _a.tooltip, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
2755
2795
  return (React.createElement(Wrapper$a, __assign({ style: style }, accessibleProps),
2756
2796
  React.createElement(LabelRow, null,
2757
2797
  React.createElement(Label$2, { htmlFor: htmlFor },
2758
2798
  label,
2759
- required ? React.createElement(Required, null, "*") : null),
2799
+ required ? React.createElement(Required, null, "*") : null,
2800
+ tooltip ? React.createElement(Tooltip, __assign({}, tooltip)) : null),
2760
2801
  action ? React.createElement(Action, { onClick: action.onClick }, action.label) : null),
2761
2802
  description ? React.createElement(Description, null, description) : null,
2762
2803
  children,
@@ -3249,5 +3290,6 @@ exports.Table = Table;
3249
3290
  exports.Tabs = Tabs;
3250
3291
  exports.Tag = Tag;
3251
3292
  exports.Toggle = Toggle;
3293
+ exports.Tooltip = Tooltip;
3252
3294
  exports.ZeroState = ZeroState;
3253
3295
  //# sourceMappingURL=index.js.map