@soyfri/template 1.0.0

package/dist/partials/widgets/charts/ChartsWidget6.js

@@ -0,0 +1,195 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartsWidget6 = void 0;
+var react_1 = __importStar(require("react"));
+var apexcharts_1 = __importDefault(require("apexcharts"));
+var _utils_1 = require("../../../assets/ts/_utils");
+var ThemeModeProvider_1 = require("../../layout/theme-mode/ThemeModeProvider");
+var ChartsWidget6 = function (_a) {
+    var className = _a.className;
+    var chartRef = (0, react_1.useRef)(null);
+    var mode = (0, ThemeModeProvider_1.useThemeMode)().mode;
+    var refreshChart = function () {
+        if (!chartRef.current) {
+            return;
+        }
+        var height = parseInt((0, _utils_1.getCSS)(chartRef.current, 'height'));
+        var chart = new apexcharts_1.default(chartRef.current, getChartOptions(height));
+        if (chart) {
+            chart.render();
+        }
+        return chart;
+    };
+    (0, react_1.useEffect)(function () {
+        var chart = refreshChart();
+        return function () {
+            if (chart) {
+                chart.destroy();
+            }
+        };
+    }, [chartRef, mode]);
+    return (react_1.default.createElement("div", { className: "card ".concat(className) },
+        react_1.default.createElement("div", { className: 'card-header border-0 pt-5' },
+            react_1.default.createElement("h3", { className: 'card-title align-items-start flex-column' },
+                react_1.default.createElement("span", { className: 'card-label fw-bold fs-3 mb-1' }, "Recent Orders"),
+                react_1.default.createElement("span", { className: 'text-muted fw-semibold fs-7' }, "More than 500+ new orders")),
+            react_1.default.createElement("div", { className: 'card-toolbar', "data-kt-buttons": 'true' },
+                react_1.default.createElement("a", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary active px-4 me-1', id: 'kt_charts_widget_6_sales_btn' }, "Sales"),
+                react_1.default.createElement("a", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1', id: 'kt_charts_widget_6_expenses_btn' }, "Expenses"))),
+        react_1.default.createElement("div", { className: 'card-body' },
+            react_1.default.createElement("div", { ref: chartRef, id: 'kt_charts_widget_6_chart', style: { height: '350px' } }))));
+};
+exports.ChartsWidget6 = ChartsWidget6;
+function getChartOptions(height) {
+    var labelColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-500');
+    var borderColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-200');
+    var baseColor = (0, _utils_1.getCSSVariableValue)('--bs-primary');
+    var baseLightColor = (0, _utils_1.getCSSVariableValue)('--bs-primary-light');
+    var secondaryColor = (0, _utils_1.getCSSVariableValue)('--bs-info');
+    return {
+        series: [
+            {
+                name: 'Net Profit',
+                type: 'bar',
+                data: [40, 50, 65, 70, 50, 30],
+            },
+            {
+                name: 'Revenue',
+                type: 'bar',
+                data: [20, 20, 25, 30, 30, 20],
+            },
+            {
+                name: 'Expenses',
+                type: 'area',
+                data: [50, 80, 60, 90, 50, 70],
+            },
+        ],
+        chart: {
+            fontFamily: 'inherit',
+            stacked: true,
+            height: height,
+            toolbar: {
+                show: false,
+            },
+        },
+        plotOptions: {
+            bar: {
+                horizontal: false,
+                borderRadius: 5,
+                columnWidth: '12%',
+            },
+        },
+        legend: {
+            show: false,
+        },
+        dataLabels: {
+            enabled: false,
+        },
+        stroke: {
+            curve: 'smooth',
+            show: true,
+            width: 2,
+            colors: ['transparent'],
+        },
+        xaxis: {
+            categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+            axisBorder: {
+                show: false,
+            },
+            axisTicks: {
+                show: false,
+            },
+            labels: {
+                style: {
+                    colors: labelColor,
+                    fontSize: '12px',
+                },
+            },
+        },
+        yaxis: {
+            max: 120,
+            labels: {
+                style: {
+                    colors: labelColor,
+                    fontSize: '12px',
+                },
+            },
+        },
+        fill: {
+            opacity: 1,
+        },
+        states: {
+            normal: {
+                filter: {
+                    type: 'none',
+                    value: 0,
+                },
+            },
+            hover: {
+                filter: {
+                    type: 'none',
+                    value: 0,
+                },
+            },
+            active: {
+                allowMultipleDataPointsSelection: false,
+                filter: {
+                    type: 'none',
+                    value: 0,
+                },
+            },
+        },
+        tooltip: {
+            style: {
+                fontSize: '12px',
+            },
+            y: {
+                formatter: function (val) {
+                    return '$' + val + ' thousands';
+                },
+            },
+        },
+        colors: [baseColor, secondaryColor, baseLightColor],
+        grid: {
+            borderColor: borderColor,
+            strokeDashArray: 4,
+            yaxis: {
+                lines: {
+                    show: true,
+                },
+            },
+            padding: {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+            },
+        },
+    };
+}

package/dist/partials/widgets/charts/ChartsWidget7.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+type Props = {
+    className: string;
+};
+declare const ChartsWidget7: FC<Props>;
+export { ChartsWidget7 };

package/dist/partials/widgets/charts/ChartsWidget7.js

@@ -0,0 +1,215 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartsWidget7 = void 0;
+var react_1 = __importStar(require("react"));
+var apexcharts_1 = __importDefault(require("apexcharts"));
+var _utils_1 = require("../../../assets/ts/_utils");
+var ThemeModeProvider_1 = require("../../layout/theme-mode/ThemeModeProvider");
+var ChartsWidget7 = function (_a) {
+    var className = _a.className;
+    var chartRef = (0, react_1.useRef)(null);
+    var mode = (0, ThemeModeProvider_1.useThemeMode)().mode;
+    var refreshChart = function () {
+        if (!chartRef.current) {
+            return;
+        }
+        var height = parseInt((0, _utils_1.getCSS)(chartRef.current, 'height'));
+        var chart = new apexcharts_1.default(chartRef.current, getChartOptions(height));
+        if (chart) {
+            chart.render();
+        }
+        return chart;
+    };
+    (0, react_1.useEffect)(function () {
+        var chart = refreshChart();
+        return function () {
+            if (chart) {
+                chart.destroy();
+            }
+        };
+    }, [chartRef, mode]);
+    return (react_1.default.createElement("div", { className: "card ".concat(className) },
+        react_1.default.createElement("div", { className: 'card-header border-0 pt-5' },
+            react_1.default.createElement("h3", { className: 'card-title align-items-start flex-column' },
+                react_1.default.createElement("span", { className: 'card-label fw-bold fs-3 mb-1' }, "Recent Users"),
+                react_1.default.createElement("span", { className: 'text-muted fw-semibold fs-7' }, "More than 500 new users")),
+            react_1.default.createElement("div", { className: 'card-toolbar', "data-kt-buttons": 'true' },
+                react_1.default.createElement("a", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary active px-4 me-1', id: 'kt_charts_widget_7_year_btn' }, "Year"),
+                react_1.default.createElement("a", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1', id: 'kt_charts_widget_7_month_btn' }, "Month"),
+                react_1.default.createElement("a", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary px-4', id: 'kt_charts_widget_7_week_btn' }, "Week"))),
+        react_1.default.createElement("div", { className: 'card-body' },
+            react_1.default.createElement("div", { ref: chartRef, id: 'kt_charts_widget_7_chart', style: { height: '350px' }, className: 'card-rounded-bottom' }))));
+};
+exports.ChartsWidget7 = ChartsWidget7;
+function getChartOptions(height) {
+    var labelColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-500');
+    var borderColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-200');
+    var strokeColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-300');
+    var color1 = (0, _utils_1.getCSSVariableValue)('--bs-warning');
+    var color1Light = (0, _utils_1.getCSSVariableValue)('--bs-warning-light');
+    var color2 = (0, _utils_1.getCSSVariableValue)('--bs-success');
+    var color2Light = (0, _utils_1.getCSSVariableValue)('--bs-success-light');
+    var color3 = (0, _utils_1.getCSSVariableValue)('--bs-primary');
+    var color3Light = (0, _utils_1.getCSSVariableValue)('--bs-primary-light');
+    return {
+        series: [
+            {
+                name: 'Net Profit',
+                data: [30, 30, 50, 50, 35, 35],
+            },
+            {
+                name: 'Revenue',
+                data: [55, 20, 20, 20, 70, 70],
+            },
+            {
+                name: 'Expenses',
+                data: [60, 60, 40, 40, 30, 30],
+            },
+        ],
+        chart: {
+            fontFamily: 'inherit',
+            type: 'area',
+            height: height,
+            toolbar: {
+                show: false,
+            },
+            zoom: {
+                enabled: false,
+            },
+            sparkline: {
+                enabled: true,
+            },
+        },
+        plotOptions: {},
+        legend: {
+            show: false,
+        },
+        dataLabels: {
+            enabled: false,
+        },
+        fill: {
+            type: 'solid',
+            opacity: 1,
+        },
+        stroke: {
+            curve: 'smooth',
+            show: true,
+            width: 2,
+            colors: [color1, 'transparent', 'transparent'],
+        },
+        xaxis: {
+            categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+            axisBorder: {
+                show: false,
+            },
+            axisTicks: {
+                show: false,
+            },
+            labels: {
+                show: false,
+                style: {
+                    colors: labelColor,
+                    fontSize: '12px',
+                },
+            },
+            crosshairs: {
+                show: false,
+                position: 'front',
+                stroke: {
+                    color: strokeColor,
+                    width: 1,
+                    dashArray: 3,
+                },
+            },
+            tooltip: {
+                enabled: true,
+                formatter: undefined,
+                offsetY: 0,
+                style: {
+                    fontSize: '12px',
+                },
+            },
+        },
+        yaxis: {
+            labels: {
+                show: false,
+                style: {
+                    colors: labelColor,
+                    fontSize: '12px',
+                },
+            },
+        },
+        states: {
+            normal: {
+                filter: {
+                    type: 'none',
+                    value: 0,
+                },
+            },
+            hover: {
+                filter: {
+                    type: 'none',
+                    value: 0,
+                },
+            },
+            active: {
+                allowMultipleDataPointsSelection: false,
+                filter: {
+                    type: 'none',
+                    value: 0,
+                },
+            },
+        },
+        tooltip: {
+            style: {
+                fontSize: '12px',
+            },
+            y: {
+                formatter: function (val) {
+                    return '$' + val + ' thousands';
+                },
+            },
+        },
+        colors: [color1, color2, color3],
+        grid: {
+            borderColor: borderColor,
+            strokeDashArray: 4,
+            yaxis: {
+                lines: {
+                    show: true,
+                },
+            },
+        },
+        markers: {
+            colors: [color1Light, color2Light, color3Light],
+            strokeColors: [color1, color2, color3],
+            strokeWidth: 3,
+        },
+    };
+}

package/dist/partials/widgets/charts/ChartsWidget8.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    className: string;
+};
+declare const ChartsWidget8: React.FC<Props>;
+export { ChartsWidget8 };

package/dist/partials/widgets/charts/ChartsWidget8.js

@@ -0,0 +1,218 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartsWidget8 = void 0;
+var react_1 = __importStar(require("react"));
+var apexcharts_1 = __importDefault(require("apexcharts"));
+var _utils_1 = require("../../../assets/ts/_utils");
+var ThemeModeProvider_1 = require("../../layout/theme-mode/ThemeModeProvider");
+var ChartsWidget8 = function (_a) {
+    var className = _a.className;
+    var chartRef = (0, react_1.useRef)(null);
+    var mode = (0, ThemeModeProvider_1.useThemeMode)().mode;
+    var refreshChart = function () {
+        if (!chartRef.current) {
+            return;
+        }
+        var height = parseInt((0, _utils_1.getCSS)(chartRef.current, 'height'));
+        var chart = new apexcharts_1.default(chartRef.current, getChartOptions(height));
+        if (chart) {
+            chart.render();
+        }
+        return chart;
+    };
+    (0, react_1.useEffect)(function () {
+        var chart = refreshChart();
+        return function () {
+            if (chart) {
+                chart.destroy();
+            }
+        };
+    }, [chartRef, mode]);
+    return (react_1.default.createElement("div", { className: "card ".concat(className) },
+        react_1.default.createElement("div", { className: 'card-header border-0 pt-5' },
+            react_1.default.createElement("h3", { className: 'card-title align-items-start flex-column' },
+                react_1.default.createElement("span", { className: 'card-label fw-bold fs-3 mb-1' }, "Recent Orders"),
+                react_1.default.createElement("span", { className: 'text-muted fw-semibold fs-7' }, "More than 500 new orders")),
+            react_1.default.createElement("div", { className: 'card-toolbar', "data-kt-buttons": 'true' },
+                react_1.default.createElement("a", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary active px-4 me-1', id: 'kt_charts_widget_8_year_btn' }, "Year"),
+                react_1.default.createElement("a", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary px-4 me-1', id: 'kt_charts_widget_8_month_btn' }, "Month"),
+                react_1.default.createElement("a", { className: 'btn btn-sm btn-color-muted btn-active btn-active-primary px-4', id: 'kt_charts_widget_8_week_btn' }, "Week"))),
+        react_1.default.createElement("div", { className: 'card-body' },
+            react_1.default.createElement("div", { ref: chartRef, id: 'kt_charts_widget_8_chart', style: { height: '350px' }, className: 'card-rounded-bottom' }))));
+};
+exports.ChartsWidget8 = ChartsWidget8;
+function getChartOptions(height) {
+    var labelColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-500');
+    var borderColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-200');
+    var strokeColor = (0, _utils_1.getCSSVariableValue)('--bs-gray-300');
+    var color1 = (0, _utils_1.getCSSVariableValue)('--bs-warning');
+    var color1Light = (0, _utils_1.getCSSVariableValue)('--bs-warning-light');
+    var color2 = (0, _utils_1.getCSSVariableValue)('--bs-success');
+    var color2Light = (0, _utils_1.getCSSVariableValue)('--bs-success-light');
+    var color3 = (0, _utils_1.getCSSVariableValue)('--bs-primary');
+    var color3Light = (0, _utils_1.getCSSVariableValue)('--bs-primary-light');
+    return {
+        series: [
+            {
+                name: 'Net Profit',
+                data: [30, 30, 50, 50, 35, 35],
+            },
+            {
+                name: 'Revenue',
+                data: [55, 20, 20, 20, 70, 70],
+            },
+            {
+                name: 'Expenses',
+                data: [60, 60, 40, 40, 30, 30],
+            },
+        ],
+        chart: {
+            fontFamily: 'inherit',
+            type: 'area',
+            height: height,
+            toolbar: {
+                show: false,
+            },
+            zoom: {
+                enabled: false,
+            },
+            sparkline: {
+                enabled: true,
+            },
+        },
+        plotOptions: {},
+        legend: {
+            show: false,
+        },
+        dataLabels: {
+            enabled: false,
+        },
+        fill: {
+            type: 'solid',
+            opacity: 1,
+        },
+        stroke: {
+            curve: 'smooth',
+            show: true,
+            width: 2,
+            colors: [color1, color2, color3],
+        },
+        xaxis: {
+            offsetX: 0,
+            offsetY: 0,
+            categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+            axisBorder: {
+                show: false,
+            },
+            axisTicks: {
+                show: false,
+            },
+            labels: {
+                show: false,
+                style: {
+                    colors: labelColor,
+                    fontSize: '12px',
+                },
+            },
+            crosshairs: {
+                show: false,
+                position: 'front',
+                stroke: {
+                    color: strokeColor,
+                    width: 1,
+                    dashArray: 3,
+                },
+            },
+            tooltip: {
+                enabled: true,
+                formatter: undefined,
+                offsetY: 0,
+                style: {
+                    fontSize: '12px',
+                },
+            },
+        },
+        yaxis: {
+            labels: {
+                show: false,
+                style: {
+                    colors: labelColor,
+                    fontSize: '12px',
+                },
+            },
+        },
+        states: {
+            normal: {
+                filter: {
+                    type: 'none',
+                    value: 0,
+                },
+            },
+            hover: {
+                filter: {
+                    type: 'none',
+                    value: 0,
+                },
+            },
+            active: {
+                allowMultipleDataPointsSelection: false,
+                filter: {
+                    type: 'none',
+                    value: 0,
+                },
+            },
+        },
+        tooltip: {
+            style: {
+                fontSize: '12px',
+            },
+            y: {
+                formatter: function (val) {
+                    return '$' + val + ' thousands';
+                },
+            },
+        },
+        colors: [color1Light, color2Light, color3Light],
+        grid: {
+            borderColor: borderColor,
+            strokeDashArray: 4,
+            padding: {
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+            },
+        },
+        markers: {
+            colors: [color1, color2, color3],
+            strokeColors: [color1, color2, color3],
+            strokeWidth: 3,
+        },
+    };
+}

package/dist/partials/widgets/engage/EngageWidget1.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+type Props = {
+    className: string;
+    bgColor?: string;
+    bgImage?: string;
+    innerPadding?: string;
+    bgHex?: string;
+    lg?: string;
+};
+declare const EngageWidget1: FC<Props>;
+export { EngageWidget1 };

package/dist/partials/widgets/engage/EngageWidget1.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EngageWidget1 = void 0;
+var react_1 = __importDefault(require("react"));
+var helpers_1 = require("../../../helpers");
+var EngageWidget1 = function (_a) {
+    var className = _a.className, _b = _a.bgHex, bgHex = _b === void 0 ? '' : _b, _c = _a.bgColor, bgColor = _c === void 0 ? '' : _c, _d = _a.lg, lg = _d === void 0 ? '' : _d, _e = _a.bgImage, bgImage = _e === void 0 ? '' : _e;
+    var bgImagePath = bgImage ? (0, helpers_1.toAbsoluteUrl)("media/".concat(bgImage)) : '';
+    if (bgImagePath) {
+        bgImagePath = "url(\"".concat(bgImagePath, "\")");
+    }
+    return (react_1.default.createElement("div", { className: "card ".concat(className) },
+        react_1.default.createElement("div", { className: "card-body card-rounded p-0 d-flex bg-".concat(bgColor), style: { backgroundColor: bgHex } },
+            react_1.default.createElement("div", { className: "d-flex flex-column flex-lg-row-auto ".concat(lg ? 'py-10 py-md-14 px-10 px-md-20 pe-lg-0' : 'p-10 p-md-20') },
+                react_1.default.createElement("h1", { className: "fw-bold text-gray-900 ".concat(lg ? 'mb-0' : '') }, "Search Goods"),
+                react_1.default.createElement("div", { className: 'fs-3 mb-8' }, "Get Amazing Gadgets"),
+                react_1.default.createElement("form", { className: 'd-flex flex-center py-2 px-6 bg-body rounded' },
+                    react_1.default.createElement(helpers_1.KTIcon, { iconName: 'magnifier', className: 'fs-1 text-primary' }),
+                    react_1.default.createElement("input", { type: 'text', className: "form-control border-0 fw-semibold ps-2 ".concat(lg ? 'w-xxl-600px' : 'w-xxl-350px'), placeholder: 'Search Goods' }))),
+            react_1.default.createElement("div", { className: "d-none d-md-flex flex-row-fluid mw-400px ml-auto ".concat(bgImage ? 'bgi-no-repeat bgi-position-y-center bgi-position-x-left bgi-size-cover' : ''), style: { backgroundImage: bgImagePath } }))));
+};
+exports.EngageWidget1 = EngageWidget1;

package/dist/partials/widgets/engage/EngageWidget2.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type Props = {
+    className: string;
+    imagePath?: string;
+    innerPadding?: string;
+    color?: string;
+};
+declare const EngageWidget2: React.FC<Props>;
+export { EngageWidget2 };