@orbe-agro/client-core 5.3.147 → 5.3.156

package/dist/@ecme/views/guide/Documentations/components/Introduction.js.map

@@ -1 +1 @@
-{"version":3,"file":"Introduction.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Introduction.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nconst coreFeatures = [\n    {\n        id: 'react',\n        name: 'React',\n        img: '/img/thumbs/react.png',\n        src: 'https://reactjs.org/',\n        description:\n            'A popular JavaScript library for building user interfaces.',\n    },\n    {\n        id: 'vite',\n        name: 'Vite',\n        img: '/img/thumbs/vite.png',\n        src: 'https://vitejs.dev/',\n        description:\n            'Vite is a modern, blazing-fast tool for scaffolding and bundling',\n    },\n    {\n        id: 'typeScript',\n        name: 'TypeScript',\n        img: '/img/thumbs/typeScript.png',\n        src: 'https://www.typescriptlang.org/',\n        description:\n            'TypeScript is a strongly typed programming language that builds on JavaScript',\n    },\n    {\n        id: 'tailwind',\n        name: 'Tailwind Css',\n        img: '/img/thumbs/tailwind.png',\n        src: 'https://tailwindcss.com/',\n        description: 'A utility-first CSS framework packed with classes.',\n    },\n]\n\nconst Introduction = () => {\n    return (\n        <>\n            <div id=\"introduction\" className=\"mb-8\">\n                <p>\n                    Ecme is not just another web template—it's a meticulously\n                    crafted masterpiece that stands out in a market flooded with\n                    generic, poorly designed options. Every aspect of Ecme, from\n                    its elegant UI to its robust code architecture, has been\n                    thoughtfully designed to ensure unparalleled flexibility and\n                    scalability for your projects.\n                </p>\n                <p>\n                    Unlike other templates that rely on common open-source\n                    libraries, Ecme features a comprehensive suite of\n                    custom-built UI components. These components are not only\n                    rich in functionality but also offer greater control,\n                    allowing you to tailor every detail to meet your specific\n                    needs.\n                </p>\n                <p>\n                    Ecme is equipped with advanced features like multi-language\n                    support, dark and light mode, right-to-left layout, theme\n                    color customization, and the ability to switch seamlessly\n                    between six pre-designed layouts. Whether you're building a\n                    global platform or a niche application, Ecme's versatility\n                    has you covered.\n                </p>\n                <p>\n                    Moreover, the included application examples are grounded in\n                    real-world use cases, giving you practical, ready-to-use\n                    solutions for your projects. With Ecme, you're not just\n                    buying a template—you're investing in a powerful, flexible\n                    foundation for your web development success.\n                </p>\n            </div>\n            <div id=\"coreLibrary\">\n                <h4>Core libraries used</h4>\n                <p>Here's a list of the core libraries we use in Ecme</p>\n                <div className=\"grid grid-cols-2 gap-4\">\n                    {coreFeatures.map((feat) => (\n                        <a\n                            key={feat.id}\n                            className=\"border-2 border-gray-200 dark:border-gray-700 hover:border-primary flex flex-col items-center justify-center py-4 rounded-xl gap-2 no-underline\"\n                            href={feat.src}\n                            target=\"_blank\"\n                            rel=\"noreferrer\"\n                        >\n                            <img\n                                className=\"max-h-16\"\n                                src={feat.img}\n                                alt={feat.name}\n                            />\n                            <div className=\"text-center\">\n                                <div className=\"heading-text font-bold\">\n                                    {feat.name}\n                                </div>\n                            </div>\n                        </a>\n                    ))}\n                </div>\n            </div>\n        </>\n    )\n}\n\nexport default Introduction\n"],"names":["coreFeatures","Introduction","jsxs","Fragment","jsx","feat"],"mappings":";AACA,MAAMA,IAAe;AAAA,EACjB;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aACI;AAAA,EAAA;AAAA,EAER;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aACI;AAAA,EAAA;AAAA,EAER;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aACI;AAAA,EAAA;AAAA,EAER;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aAAa;AAAA,EAAA;AAErB,GAEMC,IAAe,MAEb,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,EAAA,gBAAAD,EAAC,OAAA,EAAI,IAAG,gBAAe,WAAU,QAC7B,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAE,UAAA,2UAAA,CAOH;AAAA,IACA,gBAAAA,EAAC,OAAE,UAAA,4RAAA,CAOH;AAAA,IACA,gBAAAA,EAAC,OAAE,UAAA,0TAAA,CAOH;AAAA,IACA,gBAAAA,EAAC,OAAE,UAAA,uRAAA,CAMH;AAAA,EAAA,GACJ;AAAA,EACA,gBAAAF,EAAC,OAAA,EAAI,IAAG,eACJ,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAA,sBAAA,CAAmB;AAAA,IACvB,gBAAAA,EAAC,OAAE,UAAA,qDAAA,CAAkD;AAAA,sBACpD,OAAA,EAAI,WAAU,0BACV,UAAAJ,EAAa,IAAI,CAACK,MACf,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,WAAU;AAAA,QACV,MAAMG,EAAK;AAAA,QACX,QAAO;AAAA,QACP,KAAI;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAU;AAAA,cACV,KAAKC,EAAK;AAAA,cACV,KAAKA,EAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEd,gBAAAD,EAAC,OAAA,EAAI,WAAU,eACX,UAAA,gBAAAA,EAAC,SAAI,WAAU,0BACV,UAAAC,EAAK,KAAA,CACV,EAAA,CACJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAfKA,EAAK;AAAA,IAAA,CAiBjB,EAAA,CACL;AAAA,EAAA,EAAA,CACJ;AAAA,GACJ;"}
+{"version":3,"file":"Introduction.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Introduction.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nconst coreFeatures = [\n    {\n        id: 'react',\n        name: 'React',\n        img: '/img/thumbs/react.png',\n        src: 'https://reactjs.org/',\n        description:\n            'A popular JavaScript library for building user interfaces.',\n    },\n    {\n        id: 'vite',\n        name: 'Vite',\n        img: '/img/thumbs/vite.png',\n        src: 'https://vitejs.dev/',\n        description:\n            'Vite is a modern, blazing-fast tool for scaffolding and bundling',\n    },\n    {\n        id: 'typeScript',\n        name: 'TypeScript',\n        img: '/img/thumbs/typeScript.png',\n        src: 'https://www.typescriptlang.org/',\n        description:\n            'TypeScript is a strongly typed programming language that builds on JavaScript',\n    },\n    {\n        id: 'tailwind',\n        name: 'Tailwind Css',\n        img: '/img/thumbs/tailwind.png',\n        src: 'https://tailwindcss.com/',\n        description: 'A utility-first CSS framework packed with classes.',\n    },\n]\n\nconst Introduction = () => {\n    return (\n        <>\n            <div id=\"introduction\" className=\"mb-8\">\n                <p>\n                    Ecme is not just another web template—it's a meticulously\n                    crafted masterpiece that stands out in a market flooded with\n                    generic, poorly designed options. Every aspect of Ecme, from\n                    its elegant UI to its robust code architecture, has been\n                    thoughtfully designed to ensure unparalleled flexibility and\n                    scalability for your projects.\n                </p>\n                <p>\n                    Unlike other templates that rely on common open-source\n                    libraries, Ecme features a comprehensive suite of\n                    custom-built UI components. These components are not only\n                    rich in functionality but also offer greater control,\n                    allowing you to tailor every detail to meet your specific\n                    needs.\n                </p>\n                <p>\n                    Ecme is equipped with advanced features like multi-language\n                    support, dark and light mode, right-to-left layout, theme\n                    color customization, and the ability to switch seamlessly\n                    between six pre-designed layouts. Whether you're building a\n                    global platform or a niche application, Ecme's versatility\n                    has you covered.\n                </p>\n                <p>\n                    Moreover, the included application examples are grounded in\n                    real-world use cases, giving you practical, ready-to-use\n                    solutions for your projects. With Ecme, you're not just\n                    buying a template—you're investing in a powerful, flexible\n                    foundation for your web development success.\n                </p>\n            </div>\n            <div id=\"coreLibrary\">\n                <h4>Core libraries used</h4>\n                <p>Here's a list of the core libraries we use in Ecme</p>\n                <div className=\"grid grid-cols-2 gap-4\">\n                    {coreFeatures.map((feat) => (\n                        <a\n                            key={feat.id}\n                            className=\"border-2 border-gray-200 dark:border-gray-700 hover:border-primary flex flex-col items-center justify-center py-4 rounded-xl gap-2 no-underline\"\n                            href={feat.src}\n                            target=\"_blank\"\n                            rel=\"noreferrer\"\n                        >\n                            <img\n                                className=\"max-h-16\"\n                                src={feat.img}\n                                alt={feat.name}\n                            />\n                            <div className=\"text-center\">\n                                <div className=\"heading-text font-bold\">\n                                    {feat.name}\n                                </div>\n                            </div>\n                        </a>\n                    ))}\n                </div>\n            </div>\n        </>\n    )\n}\n\nexport default Introduction\n"],"names":["coreFeatures","Introduction","jsxs","Fragment","jsx","feat"],"mappings":";AACA,MAAMA,IAAe;AAAA,EACjB;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aACI;AAAA,EACR;AAAA,EACA;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aACI;AAAA,EACR;AAAA,EACA;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aACI;AAAA,EACR;AAAA,EACA;AAAA,IACI,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA,IACL,KAAK;AAAA,IACL,aAAa;AAAA,EAAA;AAErB,GAEMC,IAAe,MAGT,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAA,gBAAAD,EAAC,OAAI,EAAA,IAAG,gBAAe,WAAU,QAC7B,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAE,UAOH,2UAAA,CAAA;AAAA,IACA,gBAAAA,EAAC,OAAE,UAOH,4RAAA,CAAA;AAAA,IACA,gBAAAA,EAAC,OAAE,UAOH,0TAAA,CAAA;AAAA,IACA,gBAAAA,EAAC,OAAE,UAMH,uRAAA,CAAA;AAAA,EAAA,GACJ;AAAA,EACA,gBAAAF,EAAC,OAAI,EAAA,IAAG,eACJ,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAmB,sBAAA,CAAA;AAAA,IACvB,gBAAAA,EAAC,OAAE,UAAkD,qDAAA,CAAA;AAAA,sBACpD,OAAI,EAAA,WAAU,0BACV,UAAaJ,EAAA,IAAI,CAACK,MACf,gBAAAH;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,WAAU;AAAA,QACV,MAAMG,EAAK;AAAA,QACX,QAAO;AAAA,QACP,KAAI;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAU;AAAA,cACV,KAAKC,EAAK;AAAA,cACV,KAAKA,EAAK;AAAA,YAAA;AAAA,UACd;AAAA,UACA,gBAAAD,EAAC,OAAI,EAAA,WAAU,eACX,UAAA,gBAAAA,EAAC,SAAI,WAAU,0BACV,UAAKC,EAAA,KACV,CAAA,EACJ,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAfKA,EAAK;AAAA,IAAA,CAiBjB,EACL,CAAA;AAAA,EAAA,EACJ,CAAA;AAAA,GACJ;"}

package/dist/@ecme/views/guide/Documentations/components/Layouts.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layouts.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Layouts.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\nimport type { CSSProperties } from 'react'\n\nconst Layouts = () => {\n    return (\n        <>\n            <p>\n                Ecme provide 6 types of post login layouts & 3 types of auth\n                layouts, all layouts component can be found under directory{' '}\n                <code>src/components/layouts/PostLoginLayout/components*</code>\n                and all the components used within layouts can be found under{' '}\n                <code>src/components/template/*</code>\n            </p>\n            <p>The following was the post login layouts that we had:</p>\n            <ul>\n                <li>\n                    Collapsible side - <code>&apos;collapsibleSide&apos;</code>\n                </li>\n                <li>\n                    Stacked side - <code>&apos;stackedSide&apos;</code>\n                </li>\n                <li>\n                    Top bar classic - <code>&apos;topBarClassic&apos;</code>\n                </li>\n                <li>\n                    Frameless side - <code>&apos;framelessSide&apos;</code>\n                </li>\n                <li>\n                    Content overlay - <code>&apos;contentOverlay&apos;</code>\n                </li>\n                <li>\n                    Blank - <code>&apos;blank&apos;</code>\n                </li>\n            </ul>\n            <div className=\"mt-10\" id=\"configuringLayout\">\n                <div className=\"mt-10\" id=\"classic\">\n                    <h5>Configuring Layout</h5>\n                    <p className=\"mt-1\">\n                        You can config the initial layout in{' '}\n                        <code>src/configs/theme.config.ts</code> with the string\n                        value above\n                    </p>\n                    <SyntaxHighlighter language=\"js\">{`export const themeConfig = {\n    ...\n    layout: {\n        type: 'framelessSide',\n        ...\n    },\n}`}</SyntaxHighlighter>\n                    <p>\n                        Here&apos;s available values & key for configuring the{' '}\n                        <code>layout</code> field\n                    </p>\n                    <DemoComponentApi\n                        hideApiTitle\n                        keyText=\"properties\"\n                        api={[\n                            {\n                                api: [\n                                    {\n                                        propName: 'type',\n                                        type: `<code>'blank'</code>  | <code>'collapsibleSide'</code> | <code>'stackedSide'</code> | <code>'topBarClassic'</code> | <code>'framelessSide'</code> | <code>'contentOverlay'</code>`,\n                                        default: `<code>'modern'</code>`,\n                                        desc: 'Type of the application layout',\n                                    },\n                                    {\n                                        propName: 'sideNavCollapse',\n                                        type: `<code>boolean</code>`,\n                                        default: `<code>false</code>`,\n                                        desc: `Whether to collapse the side navigation (only only applicable when <code>type</code> is <code>'classic'</code> or <code>'modern'</code>)`,\n                                    },\n                                ],\n                            },\n                        ]}\n                    />\n                </div>\n            </div>\n            <div className=\"mt-10\" id=\"overridingLayouts\">\n                <h5>Overriding layouts</h5>\n                <p className=\"mt-1\">\n                    In general, all route views will follow the settings of the\n                    layout in <code>theme.config.ts</code>. However, if there\n                    are some cases where you want to show a different layout in\n                    a certiain route view, you can the layout value you wish\n                    under the route <code>meta</code> to overide the current\n                    layout as we mentioned in <strong>Routing</strong> guide.\n                </p>\n                <SyntaxHighlighter language=\"js\">{`export const protectedRoutes = [\n    {\n        key: 'a-unique-id-for-this-view'\n        path: 'path',\n        component: React.lazy(() => import('views/Component')),\n        authority: [],\n        meta: {\n            ...,\n            layout: 'blank'\n        }\n    },\t\t\t\n]`}</SyntaxHighlighter>\n            </div>\n            <div className=\"mt-10\" id=\"authLayouts\">\n                <h5>Auth layouts</h5>\n                <p>\n                    Configuring auth layout is slightly different from the\n                    above, just need to visit{' '}\n                    <code>src/components/layouts/AuthLayout/AuthLayout.ts</code>{' '}\n                    and replace the wrapper component. For example, switching{' '}\n                    <code>side</code> to <code>simple</code>\n                </p>\n                <SyntaxHighlighter\n                    language=\"js\"\n                    wrapLines={true}\n                    showLineNumbers={true}\n                    lineProps={(lineNumber) => {\n                        const style: CSSProperties = { display: 'block' }\n                        if ([9].includes(lineNumber)) {\n                            style.backgroundColor = '#00ff002e'\n                        } else if ([10].includes(lineNumber)) {\n                            style.backgroundColor = '#ff00001f'\n                        }\n                        return { style }\n                    }}\n                >{`import { useMemo, lazy } from 'react'\nimport type { CommonProps } from '@/@types/common'\nimport type { LazyExoticComponent } from 'react'\n\ntype LayoutType = 'simple' | 'split' | 'side'\n\ntype Layouts = Record<LayoutType, LazyExoticComponent<<T extends CommonProps>(props: T) => JSX.Element>>\n\nconst currentLayoutType: LayoutType = 'side'\nconst currentLayoutType: LayoutType = 'simple'\n\nconst layouts: Layouts = {\n    simple: lazy(() => import('./Simple')),\n    split: lazy(() => import('./Split')),\n    side: lazy(() => import('./Side')),\n}\n\nconst AuthLayout = ({ children }: CommonProps) => {\n\n    const Layout = useMemo(() => {\n        return layouts[currentLayoutType]\n    }, [])\n\n    return (\n        <Layout>{children}</Layout>\n    )\n}\n\nexport default AuthLayout`}</SyntaxHighlighter>\n            </div>\n        </>\n    )\n}\n\nexport default Layouts\n"],"names":["Layouts","jsxs","Fragment","jsx","SyntaxHighlighter","DemoComponentApi","lineNumber","style"],"mappings":"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"}
+{"version":3,"file":"Layouts.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Layouts.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\nimport type { CSSProperties } from 'react'\n\nconst Layouts = () => {\n    return (\n        <>\n            <p>\n                Ecme provide 6 types of post login layouts & 3 types of auth\n                layouts, all layouts component can be found under directory{' '}\n                <code>src/components/layouts/PostLoginLayout/components*</code>\n                and all the components used within layouts can be found under{' '}\n                <code>src/components/template/*</code>\n            </p>\n            <p>The following was the post login layouts that we had:</p>\n            <ul>\n                <li>\n                    Collapsible side - <code>&apos;collapsibleSide&apos;</code>\n                </li>\n                <li>\n                    Stacked side - <code>&apos;stackedSide&apos;</code>\n                </li>\n                <li>\n                    Top bar classic - <code>&apos;topBarClassic&apos;</code>\n                </li>\n                <li>\n                    Frameless side - <code>&apos;framelessSide&apos;</code>\n                </li>\n                <li>\n                    Content overlay - <code>&apos;contentOverlay&apos;</code>\n                </li>\n                <li>\n                    Blank - <code>&apos;blank&apos;</code>\n                </li>\n            </ul>\n            <div className=\"mt-10\" id=\"configuringLayout\">\n                <div className=\"mt-10\" id=\"classic\">\n                    <h5>Configuring Layout</h5>\n                    <p className=\"mt-1\">\n                        You can config the initial layout in{' '}\n                        <code>src/configs/theme.config.ts</code> with the string\n                        value above\n                    </p>\n                    <SyntaxHighlighter language=\"js\">{`export const themeConfig = {\n    ...\n    layout: {\n        type: 'framelessSide',\n        ...\n    },\n}`}</SyntaxHighlighter>\n                    <p>\n                        Here&apos;s available values & key for configuring the{' '}\n                        <code>layout</code> field\n                    </p>\n                    <DemoComponentApi\n                        hideApiTitle\n                        keyText=\"properties\"\n                        api={[\n                            {\n                                api: [\n                                    {\n                                        propName: 'type',\n                                        type: `<code>'blank'</code>  | <code>'collapsibleSide'</code> | <code>'stackedSide'</code> | <code>'topBarClassic'</code> | <code>'framelessSide'</code> | <code>'contentOverlay'</code>`,\n                                        default: `<code>'modern'</code>`,\n                                        desc: 'Type of the application layout',\n                                    },\n                                    {\n                                        propName: 'sideNavCollapse',\n                                        type: `<code>boolean</code>`,\n                                        default: `<code>false</code>`,\n                                        desc: `Whether to collapse the side navigation (only only applicable when <code>type</code> is <code>'classic'</code> or <code>'modern'</code>)`,\n                                    },\n                                ],\n                            },\n                        ]}\n                    />\n                </div>\n            </div>\n            <div className=\"mt-10\" id=\"overridingLayouts\">\n                <h5>Overriding layouts</h5>\n                <p className=\"mt-1\">\n                    In general, all route views will follow the settings of the\n                    layout in <code>theme.config.ts</code>. However, if there\n                    are some cases where you want to show a different layout in\n                    a certiain route view, you can the layout value you wish\n                    under the route <code>meta</code> to overide the current\n                    layout as we mentioned in <strong>Routing</strong> guide.\n                </p>\n                <SyntaxHighlighter language=\"js\">{`export const protectedRoutes = [\n    {\n        key: 'a-unique-id-for-this-view'\n        path: 'path',\n        component: React.lazy(() => import('views/Component')),\n        authority: [],\n        meta: {\n            ...,\n            layout: 'blank'\n        }\n    },\t\t\t\n]`}</SyntaxHighlighter>\n            </div>\n            <div className=\"mt-10\" id=\"authLayouts\">\n                <h5>Auth layouts</h5>\n                <p>\n                    Configuring auth layout is slightly different from the\n                    above, just need to visit{' '}\n                    <code>src/components/layouts/AuthLayout/AuthLayout.ts</code>{' '}\n                    and replace the wrapper component. For example, switching{' '}\n                    <code>side</code> to <code>simple</code>\n                </p>\n                <SyntaxHighlighter\n                    language=\"js\"\n                    wrapLines={true}\n                    showLineNumbers={true}\n                    lineProps={(lineNumber) => {\n                        const style: CSSProperties = { display: 'block' }\n                        if ([9].includes(lineNumber)) {\n                            style.backgroundColor = '#00ff002e'\n                        } else if ([10].includes(lineNumber)) {\n                            style.backgroundColor = '#ff00001f'\n                        }\n                        return { style }\n                    }}\n                >{`import { useMemo, lazy } from 'react'\nimport type { CommonProps } from '@/@types/common'\nimport type { LazyExoticComponent } from 'react'\n\ntype LayoutType = 'simple' | 'split' | 'side'\n\ntype Layouts = Record<LayoutType, LazyExoticComponent<<T extends CommonProps>(props: T) => JSX.Element>>\n\nconst currentLayoutType: LayoutType = 'side'\nconst currentLayoutType: LayoutType = 'simple'\n\nconst layouts: Layouts = {\n    simple: lazy(() => import('./Simple')),\n    split: lazy(() => import('./Split')),\n    side: lazy(() => import('./Side')),\n}\n\nconst AuthLayout = ({ children }: CommonProps) => {\n\n    const Layout = useMemo(() => {\n        return layouts[currentLayoutType]\n    }, [])\n\n    return (\n        <Layout>{children}</Layout>\n    )\n}\n\nexport default AuthLayout`}</SyntaxHighlighter>\n            </div>\n        </>\n    )\n}\n\nexport default Layouts\n"],"names":["Layouts","jsxs","Fragment","jsx","SyntaxHighlighter","DemoComponentApi","lineNumber","style"],"mappings":"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"}

package/dist/@ecme/views/guide/Documentations/components/MockApi.js.map

@@ -1 +1 @@
-{"version":3,"file":"MockApi.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/MockApi.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst MockApi = () => {\n    return (\n        <>\n            <p>\n                A mock API is a tool that simulates the behavior of a real API,\n                providing data responses as if they were from an actual server.\n                This can be extremely useful in situations where the real API is\n                not yet fully developed, or when you need to simulate API calls\n                for unit testing.\n            </p>\n            <p>\n                Ecme utilizes the{' '}\n                <a\n                    href=\"https://github.com/ctimmerm/axios-mock-adapter\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                >\n                    axios-mock-adapter\n                </a>{' '}\n                library to handle API mocking. All API interactions in our demo\n                operate through this adapter.\n            </p>\n            <div className=\"mt-10\" id=\"disableMockApi\">\n                <h5>Disabling Mock API</h5>\n                <p className=\"mt-1\">\n                    By default, the mock API is enabled in the{' '}\n                    <strong>starter-kit</strong>. If you want to disable it,\n                    simply set the <code>enableMock</code> field to{' '}\n                    <code>false</code> in <code>src/configs/app.config.ts</code>\n                    .\n                </p>\n                <SyntaxHighlighter language=\"ts\">{`const appConfig = {\n    ...,\n    enableMock: false\n}`}</SyntaxHighlighter>\n            </div>\n            <div className=\"mt-10\" id=\"usingMockApi\">\n                <h5>Using the Mock API</h5>\n                <p className=\"mt-1\">\n                    If you intend to use the mock API, follow these steps to\n                    create fake database data and APIs:\n                </p>\n                <ol>\n                    <li>\n                        <strong>Setup</strong>\n                        <p className=\"mt-1\">\n                            Go to <code>src/mock/MockAdapter.ts</code>. This\n                            file contains the basic configuration for the mock\n                            API.\n                        </p>\n                        <SyntaxHighlighter language=\"ts\">{`import MockAdapter from 'axios-mock-adapter'\nimport AxiosBase from '@/services/axios/AxiosBase'\n\nexport const mock = new MockAdapter(AxiosBase)`}</SyntaxHighlighter>\n                    </li>\n                    <li>\n                        <strong>Create a Mock API</strong>\n                        <p className=\"mt-1\">\n                            To create a mock API, add it to{' '}\n                            <code>src/mock/MockAdapter.ts</code>. For example,\n                            you can create <code>userFakeApi.ts</code>. Remember\n                            to import the mock instance from{' '}\n                            <code>MockAdapter.ts</code> to create a route.\n                        </p>\n                        <SyntaxHighlighter language=\"ts\">{`import { mock } from '../MockAdapter'\n\nmock.onGet('/api/users').reply(() => {\n\treturn [200, [\n        {\n            id: '1',\n            name: 'Carolyn Perkins',\n        },\n        {\n            id: '2',\n            name: 'Terrance Moreno',\n        },\n        {\n            id: '3',\n            name: 'Ron Vargas',\n        },\n    ]];\n})`}</SyntaxHighlighter>\n                    </li>\n                    <li>\n                        <p>\n                            Next, import your <code>userFakeApi.ts</code> file\n                            into the mock entry file{' '}\n                            <code>src/mock/index.ts</code>.\n                        </p>\n                        <SyntaxHighlighter language=\"ts\">{`import { mock } from './MockAdapter'\nimport './fakeApi/userFakeApi'\n...\n\nmock.onAny().passThrough();`}</SyntaxHighlighter>\n                    </li>\n                </ol>\n            </div>\n            <div>\n                <p>\n                    Now, you can make requests to this mock API and receive the\n                    static data you set up as the response.\n                </p>\n                <SyntaxHighlighter language=\"ts\">{`// service\nimport ApiService from \"./ApiService\"\n\ntype GetUserResponse = {\n    id: string\n    name: string\n    email: string\n}[]\n\nexport async function apiGetUsers () {\n    return ApiService.fetchData<GetUserResponse>({\n        url: '/api/getUsers',\n        method: 'get'\n    })\n}`}</SyntaxHighlighter>\n                <SyntaxHighlighter language=\"ts\">{`// component\nimport { useEffect } from 'react'\nimport { apiGetUsers } from './YourService.ts'\n\nconst YourComponent = () => {\n\n    const fetchData = async () => {\n        try {\n            const resp = await apiGetUsers()\n            console.log(resp.data)\n        } catch (errors) {\n            // handle errors\n        }\n    }\n\n    useEffect(() => {\n        fetchData()\n    }, [])\n\n    return (\n        // your component JSX\n    )\n}`}</SyntaxHighlighter>\n            </div>\n            <p>\n                For more information on using <code>axios-mock-adapter</code>,\n                visit the{' '}\n                <a\n                    href=\"https://github.com/ctimmerm/axios-mock-adapter\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                >\n                    official GitHub repository\n                </a>\n                .\n            </p>\n        </>\n    )\n}\n\nexport default MockApi\n"],"names":["MockApi","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":"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"}
+{"version":3,"file":"MockApi.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/MockApi.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst MockApi = () => {\n    return (\n        <>\n            <p>\n                A mock API is a tool that simulates the behavior of a real API,\n                providing data responses as if they were from an actual server.\n                This can be extremely useful in situations where the real API is\n                not yet fully developed, or when you need to simulate API calls\n                for unit testing.\n            </p>\n            <p>\n                Ecme utilizes the{' '}\n                <a\n                    href=\"https://github.com/ctimmerm/axios-mock-adapter\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                >\n                    axios-mock-adapter\n                </a>{' '}\n                library to handle API mocking. All API interactions in our demo\n                operate through this adapter.\n            </p>\n            <div className=\"mt-10\" id=\"disableMockApi\">\n                <h5>Disabling Mock API</h5>\n                <p className=\"mt-1\">\n                    By default, the mock API is enabled in the{' '}\n                    <strong>starter-kit</strong>. If you want to disable it,\n                    simply set the <code>enableMock</code> field to{' '}\n                    <code>false</code> in <code>src/configs/app.config.ts</code>\n                    .\n                </p>\n                <SyntaxHighlighter language=\"ts\">{`const appConfig = {\n    ...,\n    enableMock: false\n}`}</SyntaxHighlighter>\n            </div>\n            <div className=\"mt-10\" id=\"usingMockApi\">\n                <h5>Using the Mock API</h5>\n                <p className=\"mt-1\">\n                    If you intend to use the mock API, follow these steps to\n                    create fake database data and APIs:\n                </p>\n                <ol>\n                    <li>\n                        <strong>Setup</strong>\n                        <p className=\"mt-1\">\n                            Go to <code>src/mock/MockAdapter.ts</code>. This\n                            file contains the basic configuration for the mock\n                            API.\n                        </p>\n                        <SyntaxHighlighter language=\"ts\">{`import MockAdapter from 'axios-mock-adapter'\nimport AxiosBase from '@/services/axios/AxiosBase'\n\nexport const mock = new MockAdapter(AxiosBase)`}</SyntaxHighlighter>\n                    </li>\n                    <li>\n                        <strong>Create a Mock API</strong>\n                        <p className=\"mt-1\">\n                            To create a mock API, add it to{' '}\n                            <code>src/mock/MockAdapter.ts</code>. For example,\n                            you can create <code>userFakeApi.ts</code>. Remember\n                            to import the mock instance from{' '}\n                            <code>MockAdapter.ts</code> to create a route.\n                        </p>\n                        <SyntaxHighlighter language=\"ts\">{`import { mock } from '../MockAdapter'\n\nmock.onGet('/api/users').reply(() => {\n\treturn [200, [\n        {\n            id: '1',\n            name: 'Carolyn Perkins',\n        },\n        {\n            id: '2',\n            name: 'Terrance Moreno',\n        },\n        {\n            id: '3',\n            name: 'Ron Vargas',\n        },\n    ]];\n})`}</SyntaxHighlighter>\n                    </li>\n                    <li>\n                        <p>\n                            Next, import your <code>userFakeApi.ts</code> file\n                            into the mock entry file{' '}\n                            <code>src/mock/index.ts</code>.\n                        </p>\n                        <SyntaxHighlighter language=\"ts\">{`import { mock } from './MockAdapter'\nimport './fakeApi/userFakeApi'\n...\n\nmock.onAny().passThrough();`}</SyntaxHighlighter>\n                    </li>\n                </ol>\n            </div>\n            <div>\n                <p>\n                    Now, you can make requests to this mock API and receive the\n                    static data you set up as the response.\n                </p>\n                <SyntaxHighlighter language=\"ts\">{`// service\nimport ApiService from \"./ApiService\"\n\ntype GetUserResponse = {\n    id: string\n    name: string\n    email: string\n}[]\n\nexport async function apiGetUsers () {\n    return ApiService.fetchData<GetUserResponse>({\n        url: '/api/getUsers',\n        method: 'get'\n    })\n}`}</SyntaxHighlighter>\n                <SyntaxHighlighter language=\"ts\">{`// component\nimport { useEffect } from 'react'\nimport { apiGetUsers } from './YourService.ts'\n\nconst YourComponent = () => {\n\n    const fetchData = async () => {\n        try {\n            const resp = await apiGetUsers()\n            console.log(resp.data)\n        } catch (errors) {\n            // handle errors\n        }\n    }\n\n    useEffect(() => {\n        fetchData()\n    }, [])\n\n    return (\n        // your component JSX\n    )\n}`}</SyntaxHighlighter>\n            </div>\n            <p>\n                For more information on using <code>axios-mock-adapter</code>,\n                visit the{' '}\n                <a\n                    href=\"https://github.com/ctimmerm/axios-mock-adapter\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                >\n                    official GitHub repository\n                </a>\n                .\n            </p>\n        </>\n    )\n}\n\nexport default MockApi\n"],"names":["MockApi","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":"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"}

package/dist/@ecme/views/guide/Documentations/components/NavigationConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationConfig.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/NavigationConfig.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\n\nconst NavigationConfig = () => {\n    return (\n        <>\n            <p>\n                We form our navigation structure as array of objects & render it\n                into UI eventually. You can change or customize the app\n                navigation very easily by accessing{' '}\n                <code>src/configs/navigation.config/index.ts</code>\n            </p>\n            <p>Here is the type for a single menu item</p>\n            <SyntaxHighlighter language=\"ts\">{`export type HorizontalMenuMeta = {\n    layout: 'default'\n} | {\n    layout: 'columns'\n    showColumnTitle?: boolean\n    columns: 1 | 2 | 3 | 4 | 5\n} | {\n    layout: 'tabs'\n    columns: 1 | 2 | 3 | 4 | 5\n}\n\nexport interface NavigationTree {\n    key: string\n    path: string\n    isExternalLink?: boolean\n    title: string\n    translateKey: string\n    icon: string\n    type: 'title' | 'collapse' | 'item'\n    authority: string[]\n    subMenu: NavigationTree[]\n    description?: string\n    meta?: {\n        horizontalMenu?: HorizontalMenuMeta\n        description?: {\n            translateKey: string\n            label: string\n        }\n    }\n}\n`}</SyntaxHighlighter>\n            <br />\n            <DemoComponentApi\n                hideApiTitle\n                keyText=\"properties\"\n                api={[\n                    {\n                        api: [\n                            {\n                                propName: 'key',\n                                type: `<code>string</code></code>`,\n                                default: `-`,\n                                desc: 'An unique key that need to be match with the route this menu navigate to',\n                            },\n                            {\n                                propName: 'path',\n                                type: `<code>string</code>`,\n                                default: '-',\n                                desc: 'An URL that this menu item link to',\n                            },\n                            {\n                                propName: 'isExternalLink',\n                                type: `<code>boolean</code>`,\n                                default: '-',\n                                desc: 'Whether to open link in new tab upon click',\n                            },\n                            {\n                                propName: 'title',\n                                type: `<code>string</code>`,\n                                default: '-',\n                                desc: 'Rendered text of this menu item',\n                            },\n                            {\n                                propName: 'translateKey',\n                                type: `<code>string</code>`,\n                                default: '-',\n                                desc: 'Translate key to translate the rendered text in menu item, fallback to <code>title</code> if empty or invalid',\n                            },\n                            {\n                                propName: 'icon',\n                                type: `<code>string</code>`,\n                                default: '-',\n                                desc: 'Render icon in menu item, string value must tally with object key in <code>navigation-icon.config.tsx</code>',\n                            },\n                            {\n                                propName: 'type',\n                                type: `<code>'title'</code>  | <code>'collapse'</code> | <code>'item'</code>`,\n                                default: `-`,\n                                desc: 'To define the type of current menu item',\n                            },\n                            {\n                                propName: 'authority',\n                                type: `<code>string[]</code>`,\n                                default: `-`,\n                                desc: 'Display menu items to users who have the roles given, there will be no access block if the this field is undefine or empty array',\n                            },\n                            {\n                                propName: 'subMenu',\n                                type: `<code>navigationConfig[]</code>`,\n                                default: `-`,\n                                desc: `Whether have child in this menu item, it will render a menu group under this menu item, if the <code>type</code> is <code>'title'</code> or <code>'collapse'</code>, this field accept properties within this table`,\n                            },\n                            {\n                                propName: 'meta',\n                                type: `<code>{\n        horizontalMenu?: HorizontalMenuMeta\n        description?: {\n            translateKey: string\n            label: string\n        }\n    }</code>`,\n                                default: `-`,\n                                desc: `This is an optional configuration field for navigation. It can include additional information that's only needed in specific use cases`,\n                            },\n                            {\n                                propName: 'meta.horizontalMenu',\n                                type: `<code>{\n    layout: 'default'\n} | {\n    layout: 'columns'\n    showColumnTitle?: boolean\n    columns: 1 | 2 | 3 | 4 | 5\n} | {\n    layout: 'tabs'\n    columns: 1 | 2 | 3 | 4 | 5\n}</code>`,\n                                default: `-`,\n                                desc: `Further configuration for horizontal menu, e.g <code>layout</code>, <code>columns</code> & etc.`,\n                            },\n                            {\n                                propName: 'meta.description',\n                                type: `<code>navigationConfig[]</code>`,\n                                default: `-`,\n                                desc: `Description of the page, description only available when <code>themeConfig.layout.type</code> is <code>'contentOverlay'</code>`,\n                            },\n                        ],\n                    },\n                ]}\n            />\n            <p>An example of structured navigation config</p>\n            <SyntaxHighlighter language=\"ts\">{`const navigationConfig = [\n    {\n        key: 'uiComponent',\n        path: '',\n        title: 'Ui Component',\n        translateKey: 'nav.uiComponents',\n        icon: 'uiComponents',\n        type: 'title',\n        authority: ['admin', 'user'],\n        /** We can define mnu config here, if we are using horizontal menu */\n        meta: {\n            horizontalMenu: {\n                layout: 'columns',\n                columns: 4\n            }\n        },\n        subMenu: [\n            {\n                key: 'uiComponent.common',\n                path: '',\n                title: 'Common',\n                translateKey: 'nav.uiComponentsCommon.common',\n                icon: 'common',\n                type: 'collapse',\n                authority: ['admin', 'user'],\n                subMenu: [\n                    {\n                        key: 'uiComponent.common.button',\n                        path: '/button',\n                        title: 'Button',\n                        translateKey: 'nav.uiComponentsCommon.button',\n                        icon: '',\n                        type: 'item',\n                        authority: ['admin', 'user'],\n                        subMenu: []\n                    },\n                    {\n                        key: 'uiComponent.common.typography',\n                        path: '/typography',\n                        title: 'Typography',\n                        translateKey: 'nav.uiComponentsCommon.typography',\n                        icon: '',\n                        type: 'item',\n                        authority: ['admin', 'user'],\n                        subMenu: []\n                    }\n                ]\n            }\n        ]\n    }\n]`}</SyntaxHighlighter>\n            <div className=\"mt-10\" id=\"configuringNavigationIcon\">\n                <h5>Configuring navigation icon</h5>\n                <p className=\"mt-1\">\n                    Navigation icon configuration placed on seperate file in{' '}\n                    <code>src/configs/navigation-icon.config.tsx</code>\n                </p>\n                <p>\n                    In the above example, we use string value{' '}\n                    <code>uiComponents</code> in the <code>icon</code> field, we\n                    must then use this value in{' '}\n                    <code>navigation-icon.config.ts</code> to define the icon\n                    for the callout.\n                </p>\n                <p>\n                    First, import the icon you want from{' '}\n                    <a\n                        href=\"https://react-icons.github.io/react-icons/\"\n                        target=\"_blank\"\n                        rel=\"noreferrer\"\n                    >\n                        react-icons\n                    </a>\n                </p>\n                <SyntaxHighlighter language=\"ts\">{`import { FaBeer } from 'react-icons/fa'\n\nconst navigationIcon = {}\n`}</SyntaxHighlighter>\n                <p>\n                    Set the value used in <code>icon</code> field as & the\n                    imported icon component as value\n                </p>\n                <SyntaxHighlighter language=\"tsx\">{`import { FaBeer } from 'react-icons/fa'\n\nconst navigationIcon = {\n    uiComponents: <FaBeer />\n}\n`}</SyntaxHighlighter>\n                <p>\n                    Now the corresponding menu item will render{' '}\n                    <code>FaBeer</code> as the menu icon.\n                </p>\n            </div>\n        </>\n    )\n}\n\nexport default NavigationConfig\n"],"names":["NavigationConfig","jsxs","Fragment","jsx","SyntaxHighlighter","DemoComponentApi"],"mappings":"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"}
+{"version":3,"file":"NavigationConfig.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/NavigationConfig.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\n\nconst NavigationConfig = () => {\n    return (\n        <>\n            <p>\n                We form our navigation structure as array of objects & render it\n                into UI eventually. You can change or customize the app\n                navigation very easily by accessing{' '}\n                <code>src/configs/navigation.config/index.ts</code>\n            </p>\n            <p>Here is the type for a single menu item</p>\n            <SyntaxHighlighter language=\"ts\">{`export type HorizontalMenuMeta = {\n    layout: 'default'\n} | {\n    layout: 'columns'\n    showColumnTitle?: boolean\n    columns: 1 | 2 | 3 | 4 | 5\n} | {\n    layout: 'tabs'\n    columns: 1 | 2 | 3 | 4 | 5\n}\n\nexport interface NavigationTree {\n    key: string\n    path: string\n    isExternalLink?: boolean\n    title: string\n    translateKey: string\n    icon: string\n    type: 'title' | 'collapse' | 'item'\n    authority: string[]\n    subMenu: NavigationTree[]\n    description?: string\n    meta?: {\n        horizontalMenu?: HorizontalMenuMeta\n        description?: {\n            translateKey: string\n            label: string\n        }\n    }\n}\n`}</SyntaxHighlighter>\n            <br />\n            <DemoComponentApi\n                hideApiTitle\n                keyText=\"properties\"\n                api={[\n                    {\n                        api: [\n                            {\n                                propName: 'key',\n                                type: `<code>string</code></code>`,\n                                default: `-`,\n                                desc: 'An unique key that need to be match with the route this menu navigate to',\n                            },\n                            {\n                                propName: 'path',\n                                type: `<code>string</code>`,\n                                default: '-',\n                                desc: 'An URL that this menu item link to',\n                            },\n                            {\n                                propName: 'isExternalLink',\n                                type: `<code>boolean</code>`,\n                                default: '-',\n                                desc: 'Whether to open link in new tab upon click',\n                            },\n                            {\n                                propName: 'title',\n                                type: `<code>string</code>`,\n                                default: '-',\n                                desc: 'Rendered text of this menu item',\n                            },\n                            {\n                                propName: 'translateKey',\n                                type: `<code>string</code>`,\n                                default: '-',\n                                desc: 'Translate key to translate the rendered text in menu item, fallback to <code>title</code> if empty or invalid',\n                            },\n                            {\n                                propName: 'icon',\n                                type: `<code>string</code>`,\n                                default: '-',\n                                desc: 'Render icon in menu item, string value must tally with object key in <code>navigation-icon.config.tsx</code>',\n                            },\n                            {\n                                propName: 'type',\n                                type: `<code>'title'</code>  | <code>'collapse'</code> | <code>'item'</code>`,\n                                default: `-`,\n                                desc: 'To define the type of current menu item',\n                            },\n                            {\n                                propName: 'authority',\n                                type: `<code>string[]</code>`,\n                                default: `-`,\n                                desc: 'Display menu items to users who have the roles given, there will be no access block if the this field is undefine or empty array',\n                            },\n                            {\n                                propName: 'subMenu',\n                                type: `<code>navigationConfig[]</code>`,\n                                default: `-`,\n                                desc: `Whether have child in this menu item, it will render a menu group under this menu item, if the <code>type</code> is <code>'title'</code> or <code>'collapse'</code>, this field accept properties within this table`,\n                            },\n                            {\n                                propName: 'meta',\n                                type: `<code>{\n        horizontalMenu?: HorizontalMenuMeta\n        description?: {\n            translateKey: string\n            label: string\n        }\n    }</code>`,\n                                default: `-`,\n                                desc: `This is an optional configuration field for navigation. It can include additional information that's only needed in specific use cases`,\n                            },\n                            {\n                                propName: 'meta.horizontalMenu',\n                                type: `<code>{\n    layout: 'default'\n} | {\n    layout: 'columns'\n    showColumnTitle?: boolean\n    columns: 1 | 2 | 3 | 4 | 5\n} | {\n    layout: 'tabs'\n    columns: 1 | 2 | 3 | 4 | 5\n}</code>`,\n                                default: `-`,\n                                desc: `Further configuration for horizontal menu, e.g <code>layout</code>, <code>columns</code> & etc.`,\n                            },\n                            {\n                                propName: 'meta.description',\n                                type: `<code>navigationConfig[]</code>`,\n                                default: `-`,\n                                desc: `Description of the page, description only available when <code>themeConfig.layout.type</code> is <code>'contentOverlay'</code>`,\n                            },\n                        ],\n                    },\n                ]}\n            />\n            <p>An example of structured navigation config</p>\n            <SyntaxHighlighter language=\"ts\">{`const navigationConfig = [\n    {\n        key: 'uiComponent',\n        path: '',\n        title: 'Ui Component',\n        translateKey: 'nav.uiComponents',\n        icon: 'uiComponents',\n        type: 'title',\n        authority: ['admin', 'user'],\n        /** We can define mnu config here, if we are using horizontal menu */\n        meta: {\n            horizontalMenu: {\n                layout: 'columns',\n                columns: 4\n            }\n        },\n        subMenu: [\n            {\n                key: 'uiComponent.common',\n                path: '',\n                title: 'Common',\n                translateKey: 'nav.uiComponentsCommon.common',\n                icon: 'common',\n                type: 'collapse',\n                authority: ['admin', 'user'],\n                subMenu: [\n                    {\n                        key: 'uiComponent.common.button',\n                        path: '/button',\n                        title: 'Button',\n                        translateKey: 'nav.uiComponentsCommon.button',\n                        icon: '',\n                        type: 'item',\n                        authority: ['admin', 'user'],\n                        subMenu: []\n                    },\n                    {\n                        key: 'uiComponent.common.typography',\n                        path: '/typography',\n                        title: 'Typography',\n                        translateKey: 'nav.uiComponentsCommon.typography',\n                        icon: '',\n                        type: 'item',\n                        authority: ['admin', 'user'],\n                        subMenu: []\n                    }\n                ]\n            }\n        ]\n    }\n]`}</SyntaxHighlighter>\n            <div className=\"mt-10\" id=\"configuringNavigationIcon\">\n                <h5>Configuring navigation icon</h5>\n                <p className=\"mt-1\">\n                    Navigation icon configuration placed on seperate file in{' '}\n                    <code>src/configs/navigation-icon.config.tsx</code>\n                </p>\n                <p>\n                    In the above example, we use string value{' '}\n                    <code>uiComponents</code> in the <code>icon</code> field, we\n                    must then use this value in{' '}\n                    <code>navigation-icon.config.ts</code> to define the icon\n                    for the callout.\n                </p>\n                <p>\n                    First, import the icon you want from{' '}\n                    <a\n                        href=\"https://react-icons.github.io/react-icons/\"\n                        target=\"_blank\"\n                        rel=\"noreferrer\"\n                    >\n                        react-icons\n                    </a>\n                </p>\n                <SyntaxHighlighter language=\"ts\">{`import { FaBeer } from 'react-icons/fa'\n\nconst navigationIcon = {}\n`}</SyntaxHighlighter>\n                <p>\n                    Set the value used in <code>icon</code> field as & the\n                    imported icon component as value\n                </p>\n                <SyntaxHighlighter language=\"tsx\">{`import { FaBeer } from 'react-icons/fa'\n\nconst navigationIcon = {\n    uiComponents: <FaBeer />\n}\n`}</SyntaxHighlighter>\n                <p>\n                    Now the corresponding menu item will render{' '}\n                    <code>FaBeer</code> as the menu icon.\n                </p>\n            </div>\n        </>\n    )\n}\n\nexport default NavigationConfig\n"],"names":["NavigationConfig","jsxs","Fragment","jsx","SyntaxHighlighter","DemoComponentApi"],"mappings":"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"}

package/dist/@ecme/views/guide/Documentations/components/OverallThemeConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverallThemeConfig.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/OverallThemeConfig.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\n\nconst OverallThemeConfig = () => {\n    return (\n        <>\n            <p>\n                The file <code>src/configs/theme.config.ts</code> contains the\n                default theme settings for the template. These configurations\n                are predefined but can be customized to suit your needs. Below\n                is the default configuration:\n            </p>\n            <p>\n                If you realize that the theme did not change after setting a new\n                value to the configuration, you could consider to clear the{' '}\n                <code>localStorage</code>, if you If you have no requiremnent to\n                memorize users preferred appearance in the app, you can remove\n                the persist method from the store. Refer to State Persistence\n                section below. If the theme doesn&apos;t update after changing\n                its configuration, try clearing the <code>localStorage</code>.\n                If you don&apos;t need to remember the user&apos;s preferred\n                appearance in the app, you can remove the <code>persist</code>{' '}\n                method from the store. For more details, see the{' '}\n                <strong>&quot;State Persistence&quot;</strong> section below.\n            </p>\n            <SyntaxHighlighter language=\"ts\">{`import { THEME_ENUM } from '@/constants/theme.constant'\nimport {\n    Direction,\n    Mode,\n    ControlSize,\n    LayoutType,\n} from '@/@types/theme'\n\nexport type ThemeConfig = {\n    themeSchema: string\n    direction: Direction\n    mode: Mode\n    panelExpand: boolean\n    controlSize: ControlSize\n    layout: {\n        type: LayoutType\n        sideNavCollapse: boolean\n    }\n}\n\nexport const themeConfig: ThemeConfig = {\n    themeSchema: '',\n    direction: THEME_ENUM.DIR_LTR,\n    mode: THEME_ENUM.MODE_LIGHT,\n    panelExpand: false,\n    controlSize: 'md',\n    layout: {\n        type: THEME_ENUM.LAYOUT_COLLAPSIBLE_SIDE,\n        sideNavCollapse: false,\n    },\n}`}</SyntaxHighlighter>\n            <div className=\"mt-10\" id=\"properties\">\n                <h5>Configuration Properties</h5>\n                <DemoComponentApi\n                    hideApiTitle\n                    api={[\n                        {\n                            api: [\n                                {\n                                    propName: 'themeSchema',\n                                    type: `<code>string</code>`,\n                                    default: `<code>''</code>`,\n                                    desc: 'Sets the color scheme of the template. you can leave this field empty if you are having dynamic theme in your app',\n                                },\n                                {\n                                    propName: 'direction',\n                                    type: `<code>'ltr'</code> | <code>'rtl'</code>`,\n                                    default: `<code>'ltr'</code>`,\n                                    desc: 'Defines the text direction for the template.',\n                                },\n                                {\n                                    propName: 'mode',\n                                    type: `<code>'light'</code> | <code>'dark'</code>`,\n                                    default: `<code>'light'</code>`,\n                                    desc: 'Toggles between Light and Dark mode.',\n                                },\n                                {\n                                    propName: 'panelExpand',\n                                    type: `<code>boolean</code>`,\n                                    default: `<code>false</code>`,\n                                    desc: 'Determines whether the side panel is expanded by default.',\n                                },\n                                {\n                                    propName: 'controlSize',\n                                    type: `<code>'xs'</code> | <code>'sm'</code> | <code>'md'</code> | <code>'lg'</code>`,\n                                    default: `<code>'md'</code>`,\n                                    desc: 'Sets the initial size of control inputs.',\n                                },\n                                {\n                                    propName: 'layout.type',\n                                    type: `<code>'blank'</code>  | <code>'collapsibleSide'</code> | <code>'stackedSide'</code> | <code>'topBarClassic'</code> | <code>'framelessSide'</code> | <code>'contentOverlay'</code>`,\n                                    default: `<code>'modern'</code>`,\n                                    desc: 'Defines the overall layout style of the application.',\n                                },\n                                {\n                                    propName: 'layout.sideNavCollapse',\n                                    type: `<code>boolean</code>`,\n                                    default: `<code>false</code>`,\n                                    desc: `Specifies whether the side navigation is collapsed. This option is only applicable when <code>type</code> is set to <code>'collapsibleSide'</code> or <code>'framelessSide'</code>.`,\n                                },\n                            ],\n                        },\n                    ]}\n                />\n            </div>\n            <div className=\"mt-10\" id=\"persistence\">\n                <h5>State Persistence</h5>\n                <p>\n                    The <code>themeConfig</code> state is persisted by default,\n                    meaning your settings will be remembered by the browser all\n                    along. If you prefer not to persist the theme state for the\n                    users, you can modify <code>src/store/themeStore.ts</code>{' '}\n                    by removing the <code>persist</code> method from the Zustand\n                    store.\n                </p>\n                <p>\n                    The persisted state is also stored in the browser&apos;s{' '}\n                    <code>localStorage</code>. If you encounter issues where\n                    theme changes are not reflected, you may want to clear the{' '}\n                    <code>localStorage</code> key named{' '}\n                    <code>&apos;theme&apos;</code>. You can do this by running{' '}\n                    <code>localStorage.removeItem(&apos;theme&apos;)</code> in\n                    the browser console.\n                </p>\n            </div>\n        </>\n    )\n}\n\nexport default OverallThemeConfig\n"],"names":["OverallThemeConfig","jsxs","Fragment","jsx","SyntaxHighlighter","DemoComponentApi"],"mappings":"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"}
+{"version":3,"file":"OverallThemeConfig.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/OverallThemeConfig.tsx"],"sourcesContent":["import SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\n\nconst OverallThemeConfig = () => {\n    return (\n        <>\n            <p>\n                The file <code>src/configs/theme.config.ts</code> contains the\n                default theme settings for the template. These configurations\n                are predefined but can be customized to suit your needs. Below\n                is the default configuration:\n            </p>\n            <p>\n                If you realize that the theme did not change after setting a new\n                value to the configuration, you could consider to clear the{' '}\n                <code>localStorage</code>, if you If you have no requiremnent to\n                memorize users preferred appearance in the app, you can remove\n                the persist method from the store. Refer to State Persistence\n                section below. If the theme doesn&apos;t update after changing\n                its configuration, try clearing the <code>localStorage</code>.\n                If you don&apos;t need to remember the user&apos;s preferred\n                appearance in the app, you can remove the <code>persist</code>{' '}\n                method from the store. For more details, see the{' '}\n                <strong>&quot;State Persistence&quot;</strong> section below.\n            </p>\n            <SyntaxHighlighter language=\"ts\">{`import { THEME_ENUM } from '@/constants/theme.constant'\nimport {\n    Direction,\n    Mode,\n    ControlSize,\n    LayoutType,\n} from '@/@types/theme'\n\nexport type ThemeConfig = {\n    themeSchema: string\n    direction: Direction\n    mode: Mode\n    panelExpand: boolean\n    controlSize: ControlSize\n    layout: {\n        type: LayoutType\n        sideNavCollapse: boolean\n    }\n}\n\nexport const themeConfig: ThemeConfig = {\n    themeSchema: '',\n    direction: THEME_ENUM.DIR_LTR,\n    mode: THEME_ENUM.MODE_LIGHT,\n    panelExpand: false,\n    controlSize: 'md',\n    layout: {\n        type: THEME_ENUM.LAYOUT_COLLAPSIBLE_SIDE,\n        sideNavCollapse: false,\n    },\n}`}</SyntaxHighlighter>\n            <div className=\"mt-10\" id=\"properties\">\n                <h5>Configuration Properties</h5>\n                <DemoComponentApi\n                    hideApiTitle\n                    api={[\n                        {\n                            api: [\n                                {\n                                    propName: 'themeSchema',\n                                    type: `<code>string</code>`,\n                                    default: `<code>''</code>`,\n                                    desc: 'Sets the color scheme of the template. you can leave this field empty if you are having dynamic theme in your app',\n                                },\n                                {\n                                    propName: 'direction',\n                                    type: `<code>'ltr'</code> | <code>'rtl'</code>`,\n                                    default: `<code>'ltr'</code>`,\n                                    desc: 'Defines the text direction for the template.',\n                                },\n                                {\n                                    propName: 'mode',\n                                    type: `<code>'light'</code> | <code>'dark'</code>`,\n                                    default: `<code>'light'</code>`,\n                                    desc: 'Toggles between Light and Dark mode.',\n                                },\n                                {\n                                    propName: 'panelExpand',\n                                    type: `<code>boolean</code>`,\n                                    default: `<code>false</code>`,\n                                    desc: 'Determines whether the side panel is expanded by default.',\n                                },\n                                {\n                                    propName: 'controlSize',\n                                    type: `<code>'xs'</code> | <code>'sm'</code> | <code>'md'</code> | <code>'lg'</code>`,\n                                    default: `<code>'md'</code>`,\n                                    desc: 'Sets the initial size of control inputs.',\n                                },\n                                {\n                                    propName: 'layout.type',\n                                    type: `<code>'blank'</code>  | <code>'collapsibleSide'</code> | <code>'stackedSide'</code> | <code>'topBarClassic'</code> | <code>'framelessSide'</code> | <code>'contentOverlay'</code>`,\n                                    default: `<code>'modern'</code>`,\n                                    desc: 'Defines the overall layout style of the application.',\n                                },\n                                {\n                                    propName: 'layout.sideNavCollapse',\n                                    type: `<code>boolean</code>`,\n                                    default: `<code>false</code>`,\n                                    desc: `Specifies whether the side navigation is collapsed. This option is only applicable when <code>type</code> is set to <code>'collapsibleSide'</code> or <code>'framelessSide'</code>.`,\n                                },\n                            ],\n                        },\n                    ]}\n                />\n            </div>\n            <div className=\"mt-10\" id=\"persistence\">\n                <h5>State Persistence</h5>\n                <p>\n                    The <code>themeConfig</code> state is persisted by default,\n                    meaning your settings will be remembered by the browser all\n                    along. If you prefer not to persist the theme state for the\n                    users, you can modify <code>src/store/themeStore.ts</code>{' '}\n                    by removing the <code>persist</code> method from the Zustand\n                    store.\n                </p>\n                <p>\n                    The persisted state is also stored in the browser&apos;s{' '}\n                    <code>localStorage</code>. If you encounter issues where\n                    theme changes are not reflected, you may want to clear the{' '}\n                    <code>localStorage</code> key named{' '}\n                    <code>&apos;theme&apos;</code>. You can do this by running{' '}\n                    <code>localStorage.removeItem(&apos;theme&apos;)</code> in\n                    the browser console.\n                </p>\n            </div>\n        </>\n    )\n}\n\nexport default OverallThemeConfig\n"],"names":["OverallThemeConfig","jsxs","Fragment","jsx","SyntaxHighlighter","DemoComponentApi"],"mappings":"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"}

package/dist/@ecme/views/guide/Documentations/components/Routing.js.map

@@ -1 +1 @@
-{"version":3,"file":"Routing.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Routing.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\n\nconst RouteAndNav = () => {\n    return (\n        <>\n            <p>\n                Ecme uses{' '}\n                <a\n                    href=\"https://reactrouter.com/\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                >\n                    React Router\n                </a>{' '}\n                as its core routing system. In this guide, you'll learn how to\n                create new routes and understand how existing routes work.\n            </p>\n            <div className=\"mt-6\" id=\"overview\">\n                <h5>Overview</h5>\n                <p className=\"my-1\">\n                    The router configuration for the template can be found in{' '}\n                    <code>src/configs/routes.config/index.ts</code>. There are\n                    two main groups of routes:\n                </p>\n                <SyntaxHighlighter language=\"js\">{`export const publicRoutes = [\n    ...\n]\n\nexport const protectedRoutes = [\n    ...\n]`}</SyntaxHighlighter>\n                <ul>\n                    <li>\n                        <strong>publicRoutes:</strong>\n                        <p className=\"mt-1\">\n                            This group includes all routes that are accessible\n                            to all users.\n                        </p>\n                    </li>\n                    <li>\n                        <strong>protectedRoutes:</strong>\n                        <p className=\"mt-1\">\n                            This group contains routes that require\n                            authentication to access.\n                        </p>\n                    </li>\n                </ul>\n            </div>\n            <div className=\"mt-10\" id=\"addingNewRoute\">\n                <h5>Adding a New Route</h5>\n                <p className=\"mt-1\">\n                    To add a new route, simply include the following code in the\n                    appropriate route group, depending on the access level you\n                    want to assign:\n                </p>\n                <SyntaxHighlighter language=\"js\">{`export const protectedRoutes = [\n    {\n        key: 'a-unique-id-for-this-view',\n        path: 'my-new-view-path',\n        component: lazy(() => import('@/views/MyNewComponent')),\n        authority: [],\n        meta: {\n            pageContainerType: 'gutterless'\n        }\n    },\t\t\t\n]`}</SyntaxHighlighter>\n            </div>\n            <div className=\"mt-10\" id=\"authority\">\n                <h5>Authority</h5>\n                <p className=\"mt-1\">\n                    Ecme routes support simple role-based access control. You\n                    can specify the roles that have access to a route by using\n                    the <code>authority</code> field. For example, the following\n                    route is only accessible to users with the{' '}\n                    <code>'admin'</code> or <code>'user'</code> roles. If the{' '}\n                    <code>authority</code> field is left as an empty array, the\n                    route will be open to all roles.\n                </p>\n                <SyntaxHighlighter language=\"js\">{`export const protectedRoutes = [\n    {\n        ...\n        authority: ['admin', 'user'],\n    },\t\t\t\n]`}</SyntaxHighlighter>\n                <p>\n                    The default <code>AuthorityGuard</code> checks the current\n                    user's role from the Zustand state (\n                    <code>auth.user.authority</code>). You can use this as a\n                    base to extend or customize your access control.\n                </p>\n            </div>\n            <div className=\"mt-10\" id=\"meta\">\n                <h5>Meta</h5>\n                <p className=\"mt-1\">\n                    The <code>meta</code> field allows you to pass additional\n                    information to the <code>PageContainer</code> or the view\n                    component associated with the route.\n                </p>\n                <SyntaxHighlighter language=\"js\">{`export const protectedRoutes = [\n    {\n        ...\n        meta: {\n            pageContainerType: 'gutter',\n            header: {\n                title: 'My tittle',\n                description: 'Some description'\n                contained: false,\n                extraHeader: lazy(() => import('/SomeComponent')),\n            },\n            footer: false,\n            layout: 'blank',\n        }\n    },\t\t\t\n]`}</SyntaxHighlighter>\n                <p>\n                    The view component will be able to access all the{' '}\n                    <code>meta</code> data specified.\n                </p>\n                <DemoComponentApi\n                    hideApiTitle\n                    keyText=\"properties\"\n                    api={[\n                        {\n                            api: [\n                                {\n                                    propName: 'pageContainerType',\n                                    type: `<code>'default'</code>  | <code>'gutterless'</code> | <code>'contained'</code>`,\n                                    default: `<code>'default'</code>`,\n                                    desc: 'Defines the type of the view container',\n                                },\n                                {\n                                    propName: 'pageBackgroundType',\n                                    type: `<code>'default'</code>  | <code>'plain'</code>`,\n                                    default: '-',\n                                    desc: 'Define the type of the page background',\n                                },\n                                {\n                                    propName: 'header',\n                                    type: `<code>{\n                                                title?: string | ReactNode | LazyExoticComponent<() => JSX.Element>\n                                                description?: string | ReactNode\n                                                contained?: boolean\n                                                extraHeader?: string | ReactNode | LazyExoticComponent<() => JSX.Element>\n                                            }</code>`,\n                                    default: '-',\n                                    desc: 'Specifies the page header & further configuration',\n                                },\n                                {\n                                    propName: 'footer',\n                                    type: `<code>boolean</code>`,\n                                    default: `<code>true</code>`,\n                                    desc: 'Determines whether to display the footer',\n                                },\n                                {\n                                    propName: 'layout',\n                                    type: `<code>'blank'</code>  | <code>'collapsibleSide'</code> | <code>'stackedSide'</code> | <code>'topBarClassic'</code> | <code>'framelessSide'</code> | <code>'contentOverlay'</code>`,\n                                    default: `-`,\n                                    desc: 'Overrides the current layout for this page',\n                                },\n                            ],\n                        },\n                    ]}\n                />\n            </div>\n        </>\n    )\n}\n\nexport default RouteAndNav\n"],"names":["RouteAndNav","jsxs","Fragment","jsx","SyntaxHighlighter","DemoComponentApi"],"mappings":"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"}
+{"version":3,"file":"Routing.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Routing.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport DemoComponentApi from '@/components/docs/DemoComponentApi'\n\nconst RouteAndNav = () => {\n    return (\n        <>\n            <p>\n                Ecme uses{' '}\n                <a\n                    href=\"https://reactrouter.com/\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                >\n                    React Router\n                </a>{' '}\n                as its core routing system. In this guide, you'll learn how to\n                create new routes and understand how existing routes work.\n            </p>\n            <div className=\"mt-6\" id=\"overview\">\n                <h5>Overview</h5>\n                <p className=\"my-1\">\n                    The router configuration for the template can be found in{' '}\n                    <code>src/configs/routes.config/index.ts</code>. There are\n                    two main groups of routes:\n                </p>\n                <SyntaxHighlighter language=\"js\">{`export const publicRoutes = [\n    ...\n]\n\nexport const protectedRoutes = [\n    ...\n]`}</SyntaxHighlighter>\n                <ul>\n                    <li>\n                        <strong>publicRoutes:</strong>\n                        <p className=\"mt-1\">\n                            This group includes all routes that are accessible\n                            to all users.\n                        </p>\n                    </li>\n                    <li>\n                        <strong>protectedRoutes:</strong>\n                        <p className=\"mt-1\">\n                            This group contains routes that require\n                            authentication to access.\n                        </p>\n                    </li>\n                </ul>\n            </div>\n            <div className=\"mt-10\" id=\"addingNewRoute\">\n                <h5>Adding a New Route</h5>\n                <p className=\"mt-1\">\n                    To add a new route, simply include the following code in the\n                    appropriate route group, depending on the access level you\n                    want to assign:\n                </p>\n                <SyntaxHighlighter language=\"js\">{`export const protectedRoutes = [\n    {\n        key: 'a-unique-id-for-this-view',\n        path: 'my-new-view-path',\n        component: lazy(() => import('@/views/MyNewComponent')),\n        authority: [],\n        meta: {\n            pageContainerType: 'gutterless'\n        }\n    },\t\t\t\n]`}</SyntaxHighlighter>\n            </div>\n            <div className=\"mt-10\" id=\"authority\">\n                <h5>Authority</h5>\n                <p className=\"mt-1\">\n                    Ecme routes support simple role-based access control. You\n                    can specify the roles that have access to a route by using\n                    the <code>authority</code> field. For example, the following\n                    route is only accessible to users with the{' '}\n                    <code>'admin'</code> or <code>'user'</code> roles. If the{' '}\n                    <code>authority</code> field is left as an empty array, the\n                    route will be open to all roles.\n                </p>\n                <SyntaxHighlighter language=\"js\">{`export const protectedRoutes = [\n    {\n        ...\n        authority: ['admin', 'user'],\n    },\t\t\t\n]`}</SyntaxHighlighter>\n                <p>\n                    The default <code>AuthorityGuard</code> checks the current\n                    user's role from the Zustand state (\n                    <code>auth.user.authority</code>). You can use this as a\n                    base to extend or customize your access control.\n                </p>\n            </div>\n            <div className=\"mt-10\" id=\"meta\">\n                <h5>Meta</h5>\n                <p className=\"mt-1\">\n                    The <code>meta</code> field allows you to pass additional\n                    information to the <code>PageContainer</code> or the view\n                    component associated with the route.\n                </p>\n                <SyntaxHighlighter language=\"js\">{`export const protectedRoutes = [\n    {\n        ...\n        meta: {\n            pageContainerType: 'gutter',\n            header: {\n                title: 'My tittle',\n                description: 'Some description'\n                contained: false,\n                extraHeader: lazy(() => import('/SomeComponent')),\n            },\n            footer: false,\n            layout: 'blank',\n        }\n    },\t\t\t\n]`}</SyntaxHighlighter>\n                <p>\n                    The view component will be able to access all the{' '}\n                    <code>meta</code> data specified.\n                </p>\n                <DemoComponentApi\n                    hideApiTitle\n                    keyText=\"properties\"\n                    api={[\n                        {\n                            api: [\n                                {\n                                    propName: 'pageContainerType',\n                                    type: `<code>'default'</code>  | <code>'gutterless'</code> | <code>'contained'</code>`,\n                                    default: `<code>'default'</code>`,\n                                    desc: 'Defines the type of the view container',\n                                },\n                                {\n                                    propName: 'pageBackgroundType',\n                                    type: `<code>'default'</code>  | <code>'plain'</code>`,\n                                    default: '-',\n                                    desc: 'Define the type of the page background',\n                                },\n                                {\n                                    propName: 'header',\n                                    type: `<code>{\n                                                title?: string | ReactNode | LazyExoticComponent<() => JSX.Element>\n                                                description?: string | ReactNode\n                                                contained?: boolean\n                                                extraHeader?: string | ReactNode | LazyExoticComponent<() => JSX.Element>\n                                            }</code>`,\n                                    default: '-',\n                                    desc: 'Specifies the page header & further configuration',\n                                },\n                                {\n                                    propName: 'footer',\n                                    type: `<code>boolean</code>`,\n                                    default: `<code>true</code>`,\n                                    desc: 'Determines whether to display the footer',\n                                },\n                                {\n                                    propName: 'layout',\n                                    type: `<code>'blank'</code>  | <code>'collapsibleSide'</code> | <code>'stackedSide'</code> | <code>'topBarClassic'</code> | <code>'framelessSide'</code> | <code>'contentOverlay'</code>`,\n                                    default: `-`,\n                                    desc: 'Overrides the current layout for this page',\n                                },\n                            ],\n                        },\n                    ]}\n                />\n            </div>\n        </>\n    )\n}\n\nexport default RouteAndNav\n"],"names":["RouteAndNav","jsxs","Fragment","jsx","SyntaxHighlighter","DemoComponentApi"],"mappings":"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"}

package/dist/@ecme/views/guide/Documentations/components/Starter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Starter.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Starter.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport { NavLink } from 'react-router-dom'\n\nconst Starter = () => {\n    return (\n        <>\n            <p>\n                As mentioned in the{' '}\n                <NavLink to=\"/docs/documentation/installation\">\n                    Installation\n                </NavLink>{' '}\n                section, we've provided a starter version with the essential\n                core components and basic functionality setup. We highly\n                recommend that developers use this version as the foundation for\n                building their apps.\n            </p>\n            <p>\n                When you open the starter pack in your local environment, you'll\n                be directed to the login page. You can sign in using the\n                credentials <i>user: admin | password: 123Qwe</i>.\n            </p>\n            <i>\n                Note: The starter version has the mock API enabled by default.\n                All API calls will point to the mock server. If you want to\n                disable this feature or learn more about the mock API, check out\n                the{' '}\n                <NavLink to=\"/docs/documentation/mock-api\">Mock API</NavLink>{' '}\n                documentation.\n            </i>\n            <div className=\"mt-10\" id=\"defaultConfig\">\n                <h5>Default Configurations</h5>\n                <p>\n                    Below are some of the default configurations for the starter\n                    version. You can modify these settings to suit your needs.\n                </p>\n                <p className=\"mb-2\">\n                    <strong>AppConfig</strong> -{' '}\n                    <NavLink to=\"/docs/documentation/app\">\n                        Documentation\n                    </NavLink>\n                </p>\n                <SyntaxHighlighter language=\"js\">{`const appConfig: AppConfig = {\n    apiPrefix: '/api',\n    authenticatedEntryPath: '/home',\n    unAuthenticatedEntryPath: '/sign-in',\n    locale: 'en',\n    accessTokenPersistStrategy: 'cookies',\n    enableMock: true,\n    activeNavTranslation: false\n}\n`}</SyntaxHighlighter>\n                <p className=\"mb-2\">\n                    <strong>ThemeConfig</strong> -{' '}\n                    <NavLink to=\"/docs/documentation/overall-theme-config\">\n                        Documentation\n                    </NavLink>\n                </p>\n                <SyntaxHighlighter language=\"js\">{`export const themeConfig: ThemeConfig = {\n    schema: 'default',\n    direction: THEME_ENUM.DIR_LTR,\n    mode: THEME_ENUM.MODE_LIGHT,\n    panelExpand: false,\n    controlSize: 'md',\n    layout: {\n        type: THEME_ENUM.LAYOUT_COLLAPSIBLE_SIDE,\n        sideNavCollapse: false,\n    },\n`}</SyntaxHighlighter>\n                <p className=\"mb-2\">\n                    <strong>RoutesConfig</strong> -{' '}\n                    <NavLink to=\"/docs/documentation/routing\">\n                        Documentation\n                    </NavLink>\n                </p>\n                <SyntaxHighlighter language=\"js\">{`const publicRoutes = [\n    {\n        key: 'signIn',\n        path: '/sign-in',\n        component: lazy(() => import('@/views/auth/SignIn')),\n        authority: [],\n    },\n    {\n        key: 'signUp',\n        path: '/sign-up',\n        component: lazy(() => import('@/views/auth/SignUp')),\n        authority: [],\n    },\n    {\n        key: 'forgotPassword',\n        path: '/forgot-password:id',\n        component: lazy(() => import('@/views/auth/ForgotPassword')),\n        authority: [],\n    },\n    {\n        key: 'resetPassword',\n        path: '/reset-password',\n        component: lazy(() => import('@/views/auth/ResetPassword')),\n        authority: [],\n    },\n]\n\nexport const protectedRoutes = [\n    {\n        key: 'home',\n        path: '/home',\n        component: lazy(() => import('@/views/Home')),\n        authority: [],\n    },\n]\n`}</SyntaxHighlighter>\n                <p className=\"mb-2\">\n                    <strong>NavConfig</strong> -{' '}\n                    <NavLink to=\"/docs/documentation/routing\">\n                        Documentation\n                    </NavLink>\n                </p>\n                <SyntaxHighlighter language=\"js\">{`const navigationConfig = [\n    {\n        key: 'home',\n        path: '/home',\n        title: 'Home',\n        translateKey: 'nav.home',\n        icon: 'home',\n        type: NAV_ITEM_TYPE_ITEM,\n        authority: [],\n        subMenu: []\n    }\n]\n`}</SyntaxHighlighter>\n            </div>\n        </>\n    )\n}\n\nexport default Starter\n"],"names":["Starter","jsxs","Fragment","jsx","NavLink","SyntaxHighlighter"],"mappings":";;;AAIA,MAAMA,IAAU,MAER,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,EAAA,gBAAAD,EAAC,KAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IACqB;AAAA,IACpB,gBAAAE,EAACC,GAAA,EAAQ,IAAG,oCAAmC,UAAA,gBAE/C;AAAA,IAAW;AAAA,IAAI;AAAA,EAAA,GAKnB;AAAA,oBACC,KAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IAGa,gBAAAD,EAAC,OAAE,UAAA,iCAAA,CAA8B;AAAA,IAAI;AAAA,EAAA,GACrD;AAAA,oBACC,KAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IAIK;AAAA,IACJ,gBAAAA,EAACC,GAAA,EAAQ,IAAG,gCAA+B,UAAA,YAAQ;AAAA,IAAW;AAAA,IAAI;AAAA,EAAA,GAEtE;AAAA,EACA,gBAAAH,EAAC,OAAA,EAAI,WAAU,SAAQ,IAAG,iBACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAA,yBAAA,CAAsB;AAAA,IAC1B,gBAAAA,EAAC,OAAE,UAAA,0HAAA,CAGH;AAAA,IACA,gBAAAF,EAAC,KAAA,EAAE,WAAU,QACT,UAAA;AAAA,MAAA,gBAAAE,EAAC,YAAO,UAAA,YAAA,CAAS;AAAA,MAAS;AAAA,MAAG;AAAA,MAC7B,gBAAAA,EAACC,GAAA,EAAQ,IAAG,2BAA0B,UAAA,gBAAA,CAEtC;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAD,EAACE,GAAA,EAAkB,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShD;AAAA,IACc,gBAAAJ,EAAC,KAAA,EAAE,WAAU,QACT,UAAA;AAAA,MAAA,gBAAAE,EAAC,YAAO,UAAA,cAAA,CAAW;AAAA,MAAS;AAAA,MAAG;AAAA,MAC/B,gBAAAA,EAACC,GAAA,EAAQ,IAAG,4CAA2C,UAAA,gBAAA,CAEvD;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAD,EAACE,GAAA,EAAkB,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUhD;AAAA,IACc,gBAAAJ,EAAC,KAAA,EAAE,WAAU,QACT,UAAA;AAAA,MAAA,gBAAAE,EAAC,YAAO,UAAA,eAAA,CAAY;AAAA,MAAS;AAAA,MAAG;AAAA,MAChC,gBAAAA,EAACC,GAAA,EAAQ,IAAG,+BAA8B,UAAA,gBAAA,CAE1C;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAD,EAACE,GAAA,EAAkB,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmChD;AAAA,IACc,gBAAAJ,EAAC,KAAA,EAAE,WAAU,QACT,UAAA;AAAA,MAAA,gBAAAE,EAAC,YAAO,UAAA,YAAA,CAAS;AAAA,MAAS;AAAA,MAAG;AAAA,MAC7B,gBAAAA,EAACC,GAAA,EAAQ,IAAG,+BAA8B,UAAA,gBAAA,CAE1C;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAD,EAACE,GAAA,EAAkB,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAYhD;AAAA,EAAA,EAAA,CACU;AAAA,GACJ;"}
+{"version":3,"file":"Starter.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Starter.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\nimport { NavLink } from 'react-router-dom'\n\nconst Starter = () => {\n    return (\n        <>\n            <p>\n                As mentioned in the{' '}\n                <NavLink to=\"/docs/documentation/installation\">\n                    Installation\n                </NavLink>{' '}\n                section, we've provided a starter version with the essential\n                core components and basic functionality setup. We highly\n                recommend that developers use this version as the foundation for\n                building their apps.\n            </p>\n            <p>\n                When you open the starter pack in your local environment, you'll\n                be directed to the login page. You can sign in using the\n                credentials <i>user: admin | password: 123Qwe</i>.\n            </p>\n            <i>\n                Note: The starter version has the mock API enabled by default.\n                All API calls will point to the mock server. If you want to\n                disable this feature or learn more about the mock API, check out\n                the{' '}\n                <NavLink to=\"/docs/documentation/mock-api\">Mock API</NavLink>{' '}\n                documentation.\n            </i>\n            <div className=\"mt-10\" id=\"defaultConfig\">\n                <h5>Default Configurations</h5>\n                <p>\n                    Below are some of the default configurations for the starter\n                    version. You can modify these settings to suit your needs.\n                </p>\n                <p className=\"mb-2\">\n                    <strong>AppConfig</strong> -{' '}\n                    <NavLink to=\"/docs/documentation/app\">\n                        Documentation\n                    </NavLink>\n                </p>\n                <SyntaxHighlighter language=\"js\">{`const appConfig: AppConfig = {\n    apiPrefix: '/api',\n    authenticatedEntryPath: '/home',\n    unAuthenticatedEntryPath: '/sign-in',\n    locale: 'en',\n    accessTokenPersistStrategy: 'cookies',\n    enableMock: true,\n    activeNavTranslation: false\n}\n`}</SyntaxHighlighter>\n                <p className=\"mb-2\">\n                    <strong>ThemeConfig</strong> -{' '}\n                    <NavLink to=\"/docs/documentation/overall-theme-config\">\n                        Documentation\n                    </NavLink>\n                </p>\n                <SyntaxHighlighter language=\"js\">{`export const themeConfig: ThemeConfig = {\n    schema: 'default',\n    direction: THEME_ENUM.DIR_LTR,\n    mode: THEME_ENUM.MODE_LIGHT,\n    panelExpand: false,\n    controlSize: 'md',\n    layout: {\n        type: THEME_ENUM.LAYOUT_COLLAPSIBLE_SIDE,\n        sideNavCollapse: false,\n    },\n`}</SyntaxHighlighter>\n                <p className=\"mb-2\">\n                    <strong>RoutesConfig</strong> -{' '}\n                    <NavLink to=\"/docs/documentation/routing\">\n                        Documentation\n                    </NavLink>\n                </p>\n                <SyntaxHighlighter language=\"js\">{`const publicRoutes = [\n    {\n        key: 'signIn',\n        path: '/sign-in',\n        component: lazy(() => import('@/views/auth/SignIn')),\n        authority: [],\n    },\n    {\n        key: 'signUp',\n        path: '/sign-up',\n        component: lazy(() => import('@/views/auth/SignUp')),\n        authority: [],\n    },\n    {\n        key: 'forgotPassword',\n        path: '/forgot-password:id',\n        component: lazy(() => import('@/views/auth/ForgotPassword')),\n        authority: [],\n    },\n    {\n        key: 'resetPassword',\n        path: '/reset-password',\n        component: lazy(() => import('@/views/auth/ResetPassword')),\n        authority: [],\n    },\n]\n\nexport const protectedRoutes = [\n    {\n        key: 'home',\n        path: '/home',\n        component: lazy(() => import('@/views/Home')),\n        authority: [],\n    },\n]\n`}</SyntaxHighlighter>\n                <p className=\"mb-2\">\n                    <strong>NavConfig</strong> -{' '}\n                    <NavLink to=\"/docs/documentation/routing\">\n                        Documentation\n                    </NavLink>\n                </p>\n                <SyntaxHighlighter language=\"js\">{`const navigationConfig = [\n    {\n        key: 'home',\n        path: '/home',\n        title: 'Home',\n        translateKey: 'nav.home',\n        icon: 'home',\n        type: NAV_ITEM_TYPE_ITEM,\n        authority: [],\n        subMenu: []\n    }\n]\n`}</SyntaxHighlighter>\n            </div>\n        </>\n    )\n}\n\nexport default Starter\n"],"names":["Starter","jsxs","Fragment","jsx","NavLink","SyntaxHighlighter"],"mappings":";;;AAIA,MAAMA,IAAU,MAGJ,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAA,gBAAAD,EAAC,KAAE,EAAA,UAAA;AAAA,IAAA;AAAA,IACqB;AAAA,IACnB,gBAAAE,EAAAC,GAAA,EAAQ,IAAG,oCAAmC,UAE/C,gBAAA;AAAA,IAAW;AAAA,IAAI;AAAA,EAAA,GAKnB;AAAA,oBACC,KAAE,EAAA,UAAA;AAAA,IAAA;AAAA,IAGa,gBAAAD,EAAC,OAAE,UAA8B,iCAAA,CAAA;AAAA,IAAI;AAAA,EAAA,GACrD;AAAA,oBACC,KAAE,EAAA,UAAA;AAAA,IAAA;AAAA,IAIK;AAAA,IACH,gBAAAA,EAAAC,GAAA,EAAQ,IAAG,gCAA+B,UAAQ,YAAA;AAAA,IAAW;AAAA,IAAI;AAAA,EAAA,GAEtE;AAAA,EACC,gBAAAH,EAAA,OAAA,EAAI,WAAU,SAAQ,IAAG,iBACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAsB,yBAAA,CAAA;AAAA,IAC1B,gBAAAA,EAAC,OAAE,UAGH,0HAAA,CAAA;AAAA,IACA,gBAAAF,EAAC,KAAE,EAAA,WAAU,QACT,UAAA;AAAA,MAAA,gBAAAE,EAAC,YAAO,UAAS,YAAA,CAAA;AAAA,MAAS;AAAA,MAAG;AAAA,MAC5B,gBAAAA,EAAAC,GAAA,EAAQ,IAAG,2BAA0B,UAEtC,gBAAA,CAAA;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAD,EAACE,GAAkB,EAAA,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShD;AAAA,IACc,gBAAAJ,EAAC,KAAE,EAAA,WAAU,QACT,UAAA;AAAA,MAAA,gBAAAE,EAAC,YAAO,UAAW,cAAA,CAAA;AAAA,MAAS;AAAA,MAAG;AAAA,MAC9B,gBAAAA,EAAAC,GAAA,EAAQ,IAAG,4CAA2C,UAEvD,gBAAA,CAAA;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAD,EAACE,GAAkB,EAAA,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUhD;AAAA,IACc,gBAAAJ,EAAC,KAAE,EAAA,WAAU,QACT,UAAA;AAAA,MAAA,gBAAAE,EAAC,YAAO,UAAY,eAAA,CAAA;AAAA,MAAS;AAAA,MAAG;AAAA,MAC/B,gBAAAA,EAAAC,GAAA,EAAQ,IAAG,+BAA8B,UAE1C,gBAAA,CAAA;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAD,EAACE,GAAkB,EAAA,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmChD;AAAA,IACc,gBAAAJ,EAAC,KAAE,EAAA,WAAU,QACT,UAAA;AAAA,MAAA,gBAAAE,EAAC,YAAO,UAAS,YAAA,CAAA;AAAA,MAAS;AAAA,MAAG;AAAA,MAC5B,gBAAAA,EAAAC,GAAA,EAAQ,IAAG,+BAA8B,UAE1C,gBAAA,CAAA;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAD,EAACE,GAAkB,EAAA,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYhD,CAAA;AAAA,EAAA,EACU,CAAA;AAAA,GACJ;"}

package/dist/@ecme/views/guide/Documentations/components/StateManagement.js.map

@@ -1 +1 @@
-{"version":3,"file":"StateManagement.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/StateManagement.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst StateManagement = () => {\n    return (\n        <>\n            <p>\n                In this template, we've integrated Zustand for state management.\n                Zustand is a small, fast, and scalable state management solution\n                that allows you to manage state outside of the React component\n                tree, providing a more efficient way to handle global state\n                across your application.\n            </p>\n            <p>\n                We use Zustand to manage some of the core states in the\n                template, but it's entirely optional for you to continue using\n                it in your projects. If you prefer a different state management\n                library or even the built-in React state, you can easily switch\n                to what best suits your needs.\n            </p>\n            <div className=\"mt-10\" id=\"creating-zustand-state\">\n                <h5>Creating a Zustand State</h5>\n                <p>\n                    Creating a Zustand store is straightforward. Below is an\n                    example of how you can create a global state to manage a\n                    simple counter:\n                </p>\n                <SyntaxHighlighter language=\"typescript\">\n                    {`import create from 'zustand'\n\ntype CouterState = {\n    count: number\n}\n\ntype CouterAction = {\n    increaseCount: () => void\n    decreaseCount: () => void\n}\n\n// Define the store\nconst useCounterStore = create<CouterState & CouterAction>((set) => ({\n    count: 0,\n    increaseCount: () => set((state) => ({ count: state.count + 1 })),\n    decreaseCount: () => set((state) => ({ count: state.count - 1 })),\n}))\n\nexport default useCounterStore`}\n                </SyntaxHighlighter>\n                <p>\n                    In this example, we've created a store with a{' '}\n                    <code>count</code> state and two actions:{' '}\n                    <code>increaseCount</code> and <code>decreaseCount</code>.\n                    These actions update the state by increasing or decreasing\n                    the <code>count</code>.\n                </p>\n            </div>\n            <div className=\"mt-10\" id=\"using-zustand-state\">\n                <h5>Using Zustand State in a Component</h5>\n                <p>\n                    Once you've created the store, using it in a component is\n                    simple. Here's how you can integrate the{' '}\n                    <code>useCounterStore</code> into a React component:\n                </p>\n                <SyntaxHighlighter language=\"tsx\">\n                    {`import useCounterStore from './path/to/store'\n\nconst Counter = () => {\n    const { count, increaseCount, decreaseCount } = useCounterStore()\n\n    return (\n        <div>\n            <h1>Counter: {count}</h1>\n            <button onClick={increaseCount}>Increase</button>\n            <button onClick={decreaseCount}>Decrease</button>\n        </div>\n    )\n}\n\nexport default Counter`}\n                </SyntaxHighlighter>\n                <p>\n                    In this component, we use the <code>useCounterStore</code>{' '}\n                    hook to access the <code>count</code> state and the two\n                    actions. The UI updates automatically whenever the state\n                    changes, and the buttons allow the user to interact with the\n                    state.\n                </p>\n            </div>\n            <p>\n                This is just a basic example to get you started. Zustand is\n                flexible and can be used for more complex state management\n                scenarios as your application grows. If you want to explore more\n                advanced usage, we recommend checking out the official{' '}\n                <a\n                    href=\"https://zustand.docs.pmnd.rs/getting-started/introduction\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                >\n                    Zustand documentation\n                </a>\n                .\n            </p>\n        </>\n    )\n}\n\nexport default StateManagement\n"],"names":["StateManagement","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAGA,MAAMA,IAAkB,MAEhB,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,UAAA,wRAAA,CAMH;AAAA,EACA,gBAAAA,EAAC,OAAE,UAAA,wRAAA,CAMH;AAAA,EACA,gBAAAF,EAAC,OAAA,EAAI,WAAU,SAAQ,IAAG,0BACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAA,2BAAA,CAAwB;AAAA,IAC5B,gBAAAA,EAAC,OAAE,UAAA,oIAAA,CAIH;AAAA,IACA,gBAAAA,EAACC,GAAA,EAAkB,UAAS,cACvB,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAmBL;AAAA,sBACC,KAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MAC+C;AAAA,MAC9C,gBAAAD,EAAC,UAAK,UAAA,QAAA,CAAK;AAAA,MAAO;AAAA,MAAwB;AAAA,MAC1C,gBAAAA,EAAC,UAAK,UAAA,gBAAA,CAAa;AAAA,MAAO;AAAA,MAAK,gBAAAA,EAAC,UAAK,UAAA,gBAAA,CAAa;AAAA,MAAO;AAAA,MAErD,gBAAAA,EAAC,UAAK,UAAA,QAAA,CAAK;AAAA,MAAO;AAAA,IAAA,EAAA,CAC1B;AAAA,EAAA,GACJ;AAAA,EACA,gBAAAF,EAAC,OAAA,EAAI,WAAU,SAAQ,IAAG,uBACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAA,qCAAA,CAAkC;AAAA,sBACrC,KAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MAE0C;AAAA,MACzC,gBAAAA,EAAC,UAAK,UAAA,kBAAA,CAAe;AAAA,MAAO;AAAA,IAAA,GAChC;AAAA,IACA,gBAAAA,EAACC,GAAA,EAAkB,UAAS,OACvB,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAeL;AAAA,sBACC,KAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MAC+B,gBAAAD,EAAC,UAAK,UAAA,kBAAA,CAAe;AAAA,MAAQ;AAAA,MAAI;AAAA,MAC5C,gBAAAA,EAAC,UAAK,UAAA,QAAA,CAAK;AAAA,MAAO;AAAA,IAAA,EAAA,CAIzC;AAAA,EAAA,GACJ;AAAA,oBACC,KAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IAIwD;AAAA,IACvD,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,QAAO;AAAA,QACP,KAAI;AAAA,QACP,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEG;AAAA,EAAA,EAAA,CAER;AAAA,GACJ;"}
+{"version":3,"file":"StateManagement.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/StateManagement.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst StateManagement = () => {\n    return (\n        <>\n            <p>\n                In this template, we've integrated Zustand for state management.\n                Zustand is a small, fast, and scalable state management solution\n                that allows you to manage state outside of the React component\n                tree, providing a more efficient way to handle global state\n                across your application.\n            </p>\n            <p>\n                We use Zustand to manage some of the core states in the\n                template, but it's entirely optional for you to continue using\n                it in your projects. If you prefer a different state management\n                library or even the built-in React state, you can easily switch\n                to what best suits your needs.\n            </p>\n            <div className=\"mt-10\" id=\"creating-zustand-state\">\n                <h5>Creating a Zustand State</h5>\n                <p>\n                    Creating a Zustand store is straightforward. Below is an\n                    example of how you can create a global state to manage a\n                    simple counter:\n                </p>\n                <SyntaxHighlighter language=\"typescript\">\n                    {`import create from 'zustand'\n\ntype CouterState = {\n    count: number\n}\n\ntype CouterAction = {\n    increaseCount: () => void\n    decreaseCount: () => void\n}\n\n// Define the store\nconst useCounterStore = create<CouterState & CouterAction>((set) => ({\n    count: 0,\n    increaseCount: () => set((state) => ({ count: state.count + 1 })),\n    decreaseCount: () => set((state) => ({ count: state.count - 1 })),\n}))\n\nexport default useCounterStore`}\n                </SyntaxHighlighter>\n                <p>\n                    In this example, we've created a store with a{' '}\n                    <code>count</code> state and two actions:{' '}\n                    <code>increaseCount</code> and <code>decreaseCount</code>.\n                    These actions update the state by increasing or decreasing\n                    the <code>count</code>.\n                </p>\n            </div>\n            <div className=\"mt-10\" id=\"using-zustand-state\">\n                <h5>Using Zustand State in a Component</h5>\n                <p>\n                    Once you've created the store, using it in a component is\n                    simple. Here's how you can integrate the{' '}\n                    <code>useCounterStore</code> into a React component:\n                </p>\n                <SyntaxHighlighter language=\"tsx\">\n                    {`import useCounterStore from './path/to/store'\n\nconst Counter = () => {\n    const { count, increaseCount, decreaseCount } = useCounterStore()\n\n    return (\n        <div>\n            <h1>Counter: {count}</h1>\n            <button onClick={increaseCount}>Increase</button>\n            <button onClick={decreaseCount}>Decrease</button>\n        </div>\n    )\n}\n\nexport default Counter`}\n                </SyntaxHighlighter>\n                <p>\n                    In this component, we use the <code>useCounterStore</code>{' '}\n                    hook to access the <code>count</code> state and the two\n                    actions. The UI updates automatically whenever the state\n                    changes, and the buttons allow the user to interact with the\n                    state.\n                </p>\n            </div>\n            <p>\n                This is just a basic example to get you started. Zustand is\n                flexible and can be used for more complex state management\n                scenarios as your application grows. If you want to explore more\n                advanced usage, we recommend checking out the official{' '}\n                <a\n                    href=\"https://zustand.docs.pmnd.rs/getting-started/introduction\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                >\n                    Zustand documentation\n                </a>\n                .\n            </p>\n        </>\n    )\n}\n\nexport default StateManagement\n"],"names":["StateManagement","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAGA,MAAMA,IAAkB,MAGZ,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,UAMH,wRAAA,CAAA;AAAA,EACA,gBAAAA,EAAC,OAAE,UAMH,wRAAA,CAAA;AAAA,EACC,gBAAAF,EAAA,OAAA,EAAI,WAAU,SAAQ,IAAG,0BACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAwB,2BAAA,CAAA;AAAA,IAC5B,gBAAAA,EAAC,OAAE,UAIH,oIAAA,CAAA;AAAA,IACA,gBAAAA,EAACC,GAAkB,EAAA,UAAS,cACvB,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAmBL;AAAA,sBACC,KAAE,EAAA,UAAA;AAAA,MAAA;AAAA,MAC+C;AAAA,MAC9C,gBAAAD,EAAC,UAAK,UAAK,QAAA,CAAA;AAAA,MAAO;AAAA,MAAwB;AAAA,MAC1C,gBAAAA,EAAC,UAAK,UAAa,gBAAA,CAAA;AAAA,MAAO;AAAA,MAAK,gBAAAA,EAAC,UAAK,UAAa,gBAAA,CAAA;AAAA,MAAO;AAAA,MAErD,gBAAAA,EAAC,UAAK,UAAK,QAAA,CAAA;AAAA,MAAO;AAAA,IAAA,EAC1B,CAAA;AAAA,EAAA,GACJ;AAAA,EACC,gBAAAF,EAAA,OAAA,EAAI,WAAU,SAAQ,IAAG,uBACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAkC,qCAAA,CAAA;AAAA,sBACrC,KAAE,EAAA,UAAA;AAAA,MAAA;AAAA,MAE0C;AAAA,MACzC,gBAAAA,EAAC,UAAK,UAAe,kBAAA,CAAA;AAAA,MAAO;AAAA,IAAA,GAChC;AAAA,IACA,gBAAAA,EAACC,GAAkB,EAAA,UAAS,OACvB,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAeL;AAAA,sBACC,KAAE,EAAA,UAAA;AAAA,MAAA;AAAA,MAC+B,gBAAAD,EAAC,UAAK,UAAe,kBAAA,CAAA;AAAA,MAAQ;AAAA,MAAI;AAAA,MAC5C,gBAAAA,EAAC,UAAK,UAAK,QAAA,CAAA;AAAA,MAAO;AAAA,IAAA,EAIzC,CAAA;AAAA,EAAA,GACJ;AAAA,oBACC,KAAE,EAAA,UAAA;AAAA,IAAA;AAAA,IAIwD;AAAA,IACvD,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,QAAO;AAAA,QACP,KAAI;AAAA,QACP,UAAA;AAAA,MAAA;AAAA,IAED;AAAA,IAAI;AAAA,EAAA,EAER,CAAA;AAAA,GACJ;"}

package/dist/@ecme/views/guide/Documentations/components/TailwindCss.js.map

@@ -1 +1 @@
-{"version":3,"file":"TailwindCss.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/TailwindCss.tsx"],"sourcesContent":["import Alert from '@/components/ui/Alert'\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst TailwindCss = () => {\n    return (\n        <>\n            <p>\n                Tailwind CSS is a utility-first CSS framework that provides\n                predefined classes for building and designing UI directly within\n                JSX. Ecme utilizes Tailwind as its core CSS framework, with most\n                UI elements built entirely using its features. You can easily\n                update the theme and base styles by modifying the{' '}\n                <code>tailwind.config.cjs</code> file located in the root\n                directory.\n            </p>\n            <div className=\"mt-10\" id=\"tooling\">\n                <h5>Tooling</h5>\n                <p className=\"mt-1\">\n                    If you use VS Code as your IDE, we recommend installing the{' '}\n                    <a\n                        href=\"https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss\"\n                        rel=\"noreferrer\"\n                        target=\"_blank\"\n                    >\n                        Tailwind CSS IntelliSense\n                    </a>{' '}\n                    plugin. This plugin provides autocomplete, syntax\n                    highlighting, and linting based on your Tailwind\n                    configuration, which can significantly speed up your\n                    development process.\n                </p>\n            </div>\n            <div className=\"mt-10\" id=\"note\">\n                <Alert showIcon type=\"info\" title=\"Note\">\n                    Some of our UI components use semantic classes with the\n                    Tailwind <code>@apply</code> directive. In certain cases,\n                    applying Tailwind classes directly to these components may\n                    not work as expected. You might need to use the{' '}\n                    <code>!important</code> modifier to override the default\n                    high specificity selectors.\n                </Alert>\n            </div>\n            <p>\n                To make any utility class important, simply add an{' '}\n                <code>!</code> character at the beginning, e.g.:\n            </p>\n            <SyntaxHighlighter language=\"jsx\">{`<Dropdown className=\"!bg-red-500\" />`}</SyntaxHighlighter>\n            <p>\n                For more information on utility classes and Tailwind\n                configuration, visit the official documentation:{' '}\n                <a\n                    href=\"https://tailwindcss.com/docs/utility-first\"\n                    rel=\"noreferrer\"\n                    target=\"_blank\"\n                >\n                    https://tailwindcss.com/docs/utility-first\n                </a>\n            </p>\n        </>\n    )\n}\n\nexport default TailwindCss\n"],"names":["TailwindCss","jsxs","Fragment","jsx","Alert","SyntaxHighlighter"],"mappings":";;;;AAGA,MAAMA,IAAc,MAEZ,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,EAAA,gBAAAD,EAAC,KAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IAKmD;AAAA,IAClD,gBAAAE,EAAC,UAAK,UAAA,sBAAA,CAAmB;AAAA,IAAO;AAAA,EAAA,GAEpC;AAAA,EACA,gBAAAF,EAAC,OAAA,EAAI,WAAU,SAAQ,IAAG,WACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAA,UAAA,CAAO;AAAA,IACX,gBAAAF,EAAC,KAAA,EAAE,WAAU,QAAO,UAAA;AAAA,MAAA;AAAA,MAC4C;AAAA,MAC5D,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,KAAI;AAAA,UACJ,QAAO;AAAA,UACV,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEI;AAAA,MAAI;AAAA,IAAA,EAAA,CAKb;AAAA,EAAA,GACJ;AAAA,EACA,gBAAAA,EAAC,OAAA,EAAI,WAAU,SAAQ,IAAG,QACtB,UAAA,gBAAAF,EAACG,GAAA,EAAM,UAAQ,IAAC,MAAK,QAAO,OAAM,QAAO,UAAA;AAAA,IAAA;AAAA,IAE5B,gBAAAD,EAAC,UAAK,UAAA,SAAA,CAAM;AAAA,IAAO;AAAA,IAEoB;AAAA,IAChD,gBAAAA,EAAC,UAAK,UAAA,aAAA,CAAU;AAAA,IAAO;AAAA,EAAA,EAAA,CAE3B,EAAA,CACJ;AAAA,oBACC,KAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IACoD;AAAA,IACnD,gBAAAA,EAAC,UAAK,UAAA,IAAA,CAAC;AAAA,IAAO;AAAA,EAAA,GAClB;AAAA,EACA,gBAAAA,EAACE,GAAA,EAAkB,UAAS,OAAO,UAAA,wCAAuC;AAAA,oBACzE,KAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IAEkD;AAAA,IACjD,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,KAAI;AAAA,QACJ,QAAO;AAAA,QACV,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,EAAA,CACJ;AAAA,GACJ;"}
+{"version":3,"file":"TailwindCss.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/TailwindCss.tsx"],"sourcesContent":["import Alert from '@/components/ui/Alert'\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst TailwindCss = () => {\n    return (\n        <>\n            <p>\n                Tailwind CSS is a utility-first CSS framework that provides\n                predefined classes for building and designing UI directly within\n                JSX. Ecme utilizes Tailwind as its core CSS framework, with most\n                UI elements built entirely using its features. You can easily\n                update the theme and base styles by modifying the{' '}\n                <code>tailwind.config.cjs</code> file located in the root\n                directory.\n            </p>\n            <div className=\"mt-10\" id=\"tooling\">\n                <h5>Tooling</h5>\n                <p className=\"mt-1\">\n                    If you use VS Code as your IDE, we recommend installing the{' '}\n                    <a\n                        href=\"https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss\"\n                        rel=\"noreferrer\"\n                        target=\"_blank\"\n                    >\n                        Tailwind CSS IntelliSense\n                    </a>{' '}\n                    plugin. This plugin provides autocomplete, syntax\n                    highlighting, and linting based on your Tailwind\n                    configuration, which can significantly speed up your\n                    development process.\n                </p>\n            </div>\n            <div className=\"mt-10\" id=\"note\">\n                <Alert showIcon type=\"info\" title=\"Note\">\n                    Some of our UI components use semantic classes with the\n                    Tailwind <code>@apply</code> directive. In certain cases,\n                    applying Tailwind classes directly to these components may\n                    not work as expected. You might need to use the{' '}\n                    <code>!important</code> modifier to override the default\n                    high specificity selectors.\n                </Alert>\n            </div>\n            <p>\n                To make any utility class important, simply add an{' '}\n                <code>!</code> character at the beginning, e.g.:\n            </p>\n            <SyntaxHighlighter language=\"jsx\">{`<Dropdown className=\"!bg-red-500\" />`}</SyntaxHighlighter>\n            <p>\n                For more information on utility classes and Tailwind\n                configuration, visit the official documentation:{' '}\n                <a\n                    href=\"https://tailwindcss.com/docs/utility-first\"\n                    rel=\"noreferrer\"\n                    target=\"_blank\"\n                >\n                    https://tailwindcss.com/docs/utility-first\n                </a>\n            </p>\n        </>\n    )\n}\n\nexport default TailwindCss\n"],"names":["TailwindCss","jsxs","Fragment","jsx","Alert","SyntaxHighlighter"],"mappings":";;;;AAGA,MAAMA,IAAc,MAGR,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAA,gBAAAD,EAAC,KAAE,EAAA,UAAA;AAAA,IAAA;AAAA,IAKmD;AAAA,IAClD,gBAAAE,EAAC,UAAK,UAAmB,sBAAA,CAAA;AAAA,IAAO;AAAA,EAAA,GAEpC;AAAA,EACC,gBAAAF,EAAA,OAAA,EAAI,WAAU,SAAQ,IAAG,WACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAO,UAAA,CAAA;AAAA,IACX,gBAAAF,EAAC,KAAE,EAAA,WAAU,QAAO,UAAA;AAAA,MAAA;AAAA,MAC4C;AAAA,MAC5D,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,KAAI;AAAA,UACJ,QAAO;AAAA,UACV,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,MAAK;AAAA,MAAI;AAAA,IAAA,EAKb,CAAA;AAAA,EAAA,GACJ;AAAA,EACC,gBAAAA,EAAA,OAAA,EAAI,WAAU,SAAQ,IAAG,QACtB,UAAC,gBAAAF,EAAAG,GAAA,EAAM,UAAQ,IAAC,MAAK,QAAO,OAAM,QAAO,UAAA;AAAA,IAAA;AAAA,IAE5B,gBAAAD,EAAC,UAAK,UAAM,SAAA,CAAA;AAAA,IAAO;AAAA,IAEoB;AAAA,IAChD,gBAAAA,EAAC,UAAK,UAAU,aAAA,CAAA;AAAA,IAAO;AAAA,EAAA,EAAA,CAE3B,EACJ,CAAA;AAAA,oBACC,KAAE,EAAA,UAAA;AAAA,IAAA;AAAA,IACoD;AAAA,IACnD,gBAAAA,EAAC,UAAK,UAAC,IAAA,CAAA;AAAA,IAAO;AAAA,EAAA,GAClB;AAAA,EACC,gBAAAA,EAAAE,GAAA,EAAkB,UAAS,OAAO,UAAuC,wCAAA;AAAA,oBACzE,KAAE,EAAA,UAAA;AAAA,IAAA;AAAA,IAEkD;AAAA,IACjD,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,KAAI;AAAA,QACJ,QAAO;AAAA,QACV,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,EACJ,CAAA;AAAA,GACJ;"}

package/dist/@ecme/views/guide/Documentations/components/ThemeColor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeColor.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/ThemeColor.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst ThemeColor = () => {\n    return (\n        <>\n            <p>\n                We manage the theme color scheme using CSS variables, making it\n                easy to customize and extend the theme. You can modify the theme\n                colors by editing the CSS variables in the file located at:\n                <code>assets/styles/tailwind/index.css</code>\n            </p>\n            <p>Here is the default setup for the light and dark modes:</p>\n            <SyntaxHighlighter language=\"css\">{`:root {\n    --neutral: #ffffff;\n    --primary: #2a85ff;\n    --primary-deep: #0069f6;\n    --primary-mild: #4996ff;\n    --primary-subtle: #2a85ff1a;\n    --error: #ff6a55;\n    --error-subtle: #ff6a551a;\n    --success: #10b981;\n    --success-subtle: #05eb7624;\n    --info: #2a85ff;\n    --info-subtle: #2a85ff1a;\n    --warning: #f59e0b;\n    --warning-subtle: #ffd40045;\n    --gray-50: #fafafa;\n    --gray-100: #f5f5f5;\n    --gray-200: #e5e5e5;\n    --gray-300: #d4d4d4;\n    --gray-400: #a3a3a3;\n    --gray-500: #737373;\n    --gray-600: #525252;\n    --gray-700: #404040;\n    --gray-800: #262626;\n    --gray-900: #171717;\n    --gray-950: #0a0a0a;\n}\n\n.dark {\n    --neutral: #ffffff;\n    --primary: #2a85ff;\n    --primary-deep: #0069f6;\n    --primary-mild: #4996ff;\n    --primary-subtle: #2a85ff1a;\n    --error: #ff6a55;\n    --error-subtle: #ff6a551a; \n    --success: #10b981;\n    --success-subtle: #05eb7624;\n    --info: #2a85ff;\n    --info-subtle: #2a85ff1a;\n    --warning: #f59e0b;\n    --warning-subtle: #ffd40045;\n    --gray-50: #fafafa;\n    --gray-100: #f5f5f5;\n    --gray-200: #e5e5e5;\n    --gray-300: #d4d4d4;\n    --gray-400: #a3a3a3;\n    --gray-500: #737373;\n    --gray-600: #525252;\n    --gray-700: #404040;\n    --gray-800: #262626;\n    --gray-900: #171717;\n    --gray-950: #0a0a0a;\n}`}</SyntaxHighlighter>\n            <div className=\"mt-10\" id=\"dynamic-theme\">\n                <h5>Setting Up a Dynamic Theme</h5>\n                <p className=\"mt-1\">\n                    If you want to enable dynamic theme switching in your\n                    application, you'll need to take a few extra steps. First,\n                    configure your theme schema in the{' '}\n                    <code>configs/theme.config.ts</code> file:\n                </p>\n                <SyntaxHighlighter language=\"ts\">{`export type Variables = \n  | \"primary\"\n  | \"primaryDeep\"\n  | \"primaryMild\"\n  | \"primarySubtle\"\n  | \"neutral\";\n\nexport type ThemeVariables = Record<\n  \"light\" | \"dark\", \n  Record<Variables, string>\n>\n\n/** Default theme schema should corresponding to the CSS variables */\nconst defaultTheme: ThemeVariables = {\n    light: {\n        primary: \"#2a85ff\",\n        primaryDeep: \"#0069f6\",\n        primaryMild: \"#4996ff\",\n        primarySubtle: \"#2a85ff1a\",\n        neutral: \"#ffffff\",\n    },\n    dark: {\n        primary: \"#2a85ff\",\n        primaryDeep: \"#0069f6\",\n        primaryMild: \"#4996ff\",\n        primarySubtle: \"#2a85ff1a\",\n        neutral: \"#ffffff\",\n    },\n}\n\n/** Example of a custom green theme schema */\nconst greenTheme: ThemeVariables = {\n    light: {\n        primary: \"#0CAF60\",\n        primaryDeep: \"#088d50\",\n        primaryMild: \"#34c779\",\n        primarySubtle: \"#0CAF601a\",\n        neutral: \"#ffffff\",\n    },\n    dark: {\n        primary: \"#0CAF60\",\n        primaryDeep: \"#088d50\",\n        primaryMild: \"#34c779\",\n        primarySubtle: \"#0CAF601a\",\n        neutral: \"#ffffff\",\n    },\n}\n\nconst presetThemeSchemaConfig: Record<string, ThemeVariables> = {\n    default: defaultTheme,\n    green: greenTheme,\n}\n\nexport default presetThemeSchemaConfig`}</SyntaxHighlighter>\n            </div>\n            <p>\n                Now that your theme schemas are set up, you can use the{' '}\n                <code>useThemeStore</code> hook to switch between different\n                theme colors. Here's an example of how you might implement a\n                theme switcher:\n            </p>\n            <SyntaxHighlighter language=\"tsx\">{`import classNames from '@/utils/classNames'\nimport { TbCheck } from 'react-icons/tb'\nimport presetThemeSchemaConfig from '@/configs/preset-theme-schema.config'\nimport { useThemeStore } from '@/store/themeStore'\n\nconst ThemeSwitcher = () => {\n    const schema = useThemeStore((state) => state.themeSchema)\n    const setSchema = useThemeStore((state) => state.setSchema)\n    const mode = useThemeStore((state) => state.mode)\n\n    return (\n        <div className=\"inline-flex items-center gap-2\">\n            {Object.entries(presetThemeSchemaConfig).map(([key, value]) => (\n                <button\n                    key={key}\n                    className={classNames(\n                        'h-8 w-8 rounded-full flex items-center justify-center border-2 border-white',\n                        schema === key && 'ring-2 ring-primary',\n                    )}\n                    style={{ backgroundColor: value[mode].primary || '' }}\n                    onClick={() => setSchema(key)}\n                >\n                    {schema === key ? (\n                        <TbCheck className=\"text-neutral text-lg\" />\n                    ) : (\n                        <></>\n                    )}\n                </button>\n            ))}\n        </div>\n    )\n}\n\nexport default ThemeSwitcher`}</SyntaxHighlighter>\n            <p>\n                This guide should help you effectively manage and switch themes\n                within your application. You can extend the theme schemas as\n                needed to fit your design requirements.\n            </p>\n        </>\n    )\n}\n\nexport default ThemeColor\n"],"names":["ThemeColor","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAGA,MAAMA,IAAa,MAEX,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,EAAA,gBAAAD,EAAC,KAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IAIC,gBAAAE,EAAC,UAAK,UAAA,mCAAA,CAAgC;AAAA,EAAA,GAC1C;AAAA,EACA,gBAAAA,EAAC,OAAE,UAAA,0DAAA,CAAuD;AAAA,EAC1D,gBAAAA,EAACC,GAAA,EAAkB,UAAS,OAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoD5C;AAAA,EACS,gBAAAH,EAAC,OAAA,EAAI,WAAU,SAAQ,IAAG,iBACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAA,6BAAA,CAA0B;AAAA,IAC9B,gBAAAF,EAAC,KAAA,EAAE,WAAU,QAAO,UAAA;AAAA,MAAA;AAAA,MAGmB;AAAA,MACnC,gBAAAE,EAAC,UAAK,UAAA,0BAAA,CAAuB;AAAA,MAAO;AAAA,IAAA,GACxC;AAAA,IACA,gBAAAA,EAACC,GAAA,EAAkB,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wCAAA,CAqDV;AAAA,EAAA,GAC5B;AAAA,oBACC,KAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IACyD;AAAA,IACxD,gBAAAD,EAAC,UAAK,UAAA,gBAAA,CAAa;AAAA,IAAO;AAAA,EAAA,GAG9B;AAAA,EACA,gBAAAA,EAACC,GAAA,EAAkB,UAAS,OAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAiCjB;AAAA,EAClB,gBAAAD,EAAC,OAAE,UAAA,uKAAA,CAIH;AAAA,GACJ;"}
+{"version":3,"file":"ThemeColor.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/ThemeColor.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst ThemeColor = () => {\n    return (\n        <>\n            <p>\n                We manage the theme color scheme using CSS variables, making it\n                easy to customize and extend the theme. You can modify the theme\n                colors by editing the CSS variables in the file located at:\n                <code>assets/styles/tailwind/index.css</code>\n            </p>\n            <p>Here is the default setup for the light and dark modes:</p>\n            <SyntaxHighlighter language=\"css\">{`:root {\n    --neutral: #ffffff;\n    --primary: #2a85ff;\n    --primary-deep: #0069f6;\n    --primary-mild: #4996ff;\n    --primary-subtle: #2a85ff1a;\n    --error: #ff6a55;\n    --error-subtle: #ff6a551a;\n    --success: #10b981;\n    --success-subtle: #05eb7624;\n    --info: #2a85ff;\n    --info-subtle: #2a85ff1a;\n    --warning: #f59e0b;\n    --warning-subtle: #ffd40045;\n    --gray-50: #fafafa;\n    --gray-100: #f5f5f5;\n    --gray-200: #e5e5e5;\n    --gray-300: #d4d4d4;\n    --gray-400: #a3a3a3;\n    --gray-500: #737373;\n    --gray-600: #525252;\n    --gray-700: #404040;\n    --gray-800: #262626;\n    --gray-900: #171717;\n    --gray-950: #0a0a0a;\n}\n\n.dark {\n    --neutral: #ffffff;\n    --primary: #2a85ff;\n    --primary-deep: #0069f6;\n    --primary-mild: #4996ff;\n    --primary-subtle: #2a85ff1a;\n    --error: #ff6a55;\n    --error-subtle: #ff6a551a; \n    --success: #10b981;\n    --success-subtle: #05eb7624;\n    --info: #2a85ff;\n    --info-subtle: #2a85ff1a;\n    --warning: #f59e0b;\n    --warning-subtle: #ffd40045;\n    --gray-50: #fafafa;\n    --gray-100: #f5f5f5;\n    --gray-200: #e5e5e5;\n    --gray-300: #d4d4d4;\n    --gray-400: #a3a3a3;\n    --gray-500: #737373;\n    --gray-600: #525252;\n    --gray-700: #404040;\n    --gray-800: #262626;\n    --gray-900: #171717;\n    --gray-950: #0a0a0a;\n}`}</SyntaxHighlighter>\n            <div className=\"mt-10\" id=\"dynamic-theme\">\n                <h5>Setting Up a Dynamic Theme</h5>\n                <p className=\"mt-1\">\n                    If you want to enable dynamic theme switching in your\n                    application, you'll need to take a few extra steps. First,\n                    configure your theme schema in the{' '}\n                    <code>configs/theme.config.ts</code> file:\n                </p>\n                <SyntaxHighlighter language=\"ts\">{`export type Variables = \n  | \"primary\"\n  | \"primaryDeep\"\n  | \"primaryMild\"\n  | \"primarySubtle\"\n  | \"neutral\";\n\nexport type ThemeVariables = Record<\n  \"light\" | \"dark\", \n  Record<Variables, string>\n>\n\n/** Default theme schema should corresponding to the CSS variables */\nconst defaultTheme: ThemeVariables = {\n    light: {\n        primary: \"#2a85ff\",\n        primaryDeep: \"#0069f6\",\n        primaryMild: \"#4996ff\",\n        primarySubtle: \"#2a85ff1a\",\n        neutral: \"#ffffff\",\n    },\n    dark: {\n        primary: \"#2a85ff\",\n        primaryDeep: \"#0069f6\",\n        primaryMild: \"#4996ff\",\n        primarySubtle: \"#2a85ff1a\",\n        neutral: \"#ffffff\",\n    },\n}\n\n/** Example of a custom green theme schema */\nconst greenTheme: ThemeVariables = {\n    light: {\n        primary: \"#0CAF60\",\n        primaryDeep: \"#088d50\",\n        primaryMild: \"#34c779\",\n        primarySubtle: \"#0CAF601a\",\n        neutral: \"#ffffff\",\n    },\n    dark: {\n        primary: \"#0CAF60\",\n        primaryDeep: \"#088d50\",\n        primaryMild: \"#34c779\",\n        primarySubtle: \"#0CAF601a\",\n        neutral: \"#ffffff\",\n    },\n}\n\nconst presetThemeSchemaConfig: Record<string, ThemeVariables> = {\n    default: defaultTheme,\n    green: greenTheme,\n}\n\nexport default presetThemeSchemaConfig`}</SyntaxHighlighter>\n            </div>\n            <p>\n                Now that your theme schemas are set up, you can use the{' '}\n                <code>useThemeStore</code> hook to switch between different\n                theme colors. Here's an example of how you might implement a\n                theme switcher:\n            </p>\n            <SyntaxHighlighter language=\"tsx\">{`import classNames from '@/utils/classNames'\nimport { TbCheck } from 'react-icons/tb'\nimport presetThemeSchemaConfig from '@/configs/preset-theme-schema.config'\nimport { useThemeStore } from '@/store/themeStore'\n\nconst ThemeSwitcher = () => {\n    const schema = useThemeStore((state) => state.themeSchema)\n    const setSchema = useThemeStore((state) => state.setSchema)\n    const mode = useThemeStore((state) => state.mode)\n\n    return (\n        <div className=\"inline-flex items-center gap-2\">\n            {Object.entries(presetThemeSchemaConfig).map(([key, value]) => (\n                <button\n                    key={key}\n                    className={classNames(\n                        'h-8 w-8 rounded-full flex items-center justify-center border-2 border-white',\n                        schema === key && 'ring-2 ring-primary',\n                    )}\n                    style={{ backgroundColor: value[mode].primary || '' }}\n                    onClick={() => setSchema(key)}\n                >\n                    {schema === key ? (\n                        <TbCheck className=\"text-neutral text-lg\" />\n                    ) : (\n                        <></>\n                    )}\n                </button>\n            ))}\n        </div>\n    )\n}\n\nexport default ThemeSwitcher`}</SyntaxHighlighter>\n            <p>\n                This guide should help you effectively manage and switch themes\n                within your application. You can extend the theme schemas as\n                needed to fit your design requirements.\n            </p>\n        </>\n    )\n}\n\nexport default ThemeColor\n"],"names":["ThemeColor","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAGA,MAAMA,IAAa,MAGP,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAA,gBAAAD,EAAC,KAAE,EAAA,UAAA;AAAA,IAAA;AAAA,IAIC,gBAAAE,EAAC,UAAK,UAAgC,mCAAA,CAAA;AAAA,EAAA,GAC1C;AAAA,EACA,gBAAAA,EAAC,OAAE,UAAuD,0DAAA,CAAA;AAAA,EAC1D,gBAAAA,EAACC,GAAkB,EAAA,UAAS,OAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoD5C;AAAA,EACU,gBAAAH,EAAA,OAAA,EAAI,WAAU,SAAQ,IAAG,iBACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAA0B,6BAAA,CAAA;AAAA,IAC9B,gBAAAF,EAAC,KAAE,EAAA,WAAU,QAAO,UAAA;AAAA,MAAA;AAAA,MAGmB;AAAA,MACnC,gBAAAE,EAAC,UAAK,UAAuB,0BAAA,CAAA;AAAA,MAAO;AAAA,IAAA,GACxC;AAAA,IACA,gBAAAA,EAACC,GAAkB,EAAA,UAAS,MAAM,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wCAqDV,CAAA;AAAA,EAAA,GAC5B;AAAA,oBACC,KAAE,EAAA,UAAA;AAAA,IAAA;AAAA,IACyD;AAAA,IACxD,gBAAAD,EAAC,UAAK,UAAa,gBAAA,CAAA;AAAA,IAAO;AAAA,EAAA,GAG9B;AAAA,EACA,gBAAAA,EAACC,GAAkB,EAAA,UAAS,OAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAiCjB;AAAA,EAClB,gBAAAD,EAAC,OAAE,UAIH,uKAAA,CAAA;AAAA,GACJ;"}

package/dist/@ecme/views/guide/Documentations/components/TypeScript.js.map

@@ -1 +1 @@
-{"version":3,"file":"TypeScript.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/TypeScript.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst TypeScript = () => {\n    return (\n        <>\n            <p>\n                This guide will walk you through configuring TypeScript settings\n                and taking advantage of its features in Elsatr. Since Ecme is\n                fully developed in TypeScript, it allows you to write type-safe\n                and scalable code, making it easier to build modern web\n                applications.\n            </p>\n            <div className=\"mt-10\" id=\"config-ts-settings\">\n                <h5>Configuring TypeScript Settings</h5>\n                <p>\n                    Proper configuration is essential in TypeScript projects as\n                    it lets you customize various compiler options to suit your\n                    project's needs. You can adjust these settings in the{' '}\n                    <code>tsconfig.json</code> file.\n                </p>\n            </div>\n            <div className=\"mt-10\" id=\"adjusting-ts-strictness\">\n                <h5>Adjusting TypeScript Strictness</h5>\n                <p>\n                    We understand that not everyone may be comfortable with\n                    TypeScript's strict type checking. If you prefer a more\n                    relaxed, JavaScript-like experience, you can adjust the\n                    settings to allow for weaker type checking.\n                </p>\n                <p>\n                    Here's an example of a <code>tsconfig.json</code>{' '}\n                    configuration for weak type checking:\n                </p>\n                <SyntaxHighlighter language=\"json\">{`{\n  \"compilerOptions\": {\n    \"strict\": false,\n    ...\n  }\n}`}</SyntaxHighlighter>\n                <p>\n                    This setup relaxes TypeScript's strictness, giving you more\n                    flexibility and a coding experience closer to JavaScript.\n                </p>\n            </div>\n        </>\n    )\n}\n\nexport default TypeScript\n"],"names":["TypeScript","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAGA,MAAMA,IAAa,MAEX,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,UAAA,uQAAA,CAMH;AAAA,EACA,gBAAAF,EAAC,OAAA,EAAI,WAAU,SAAQ,IAAG,sBACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAA,kCAAA,CAA+B;AAAA,sBAClC,KAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MAGuD;AAAA,MACtD,gBAAAA,EAAC,UAAK,UAAA,gBAAA,CAAa;AAAA,MAAO;AAAA,IAAA,EAAA,CAC9B;AAAA,EAAA,GACJ;AAAA,EACA,gBAAAF,EAAC,OAAA,EAAI,WAAU,SAAQ,IAAG,2BACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAAA,kCAAA,CAA+B;AAAA,IACnC,gBAAAA,EAAC,OAAE,UAAA,sNAAA,CAKH;AAAA,sBACC,KAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MACwB,gBAAAA,EAAC,UAAK,UAAA,gBAAA,CAAa;AAAA,MAAQ;AAAA,MAAI;AAAA,IAAA,GAE1D;AAAA,IACA,gBAAAA,EAACC,GAAA,EAAkB,UAAS,QAAQ,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjD;AAAA,IACa,gBAAAD,EAAC,OAAE,UAAA,wHAAA,CAGH;AAAA,EAAA,EAAA,CACJ;AAAA,GACJ;"}
+{"version":3,"file":"TypeScript.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/TypeScript.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport SyntaxHighlighter from '@/components/shared/SyntaxHighlighter'\n\nconst TypeScript = () => {\n    return (\n        <>\n            <p>\n                This guide will walk you through configuring TypeScript settings\n                and taking advantage of its features in Elsatr. Since Ecme is\n                fully developed in TypeScript, it allows you to write type-safe\n                and scalable code, making it easier to build modern web\n                applications.\n            </p>\n            <div className=\"mt-10\" id=\"config-ts-settings\">\n                <h5>Configuring TypeScript Settings</h5>\n                <p>\n                    Proper configuration is essential in TypeScript projects as\n                    it lets you customize various compiler options to suit your\n                    project's needs. You can adjust these settings in the{' '}\n                    <code>tsconfig.json</code> file.\n                </p>\n            </div>\n            <div className=\"mt-10\" id=\"adjusting-ts-strictness\">\n                <h5>Adjusting TypeScript Strictness</h5>\n                <p>\n                    We understand that not everyone may be comfortable with\n                    TypeScript's strict type checking. If you prefer a more\n                    relaxed, JavaScript-like experience, you can adjust the\n                    settings to allow for weaker type checking.\n                </p>\n                <p>\n                    Here's an example of a <code>tsconfig.json</code>{' '}\n                    configuration for weak type checking:\n                </p>\n                <SyntaxHighlighter language=\"json\">{`{\n  \"compilerOptions\": {\n    \"strict\": false,\n    ...\n  }\n}`}</SyntaxHighlighter>\n                <p>\n                    This setup relaxes TypeScript's strictness, giving you more\n                    flexibility and a coding experience closer to JavaScript.\n                </p>\n            </div>\n        </>\n    )\n}\n\nexport default TypeScript\n"],"names":["TypeScript","jsxs","Fragment","jsx","SyntaxHighlighter"],"mappings":";;AAGA,MAAMA,IAAa,MAGP,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,UAMH,uQAAA,CAAA;AAAA,EACC,gBAAAF,EAAA,OAAA,EAAI,WAAU,SAAQ,IAAG,sBACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAA+B,kCAAA,CAAA;AAAA,sBAClC,KAAE,EAAA,UAAA;AAAA,MAAA;AAAA,MAGuD;AAAA,MACtD,gBAAAA,EAAC,UAAK,UAAa,gBAAA,CAAA;AAAA,MAAO;AAAA,IAAA,EAC9B,CAAA;AAAA,EAAA,GACJ;AAAA,EACC,gBAAAF,EAAA,OAAA,EAAI,WAAU,SAAQ,IAAG,2BACtB,UAAA;AAAA,IAAA,gBAAAE,EAAC,QAAG,UAA+B,kCAAA,CAAA;AAAA,IACnC,gBAAAA,EAAC,OAAE,UAKH,sNAAA,CAAA;AAAA,sBACC,KAAE,EAAA,UAAA;AAAA,MAAA;AAAA,MACwB,gBAAAA,EAAC,UAAK,UAAa,gBAAA,CAAA;AAAA,MAAQ;AAAA,MAAI;AAAA,IAAA,GAE1D;AAAA,IACA,gBAAAA,EAACC,GAAkB,EAAA,UAAS,QAAQ,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjD;AAAA,IACa,gBAAAD,EAAC,OAAE,UAGH,wHAAA,CAAA;AAAA,EAAA,EACJ,CAAA;AAAA,GACJ;"}

package/dist/@ecme/views/guide/Documentations/components/Updating.js.map

@@ -1 +1 @@
-{"version":3,"file":"Updating.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Updating.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nconst Updating = () => {\n    return (\n        <>\n            <p>\n                Since the platform doesn't include a built-in version control\n                system, updating your templates can be challenging. However,\n                here are some tips to help you keep your templates up to date\n                more easily.\n            </p>\n            <ul>\n                <li>\n                    Before starting a new project, consider hosting the original\n                    template in your own repository.\n                </li>\n                <li>\n                    Create a branch from the repository to use as your\n                    workspace.\n                </li>\n                <li>\n                    When a new update is released, push the latest version's\n                    content to your repository.\n                </li>\n                <li>\n                    Merge your workspace branch with the original branch to\n                    incorporate the latest changes.\n                </li>\n            </ul>\n        </>\n    )\n}\n\nexport default Updating\n"],"names":["Updating","jsxs","Fragment","jsx"],"mappings":";AACA,MAAMA,IAAW,MAET,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,UAAA,wMAAA,CAKH;AAAA,oBACC,MAAA,EACG,UAAA;AAAA,IAAA,gBAAAA,EAAC,QAAG,UAAA,gGAAA,CAGJ;AAAA,IACA,gBAAAA,EAAC,QAAG,UAAA,gEAAA,CAGJ;AAAA,IACA,gBAAAA,EAAC,QAAG,UAAA,uFAAA,CAGJ;AAAA,IACA,gBAAAA,EAAC,QAAG,UAAA,0FAAA,CAGJ;AAAA,EAAA,EAAA,CACJ;AAAA,GACJ;"}
+{"version":3,"file":"Updating.js","sources":["../../../../../../lib/@ecme/views/guide/Documentations/components/Updating.tsx"],"sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nconst Updating = () => {\n    return (\n        <>\n            <p>\n                Since the platform doesn't include a built-in version control\n                system, updating your templates can be challenging. However,\n                here are some tips to help you keep your templates up to date\n                more easily.\n            </p>\n            <ul>\n                <li>\n                    Before starting a new project, consider hosting the original\n                    template in your own repository.\n                </li>\n                <li>\n                    Create a branch from the repository to use as your\n                    workspace.\n                </li>\n                <li>\n                    When a new update is released, push the latest version's\n                    content to your repository.\n                </li>\n                <li>\n                    Merge your workspace branch with the original branch to\n                    incorporate the latest changes.\n                </li>\n            </ul>\n        </>\n    )\n}\n\nexport default Updating\n"],"names":["Updating","jsxs","Fragment","jsx"],"mappings":";AACA,MAAMA,IAAW,MAGL,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAE,UAKH,wMAAA,CAAA;AAAA,oBACC,MACG,EAAA,UAAA;AAAA,IAAA,gBAAAA,EAAC,QAAG,UAGJ,gGAAA,CAAA;AAAA,IACA,gBAAAA,EAAC,QAAG,UAGJ,gEAAA,CAAA;AAAA,IACA,gBAAAA,EAAC,QAAG,UAGJ,uFAAA,CAAA;AAAA,IACA,gBAAAA,EAAC,QAAG,UAGJ,0FAAA,CAAA;AAAA,EAAA,EACJ,CAAA;AAAA,GACJ;"}

package/dist/@ecme/views/guide/Documentations/documentationRoutes.js.map

@@ -1 +1 @@
-{"version":3,"file":"documentationRoutes.js","sources":["../../../../../lib/@ecme/views/guide/Documentations/documentationRoutes.ts"],"sourcesContent":["import { lazy } from 'react'\nimport { DocumentationRoute } from '@/@types/docs'\n\nconst documentationRoutes: DocumentationRoute[] = [\n    {\n        groupName: 'Getting Started',\n        nav: [\n            {\n                path: 'introduction',\n                label: 'Introduction',\n                component: lazy(() => import('./components/Introduction')),\n            },\n            {\n                path: 'installation',\n                label: 'Installation',\n                component: lazy(() => import('./components/Installation')),\n            },\n            {\n                path: 'tailwindcss',\n                label: 'TailwindCSS',\n                component: lazy(() => import('./components/TailwindCss')),\n            },\n            {\n                path: 'css',\n                label: 'CSS',\n                component: lazy(() => import('./components/Css')),\n            },\n            {\n                path: 'starter',\n                label: 'Starter',\n                component: lazy(() => import('./components//Starter')),\n            },\n            {\n                path: 'typescript',\n                label: 'Typescript',\n                component: lazy(() => import('./components/TypeScript')),\n            },\n            {\n                path: 'updating',\n                label: 'Updating',\n                component: lazy(() => import('./components/Updating')),\n            },\n        ],\n    },\n    {\n        groupName: 'Development',\n        nav: [\n            {\n                path: 'development-server',\n                label: 'Development Server',\n                component: lazy(() => import('./components/DevelopmentServer')),\n            },\n            {\n                path: 'folder-structure',\n                label: 'Folder Structure',\n                component: lazy(() => import('./components/FolderStructure')),\n            },\n            {\n                path: 'routing',\n                label: 'Routing',\n                component: lazy(() => import('./components/Routing')),\n            },\n            {\n                path: 'stateManagement',\n                label: 'State management',\n                component: lazy(() => import('./components/StateManagement')),\n            },\n            {\n                path: 'api-integration',\n                label: 'API Integration',\n                component: lazy(() => import('./components/ApiIntegration')),\n            },\n            {\n                path: 'authentication',\n                label: 'Authentication',\n                component: lazy(() => import('./components/Authentication')),\n            },\n            {\n                path: 'mock-api',\n                label: 'Mock Api',\n                component: lazy(() => import('./components/MockApi')),\n            },\n            {\n                path: 'firebase',\n                label: 'Firebase',\n                component: lazy(\n                    () => import('./components/FirebaseIntegration'),\n                ),\n            },\n        ],\n    },\n    {\n        groupName: 'Configuration',\n        nav: [\n            {\n                path: 'app',\n                label: 'App Config',\n                component: lazy(() => import('./components/Application')),\n            },\n            {\n                path: 'layouts',\n                label: 'Layouts',\n                component: lazy(() => import('./components/Layouts')),\n            },\n            {\n                path: 'navigation-config',\n                label: 'Navigation Config',\n                component: lazy(() => import('./components/NavigationConfig')),\n            },\n            {\n                path: 'theming',\n                label: 'Theming',\n                component: lazy(() => import('./components/ThemeColor')),\n            },\n            {\n                path: 'internationalization',\n                label: 'Internationalization',\n                component: lazy(\n                    () => import('./components/Internationalization'),\n                ),\n            },\n            {\n                path: 'dark-light-mode',\n                label: 'Dark/Light Mode',\n                component: lazy(() => import('./components/DarkLightMode')),\n            },\n            {\n                path: 'direction',\n                label: 'Direction',\n                component: lazy(() => import('./components/Direction')),\n            },\n            {\n                path: 'overall-theme-config',\n                label: 'Overall Theme Config',\n                component: lazy(\n                    () => import('./components/OverallThemeConfig'),\n                ),\n            },\n        ],\n    },\n    {\n        groupName: 'Deployment',\n        nav: [\n            {\n                path: 'build-production',\n                label: 'Build production',\n                component: lazy(() => import('./components/BuildProduction')),\n            },\n        ],\n    },\n    {\n        groupName: 'Other',\n        nav: [\n            {\n                path: 'credit',\n                label: 'Sources & Credits',\n                component: lazy(() => import('./components/Credit')),\n            },\n        ],\n    },\n]\n\nexport default documentationRoutes\n"],"names":["documentationRoutes","lazy"],"mappings":"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"}
+{"version":3,"file":"documentationRoutes.js","sources":["../../../../../lib/@ecme/views/guide/Documentations/documentationRoutes.ts"],"sourcesContent":["import { lazy } from 'react'\nimport { DocumentationRoute } from '@/@types/docs'\n\nconst documentationRoutes: DocumentationRoute[] = [\n    {\n        groupName: 'Getting Started',\n        nav: [\n            {\n                path: 'introduction',\n                label: 'Introduction',\n                component: lazy(() => import('./components/Introduction')),\n            },\n            {\n                path: 'installation',\n                label: 'Installation',\n                component: lazy(() => import('./components/Installation')),\n            },\n            {\n                path: 'tailwindcss',\n                label: 'TailwindCSS',\n                component: lazy(() => import('./components/TailwindCss')),\n            },\n            {\n                path: 'css',\n                label: 'CSS',\n                component: lazy(() => import('./components/Css')),\n            },\n            {\n                path: 'starter',\n                label: 'Starter',\n                component: lazy(() => import('./components//Starter')),\n            },\n            {\n                path: 'typescript',\n                label: 'Typescript',\n                component: lazy(() => import('./components/TypeScript')),\n            },\n            {\n                path: 'updating',\n                label: 'Updating',\n                component: lazy(() => import('./components/Updating')),\n            },\n        ],\n    },\n    {\n        groupName: 'Development',\n        nav: [\n            {\n                path: 'development-server',\n                label: 'Development Server',\n                component: lazy(() => import('./components/DevelopmentServer')),\n            },\n            {\n                path: 'folder-structure',\n                label: 'Folder Structure',\n                component: lazy(() => import('./components/FolderStructure')),\n            },\n            {\n                path: 'routing',\n                label: 'Routing',\n                component: lazy(() => import('./components/Routing')),\n            },\n            {\n                path: 'stateManagement',\n                label: 'State management',\n                component: lazy(() => import('./components/StateManagement')),\n            },\n            {\n                path: 'api-integration',\n                label: 'API Integration',\n                component: lazy(() => import('./components/ApiIntegration')),\n            },\n            {\n                path: 'authentication',\n                label: 'Authentication',\n                component: lazy(() => import('./components/Authentication')),\n            },\n            {\n                path: 'mock-api',\n                label: 'Mock Api',\n                component: lazy(() => import('./components/MockApi')),\n            },\n            {\n                path: 'firebase',\n                label: 'Firebase',\n                component: lazy(\n                    () => import('./components/FirebaseIntegration'),\n                ),\n            },\n        ],\n    },\n    {\n        groupName: 'Configuration',\n        nav: [\n            {\n                path: 'app',\n                label: 'App Config',\n                component: lazy(() => import('./components/Application')),\n            },\n            {\n                path: 'layouts',\n                label: 'Layouts',\n                component: lazy(() => import('./components/Layouts')),\n            },\n            {\n                path: 'navigation-config',\n                label: 'Navigation Config',\n                component: lazy(() => import('./components/NavigationConfig')),\n            },\n            {\n                path: 'theming',\n                label: 'Theming',\n                component: lazy(() => import('./components/ThemeColor')),\n            },\n            {\n                path: 'internationalization',\n                label: 'Internationalization',\n                component: lazy(\n                    () => import('./components/Internationalization'),\n                ),\n            },\n            {\n                path: 'dark-light-mode',\n                label: 'Dark/Light Mode',\n                component: lazy(() => import('./components/DarkLightMode')),\n            },\n            {\n                path: 'direction',\n                label: 'Direction',\n                component: lazy(() => import('./components/Direction')),\n            },\n            {\n                path: 'overall-theme-config',\n                label: 'Overall Theme Config',\n                component: lazy(\n                    () => import('./components/OverallThemeConfig'),\n                ),\n            },\n        ],\n    },\n    {\n        groupName: 'Deployment',\n        nav: [\n            {\n                path: 'build-production',\n                label: 'Build production',\n                component: lazy(() => import('./components/BuildProduction')),\n            },\n        ],\n    },\n    {\n        groupName: 'Other',\n        nav: [\n            {\n                path: 'credit',\n                label: 'Sources & Credits',\n                component: lazy(() => import('./components/Credit')),\n            },\n        ],\n    },\n]\n\nexport default documentationRoutes\n"],"names":["documentationRoutes","lazy"],"mappings":"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"}