pixelize-design-library 1.1.23 → 1.1.25
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/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts +11 -0
- package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.d.ts +3 -1
- package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js +48 -5
- package/dist/Components/Dropdown/DropDown.js +1 -2
- package/dist/Components/KaTable/CustomHeader.js +21 -24
- package/dist/Components/KaTable/KaTable.js +1 -1
- package/dist/Components/KaTable/SelectionCell.js +1 -1
- package/dist/Components/KaTable/SelectionHeader.js +1 -1
- package/dist/Components/KaTable/ka-table.css +4 -15
- package/dist/Components/KaTable/useMergedChildComponents.js +1 -1
- package/dist/Components/NavigationBar/NavigationBar.d.ts +1 -1
- package/dist/Components/NavigationBar/NavigationBar.js +2 -2
- package/dist/Components/NavigationBar/NavigationBarProps.d.ts +1 -0
- package/dist/Components/NoteTextArea/NoteTextArea.d.ts +1 -1
- package/dist/Components/NoteTextArea/NoteTextArea.js +25 -12
- package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts +2 -0
- package/dist/Components/Select/Select.d.ts +1 -1
- package/dist/Components/Select/Select.js +2 -2
- package/dist/Components/Select/SelectProps.d.ts +1 -0
- package/dist/Components/Timeline/Timeline.js +6 -6
- package/dist/Pages/KaTableExample.js +4 -4
- package/dist/Pages/button.js +1 -1
- package/package.json +1 -1
|
@@ -16,4 +16,15 @@ export type ButtonGroupIconProps = {
|
|
|
16
16
|
buttonStyle?: React.CSSProperties;
|
|
17
17
|
onBlurLeftIcon?: () => void;
|
|
18
18
|
onBlurRightIcon?: () => void;
|
|
19
|
+
dropdownOptions?: {
|
|
20
|
+
label: string;
|
|
21
|
+
id: string | number;
|
|
22
|
+
}[];
|
|
23
|
+
onDropdownOptionClick?: (option: {
|
|
24
|
+
label: string;
|
|
25
|
+
id: string | number;
|
|
26
|
+
}) => void;
|
|
27
|
+
rightIconDropdown?: boolean;
|
|
28
|
+
menulistStyle?: React.CSSProperties;
|
|
29
|
+
menuItemStyle?: React.CSSProperties;
|
|
19
30
|
};
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ButtonGroupIconProps } from "./ButtonGoupIconProps";
|
|
3
|
-
export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon,
|
|
3
|
+
export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
|
|
4
|
+
onDropdownOptionClick, // New prop to handle option clicks
|
|
5
|
+
rightIconDropdown, menulistStyle, menuItemStyle }: ButtonGroupIconProps): React.JSX.Element;
|
|
@@ -1,14 +1,49 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
4
24
|
};
|
|
5
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
var react_1 =
|
|
26
|
+
var react_1 = __importStar(require("react"));
|
|
7
27
|
var react_2 = require("@chakra-ui/react");
|
|
8
28
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
9
29
|
function ButtonGroupIcon(_a) {
|
|
10
|
-
var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onLeftIconClick = _a.onLeftIconClick, onRightIconClick = _a.onRightIconClick, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onButtongroupClick = _a.onButtongroupClick, size = _a.size, variant = _a.variant, color = _a.color, buttonGroupStyle = _a.buttonGroupStyle, buttonGroupLeftIconStyle = _a.buttonGroupLeftIconStyle, buttonGroupRightIconStyle = _a.buttonGroupRightIconStyle, buttonStyle = _a.buttonStyle, onBlurLeftIcon = _a.onBlurLeftIcon, onBlurRightIcon = _a.onBlurRightIcon
|
|
30
|
+
var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onLeftIconClick = _a.onLeftIconClick, onRightIconClick = _a.onRightIconClick, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onButtongroupClick = _a.onButtongroupClick, size = _a.size, variant = _a.variant, color = _a.color, buttonGroupStyle = _a.buttonGroupStyle, buttonGroupLeftIconStyle = _a.buttonGroupLeftIconStyle, buttonGroupRightIconStyle = _a.buttonGroupRightIconStyle, buttonStyle = _a.buttonStyle, onBlurLeftIcon = _a.onBlurLeftIcon, onBlurRightIcon = _a.onBlurRightIcon, dropdownOptions = _a.dropdownOptions, // New prop for dropdown options
|
|
31
|
+
onDropdownOptionClick = _a.onDropdownOptionClick, // New prop to handle option clicks
|
|
32
|
+
rightIconDropdown = _a.rightIconDropdown, menulistStyle = _a.menulistStyle, menuItemStyle = _a.menuItemStyle;
|
|
11
33
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
34
|
+
var _b = (0, react_1.useState)(false), isDropdownOpen = _b[0], setIsDropdownOpen = _b[1];
|
|
35
|
+
var handleRightIconClick = function () {
|
|
36
|
+
setIsDropdownOpen(!isDropdownOpen);
|
|
37
|
+
if (onRightIconClick) {
|
|
38
|
+
onRightIconClick();
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
var handleMenuClick = function (option) { return function () {
|
|
42
|
+
setIsDropdownOpen(false);
|
|
43
|
+
if (onDropdownOptionClick) {
|
|
44
|
+
onDropdownOptionClick(option);
|
|
45
|
+
}
|
|
46
|
+
}; };
|
|
12
47
|
return (react_1.default.createElement(react_2.ButtonGroup, { size: size, isAttached: true, variant: variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle },
|
|
13
48
|
leftIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: {
|
|
14
49
|
backgroundColor: theme.colors.primary[500],
|
|
@@ -22,7 +57,15 @@ function ButtonGroupIcon(_a) {
|
|
|
22
57
|
backgroundColor: theme.colors.primary[400],
|
|
23
58
|
},
|
|
24
59
|
} }, buttonText),
|
|
25
|
-
rightIcon && (react_1.default.createElement(react_2.
|
|
60
|
+
rightIcon && rightIconDropdown ? (react_1.default.createElement(react_2.Menu, { isOpen: isDropdownOpen, onClose: function () { return setIsDropdownOpen(false); } },
|
|
61
|
+
react_1.default.createElement(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
|
|
62
|
+
backgroundColor: theme.colors.primary[500],
|
|
63
|
+
"&:hover": {
|
|
64
|
+
backgroundColor: theme.colors.primary[400],
|
|
65
|
+
},
|
|
66
|
+
} }),
|
|
67
|
+
react_1.default.createElement(react_2.Portal, null,
|
|
68
|
+
react_1.default.createElement(react_2.MenuList, { style: menulistStyle }, dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map(function (option, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: handleMenuClick(option), style: menuItemStyle }, option.label)); }))))) : rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
|
|
26
69
|
backgroundColor: theme.colors.primary[500],
|
|
27
70
|
"&:hover": {
|
|
28
71
|
backgroundColor: theme.colors.primary[400],
|
|
@@ -68,9 +68,8 @@ var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
68
68
|
ButtonText));
|
|
69
69
|
var TextToggle = (react_1.default.createElement(react_2.Flex, { onClick: onToggle, align: "center", style: dropDownButtonStyle, cursor: "pointer" },
|
|
70
70
|
DropdownIcon,
|
|
71
|
-
"
|
|
71
|
+
" ",
|
|
72
72
|
text,
|
|
73
|
-
" \u00A0",
|
|
74
73
|
isVisibleIconShow && react_1.default.createElement(react_2.Icon, { as: fi_1.FiChevronDown })));
|
|
75
74
|
return dropdownType === "button" ? ButtonToggle : TextToggle;
|
|
76
75
|
};
|
|
@@ -27,7 +27,6 @@ var react_1 = __importStar(require("react"));
|
|
|
27
27
|
var react_2 = require("@chakra-ui/react");
|
|
28
28
|
var bs_1 = require("react-icons/bs");
|
|
29
29
|
var fa_1 = require("react-icons/fa");
|
|
30
|
-
var fi_1 = require("react-icons/fi");
|
|
31
30
|
var CustomHeader = function (_a) {
|
|
32
31
|
var column = _a.column, onSortChange = _a.onSortChange, onMenuItemClick = _a.onMenuItemClick, menuItems = _a.menuItems, columnVisibility = _a.columnVisibility;
|
|
33
32
|
// console.log(columnVisibility, "columnVisibility");
|
|
@@ -79,29 +78,27 @@ var CustomHeader = function (_a) {
|
|
|
79
78
|
display: "flex",
|
|
80
79
|
justifyContent: "space-between",
|
|
81
80
|
alignItems: "center",
|
|
82
|
-
} },
|
|
83
|
-
react_1.default.createElement(
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
return handleMenuItemClick(subItem.action);
|
|
104
|
-
} }, subItem.label)); })))))); }))))))),
|
|
81
|
+
} }, menuItems && (react_1.default.createElement(react_2.Menu, null,
|
|
82
|
+
isOpen && (react_1.default.createElement(react_2.MenuButton, { ref: filterButtonRef, as: react_2.IconButton, "aria-label": "More options", icon: react_1.default.createElement(bs_1.BsThreeDots, null), size: "sm", variant: "ghost", sx: {
|
|
83
|
+
_hover: {
|
|
84
|
+
background: "none",
|
|
85
|
+
},
|
|
86
|
+
_active: {
|
|
87
|
+
background: "none",
|
|
88
|
+
},
|
|
89
|
+
} })),
|
|
90
|
+
react_1.default.createElement(react_2.Portal, null,
|
|
91
|
+
react_1.default.createElement(react_2.MenuList, { sx: {
|
|
92
|
+
boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)",
|
|
93
|
+
borderRadius: "8px",
|
|
94
|
+
padding: "8px",
|
|
95
|
+
backgroundColor: "white",
|
|
96
|
+
}, onMouseLeave: onClose }, menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index },
|
|
97
|
+
item.submenu ? (react_1.default.createElement(react_2.MenuItem, { closeOnSelect: false, onClick: handleSubmenuToggle }, item.label)) : (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleMenuItemClick(item.action); } }, item.label)),
|
|
98
|
+
isSubmenuOpen && item.submenu && submenuPosition && (react_1.default.createElement(react_2.Box, { position: "absolute", top: submenuPosition.top, left: submenuPosition.left, zIndex: 1, boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)", borderRadius: "8px", backgroundColor: "white", padding: "8px", width: "200px" },
|
|
99
|
+
react_1.default.createElement(react_2.MenuGroup, { onMouseLeave: onClose }, item.submenu.map(function (subItem, subIndex) { return (react_1.default.createElement(react_2.MenuItem, { key: subIndex, closeOnSelect: true, onClick: function () {
|
|
100
|
+
return handleMenuItemClick(subItem.action);
|
|
101
|
+
} }, subItem.label)); })))))); }))))))),
|
|
105
102
|
react_1.default.createElement(react_2.Box, { sx: { position: "absolute", right: 20, top: 0 } }, isOpen && (react_1.default.createElement(react_2.Flex, { alignItems: "center" },
|
|
106
103
|
react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", backgroundColor: "white", padding: sortState === "asc" ? "1px" : "2px", borderRadius: "10px", flexDirection: "column", width: "20px", height: "20px", onClick: handleSortClick, cursor: "pointer", boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)", transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
|
|
107
104
|
react_1.default.createElement(react_2.Box, { transition: "opacity 0.2s ease-in-out", opacity: sortState === "none" ? 1 : 0, position: "absolute" },
|
|
@@ -46,7 +46,7 @@ require("./ka-table.css");
|
|
|
46
46
|
var useMergedChildComponents_1 = __importDefault(require("./useMergedChildComponents"));
|
|
47
47
|
var selectionCellColumn = {
|
|
48
48
|
key: "select-cell",
|
|
49
|
-
width:
|
|
49
|
+
width: 50,
|
|
50
50
|
columnFreeze: true,
|
|
51
51
|
customHeader: false,
|
|
52
52
|
className: "select-cell",
|
|
@@ -33,6 +33,6 @@ var SelectionCell = function (_a) {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
|
-
return react_1.default.createElement("input", { type: "checkbox", checked: selected, onChange: onChangeHandle });
|
|
36
|
+
return react_1.default.createElement("input", { type: "checkbox", checked: selected, onChange: onChangeHandle, style: { marginLeft: "37%" } });
|
|
37
37
|
};
|
|
38
38
|
exports.default = react_1.default.memo(SelectionCell);
|
|
@@ -4,22 +4,10 @@
|
|
|
4
4
|
border-color: #2caa3d;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
border: 1px solid #d0d4e4;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.ka-thead-cell,
|
|
13
|
-
.ka-cell {
|
|
14
|
-
border-right: 1px solid #d0d4e4;
|
|
15
|
-
} */
|
|
16
|
-
|
|
17
|
-
.ka-thead-cell {
|
|
18
|
-
text-align: center;
|
|
19
|
-
padding: 7px 10px;
|
|
7
|
+
.ka-thead-cell {
|
|
8
|
+
padding: 7px 7px;
|
|
20
9
|
}
|
|
21
10
|
.ka-cell {
|
|
22
|
-
text-align: center;
|
|
23
11
|
padding: 7px 0px;
|
|
24
12
|
}
|
|
25
13
|
|
|
@@ -32,6 +20,7 @@
|
|
|
32
20
|
overflow: hidden;
|
|
33
21
|
text-overflow: ellipsis;
|
|
34
22
|
white-space: nowrap;
|
|
23
|
+
padding-left:5%;
|
|
35
24
|
}
|
|
36
25
|
.ka-row {
|
|
37
26
|
box-sizing: unset;
|
|
@@ -41,4 +30,4 @@
|
|
|
41
30
|
.ka-table-wrapper {
|
|
42
31
|
border-bottom: 2px solid #d8d9db;
|
|
43
32
|
border-right: 2px solid #d8d9db;
|
|
44
|
-
}
|
|
33
|
+
} /**/
|
|
@@ -133,7 +133,7 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
|
|
|
133
133
|
if (props.column.columnFreeze) {
|
|
134
134
|
var stickyLeft = getPreviousColumnWidth(columns, props.column.key);
|
|
135
135
|
return {
|
|
136
|
-
style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: "#d9d9db"
|
|
136
|
+
style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: "#d9d9db" }),
|
|
137
137
|
};
|
|
138
138
|
}
|
|
139
139
|
},
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { NavbarProps } from "./NavigationBarProps";
|
|
3
|
-
export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, }: NavbarProps): React.JSX.Element;
|
|
3
|
+
export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText }: NavbarProps): React.JSX.Element;
|
|
@@ -7,11 +7,11 @@ var react_1 = __importDefault(require("react"));
|
|
|
7
7
|
var react_2 = require("@chakra-ui/react");
|
|
8
8
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
9
9
|
function NavBar(_a) {
|
|
10
|
-
var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText;
|
|
10
|
+
var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText, navigationBarText = _a.navigationBarText;
|
|
11
11
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
12
12
|
return (react_1.default.createElement(react_2.Box, { bg: theme.colors.backgroundColor.light, px: 4, boxShadow: theme.shadows.sm },
|
|
13
13
|
react_1.default.createElement(react_2.Flex, { h: 16, alignItems: "center", justifyContent: "space-between" },
|
|
14
|
-
react_1.default.createElement(react_2.Box, null,
|
|
14
|
+
react_1.default.createElement(react_2.Box, null, navigationBarText),
|
|
15
15
|
react_1.default.createElement(react_2.Flex, { alignItems: "center" },
|
|
16
16
|
react_1.default.createElement(react_2.Stack, { direction: "row", spacing: 7 },
|
|
17
17
|
react_1.default.createElement(react_2.Menu, null,
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { NoteTextAreaProps } from "./NoteTextAreaProps";
|
|
3
|
-
export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, }: NoteTextAreaProps): React.JSX.Element;
|
|
3
|
+
export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, }: NoteTextAreaProps): React.JSX.Element;
|
|
@@ -87,15 +87,17 @@ var Button = styled_1.default.button(templateObject_8 || (templateObject_8 = __m
|
|
|
87
87
|
var CancelButton = styled_1.default.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border: none;\n color: #5e5c5c;\n padding: 3px 15px;\n text-align: center;\n text-decoration: none;\n background: white;\n font-size: 1rem;\n margin-right: 5px;\n border-radius: 5px;\n"], ["\n border: none;\n color: #5e5c5c;\n padding: 3px 15px;\n text-align: center;\n text-decoration: none;\n background: white;\n font-size: 1rem;\n margin-right: 5px;\n border-radius: 5px;\n"])));
|
|
88
88
|
var FileViewer = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 300px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 300px;\n"])));
|
|
89
89
|
var FileEdit = (0, styled_1.default)(fi_1.FiX)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n cursor: pointer;\n color: #ff0000;\n"], ["\n cursor: pointer;\n color: #ff0000;\n"])));
|
|
90
|
+
var ErrorText = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n color: #ff0000;\n font-size: 0.8rem;\n margin-top: 8px;\n"], ["\n color: #ff0000;\n font-size: 0.8rem;\n margin-top: 8px;\n"])));
|
|
90
91
|
function NoteTextArea(_a) {
|
|
91
|
-
var _b = _a.width, width = _b === void 0 ? "100%" : _b, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _c = _a.isEditable, isEditable = _c === void 0 ? false : _c, saveButtonLoading = _a.saveButtonLoading;
|
|
92
|
+
var _b = _a.width, width = _b === void 0 ? "100%" : _b, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _c = _a.isEditable, isEditable = _c === void 0 ? false : _c, saveButtonLoading = _a.saveButtonLoading, _d = _a.maxFileSize, maxFileSize = _d === void 0 ? 1 * 1024 * 1024 : _d, _e = _a.maxFilesSizeError, maxFilesSizeError = _e === void 0 ? "Some files are too large. Maximum allowed size is" : _e;
|
|
92
93
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
93
94
|
var noteAreaRef = (0, react_1.useRef)(null);
|
|
94
|
-
var
|
|
95
|
-
var
|
|
96
|
-
var
|
|
97
|
-
var
|
|
98
|
-
var
|
|
95
|
+
var _f = (0, react_1.useState)(false), isActive = _f[0], setIsActive = _f[1];
|
|
96
|
+
var _g = (0, react_1.useState)(""), noteValue = _g[0], setNoteValue = _g[1];
|
|
97
|
+
var _h = (0, react_1.useState)(""), titleValue = _h[0], setTitleValue = _h[1];
|
|
98
|
+
var _j = (0, react_1.useState)(false), titleShow = _j[0], setTitleShow = _j[1];
|
|
99
|
+
var _k = (0, react_1.useState)([]), files = _k[0], setFiles = _k[1];
|
|
100
|
+
var _l = (0, react_1.useState)(""), fileError = _l[0], setFileError = _l[1];
|
|
99
101
|
(0, react_1.useEffect)(function () {
|
|
100
102
|
if (isEditable) {
|
|
101
103
|
setIsActive(true);
|
|
@@ -145,6 +147,7 @@ function NoteTextArea(_a) {
|
|
|
145
147
|
setTitleShow(false);
|
|
146
148
|
setFiles([]);
|
|
147
149
|
}
|
|
150
|
+
setFileError("");
|
|
148
151
|
};
|
|
149
152
|
var handleNoteChange = function (event) {
|
|
150
153
|
setNoteValue(event.target.value);
|
|
@@ -200,12 +203,20 @@ function NoteTextArea(_a) {
|
|
|
200
203
|
react_1.default.createElement("div", { style: { display: "flex", alignItems: "center" } },
|
|
201
204
|
react_1.default.createElement(FileUploadLabel, { htmlFor: "file-upload" },
|
|
202
205
|
react_1.default.createElement(fi_1.FiPaperclip, null),
|
|
203
|
-
react_1.default.createElement("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: function (
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
206
|
+
react_1.default.createElement("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: function (e) {
|
|
207
|
+
var newFiles = Array.from(e.target.files || []);
|
|
208
|
+
var validFiles = newFiles.filter(function (file) { return file.size <= maxFileSize; });
|
|
209
|
+
var invalidFiles = newFiles.filter(function (file) { return file.size > maxFileSize; });
|
|
210
|
+
if (invalidFiles.length > 0) {
|
|
211
|
+
setFileError("".concat(maxFilesSizeError, " ").concat(formatBytes(maxFileSize), "."));
|
|
207
212
|
}
|
|
208
|
-
|
|
213
|
+
else {
|
|
214
|
+
setFileError("");
|
|
215
|
+
}
|
|
216
|
+
if (validFiles.length > 0) {
|
|
217
|
+
setFiles(function (prevFiles) { return __spreadArray(__spreadArray([], prevFiles, true), validFiles, true); });
|
|
218
|
+
}
|
|
219
|
+
}, multiple: true })),
|
|
209
220
|
!titleShow && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
210
221
|
react_1.default.createElement("div", { style: {
|
|
211
222
|
height: "15px",
|
|
@@ -224,6 +235,8 @@ function NoteTextArea(_a) {
|
|
|
224
235
|
saveButtonLoading && (react_1.default.createElement("span", { style: { marginRight: "6px" } },
|
|
225
236
|
react_1.default.createElement(react_2.Spinner, { thickness: "2px", speed: "0.75s", emptyColor: "gray.200", color: "blue.500", size: "xs" }))),
|
|
226
237
|
"Save"))),
|
|
238
|
+
fileError && react_1.default.createElement(ErrorText, null, fileError),
|
|
239
|
+
" ",
|
|
227
240
|
files.length > 0 && (react_1.default.createElement("div", null, files.map(function (item, index) { return (react_1.default.createElement(FileViewer, { key: index },
|
|
228
241
|
react_1.default.createElement(react_1.default.Fragment, null,
|
|
229
242
|
react_1.default.createElement("span", null, shortenFileName(item.name)),
|
|
@@ -233,4 +246,4 @@ function NoteTextArea(_a) {
|
|
|
233
246
|
} }))); }))))))));
|
|
234
247
|
}
|
|
235
248
|
exports.default = NoteTextArea;
|
|
236
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
249
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { chakraSelectProps } from "./SelectProps";
|
|
3
|
-
export default function Select({ placeholder, size, variant, icon, bg, borderColor, color, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, formControlStyle, isInformation, informationMessage, }: chakraSelectProps): React.JSX.Element;
|
|
3
|
+
export default function Select({ placeholder, size, variant, icon, bg, borderColor, color, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, formControlStyle, isInformation, informationMessage, selectStyle }: chakraSelectProps): React.JSX.Element;
|
|
@@ -32,7 +32,7 @@ var FormLabel_1 = require("../Common/FormLabel");
|
|
|
32
32
|
var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
|
|
33
33
|
var HelperText_1 = __importDefault(require("../Common/HelperText"));
|
|
34
34
|
function Select(_a) {
|
|
35
|
-
var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "sm" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, bg = _a.bg, borderColor = _a.borderColor, color = _a.color, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.value, value = _f === void 0 ? "" : _f, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _g = _a.options, options = _g === void 0 ? [] : _g, _h = _a.width, width = _h === void 0 ? 500 : _h, formControlStyle = _a.formControlStyle, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage;
|
|
35
|
+
var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "sm" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, bg = _a.bg, borderColor = _a.borderColor, color = _a.color, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.value, value = _f === void 0 ? "" : _f, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _g = _a.options, options = _g === void 0 ? [] : _g, _h = _a.width, width = _h === void 0 ? 500 : _h, formControlStyle = _a.formControlStyle, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage, selectStyle = _a.selectStyle;
|
|
36
36
|
var getOptionsList = (0, react_1.useCallback)(function () {
|
|
37
37
|
if (!options.length)
|
|
38
38
|
return react_1.default.createElement("option", { value: "" }, "No Options");
|
|
@@ -47,7 +47,7 @@ function Select(_a) {
|
|
|
47
47
|
};
|
|
48
48
|
return (react_1.default.createElement(react_2.FormControl, { isInvalid: error, style: formControlStyle, width: width },
|
|
49
49
|
label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
|
|
50
|
-
react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: "flushed", icon: icon, bg: bg, borderColor: borderColor, color: color, isInvalid: error, value: value, onChange: handleOnChange, width: width, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor }, getOptionsList()),
|
|
50
|
+
react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: "flushed", icon: icon, bg: bg, borderColor: borderColor, color: color, isInvalid: error, value: value, onChange: handleOnChange, width: width, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle }, getOptionsList()),
|
|
51
51
|
error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
|
|
52
52
|
helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
|
|
53
53
|
}
|
|
@@ -11,6 +11,7 @@ export type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "vari
|
|
|
11
11
|
formControlStyle?: React.CSSProperties;
|
|
12
12
|
isInformation?: boolean;
|
|
13
13
|
informationMessage?: string;
|
|
14
|
+
selectStyle?: React.CSSProperties;
|
|
14
15
|
};
|
|
15
16
|
export type OptionProp = {
|
|
16
17
|
id: string | number;
|
|
@@ -11,9 +11,9 @@ var react_1 = __importDefault(require("react"));
|
|
|
11
11
|
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
12
12
|
var fa_1 = require("react-icons/fa");
|
|
13
13
|
var react_2 = require("@chakra-ui/react");
|
|
14
|
-
var TimelineContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n"], ["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n"])));
|
|
15
|
-
var Line = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n"], ["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n"])));
|
|
16
|
-
var EventContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n"], ["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n"])), function (_a) {
|
|
14
|
+
var TimelineContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n @media (max-width: 768px) {\n padding: 0px 16px;\n max-width: 100%;\n }\n"], ["\n position: relative;\n padding: 0px 24px;\n margin: 0 auto;\n width: 100%;\n max-width: 800px;\n @media (max-width: 768px) {\n padding: 0px 16px;\n max-width: 100%;\n }\n"])));
|
|
15
|
+
var Line = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n @media (max-width: 768px) {\n left: 25px; /* Move the line towards the left */\n }\n"], ["\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 2px;\n background-color: #d2d9e0;\n transform: translateX(-50%);\n @media (max-width: 768px) {\n left: 25px; /* Move the line towards the left */\n }\n"])));
|
|
16
|
+
var EventContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n @media (max-width: 768px) {\n flex-direction: column;\n text-align: left;\n align-items: flex-start;\n }\n"], ["\n display: flex;\n justify-content: ", ";\n width: 100%;\n // padding: 1rem 0 1rem 0;\n box-sizing: border-box;\n position: relative;\n margin-bottom: 24px;\n align-items: center; /* Center alignment for dot and event content */\n text-align: ", ";\n @media (max-width: 768px) {\n flex-direction: column;\n text-align: left;\n align-items: flex-start;\n }\n"])), function (_a) {
|
|
17
17
|
var isLeft = _a.isLeft;
|
|
18
18
|
return (isLeft ? "flex-end" : "flex-start");
|
|
19
19
|
}, function (_a) {
|
|
@@ -21,7 +21,7 @@ var EventContainer = styled_1.default.div(templateObject_3 || (templateObject_3
|
|
|
21
21
|
return (isLeft ? "left" : "right");
|
|
22
22
|
});
|
|
23
23
|
var Event = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n // background: white;\n // padding: 16px;\n // border: 1px solid #007bff;\n // border-radius: 8px;\n // width: 40%;\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer; /* Indicates that the event is clickable */\n"], ["\n // background: white;\n // padding: 16px;\n // border: 1px solid #007bff;\n // border-radius: 8px;\n // width: 40%;\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer; /* Indicates that the event is clickable */\n"])));
|
|
24
|
-
var Dot = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n width: 30px;\n height: 30px;\n background-color: #f4f7ff;\n border-radius: 50%;\n transform: translateX(-50%);\n padding: 6px;\n border: 1px solid #d2d9e0;\n"], ["\n position: absolute;\n left: 50%;\n width: 30px;\n height: 30px;\n background-color: #f4f7ff;\n border-radius: 50%;\n transform: translateX(-50%);\n padding: 6px;\n border: 1px solid #d2d9e0;\n"])));
|
|
24
|
+
var Dot = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n width: 30px;\n height: 30px;\n background-color: #f4f7ff;\n border-radius: 50%;\n transform: translateX(-50%);\n padding: 6px;\n border: 1px solid #d2d9e0;\n @media (max-width: 768px) {\n left: 20px; /* Move dot closer to the left */\n transform: translateX(0); /* Remove horizontal centering */\n }\n"], ["\n position: absolute;\n left: 50%;\n width: 30px;\n height: 30px;\n background-color: #f4f7ff;\n border-radius: 50%;\n transform: translateX(-50%);\n padding: 6px;\n border: 1px solid #d2d9e0;\n @media (max-width: 768px) {\n left: 20px; /* Move dot closer to the left */\n transform: translateX(0); /* Remove horizontal centering */\n }\n"])));
|
|
25
25
|
// const Arrow = styled.div<{ isLeft: boolean }>`
|
|
26
26
|
// position: absolute;
|
|
27
27
|
// left: ${({ isLeft }) => (isLeft ? "-10px " : "100%")};
|
|
@@ -43,11 +43,11 @@ var EventTitle = styled_1.default.h3(templateObject_7 || (templateObject_7 = __m
|
|
|
43
43
|
// margin: 0;
|
|
44
44
|
// `;
|
|
45
45
|
var EventDate = styled_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n margin-top: 8px;\n color: #6c757d;\n"], ["\n display: block;\n margin-top: 8px;\n color: #6c757d;\n"])));
|
|
46
|
-
var EventTime = styled_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n left: ", ";\n position: absolute;\n color: #6c757d;\n"], ["\n left: ", ";\n position: absolute;\n color: #6c757d;\n"])), function (_a) {
|
|
46
|
+
var EventTime = styled_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n left: ", ";\n position: absolute;\n color: #6c757d;\n @media (max-width: 768px) {\n position: relative;\n left: auto;\n margin-left: 40px;\n }\n"], ["\n left: ", ";\n position: absolute;\n color: #6c757d;\n @media (max-width: 768px) {\n position: relative;\n left: auto;\n margin-left: 40px;\n }\n"])), function (_a) {
|
|
47
47
|
var isLeft = _a.isLeft;
|
|
48
48
|
return (isLeft ? "38% " : "53%");
|
|
49
49
|
});
|
|
50
|
-
var EventGroupDate = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 400;\n color: #464f62;\n box-sizing: border-box;\n width: 180px;\n padding: 5px 25px;\n text-align: center;\n background-color: #f4f7ff;\n border: 1px solid #d2d9e0;\n border-radius: 5px;\n margin: 0 auto; /* Center horizontally */\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n"], ["\n font-size: 1rem;\n font-weight: 400;\n color: #464f62;\n box-sizing: border-box;\n width: 180px;\n padding: 5px 25px;\n text-align: center;\n background-color: #f4f7ff;\n border: 1px solid #d2d9e0;\n border-radius: 5px;\n margin: 0 auto; /* Center horizontally */\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n"])));
|
|
50
|
+
var EventGroupDate = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 400;\n color: #464f62;\n box-sizing: border-box;\n width: 180px;\n padding: 5px 25px;\n text-align: center;\n background-color: #f4f7ff;\n border: 1px solid #d2d9e0;\n border-radius: 5px;\n margin: 0 auto; /* Center horizontally */\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n @media (max-width: 768px) {\n width: auto;\n padding: 5px 10px;\n }\n"], ["\n font-size: 1rem;\n font-weight: 400;\n color: #464f62;\n box-sizing: border-box;\n width: 180px;\n padding: 5px 25px;\n text-align: center;\n background-color: #f4f7ff;\n border: 1px solid #d2d9e0;\n border-radius: 5px;\n margin: 0 auto; /* Center horizontally */\n display: flex;\n align-items: center; /* Center vertically */\n justify-content: center; /* Center horizontally */\n @media (max-width: 768px) {\n width: auto;\n padding: 5px 10px;\n }\n"])));
|
|
51
51
|
var EventGroupSeparator = styled_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
52
52
|
var EventGroupHeader = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n position: relative;\n margin-bottom: 24px;\n"], ["\n position: relative;\n margin-bottom: 24px;\n"])));
|
|
53
53
|
// const FlexContainer = styled.div`
|
|
@@ -60,9 +60,9 @@ var dataArray = Array(5)
|
|
|
60
60
|
.map(function (_, index) { return ({
|
|
61
61
|
column1: index % 2 === 0,
|
|
62
62
|
column2: "column:2 row:".concat(index + 1),
|
|
63
|
-
column3: index +
|
|
64
|
-
column4: index +
|
|
65
|
-
column5: index +
|
|
63
|
+
column3: "column:3 row:".concat(index + 1),
|
|
64
|
+
column4: "column:4 row:".concat(index + 1),
|
|
65
|
+
column5: "column:5 row:".concat(index + 1),
|
|
66
66
|
column6: index + 20,
|
|
67
67
|
column7: index + 25,
|
|
68
68
|
column8: index + 30,
|
|
@@ -80,7 +80,7 @@ var columns = [
|
|
|
80
80
|
key: "column1",
|
|
81
81
|
title: "Column 1",
|
|
82
82
|
dataType: DataType.Boolean,
|
|
83
|
-
width:
|
|
83
|
+
width: 100,
|
|
84
84
|
columnFreeze: true,
|
|
85
85
|
customHeader: false,
|
|
86
86
|
},
|
package/dist/Pages/button.js
CHANGED
|
@@ -9,7 +9,7 @@ var fi_1 = require("react-icons/fi");
|
|
|
9
9
|
var Button_1 = __importDefault(require("../Components/Button/Button"));
|
|
10
10
|
var ButtonPage = function () {
|
|
11
11
|
return (react_1.default.createElement("div", null,
|
|
12
|
-
react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(fi_1.FiHome, null), size: "md", variant: "solid" }),
|
|
12
|
+
react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(fi_1.FiHome, null), leftIcon: react_1.default.createElement(fi_1.FiHome, null), size: "md", variant: "solid" }),
|
|
13
13
|
react_1.default.createElement("br", null),
|
|
14
14
|
react_1.default.createElement("br", null),
|
|
15
15
|
react_1.default.createElement("br", null),
|