@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/theme.mjs

@@ -1,234 +1,56 @@
 import {
-  buttonBaseTheme,
-  buttonTheme,
-  iconButtonTheme
-} from "./chunk-PKADXEAD.mjs";
-import {
-  typographyTheme
-} from "./chunk-YGBJCPUS.mjs";
-
-// src/theme/Provider.tsx
-import { ThemeProvider as ThemeProvider2 } from "@mui/material/styles";
-
-// src/theme/muiTheme.ts
-import { createTheme } from "@mui/material/styles";
-
-// src/theme/colors/darkBlue.ts
-var themeColor = {
-  themeType: "dark",
-  name: "darkBlue",
-  colorScheme: {
-    primary: {
-      1: "rgba(5, 20, 35, 1)",
-      2: "rgba(20, 40, 65, 1)",
-      3: "rgba(40, 80, 110, 1)",
-      4: "rgba(65, 110, 140, 1)",
-      5: "rgba(90, 140, 170, 1)",
-      6: "rgba(115, 170, 200, 1)",
-      main: 2
-    },
-    secondary: {
-      1: "rgba(250, 250, 255, 1)",
-      2: "rgba(245, 245, 255, 1)",
-      3: "rgba(200, 235, 240, 1)",
-      4: "rgba(165, 220, 225, 1)",
-      5: "rgba(125, 200, 210, 1)",
-      6: "rgba(20, 215, 215, 1)",
-      main: 5
-    },
-    error: "rgba(255, 0, 100, 1)",
-    warning: "rgba(230, 190, 125, 1)",
-    info: "rgba(100, 180, 255, 1)",
-    success: "rgba(100, 255, 150, 1)",
-    focus: "rgba(255, 0, 100, 1)",
-    disabled: "rgba(100, 120, 140, 1)",
-    background: {
-      default: "rgba(29, 29, 29, 1)"
-    },
-    text: {
-      primary: "rgba(240, 240, 255, 1)",
-      secondary: "rgba(180, 200, 220, 1)",
-      subscript: "rgba(137, 137, 150, 1)"
-    }
-  }
-};
-var muiPalette = {
-  palette: {
-    mode: "dark",
-    primary: {
-      dark: themeColor.colorScheme.primary[1],
-      main: themeColor.colorScheme.primary[themeColor.colorScheme.primary.main],
-      light: themeColor.colorScheme.primary[6]
-    },
-    secondary: {
-      dark: themeColor.colorScheme.secondary[6],
-      main: themeColor.colorScheme.secondary[themeColor.colorScheme.secondary.main],
-      light: themeColor.colorScheme.secondary[1]
-    },
-    error: {
-      main: themeColor.colorScheme.error
-    },
-    warning: {
-      main: themeColor.colorScheme.warning
-    },
-    info: {
-      main: themeColor.colorScheme.info
-    },
-    success: {
-      main: themeColor.colorScheme.success
-    },
-    background: {
-      default: themeColor.colorScheme.background.default
-    },
-    text: {
-      primary: themeColor.colorScheme.text.primary,
-      secondary: themeColor.colorScheme.text.secondary,
-      disabled: themeColor.colorScheme.disabled
-    },
-    "text-1": themeColor.colorScheme.text.primary,
-    "text-subscript": `color-mix(in lab, ${themeColor.colorScheme.text.subscript}, var(--mui-palette-primary-light) 50%)`,
-    "text-href": `color-mix(in lab, var(--mui-palette-primary-main) 10%, var(--mui-palette-focus-1) 90%)`,
-    "focus-1": themeColor.colorScheme.focus,
-    "shadow-border-1": `inset 0 0 0px 2px var(--mui-palette-primary-gray)`,
-    "primary-gray": `color-mix(in lab, var(--mui-palette-primary-main) 80%, hsla(0, 0%, 30%, 1.00) 20%)`
-  }
-};
-
-// src/theme/colors/lightBrown.ts
-var themeColor2 = {
-  themeType: "light",
-  name: "lightBrown",
-  colorScheme: {
-    primary: {
-      1: "rgba(255, 255, 255, 1)",
-      2: "rgba(255, 255, 220, 1)",
-      3: "rgba(255, 245, 215, 1)",
-      4: "rgba(255, 245, 215, 1)",
-      5: "rgba(245, 220, 165, 1)",
-      6: "rgba(240, 200, 165, 1)",
-      main: 4
-    },
-    secondary: {
-      1: "rgba(35, 10, 25, 1)",
-      2: "rgba(45, 20, 30, 1)",
-      3: "rgba(75, 20, 30, 1)",
-      4: "rgba(105, 45, 40, 1)",
-      5: "rgba(130, 60, 40, 1)",
-      6: "rgba(165, 105, 65, 1)",
-      main: 4
-    },
-    error: "rgba(255, 45, 120, 1)",
-    warning: "rgba(230, 190, 125, 1)",
-    info: "rgba(100, 180, 255, 1)",
-    success: "rgba(100, 255, 150, 1)",
-    focus: "rgba(255, 45, 120, 1)",
-    disabled: "rgba(100, 120, 140, 1)",
-    background: {
-      default: "rgba(255, 255, 255, 1)"
-    },
-    text: {
-      primary: "rgba(35, 10, 25, 1)",
-      secondary: "rgba(180, 200, 220, 1)",
-      subscript: "rgba(92, 92, 92, 1)"
-    }
-  }
-};
-var muiPalette2 = {
-  palette: {
-    mode: "dark",
-    primary: {
-      dark: themeColor2.colorScheme.primary[6],
-      main: themeColor2.colorScheme.primary[themeColor2.colorScheme.primary.main],
-      light: themeColor2.colorScheme.primary[1]
-    },
-    secondary: {
-      dark: themeColor2.colorScheme.secondary[3],
-      main: themeColor2.colorScheme.secondary[themeColor2.colorScheme.secondary.main],
-      light: themeColor2.colorScheme.secondary[6]
-    },
-    error: {
-      main: themeColor2.colorScheme.error
-    },
-    warning: {
-      main: themeColor2.colorScheme.warning
-    },
-    info: {
-      main: themeColor2.colorScheme.info
-    },
-    success: {
-      main: themeColor2.colorScheme.success
-    },
-    background: {
-      default: themeColor2.colorScheme.background.default
-    },
-    text: {
-      primary: themeColor2.colorScheme.text.primary,
-      secondary: themeColor2.colorScheme.text.secondary,
-      disabled: themeColor2.colorScheme.disabled
-    },
-    "text-1": themeColor2.colorScheme.text.primary,
-    "text-subscript": `color-mix(in lab, ${themeColor2.colorScheme.text.subscript}, var(--mui-palette-primary-main) 50%)`,
-    "text-href": `color-mix(in lab, var(--mui-palette-primary-main) 10%, var(--mui-palette-focus-1) 90%)`,
-    "focus-1": themeColor2.colorScheme.focus,
-    "shadow-border-1": `inset 0 0 0px 2px var(--mui-palette-primary-gray)`,
-    "primary-gray": `color-mix(in lab, var(--mui-palette-primary-main) 80%, hsla(0, 0%, 30%, 1.00) 20%)`
-  }
-};
-
-// src/theme/muiTheme.ts
-var theme = createTheme({
-  cssVariables: {
-    colorSchemeSelector: "data-toolpad-color-scheme"
-  },
-  colorSchemes: {
-    light: muiPalette2,
-    dark: muiPalette
-  },
-  breakpoints: {
-    values: {
-      xs: 0,
-      sm: 600,
-      md: 600,
-      lg: 1200,
-      xl: 1536
-    }
-  },
-  shape: {
-    borderRadius: 8
-  },
-  // Customize your theme here if needed
-  components: {
-    // buttons
-    MuiButton: buttonTheme,
-    MuiButtonBase: buttonBaseTheme,
-    MuiIconButton: iconButtonTheme,
-    // typography
-    MuiTypography: typographyTheme
-  }
-});
-
-// src/theme/Provider.tsx
-import { jsx } from "react/jsx-runtime";
-function P(p) {
-  return /* @__PURE__ */ jsx("html", { children: /* @__PURE__ */ jsx(ThemeProvider2, { theme, children: p.children }) });
-}
-
-// src/theme/ToggleThemeButton/ToggleThemeButton.tsx
-import { useColorScheme } from "@mui/material/styles";
-import Brightness7Icon from "@mui/icons-material/Brightness7";
-import Brightness4OutlinedIcon from "@mui/icons-material/Brightness4Outlined";
-import IconButton from "@mui/material/IconButton";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function ToggleButton() {
-  const { mode, setMode } = useColorScheme();
-  const isDark = mode === "dark";
-  function toggle() {
-    setMode(isDark ? "light" : "dark");
-  }
-  return /* @__PURE__ */ jsx2(IconButton, { onClick: toggle, children: isDark ? /* @__PURE__ */ jsx2(Brightness7Icon, {}) : /* @__PURE__ */ jsx2(Brightness4OutlinedIcon, {}) });
-}
+  ThemeProvider,
+  ToggleButton,
+  appScrollSurfaceAttribute,
+  createAppTheme,
+  theme
+} from "./chunk-CRYIEYZZ.mjs";
+import "./chunk-IN3O4R7Q.mjs";
+import "./chunk-ONQMRE2G.mjs";
+import "./chunk-EEH7HACG.mjs";
+import "./chunk-Y74ALKBL.mjs";
+import "./chunk-27KYFU7R.mjs";
+import "./chunk-DELCADNF.mjs";
+import "./chunk-24XDGNJ6.mjs";
+import "./chunk-MI64T62E.mjs";
+import "./chunk-UTVSYS6S.mjs";
+import "./chunk-V26V2S3W.mjs";
+import "./chunk-T34IULP5.mjs";
+import "./chunk-2ZZJTBTE.mjs";
+import "./chunk-UGMRJMFZ.mjs";
+import "./chunk-EW4DTFH3.mjs";
+import "./chunk-UDREPVEY.mjs";
+import "./chunk-CWFWRZWU.mjs";
+import "./chunk-ZG3NQI77.mjs";
+import "./chunk-OGNGPI3M.mjs";
+import "./chunk-VYD3PDBB.mjs";
+import "./chunk-HR3A4H4E.mjs";
+import "./chunk-TDRA5EZI.mjs";
+import "./chunk-3DQINB57.mjs";
+import "./chunk-BGB7JHIU.mjs";
+import "./chunk-T4X375IG.mjs";
+import "./chunk-3VUAM2GY.mjs";
+import "./chunk-WYYP3Y34.mjs";
+import "./chunk-HE7MY3RT.mjs";
+import "./chunk-56TI2ZBT.mjs";
+import "./chunk-MDAUF7IL.mjs";
+import "./chunk-UMJ5SCIQ.mjs";
+import "./chunk-EKPULYPU.mjs";
+import "./chunk-B7DAB22K.mjs";
+import "./chunk-I5JWS4Z7.mjs";
+import "./chunk-QFF3HTHL.mjs";
+import "./chunk-JIU5GVM7.mjs";
+import "./chunk-4Q54P737.mjs";
+import "./chunk-OP6LKXPA.mjs";
+import "./chunk-ZVFYOXDE.mjs";
+import "./chunk-4RPFRNXG.mjs";
+import "./chunk-S6EZVRZC.mjs";
+import "./chunk-FJ6ZGZIA.mjs";
 export {
-  P as ThemeProvider,
-  ToggleButton as ToggleThemeButton
+  ThemeProvider,
+  ToggleButton as ToggleThemeButton,
+  appScrollSurfaceAttribute,
+  createAppTheme,
+  theme
 };
 //# sourceMappingURL=theme.mjs.map

package/dist/theme.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/theme/Provider.tsx","../src/theme/muiTheme.ts","../src/theme/colors/darkBlue.ts","../src/theme/colors/lightBrown.ts","../src/theme/ToggleThemeButton/ToggleThemeButton.tsx"],"sourcesContent":["import { ThemeProvider, } from '@mui/material/styles';\n\nimport { theme } from './muiTheme'\n\nexport default function P(p: { children: React.ReactNode }) {\n  return (\n  <html>\n    <ThemeProvider theme={theme}>\n      {p.children}\n    </ThemeProvider>\n  </html>);\n}","import { ThemeProvider, createTheme } from '@mui/material/styles';\n\nimport { buttonTheme, buttonBaseTheme, iconButtonTheme } from '@/ele/Button';\nimport { typographyTheme } from '@/ele/Typography';\n\nimport { muiPalette as darkBlueMuiPalette } from './colors/darkBlue';\nimport { muiPalette as lightBrownMuiPalette } from './colors/lightBrown';\nimport './styles/font.css';\n\nexport const theme = createTheme({\n  cssVariables: {\n    colorSchemeSelector: 'data-toolpad-color-scheme',\n  },\n  colorSchemes: {\n    light: lightBrownMuiPalette,\n    dark: darkBlueMuiPalette,\n  },\n  breakpoints: {\n    values: {\n      xs: 0,\n      sm: 600,\n      md: 600,\n      lg: 1200,\n      xl: 1536,\n    },\n  },\n  shape: {\n    borderRadius: 8,\n  },\n  // Customize your theme here if needed\n  components: {\n    // buttons\n    MuiButton: buttonTheme,\n    MuiButtonBase: buttonBaseTheme,\n    MuiIconButton: iconButtonTheme,\n    // typography\n    MuiTypography: typographyTheme,\n  },\n});","\nimport { \n  type ColorTheme, \n  type ColorSystemOptions \n} from './_utils'\n\nconst themeColor = {\n  themeType: 'dark',\n  name: 'darkBlue',\n\n  colorScheme:{\n    primary:{\n      1: 'rgba(5, 20, 35, 1)',\n      2: 'rgba(20, 40, 65, 1)',\n      3: 'rgba(40, 80, 110, 1)',\n      4: 'rgba(65, 110, 140, 1)',\n      5: 'rgba(90, 140, 170, 1)',\n      6: 'rgba(115, 170, 200, 1)',\n      main: 2,\n    },\n    secondary:{\n      1: 'rgba(250, 250, 255, 1)',\n      2: 'rgba(245, 245, 255, 1)',\n      3: 'rgba(200, 235, 240, 1)',\n      4: 'rgba(165, 220, 225, 1)',\n      5: 'rgba(125, 200, 210, 1)',\n      6: 'rgba(20, 215, 215, 1)',\n      main: 5,\n    },\n    error: 'rgba(255, 0, 100, 1)',\n    warning: 'rgba(230, 190, 125, 1)',\n    info: 'rgba(100, 180, 255, 1)',\n    success: 'rgba(100, 255, 150, 1)',\n    focus: 'rgba(255, 0, 100, 1)',\n    disabled: 'rgba(100, 120, 140, 1)',\n    background: {\n      default: 'rgba(29, 29, 29, 1)',\n    },\n    text: {\n      primary: 'rgba(240, 240, 255, 1)',\n      secondary: 'rgba(180, 200, 220, 1)',\n      subscript: 'rgba(137, 137, 150, 1)',\n    }\n  },\n\n} as const satisfies ColorTheme\n\nexport const muiPalette = {\n  palette: {\n    mode: 'dark',\n    primary: {\n      dark: themeColor.colorScheme.primary[1],\n      main: themeColor.colorScheme.primary[themeColor.colorScheme.primary.main],\n      light: themeColor.colorScheme.primary[6],\n    },\n    secondary: {\n      dark: themeColor.colorScheme.secondary[6],\n      main: themeColor.colorScheme.secondary[themeColor.colorScheme.secondary.main],\n      light: themeColor.colorScheme.secondary[1],\n    },\n    error: {\n      main: themeColor.colorScheme.error,\n    },\n    warning: {\n      main: themeColor.colorScheme.warning,\n    },\n    info: {\n      main: themeColor.colorScheme.info,\n    },\n    success: {\n      main: themeColor.colorScheme.success,\n    },\n    background: {\n      default: themeColor.colorScheme.background.default,\n    },\n    text: {\n      primary: themeColor.colorScheme.text.primary,\n      secondary: themeColor.colorScheme.text.secondary,\n      disabled: themeColor.colorScheme.disabled,\n    },\n\n    \"text-1\": themeColor.colorScheme.text.primary,\n    \"text-subscript\": `color-mix(in lab, ${themeColor.colorScheme.text.subscript}, var(--mui-palette-primary-light) 50%)`,    \n    \"text-href\": `color-mix(in lab, var(--mui-palette-primary-main) 10%, var(--mui-palette-focus-1) 90%)`,\n    \"focus-1\": themeColor.colorScheme.focus,\n    \"shadow-border-1\": `inset 0 0 0px 2px var(--mui-palette-primary-gray)`,\n    \"primary-gray\": `color-mix(in lab, var(--mui-palette-primary-main) 80%, hsla(0, 0%, 30%, 1.00) 20%)`,\n  },\n} as const satisfies ColorSystemOptions","\nimport { \n  type ColorTheme, \n  type ColorSystemOptions \n} from './_utils'\n\nexport const themeColor = {\n  themeType: 'light',\n  name: 'lightBrown',\n\n  colorScheme:{\n    primary:{\n      1: 'rgba(255, 255, 255, 1)',\n      2: 'rgba(255, 255, 220, 1)',\n      3: 'rgba(255, 245, 215, 1)',\n      4: 'rgba(255, 245, 215, 1)',\n      5: 'rgba(245, 220, 165, 1)',\n      6: 'rgba(240, 200, 165, 1)',\n      main: 4,\n    },\n    secondary:{\n      1: 'rgba(35, 10, 25, 1)',\n      2: 'rgba(45, 20, 30, 1)',\n      3: 'rgba(75, 20, 30, 1)',\n      4: 'rgba(105, 45, 40, 1)',\n      5: 'rgba(130, 60, 40, 1)',\n      6: 'rgba(165, 105, 65, 1)',\n      main: 4,\n    },\n    error: 'rgba(255, 45, 120, 1)',\n    warning: 'rgba(230, 190, 125, 1)',\n    info: 'rgba(100, 180, 255, 1)',\n    success: 'rgba(100, 255, 150, 1)',\n    focus: 'rgba(255, 45, 120, 1)',\n    disabled: 'rgba(100, 120, 140, 1)',\n    background: {\n      default: 'rgba(255, 255, 255, 1)',\n    },\n    text: {\n      primary: 'rgba(35, 10, 25, 1)',\n      secondary: 'rgba(180, 200, 220, 1)',\n      subscript: 'rgba(92, 92, 92, 1)',\n    }\n  },\n\n} as const satisfies ColorTheme\n\nexport const muiPalette = {\n  palette: {\n    mode: 'dark',\n    primary: {\n      dark: themeColor.colorScheme.primary[6],\n      main: themeColor.colorScheme.primary[themeColor.colorScheme.primary.main],\n      light: themeColor.colorScheme.primary[1],\n    },\n    secondary: {\n      dark: themeColor.colorScheme.secondary[3],\n      main: themeColor.colorScheme.secondary[themeColor.colorScheme.secondary.main],\n      light: themeColor.colorScheme.secondary[6],\n    },\n    error: {\n      main: themeColor.colorScheme.error,\n    },\n    warning: {\n      main: themeColor.colorScheme.warning,\n    },\n    info: {\n      main: themeColor.colorScheme.info,\n    },\n    success: {\n      main: themeColor.colorScheme.success,\n    },\n    background: {\n      default: themeColor.colorScheme.background.default,\n    },\n    text: {\n      primary: themeColor.colorScheme.text.primary,\n      secondary: themeColor.colorScheme.text.secondary,\n      disabled: themeColor.colorScheme.disabled,\n    },\n\n    \"text-1\": themeColor.colorScheme.text.primary,\n    \"text-subscript\": `color-mix(in lab, ${themeColor.colorScheme.text.subscript}, var(--mui-palette-primary-main) 50%)`,    \n    \"text-href\": `color-mix(in lab, var(--mui-palette-primary-main) 10%, var(--mui-palette-focus-1) 90%)`,\n    \"focus-1\": themeColor.colorScheme.focus,\n    \"shadow-border-1\": `inset 0 0 0px 2px var(--mui-palette-primary-gray)`,\n    \"primary-gray\": `color-mix(in lab, var(--mui-palette-primary-main) 80%, hsla(0, 0%, 30%, 1.00) 20%)`,\n  },\n} as const satisfies ColorSystemOptions","import { useColorScheme,  } from '@mui/material/styles';\nimport Brightness7Icon from '@mui/icons-material/Brightness7';\nimport Brightness4OutlinedIcon from '@mui/icons-material/Brightness4Outlined';\n\nimport IconButton from '@mui/material/IconButton'\n\nexport default function ToggleButton() {\n  const { mode, setMode } = useColorScheme();\n  const isDark = mode === 'dark';\n\n  function toggle() {\n    setMode(isDark ? 'light' : 'dark');\n  }\n  return (\n    <IconButton onClick={toggle}>\n      {isDark ? <Brightness7Icon /> : <Brightness4OutlinedIcon />}\n    </IconButton>\n  );\n}"],"mappings":"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","names":["ThemeProvider","themeColor","muiPalette","muiPalette","ThemeProvider","jsx"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/timeline.d.mts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import * as _mui_lab_Timeline from '@mui/lab/Timeline';
+import TimelineItem from '@mui/lab/TimelineItem';
+import { SxProps, Theme } from '@mui/material/styles';
+
+/**
+ * Mui Timeline
+ *
+ * [Doc] (https://mui.com/material-ui/api/timeline/)
+ */
+declare const MuiTLContainer: react.ForwardRefExoticComponent<_mui_lab_Timeline.TimelineProps & react.RefAttributes<HTMLUListElement>>;
+/**
+ * Mui Timeline Item
+ *
+ * [Doc] (https://mui.com/material-ui/api/timeline-item/)
+ */
+declare function MuiTLItem({ content, icon, title, oppsiteContent, iconOnClick, isAnimated, isCompleted, isIconDisabled, sx, ...rest }: {
+    oppsiteContent?: React.ReactNode;
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    iconOnClick?: () => void;
+    isAnimated?: boolean;
+    isCompleted?: boolean;
+    isIconDisabled?: boolean;
+    sx?: SxProps<Theme>;
+} & Omit<React.ComponentProps<typeof TimelineItem>, "content" | "sx" | "title">): react_jsx_runtime.JSX.Element;
+
+export { MuiTLContainer, MuiTLItem };

package/dist/timeline.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import * as _mui_lab_Timeline from '@mui/lab/Timeline';
+import TimelineItem from '@mui/lab/TimelineItem';
+import { SxProps, Theme } from '@mui/material/styles';
+
+/**
+ * Mui Timeline
+ *
+ * [Doc] (https://mui.com/material-ui/api/timeline/)
+ */
+declare const MuiTLContainer: react.ForwardRefExoticComponent<_mui_lab_Timeline.TimelineProps & react.RefAttributes<HTMLUListElement>>;
+/**
+ * Mui Timeline Item
+ *
+ * [Doc] (https://mui.com/material-ui/api/timeline-item/)
+ */
+declare function MuiTLItem({ content, icon, title, oppsiteContent, iconOnClick, isAnimated, isCompleted, isIconDisabled, sx, ...rest }: {
+    oppsiteContent?: React.ReactNode;
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    iconOnClick?: () => void;
+    isAnimated?: boolean;
+    isCompleted?: boolean;
+    isIconDisabled?: boolean;
+    sx?: SxProps<Theme>;
+} & Omit<React.ComponentProps<typeof TimelineItem>, "content" | "sx" | "title">): react_jsx_runtime.JSX.Element;
+
+export { MuiTLContainer, MuiTLItem };

package/dist/timeline.js

@@ -0,0 +1,273 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/elemental/Timeline/index.ts
+var Timeline_exports = {};
+__export(Timeline_exports, {
+  MuiTLContainer: () => MuiTLContainer,
+  MuiTLItem: () => MuiTLItem
+});
+module.exports = __toCommonJS(Timeline_exports);
+
+// src/components/elemental/Timeline/MuiTimeline/MuiTimeline.tsx
+var import_Timeline = __toESM(require("@mui/lab/Timeline"));
+var import_TimelineItem = __toESM(require("@mui/lab/TimelineItem"));
+var import_TimelineSeparator = __toESM(require("@mui/lab/TimelineSeparator"));
+var import_TimelineConnector = __toESM(require("@mui/lab/TimelineConnector"));
+var import_TimelineContent = __toESM(require("@mui/lab/TimelineContent"));
+var import_TimelineOppositeContent = __toESM(require("@mui/lab/TimelineOppositeContent"));
+var import_TimelineDot = __toESM(require("@mui/lab/TimelineDot"));
+var import_styles = require("@mui/material/styles");
+
+// src/components/elemental/Box/src/index.ts
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_Stack = __toESM(require("@mui/material/Stack"));
+var import_Grid = __toESM(require("@mui/material/Grid"));
+
+// src/components/elemental/Button/src/IconButton/IconButton.tsx
+var import_react = require("react");
+var import_IconButton = __toESM(require("@mui/material/IconButton"));
+
+// src/components/elemental/Tooltip/src/Tooltip/index.ts
+var import_Tooltip = __toESM(require("@mui/material/Tooltip"));
+
+// src/components/elemental/Button/src/IconButton/IconButton.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var IconButton = (0, import_react.forwardRef)(({
+  title = "",
+  children,
+  color,
+  size,
+  slotProps,
+  selected,
+  className,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Tooltip.default,
+    {
+      title,
+      slotProps: {
+        popper: {
+          sx: {
+            textTransform: "capitalize"
+          }
+        },
+        ...slotProps?.tooltip
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { component: "span", sx: { width: "fit-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_IconButton.default,
+        {
+          ref,
+          color,
+          size,
+          className: [className, selected ? "Mui-selected" : ""].filter(Boolean).join(" "),
+          ...props,
+          children
+        }
+      ) })
+    }
+  );
+});
+var IconButton_default = IconButton;
+
+// src/components/elemental/Timeline/MuiTimeline/theme.ts
+var muiTimelineRootSx = {
+  "--content-text": "var(--mui-palette-text-subscript)",
+  "--connector-border-color": "var(--mui-palette-focus-1)",
+  "--connector-focus-color": "var(--mui-palette-focus-1)",
+  "--connector-non-focus-color": "var(--mui-palette-background-grey-1)"
+};
+
+// src/components/elemental/Timeline/MuiTimeline/MuiTimeline.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var nodeSpacing = "2px";
+var MuiTLContainer = import_Timeline.default;
+function MuiTLItem({
+  content,
+  icon,
+  title,
+  oppsiteContent,
+  iconOnClick,
+  isAnimated = false,
+  isCompleted = false,
+  isIconDisabled = false,
+  sx,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(StyledTLI, { isIconDisabled, ...rest, sx, children: [
+    oppsiteContent && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_TimelineOppositeContent.default,
+      {
+        sx: {
+          marginTop: nodeSpacing,
+          color: "var(--content-text)",
+          paddingTop: "2px"
+        },
+        children: oppsiteContent
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_TimelineSeparator.default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_TimelineDot.default, { sx: {
+        "&.MuiTimelineDot-root": {
+          padding: 0,
+          background: "transparent",
+          border: "unset",
+          height: "25px",
+          width: "25px",
+          overflow: "hidden",
+          borderRadius: "50%",
+          margin: `${nodeSpacing} 0`,
+          "&>span": {
+            width: "100%",
+            height: "100%"
+          }
+        },
+        "& .MuiButtonBase-root": {
+          height: "100%",
+          width: "100%",
+          borderRadius: "50%",
+          "& svg": {
+            fontSize: "1em"
+          }
+        }
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconButton_default, { onClick: iconOnClick, disabled: isIconDisabled, sx: { padding: 0 }, children: icon }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledTLConnector, { isAnimated, isCompleted })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_TimelineContent.default, { sx: {
+      color: "var(--content-text)",
+      marginTop: `${nodeSpacing}`,
+      "&.MuiTimelineContent-root": {
+        padding: "12px 16px",
+        paddingTop: "2px"
+      }
+    }, children: [
+      title,
+      content
+    ] })
+  ] });
+}
+var StyledTLI = (0, import_styles.styled)(import_TimelineItem.default, {
+  shouldForwardProp: (prop) => prop !== "isIconDisabled"
+})(() => ({
+  ...muiTimelineRootSx,
+  "& .MuiTimelineDot-root": {
+    boxShadow: "none",
+    borderRadius: "50%"
+  },
+  // hover effect 
+  "&.MuiTimelineItem-root:hover .MuiTimelineSeparator-root": {
+    // change separator color
+    "& .MuiTimelineConnector-root": {},
+    // change dot color
+    "& .MuiTimelineDot-root": {
+      boxShadow: "var(--shadow)",
+      borderRadius: "50%"
+    }
+  },
+  variants: [
+    {
+      props: (p) => p.isIconDisabled,
+      style: {
+        // orginal shadow
+        "--shadow": "none"
+      }
+    },
+    {
+      props: (p) => !p.isIconDisabled,
+      style: {
+        "--shadow": "var(--shadow-outset-1)"
+      }
+    }
+  ]
+}));
+var StyledTLConnector = (0, import_styles.styled)(import_TimelineConnector.default, {
+  shouldForwardProp: (prop) => prop !== "isAnimated" && prop !== "isCompleted"
+})(() => ({
+  backgroundColor: "var(--bg)",
+  position: "relative",
+  overflow: "hidden",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: "-100%",
+    left: 0,
+    width: "0%",
+    height: "200%",
+    borderRight: "2px dashed var(--border-color)",
+    animation: "var(--animated-connector)"
+  },
+  "@keyframes dash": {
+    "to": { transform: "translateY(50%)" }
+  },
+  variants: [
+    // animation + isCompleted
+    {
+      props: (p) => p.isAnimated && p.isCompleted,
+      style: {
+        "--animated-connector": "dash 10s linear infinite",
+        "--bg": "transparent",
+        "--border-color": "var(--connector-border-color)"
+      }
+    },
+    // no animation + isCompleted
+    {
+      props: (p) => !p.isAnimated && p.isCompleted,
+      style: {
+        "--animated-connector": "none",
+        "--bg": "var(--connector-focus-color)",
+        "--border-color": "transparent"
+      }
+    },
+    // animation + not isCompleted
+    {
+      props: (p) => p.isAnimated && !p.isCompleted,
+      style: {
+        "--animated-connector": "dash 1s linear infinite",
+        "--bg": "transparent",
+        "--border-color": "var(--connector-border-color)"
+      }
+    },
+    // no animation + not isCompleted
+    {
+      props: (p) => !p.isAnimated && !p.isCompleted,
+      style: {
+        "--animated-connector": "none",
+        "--bg": "var(--connector-non-focus-color)",
+        "--border-color": "transparent"
+      }
+    }
+  ]
+}));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MuiTLContainer,
+  MuiTLItem
+});
+//# sourceMappingURL=timeline.js.map