pixelize-design-library 2.3.7 → 2.3.9

package/dist/Components/Card/PaymentCard/PaymentCard.js

@@ -1,29 +1,18 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var Button_1 = __importDefault(require("../../Button/Button"));
-var getCardStyles = function (isActive, isNextUpgrade, popular, theme) {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const Button_1 = __importDefault(require("../../Button/Button"));
+const getCardStyles = (isActive, isNextUpgrade, popular, theme) => {
     if (isActive) {
         return {
             badgeText: "Active Plan",
-            badgeColor: "0.125rem solid ".concat(theme.colors.green[500]),
+            badgeColor: `0.125rem solid ${theme.colors.green[500]}`,
             buttonColor: theme.colors.green[500],
             buttonColor50: theme.colors.green[50],
         };
@@ -31,7 +20,7 @@ var getCardStyles = function (isActive, isNextUpgrade, popular, theme) {
     if (isNextUpgrade) {
         return {
             badgeText: "Upgrade Your Plan",
-            badgeColor: "0.125rem solid ".concat(theme.colors.primary[500]),
+            badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
             buttonColor50: theme.colors.primary[50],
         };
@@ -39,7 +28,7 @@ var getCardStyles = function (isActive, isNextUpgrade, popular, theme) {
     if (popular) {
         return {
             badgeText: "Most Popular",
-            badgeColor: "0.125rem solid ".concat(theme.colors.primary[500]),
+            badgeColor: `0.125rem solid ${theme.colors.primary[500]}`,
             buttonColor: theme.colors.primary[500],
             buttonColor50: theme.colors.primary[50],
         };
@@ -51,11 +40,10 @@ var getCardStyles = function (isActive, isNextUpgrade, popular, theme) {
         buttonColor50: theme.colors.primary[50],
     };
 };
-var PaymentCard = function (_a) {
-    var plan = _a.plan, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isNextUpgrade, isNextUpgrade = _c === void 0 ? false : _c, billingCycle = _a.billingCycle, onSelect = _a.onSelect, onHover = _a.onHover, buttonLoading = _a.buttonLoading, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.isRenewal, isRenewal = _e === void 0 ? false : _e;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _f = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme), badgeText = _f.badgeText, badgeColor = _f.badgeColor, buttonColor = _f.buttonColor, buttonColor50 = _f.buttonColor50;
-    var variantStyles = plan.buttonVariant === "outline"
+const PaymentCard = ({ plan, isActive = false, isNextUpgrade = false, billingCycle, onSelect, onHover, buttonLoading, isLoading = false, isRenewal = false, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { badgeText, badgeColor, buttonColor, buttonColor50 } = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme);
+    const variantStyles = plan.buttonVariant === "outline"
         ? {
             borderColor: buttonColor,
             color: buttonColor,
@@ -66,36 +54,12 @@ var PaymentCard = function (_a) {
             color: theme.colors.white,
             _hover: { bg: buttonColor },
         };
-    return (react_1.default.createElement(react_2.GridItem, null,
-        react_1.default.createElement(react_2.Box, { bg: theme.colors.white, minH: "100%", borderRadius: "lg", p: 8, borderWidth: "0.063rem", borderColor: theme.colors.gray[200], boxShadow: "md", position: "relative", transition: "all 0.2s", transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "xl" } }, isLoading ? (
-        // 🔹 Skeleton Loader Layout
-        react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_2.Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }),
-            react_1.default.createElement(react_2.Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }),
-            react_1.default.createElement(react_2.Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }),
-            react_1.default.createElement(react_2.Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }),
-            react_1.default.createElement(react_2.SkeletonText, { noOfLines: 2, spacing: "2" }),
-            react_1.default.createElement(react_2.Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "md" }),
-            react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, mt: 6 }, [1, 2, 3, 4].map(function (i) { return (react_1.default.createElement(react_2.Skeleton, { key: i, height: "16px", width: "80%" })); })))) : (
-        // 🔹 Actual Card Content
-        react_1.default.createElement(react_1.default.Fragment, null,
-            badgeText && (react_1.default.createElement(react_2.Badge, { position: "absolute", top: "-0.75rem", left: "50%", transform: "translateX(-50%)", bg: buttonColor, color: theme.colors.white, fontSize: "sm", px: 4, py: 1, borderRadius: "full" }, badgeText)),
-            react_1.default.createElement(react_2.Box, { textAlign: "center", mb: 6 },
-                react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: buttonColor, mx: "auto", mb: 4 }, plan.icon),
-                react_1.default.createElement(react_2.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.gray[800] }, plan.name),
-                (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && (react_1.default.createElement(react_2.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], display: "flex", justifyContent: "center" },
-                    react_1.default.createElement(react_2.Box, { fontSize: "1.5rem" }, "\u20B9"),
-                    billingCycle === "yearly"
-                        ? plan.yearlyPrice
-                        : plan.monthlyPrice,
-                    react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1 },
-                        react_1.default.createElement(react_2.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.billing),
-                        react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.tax)))),
-                plan.priceDescription && (react_1.default.createElement(react_2.Text, { color: theme.colors.green[800], mt: 2 }, plan === null || plan === void 0 ? void 0 : plan.priceDescription)),
-                react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 2 }, plan.description)),
-            ((!isActive && plan.buttonText) || isRenewal) && (react_1.default.createElement(Button_1.default, __assign({ isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: function () { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id); }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false); } }, variantStyles), plan.buttonText)),
-            react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, mt: 6 }, plan.features.map(function (feature, i) { return (react_1.default.createElement(react_2.Flex, { key: i, align: "center" },
-                react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }),
-                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, feature))); })))))));
+    return ((0, jsx_runtime_1.jsx)(react_1.GridItem, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.white, minH: "100%", borderRadius: "lg", p: 8, borderWidth: "0.063rem", borderColor: theme.colors.gray[200], boxShadow: "md", position: "relative", transition: "all 0.2s", transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "xl" }, children: isLoading ? (
+            // 🔹 Skeleton Loader Layout
+            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }), (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 2, spacing: "2" }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "md" }), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: [1, 2, 3, 4].map((i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "16px", width: "80%" }, i))) })] })) : (
+            // 🔹 Actual Card Content
+            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [badgeText && ((0, jsx_runtime_1.jsx)(react_1.Badge, { position: "absolute", top: "-0.75rem", left: "50%", transform: "translateX(-50%)", bg: buttonColor, color: theme.colors.white, fontSize: "sm", px: 4, py: 1, borderRadius: "full", children: badgeText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "center", mb: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: buttonColor, mx: "auto", mb: 4, children: plan.icon }), (0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.gray[800], children: plan.name }), (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && ((0, jsx_runtime_1.jsxs)(react_1.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], display: "flex", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "1.5rem", children: "\u20B9" }), billingCycle === "yearly"
+                                        ? plan.yearlyPrice
+                                        : plan.monthlyPrice, (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.billing }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600], children: plan.tax })] })] })), plan.priceDescription && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.green[800], mt: 2, children: plan === null || plan === void 0 ? void 0 : plan.priceDescription })), (0, jsx_runtime_1.jsx)(react_1.Text, { color: theme.colors.gray[600], mt: 2, children: plan.description })] }), ((!isActive && plan.buttonText) || isRenewal) && ((0, jsx_runtime_1.jsx)(Button_1.default, { isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id), onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true), onMouseLeave: () => onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false), ...variantStyles, children: plan.buttonText })), (0, jsx_runtime_1.jsx)(react_1.VStack, { align: "start", spacing: 3, mt: 6, children: plan.features.map((feature, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: feature })] }, i))) })] })) }) }));
 };
 exports.default = PaymentCard;

package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts

@@ -25,3 +25,4 @@ export type Plan = {
     buttonLoadingText?: string;
     priceDescription?: string;
 };
+//# sourceMappingURL=PaymentCardProps.d.ts.map

package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentCardProps.d.ts","sourceRoot":"","sources":["../../../../src/Components/Card/PaymentCard/PaymentCardProps.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,SAAS,GAAG,QAAQ,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC"}

package/dist/Components/Checkbox/Checkbox.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
 import { CheckboxProps } from "./CheckboxProps";
-export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, isRequired, error, errorMessage, isInformation, informationMessage, id, helperText, onClick, labelSx, }: CheckboxProps): React.JSX.Element;
+export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/Components/Checkbox/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/Components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKhD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAS,EACT,eAAe,EACf,QAAQ,EACR,UAAU,EACV,IAAW,EACX,KAAK,EACL,cAAc,EACd,EAAE,EACF,KAAK,EACL,YAAY,EACZ,UAAU,EACV,OAAO,EACP,OAAO,GACR,EAAE,aAAa,2CAoFf"}

package/dist/Components/Checkbox/Checkbox.js

@@ -1,38 +1,33 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = CheckBox;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-var HelperText_1 = __importDefault(require("../Common/HelperText"));
-function CheckBox(_a) {
-    var label = _a.label, labelFontSize = _a.labelFontSize, showLabelTooltip = _a.showLabelTooltip, labelTooltip = _a.labelTooltip, labelClampLines = _a.labelClampLines, spacing = _a.spacing, isInvalid = _a.isInvalid, color = _a.color, iconColor = _a.iconColor, iconSize = _a.iconSize, isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, onChange = _a.onChange, isDisabled = _a.isDisabled, _b = _a.size, size = _b === void 0 ? "md" : _b, value = _a.value, defaultChecked = _a.defaultChecked, sx = _a.sx, isRequired = _a.isRequired, error = _a.error, errorMessage = _a.errorMessage, isInformation = _a.isInformation, informationMessage = _a.informationMessage, id = _a.id, helperText = _a.helperText, onClick = _a.onClick, labelSx = _a.labelSx;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var controlSize = size === "sm" ? "1rem"
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+const HelperText_1 = __importDefault(require("../Common/HelperText"));
+function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, }) {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const controlSize = size === "sm" ? "1rem"
         : size === "md" ? "1.25rem"
             : size === "lg" ? "1.5rem"
                 : size; // pass-through if already a CSS value
-    var clampStyles = labelClampLines
-        ? __assign({ display: "-webkit-box", WebkitLineClamp: labelClampLines, WebkitBoxOrient: "vertical", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "normal" }, labelSx)
-        : __assign({}, labelSx);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.Checkbox, { onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], display: "flex", alignItems: "center", sx: __assign(__assign({}, sx), { ".chakra-checkbox__control": { w: controlSize, h: controlSize } }) }, label && (showLabelTooltip ? (react_1.default.createElement(react_2.Tooltip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
-            react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0 }, label))) : (react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0 }, label)))),
-        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
-        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
+    const clampStyles = labelClampLines
+        ? {
+            display: "-webkit-box",
+            WebkitLineClamp: labelClampLines,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "normal",
+            ...labelSx,
+        }
+        : { ...labelSx };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Checkbox, { onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], display: "flex", alignItems: "center", sx: {
+                    ...sx,
+                    ".chakra-checkbox__control": { w: controlSize, h: controlSize },
+                }, children: label && (showLabelTooltip ? ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
 }

package/dist/Components/Checkbox/Checkbox.stories.d.ts

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=Checkbox.stories.d.ts.map

package/dist/Components/Checkbox/Checkbox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/Components/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AA6CA,OAAO,EAAE,CAAC"}

package/dist/Components/Checkbox/Checkbox.styles.d.ts

@@ -1,2 +1,3 @@
 import { ComponentStyleConfig } from "@chakra-ui/react";
 export declare const Checkbox: ComponentStyleConfig;
+//# sourceMappingURL=Checkbox.styles.d.ts.map

package/dist/Components/Checkbox/Checkbox.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../src/Components/Checkbox/Checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,eAAO,MAAM,QAAQ,EAAE,oBA4DtB,CAAC"}

package/dist/Components/Checkbox/Checkbox.styles.js

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 exports.Checkbox = {
-    baseStyle: function (_a) {
-        var _b;
-        var theme = _a.theme, _c = _a.colorScheme, colorScheme = _c === void 0 ? "primary" : _c;
-        var palette = (_b = theme.colors[colorScheme]) !== null && _b !== void 0 ? _b : theme.colors.primary;
+    baseStyle: ({ theme, colorScheme = "primary" }) => {
+        var _a;
+        const palette = (_a = theme.colors[colorScheme]) !== null && _a !== void 0 ? _a : theme.colors.primary;
         return {
             control: {
                 width: "1.25rem",
@@ -42,7 +41,7 @@ exports.Checkbox = {
                     },
                 },
                 _focus: {
-                    boxShadow: "0 0 0 2px ".concat(palette[300]),
+                    boxShadow: `0 0 0 2px ${palette[300]}`,
                     borderColor: palette[500],
                 },
                 _active: {

package/dist/Components/Checkbox/CheckboxProps.d.ts

@@ -9,12 +9,9 @@ export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "s
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
     size?: "sm" | "md" | "lg";
-    isRequired?: boolean;
     error?: boolean;
     errorMessage?: string;
-    isInformation?: boolean;
-    informationMessage?: string;
-    id?: string;
     helperText?: string;
     labelSx?: React.CSSProperties;
 };
+//# sourceMappingURL=CheckboxProps.d.ts.map

package/dist/Components/Checkbox/CheckboxProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxProps.d.ts","sourceRoot":"","sources":["../../../src/Components/Checkbox/CheckboxProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEtE,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,iBAAiB,EACf,SAAS,GACT,WAAW,GACX,MAAM,GACN,WAAW,GACX,UAAU,GACV,WAAW,GACX,iBAAiB,GACjB,UAAU,GACV,YAAY,GACZ,OAAO,GACP,gBAAgB,GAChB,IAAI,GACJ,SAAS,CACZ,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;IAC9D,KAAK,CAAC,EACF,MAAM,GACN,KAAK,GACL,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,MAAM,GACN,YAAY,GACZ,YAAY,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B,CAAC"}

package/dist/Components/Common/ErrorComponent.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
 declare const ErrorComponent: ({ error, errorClassName, }: {
     error: string;
     errorClassName?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ErrorComponent;
+//# sourceMappingURL=ErrorComponent.d.ts.map

package/dist/Components/Common/ErrorComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorComponent.d.ts","sourceRoot":"","sources":["../../../src/Components/Common/ErrorComponent.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,cAAc,GAAI,4BAGrB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,4CAuBA,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/Components/Common/ErrorComponent.js

@@ -1,22 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var react_3 = require("@chakra-ui/react");
-var ErrorComponent = function (_a) {
-    var _b, _c, _d, _e;
-    var error = _a.error, errorClassName = _a.errorClassName;
-    var theme = (0, react_3.useTheme)();
-    var errorFill = (_d = (_c = (_b = theme.colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500]) !== null && _d !== void 0 ? _d : (_e = theme.colors.red) === null || _e === void 0 ? void 0 : _e[500];
-    var white = theme.colors.white;
-    return (react_1.default.createElement(react_2.HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorFill, className: errorClassName },
-        react_1.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true },
-            react_1.default.createElement("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }),
-            react_1.default.createElement("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: white }),
-            react_1.default.createElement("circle", { cx: "50", cy: "28", r: "4", fill: white })),
-        react_1.default.createElement(react_2.Text, { as: "span" }, error)));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = require("@chakra-ui/react");
+const ErrorComponent = ({ error, errorClassName, }) => {
+    var _a, _b, _c, _d;
+    const theme = (0, react_2.useTheme)();
+    const errorFill = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : (_d = theme.colors.red) === null || _d === void 0 ? void 0 : _d[500];
+    const white = theme.colors.white;
+    return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorFill, className: errorClassName, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }), (0, jsx_runtime_1.jsx)("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: white }), (0, jsx_runtime_1.jsx)("circle", { cx: "50", cy: "28", r: "4", fill: white })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", children: error })] }));
 };
 exports.default = ErrorComponent;

package/dist/Components/Common/ErrorMessage.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
 declare const ErrorMessage: ({ errorMessage }: {
     errorMessage?: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ErrorMessage;
+//# sourceMappingURL=ErrorMessage.d.ts.map

package/dist/Components/Common/ErrorMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/Components/Common/ErrorMessage.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,YAAY,GAAI,kBAAkB;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,4CAchE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Components/Common/ErrorMessage.js

@@ -1,17 +1,11 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var ErrorMessage = function (_a) {
-    var errorMessage = _a.errorMessage;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Flex, { align: "center", color: theme.colors.red[500], fontSize: "0.875rem", role: "alert" },
-        react_1.default.createElement(lucide_react_1.Info, { width: "0.875rem" }),
-        react_1.default.createElement(react_2.Text, { ml: "0.188rem" }, errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error")));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const ErrorMessage = ({ errorMessage }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", color: theme.colors.red[500], fontSize: "0.875rem", role: "alert", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Info, { width: "0.875rem" }), (0, jsx_runtime_1.jsx)(react_1.Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
 };
 exports.default = ErrorMessage;

package/dist/Components/Common/FormLabel.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 export declare const TextLabel: ({ label, isRequired, isInformation, informationMessage, fontSize, showTooltip, tooltipLabel, clampLines, inline, }: {
     label: string;
     id?: string;
@@ -10,4 +9,5 @@ export declare const TextLabel: ({ label, isRequired, isInformation, information
     tooltipLabel?: string;
     clampLines?: number;
     inline?: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FormLabel.d.ts.map

package/dist/Components/Common/FormLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.d.ts","sourceRoot":"","sources":["../../../src/Components/Common/FormLabel.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,GAAI,oHAUvB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IAIpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,4CAqDA,CAAC"}

package/dist/Components/Common/FormLabel.js

@@ -1,17 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextLabel = void 0;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var lucide_react_1 = require("lucide-react");
-var TextLabel = function (_a) {
-    var label = _a.label, _b = _a.isRequired, isRequired = _b === void 0 ? false : _b, _c = _a.isInformation, isInformation = _c === void 0 ? false : _c, _d = _a.informationMessage, informationMessage = _d === void 0 ? "" : _d, fontSize = _a.fontSize, showTooltip = _a.showTooltip, tooltipLabel = _a.tooltipLabel, clampLines = _a.clampLines, _e = _a.inline, inline = _e === void 0 ? false : _e;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var clampStyles = clampLines ? {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const lucide_react_1 = require("lucide-react");
+const TextLabel = ({ label, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const clampStyles = clampLines ? {
         display: "-webkit-box",
         WebkitLineClamp: clampLines,
         WebkitBoxOrient: "vertical",
@@ -19,12 +15,6 @@ var TextLabel = function (_a) {
         textOverflow: "ellipsis",
         whiteSpace: "normal",
     } : {};
-    return (react_1.default.createElement(react_2.Box, { as: "span", display: inline ? "inline-flex" : "block", alignItems: inline ? "center" : undefined, mb: inline ? 0 : "0.375rem", color: theme.colors.text[700], fontWeight: 500, fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.8125rem", lineHeight: "1.2" },
-        react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem" },
-            showTooltip ? (react_1.default.createElement(react_2.Tooltip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
-                react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles }, label))) : (react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles }, label)),
-            isRequired && (react_1.default.createElement("span", { style: { color: theme.colors.semantic.error[500], marginLeft: "0.125rem" } }, "*")),
-            isInformation && informationMessage && (react_1.default.createElement(react_2.Tooltip, { label: informationMessage, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
-                react_1.default.createElement(react_2.Icon, { as: lucide_react_1.InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }))))));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: inline ? "inline-flex" : "block", alignItems: inline ? "center" : undefined, mb: inline ? 0 : "0.375rem", color: theme.colors.text[700], fontWeight: 500, fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.8125rem", lineHeight: "1.2", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label })), isRequired && ((0, jsx_runtime_1.jsx)("span", { style: { color: theme.colors.semantic.error[500], marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: informationMessage, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }) }));
 };
 exports.TextLabel = TextLabel;

package/dist/Components/Common/FormattedDescription.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
 type Props = {
     content?: string;
 };
-declare const FormattedDescription: ({ content }: Props) => React.JSX.Element | null;
+declare const FormattedDescription: ({ content }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default FormattedDescription;
+//# sourceMappingURL=FormattedDescription.d.ts.map

package/dist/Components/Common/FormattedDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedDescription.d.ts","sourceRoot":"","sources":["../../../src/Components/Common/FormattedDescription.tsx"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAyDF,QAAA,MAAM,oBAAoB,GAAI,aAAa,KAAK,mDA0B/C,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/Components/Common/FormattedDescription.js

@@ -1,66 +1,59 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var InlineText = function (_a) {
-    var text = _a.text;
-    var nodes = [];
-    var i = 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const InlineText = ({ text }) => {
+    const nodes = [];
+    let i = 0;
     while (i < text.length) {
         if (text.startsWith("**", i)) {
-            var end = text.indexOf("**", i + 2);
+            const end = text.indexOf("**", i + 2);
             if (end !== -1) {
-                nodes.push(react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "bold", key: "b-".concat(i) }, text.slice(i + 2, end)));
+                nodes.push((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: "bold", children: text.slice(i + 2, end) }, `b-${i}`));
                 i = end + 2;
                 continue;
             }
         }
         if (text.startsWith("*", i)) {
-            var end = text.indexOf("*", i + 1);
+            const end = text.indexOf("*", i + 1);
             if (end !== -1) {
-                nodes.push(react_1.default.createElement(react_2.Text, { as: "span", key: "i-".concat(i) }, text.slice(i + 1, end)));
+                nodes.push((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", children: text.slice(i + 1, end) }, `i-${i}`));
                 i = end + 1;
                 continue;
             }
         }
-        var nextBold = text.indexOf("**", i);
-        var nextIt = text.indexOf("*", i);
-        var next = nextBold === -1
+        const nextBold = text.indexOf("**", i);
+        const nextIt = text.indexOf("*", i);
+        const next = nextBold === -1
             ? nextIt
             : nextIt === -1
                 ? nextBold
                 : Math.min(nextBold, nextIt);
         if (next === -1) {
-            nodes.push(react_1.default.createElement(react_2.Text, { as: "span", key: "t-".concat(i) }, text.slice(i)));
+            nodes.push((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", children: text.slice(i) }, `t-${i}`));
             break;
         }
         else {
-            nodes.push(react_1.default.createElement(react_2.Text, { as: "span", key: "t-".concat(i) }, text.slice(i, next)));
+            nodes.push((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", children: text.slice(i, next) }, `t-${i}`));
             i = next;
         }
     }
-    return react_1.default.createElement(react_1.default.Fragment, null, nodes);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: nodes });
 };
-var FormattedDescription = function (_a) {
-    var content = _a.content;
+const FormattedDescription = ({ content }) => {
     if (!content)
         return null;
-    var lines = content.split(/\r?\n/);
-    return (react_1.default.createElement(react_2.Box, null, lines.map(function (line, idx) {
-        var m = line.match(/^(#{1,3})\s+(.*)$/);
-        if (m) {
-            var level = m[1].length;
-            var text = m[2];
-            var size = level === 1 ? "lg" : level === 2 ? "md" : "sm";
-            var weight = level === 1 ? "bold" : level === 2 ? "semibold" : "medium";
-            return (react_1.default.createElement(react_2.Text, { fontSize: size, fontWeight: weight, key: "h-".concat(idx), mt: idx === 0 ? 0 : 2, textAlign: "left" },
-                react_1.default.createElement(InlineText, { text: text })));
-        }
-        return (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: "gray.700", key: "p-".concat(idx), mt: idx === 0 ? 0 : 2, textAlign: "justify" },
-            react_1.default.createElement(InlineText, { text: line })));
-    })));
+    const lines = content.split(/\r?\n/);
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { children: lines.map((line, idx) => {
+            const m = line.match(/^(#{1,3})\s+(.*)$/);
+            if (m) {
+                const level = m[1].length;
+                const text = m[2];
+                const size = level === 1 ? "lg" : level === 2 ? "md" : "sm";
+                const weight = level === 1 ? "bold" : level === 2 ? "semibold" : "medium";
+                return ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: size, fontWeight: weight, mt: idx === 0 ? 0 : 2, textAlign: "left", children: (0, jsx_runtime_1.jsx)(InlineText, { text: text }) }, `h-${idx}`));
+            }
+            return ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: "gray.700", mt: idx === 0 ? 0 : 2, textAlign: "justify", children: (0, jsx_runtime_1.jsx)(InlineText, { text: line }) }, `p-${idx}`));
+        }) }));
 };
 exports.default = FormattedDescription;

package/dist/Components/Common/HelperText.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
 declare const HelperText: ({ helperText }: {
     helperText: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default HelperText;
+//# sourceMappingURL=HelperText.d.ts.map

package/dist/Components/Common/HelperText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelperText.d.ts","sourceRoot":"","sources":["../../../src/Components/Common/HelperText.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,UAAU,GAAI,gBAAgB;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,4CAOzD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/Components/Common/HelperText.js

@@ -1,14 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var HelperText = function (_a) {
-    var helperText = _a.helperText;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.FormHelperText, { mt: 1, fontSize: 14, color: theme.colors.gray[500] }, helperText));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const HelperText = ({ helperText }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.FormHelperText, { mt: 1, fontSize: 14, color: theme.colors.gray[500], children: helperText }));
 };
 exports.default = HelperText;

package/dist/Components/Common/Label.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
 declare const Label: ({ label, labelClassName, isRequired, }: {
     label: string;
     labelClassName?: string;
     isRequired?: boolean;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Label;
+//# sourceMappingURL=Label.d.ts.map

package/dist/Components/Common/Label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/Components/Common/Label.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,KAAK,GAAI,wCAIZ;IACD,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,4CAsBA,CAAC;AAEF,eAAe,KAAK,CAAC"}