@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
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { AccessibleProps } from '../../utils/Accessibility';
|
|
3
|
+
export interface LinkProps extends AccessibleProps {
|
|
4
|
+
/** Set the text to be displayed */
|
|
5
|
+
children: string;
|
|
6
|
+
/** Display small text */
|
|
7
|
+
small?: boolean;
|
|
8
|
+
/** A method to execute when this component is clicked */
|
|
9
|
+
onClick?: (e?: any) => void;
|
|
10
|
+
}
|
|
11
|
+
declare const Link: FC<LinkProps>;
|
|
12
|
+
export default Link;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Link';
|
|
@@ -12,6 +12,7 @@ export { default as Field } from './components/Field';
|
|
|
12
12
|
export { default as FileUpload } from './components/FileUpload';
|
|
13
13
|
export { default as Heading } from './components/Heading';
|
|
14
14
|
export { default as Input } from './components/Input';
|
|
15
|
+
export { default as Link } from './components/Link';
|
|
15
16
|
export { default as Logo } from './components/Logo';
|
|
16
17
|
export { default as Modal } from './components/Modal';
|
|
17
18
|
export { default as MoreMenu } from './components/MoreMenu';
|
|
@@ -2,7 +2,7 @@ export interface AccessibleProps {
|
|
|
2
2
|
/** Set the css id for the main wrapping html element */
|
|
3
3
|
id?: string;
|
|
4
4
|
/** Set the css class for the main wrapping html element */
|
|
5
|
-
|
|
5
|
+
className?: string;
|
|
6
6
|
/** Set the name attrbute on the main wrapping html element */
|
|
7
7
|
name?: string;
|
|
8
8
|
/** Set the role of the main wrapping html element. See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques */
|
|
@@ -10,5 +10,5 @@ export interface AccessibleProps {
|
|
|
10
10
|
/** Set the order in which this element is focused. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex */
|
|
11
11
|
tabIndex?: number;
|
|
12
12
|
/** Set a label for an interactive element. See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label */
|
|
13
|
-
|
|
13
|
+
'aria-label'?: string;
|
|
14
14
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -2034,7 +2034,7 @@ var FontSizes = {
|
|
|
2034
2034
|
SMALL: '13px',
|
|
2035
2035
|
};
|
|
2036
2036
|
|
|
2037
|
-
var Header$3 = styled.div(templateObject_1$
|
|
2037
|
+
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"])));
|
|
2038
2038
|
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);
|
|
2039
2039
|
var Accordion = function (_a) {
|
|
2040
2040
|
var title = _a.title, children = _a.children, open = _a.open, onClick = _a.onClick, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
|
|
@@ -2044,7 +2044,7 @@ var Accordion = function (_a) {
|
|
|
2044
2044
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
|
|
2045
2045
|
open ? children : null));
|
|
2046
2046
|
};
|
|
2047
|
-
var templateObject_1$
|
|
2047
|
+
var templateObject_1$p, templateObject_2$m;
|
|
2048
2048
|
|
|
2049
2049
|
var button_type_mapping = {
|
|
2050
2050
|
primary: {
|
|
@@ -2069,7 +2069,7 @@ var button_type_mapping = {
|
|
|
2069
2069
|
badge_content_color: Colors.RED.Hex,
|
|
2070
2070
|
},
|
|
2071
2071
|
};
|
|
2072
|
-
var StyledButton = styled.button(templateObject_1$
|
|
2072
|
+
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) {
|
|
2073
2073
|
if (props.$hasChildren) {
|
|
2074
2074
|
if (props.$small) {
|
|
2075
2075
|
return '0 10px';
|
|
@@ -2108,9 +2108,9 @@ var Button = function (_a) {
|
|
|
2108
2108
|
React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null,
|
|
2109
2109
|
badge && !icon ? (React.createElement(Badge$1, { "$format": format, "$small": small }, badge)) : null));
|
|
2110
2110
|
};
|
|
2111
|
-
var templateObject_1$
|
|
2111
|
+
var templateObject_1$o, templateObject_2$l, templateObject_3$i, templateObject_4$9;
|
|
2112
2112
|
|
|
2113
|
-
var StyledComponent = styled.p(templateObject_1$
|
|
2113
|
+
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) {
|
|
2114
2114
|
return ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none';
|
|
2115
2115
|
}, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; }, function (props) { return props.$align || 'left'; });
|
|
2116
2116
|
var Copy = function (_a) {
|
|
@@ -2120,9 +2120,9 @@ var Copy = function (_a) {
|
|
|
2120
2120
|
Copy.defaultProps = {
|
|
2121
2121
|
type: 'default',
|
|
2122
2122
|
};
|
|
2123
|
-
var templateObject_1$
|
|
2123
|
+
var templateObject_1$n;
|
|
2124
2124
|
|
|
2125
|
-
var H1 = styled.h1(templateObject_1$
|
|
2125
|
+
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'; });
|
|
2126
2126
|
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'; });
|
|
2127
2127
|
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'; });
|
|
2128
2128
|
var Heading = function (_a) {
|
|
@@ -2143,9 +2143,9 @@ Heading.defaultProps = {
|
|
|
2143
2143
|
bold: false,
|
|
2144
2144
|
type: 'primary',
|
|
2145
2145
|
};
|
|
2146
|
-
var templateObject_1$
|
|
2146
|
+
var templateObject_1$m, templateObject_2$k, templateObject_3$h;
|
|
2147
2147
|
|
|
2148
|
-
var Wrapper$
|
|
2148
|
+
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"])));
|
|
2149
2149
|
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"])));
|
|
2150
2150
|
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"])));
|
|
2151
2151
|
var ActionDialog = function (_a) {
|
|
@@ -2160,7 +2160,7 @@ var ActionDialog = function (_a) {
|
|
|
2160
2160
|
document.onkeydown = null;
|
|
2161
2161
|
};
|
|
2162
2162
|
}, []);
|
|
2163
|
-
return (React.createElement(Wrapper$
|
|
2163
|
+
return (React.createElement(Wrapper$f, __assign({}, accessibleProps),
|
|
2164
2164
|
React.createElement(Container$3, { open: true },
|
|
2165
2165
|
title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
|
|
2166
2166
|
description ? React.createElement(Copy, { align: 'center' }, description) : null,
|
|
@@ -2168,9 +2168,9 @@ var ActionDialog = function (_a) {
|
|
|
2168
2168
|
secondaryButton ? (React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary', margin: '0px 5px' }))) : null,
|
|
2169
2169
|
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 5px' })) : null)) : null)));
|
|
2170
2170
|
};
|
|
2171
|
-
var templateObject_1$
|
|
2171
|
+
var templateObject_1$l, templateObject_2$j, templateObject_3$g;
|
|
2172
2172
|
|
|
2173
|
-
var Wrapper$
|
|
2173
|
+
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"])));
|
|
2174
2174
|
var Content$1 = styled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin-left: 20px;\n"], ["\n margin-left: 20px;\n"])));
|
|
2175
2175
|
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);
|
|
2176
2176
|
var Alert = function (_a) {
|
|
@@ -2193,7 +2193,7 @@ var Alert = function (_a) {
|
|
|
2193
2193
|
icon: mdiCheckboxMarkedCircleOutline,
|
|
2194
2194
|
},
|
|
2195
2195
|
};
|
|
2196
|
-
return (React.createElement(Wrapper$
|
|
2196
|
+
return (React.createElement(Wrapper$e, __assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
|
|
2197
2197
|
React.createElement("div", { style: { flexShrink: 0 } },
|
|
2198
2198
|
React.createElement(Icon, { color: type_mapping[type].color, path: type_mapping[type].icon, size: '30px' })),
|
|
2199
2199
|
React.createElement(Content$1, null,
|
|
@@ -2201,9 +2201,9 @@ var Alert = function (_a) {
|
|
|
2201
2201
|
description ? React.createElement(Copy, { margin: '6px 0 0 0 !important' }, description) : null,
|
|
2202
2202
|
action ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
|
|
2203
2203
|
};
|
|
2204
|
-
var templateObject_1$
|
|
2204
|
+
var templateObject_1$k, templateObject_2$i, templateObject_3$f;
|
|
2205
2205
|
|
|
2206
|
-
var Wrapper$
|
|
2206
|
+
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);
|
|
2207
2207
|
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"])));
|
|
2208
2208
|
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"])));
|
|
2209
2209
|
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);
|
|
@@ -2213,7 +2213,7 @@ var Error$1 = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTempl
|
|
|
2213
2213
|
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);
|
|
2214
2214
|
var BulkActionBar = function (_a) {
|
|
2215
2215
|
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"]);
|
|
2216
|
-
return (React.createElement(Wrapper$
|
|
2216
|
+
return (React.createElement(Wrapper$d, __assign({}, accessibleProps),
|
|
2217
2217
|
React.createElement(Left, null,
|
|
2218
2218
|
React.createElement(Info, null,
|
|
2219
2219
|
React.createElement(Selected, null,
|
|
@@ -2225,20 +2225,20 @@ var BulkActionBar = function (_a) {
|
|
|
2225
2225
|
React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
|
|
2226
2226
|
React.createElement(ErrorMsg, null, errorMsg))) : null));
|
|
2227
2227
|
};
|
|
2228
|
-
var templateObject_1$
|
|
2228
|
+
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;
|
|
2229
2229
|
|
|
2230
|
-
var Wrapper$
|
|
2230
|
+
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);
|
|
2231
2231
|
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"])));
|
|
2232
2232
|
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);
|
|
2233
2233
|
var Checkbox = function (_a) {
|
|
2234
2234
|
var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
|
|
2235
|
-
return (React.createElement(Wrapper$
|
|
2235
|
+
return (React.createElement(Wrapper$c, __assign({}, accessibleProps),
|
|
2236
2236
|
React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
|
|
2237
2237
|
children ? React.createElement(Label$3, null, children) : null));
|
|
2238
2238
|
};
|
|
2239
|
-
var templateObject_1$
|
|
2239
|
+
var templateObject_1$i, templateObject_2$g, templateObject_3$d;
|
|
2240
2240
|
|
|
2241
|
-
var SelectAll = styled.div(templateObject_1$
|
|
2241
|
+
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);
|
|
2242
2242
|
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"])));
|
|
2243
2243
|
var Checklist = function (_a) {
|
|
2244
2244
|
var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, selected = _a.selected, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
|
|
@@ -2267,7 +2267,7 @@ var Checklist = function (_a) {
|
|
|
2267
2267
|
return (React.createElement(Checkbox, __assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
|
|
2268
2268
|
}))));
|
|
2269
2269
|
};
|
|
2270
|
-
var templateObject_1$
|
|
2270
|
+
var templateObject_1$h, templateObject_2$f;
|
|
2271
2271
|
|
|
2272
2272
|
var dayjs_min = {exports: {}};
|
|
2273
2273
|
|
|
@@ -2587,7 +2587,7 @@ var dayjs_min = {exports: {}};
|
|
|
2587
2587
|
var dayjs_minExports = dayjs_min.exports;
|
|
2588
2588
|
var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
|
|
2589
2589
|
|
|
2590
|
-
var Wrapper$
|
|
2590
|
+
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) {
|
|
2591
2591
|
var $style = _a.$style;
|
|
2592
2592
|
return ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px';
|
|
2593
2593
|
}, function (_a) {
|
|
@@ -2598,7 +2598,7 @@ var Trigger$1 = styled.select(templateObject_2$e || (templateObject_2$e = __make
|
|
|
2598
2598
|
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"])));
|
|
2599
2599
|
var Select = function (_a) {
|
|
2600
2600
|
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"]);
|
|
2601
|
-
return (React.createElement(Wrapper$
|
|
2601
|
+
return (React.createElement(Wrapper$b, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
|
|
2602
2602
|
React.createElement(Trigger$1, __assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
|
|
2603
2603
|
placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
|
|
2604
2604
|
optionGroups &&
|
|
@@ -2614,9 +2614,9 @@ var Select = function (_a) {
|
|
|
2614
2614
|
React.createElement(IconWrapper$2, null,
|
|
2615
2615
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' }))));
|
|
2616
2616
|
};
|
|
2617
|
-
var templateObject_1$
|
|
2617
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$c;
|
|
2618
2618
|
|
|
2619
|
-
var DatePickerWrapper = styled.div(templateObject_1$
|
|
2619
|
+
var DatePickerWrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
2620
2620
|
var Middle = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin: 0px -1px;\n"], ["\n margin: 0px -1px;\n"])));
|
|
2621
2621
|
var DatePicker = function (_a) {
|
|
2622
2622
|
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;
|
|
@@ -2677,9 +2677,9 @@ var DatePicker = function (_a) {
|
|
|
2677
2677
|
React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
|
|
2678
2678
|
React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px' }, value: dDate.format('YYYY') }))));
|
|
2679
2679
|
};
|
|
2680
|
-
var templateObject_1$
|
|
2680
|
+
var templateObject_1$f, templateObject_2$d;
|
|
2681
2681
|
|
|
2682
|
-
var Scrim$1 = styled.div(templateObject_1$
|
|
2682
|
+
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) {
|
|
2683
2683
|
var $scrim = _a.$scrim;
|
|
2684
2684
|
return ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent');
|
|
2685
2685
|
});
|
|
@@ -2718,10 +2718,10 @@ var Drawer = function (_a) {
|
|
|
2718
2718
|
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary' })) : null)) : null),
|
|
2719
2719
|
scrim ? React.createElement(Scrim$1, { "$scrim": scrim, onClick: onClose }) : null));
|
|
2720
2720
|
};
|
|
2721
|
-
var templateObject_1$
|
|
2721
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$3;
|
|
2722
2722
|
|
|
2723
|
-
var Wrapper$
|
|
2724
|
-
var LabelRow = styled.div(templateObject_1$
|
|
2723
|
+
var Wrapper$a = styled.div(function (props) { return (__assign({ margin: '0px 0px 18px 0px' }, props.style)); });
|
|
2724
|
+
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"])));
|
|
2725
2725
|
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);
|
|
2726
2726
|
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);
|
|
2727
2727
|
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);
|
|
@@ -2729,7 +2729,7 @@ var Description = styled.div(templateObject_5$4 || (templateObject_5$4 = __makeT
|
|
|
2729
2729
|
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);
|
|
2730
2730
|
var Field = function (_a) {
|
|
2731
2731
|
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"]);
|
|
2732
|
-
return (React.createElement(Wrapper$
|
|
2732
|
+
return (React.createElement(Wrapper$a, __assign({ style: style }, accessibleProps),
|
|
2733
2733
|
React.createElement(LabelRow, null,
|
|
2734
2734
|
React.createElement(Label$2, { htmlFor: htmlFor },
|
|
2735
2735
|
label,
|
|
@@ -2739,9 +2739,9 @@ var Field = function (_a) {
|
|
|
2739
2739
|
children,
|
|
2740
2740
|
validationText ? React.createElement(Validation, null, validationText) : null));
|
|
2741
2741
|
};
|
|
2742
|
-
var templateObject_1$
|
|
2742
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$2;
|
|
2743
2743
|
|
|
2744
|
-
var Wrapper$
|
|
2744
|
+
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) {
|
|
2745
2745
|
var $isDragOver = _a.$isDragOver;
|
|
2746
2746
|
return ($isDragOver ? "".concat(Colors.PRIMARY.Hex) : '#ccc');
|
|
2747
2747
|
}, function (_a) {
|
|
@@ -2821,7 +2821,7 @@ var FileUpload = function (_a) {
|
|
|
2821
2821
|
onFileDelete(files[index]);
|
|
2822
2822
|
};
|
|
2823
2823
|
return (React.createElement(React.Fragment, null,
|
|
2824
|
-
React.createElement(Wrapper$
|
|
2824
|
+
React.createElement(Wrapper$9, __assign({ "$isDragOver": dragOver, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop }, accessibleProps),
|
|
2825
2825
|
files.length > 0 && (React.createElement(Files, null, Array.from(files).map(function (singleFile, index) {
|
|
2826
2826
|
var _a;
|
|
2827
2827
|
return (React.createElement(File, { key: index },
|
|
@@ -2838,7 +2838,7 @@ var FileUpload = function (_a) {
|
|
|
2838
2838
|
React.createElement(Copy, { align: 'center', children: 'Drag & drop files here or click to choose', type: 'bold' }),
|
|
2839
2839
|
React.createElement(Copy, { align: 'center', children: "".concat(maxFileSize, " MB max file size"), color: 'GRAY' }))))));
|
|
2840
2840
|
};
|
|
2841
|
-
var templateObject_1$
|
|
2841
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8;
|
|
2842
2842
|
|
|
2843
2843
|
var formatAsPhone = function (number) {
|
|
2844
2844
|
var formatted_value = "".concat(number).replace(/[^0-9.]/g, '');
|
|
@@ -2867,7 +2867,7 @@ var formatAsSsn = function (number) {
|
|
|
2867
2867
|
return formatted_value;
|
|
2868
2868
|
};
|
|
2869
2869
|
|
|
2870
|
-
var StyledInput = styled.input(templateObject_1$
|
|
2870
|
+
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); });
|
|
2871
2871
|
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);
|
|
2872
2872
|
var StyledWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
2873
2873
|
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); });
|
|
@@ -2915,7 +2915,14 @@ var Input$1 = function (_a) {
|
|
|
2915
2915
|
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)),
|
|
2916
2916
|
suffix && React.createElement(StyledSuffix, null, suffix)));
|
|
2917
2917
|
};
|
|
2918
|
-
var templateObject_1$
|
|
2918
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$8, templateObject_4$4;
|
|
2919
|
+
|
|
2920
|
+
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'); });
|
|
2921
|
+
var Link = function (_a) {
|
|
2922
|
+
var children = _a.children, onClick = _a.onClick, small = _a.small, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
|
|
2923
|
+
return (React.createElement(Wrapper$8, __assign({ "$small": small, onClick: onClick }, accessibleProps), children));
|
|
2924
|
+
};
|
|
2925
|
+
var templateObject_1$a;
|
|
2919
2926
|
|
|
2920
2927
|
var colorMapping = {
|
|
2921
2928
|
black: {
|
|
@@ -3174,5 +3181,5 @@ var ZeroState = function (_a) {
|
|
|
3174
3181
|
};
|
|
3175
3182
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
3176
3183
|
|
|
3177
|
-
export { Accordion, ActionDialog, Alert, BulkActionBar, Button, Checkbox, Checklist, Copy, DatePicker, Drawer, Field, FileUpload, Heading, Input$1 as Input, Logo, Modal, MoreMenu, MultiSelect, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, ZeroState };
|
|
3184
|
+
export { Accordion, ActionDialog, Alert, BulkActionBar, Button, Checkbox, Checklist, Copy, DatePicker, Drawer, Field, FileUpload, Heading, Input$1 as Input, Link, Logo, Modal, MoreMenu, MultiSelect, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, ZeroState };
|
|
3178
3185
|
//# sourceMappingURL=index.js.map
|