@hexure/ui 1.2.0 → 1.3.2
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 +179 -124
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/Alert/Alert.d.ts +6 -0
- package/dist/cjs/types/components/Button/Button.d.ts +7 -2
- package/dist/cjs/types/components/DatePicker/DatePicker.d.ts +27 -0
- package/dist/cjs/types/components/DatePicker/DatePicker.stories.d.ts +5 -0
- package/dist/cjs/types/components/DatePicker/index.d.ts +1 -0
- package/dist/cjs/types/components/Input/Input.d.ts +1 -0
- package/dist/cjs/types/components/Logo/Logo.d.ts +16 -0
- package/dist/cjs/types/components/Logo/Logo.stories.d.ts +5 -0
- package/dist/cjs/types/components/Logo/index.d.ts +1 -0
- package/dist/cjs/types/components/MoreMenu/MoreMenu.d.ts +13 -0
- package/dist/cjs/types/components/MoreMenu/MoreMenu.stories.d.ts +5 -0
- package/dist/cjs/types/components/MoreMenu/index.d.ts +1 -0
- package/dist/cjs/types/components/Select/Select.d.ts +9 -0
- package/dist/cjs/types/components/ZeroState/ZeroState.d.ts +18 -0
- package/dist/cjs/types/components/ZeroState/ZeroState.stories.d.ts +5 -0
- package/dist/cjs/types/components/ZeroState/index.d.ts +1 -0
- package/dist/cjs/types/index.d.ts +2 -0
- package/dist/esm/index.js +178 -125
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/Alert/Alert.d.ts +6 -0
- package/dist/esm/types/components/Button/Button.d.ts +7 -2
- package/dist/esm/types/components/DatePicker/DatePicker.d.ts +27 -0
- package/dist/esm/types/components/DatePicker/DatePicker.stories.d.ts +5 -0
- package/dist/esm/types/components/DatePicker/index.d.ts +1 -0
- package/dist/esm/types/components/Input/Input.d.ts +1 -0
- package/dist/esm/types/components/Logo/Logo.d.ts +16 -0
- package/dist/esm/types/components/Logo/Logo.stories.d.ts +5 -0
- package/dist/esm/types/components/Logo/index.d.ts +1 -0
- package/dist/esm/types/components/MoreMenu/MoreMenu.d.ts +13 -0
- package/dist/esm/types/components/MoreMenu/MoreMenu.stories.d.ts +5 -0
- package/dist/esm/types/components/MoreMenu/index.d.ts +1 -0
- package/dist/esm/types/components/Select/Select.d.ts +9 -0
- package/dist/esm/types/components/ZeroState/ZeroState.d.ts +18 -0
- package/dist/esm/types/components/ZeroState/ZeroState.stories.d.ts +5 -0
- package/dist/esm/types/components/ZeroState/index.d.ts +1 -0
- package/dist/esm/types/index.d.ts +2 -0
- package/dist/index.d.ts +47 -3
- package/package.json +6 -5
package/dist/cjs/index.js
CHANGED
|
@@ -2025,36 +2025,42 @@ var FontSizes = {
|
|
|
2025
2025
|
SMALL: '13px',
|
|
2026
2026
|
};
|
|
2027
2027
|
|
|
2028
|
-
var Header$3 = styled.div(templateObject_1$
|
|
2029
|
-
var Title = styled.div(templateObject_2$
|
|
2028
|
+
var Header$3 = styled.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
2029
|
+
var Title$1 = styled.div(templateObject_2$k || (templateObject_2$k = __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);
|
|
2030
2030
|
var Accordion = function (_a) {
|
|
2031
2031
|
var title = _a.title, children = _a.children, open = _a.open, onClick = _a.onClick, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
|
|
2032
2032
|
return (React.createElement(React.Fragment, null,
|
|
2033
2033
|
React.createElement(Header$3, __assign({ onClick: onClick }, accessibleProps),
|
|
2034
|
-
React.createElement(Title, null, title),
|
|
2034
|
+
React.createElement(Title$1, null, title),
|
|
2035
2035
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
|
|
2036
2036
|
open ? children : null));
|
|
2037
2037
|
};
|
|
2038
|
-
var templateObject_1$
|
|
2038
|
+
var templateObject_1$m, templateObject_2$k;
|
|
2039
2039
|
|
|
2040
2040
|
var button_type_mapping = {
|
|
2041
2041
|
primary: {
|
|
2042
2042
|
background_color: Colors.PRIMARY.Hex,
|
|
2043
2043
|
border_color: Colors.PRIMARY.Hex,
|
|
2044
2044
|
content_color: '#fff',
|
|
2045
|
+
badge_bg_color: '#fff',
|
|
2046
|
+
badge_content_color: Colors.PRIMARY.Hex,
|
|
2045
2047
|
},
|
|
2046
2048
|
secondary: {
|
|
2047
2049
|
background_color: 'transparent',
|
|
2048
2050
|
border_color: Colors.PRIMARY.Hex,
|
|
2049
2051
|
content_color: Colors.PRIMARY.Hex,
|
|
2052
|
+
badge_bg_color: Colors.PRIMARY.Hex,
|
|
2053
|
+
badge_content_color: '#fff',
|
|
2050
2054
|
},
|
|
2051
2055
|
red: {
|
|
2052
2056
|
background_color: Colors.RED.Hex,
|
|
2053
2057
|
border_color: Colors.RED.Hex,
|
|
2054
2058
|
content_color: '#fff',
|
|
2059
|
+
badge_bg_color: '#fff',
|
|
2060
|
+
badge_content_color: Colors.RED.Hex,
|
|
2055
2061
|
},
|
|
2056
2062
|
};
|
|
2057
|
-
var StyledButton = styled.button(templateObject_1$
|
|
2063
|
+
var StyledButton = styled.button(templateObject_1$l || (templateObject_1$l = __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) {
|
|
2058
2064
|
if (props.$hasChildren) {
|
|
2059
2065
|
if (props.$small) {
|
|
2060
2066
|
return '0 10px';
|
|
@@ -2065,7 +2071,7 @@ var StyledButton = styled.button(templateObject_1$j || (templateObject_1$j = __m
|
|
|
2065
2071
|
}
|
|
2066
2072
|
return '0px';
|
|
2067
2073
|
}, function (props) {
|
|
2068
|
-
return props.$
|
|
2074
|
+
return props.$format ? button_type_mapping[props.$format].background_color : Colors.PRIMARY.Hex;
|
|
2069
2075
|
}, function (props) {
|
|
2070
2076
|
if (props.$hasChildren) {
|
|
2071
2077
|
return 'auto';
|
|
@@ -2075,21 +2081,27 @@ var StyledButton = styled.button(templateObject_1$j || (templateObject_1$j = __m
|
|
|
2075
2081
|
}
|
|
2076
2082
|
return '40px';
|
|
2077
2083
|
}, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); }, function (props) {
|
|
2078
|
-
return props.$
|
|
2084
|
+
return props.$format ? button_type_mapping[props.$format].border_color : Colors.PRIMARY.Hex;
|
|
2079
2085
|
}, function (props) { return (props.$disabled ? 0.6 : 1); });
|
|
2080
|
-
var Label$
|
|
2081
|
-
var StyledIcon = styled.span(templateObject_3$
|
|
2086
|
+
var Label$4 = styled.span(templateObject_2$j || (templateObject_2$j = __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'); });
|
|
2087
|
+
var StyledIcon$1 = styled.span(templateObject_3$g || (templateObject_3$g = __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'); });
|
|
2088
|
+
var Badge = styled.span(templateObject_4$8 || (templateObject_4$8 = __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) {
|
|
2089
|
+
return props.$format ? button_type_mapping[props.$format].badge_bg_color : '#fff';
|
|
2090
|
+
}, function (props) {
|
|
2091
|
+
return props.$format ? button_type_mapping[props.$format].badge_content_color : Colors.PRIMARY.Hex;
|
|
2092
|
+
}, function (props) { return (props.$small ? '10px' : '12px'); }, FontStyles.DEFAULT, function (props) { return (props.$small ? '5px' : '10px'); }, function (props) { return (props.$small ? '-5px' : '-10px'); });
|
|
2082
2093
|
var Button = function (_a) {
|
|
2083
|
-
var children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.margin, margin =
|
|
2094
|
+
var badge = _a.badge, children = _a.children, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.isForm, isForm = _c === void 0 ? false : _c, _d = _a.margin, margin = _d === void 0 ? '' : _d, onClick = _a.onClick, _e = _a.small, small = _e === void 0 ? false : _e, _f = _a.format, format = _f === void 0 ? 'primary' : _f, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "margin", "onClick", "small", "format"]);
|
|
2084
2095
|
var has_children = children && children.length > 0;
|
|
2085
|
-
return (React.createElement(StyledButton, __assign({ "$disabled": disabled, "$hasChildren": !!has_children, "$margin": margin, "$small": small,
|
|
2086
|
-
children ? (React.createElement(Label$
|
|
2087
|
-
icon ? (React.createElement(StyledIcon, { "$hasChildren": !!has_children },
|
|
2088
|
-
React.createElement(Icon, { color:
|
|
2096
|
+
return (React.createElement(StyledButton, __assign({ "$disabled": disabled, "$format": format, "$hasChildren": !!has_children, "$margin": margin, "$small": small, onClick: disabled ? undefined : onClick, type: isForm ? 'submit' : undefined }, accessibleProps),
|
|
2097
|
+
children ? (React.createElement(Label$4, { "$format": format, "$small": small }, children)) : null,
|
|
2098
|
+
icon && !badge ? (React.createElement(StyledIcon$1, { "$hasChildren": !!has_children },
|
|
2099
|
+
React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null,
|
|
2100
|
+
badge && !icon ? (React.createElement(Badge, { "$format": format, "$small": small }, badge)) : null));
|
|
2089
2101
|
};
|
|
2090
|
-
var templateObject_1$
|
|
2102
|
+
var templateObject_1$l, templateObject_2$j, templateObject_3$g, templateObject_4$8;
|
|
2091
2103
|
|
|
2092
|
-
var StyledComponent = styled.p(templateObject_1$
|
|
2104
|
+
var StyledComponent = styled.p(templateObject_1$k || (templateObject_1$k = __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) {
|
|
2093
2105
|
return ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none';
|
|
2094
2106
|
}, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; }, function (props) { return props.$align || 'left'; });
|
|
2095
2107
|
var Copy = function (_a) {
|
|
@@ -2099,11 +2111,11 @@ var Copy = function (_a) {
|
|
|
2099
2111
|
Copy.defaultProps = {
|
|
2100
2112
|
type: 'default',
|
|
2101
2113
|
};
|
|
2102
|
-
var templateObject_1$
|
|
2114
|
+
var templateObject_1$k;
|
|
2103
2115
|
|
|
2104
|
-
var H1 = styled.h1(templateObject_1$
|
|
2105
|
-
var H2 = styled.h2(templateObject_2$
|
|
2106
|
-
var H3 = styled.h3(templateObject_3$
|
|
2116
|
+
var H1 = styled.h1(templateObject_1$j || (templateObject_1$j = __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'; });
|
|
2117
|
+
var H2 = styled.h2(templateObject_2$i || (templateObject_2$i = __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'; });
|
|
2118
|
+
var H3 = styled.h3(templateObject_3$f || (templateObject_3$f = __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'; });
|
|
2107
2119
|
var Heading = function (_a) {
|
|
2108
2120
|
var bold = _a.bold, children = _a.children, margin = _a.margin, padding = _a.padding, type = _a.type, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
|
|
2109
2121
|
switch (type) {
|
|
@@ -2122,11 +2134,11 @@ Heading.defaultProps = {
|
|
|
2122
2134
|
bold: false,
|
|
2123
2135
|
type: 'primary',
|
|
2124
2136
|
};
|
|
2125
|
-
var templateObject_1$
|
|
2137
|
+
var templateObject_1$j, templateObject_2$i, templateObject_3$f;
|
|
2126
2138
|
|
|
2127
|
-
var Wrapper$
|
|
2128
|
-
var Container$
|
|
2129
|
-
var Buttons = styled.div(templateObject_3$
|
|
2139
|
+
var Wrapper$d = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"], ["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"])));
|
|
2140
|
+
var Container$3 = styled.dialog(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n max-width: 600px;\n width: auto;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: relative;\n padding: 40px;\n text-align: center;\n box-sizing: border-box;\n"], ["\n max-width: 600px;\n width: auto;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: relative;\n padding: 40px;\n text-align: center;\n box-sizing: border-box;\n"])));
|
|
2141
|
+
var Buttons = styled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 30px;\n box-sizing: border-box;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 30px;\n box-sizing: border-box;\n"])));
|
|
2130
2142
|
var ActionDialog = function (_a) {
|
|
2131
2143
|
var description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, accessibleProps = __rest(_a, ["description", "title", "onClose", "primaryButton", "secondaryButton"]);
|
|
2132
2144
|
React.useEffect(function () {
|
|
@@ -2139,20 +2151,21 @@ var ActionDialog = function (_a) {
|
|
|
2139
2151
|
document.onkeydown = null;
|
|
2140
2152
|
};
|
|
2141
2153
|
}, []);
|
|
2142
|
-
return (React.createElement(Wrapper$
|
|
2143
|
-
React.createElement(Container$
|
|
2154
|
+
return (React.createElement(Wrapper$d, __assign({}, accessibleProps),
|
|
2155
|
+
React.createElement(Container$3, { open: true },
|
|
2144
2156
|
title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
|
|
2145
2157
|
description ? React.createElement(Copy, { align: 'center' }, description) : null,
|
|
2146
2158
|
primaryButton || secondaryButton ? (React.createElement(Buttons, null,
|
|
2147
|
-
secondaryButton ? (React.createElement(Button, __assign({}, secondaryButton, {
|
|
2148
|
-
primaryButton ? React.createElement(Button, __assign({}, primaryButton, {
|
|
2159
|
+
secondaryButton ? (React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary', margin: '0px 5px' }))) : null,
|
|
2160
|
+
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 5px' })) : null)) : null)));
|
|
2149
2161
|
};
|
|
2150
|
-
var templateObject_1$
|
|
2162
|
+
var templateObject_1$i, templateObject_2$h, templateObject_3$e;
|
|
2151
2163
|
|
|
2152
|
-
var Wrapper$
|
|
2153
|
-
var Content$1 = styled.div(templateObject_2$
|
|
2164
|
+
var Wrapper$c = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n border: 1px solid #f1f1f1;\n border-radius: 4px;\n border-left-width: 4px;\n box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: flex-start;\n padding: 20px;\n box-sizing: border-box;\n"], ["\n border: 1px solid #f1f1f1;\n border-radius: 4px;\n border-left-width: 4px;\n box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: flex-start;\n padding: 20px;\n box-sizing: border-box;\n"])));
|
|
2165
|
+
var Content$1 = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin-left: 20px;\n"], ["\n margin-left: 20px;\n"])));
|
|
2166
|
+
var Action$1 = styled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n cursor: pointer;\n margin-top: 6px;\n"], ["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n cursor: pointer;\n margin-top: 6px;\n"])), Colors.PRIMARY.Hex, FontSizes.DEFAULT, FontStyles.DEFAULT);
|
|
2154
2167
|
var Alert = function (_a) {
|
|
2155
|
-
var _b = _a.type, type = _b === void 0 ? 'info' : _b, title = _a.title, description = _a.description, accessibleProps = __rest(_a, ["type", "title", "description"]);
|
|
2168
|
+
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"]);
|
|
2156
2169
|
var type_mapping = {
|
|
2157
2170
|
info: {
|
|
2158
2171
|
color: Colors.PRIMARY.Hex,
|
|
@@ -2171,26 +2184,27 @@ var Alert = function (_a) {
|
|
|
2171
2184
|
icon: js.mdiCheckboxMarkedCircleOutline,
|
|
2172
2185
|
},
|
|
2173
2186
|
};
|
|
2174
|
-
return (React.createElement(Wrapper$
|
|
2187
|
+
return (React.createElement(Wrapper$c, __assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
|
|
2175
2188
|
React.createElement("div", { style: { flexShrink: 0 } },
|
|
2176
2189
|
React.createElement(Icon, { color: type_mapping[type].color, path: type_mapping[type].icon, size: '30px' })),
|
|
2177
2190
|
React.createElement(Content$1, null,
|
|
2178
2191
|
title ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
|
|
2179
|
-
description ? React.createElement(Copy, { margin: '
|
|
2192
|
+
description ? React.createElement(Copy, { margin: '6px 0 0 0 !important' }, description) : null,
|
|
2193
|
+
action ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
|
|
2180
2194
|
};
|
|
2181
|
-
var templateObject_1$
|
|
2195
|
+
var templateObject_1$h, templateObject_2$g, templateObject_3$d;
|
|
2182
2196
|
|
|
2183
|
-
var Wrapper$
|
|
2184
|
-
var Left = styled.div(templateObject_2$
|
|
2185
|
-
var Info = styled.div(templateObject_3$
|
|
2186
|
-
var Selected = styled.span(templateObject_4$
|
|
2187
|
-
var Clear = styled.span(templateObject_5$
|
|
2197
|
+
var Wrapper$b = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n"], ["\n border: 1px solid ", ";\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n"])), Colors.PRIMARY.Hex);
|
|
2198
|
+
var Left = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n"])));
|
|
2199
|
+
var Info = styled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n margin-right: 30px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n margin-right: 30px;\n"])));
|
|
2200
|
+
var Selected = styled.span(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n"], ["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n"])), FontStyles.DEFAULT, Colors.BLACK.Hex);
|
|
2201
|
+
var Clear = styled.span(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n cursor: pointer;\n padding-left: 10px;\n margin-left: 10px;\n border-left: 1px solid #ccc;\n"], ["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n cursor: pointer;\n padding-left: 10px;\n margin-left: 10px;\n border-left: 1px solid #ccc;\n"])), FontStyles.DEFAULT, Colors.PRIMARY.Hex);
|
|
2188
2202
|
var Actions = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n column-gap: 10px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n column-gap: 10px;\n"])));
|
|
2189
2203
|
var Error$1 = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: rgba(", ", 0.1);\n border-radius: 4px;\n padding: 6px 8px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-left: 30px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: rgba(", ", 0.1);\n border-radius: 4px;\n padding: 6px 8px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-left: 30px;\n"])), Colors.RED.Rgb);
|
|
2190
2204
|
var ErrorMsg = styled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"], ["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"])), FontStyles.DEFAULT, Colors.RED.Hex);
|
|
2191
2205
|
var BulkActionBar = function (_a) {
|
|
2192
2206
|
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"]);
|
|
2193
|
-
return (React.createElement(Wrapper$
|
|
2207
|
+
return (React.createElement(Wrapper$b, __assign({}, accessibleProps),
|
|
2194
2208
|
React.createElement(Left, null,
|
|
2195
2209
|
React.createElement(Info, null,
|
|
2196
2210
|
React.createElement(Selected, null,
|
|
@@ -2202,19 +2216,21 @@ var BulkActionBar = function (_a) {
|
|
|
2202
2216
|
React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
|
|
2203
2217
|
React.createElement(ErrorMsg, null, errorMsg))) : null));
|
|
2204
2218
|
};
|
|
2205
|
-
var templateObject_1$
|
|
2219
|
+
var templateObject_1$g, templateObject_2$f, templateObject_3$c, templateObject_4$7, templateObject_5$5, templateObject_6$3, templateObject_7$2, templateObject_8;
|
|
2206
2220
|
|
|
2221
|
+
var Wrapper$a = styled.label(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: center;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n"], ["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: center;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n"])), function (props) { return (props.$disabled ? 'default' : 'pointer'); }, FontSizes.DEFAULT);
|
|
2222
|
+
var Input$2 = styled.input(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n font-size: 20px;\n margin: 0px 0px 2px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n"], ["\n font-size: 20px;\n margin: 0px 0px 2px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n"])));
|
|
2223
|
+
var Label$3 = styled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 1.6em;\n color: ", ";\n margin-left: 6px;\n box-sizing: border-box;\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 1.6em;\n color: ", ";\n margin-left: 6px;\n box-sizing: border-box;\n"])), FontStyles.DEFAULT, FontSizes.DEFAULT, Colors.BLACK.Hex);
|
|
2207
2224
|
var Checkbox = function (_a) {
|
|
2208
2225
|
var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
return (React.createElement(Wrapper, __assign({}, accessibleProps, { onClick: disabled ? undefined : onChange }),
|
|
2213
|
-
React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, type: 'checkbox' }),
|
|
2214
|
-
children ? React.createElement(Label, null, children) : null));
|
|
2226
|
+
return (React.createElement(Wrapper$a, __assign({}, accessibleProps),
|
|
2227
|
+
React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
|
|
2228
|
+
children ? React.createElement(Label$3, null, children) : null));
|
|
2215
2229
|
};
|
|
2216
|
-
var templateObject_1$
|
|
2230
|
+
var templateObject_1$f, templateObject_2$e, templateObject_3$b;
|
|
2217
2231
|
|
|
2232
|
+
var SelectAll = styled.div(templateObject_1$e || (templateObject_1$e = __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);
|
|
2233
|
+
var Options$1 = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n padding: 12px;\n box-sizing: border-box;\n"], ["\n padding: 12px;\n box-sizing: border-box;\n"])));
|
|
2218
2234
|
var Checklist = function (_a) {
|
|
2219
2235
|
var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, selected = _a.selected, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
|
|
2220
2236
|
var values = options.map(function (option) { return option.value; });
|
|
@@ -2233,30 +2249,28 @@ var Checklist = function (_a) {
|
|
|
2233
2249
|
}
|
|
2234
2250
|
onChange(updated_selected);
|
|
2235
2251
|
};
|
|
2236
|
-
var SelectAll = styled.div(templateObject_1$c || (templateObject_1$c = __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);
|
|
2237
|
-
var Options = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n padding: 12px;\n box-sizing: border-box;\n "], ["\n padding: 12px;\n box-sizing: border-box;\n "])));
|
|
2238
2252
|
return (React.createElement(React.Fragment, null,
|
|
2239
2253
|
showSelectAll && values.length ? (React.createElement(SelectAll, null,
|
|
2240
2254
|
React.createElement(Checkbox, { checked: selected.length === values.length, disabled: disabled, onChange: handleToggleAll }, "Select All"))) : null,
|
|
2241
|
-
React.createElement(Options, null, options.map(function (option) {
|
|
2255
|
+
React.createElement(Options$1, null, options.map(function (option, i) {
|
|
2242
2256
|
var label = "".concat(option.label || option.value);
|
|
2243
2257
|
var checked = selected.includes(option.value);
|
|
2244
|
-
return (React.createElement(Checkbox, __assign({}, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
|
|
2258
|
+
return (React.createElement(Checkbox, __assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
|
|
2245
2259
|
}))));
|
|
2246
2260
|
};
|
|
2247
|
-
var templateObject_1$
|
|
2261
|
+
var templateObject_1$e, templateObject_2$d;
|
|
2248
2262
|
|
|
2249
|
-
var Scrim$1 = styled.div(templateObject_1$
|
|
2263
|
+
var Scrim$1 = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9998;\n background: ", ";\n"], ["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9998;\n background: ", ";\n"])), function (_a) {
|
|
2250
2264
|
var $scrim = _a.$scrim;
|
|
2251
2265
|
return ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent');
|
|
2252
2266
|
});
|
|
2253
|
-
var Container$
|
|
2267
|
+
var Container$2 = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n z-index: 9999;\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: fixed;\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: 9999;\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: fixed;\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) {
|
|
2254
2268
|
var $width = _a.$width;
|
|
2255
2269
|
return $width || '400px';
|
|
2256
2270
|
});
|
|
2257
|
-
var Header$2 = styled.div(templateObject_3$
|
|
2258
|
-
var Close$1 = styled.div(templateObject_4$
|
|
2259
|
-
var ContentWrapper$1 = styled.div(templateObject_5$
|
|
2271
|
+
var Header$2 = styled.div(templateObject_3$a || (templateObject_3$a = __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"])));
|
|
2272
|
+
var Close$1 = styled.div(templateObject_4$6 || (templateObject_4$6 = __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"])));
|
|
2273
|
+
var ContentWrapper$1 = styled.div(templateObject_5$4 || (templateObject_5$4 = __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"])));
|
|
2260
2274
|
var ButtonBar$1 = styled.div(templateObject_6$2 || (templateObject_6$2 = __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"])));
|
|
2261
2275
|
var Drawer = function (_a) {
|
|
2262
2276
|
var children = _a.children, description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, scrim = _a.scrim, width = _a.width, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "secondaryButton", "tertiaryButton", "scrim", "width"]);
|
|
@@ -2271,32 +2285,32 @@ var Drawer = function (_a) {
|
|
|
2271
2285
|
};
|
|
2272
2286
|
}, []);
|
|
2273
2287
|
return (React.createElement(React.Fragment, null,
|
|
2274
|
-
React.createElement(Container$
|
|
2288
|
+
React.createElement(Container$2, __assign({}, accessibleProps, { "$width": width }),
|
|
2275
2289
|
React.createElement(Header$2, null,
|
|
2276
2290
|
React.createElement("div", null,
|
|
2277
2291
|
title ? React.createElement(Heading, { type: 'secondary' }, title) : null,
|
|
2278
2292
|
description ? React.createElement(Copy, { color: 'GRAY' }, description) : null),
|
|
2279
2293
|
React.createElement(Close$1, { onClick: onClose },
|
|
2280
|
-
React.createElement(Button, { icon: js.mdiClose, small: true
|
|
2294
|
+
React.createElement(Button, { format: 'secondary', icon: js.mdiClose, small: true }))),
|
|
2281
2295
|
React.createElement(ContentWrapper$1, null, children),
|
|
2282
2296
|
primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar$1, null,
|
|
2283
|
-
tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, {
|
|
2284
|
-
secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, {
|
|
2285
|
-
primaryButton ? React.createElement(Button, __assign({}, primaryButton, {
|
|
2297
|
+
tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { format: 'secondary' })) : null,
|
|
2298
|
+
secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
2299
|
+
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary' })) : null)) : null),
|
|
2286
2300
|
scrim ? React.createElement(Scrim$1, { "$scrim": scrim, onClick: onClose }) : null));
|
|
2287
2301
|
};
|
|
2288
|
-
var templateObject_1$
|
|
2302
|
+
var templateObject_1$d, templateObject_2$c, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$2;
|
|
2289
2303
|
|
|
2290
|
-
var Wrapper$
|
|
2291
|
-
var LabelRow = styled.div(templateObject_2$
|
|
2292
|
-
var Label$2 = styled.label(templateObject_3$
|
|
2293
|
-
var Required = styled.span(templateObject_4$
|
|
2294
|
-
var Action = styled.span(templateObject_5$
|
|
2304
|
+
var Wrapper$9 = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (props) { return props.$margin || '0px 0px 15px 0px'; });
|
|
2305
|
+
var LabelRow = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 0 4px 0;\n box-sizing: border-box;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 0 4px 0;\n box-sizing: border-box;\n"])));
|
|
2306
|
+
var Label$2 = styled.label(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, Colors.BLACK.Hex);
|
|
2307
|
+
var Required = styled.span(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n color: ", ";\n margin-left: 4px;\n"], ["\n color: ", ";\n margin-left: 4px;\n"])), Colors.RED.Hex);
|
|
2308
|
+
var Action = styled.span(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n cursor: pointer;\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, Colors.PRIMARY.Hex);
|
|
2295
2309
|
var Description = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 0 0 8px 0;\n box-sizing: border-box;\n"], ["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 0 0 8px 0;\n box-sizing: border-box;\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.BLACK.Hex);
|
|
2296
2310
|
var Validation = styled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 4px 0 0 0;\n box-sizing: border-box;\n"], ["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 4px 0 0 0;\n box-sizing: border-box;\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.RED.Hex);
|
|
2297
2311
|
var Field = function (_a) {
|
|
2298
2312
|
var action = _a.action, children = _a.children, validationText = _a.validationText, label = _a.label, margin = _a.margin, description = _a.description, required = _a.required, htmlFor = _a.htmlFor, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "margin", "description", "required", "htmlFor"]);
|
|
2299
|
-
return (React.createElement(Wrapper$
|
|
2313
|
+
return (React.createElement(Wrapper$9, __assign({ "$margin": margin }, accessibleProps),
|
|
2300
2314
|
React.createElement(LabelRow, null,
|
|
2301
2315
|
React.createElement(Label$2, { htmlFor: htmlFor },
|
|
2302
2316
|
label,
|
|
@@ -2306,7 +2320,7 @@ var Field = function (_a) {
|
|
|
2306
2320
|
children,
|
|
2307
2321
|
validationText ? React.createElement(Validation, null, validationText) : null));
|
|
2308
2322
|
};
|
|
2309
|
-
var templateObject_1$
|
|
2323
|
+
var templateObject_1$c, templateObject_2$b, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1;
|
|
2310
2324
|
|
|
2311
2325
|
var formatAsPhone = function (number) {
|
|
2312
2326
|
var formatted_value = "".concat(number).replace(/[^0-9.]/g, '');
|
|
@@ -2335,10 +2349,12 @@ var formatAsSsn = function (number) {
|
|
|
2335
2349
|
return formatted_value;
|
|
2336
2350
|
};
|
|
2337
2351
|
|
|
2338
|
-
var StyledInput = styled.input(templateObject_1$
|
|
2339
|
-
var
|
|
2352
|
+
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); });
|
|
2353
|
+
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);
|
|
2354
|
+
var StyledWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
2355
|
+
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); });
|
|
2340
2356
|
var Input$1 = function (_a) {
|
|
2341
|
-
var format = _a.format, 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", "height", "invalid", "max", "maxLength", "min", "onBlur", "onChange", "onKeyDown", "placeholder", "readOnly", "step", "type", "value"]);
|
|
2357
|
+
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"]);
|
|
2342
2358
|
var handleInputChange = function (e) {
|
|
2343
2359
|
if (format === 'currency' || format === 'currency_decimal') {
|
|
2344
2360
|
e.target.value = e.target.value.replace(/[^0-9.]/g, '');
|
|
@@ -2377,15 +2393,17 @@ var Input$1 = function (_a) {
|
|
|
2377
2393
|
if (format === 'ssn' && type !== 'password') {
|
|
2378
2394
|
formatted_value = formatAsSsn(value);
|
|
2379
2395
|
}
|
|
2380
|
-
return type === 'textarea' ? (React.createElement(StyledTextarea, __assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, maxLength: maxLength, onBlur: onBlur, onChange: handleTextareaChange, placeholder: placeholder, value: value }, accessibleProps))) : (React.createElement(
|
|
2396
|
+
return type === 'textarea' ? (React.createElement(StyledTextarea, __assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, maxLength: maxLength, onBlur: onBlur, onChange: handleTextareaChange, placeholder: placeholder, value: value }, accessibleProps))) : (React.createElement(StyledWrapper, null,
|
|
2397
|
+
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)),
|
|
2398
|
+
suffix && React.createElement(StyledSuffix, null, suffix)));
|
|
2381
2399
|
};
|
|
2382
|
-
var templateObject_1$
|
|
2400
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$8, templateObject_4$4;
|
|
2383
2401
|
|
|
2384
|
-
var Wrapper$
|
|
2385
|
-
var Container = styled.dialog(templateObject_2$
|
|
2386
|
-
var Header$1 = styled.div(templateObject_3$
|
|
2402
|
+
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"])));
|
|
2403
|
+
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'; });
|
|
2404
|
+
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"])));
|
|
2387
2405
|
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"])));
|
|
2388
|
-
var CloseMsg = styled.span(templateObject_5$
|
|
2406
|
+
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);
|
|
2389
2407
|
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"])));
|
|
2390
2408
|
var ButtonBar = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: sticky;\n bottom: 0;\n background: #ffffff;\n padding: 20px;\n border-top: 1px solid #e5e5e5;\n display: flex;\n align-items: center;\n justify-self: flex-end;\n box-sizing: border-box;\n"], ["\n position: sticky;\n bottom: 0;\n background: #ffffff;\n padding: 20px;\n border-top: 1px solid #e5e5e5;\n display: flex;\n align-items: center;\n justify-self: flex-end;\n box-sizing: border-box;\n"])));
|
|
2391
2409
|
var Modal = function (_a) {
|
|
@@ -2400,8 +2418,8 @@ var Modal = function (_a) {
|
|
|
2400
2418
|
document.onkeydown = null;
|
|
2401
2419
|
};
|
|
2402
2420
|
}, []);
|
|
2403
|
-
return (React.createElement(Wrapper$
|
|
2404
|
-
React.createElement(Container, __assign({ "$maxWidth": maxWidth, open: true }, accessibleProps),
|
|
2421
|
+
return (React.createElement(Wrapper$8, null,
|
|
2422
|
+
React.createElement(Container$1, __assign({ "$maxWidth": maxWidth, open: true }, accessibleProps),
|
|
2405
2423
|
React.createElement(Header$1, null,
|
|
2406
2424
|
title ? React.createElement(Heading, { type: 'secondary' }, title) : null,
|
|
2407
2425
|
React.createElement(Close, { onClick: onClose },
|
|
@@ -2409,19 +2427,33 @@ var Modal = function (_a) {
|
|
|
2409
2427
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: js.mdiClose, size: '24px' }))),
|
|
2410
2428
|
React.createElement(ContentWrapper, null, children),
|
|
2411
2429
|
primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar, null,
|
|
2412
|
-
tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, {
|
|
2430
|
+
tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { format: 'secondary' })) : null,
|
|
2413
2431
|
primaryButton || secondaryButton ? (React.createElement("div", { style: {
|
|
2414
2432
|
marginLeft: 'auto',
|
|
2415
2433
|
paddingLeft: 40,
|
|
2416
2434
|
display: 'flex',
|
|
2417
2435
|
alignItems: 'center',
|
|
2418
2436
|
} },
|
|
2419
|
-
secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, {
|
|
2420
|
-
primaryButton ? (React.createElement(Button, __assign({}, primaryButton, { margin: '0px 0px 0px 10px'
|
|
2437
|
+
secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
2438
|
+
primaryButton ? (React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
|
|
2439
|
+
};
|
|
2440
|
+
var templateObject_1$a, templateObject_2$9, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6, templateObject_7;
|
|
2441
|
+
|
|
2442
|
+
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'; });
|
|
2443
|
+
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"])));
|
|
2444
|
+
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"])));
|
|
2445
|
+
var MoreMenu = function (_a) {
|
|
2446
|
+
var maxHeight = _a.maxHeight, _b = _a.menuItems, menuItems = _b === void 0 ? [] : _b, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
|
|
2447
|
+
return (React.createElement(Wrapper$7, __assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map(function (item) {
|
|
2448
|
+
return (React.createElement(MenuItem, __assign({ onClick: item.onClick }, accessibleProps),
|
|
2449
|
+
item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
|
|
2450
|
+
React.createElement(Title, null, item.label)));
|
|
2451
|
+
})));
|
|
2421
2452
|
};
|
|
2422
|
-
var templateObject_1$
|
|
2453
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$6;
|
|
2423
2454
|
|
|
2424
|
-
var
|
|
2455
|
+
var Wrapper$6 = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
2456
|
+
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) {
|
|
2425
2457
|
if (props.$invalid) {
|
|
2426
2458
|
return Colors.RED.Hex;
|
|
2427
2459
|
}
|
|
@@ -2432,14 +2464,14 @@ var Trigger$1 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTem
|
|
|
2432
2464
|
return '#cccccc';
|
|
2433
2465
|
}
|
|
2434
2466
|
}, function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); });
|
|
2435
|
-
var Value = styled.div(
|
|
2436
|
-
var Options = styled.div(
|
|
2437
|
-
var Scrim = styled.div(
|
|
2467
|
+
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);
|
|
2468
|
+
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);
|
|
2469
|
+
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"])));
|
|
2438
2470
|
var MultiSelect = function (_a) {
|
|
2439
2471
|
var readOnly = _a.readOnly, _b = _a.displayCount, displayCount = _b === void 0 ? 3 : _b, invalid = _a.invalid, onChange = _a.onChange, _c = _a.options, options = _c === void 0 ? [] : _c, selected = _a.selected, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll"]);
|
|
2440
2472
|
var _d = React.useState(false), showOptions = _d[0], setShowOptions = _d[1];
|
|
2441
2473
|
var selected_options = options.filter(function (o) { return selected.includes(o.value); });
|
|
2442
|
-
return (React.createElement(
|
|
2474
|
+
return (React.createElement(Wrapper$6, null,
|
|
2443
2475
|
React.createElement(Trigger$1, __assign({ "$invalid": invalid, "$readOnly": readOnly, "$showOptions": showOptions, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
|
|
2444
2476
|
React.createElement(Value, null, selected.length > 0 && selected.length <= displayCount
|
|
2445
2477
|
? selected_options.map(function (o) { return o.label || o.value; }).join(', ')
|
|
@@ -2449,14 +2481,20 @@ var MultiSelect = function (_a) {
|
|
|
2449
2481
|
React.createElement(Checklist, { disabled: readOnly, onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
|
|
2450
2482
|
showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
|
|
2451
2483
|
};
|
|
2452
|
-
var templateObject_1$
|
|
2453
|
-
|
|
2454
|
-
var Wrapper$
|
|
2455
|
-
var
|
|
2456
|
-
|
|
2484
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$5, templateObject_4$2, templateObject_5$1;
|
|
2485
|
+
|
|
2486
|
+
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) {
|
|
2487
|
+
var $style = _a.$style;
|
|
2488
|
+
return ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px';
|
|
2489
|
+
}, function (_a) {
|
|
2490
|
+
var $style = _a.$style;
|
|
2491
|
+
return ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0;
|
|
2492
|
+
});
|
|
2493
|
+
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);
|
|
2494
|
+
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"])));
|
|
2457
2495
|
var Select = function (_a) {
|
|
2458
|
-
var options = _a.options, optionGroups = _a.optionGroups, placeholder = _a.placeholder, readOnly = _a.readOnly, invalid = _a.invalid, value = _a.value, onChange = _a.onChange, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "value", "onChange"]);
|
|
2459
|
-
return (React.createElement(Wrapper$
|
|
2496
|
+
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"]);
|
|
2497
|
+
return (React.createElement(Wrapper$5, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
|
|
2460
2498
|
React.createElement(Trigger, __assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
|
|
2461
2499
|
placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
|
|
2462
2500
|
optionGroups &&
|
|
@@ -2472,9 +2510,9 @@ var Select = function (_a) {
|
|
|
2472
2510
|
React.createElement(IconWrapper$1, null,
|
|
2473
2511
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' }))));
|
|
2474
2512
|
};
|
|
2475
|
-
var templateObject_1$
|
|
2513
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$4;
|
|
2476
2514
|
|
|
2477
|
-
var Wrapper$
|
|
2515
|
+
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"])));
|
|
2478
2516
|
var Pagination = function (_a) {
|
|
2479
2517
|
var _b = _a.currentPage, currentPage = _b === void 0 ? 1 : _b, onClick = _a.onClick, _c = _a.pageCount, pageCount = _c === void 0 ? 0 : _c, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
|
|
2480
2518
|
var is_first_page = currentPage === 1;
|
|
@@ -2495,7 +2533,7 @@ var Pagination = function (_a) {
|
|
|
2495
2533
|
onClick(new_page);
|
|
2496
2534
|
}
|
|
2497
2535
|
};
|
|
2498
|
-
return (React.createElement(Wrapper$
|
|
2536
|
+
return (React.createElement(Wrapper$4, __assign({}, accessibleProps),
|
|
2499
2537
|
React.createElement(Button, { disabled: is_first_page, icon: js.mdiChevronLeft, onClick: handlePrevClick, small: true }),
|
|
2500
2538
|
React.createElement(Select, { onChange: handlePageChange, options: Array.from(Array(pageCount).keys(), function (p) { return p + 1; }).map(function (p) { return ({
|
|
2501
2539
|
label: "Page ".concat(p),
|
|
@@ -2503,18 +2541,18 @@ var Pagination = function (_a) {
|
|
|
2503
2541
|
}); }), value: "".concat(currentPage) }),
|
|
2504
2542
|
React.createElement(Button, { disabled: is_last_page, icon: js.mdiChevronRight, onClick: handleNextClick, small: true })));
|
|
2505
2543
|
};
|
|
2506
|
-
var templateObject_1$
|
|
2544
|
+
var templateObject_1$6;
|
|
2507
2545
|
|
|
2508
|
-
var Wrapper$
|
|
2509
|
-
var Input = styled.input(templateObject_2$
|
|
2510
|
-
var Label$1 = styled.span(templateObject_3$
|
|
2546
|
+
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);
|
|
2547
|
+
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"])));
|
|
2548
|
+
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);
|
|
2511
2549
|
var Radio = function (_a) {
|
|
2512
2550
|
var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, value = _a.value, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value"]);
|
|
2513
|
-
return (React.createElement(Wrapper$
|
|
2551
|
+
return (React.createElement(Wrapper$3, __assign({ "$disabled": disabled }, accessibleProps),
|
|
2514
2552
|
React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'radio', value: value }),
|
|
2515
2553
|
React.createElement(Label$1, null, children)));
|
|
2516
2554
|
};
|
|
2517
|
-
var templateObject_1$
|
|
2555
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$3;
|
|
2518
2556
|
|
|
2519
2557
|
var RadioList = function (_a) {
|
|
2520
2558
|
var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, value = _a.value, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
|
|
@@ -2524,9 +2562,9 @@ var RadioList = function (_a) {
|
|
|
2524
2562
|
})));
|
|
2525
2563
|
};
|
|
2526
2564
|
|
|
2527
|
-
var StyledTable = styled.table(templateObject_1$
|
|
2528
|
-
var Header = styled.th(templateObject_2$
|
|
2529
|
-
var Row = styled.tr(templateObject_3$
|
|
2565
|
+
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'; });
|
|
2566
|
+
var Header = styled.th(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n padding: 12px;\n text-align: left;\n font-weight: 500;\n border-bottom: 1px solid #e5e5e5;\n border-top: 1px solid #e5e5e5;\n text-transform: uppercase;\n font-size: 12px;\n font-family: ", ";\n letter-spacing: 1px;\n white-space: nowrap;\n line-height: 1em;\n position: relative;\n box-sizing: border-box;\n width: ", ";\n cursor: ", ";\n color: ", ";\n"], ["\n padding: 12px;\n text-align: left;\n font-weight: 500;\n border-bottom: 1px solid #e5e5e5;\n border-top: 1px solid #e5e5e5;\n text-transform: uppercase;\n font-size: 12px;\n font-family: ", ";\n letter-spacing: 1px;\n white-space: nowrap;\n line-height: 1em;\n position: relative;\n box-sizing: border-box;\n width: ", ";\n cursor: ", ";\n color: ", ";\n"])), FontStyles.DEFAULT, function (props) { return props.$width || 'auto'; }, function (props) { return (props.$isSortable ? 'pointer' : 'default'); }, function (props) { return (props.$isSortable ? Colors.PRIMARY.Hex : Colors.BLACK.Hex); });
|
|
2567
|
+
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) {
|
|
2530
2568
|
return props.$isClickable ? "rgba(".concat(Colors.PRIMARY.Rgb, ", 0.1)") : props.$bgColor;
|
|
2531
2569
|
});
|
|
2532
2570
|
var Column = styled.td(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n padding: 16px 12px;\n vertical-align: middle;\n word-break: break-word;\n line-height: 1.4em;\n box-sizing: border-box;\n width: ", ";\n"], ["\n padding: 16px 12px;\n vertical-align: middle;\n word-break: break-word;\n line-height: 1.4em;\n box-sizing: border-box;\n width: ", ";\n"])), function (props) { return props.$width || 'auto'; });
|
|
@@ -2547,36 +2585,36 @@ var Table = function (_a) {
|
|
|
2547
2585
|
})));
|
|
2548
2586
|
}))) : null));
|
|
2549
2587
|
};
|
|
2550
|
-
var templateObject_1$
|
|
2588
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$2, templateObject_4$1, templateObject_5;
|
|
2551
2589
|
|
|
2552
|
-
var Wrapper$
|
|
2553
|
-
var Tab = styled.div(templateObject_2$
|
|
2590
|
+
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"])));
|
|
2591
|
+
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); });
|
|
2554
2592
|
var Tabs = function (_a) {
|
|
2555
2593
|
var tabs = _a.tabs, accessibleProps = __rest(_a, ["tabs"]);
|
|
2556
|
-
return (React.createElement(Wrapper$
|
|
2594
|
+
return (React.createElement(Wrapper$2, __assign({}, accessibleProps), tabs.map(function (_a) {
|
|
2557
2595
|
var isActive = _a.isActive, label = _a.label, accessibleProps = __rest(_a, ["isActive", "label"]);
|
|
2558
2596
|
return (React.createElement(Tab, __assign({ "$isActive": isActive || false }, accessibleProps), label));
|
|
2559
2597
|
})));
|
|
2560
2598
|
};
|
|
2561
2599
|
Tabs.defaultProps = {};
|
|
2562
|
-
var templateObject_1$
|
|
2600
|
+
var templateObject_1$3, templateObject_2$3;
|
|
2563
2601
|
|
|
2564
|
-
var Wrapper = styled.div(templateObject_1$
|
|
2565
|
-
var Content = styled.div(templateObject_2$
|
|
2566
|
-
var Label = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: #ffffff;\n font-size: ", ";\n font-weight: 500;\n font-family: ", ";\n line-height: 1.2em;\n"], ["\n color: #ffffff;\n font-size: ", ";\n font-weight: 500;\n font-family: ", ";\n line-height: 1.2em;\n"])), FontSizes.SMALL, FontStyles.DEFAULT);
|
|
2602
|
+
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'); });
|
|
2603
|
+
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"])));
|
|
2604
|
+
var Label = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n color: #ffffff;\n font-size: ", ";\n font-weight: 500;\n font-family: ", ";\n line-height: 1.2em;\n"], ["\n color: #ffffff;\n font-size: ", ";\n font-weight: 500;\n font-family: ", ";\n line-height: 1.2em;\n"])), FontSizes.SMALL, FontStyles.DEFAULT);
|
|
2567
2605
|
var Remove = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-left: 10px;\n display: flex;\n align-items: center;\n"], ["\n margin-left: 10px;\n display: flex;\n align-items: center;\n"])));
|
|
2568
2606
|
var Tag = function (_a) {
|
|
2569
2607
|
var children = _a.children, _b = _a.color, color = _b === void 0 ? 'PRIMARY' : _b, removable = _a.removable, onClick = _a.onClick, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
|
|
2570
|
-
return (React.createElement(Wrapper, __assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
|
|
2608
|
+
return (React.createElement(Wrapper$1, __assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
|
|
2571
2609
|
React.createElement(Content, null,
|
|
2572
2610
|
React.createElement(Label, null, children),
|
|
2573
2611
|
removable ? (React.createElement(Remove, null,
|
|
2574
2612
|
React.createElement(Icon, { color: '#ffffff', path: js.mdiClose, size: '15px' }))) : null)));
|
|
2575
2613
|
};
|
|
2576
|
-
var templateObject_1$
|
|
2614
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$1, templateObject_4;
|
|
2577
2615
|
|
|
2578
|
-
var Track = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 24px;\n border-radius: 12px;\n background: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n width: 40px;\n padding: 2px;\n box-sizing: border-box;\n"], ["\n height: 24px;\n border-radius: 12px;\n background: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n width: 40px;\n padding: 2px;\n box-sizing: border-box;\n"])), function (props) { return (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex); });
|
|
2579
|
-
var Handle = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n width: 20px;\n height: 20px;\n border-radius: 10px;\n background: #ffffff;\n margin-left: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"], ["\n width: 20px;\n height: 20px;\n border-radius: 10px;\n background: #ffffff;\n margin-left: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"])), function (props) { return (props.$on ? 'auto' : '0px'); });
|
|
2616
|
+
var Track = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n height: 24px;\n border-radius: 12px;\n background: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n width: 40px;\n padding: 2px;\n box-sizing: border-box;\n"], ["\n height: 24px;\n border-radius: 12px;\n background: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n width: 40px;\n padding: 2px;\n box-sizing: border-box;\n"])), function (props) { return (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex); });
|
|
2617
|
+
var Handle = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n width: 20px;\n height: 20px;\n border-radius: 10px;\n background: #ffffff;\n margin-left: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"], ["\n width: 20px;\n height: 20px;\n border-radius: 10px;\n background: #ffffff;\n margin-left: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"])), function (props) { return (props.$on ? 'auto' : '0px'); });
|
|
2580
2618
|
var Toggle = function (_a) {
|
|
2581
2619
|
var onClick = _a.onClick, on = _a.on, accessibleProps = __rest(_a, ["onClick", "on"]);
|
|
2582
2620
|
return (React.createElement(Track, __assign({ "$on": on, onClick: onClick }, accessibleProps),
|
|
@@ -2585,7 +2623,22 @@ var Toggle = function (_a) {
|
|
|
2585
2623
|
React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
|
|
2586
2624
|
};
|
|
2587
2625
|
Toggle.defaultProps = {};
|
|
2588
|
-
var templateObject_1, templateObject_2;
|
|
2626
|
+
var templateObject_1$1, templateObject_2$1;
|
|
2627
|
+
|
|
2628
|
+
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n padding: 40px auto;\n gap: 20px;\n display: flex;\n flex-direction: column;\n justify-items: center;\n align-items: center;\n"], ["\n width: 100%;\n padding: 40px auto;\n gap: 20px;\n display: flex;\n flex-direction: column;\n justify-items: center;\n align-items: center;\n"])));
|
|
2629
|
+
var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n gap: 10px;\n display: flex;\n flex-direction: column;\n justify-items: center;\n align-items: center;\n"], ["\n gap: 10px;\n display: flex;\n flex-direction: column;\n justify-items: center;\n align-items: center;\n"])));
|
|
2630
|
+
var StyledIcon = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 80px;\n height: 80px;\n border-radius: 40px;\n background: #f5f5f5;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 80px;\n height: 80px;\n border-radius: 40px;\n background: #f5f5f5;\n"])));
|
|
2631
|
+
var ZeroState = function (_a) {
|
|
2632
|
+
var icon = _a.icon, title = _a.title, description = _a.description, action = _a.action, accessibleProps = __rest(_a, ["icon", "title", "description", "action"]);
|
|
2633
|
+
return (React.createElement(Container, __assign({}, accessibleProps),
|
|
2634
|
+
React.createElement(StyledIcon, null,
|
|
2635
|
+
React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: icon, size: '40px' })),
|
|
2636
|
+
React.createElement(Wrapper, null,
|
|
2637
|
+
React.createElement(Heading, { children: title, type: 'tertiary' }),
|
|
2638
|
+
description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
|
|
2639
|
+
action && (React.createElement(Button, { children: action === null || action === void 0 ? void 0 : action.children, icon: action === null || action === void 0 ? void 0 : action.icon, onClick: action === null || action === void 0 ? void 0 : action.onClick }))));
|
|
2640
|
+
};
|
|
2641
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
2589
2642
|
|
|
2590
2643
|
exports.Accordion = Accordion;
|
|
2591
2644
|
exports.ActionDialog = ActionDialog;
|
|
@@ -2600,6 +2653,7 @@ exports.Field = Field;
|
|
|
2600
2653
|
exports.Heading = Heading;
|
|
2601
2654
|
exports.Input = Input$1;
|
|
2602
2655
|
exports.Modal = Modal;
|
|
2656
|
+
exports.MoreMenu = MoreMenu;
|
|
2603
2657
|
exports.MultiSelect = MultiSelect;
|
|
2604
2658
|
exports.Pagination = Pagination;
|
|
2605
2659
|
exports.Radio = Radio;
|
|
@@ -2609,4 +2663,5 @@ exports.Table = Table;
|
|
|
2609
2663
|
exports.Tabs = Tabs;
|
|
2610
2664
|
exports.Tag = Tag;
|
|
2611
2665
|
exports.Toggle = Toggle;
|
|
2666
|
+
exports.ZeroState = ZeroState;
|
|
2612
2667
|
//# sourceMappingURL=index.js.map
|