@ebubekirylmaz/link-test 1.0.0

package/src/theme/overrides/default-props.jsx

@@ -0,0 +1,238 @@
+import Iconify from "../../components/Iconify";
+import React from "react";
+import SvgIcon from "@mui/material/SvgIcon";
+// ----------------------------------------------------------------------
+
+const ArrowDownIcon = (props) => (
+  <SvgIcon {...props}>
+    <path d="M12,16 C11.7663478,16.0004565 11.5399121,15.9190812 11.36,15.77 L5.36,10.77 C4.93474074,10.4165378 4.87653776,9.78525926 5.23,9.36 C5.58346224,8.93474074 6.21474074,8.87653776 6.64,9.23 L12,13.71 L17.36,9.39 C17.5665934,9.2222295 17.8315409,9.14373108 18.0961825,9.17188444 C18.3608241,9.2000378 18.6033268,9.33252029 18.77,9.54 C18.9551341,9.74785947 19.0452548,10.0234772 19.0186853,10.3005589 C18.9921158,10.5776405 18.8512608,10.8311099 18.63,11 L12.63,15.83 C12.444916,15.955516 12.2231011,16.0153708 12,16 Z" />
+  </SvgIcon>
+);
+
+const CheckboxIcon = (props) => (
+  <SvgIcon {...props}>
+    <path d="M17.9 2.318A5 5 0 0 1 22.895 7.1l.005.217v10a5 5 0 0 1-4.783 4.995l-.217.005h-10a5 5 0 0 1-4.995-4.783l-.005-.217v-10a5 5 0 0 1 4.783-4.996l.217-.004h10Zm-.5 1.5h-9a4 4 0 0 0-4 4v9a4 4 0 0 0 4 4h9a4 4 0 0 0 4-4v-9a4 4 0 0 0-4-4Z" />
+  </SvgIcon>
+);
+
+const CheckboxCheckedIcon = (props) => (
+  <SvgIcon {...props}>
+    <path d="M17 2a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm-1.625 7.255-4.13 4.13-1.75-1.75a.881.881 0 0 0-1.24 0c-.34.34-.34.89 0 1.24l2.38 2.37c.17.17.39.25.61.25.23 0 .45-.08.62-.25l4.75-4.75c.34-.34.34-.89 0-1.24a.881.881 0 0 0-1.24 0Z" />
+  </SvgIcon>
+);
+
+const CheckboxIndeterminateIcon = (props) => (
+  <SvgIcon {...props}>
+    <path d="M17,2 C19.7614,2 22,4.23858 22,7 L22,7 L22,17 C22,19.7614 19.7614,22 17,22 L17,22 L7,22 C4.23858,22 2,19.7614 2,17 L2,17 L2,7 C2,4.23858 4.23858,2 7,2 L7,2 Z M15,11 L9,11 C8.44772,11 8,11.4477 8,12 C8,12.5523 8.44772,13 9,13 L15,13 C15.5523,13 16,12.5523 16,12 C16,11.4477 15.5523,11 15,11 Z" />
+  </SvgIcon>
+);
+
+const RadioIcon = (props) => (
+  <SvgIcon {...props}>
+    <path d="M12 2A10 10 0 1 1 2 12C2 6.477 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Z" />
+  </SvgIcon>
+);
+
+const RadioCheckedIcon = (props) => (
+  <SvgIcon {...props}>
+    <path d="M12 2A10 10 0 1 1 2 12C2 6.477 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z" />
+  </SvgIcon>
+);
+
+const RatingIcon = (props) => (
+  <SvgIcon {...props}>
+    <path d="M17.56,21 C17.4000767,21.0006435 17.2423316,20.9629218 17.1,20.89 L12,18.22 L6.9,20.89 C6.56213339,21.067663 6.15259539,21.0374771 5.8444287,20.8121966 C5.53626201,20.5869161 5.38323252,20.2058459 5.45,19.83 L6.45,14.2 L2.33,10.2 C2.06805623,9.93860108 1.9718844,9.55391377 2.08,9.2 C2.19824414,8.83742187 2.51242293,8.57366684 2.89,8.52 L8.59,7.69 L11.1,2.56 C11.2670864,2.21500967 11.6166774,1.99588989 12,1.99588989 C12.3833226,1.99588989 12.7329136,2.21500967 12.9,2.56 L15.44,7.68 L21.14,8.51 C21.5175771,8.56366684 21.8317559,8.82742187 21.95,9.19 C22.0581156,9.54391377 21.9619438,9.92860108 21.7,10.19 L17.58,14.19 L18.58,19.82 C18.652893,20.2027971 18.4967826,20.5930731 18.18,20.82 C17.9989179,20.9468967 17.7808835,21.010197 17.56,21 L17.56,21 Z" />
+  </SvgIcon>
+);
+
+const TreeViewCollapseIcon = (props) => (
+  <SvgIcon {...props}>
+    <path d="M18,3 C19.6568542,3 21,4.34314575 21,6 L21,6 L21,18 C21,19.6568542 19.6568542,21 18,21 L18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,18 L3,6 C3,4.34314575 4.34314575,3 6,3 L6,3 Z M18,5 L6,5 C5.44771525,5 5,5.44771525 5,6 L5,6 L5,18 C5,18.5522847 5.44771525,19 6,19 L6,19 L18,19 C18.5522847,19 19,18.5522847 19,18 L19,18 L19,6 C19,5.44771525 18.5522847,5 18,5 L18,5 Z M12,8 C12.5522847,8 13,8.44771525 13,9 L13,9 L13,11 L15,11 C15.5522847,11 16,11.4477153 16,12 C16,12.5522847 15.5522847,13 15,13 L15,13 L13,13 L13,15 C13,15.5522847 12.5522847,16 12,16 C11.4477153,16 11,15.5522847 11,15 L11,15 L11,13 L9,13 C8.44771525,13 8,12.5522847 8,12 C8,11.4477153 8.44771525,11 9,11 L9,11 L11,11 L11,9 C11,8.44771525 11.4477153,8 12,8 Z" />
+  </SvgIcon>
+);
+
+const TreeViewExpandIcon = (props) => (
+  <SvgIcon {...props}>
+    <path d="M18,3 C19.6568542,3 21,4.34314575 21,6 L21,6 L21,18 C21,19.6568542 19.6568542,21 18,21 L18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,18 L3,6 C3,4.34314575 4.34314575,3 6,3 L6,3 Z M18,5 L6,5 C5.44771525,5 5,5.44771525 5,6 L5,6 L5,18 C5,18.5522847 5.44771525,19 6,19 L6,19 L18,19 C18.5522847,19 19,18.5522847 19,18 L19,18 L19,6 C19,5.44771525 18.5522847,5 18,5 L18,5 Z M15,11 C15.5522847,11 16,11.4477153 16,12 C16,12.5522847 15.5522847,13 15,13 L15,13 L9,13 C8.44771525,13 8,12.5522847 8,12 C8,11.4477153 8.44771525,11 9,11 L9,11 Z" />
+  </SvgIcon>
+);
+
+const TreeViewEndIcon = (props) => (
+  <SvgIcon {...props}>
+    <path d="M18,3 C19.6568542,3 21,4.34314575 21,6 L21,6 L21,18 C21,19.6568542 19.6568542,21 18,21 L18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,18 L3,6 C3,4.34314575 4.34314575,3 6,3 L6,3 Z M18,5 L6,5 C5.44771525,5 5,5.44771525 5,6 L5,6 L5,18 C5,18.5522847 5.44771525,19 6,19 L6,19 L18,19 C18.5522847,19 19,18.5522847 19,18 L19,18 L19,6 C19,5.44771525 18.5522847,5 18,5 L18,5 Z M14,8.99420168 C14.2666375,8.99420168 14.5222334,9.10068735 14.71,9.29 C14.8993127,9.4777666 15.0057983,9.73336246 15.0057983,10 C15.0057983,10.2666375 14.8993127,10.5222334 14.71,10.71 L14.71,10.71 L13.41,12 L14.71,13.29 C14.8993127,13.4777666 15.0057983,13.7333625 15.0057983,14 C15.0057983,14.2666375 14.8993127,14.5222334 14.71,14.71 C14.5222334,14.8993127 14.2666375,15.0057983 14,15.0057983 C13.7333625,15.0057983 13.4777666,14.8993127 13.29,14.71 L13.29,14.71 L12,13.41 L10.71,14.71 C10.5222334,14.8993127 10.2666375,15.0057983 10,15.0057983 C9.73336246,15.0057983 9.4777666,14.8993127 9.29,14.71 C9.10068735,14.5222334 8.99420168,14.2666375 8.99420168,14 C8.99420168,13.7333625 9.10068735,13.4777666 9.29,13.29 L9.29,13.29 L10.59,12 L9.29,10.71 C8.89787783,10.3178778 8.89787783,9.68212217 9.29,9.29 C9.68212217,8.89787783 10.3178778,8.89787783 10.71,9.29 L10.71,9.29 L12,10.59 L13.29,9.29 C13.4777666,9.10068735 13.7333625,8.99420168 14,8.99420168 Z" />
+  </SvgIcon>
+);
+
+// ----------------------------------------------------------------------
+
+export function defaultProps(theme) {
+  return {
+    MuiAlert: {
+      defaultProps: {
+        iconMapping: {
+          error: <Iconify icon="solar:danger-bold" width={24} />,
+          info: <Iconify icon="eva:info-fill" width={24} />,
+          success: <Iconify icon="eva:checkmark-circle-2-fill" width={24} />,
+          warning: <Iconify icon="eva:alert-triangle-fill" width={24} />,
+        },
+      },
+    },
+    MuiStack: {
+      defaultProps: {
+        useFlexGap: true,
+      },
+    },
+    MuiAppBar: {
+      defaultProps: {
+        color: "transparent",
+      },
+    },
+    MuiAvatarGroup: {
+      defaultProps: {
+        max: 4,
+      },
+    },
+    MuiButtonGroup: {
+      defaultProps: {
+        disableElevation: true,
+      },
+    },
+    MuiButton: {
+      defaultProps: {
+        color: "inherit",
+        disableElevation: true,
+      },
+    },
+    MuiCardHeader: {
+      defaultProps: {
+        titleTypographyProps: { variant: "h6" },
+        subheaderTypographyProps: {
+          variant: "body2",
+          marginTop: theme.spacing(0.5),
+        },
+      },
+    },
+    MuiChip: {
+      defaultProps: {
+        deleteIcon: <Iconify icon="solar:close-circle-bold" />,
+      },
+    },
+    MuiDialogActions: {
+      defaultProps: {
+        disableSpacing: true,
+      },
+    },
+    MuiFab: {
+      defaultProps: {
+        color: "primary",
+      },
+    },
+    MuiLink: {
+      defaultProps: {
+        underline: "hover",
+      },
+    },
+    MuiListItemText: {
+      defaultProps: {
+        primaryTypographyProps: {
+          typography: "subtitle2",
+        },
+        secondaryTypographyProps: {
+          component: "span",
+        },
+      },
+    },
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0,
+      },
+    },
+    MuiSkeleton: {
+      defaultProps: {
+        animation: "wave",
+        variant: "rounded",
+      },
+    },
+    MuiFilledInput: {
+      defaultProps: {
+        disableUnderline: true,
+      },
+    },
+    MuiFormHelperText: {
+      defaultProps: {
+        component: "div",
+      },
+    },
+    MuiTab: {
+      defaultProps: {
+        disableRipple: true,
+        iconPosition: "start",
+      },
+    },
+    MuiTabs: {
+      defaultProps: {
+        textColor: "inherit",
+        variant: "scrollable",
+        allowScrollButtonsMobile: true,
+      },
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        backIconButtonProps: {
+          size: "small",
+        },
+        nextIconButtonProps: {
+          size: "small",
+        },
+      },
+    },
+    MuiSlider: {
+      defaultProps: {
+        size: "small",
+      },
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        popupIcon: <ArrowDownIcon />,
+      },
+    },
+    MuiSelect: {
+      defaultProps: {
+        IconComponent: ArrowDownIcon,
+      },
+    },
+    MuiNativeSelect: {
+      defaultProps: {
+        IconComponent: ArrowDownIcon,
+      },
+    },
+    MuiCheckbox: {
+      defaultProps: {
+        size: "small",
+        icon: <CheckboxIcon />,
+        checkedIcon: <CheckboxCheckedIcon />,
+        indeterminateIcon: <CheckboxIndeterminateIcon />,
+      },
+    },
+    MuiRadio: {
+      defaultProps: {
+        size: "small",
+        icon: <RadioIcon />,
+        checkedIcon: <RadioCheckedIcon />,
+      },
+    },
+    MuiRating: {
+      defaultProps: {
+        emptyIcon: <RatingIcon />,
+        icon: <RatingIcon />,
+      },
+    },
+    MuiTreeView: {
+      defaultProps: {
+        defaultCollapseIcon: <TreeViewCollapseIcon />,
+        defaultExpandIcon: <TreeViewExpandIcon />,
+        defaultEndIcon: <TreeViewEndIcon />,
+      },
+    },
+  };
+}

package/src/theme/overrides/index.js

@@ -0,0 +1,100 @@
+import { accordion } from "./components/accordion";
+import { alert } from "./components/alert";
+import { appBar } from "./components/appbar";
+import { autocomplete } from "./components/autocomplete";
+import { avatar } from "./components/avatar";
+import { backdrop } from "./components/backdrop";
+import { badge } from "./components/badge";
+import { breadcrumbs } from "./components/breadcrumbs";
+import { button } from "./components/button";
+import { buttonGroup } from "./components/button-group";
+import { card } from "./components/card";
+import { checkbox } from "./components/checkbox";
+import { chip } from "./components/chip";
+import config from "../../config/config";
+import { cssBaseline } from "./components/css-baseline";
+import { dataGrid } from "./components/data-grid";
+import { datePicker } from "./components/date-picker";
+import { defaultProps } from "./default-props";
+import { dialog } from "./components/dialog";
+import { drawer } from "./components/drawer";
+import { fab } from "./components/fab";
+import { list } from "./components/list";
+import { loadingButton } from "./components/loading-button";
+import { menu } from "./components/menu";
+import merge from "lodash/merge";
+import { pagination } from "./components/pagination";
+import { paper } from "./components/paper";
+import { popover } from "./components/popover";
+import { progress } from "./components/progress";
+import { radio } from "./components/radio";
+import { rating } from "./components/rating";
+import { select } from "./components/select";
+import { skeleton } from "./components/skeleton";
+import { slider } from "./components/slider";
+import { stepper } from "./components/stepper";
+import { svgIcon } from "./components/svg-icon";
+import { switches } from "./components/switch";
+import { table } from "./components/table";
+import { tabs } from "./components/tabs";
+import { textField } from "./components/textfield";
+import { timeline } from "./components/timeline";
+import { toggleButton } from "./components/toggle-button";
+import { tooltip } from "./components/tooltip";
+import { treeView } from "./components/tree-view";
+import { typography } from "./components/typography";
+
+export function componentsOverrides(theme) {
+  const { theme: configTheme } = config().template;
+
+  const components = merge(
+    defaultProps(theme),
+    //
+    configTheme?.variants && configTheme?.variants(theme),
+    //
+    fab(theme),
+    tabs(theme),
+    chip(theme),
+    card(theme),
+    menu(theme),
+    list(theme),
+    badge(theme),
+    table(theme),
+    paper(theme),
+    alert(theme),
+    radio(theme),
+    select(theme),
+    button(theme),
+    rating(theme),
+    dialog(theme),
+    appBar(theme),
+    avatar(theme),
+    slider(theme),
+    drawer(theme),
+    stepper(theme),
+    tooltip(theme),
+    popover(theme),
+    svgIcon(theme),
+    switches(theme),
+    checkbox(theme),
+    dataGrid(theme),
+    skeleton(theme),
+    timeline(theme),
+    treeView(theme),
+    backdrop(theme),
+    progress(theme),
+    textField(theme),
+    accordion(theme),
+    typography(theme),
+    pagination(theme),
+    datePicker(theme),
+    buttonGroup(theme),
+    breadcrumbs(theme),
+    cssBaseline(theme),
+    autocomplete(theme),
+    toggleButton(theme),
+    loadingButton(theme)
+  );
+
+  return components;
+}

package/src/theme/palette.js

@@ -0,0 +1,144 @@
+import { alpha } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+// SETUP COLORS
+
+export const grey = {
+  0: "#FFFFFF",
+  100: "#F9FAFB",
+  200: "#F4F6F8",
+  300: "#DFE3E8",
+  400: "#C4CDD5",
+  500: "#919EAB",
+  600: "#637381",
+  700: "#454F5B",
+  800: "#212B36",
+  900: "#161C24",
+};
+
+export const primary = {
+  lighter: "#C8FAD6",
+  light: "#5BE49B",
+  main: "#00A76F",
+  dark: "#007867",
+  darker: "#004B50",
+  contrastText: "#FFFFFF",
+};
+
+export const secondary = {
+  lighter: "#EFD6FF",
+  light: "#C684FF",
+  main: "#8E33FF",
+  dark: "#5119B7",
+  darker: "#27097A",
+  contrastText: "#FFFFFF",
+};
+
+export const info = {
+  lighter: "#CAFDF5",
+  light: "#61F3F3",
+  main: "#00B8D9",
+  dark: "#006C9C",
+  darker: "#003768",
+  contrastText: "#FFFFFF",
+};
+
+export const success = {
+  lighter: "#D3FCD2",
+  light: "#77ED8B",
+  main: "#22C55E",
+  dark: "#118D57",
+  darker: "#065E49",
+  contrastText: "#ffffff",
+};
+
+export const warning = {
+  lighter: "#FFF5CC",
+  light: "#FFD666",
+  main: "#FFAB00",
+  dark: "#B76E00",
+  darker: "#7A4100",
+  contrastText: grey[800],
+};
+
+export const error = {
+  lighter: "#FFE9D5",
+  light: "#FFAC82",
+  main: "#FF5630",
+  dark: "#B71D18",
+  darker: "#7A0916",
+  contrastText: "#FFFFFF",
+};
+
+export const common = {
+  black: "#000000",
+  white: "#FFFFFF",
+};
+
+export const action = {
+  hover: alpha(grey[500], 0.08),
+  selected: alpha(grey[500], 0.16),
+  disabled: alpha(grey[500], 0.8),
+  disabledBackground: alpha(grey[500], 0.24),
+  focus: alpha(grey[500], 0.24),
+  hoverOpacity: 0.08,
+  disabledOpacity: 0.48,
+};
+
+const base = {
+  primary,
+  secondary,
+  info,
+  success,
+  warning,
+  error,
+  grey,
+  common,
+  divider: alpha(grey[500], 0.2),
+  action,
+};
+
+// ----------------------------------------------------------------------
+
+export function palette(mode) {
+  const light = {
+    ...base,
+    mode: "light",
+    text: {
+      primary: grey[800],
+      secondary: grey[600],
+      disabled: grey[500],
+    },
+    background: {
+      paper: "#FFFFFF",
+      default: "#FFFFFF",
+      neutral: grey[200],
+    },
+    action: {
+      ...base.action,
+      active: grey[600],
+    },
+  };
+
+  const dark = {
+    ...base,
+    mode: "dark",
+    text: {
+      primary: "#FFFFFF",
+      secondary: grey[500],
+      disabled: grey[600],
+    },
+    background: {
+      paper: grey[800],
+      default: grey[900],
+      neutral: alpha(grey[500], 0.12),
+    },
+    action: {
+      ...base.action,
+      active: grey[500],
+    },
+  };
+
+  return mode === "light" ? light : dark;
+}

package/src/theme/shadows.js

@@ -0,0 +1,41 @@
+import { alpha } from "@mui/material/styles";
+
+import { common, grey } from "./palette";
+
+// ----------------------------------------------------------------------
+
+export function shadows(mode) {
+  const color = mode === "light" ? grey[500] : common.black;
+
+  const transparent1 = alpha(color, 0.2);
+  const transparent2 = alpha(color, 0.14);
+  const transparent3 = alpha(color, 0.12);
+
+  return [
+    "none",
+    `0px 2px 1px -1px ${transparent1},0px 1px 1px 0px ${transparent2},0px 1px 3px 0px ${transparent3}`,
+    `0px 3px 1px -2px ${transparent1},0px 2px 2px 0px ${transparent2},0px 1px 5px 0px ${transparent3}`,
+    `0px 3px 3px -2px ${transparent1},0px 3px 4px 0px ${transparent2},0px 1px 8px 0px ${transparent3}`,
+    `0px 2px 4px -1px ${transparent1},0px 4px 5px 0px ${transparent2},0px 1px 10px 0px ${transparent3}`,
+    `0px 3px 5px -1px ${transparent1},0px 5px 8px 0px ${transparent2},0px 1px 14px 0px ${transparent3}`,
+    `0px 3px 5px -1px ${transparent1},0px 6px 10px 0px ${transparent2},0px 1px 18px 0px ${transparent3}`,
+    `0px 4px 5px -2px ${transparent1},0px 7px 10px 1px ${transparent2},0px 2px 16px 1px ${transparent3}`,
+    `0px 5px 5px -3px ${transparent1},0px 8px 10px 1px ${transparent2},0px 3px 14px 2px ${transparent3}`,
+    `0px 5px 6px -3px ${transparent1},0px 9px 12px 1px ${transparent2},0px 3px 16px 2px ${transparent3}`,
+    `0px 6px 6px -3px ${transparent1},0px 10px 14px 1px ${transparent2},0px 4px 18px 3px ${transparent3}`,
+    `0px 6px 7px -4px ${transparent1},0px 11px 15px 1px ${transparent2},0px 4px 20px 3px ${transparent3}`,
+    `0px 7px 8px -4px ${transparent1},0px 12px 17px 2px ${transparent2},0px 5px 22px 4px ${transparent3}`,
+    `0px 7px 8px -4px ${transparent1},0px 13px 19px 2px ${transparent2},0px 5px 24px 4px ${transparent3}`,
+    `0px 7px 9px -4px ${transparent1},0px 14px 21px 2px ${transparent2},0px 5px 26px 4px ${transparent3}`,
+    `0px 8px 9px -5px ${transparent1},0px 15px 22px 2px ${transparent2},0px 6px 28px 5px ${transparent3}`,
+    `0px 8px 10px -5px ${transparent1},0px 16px 24px 2px ${transparent2},0px 6px 30px 5px ${transparent3}`,
+    `0px 8px 11px -5px ${transparent1},0px 17px 26px 2px ${transparent2},0px 6px 32px 5px ${transparent3}`,
+    `0px 9px 11px -5px ${transparent1},0px 18px 28px 2px ${transparent2},0px 7px 34px 6px ${transparent3}`,
+    `0px 9px 12px -6px ${transparent1},0px 19px 29px 2px ${transparent2},0px 7px 36px 6px ${transparent3}`,
+    `0px 10px 13px -6px ${transparent1},0px 20px 31px 3px ${transparent2},0px 8px 38px 7px ${transparent3}`,
+    `0px 10px 13px -6px ${transparent1},0px 21px 33px 3px ${transparent2},0px 8px 40px 7px ${transparent3}`,
+    `0px 10px 14px -6px ${transparent1},0px 22px 35px 3px ${transparent2},0px 8px 42px 7px ${transparent3}`,
+    `0px 11px 14px -7px ${transparent1},0px 23px 36px 3px ${transparent2},0px 9px 44px 8px ${transparent3}`,
+    `0px 11px 15px -7px ${transparent1},0px 24px 38px 3px ${transparent2},0px 9px 46px 8px ${transparent3}`,
+  ];
+}

package/src/theme/typography.js

@@ -0,0 +1,107 @@
+// ----------------------------------------------------------------------
+
+export function remToPx(value) {
+  return Math.round(parseFloat(value) * 16);
+}
+
+export function pxToRem(value) {
+  return `${value / 16}rem`;
+}
+
+export function responsiveFontSizes({ sm, md, lg }) {
+  return {
+    "@media (min-width:600px)": {
+      fontSize: pxToRem(sm),
+    },
+    "@media (min-width:900px)": {
+      fontSize: pxToRem(md),
+    },
+    "@media (min-width:1200px)": {
+      fontSize: pxToRem(lg),
+    },
+  };
+}
+
+export const primaryFont = "Public Sans, sans-serif";
+export const secondaryFont = "Barlow, sans-serif";
+
+// ----------------------------------------------------------------------
+
+export const typography = {
+  fontFamily: primaryFont,
+  fontSecondaryFamily: secondaryFont,
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
+  fontWeightSemiBold: 600,
+  fontWeightBold: 700,
+  h1: {
+    fontWeight: 800,
+    lineHeight: 80 / 64,
+    fontSize: pxToRem(40),
+    ...responsiveFontSizes({ sm: 52, md: 58, lg: 64 }),
+  },
+  h2: {
+    fontWeight: 800,
+    lineHeight: 64 / 48,
+    fontSize: pxToRem(32),
+    ...responsiveFontSizes({ sm: 40, md: 44, lg: 48 }),
+  },
+  h3: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(24),
+    ...responsiveFontSizes({ sm: 26, md: 30, lg: 32 }),
+  },
+  h4: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(20),
+    ...responsiveFontSizes({ sm: 20, md: 24, lg: 24 }),
+  },
+  h5: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(18),
+    ...responsiveFontSizes({ sm: 19, md: 20, lg: 20 }),
+  },
+  h6: {
+    fontWeight: 700,
+    lineHeight: 28 / 18,
+    fontSize: pxToRem(17),
+    ...responsiveFontSizes({ sm: 18, md: 18, lg: 18 }),
+  },
+  subtitle1: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    fontSize: pxToRem(16),
+  },
+  subtitle2: {
+    fontWeight: 600,
+    lineHeight: 22 / 14,
+    fontSize: pxToRem(14),
+  },
+  body1: {
+    lineHeight: 1.5,
+    fontSize: pxToRem(16),
+  },
+  body2: {
+    lineHeight: 22 / 14,
+    fontSize: pxToRem(14),
+  },
+  caption: {
+    lineHeight: 1.5,
+    fontSize: pxToRem(12),
+  },
+  overline: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(12),
+    textTransform: "uppercase",
+  },
+  button: {
+    fontWeight: 700,
+    lineHeight: 24 / 14,
+    fontSize: pxToRem(14),
+    textTransform: "unset",
+  },
+};

package/src/utils/flatten-array.js

@@ -0,0 +1,16 @@
+// ----------------------------------------------------------------------
+
+export function flattenArray(list, key = "children") {
+  let children = [];
+
+  const flatten = list?.map((item) => {
+    if (item[key] && item[key].length) {
+      children = [...children, ...item[key]];
+    }
+    return item;
+  });
+
+  return flatten?.concat(
+    children.length ? flattenArray(children, key) : children
+  );
+}

package/src/utils/format-number.js

@@ -0,0 +1,37 @@
+import numeral from "numeral";
+
+// ----------------------------------------------------------------------
+
+export function fNumber(number) {
+  return numeral(number).format();
+}
+
+export function fCurrency(number) {
+  const format = number ? numeral(number).format("$0,0.00") : "";
+
+  return result(format, ".00");
+}
+
+export function fPercent(number) {
+  const format = number ? numeral(Number(number) / 100).format("0.0%") : "";
+
+  return result(format, ".0");
+}
+
+export function fShortenNumber(number) {
+  const format = number ? numeral(number).format("0.00a") : "";
+
+  return result(format, ".00");
+}
+
+export function fData(number) {
+  const format = number ? numeral(number).format("0.0 b") : "";
+
+  return result(format, ".0");
+}
+
+function result(format, key = ".00") {
+  const isInteger = format.includes(key);
+
+  return isInteger ? format.replace(key, "") : format;
+}