@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
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { FC, ReactNode } from 'react';
|
|
2
|
+
import { TooltipProps } from '../Tooltip/Tooltip';
|
|
2
3
|
import { AccessibleProps } from '../../utils/Accessibility';
|
|
3
4
|
interface ActionProps {
|
|
4
5
|
label: string;
|
|
@@ -18,6 +19,8 @@ export interface FieldProps extends AccessibleProps {
|
|
|
18
19
|
label: string;
|
|
19
20
|
/** It is used to give description to input. */
|
|
20
21
|
description?: string;
|
|
22
|
+
/** Display a tooltip next to the label */
|
|
23
|
+
tooltip?: TooltipProps;
|
|
21
24
|
}
|
|
22
25
|
declare const Field: FC<FieldProps>;
|
|
23
26
|
export default Field;
|
|
@@ -4,21 +4,37 @@ export interface styleProps {
|
|
|
4
4
|
width?: number | string;
|
|
5
5
|
}
|
|
6
6
|
export interface InputProps extends AccessibleProps {
|
|
7
|
+
/** Force a specific format/mask for the Input value */
|
|
7
8
|
format?: 'phone' | 'currency' | 'currency_decimal' | 'ssn';
|
|
9
|
+
/** Set the height of the textarea. This should only be used with textarea */
|
|
8
10
|
height?: string;
|
|
11
|
+
/** Display a read only suffix. Example: kg, lbs, etc */
|
|
9
12
|
suffix?: string;
|
|
13
|
+
/** Display the input as invalid, with a red border and red text */
|
|
10
14
|
invalid?: boolean;
|
|
15
|
+
/** Use with a number input to define the max allowed number */
|
|
11
16
|
max?: string;
|
|
17
|
+
/** Use with a text input to define the max number of characters */
|
|
12
18
|
maxLength?: number;
|
|
19
|
+
/** Use with a number input to define the min allowed number */
|
|
13
20
|
min?: string;
|
|
21
|
+
/** A method to be called when the changes focus away from the input */
|
|
14
22
|
onBlur?: (e?: any) => void;
|
|
23
|
+
/** A method to be called when the value of the input changes */
|
|
15
24
|
onChange?: (e?: any) => void;
|
|
25
|
+
/** A method to be called when the use presses a key */
|
|
16
26
|
onKeyDown?: (e?: any) => void;
|
|
27
|
+
/** Display placeholder text in the input */
|
|
17
28
|
placeholder?: string;
|
|
29
|
+
/** Display the input as read only, preventing the user from inteacting with it */
|
|
18
30
|
readOnly?: boolean;
|
|
31
|
+
/** Use with a number input to define how the number increments */
|
|
19
32
|
step?: number;
|
|
33
|
+
/** Set the css of the wrapping div */
|
|
20
34
|
style?: styleProps;
|
|
21
|
-
|
|
35
|
+
/** Define the type of input to be displayed */
|
|
36
|
+
type?: 'date' | 'email' | 'number' | 'password' | 'tel' | 'text' | 'url' | 'textarea' | 'search';
|
|
37
|
+
/** Set the value of the input. This should be used by the parent component to control the input's value. */
|
|
22
38
|
value?: string;
|
|
23
39
|
}
|
|
24
40
|
declare const Input: FC<InputProps>;
|
|
@@ -7,7 +7,7 @@ interface MenuItemProps extends AccessibleProps {
|
|
|
7
7
|
}
|
|
8
8
|
export interface MoreMenuProps extends AccessibleProps {
|
|
9
9
|
menuItems: MenuItemProps[];
|
|
10
|
-
maxHeight
|
|
10
|
+
maxHeight?: string | number;
|
|
11
11
|
}
|
|
12
12
|
declare const MoreMenu: FC<MoreMenuProps>;
|
|
13
13
|
export default MoreMenu;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
export interface TooltipProps {
|
|
3
|
+
/** It is used to give label to tag. */
|
|
4
|
+
children: string;
|
|
5
|
+
/** It is callback function called when user wants to close the tag. */
|
|
6
|
+
position?: 'right-top' | 'right-bottom' | 'right-center' | 'left-top' | 'left-bottom' | 'left-center';
|
|
7
|
+
/** Override the default content width of 240px */
|
|
8
|
+
width?: string;
|
|
9
|
+
}
|
|
10
|
+
declare const Tooltip: FC<TooltipProps>;
|
|
11
|
+
export default Tooltip;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Tooltip';
|
|
@@ -25,4 +25,5 @@ export { default as Table } from './components/Table';
|
|
|
25
25
|
export { default as Tabs } from './components/Tabs';
|
|
26
26
|
export { default as Tag } from './components/Tag';
|
|
27
27
|
export { default as Toggle } from './components/Toggle';
|
|
28
|
+
export { default as Tooltip } from './components/Tooltip';
|
|
28
29
|
export { default as ZeroState } from './components/ZeroState';
|
package/dist/esm/index.js
CHANGED
|
@@ -2038,8 +2038,8 @@ var FontSizes = {
|
|
|
2038
2038
|
SMALL: '13px',
|
|
2039
2039
|
};
|
|
2040
2040
|
|
|
2041
|
-
var Header$3 = styled.div(templateObject_1$
|
|
2042
|
-
var Title$1 = styled.div(templateObject_2$
|
|
2041
|
+
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"])));
|
|
2042
|
+
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);
|
|
2043
2043
|
var Accordion = function (_a) {
|
|
2044
2044
|
var title = _a.title, children = _a.children, open = _a.open, onClick = _a.onClick, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
|
|
2045
2045
|
return (React.createElement(React.Fragment, null,
|
|
@@ -2048,7 +2048,7 @@ var Accordion = function (_a) {
|
|
|
2048
2048
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
|
|
2049
2049
|
open ? children : null));
|
|
2050
2050
|
};
|
|
2051
|
-
var templateObject_1$
|
|
2051
|
+
var templateObject_1$q, templateObject_2$n;
|
|
2052
2052
|
|
|
2053
2053
|
var button_type_mapping = {
|
|
2054
2054
|
primary: {
|
|
@@ -2073,7 +2073,7 @@ var button_type_mapping = {
|
|
|
2073
2073
|
badge_content_color: Colors.RED.Hex,
|
|
2074
2074
|
},
|
|
2075
2075
|
};
|
|
2076
|
-
var StyledButton = styled.button(templateObject_1$
|
|
2076
|
+
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) {
|
|
2077
2077
|
if (props.$hasChildren) {
|
|
2078
2078
|
if (props.$small) {
|
|
2079
2079
|
return '0 10px';
|
|
@@ -2096,8 +2096,8 @@ var StyledButton = styled.button(templateObject_1$o || (templateObject_1$o = __m
|
|
|
2096
2096
|
}, function (props) { return (props.$disabled ? 'default' : 'pointer'); }, function (props) { return (props.$disabled ? 0.6 : 0.9); }, function (props) {
|
|
2097
2097
|
return props.$format ? button_type_mapping[props.$format].border_color : Colors.PRIMARY.Hex;
|
|
2098
2098
|
}, function (props) { return (props.$disabled ? 0.6 : 1); });
|
|
2099
|
-
var Label$4 = styled.span(templateObject_2$
|
|
2100
|
-
var StyledIcon$
|
|
2099
|
+
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);
|
|
2100
|
+
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'); });
|
|
2101
2101
|
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) {
|
|
2102
2102
|
return props.$format ? button_type_mapping[props.$format].badge_bg_color : '#fff';
|
|
2103
2103
|
}, function (props) {
|
|
@@ -2108,13 +2108,13 @@ var Button = function (_a) {
|
|
|
2108
2108
|
var has_children = children && children.length > 0;
|
|
2109
2109
|
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),
|
|
2110
2110
|
children ? (React.createElement(Label$4, { "$format": format, "$small": small }, children)) : null,
|
|
2111
|
-
icon && !badge ? (React.createElement(StyledIcon$
|
|
2111
|
+
icon && !badge ? (React.createElement(StyledIcon$3, { "$hasChildren": !!has_children },
|
|
2112
2112
|
React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: loading ? mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
|
|
2113
2113
|
badge && !icon ? (React.createElement(Badge$1, { "$format": format, "$small": small }, badge)) : null));
|
|
2114
2114
|
};
|
|
2115
|
-
var templateObject_1$
|
|
2115
|
+
var templateObject_1$p, templateObject_2$m, templateObject_3$i, templateObject_4$9;
|
|
2116
2116
|
|
|
2117
|
-
var StyledComponent = styled.p(templateObject_1$
|
|
2117
|
+
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) {
|
|
2118
2118
|
return ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none';
|
|
2119
2119
|
}, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; }, function (props) { return props.$align || 'left'; });
|
|
2120
2120
|
var Copy = function (_a) {
|
|
@@ -2124,10 +2124,10 @@ var Copy = function (_a) {
|
|
|
2124
2124
|
Copy.defaultProps = {
|
|
2125
2125
|
type: 'default',
|
|
2126
2126
|
};
|
|
2127
|
-
var templateObject_1$
|
|
2127
|
+
var templateObject_1$o;
|
|
2128
2128
|
|
|
2129
|
-
var H1 = styled.h1(templateObject_1$
|
|
2130
|
-
var H2 = styled.h2(templateObject_2$
|
|
2129
|
+
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'; });
|
|
2130
|
+
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'; });
|
|
2131
2131
|
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'; });
|
|
2132
2132
|
var Heading = function (_a) {
|
|
2133
2133
|
var bold = _a.bold, children = _a.children, margin = _a.margin, padding = _a.padding, type = _a.type, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
|
|
@@ -2147,14 +2147,14 @@ Heading.defaultProps = {
|
|
|
2147
2147
|
bold: false,
|
|
2148
2148
|
type: 'primary',
|
|
2149
2149
|
};
|
|
2150
|
-
var templateObject_1$
|
|
2150
|
+
var templateObject_1$n, templateObject_2$l, templateObject_3$h;
|
|
2151
2151
|
|
|
2152
|
-
var Wrapper$
|
|
2153
|
-
var Container$3 = styled.dialog(templateObject_2$
|
|
2152
|
+
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"])));
|
|
2153
|
+
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"])));
|
|
2154
2154
|
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"])));
|
|
2155
2155
|
var ActionDialog = function (_a) {
|
|
2156
2156
|
var description = _a.description, title = _a.title, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton"]);
|
|
2157
|
-
return (React.createElement(Wrapper$
|
|
2157
|
+
return (React.createElement(Wrapper$g, __assign({}, accessibleProps),
|
|
2158
2158
|
React.createElement(Container$3, { open: true },
|
|
2159
2159
|
title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
|
|
2160
2160
|
description ? React.createElement(Copy, { align: 'center' }, description) : null,
|
|
@@ -2163,10 +2163,10 @@ var ActionDialog = function (_a) {
|
|
|
2163
2163
|
secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
2164
2164
|
primaryButton ? (React.createElement(Button, __assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
|
|
2165
2165
|
};
|
|
2166
|
-
var templateObject_1$
|
|
2166
|
+
var templateObject_1$m, templateObject_2$k, templateObject_3$g;
|
|
2167
2167
|
|
|
2168
|
-
var Wrapper$
|
|
2169
|
-
var Content$
|
|
2168
|
+
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"])));
|
|
2169
|
+
var Content$2 = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin-left: 20px;\n"], ["\n margin-left: 20px;\n"])));
|
|
2170
2170
|
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);
|
|
2171
2171
|
var Alert = function (_a) {
|
|
2172
2172
|
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"]);
|
|
@@ -2188,18 +2188,18 @@ var Alert = function (_a) {
|
|
|
2188
2188
|
icon: mdiCheckboxMarkedCircleOutline,
|
|
2189
2189
|
},
|
|
2190
2190
|
};
|
|
2191
|
-
return (React.createElement(Wrapper$
|
|
2191
|
+
return (React.createElement(Wrapper$f, __assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
|
|
2192
2192
|
React.createElement("div", { style: { flexShrink: 0 } },
|
|
2193
2193
|
React.createElement(Icon, { color: type_mapping[type].color, path: type_mapping[type].icon, size: '30px' })),
|
|
2194
|
-
React.createElement(Content$
|
|
2194
|
+
React.createElement(Content$2, null,
|
|
2195
2195
|
title ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
|
|
2196
2196
|
description ? React.createElement(Copy, { margin: '6px 0 0 0 !important' }, description) : null,
|
|
2197
2197
|
action ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
|
|
2198
2198
|
};
|
|
2199
|
-
var templateObject_1$
|
|
2199
|
+
var templateObject_1$l, templateObject_2$j, templateObject_3$f;
|
|
2200
2200
|
|
|
2201
|
-
var Wrapper$
|
|
2202
|
-
var Left = styled.div(templateObject_2$
|
|
2201
|
+
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);
|
|
2202
|
+
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"])));
|
|
2203
2203
|
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"])));
|
|
2204
2204
|
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);
|
|
2205
2205
|
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);
|
|
@@ -2208,7 +2208,7 @@ var Error$1 = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTempl
|
|
|
2208
2208
|
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);
|
|
2209
2209
|
var BulkActionBar = function (_a) {
|
|
2210
2210
|
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"]);
|
|
2211
|
-
return (React.createElement(Wrapper$
|
|
2211
|
+
return (React.createElement(Wrapper$e, __assign({}, accessibleProps),
|
|
2212
2212
|
React.createElement(Left, null,
|
|
2213
2213
|
React.createElement(Info, null,
|
|
2214
2214
|
React.createElement(Selected, null,
|
|
@@ -2220,21 +2220,21 @@ var BulkActionBar = function (_a) {
|
|
|
2220
2220
|
React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
|
|
2221
2221
|
React.createElement(ErrorMsg, null, errorMsg))) : null));
|
|
2222
2222
|
};
|
|
2223
|
-
var templateObject_1$
|
|
2223
|
+
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;
|
|
2224
2224
|
|
|
2225
|
-
var Wrapper$
|
|
2226
|
-
var Input$2 = styled.input(templateObject_2$
|
|
2225
|
+
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);
|
|
2226
|
+
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"])));
|
|
2227
2227
|
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);
|
|
2228
2228
|
var Checkbox = function (_a) {
|
|
2229
2229
|
var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
|
|
2230
|
-
return (React.createElement(Wrapper$
|
|
2230
|
+
return (React.createElement(Wrapper$d, __assign({}, accessibleProps),
|
|
2231
2231
|
React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
|
|
2232
2232
|
children ? React.createElement(Label$3, null, children) : null));
|
|
2233
2233
|
};
|
|
2234
|
-
var templateObject_1$
|
|
2234
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$d;
|
|
2235
2235
|
|
|
2236
|
-
var SelectAll = styled.div(templateObject_1$
|
|
2237
|
-
var Options$1 = styled.div(templateObject_2$
|
|
2236
|
+
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);
|
|
2237
|
+
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"])));
|
|
2238
2238
|
var Checklist = function (_a) {
|
|
2239
2239
|
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"]);
|
|
2240
2240
|
var values = options.map(function (option) { return option.value; });
|
|
@@ -2271,7 +2271,7 @@ var Checklist = function (_a) {
|
|
|
2271
2271
|
return (React.createElement(Checkbox, __assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
|
|
2272
2272
|
}))));
|
|
2273
2273
|
};
|
|
2274
|
-
var templateObject_1$
|
|
2274
|
+
var templateObject_1$i, templateObject_2$g;
|
|
2275
2275
|
|
|
2276
2276
|
var dayjs_min = {exports: {}};
|
|
2277
2277
|
|
|
@@ -2591,7 +2591,7 @@ var dayjs_min = {exports: {}};
|
|
|
2591
2591
|
var dayjs_minExports = dayjs_min.exports;
|
|
2592
2592
|
var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
|
|
2593
2593
|
|
|
2594
|
-
var Wrapper$
|
|
2594
|
+
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) {
|
|
2595
2595
|
var $style = _a.$style;
|
|
2596
2596
|
return ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px';
|
|
2597
2597
|
}, function (_a) {
|
|
@@ -2601,11 +2601,11 @@ var Wrapper$b = styled.div(templateObject_1$g || (templateObject_1$g = __makeTem
|
|
|
2601
2601
|
var $style = _a.$style;
|
|
2602
2602
|
return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
|
|
2603
2603
|
});
|
|
2604
|
-
var Trigger$1 = styled.select(templateObject_2$
|
|
2604
|
+
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);
|
|
2605
2605
|
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"])));
|
|
2606
2606
|
var Select = function (_a) {
|
|
2607
2607
|
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"]);
|
|
2608
|
-
return (React.createElement(Wrapper$
|
|
2608
|
+
return (React.createElement(Wrapper$c, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
|
|
2609
2609
|
React.createElement(Trigger$1, __assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
|
|
2610
2610
|
placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
|
|
2611
2611
|
optionGroups &&
|
|
@@ -2620,13 +2620,13 @@ var Select = function (_a) {
|
|
|
2620
2620
|
})),
|
|
2621
2621
|
React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' })));
|
|
2622
2622
|
};
|
|
2623
|
-
var templateObject_1$
|
|
2623
|
+
var templateObject_1$h, templateObject_2$f, templateObject_3$c;
|
|
2624
2624
|
|
|
2625
|
-
var DatePickerWrapper = styled.div(templateObject_1$
|
|
2625
|
+
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) {
|
|
2626
2626
|
var $style = _a.$style;
|
|
2627
2627
|
return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
|
|
2628
2628
|
});
|
|
2629
|
-
var Middle = styled.div(templateObject_2$
|
|
2629
|
+
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"])));
|
|
2630
2630
|
var DatePicker = function (_a) {
|
|
2631
2631
|
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;
|
|
2632
2632
|
var dMaxDate = maxDate ? dayjs(maxDate) : dayjs();
|
|
@@ -2686,9 +2686,9 @@ var DatePicker = function (_a) {
|
|
|
2686
2686
|
React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
|
|
2687
2687
|
React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
|
|
2688
2688
|
};
|
|
2689
|
-
var templateObject_1$
|
|
2689
|
+
var templateObject_1$g, templateObject_2$e;
|
|
2690
2690
|
|
|
2691
|
-
var Scrim$1 = styled.div(templateObject_1$
|
|
2691
|
+
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) {
|
|
2692
2692
|
var $position = _a.$position;
|
|
2693
2693
|
return $position;
|
|
2694
2694
|
}, function (_a) {
|
|
@@ -2698,7 +2698,7 @@ var Scrim$1 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTempl
|
|
|
2698
2698
|
var $scrim = _a.$scrim;
|
|
2699
2699
|
return ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent');
|
|
2700
2700
|
});
|
|
2701
|
-
var Container$2 = styled.div(templateObject_2$
|
|
2701
|
+
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) {
|
|
2702
2702
|
var $position = _a.$position;
|
|
2703
2703
|
return ($position === 'fixed' ? 9999 : 11);
|
|
2704
2704
|
}, function (_a) {
|
|
@@ -2739,22 +2739,63 @@ var Drawer = function (_a) {
|
|
|
2739
2739
|
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary' })) : null)) : null),
|
|
2740
2740
|
scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
|
|
2741
2741
|
};
|
|
2742
|
-
var templateObject_1$
|
|
2742
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$3;
|
|
2743
|
+
|
|
2744
|
+
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"])));
|
|
2745
|
+
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);
|
|
2746
|
+
var positions = {
|
|
2747
|
+
'right-top': {
|
|
2748
|
+
top: '0px',
|
|
2749
|
+
left: '28px',
|
|
2750
|
+
},
|
|
2751
|
+
'right-bottom': {
|
|
2752
|
+
bottom: '0px',
|
|
2753
|
+
left: '28px',
|
|
2754
|
+
},
|
|
2755
|
+
'right-center': {
|
|
2756
|
+
top: '50%',
|
|
2757
|
+
left: '28px',
|
|
2758
|
+
transform: 'translateY(-50%)',
|
|
2759
|
+
},
|
|
2760
|
+
'left-top': {
|
|
2761
|
+
top: '0px',
|
|
2762
|
+
right: '28px',
|
|
2763
|
+
},
|
|
2764
|
+
'left-bottom': {
|
|
2765
|
+
bottom: '0px',
|
|
2766
|
+
right: '28px',
|
|
2767
|
+
},
|
|
2768
|
+
'left-center': {
|
|
2769
|
+
top: '50%',
|
|
2770
|
+
right: '28px',
|
|
2771
|
+
transform: 'translateY(-50%)',
|
|
2772
|
+
},
|
|
2773
|
+
};
|
|
2774
|
+
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])); });
|
|
2775
|
+
var Tooltip = function (_a) {
|
|
2776
|
+
var children = _a.children, _b = _a.position, position = _b === void 0 ? 'right-top' : _b, _c = _a.width, width = _c === void 0 ? '240px' : _c;
|
|
2777
|
+
var _d = useState(false), show_content = _d[0], toggleContent = _d[1];
|
|
2778
|
+
return (React.createElement(Wrapper$b, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
|
|
2779
|
+
React.createElement(StyledIcon$2, { path: mdiInformationOutline }),
|
|
2780
|
+
show_content ? (React.createElement(Content$1, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
|
|
2781
|
+
};
|
|
2782
|
+
var templateObject_1$e, templateObject_2$c;
|
|
2743
2783
|
|
|
2744
2784
|
var Wrapper$a = styled.div(function (props) { return (__assign({ margin: '0px 0px 18px 0px' }, props.style)); });
|
|
2745
2785
|
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"])));
|
|
2746
|
-
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);
|
|
2786
|
+
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);
|
|
2747
2787
|
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);
|
|
2748
2788
|
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);
|
|
2749
2789
|
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);
|
|
2750
2790
|
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);
|
|
2751
2791
|
var Field = function (_a) {
|
|
2752
|
-
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"]);
|
|
2792
|
+
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"]);
|
|
2753
2793
|
return (React.createElement(Wrapper$a, __assign({ style: style }, accessibleProps),
|
|
2754
2794
|
React.createElement(LabelRow, null,
|
|
2755
2795
|
React.createElement(Label$2, { htmlFor: htmlFor },
|
|
2756
2796
|
label,
|
|
2757
|
-
required ? React.createElement(Required, null, "*") : null
|
|
2797
|
+
required ? React.createElement(Required, null, "*") : null,
|
|
2798
|
+
tooltip ? React.createElement(Tooltip, __assign({}, tooltip)) : null),
|
|
2758
2799
|
action ? React.createElement(Action, { onClick: action.onClick }, action.label) : null),
|
|
2759
2800
|
description ? React.createElement(Description, null, description) : null,
|
|
2760
2801
|
children,
|
|
@@ -3043,12 +3084,12 @@ var Modal = function (_a) {
|
|
|
3043
3084
|
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;
|
|
3044
3085
|
|
|
3045
3086
|
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'; });
|
|
3046
|
-
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"])));
|
|
3087
|
+
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);
|
|
3047
3088
|
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"])));
|
|
3048
3089
|
var MoreMenu = function (_a) {
|
|
3049
3090
|
var maxHeight = _a.maxHeight, _b = _a.menuItems, menuItems = _b === void 0 ? [] : _b, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
|
|
3050
3091
|
return (React.createElement(Wrapper$6, __assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map(function (item) {
|
|
3051
|
-
return (React.createElement(MenuItem,
|
|
3092
|
+
return (React.createElement(MenuItem, { onClick: item.onClick },
|
|
3052
3093
|
item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
|
|
3053
3094
|
React.createElement(Title, null, item.label)));
|
|
3054
3095
|
})));
|
|
@@ -3220,5 +3261,5 @@ var ZeroState = function (_a) {
|
|
|
3220
3261
|
};
|
|
3221
3262
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
3222
3263
|
|
|
3223
|
-
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 };
|
|
3264
|
+
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, Tooltip, ZeroState };
|
|
3224
3265
|
//# sourceMappingURL=index.js.map
|