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