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