@hexure/ui 1.4.2 → 1.5.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/dist/cjs/index.js +46 -38
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/Link/Link.d.ts +12 -0
- package/dist/cjs/types/components/Link/index.d.ts +1 -0
- package/dist/cjs/types/index.d.ts +1 -0
- package/dist/cjs/types/utils/Accessibility.d.ts +2 -2
- package/dist/esm/index.js +46 -39
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/Link/Link.d.ts +12 -0
- package/dist/esm/types/components/Link/index.d.ts +1 -0
- package/dist/esm/types/index.d.ts +1 -0
- package/dist/esm/types/utils/Accessibility.d.ts +2 -2
- package/dist/index.d.ts +13 -3
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -2036,7 +2036,7 @@ var FontSizes = {
|
|
|
2036
2036
|
SMALL: '13px',
|
|
2037
2037
|
};
|
|
2038
2038
|
|
|
2039
|
-
var Header$3 = styled.div(templateObject_1$
|
|
2039
|
+
var Header$3 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n background: #f5f5f5;\n border: 1px solid #e5e5e5;\n padding: 14px 20px;\n height: 50px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n background: #f5f5f5;\n border: 1px solid #e5e5e5;\n padding: 14px 20px;\n height: 50px;\n cursor: pointer;\n"])));
|
|
2040
2040
|
var Title$1 = styled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n font-family: ", ";\n box-sizing: border-box;\n"], ["\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n font-family: ", ";\n box-sizing: border-box;\n"])), FontSizes.DEFAULT, Colors.BLACK.Hex, FontStyles.DEFAULT);
|
|
2041
2041
|
var Accordion = function (_a) {
|
|
2042
2042
|
var title = _a.title, children = _a.children, open = _a.open, onClick = _a.onClick, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
|
|
@@ -2046,7 +2046,7 @@ var Accordion = function (_a) {
|
|
|
2046
2046
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
|
|
2047
2047
|
open ? children : null));
|
|
2048
2048
|
};
|
|
2049
|
-
var templateObject_1$
|
|
2049
|
+
var templateObject_1$p, templateObject_2$m;
|
|
2050
2050
|
|
|
2051
2051
|
var button_type_mapping = {
|
|
2052
2052
|
primary: {
|
|
@@ -2071,7 +2071,7 @@ var button_type_mapping = {
|
|
|
2071
2071
|
badge_content_color: Colors.RED.Hex,
|
|
2072
2072
|
},
|
|
2073
2073
|
};
|
|
2074
|
-
var StyledButton = styled.button(templateObject_1$
|
|
2074
|
+
var StyledButton = styled.button(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n height: ", ";\n line-height: 1em;\n border-radius: ", ";\n margin: ", ";\n padding: ", ";\n outline: none;\n background: ", ";\n width: ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n &:hover {\n opacity: ", ";\n }\n"], ["\n height: ", ";\n line-height: 1em;\n border-radius: ", ";\n margin: ", ";\n padding: ", ";\n outline: none;\n background: ", ";\n width: ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n &:hover {\n opacity: ", ";\n }\n"])), function (props) { return (props.$small ? '30px' : '40px'); }, function (props) { return (props.$small ? '15px' : '20px'); }, function (props) { return props.$margin || '0px'; }, function (props) {
|
|
2075
2075
|
if (props.$hasChildren) {
|
|
2076
2076
|
if (props.$small) {
|
|
2077
2077
|
return '0 10px';
|
|
@@ -2110,9 +2110,9 @@ var Button = function (_a) {
|
|
|
2110
2110
|
React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null,
|
|
2111
2111
|
badge && !icon ? (React.createElement(Badge$1, { "$format": format, "$small": small }, badge)) : null));
|
|
2112
2112
|
};
|
|
2113
|
-
var templateObject_1$
|
|
2113
|
+
var templateObject_1$o, templateObject_2$l, templateObject_3$i, templateObject_4$9;
|
|
2114
2114
|
|
|
2115
|
-
var StyledComponent = styled.p(templateObject_1$
|
|
2115
|
+
var StyledComponent = styled.p(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n font-style: ", ";\n text-decoration: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n text-align: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n font-style: ", ";\n text-decoration: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n text-align: ", ";\n box-sizing: border-box;\n"])), function (props) { return Colors[props.$color || 'BLACK'].Hex; }, function (props) { return (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT); }, function (props) { return (props.$type === 'small' ? '1.5em' : '1.6em'); }, function (props) { return (props.$type === 'small' ? '1px' : '0px'); }, function (props) { return (props.$type === 'bold' ? '500' : '400'); }, function (props) { return (props.$type === 'italic' ? 'italic' : 'normal'); }, function (props) {
|
|
2116
2116
|
return ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none';
|
|
2117
2117
|
}, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; }, function (props) { return props.$align || 'left'; });
|
|
2118
2118
|
var Copy = function (_a) {
|
|
@@ -2122,9 +2122,9 @@ var Copy = function (_a) {
|
|
|
2122
2122
|
Copy.defaultProps = {
|
|
2123
2123
|
type: 'default',
|
|
2124
2124
|
};
|
|
2125
|
-
var templateObject_1$
|
|
2125
|
+
var templateObject_1$n;
|
|
2126
2126
|
|
|
2127
|
-
var H1 = styled.h1(templateObject_1$
|
|
2127
|
+
var H1 = styled.h1(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n color: ", ";\n font-size: 30px;\n font-weight: ", ";\n line-height: 1.4em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: 30px;\n font-weight: ", ";\n line-height: 1.4em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
|
|
2128
2128
|
var H2 = styled.h2(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n color: ", ";\n font-size: 24px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: 24px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
|
|
2129
2129
|
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'; });
|
|
2130
2130
|
var Heading = function (_a) {
|
|
@@ -2145,9 +2145,9 @@ Heading.defaultProps = {
|
|
|
2145
2145
|
bold: false,
|
|
2146
2146
|
type: 'primary',
|
|
2147
2147
|
};
|
|
2148
|
-
var templateObject_1$
|
|
2148
|
+
var templateObject_1$m, templateObject_2$k, templateObject_3$h;
|
|
2149
2149
|
|
|
2150
|
-
var Wrapper$
|
|
2150
|
+
var Wrapper$f = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"], ["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"])));
|
|
2151
2151
|
var Container$3 = styled.dialog(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n max-width: 600px;\n width: auto;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: relative;\n padding: 40px;\n text-align: center;\n box-sizing: border-box;\n"], ["\n max-width: 600px;\n width: auto;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: relative;\n padding: 40px;\n text-align: center;\n box-sizing: border-box;\n"])));
|
|
2152
2152
|
var Buttons = styled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 30px;\n box-sizing: border-box;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 30px;\n box-sizing: border-box;\n"])));
|
|
2153
2153
|
var ActionDialog = function (_a) {
|
|
@@ -2162,7 +2162,7 @@ var ActionDialog = function (_a) {
|
|
|
2162
2162
|
document.onkeydown = null;
|
|
2163
2163
|
};
|
|
2164
2164
|
}, []);
|
|
2165
|
-
return (React.createElement(Wrapper$
|
|
2165
|
+
return (React.createElement(Wrapper$f, __assign({}, accessibleProps),
|
|
2166
2166
|
React.createElement(Container$3, { open: true },
|
|
2167
2167
|
title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
|
|
2168
2168
|
description ? React.createElement(Copy, { align: 'center' }, description) : null,
|
|
@@ -2170,9 +2170,9 @@ var ActionDialog = function (_a) {
|
|
|
2170
2170
|
secondaryButton ? (React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary', margin: '0px 5px' }))) : null,
|
|
2171
2171
|
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 5px' })) : null)) : null)));
|
|
2172
2172
|
};
|
|
2173
|
-
var templateObject_1$
|
|
2173
|
+
var templateObject_1$l, templateObject_2$j, templateObject_3$g;
|
|
2174
2174
|
|
|
2175
|
-
var Wrapper$
|
|
2175
|
+
var Wrapper$e = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n border: 1px solid #f1f1f1;\n border-radius: 4px;\n border-left-width: 4px;\n box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: flex-start;\n padding: 20px;\n box-sizing: border-box;\n"], ["\n border: 1px solid #f1f1f1;\n border-radius: 4px;\n border-left-width: 4px;\n box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: flex-start;\n padding: 20px;\n box-sizing: border-box;\n"])));
|
|
2176
2176
|
var Content$1 = styled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin-left: 20px;\n"], ["\n margin-left: 20px;\n"])));
|
|
2177
2177
|
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);
|
|
2178
2178
|
var Alert = function (_a) {
|
|
@@ -2195,7 +2195,7 @@ var Alert = function (_a) {
|
|
|
2195
2195
|
icon: js.mdiCheckboxMarkedCircleOutline,
|
|
2196
2196
|
},
|
|
2197
2197
|
};
|
|
2198
|
-
return (React.createElement(Wrapper$
|
|
2198
|
+
return (React.createElement(Wrapper$e, __assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
|
|
2199
2199
|
React.createElement("div", { style: { flexShrink: 0 } },
|
|
2200
2200
|
React.createElement(Icon, { color: type_mapping[type].color, path: type_mapping[type].icon, size: '30px' })),
|
|
2201
2201
|
React.createElement(Content$1, null,
|
|
@@ -2203,9 +2203,9 @@ var Alert = function (_a) {
|
|
|
2203
2203
|
description ? React.createElement(Copy, { margin: '6px 0 0 0 !important' }, description) : null,
|
|
2204
2204
|
action ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
|
|
2205
2205
|
};
|
|
2206
|
-
var templateObject_1$
|
|
2206
|
+
var templateObject_1$k, templateObject_2$i, templateObject_3$f;
|
|
2207
2207
|
|
|
2208
|
-
var Wrapper$
|
|
2208
|
+
var Wrapper$d = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n"], ["\n border: 1px solid ", ";\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n"])), Colors.PRIMARY.Hex);
|
|
2209
2209
|
var Left = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n"])));
|
|
2210
2210
|
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"])));
|
|
2211
2211
|
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);
|
|
@@ -2215,7 +2215,7 @@ var Error$1 = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTempl
|
|
|
2215
2215
|
var ErrorMsg = styled.span(templateObject_8$1 || (templateObject_8$1 = __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);
|
|
2216
2216
|
var BulkActionBar = function (_a) {
|
|
2217
2217
|
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"]);
|
|
2218
|
-
return (React.createElement(Wrapper$
|
|
2218
|
+
return (React.createElement(Wrapper$d, __assign({}, accessibleProps),
|
|
2219
2219
|
React.createElement(Left, null,
|
|
2220
2220
|
React.createElement(Info, null,
|
|
2221
2221
|
React.createElement(Selected, null,
|
|
@@ -2227,20 +2227,20 @@ var BulkActionBar = function (_a) {
|
|
|
2227
2227
|
React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
|
|
2228
2228
|
React.createElement(ErrorMsg, null, errorMsg))) : null));
|
|
2229
2229
|
};
|
|
2230
|
-
var templateObject_1$
|
|
2230
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$1;
|
|
2231
2231
|
|
|
2232
|
-
var Wrapper$
|
|
2232
|
+
var Wrapper$c = styled.label(templateObject_1$i || (templateObject_1$i = __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);
|
|
2233
2233
|
var Input$2 = styled.input(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
2234
2234
|
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);
|
|
2235
2235
|
var Checkbox = function (_a) {
|
|
2236
2236
|
var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
|
|
2237
|
-
return (React.createElement(Wrapper$
|
|
2237
|
+
return (React.createElement(Wrapper$c, __assign({}, accessibleProps),
|
|
2238
2238
|
React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
|
|
2239
2239
|
children ? React.createElement(Label$3, null, children) : null));
|
|
2240
2240
|
};
|
|
2241
|
-
var templateObject_1$
|
|
2241
|
+
var templateObject_1$i, templateObject_2$g, templateObject_3$d;
|
|
2242
2242
|
|
|
2243
|
-
var SelectAll = styled.div(templateObject_1$
|
|
2243
|
+
var SelectAll = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n padding: 8px 12px;\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n"], ["\n padding: 8px 12px;\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n"])), Colors.LIGHT_GRAY.Hex);
|
|
2244
2244
|
var Options$1 = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n padding: 12px;\n box-sizing: border-box;\n"], ["\n padding: 12px;\n box-sizing: border-box;\n"])));
|
|
2245
2245
|
var Checklist = function (_a) {
|
|
2246
2246
|
var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, selected = _a.selected, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
|
|
@@ -2269,7 +2269,7 @@ var Checklist = function (_a) {
|
|
|
2269
2269
|
return (React.createElement(Checkbox, __assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
|
|
2270
2270
|
}))));
|
|
2271
2271
|
};
|
|
2272
|
-
var templateObject_1$
|
|
2272
|
+
var templateObject_1$h, templateObject_2$f;
|
|
2273
2273
|
|
|
2274
2274
|
var dayjs_min = {exports: {}};
|
|
2275
2275
|
|
|
@@ -2589,7 +2589,7 @@ var dayjs_min = {exports: {}};
|
|
|
2589
2589
|
var dayjs_minExports = dayjs_min.exports;
|
|
2590
2590
|
var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
|
|
2591
2591
|
|
|
2592
|
-
var Wrapper$
|
|
2592
|
+
var Wrapper$b = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n border-radius: 4px;\n height: 40px;\n background-color: ", ";\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n border-radius: ", ";\n flex-grow: ", ";\n box-sizing: border-box;\n padding: 10px 0px;\n display: flex;\n align-items: center;\n"], ["\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) {
|
|
2593
2593
|
var $style = _a.$style;
|
|
2594
2594
|
return ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px';
|
|
2595
2595
|
}, function (_a) {
|
|
@@ -2600,7 +2600,7 @@ var Trigger$1 = styled.select(templateObject_2$e || (templateObject_2$e = __make
|
|
|
2600
2600
|
var IconWrapper$2 = styled.span(templateObject_3$c || (templateObject_3$c = __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"])));
|
|
2601
2601
|
var Select = function (_a) {
|
|
2602
2602
|
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"]);
|
|
2603
|
-
return (React.createElement(Wrapper$
|
|
2603
|
+
return (React.createElement(Wrapper$b, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
|
|
2604
2604
|
React.createElement(Trigger$1, __assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
|
|
2605
2605
|
placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
|
|
2606
2606
|
optionGroups &&
|
|
@@ -2616,9 +2616,9 @@ var Select = function (_a) {
|
|
|
2616
2616
|
React.createElement(IconWrapper$2, null,
|
|
2617
2617
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' }))));
|
|
2618
2618
|
};
|
|
2619
|
-
var templateObject_1$
|
|
2619
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$c;
|
|
2620
2620
|
|
|
2621
|
-
var DatePickerWrapper = styled.div(templateObject_1$
|
|
2621
|
+
var DatePickerWrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
2622
2622
|
var Middle = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin: 0px -1px;\n"], ["\n margin: 0px -1px;\n"])));
|
|
2623
2623
|
var DatePicker = function (_a) {
|
|
2624
2624
|
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;
|
|
@@ -2679,9 +2679,9 @@ var DatePicker = function (_a) {
|
|
|
2679
2679
|
React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
|
|
2680
2680
|
React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px' }, value: dDate.format('YYYY') }))));
|
|
2681
2681
|
};
|
|
2682
|
-
var templateObject_1$
|
|
2682
|
+
var templateObject_1$f, templateObject_2$d;
|
|
2683
2683
|
|
|
2684
|
-
var Scrim$1 = styled.div(templateObject_1$
|
|
2684
|
+
var Scrim$1 = styled.div(templateObject_1$e || (templateObject_1$e = __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) {
|
|
2685
2685
|
var $scrim = _a.$scrim;
|
|
2686
2686
|
return ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent');
|
|
2687
2687
|
});
|
|
@@ -2720,10 +2720,10 @@ var Drawer = function (_a) {
|
|
|
2720
2720
|
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary' })) : null)) : null),
|
|
2721
2721
|
scrim ? React.createElement(Scrim$1, { "$scrim": scrim, onClick: onClose }) : null));
|
|
2722
2722
|
};
|
|
2723
|
-
var templateObject_1$
|
|
2723
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$3;
|
|
2724
2724
|
|
|
2725
|
-
var Wrapper$
|
|
2726
|
-
var LabelRow = styled.div(templateObject_1$
|
|
2725
|
+
var Wrapper$a = styled.div(function (props) { return (__assign({ margin: '0px 0px 18px 0px' }, props.style)); });
|
|
2726
|
+
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"])));
|
|
2727
2727
|
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);
|
|
2728
2728
|
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);
|
|
2729
2729
|
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);
|
|
@@ -2731,7 +2731,7 @@ var Description = styled.div(templateObject_5$4 || (templateObject_5$4 = __makeT
|
|
|
2731
2731
|
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);
|
|
2732
2732
|
var Field = function (_a) {
|
|
2733
2733
|
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"]);
|
|
2734
|
-
return (React.createElement(Wrapper$
|
|
2734
|
+
return (React.createElement(Wrapper$a, __assign({ style: style }, accessibleProps),
|
|
2735
2735
|
React.createElement(LabelRow, null,
|
|
2736
2736
|
React.createElement(Label$2, { htmlFor: htmlFor },
|
|
2737
2737
|
label,
|
|
@@ -2741,9 +2741,9 @@ var Field = function (_a) {
|
|
|
2741
2741
|
children,
|
|
2742
2742
|
validationText ? React.createElement(Validation, null, validationText) : null));
|
|
2743
2743
|
};
|
|
2744
|
-
var templateObject_1$
|
|
2744
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$2;
|
|
2745
2745
|
|
|
2746
|
-
var Wrapper$
|
|
2746
|
+
var Wrapper$9 = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n gap: 16px;\n padding: 20px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n border: 1px dashed ", ";\n background-color: ", ";\n"], ["\n display: flex;\n gap: 16px;\n padding: 20px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n border: 1px dashed ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
2747
2747
|
var $isDragOver = _a.$isDragOver;
|
|
2748
2748
|
return ($isDragOver ? "".concat(Colors.PRIMARY.Hex) : '#ccc');
|
|
2749
2749
|
}, function (_a) {
|
|
@@ -2823,7 +2823,7 @@ var FileUpload = function (_a) {
|
|
|
2823
2823
|
onFileDelete(files[index]);
|
|
2824
2824
|
};
|
|
2825
2825
|
return (React.createElement(React.Fragment, null,
|
|
2826
|
-
React.createElement(Wrapper$
|
|
2826
|
+
React.createElement(Wrapper$9, __assign({ "$isDragOver": dragOver, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop }, accessibleProps),
|
|
2827
2827
|
files.length > 0 && (React.createElement(Files, null, Array.from(files).map(function (singleFile, index) {
|
|
2828
2828
|
var _a;
|
|
2829
2829
|
return (React.createElement(File, { key: index },
|
|
@@ -2840,7 +2840,7 @@ var FileUpload = function (_a) {
|
|
|
2840
2840
|
React.createElement(Copy, { align: 'center', children: 'Drag & drop files here or click to choose', type: 'bold' }),
|
|
2841
2841
|
React.createElement(Copy, { align: 'center', children: "".concat(maxFileSize, " MB max file size"), color: 'GRAY' }))))));
|
|
2842
2842
|
};
|
|
2843
|
-
var templateObject_1$
|
|
2843
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8;
|
|
2844
2844
|
|
|
2845
2845
|
var formatAsPhone = function (number) {
|
|
2846
2846
|
var formatted_value = "".concat(number).replace(/[^0-9.]/g, '');
|
|
@@ -2869,7 +2869,7 @@ var formatAsSsn = function (number) {
|
|
|
2869
2869
|
return formatted_value;
|
|
2870
2870
|
};
|
|
2871
2871
|
|
|
2872
|
-
var StyledInput = styled.input(templateObject_1$
|
|
2872
|
+
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); });
|
|
2873
2873
|
var StyledSuffix = styled.div(templateObject_2$9 || (templateObject_2$9 = __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);
|
|
2874
2874
|
var StyledWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
2875
2875
|
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); });
|
|
@@ -2917,7 +2917,14 @@ var Input$1 = function (_a) {
|
|
|
2917
2917
|
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)),
|
|
2918
2918
|
suffix && React.createElement(StyledSuffix, null, suffix)));
|
|
2919
2919
|
};
|
|
2920
|
-
var templateObject_1$
|
|
2920
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$8, templateObject_4$4;
|
|
2921
|
+
|
|
2922
|
+
var Wrapper$8 = styled.a(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: 500;\n font-style: normal;\n text-decoration: 'none';\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: 0px;\n padding: 0px;\n box-sizing: border-box;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: 500;\n font-style: normal;\n text-decoration: 'none';\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: 0px;\n padding: 0px;\n box-sizing: border-box;\n cursor: pointer;\n"])), Colors.PRIMARY.Hex, function (props) { return (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT); }, function (props) { return (props.$small ? '1.5em' : '1.6em'); }, function (props) { return (props.$small ? '1px' : '0px'); });
|
|
2923
|
+
var Link = function (_a) {
|
|
2924
|
+
var children = _a.children, onClick = _a.onClick, small = _a.small, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
|
|
2925
|
+
return (React.createElement(Wrapper$8, __assign({ "$small": small, onClick: onClick }, accessibleProps), children));
|
|
2926
|
+
};
|
|
2927
|
+
var templateObject_1$a;
|
|
2921
2928
|
|
|
2922
2929
|
var colorMapping = {
|
|
2923
2930
|
black: {
|
|
@@ -3190,6 +3197,7 @@ exports.Field = Field;
|
|
|
3190
3197
|
exports.FileUpload = FileUpload;
|
|
3191
3198
|
exports.Heading = Heading;
|
|
3192
3199
|
exports.Input = Input$1;
|
|
3200
|
+
exports.Link = Link;
|
|
3193
3201
|
exports.Logo = Logo;
|
|
3194
3202
|
exports.Modal = Modal;
|
|
3195
3203
|
exports.MoreMenu = MoreMenu;
|