@symply.io/basic-components 1.0.6 → 1.0.8-beta.1

package/FileUploader/index.js

@@ -28,35 +28,36 @@ import Typography from "@mui/material/Typography";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import CircularProgress from "@mui/material/CircularProgress";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import AlertDialog from "../AlertDialog";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
 function FileUploader(props) {
-    var _a = props.height, height = _a === void 0 ? "150px" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "430px" : _b, loading = props.loading, disabled = props.disabled, dropFileText = props.dropFileText, chooseFileText = props.chooseFileText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["height", "maxWidth", "loading", "disabled", "dropFileText", "chooseFileText", "primaryColor", "secondaryColor"]);
+    var _a = props.height, height = _a === void 0 ? "150px" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "430px" : _b, _c = props.loading, loading = _c === void 0 ? false : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, dropFileText = props.dropFileText, chooseFileText = props.chooseFileText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["height", "maxWidth", "loading", "disabled", "dropFileText", "chooseFileText", "primaryColor", "secondaryColor"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var lessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
-    var _c = useInteractions(__assign(__assign({}, rest), { disabled: disabled })), alertArgs = _c.alertArgs, rootProps = _c.rootProps, onCloseAlert = _c.onCloseAlert, onSelectFile = _c.onSelectFile, getRootProps = _c.getRootProps, getInputProps = _c.getInputProps;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: lessThanSm ? (_jsxs("div", __assign({}, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Link, __assign({ color: disabled ? theme.palette.grey[400] : theme.palette.primary.main, sx: {
-                        fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-                        cursor: disabled ? "not-allowed" : "pointer"
-                    } }, { children: loading ? (_jsx(CircularProgress, { sx: { height: "25px", width: "25px" } })) : (chooseFileText || "Choose a file") }))] }))) : (_jsx(Grid, __assign({ container: true, direction: "column", justifyContent: "center", alignItems: "center", sx: {
-                border: "1px dashed #0099a7",
-                borderRadius: "5px",
-                outline: "none",
-                backgroundColor: "#F2F2F2",
-                maxWidth: maxWidth,
-                height: height,
-                width: "100%"
-            } }, rootProps, { children: loading ? (_jsx(CircularProgress, { style: { height: "30px", width: "30px" } })) : (_jsxs("div", { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Typography, __assign({ component: "p", variant: "caption", sx: {
-                            fontSize: ".875rem",
-                            textAlign: "center"
-                        } }, { children: dropFileText || "Drop files here" })), _jsx(Button, __assign({ variant: "contained", onClick: onSelectFile, sx: {
-                            backgroundColor: "white !important",
-                            color: disabled
-                                ? theme.palette.grey[400]
-                                : theme.palette.primary.main,
+    var _e = useInteractions(__assign(__assign({}, rest), { disabled: disabled })), alertArgs = _e.alertArgs, rootProps = _e.rootProps, onCloseAlert = _e.onCloseAlert, onSelectFile = _e.onSelectFile, getRootProps = _e.getRootProps, getInputProps = _e.getInputProps;
+    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [lessThanSm ? (_jsxs("div", __assign({}, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Link, __assign({ color: disabled ? theme.palette.grey[400] : theme.palette.primary.main, sx: {
                             fontFamily: "Roboto, Helvetica, Arial, sans-serif",
                             cursor: disabled ? "not-allowed" : "pointer"
-                        }, disabled: disabled }, { children: _jsx(Typography, { children: chooseFileText || "Choose a file" }) }))] })) }))) })));
+                        } }, { children: loading ? (_jsx(CircularProgress, { sx: { height: "25px", width: "25px" } })) : (chooseFileText || "Choose a file") }))] }))) : (_jsx(Grid, __assign({ container: true, direction: "column", justifyContent: "center", alignItems: "center", sx: {
+                    border: "1px dashed #0099a7",
+                    borderRadius: "5px",
+                    outline: "none",
+                    backgroundColor: "#F2F2F2",
+                    maxWidth: maxWidth,
+                    height: height,
+                    width: "100%"
+                } }, rootProps, { children: loading ? (_jsx(CircularProgress, { style: { height: "30px", width: "30px" } })) : (_jsxs("div", { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Typography, __assign({ component: "p", variant: "caption", sx: {
+                                fontSize: ".875rem",
+                                textAlign: "center"
+                            } }, { children: dropFileText || "Drop files here" })), _jsx(Button, __assign({ variant: "contained", onClick: onSelectFile, sx: {
+                                backgroundColor: "white !important",
+                                color: disabled
+                                    ? theme.palette.grey[400]
+                                    : theme.palette.primary.main,
+                                fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+                                cursor: disabled ? "not-allowed" : "pointer"
+                            }, disabled: disabled }, { children: _jsx(Typography, { children: chooseFileText || "Choose a file" }) }))] })) }))), _jsx(AlertDialog, __assign({ open: alertArgs.open, primaryColor: primaryColor, secondaryColor: secondaryColor, onClose: onCloseAlert }, { children: alertArgs.message }))] })));
 }
 export default FileUploader;
 export * from "./types";

package/FileUploader/useInteractions.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { useState, useCallback, useMemo } from "react";
 import { useDropzone } from "react-dropzone";
 function useInteractions(props) {
-    var multiple = props.multiple, disabled = props.disabled, maxFiles = props.maxFiles, _a = props.maxSize, maxSize = _a === void 0 ? 1024 * 1024 * 5 : _a, accept = props.accept, onUpload = props.onUpload, sizeExceededErrorText = props.sizeExceededErrorText, wrongFileTypeErrorText = props.wrongFileTypeErrorText;
+    var _a = props.multiple, multiple = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, maxFiles = props.maxFiles, _c = props.maxSize, maxSize = _c === void 0 ? 1024 * 1024 * 5 : _c, accept = props.accept, onUpload = props.onUpload, sizeExceededErrorText = props.sizeExceededErrorText, wrongFileTypeErrorText = props.wrongFileTypeErrorText;
     var ERROR_TYPE_MSG = useMemo(function () {
         return wrongFileTypeErrorText ||
             "The type of the file you uploaded is not accepted, please reupload!";
@@ -21,7 +21,7 @@ function useInteractions(props) {
         return sizeExceededErrorText ||
             "Your file exceed the max size of ".concat(maxSize / 1024 / 1024, "MB.");
     }, [sizeExceededErrorText, maxSize]);
-    var _b = useState({ open: false, message: "" }), alertArgs = _b[0], setAlertArgs = _b[1];
+    var _d = useState({ open: false, message: "" }), alertArgs = _d[0], setAlertArgs = _d[1];
     var onOpenAlert = useCallback(function (message) {
         setAlertArgs(function (args) { return (__assign(__assign({}, args), { open: true, message: message })); });
     }, []);
@@ -51,14 +51,14 @@ function useInteractions(props) {
             onUpload(acceptedFiles);
         }
     }, [accept, onUpload]);
-    var _c = useDropzone({
+    var _e = useDropzone({
         onDrop: onDrop,
         accept: accept,
         multiple: multiple,
         disabled: disabled,
         maxSize: maxSize,
         maxFiles: maxFiles
-    }), getRootProps = _c.getRootProps, getInputProps = _c.getInputProps, onSelectFile = _c.open;
+    }), getRootProps = _e.getRootProps, getInputProps = _e.getInputProps, onSelectFile = _e.open;
     var rootProps = getRootProps({
         onClick: function (e) { return e.stopPropagation(); },
         onKeyDown: function (e) {

package/README.md

@@ -215,7 +215,7 @@ import { BasicTable, useTable } from '@symply.io/basic-components';
 import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable'; 
 ```
 
-<h5>Column Props (IColumn)</h5>
+<h5>Column Props (ColumnBaseProps)</h5>
 
 | Name        | Type                        | Default | Required | Description                                           |
 | ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
@@ -234,31 +234,31 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
 
 | Name          | Type                       | Default | Required | Description                                 |
 | ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
-| columns       | Array\<IColumn\>           |         | true     | table columns                               |
+| columns       | Array\<ColumnBaseProps\>   |         | true     | table columns                               |
 | data          | Array<{ [name]: unknown }> |         | true     | table data/rows                             |
 | disableSortBy | bool                       |         | false    | If true, the whole table can't be sortable. |
 | initialState  | { sortBy?: SortByProps }   |         | false    | Set the initial states                      |
-| onRowClick    | func                       |         | false    | The function for row clicking.              |
 | onSort        | func                       |         | false    | The function for sorting rows.              |
 
 <h5>Hook Returns</h5>
 
 | Name    | Type                 | Description               |
 | ------- | -------------------- | ------------------------- |
-| headers | Array\<IHeader\>     | The cells for the header. |
-| columns | Array\<IBodyColumn\> | The cells for the body.   |
-| footers | Array\<IFooter>      | The cells for the footer. |
-| rows    | Array<IRow\>         | The rows for the table.   |
+| headers | Array\<HeaderProps\> | The cells for the header. |
+| columns | Array\<ColumnProps\> | The cells for the body.   |
+| footers | Array\<FooterProps>  | The cells for the footer. |
+| rows    | Array<RowProps\>     | The rows for the table.   |
 
 <h5>Component Props</h5>
 
 | Name       | Type                 | Default    | Required | Description                               |
 | ---------- | -------------------- | ---------- | -------- | ----------------------------------------- |
-| headers    | Array\<IHeader\>     |            | true     | The cells for the header. (from the hook) |
-| columns    | Array\<IBodyColumn\> |            | true     | The cells for the body. (from the hook)   |
-| footers    | Array\<IFooter>      | []         | false    | The cells for the footer. (from the hook) |
+| headers    | Array\<HeaderProps\> |            | true     | The cells for the header. (from the hook) |
+| columns    | Array\<ColumnProps\> |            | true     | The cells for the body. (from the hook)   |
+| footers    | Array\<FooterProps>  | []         | false    | The cells for the footer. (from the hook) |
+| onRowClick | func                 |            | false    | The function for row clicking.            |
 | noDataText | string               | 'No Data!' | false    | The text when no data rendered.           |
-| rows       | Array<IRow\>         |            | true     | The rows for the table. (from the hook)   |
+| rows       | Array<RowProps\>     |            | true     | The rows for the table. (from the hook)   |
 
 
 

package/Sidebar/SidebarItem.js

@@ -18,45 +18,44 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import LockIcon from "@mui/icons-material/LockRounded";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
 function SidebarItem(props) {
-    var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onClick = props.onClick;
-    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(ListItem, __assign({ button: true, onClick: onClick, disabled: lock, sx: {
-                paddingLeft: isSub ? theme.spacing(4) : undefined,
-                display: "flex",
-                width: "100%",
-                "&:hover": {
-                    backgroundColor: colorAlpha(theme.palette.primary.main, 0.3)
-                },
-                backgroundColor: active
-                    ? colorAlpha(theme.palette.primary.main, 0.2)
-                    : undefined
-            } }, { children: [_jsx(ListItemIcon, __assign({ sx: {
-                        color: active ? theme.palette.primary.main : undefined,
+    var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, onClick = props.onClick;
+    var theme = useCustomTheme();
+    return (_jsxs(ListItem, __assign({ button: true, onClick: onClick, disabled: lock, sx: {
+            paddingLeft: isSub ? theme.spacing(4) : undefined,
+            display: "flex",
+            width: "100%",
+            "&:hover": {
+                backgroundColor: colorAlpha(theme.palette.primary.main, 0.3)
+            },
+            backgroundColor: active
+                ? colorAlpha(theme.palette.primary.main, 0.2)
+                : undefined
+        } }, { children: [_jsx(ListItemIcon, __assign({ sx: {
+                    color: active ? theme.palette.primary.main : undefined,
+                    borderRadius: active ? "5px" : undefined,
+                    opacity: active ? "1" : undefined,
+                    fontWeight: active ? 600 : undefined
+                } }, { children: icon })), _jsx(ListItemText, { primaryTypographyProps: {
+                    color: active ? theme.palette.primary.main : "textPrimary",
+                    sx: {
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
                         borderRadius: active ? "5px" : undefined,
                         opacity: active ? "1" : undefined,
                         fontWeight: active ? 600 : undefined
-                    } }, { children: icon })), _jsx(ListItemText, { primaryTypographyProps: {
-                        color: active ? theme.palette.primary.main : "textPrimary",
-                        sx: {
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap",
-                            borderRadius: active ? "5px" : undefined,
-                            opacity: active ? "1" : undefined,
-                            fontWeight: active ? 600 : undefined
-                        }
-                    }, primary: name }), lock && (_jsx(LockIcon, { fontSize: "small", color: "error", sx: {
-                        fontSize: "1rem"
-                    }, "data-nw": "".concat(name, "_lock") })), beta && (_jsx(Chip, { label: "BETA", color: "primary", size: "small", sx: {
-                        borderRadius: theme.spacing(0.5),
-                        backgroundColor: betaTagColor,
-                        color: "white",
-                        height: theme.spacing(2.5),
-                        fontSize: theme.spacing(1.25),
-                        padding: theme.spacing(0, 0.75)
-                    } })), hasChildren && (expand ? _jsx(ExpandMoreIcon, {}) : _jsx(ChevronRightIcon, {}))] })) })));
+                    }
+                }, primary: name }), lock && (_jsx(LockIcon, { fontSize: "small", color: "error", sx: {
+                    fontSize: "1rem"
+                }, "data-nw": "".concat(name, "_lock") })), beta && (_jsx(Chip, { label: "BETA", color: "primary", size: "small", sx: {
+                    borderRadius: theme.spacing(0.5),
+                    backgroundColor: betaTagColor,
+                    color: "white",
+                    height: theme.spacing(2.5),
+                    fontSize: theme.spacing(1.25),
+                    padding: theme.spacing(0, 0.75)
+                } })), hasChildren && (expand ? _jsx(ExpandMoreIcon, {}) : _jsx(ChevronRightIcon, {}))] })));
 }
 export default SidebarItem;

package/Sidebar/SidebarItemsGroup.js

@@ -9,10 +9,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, memo, useMemo, useEffect, useCallback } from "react";
 import { Match, useLocation } from "@reach/router";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import Collapse from "@mui/material/Collapse";
 import List from "@mui/material/List";
 import useCustomTheme from "../useCustomTheme";
@@ -20,7 +19,7 @@ import SidebarItem from "./SidebarItem";
 import SidebarLink from "./SidebarLink";
 function SidebarItemsGroup(props) {
     var item = props.item;
-    var name = item.name, path = item.path, icon = item.icon, children = item.children, lock = item.lock, beta = item.beta, titleForLock = item.titleForLock, betaTagColor = item.betaTagColor, primaryColor = item.primaryColor, secondaryColor = item.secondaryColor;
+    var name = item.name, path = item.path, icon = item.icon, children = item.children, lock = item.lock, beta = item.beta, titleForLock = item.titleForLock, betaTagColor = item.betaTagColor;
     var pathname = useLocation().pathname;
     var match = useMemo(function () {
         return pathname.includes(path);
@@ -32,7 +31,7 @@ function SidebarItemsGroup(props) {
     useEffect(function () {
         setExpand(match);
     }, [match]);
-    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(List, __assign({ component: "div", disablePadding: true }, { children: _jsx(SidebarItem, { active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, betaTagColor: betaTagColor, primaryColor: primaryColor, secondaryColor: secondaryColor, onClick: onToggleExpand }) })), children && (_jsx(Collapse, __assign({ in: expand, timeout: "auto" }, { children: _jsx(List, __assign({ component: "div", disablePadding: true }, { children: children.map(function (c) { return (_jsx(Match, __assign({ path: c.path }, { children: function (prop) { return (_jsx(SidebarLink, { name: c.name, path: c.path, icon: c.icon, lock: c.lock, beta: c.beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: c.betaTagColor, primaryColor: c.primaryColor, secondaryColor: c.secondaryColor, isSub: true })); } }), c.name)); }) })) })))] })));
+    var theme = useCustomTheme();
+    return (_jsxs(_Fragment, { children: [_jsx(List, __assign({ component: "div", disablePadding: true }, { children: _jsx(SidebarItem, { active: false, name: name, icon: icon, lock: lock, beta: beta, expand: expand, hasChildren: true, betaTagColor: betaTagColor, onClick: onToggleExpand }) })), children && (_jsx(Collapse, __assign({ in: expand, timeout: "auto" }, { children: _jsx(List, __assign({ component: "div", disablePadding: true }, { children: children.map(function (c) { return (_jsx(Match, __assign({ path: c.path }, { children: function (prop) { return (_jsx(SidebarLink, { name: c.name, path: c.path, icon: c.icon, lock: c.lock, beta: c.beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: c.betaTagColor, isSub: true })); } }), c.name)); }) })) })))] }));
 }
 export default memo(SidebarItemsGroup);

package/Sidebar/SidebarLink.js

@@ -22,16 +22,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Link, useLocation } from "@reach/router";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
 import SidebarItem from "./SidebarItem";
 function SidebarLink(props) {
     var pathname = useLocation().pathname;
-    var name = props.name, path = props.path, icon = props.icon, lock = props.lock, beta = props.beta, active = props.active, titleForLock = props.titleForLock, betaTagColor = props.betaTagColor, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["name", "path", "icon", "lock", "beta", "active", "titleForLock", "betaTagColor", "primaryColor", "secondaryColor"]);
-    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Link, __assign({ to: lock ? pathname : path, title: lock ? titleForLock || "Feature is unavailable on Free plan" : name, style: {
-                color: primaryColor || theme.palette.primary.main,
-                textDecoration: "none"
-            } }, { children: _jsx(SidebarItem, __assign({ name: name, icon: icon, lock: lock, beta: beta, active: active, betaTagColor: betaTagColor, primaryColor: primaryColor, secondaryColor: secondaryColor }, rest), name) })) })));
+    var name = props.name, path = props.path, icon = props.icon, lock = props.lock, beta = props.beta, active = props.active, titleForLock = props.titleForLock, betaTagColor = props.betaTagColor, rest = __rest(props, ["name", "path", "icon", "lock", "beta", "active", "titleForLock", "betaTagColor"]);
+    var theme = useCustomTheme();
+    return (_jsx(Link, __assign({ to: lock ? pathname : path, title: lock ? titleForLock || "Feature is unavailable on Free plan" : name, style: {
+            color: theme.palette.primary.main,
+            textDecoration: "none"
+        } }, { children: _jsx(SidebarItem, __assign({ name: name, icon: icon, lock: lock, beta: beta, active: active, betaTagColor: betaTagColor }, rest), name) })));
 }
 export default SidebarLink;

package/Sidebar/index.js

@@ -12,17 +12,17 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Match } from "@reach/router";
 import List from "@mui/material/List";
-import useTheme from "@mui/material/styles/useTheme";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
 import SidebarItem from "./SidebarItem";
 import SidebarItemsGroup from "./SidebarItemsGroup";
 import SidebarLink from "./SidebarLink";
 function Sidebar(props) {
-    var items = props.items;
-    var theme = useTheme();
+    var items = props.items, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(List, { children: items.map(function (i) {
-                var children = i.children, path = i.path, icon = i.icon, name = i.name, lock = i.lock, beta = i.beta, titleForLock = i.titleForLock, betaTagColor = i.betaTagColor, primaryColor = i.primaryColor, secondaryColor = i.secondaryColor;
-                return children ? (_jsx(SidebarItemsGroup, { item: i }, name)) : (_jsx(Match, __assign({ path: path === "/" ? path : path.concat("/*") }, { children: function (prop) { return (_jsx(SidebarLink, { name: name, path: path, icon: icon, lock: lock, beta: beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor, primaryColor: primaryColor, secondaryColor: secondaryColor }, name)); } }), name));
+                var children = i.children, path = i.path, icon = i.icon, name = i.name, lock = i.lock, beta = i.beta, titleForLock = i.titleForLock, betaTagColor = i.betaTagColor;
+                return children ? (_jsx(SidebarItemsGroup, { item: i }, name)) : (_jsx(Match, __assign({ path: path === "/" ? path : path.concat("/*") }, { children: function (prop) { return (_jsx(SidebarLink, { name: name, path: path, icon: icon, lock: lock, beta: beta, titleForLock: titleForLock, active: prop.match !== null, betaTagColor: betaTagColor }, name)); } }), name));
             }) }) })));
 }
 export default Sidebar;

package/Sidebar/types.d.ts

@@ -15,6 +15,8 @@ export interface SidebarBaseProps extends SidebarItemBaseProps {
 }
 export interface SidebarProps {
     items: Array<SidebarBaseProps>;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
 }
 export interface SidebarItemProps extends Omit<SidebarItemBaseProps, "path"> {
     active?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.0.6",
+  "version": "1.0.8-beta.1",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",