pixelize-design-library 2.1.11 → 2.1.13

package/dist/Components/Button/Button.styles.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+exports.Button = {
+    baseStyle: function (_a) {
+        var theme = _a.theme;
+        return ({
+            borderRadius: "0.25rem",
+            fontWeight: 500,
+            fontSize: "1rem",
+            _disabled: {
+                opacity: 0.6,
+                cursor: "not-allowed",
+            },
+        });
+    },
+    variants: {
+        solid: function (_a) {
+            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
+            return ({
+                bg: theme.colors[colorScheme][500],
+                color: theme.colors.white,
+                _hover: {
+                    bg: theme.colors[colorScheme][600],
+                },
+                _active: {
+                    bg: theme.colors[colorScheme][700],
+                },
+            });
+        },
+        outline: function (_a) {
+            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
+            return ({
+                border: "0.1rem solid",
+                borderColor: theme.colors[colorScheme][500],
+                color: theme.colors[colorScheme][500],
+                bg: "transparent",
+                _hover: {
+                    bg: theme.colors[colorScheme][500],
+                    borderColor: theme.colors[colorScheme][600],
+                    color: theme.colors.white,
+                },
+                _active: {
+                    bg: theme.colors[colorScheme][600],
+                    color: theme.colors.white,
+                },
+            });
+        },
+        ghost: function (_a) {
+            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
+            return ({
+                color: theme.colors[colorScheme][500],
+                bg: "transparent",
+                _hover: {
+                    bg: theme.colors.gray[200],
+                },
+                _active: {
+                    bg: theme.colors.gray[200],
+                },
+            });
+        },
+        link: function (_a) {
+            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
+            return ({
+                color: theme.colors[colorScheme][500],
+                textDecoration: "underline",
+                bg: "transparent",
+                _hover: {
+                    color: theme.colors[colorScheme][600],
+                    textDecoration: "none",
+                },
+                _active: {
+                    color: theme.colors[colorScheme][600],
+                },
+            });
+        },
+        unstyled: function () { return ({
+            bg: "transparent",
+            color: "inherit",
+            _hover: {
+                bg: "transparent",
+            },
+        }); },
+    },
+    sizes: {
+        xs: {
+            h: "1.5rem",
+            fontSize: "0.75rem",
+            px: "0.5rem",
+        },
+        sm: {
+            h: "2rem",
+            fontSize: "0.875rem",
+            px: "0.75rem",
+        },
+        md: {
+            h: "2.5rem",
+            fontSize: "1rem",
+            px: "1rem",
+        },
+        lg: {
+            h: "3rem",
+            fontSize: "1.125rem",
+            px: "1.5rem",
+        },
+    },
+    defaultProps: {
+        size: "md",
+        variant: "solid",
+        colorScheme: "primary",
+    },
+};

package/dist/Components/Button/ButtonProps.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
+export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius"> & {
+    label?: string;
+    width?: string | number;
+    size?: "lg" | "md" | "sm" | "xs";
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    type?: "button" | "submit" | "reset";
+    colorScheme?: 'primary' | 'secondary' | 'tertiary' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
+    ref?: React.Ref<HTMLButtonElement>;
+    children?: React.ReactNode;
+    opacity?: number;
+};

package/dist/Components/Button/ButtonProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts

@@ -0,0 +1,33 @@
+import { ReactElement } from "react";
+export type ButtonGroupIconProps = {
+    leftIcon?: ReactElement;
+    rightIcon?: ReactElement;
+    onLeftIconClick?: () => void;
+    onRightIconClick?: () => void;
+    buttonText: string;
+    onButtonClick?: () => void;
+    onButtongroupClick?: () => void;
+    size?: "lg" | "md" | "sm" | "xs";
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    buttonGroupStyle?: React.CSSProperties;
+    buttonGroupLeftIconStyle?: React.CSSProperties;
+    buttonGroupRightIconStyle?: React.CSSProperties;
+    buttonStyle?: React.CSSProperties;
+    onBlurLeftIcon?: () => void;
+    onBlurRightIcon?: () => void;
+    dropdownOptions?: {
+        label: string;
+        id: string | number;
+        image?: ReactElement | undefined;
+    }[];
+    onDropdownOptionClick?: (event: React.MouseEvent, option: {
+        label: string;
+        id: string | number;
+    }) => void;
+    rightIconDropdown?: boolean;
+    menulistStyle?: React.CSSProperties;
+    menuItemStyle?: React.CSSProperties;
+    isLoading?: boolean;
+    divider?: boolean;
+};

package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { ButtonGroupIconProps } from "./ButtonGoupIconProps";
+export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
+onDropdownOptionClick, // New prop to handle option clicks
+rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider, }: ButtonGroupIconProps): React.JSX.Element;

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -0,0 +1,86 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+function ButtonGroupIcon(_a) {
+    var _b, _c;
+    var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onLeftIconClick = _a.onLeftIconClick, onRightIconClick = _a.onRightIconClick, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onButtongroupClick = _a.onButtongroupClick, size = _a.size, variant = _a.variant, color = _a.color, buttonGroupStyle = _a.buttonGroupStyle, buttonGroupLeftIconStyle = _a.buttonGroupLeftIconStyle, buttonGroupRightIconStyle = _a.buttonGroupRightIconStyle, buttonStyle = _a.buttonStyle, onBlurLeftIcon = _a.onBlurLeftIcon, onBlurRightIcon = _a.onBlurRightIcon, dropdownOptions = _a.dropdownOptions, // New prop for dropdown options
+    onDropdownOptionClick = _a.onDropdownOptionClick, // New prop to handle option clicks
+    rightIconDropdown = _a.rightIconDropdown, menulistStyle = _a.menulistStyle, menuItemStyle = _a.menuItemStyle, isLoading = _a.isLoading, _d = _a.divider, divider = _d === void 0 ? true : _d;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _e = (0, react_1.useState)(false), isDropdownOpen = _e[0], setIsDropdownOpen = _e[1];
+    var handleRightIconClick = function () {
+        setIsDropdownOpen(!isDropdownOpen);
+        if (onRightIconClick) {
+            onRightIconClick();
+        }
+    };
+    var handleMenuClick = function (event, option) {
+        setIsDropdownOpen(false);
+        // console.log("Option clicked:", option,event)
+        if (onDropdownOptionClick) {
+            onDropdownOptionClick(event, option);
+        }
+    };
+    return (react_1.default.createElement(react_2.ButtonGroup, { size: size, isAttached: true, variant: variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle },
+        leftIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: {
+                backgroundColor: theme.colors.primary[500],
+                "&:hover": {
+                    backgroundColor: theme.colors.primary[400],
+                },
+            } })),
+        react_1.default.createElement(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, sx: {
+                backgroundColor: theme.colors.primary[500],
+                "&:hover": {
+                    backgroundColor: theme.colors.primary[400],
+                },
+            }, borderLeft: "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), borderRight: "1px solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]) }, buttonText),
+        rightIcon && rightIconDropdown ? (react_1.default.createElement(react_2.Menu, { isOpen: isDropdownOpen, onClose: function () { return setIsDropdownOpen(false); } },
+            react_1.default.createElement(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
+                    backgroundColor: theme.colors.primary[500],
+                    "&:hover": {
+                        backgroundColor: theme.colors.primary[400],
+                    },
+                } }),
+            react_1.default.createElement(react_2.Box, { sx: { zIndex: 99 } },
+                react_1.default.createElement(react_2.MenuList, { style: menulistStyle }, dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map(function (option, index) {
+                    var _a;
+                    return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function (event) { return handleMenuClick(event, option); }, style: menuItemStyle, borderBottom: divider ? "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]) : undefined, sx: {
+                            "&:last-child": {
+                                borderBottom: "none",
+                            },
+                        } }, option === null || option === void 0 ? void 0 :
+                        option.image,
+                        option.label));
+                }))))) : (rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
+                backgroundColor: theme.colors.primary[500],
+                "&:hover": {
+                    backgroundColor: theme.colors.primary[400],
+                },
+            } })))));
+}
+exports.default = ButtonGroupIcon;

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

@@ -0,0 +1 @@
+export {};

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.stories.js

@@ -0,0 +1,6 @@
+"use strict";
+// import React from 'react';
+// import { Meta, StoryFn } from '@storybook/react';
+// import ButtonGroupIcon  from './ButtonGroupIcon'; // Adjust the import path and component type if needed
+// import {ButtonGroupIconProps} from './ButtonGoupIconProps';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Buttons/Buttons.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ButtonsProps } from './ButtonsProps';
+declare const Buttons: ({ onClick, label, className, disabled }: ButtonsProps) => React.JSX.Element;
+export default Buttons;

package/dist/Components/Buttons/Buttons.js

@@ -0,0 +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 Buttons = function (_a) {
+    var onClick = _a.onClick, label = _a.label, className = _a.className, disabled = _a.disabled;
+    return (react_1.default.createElement("button", { onClick: onClick, className: "bg-purple-600 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-offset-2  ".concat(className, " ").concat(disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'), disabled: disabled }, label));
+};
+exports.default = Buttons;

package/dist/Components/Buttons/ButtonsProps.d.ts

@@ -0,0 +1,6 @@
+export type ButtonsProps = {
+    label: string;
+    onClick: () => void;
+    className?: string;
+    disabled?: boolean;
+};

package/dist/Components/Buttons/ButtonsProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { CardProps } from "./CardProps";
+export default function Card({ key, maxW, align, variant, direction, justify, children, size, color, overflow, sx, }: CardProps): React.JSX.Element;

package/dist/Components/Card/Card.js

@@ -0,0 +1,12 @@
+"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");
+function Card(_a) {
+    var key = _a.key, maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, sx = _a.sx;
+    return (react_1.default.createElement(react_2.Card, { key: key, maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, p: 4, sx: sx }, children));
+}
+exports.default = Card;

package/dist/Components/Card/CardProps.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { CardProps as ChakraCardProps } from "@chakra-ui/react";
+export type CardProps = Pick<ChakraCardProps, "direction" | "maxW" | "align" | "justify" | "overflow" | "sx"> & {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+    variant?: "elevated" | "outline" | "filled" | "unstyled";
+    size?: "sm" | "md" | "lg";
+    color?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+    key?: string;
+    dividercolor?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+    dividersize?: string;
+    dividervariant?: "solid" | "dashed";
+};

package/dist/Components/Card/CardProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { CheckboxProps } from "./CheckboxProps";
+export default function CheckBox({ label, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, isRequired, error, errorMessage, isInformation, informationMessage, id, helperText, }: CheckboxProps): React.JSX.Element;

package/dist/Components/Checkbox/Checkbox.js

@@ -0,0 +1,20 @@
+"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 FormLabel_1 = require("../Common/FormLabel");
+var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+var HelperText_1 = __importDefault(require("../Common/HelperText"));
+function CheckBox(_a) {
+    var label = _a.label, 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, size = _a.size, 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;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.FormControl, { isInvalid: error },
+        react_1.default.createElement(react_2.Checkbox, { spacing: spacing, isInvalid: isInvalid, isRequired: isRequired, 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], sx: sx, display: "flex", alignItems: "inherit" }, label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }))),
+        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
+        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
+}
+exports.default = CheckBox;

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

@@ -0,0 +1 @@
+export {};

package/dist/Components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,7 @@
+"use strict";
+// import React, { useState } from 'react';
+// import { Meta, StoryObj } from '@storybook/react';
+// import CheckBox from './Checkbox';
+// import { fn } from '@storybook/test';
+// import { CheckboxProps } from './CheckboxProps';
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,2 @@
+import { ComponentStyleConfig } from "@chakra-ui/react";
+export declare const Checkbox: ComponentStyleConfig;

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+exports.Checkbox = {
+    baseStyle: function (_a) {
+        var theme = _a.theme;
+        return {
+            control: {
+                width: "1.25rem",
+                height: "1.25rem",
+                borderWidth: "1.6px",
+                _disabled: {
+                    bg: theme.colors.background[50],
+                    borderColor: theme.colors.boxborder[500],
+                    cursor: "not-allowed",
+                },
+                _indeterminate: {
+                    bg: theme.colors.background[50],
+                    borderColor: theme.colors.primary[500],
+                    svg: {
+                        color: theme.colors.primary[500],
+                    },
+                },
+                _checked: {
+                    bg: theme.colors.primary[600],
+                    borderColor: theme.colors.primary[600],
+                },
+                _hover: {
+                    bg: theme.colors.background[100],
+                    borderColor: theme.colors.primary[400],
+                    _checked: {
+                        bg: theme.colors.primary[600],
+                        borderColor: theme.colors.primary[600],
+                    },
+                    _indeterminate: {
+                        bg: "none",
+                        borderColor: theme.colors.primary[600],
+                    },
+                },
+                _focus: {
+                    boxShadow: "0 0 0 2px ".concat(theme.colors.primary[300]),
+                    borderColor: theme.colors.primary[500],
+                },
+                _active: {
+                    bg: theme.colors.primary[600],
+                    borderColor: theme.colors.primary[600],
+                },
+            },
+            icon: {
+                color: theme.colors.background[50],
+            },
+        };
+    },
+};

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

@@ -0,0 +1,15 @@
+import { CheckboxProps as ChakraButtonProps } from "@chakra-ui/react";
+export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "size" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate" | "onChange" | "isDisabled" | "value" | "defaultChecked" | "sx"> & {
+    label?: string;
+    width?: string | number;
+    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;
+};

package/dist/Components/Checkbox/CheckboxProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const ErrorComponent: ({ error, errorClassName }: {
+    error: string;
+    errorClassName?: string | undefined;
+}) => React.JSX.Element;
+export default ErrorComponent;

package/dist/Components/Common/ErrorComponent.js

@@ -0,0 +1,16 @@
+"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 ErrorComponent = function (_a) {
+    var error = _a.error, errorClassName = _a.errorClassName;
+    return (react_1.default.createElement("p", { className: "mt-1 text-sm text-[#F2463A] flex items-center gap-1 ".concat(errorClassName) },
+        react_1.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
+            react_1.default.createElement("circle", { cx: "50", cy: "50", r: "50", fill: "#EF4444" }),
+            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" })),
+        error));
+};
+exports.default = ErrorComponent;

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

@@ -0,0 +1,5 @@
+import React from "react";
+declare const ErrorMessage: ({ errorMessage }: {
+    errorMessage?: string | undefined;
+}) => React.JSX.Element;
+export default ErrorMessage;

package/dist/Components/Common/ErrorMessage.js

@@ -0,0 +1,17 @@
+"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")));
+};
+exports.default = ErrorMessage;

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

@@ -0,0 +1,8 @@
+import React from "react";
+export declare const TextLabel: ({ label, id, isRequired, isInformation, informationMessage, }: {
+    label: string;
+    id?: string | undefined;
+    isInformation?: boolean | undefined;
+    informationMessage?: string | undefined;
+    isRequired?: boolean | undefined;
+}) => React.JSX.Element;

package/dist/Components/Common/FormLabel.js

@@ -0,0 +1,22 @@
+"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, id = _a.id, _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;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.Box, null,
+        react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], fontWeight: 400, fontSize: "0.875rem" },
+            react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem" },
+                label,
+                isRequired && (react_1.default.createElement("span", { style: { color: theme.colors.semantic.error[500] } }, "*")),
+                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.gray[500], boxSize: 4 })))))));
+};
+exports.TextLabel = TextLabel;

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

@@ -0,0 +1,5 @@
+import React from "react";
+declare const HelperText: ({ helperText }: {
+    helperText: string;
+}) => React.JSX.Element;
+export default HelperText;

package/dist/Components/Common/HelperText.js

@@ -0,0 +1,14 @@
+"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));
+};
+exports.default = HelperText;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const Label: ({ label, labelClassName, isRequired }: {
+    label: string;
+    labelClassName?: string | undefined;
+    isRequired?: boolean | undefined;
+}) => React.JSX.Element;
+export default Label;

package/dist/Components/Common/Label.js

@@ -0,0 +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 Label = function (_a) {
+    var label = _a.label, labelClassName = _a.labelClassName, isRequired = _a.isRequired;
+    return (react_1.default.createElement("label", { className: "block text-sm font-medium text-[#434853] mb-1 ".concat(labelClassName), htmlFor: label },
+        label,
+        isRequired && react_1.default.createElement("span", { className: "text-[#F2463A] ml-1" }, "*")));
+};
+exports.default = Label;

package/dist/Components/ContactForm/ContactForm.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ContactFormProps } from "./ContactFormProps";
+declare const ContactForm: ({ apiKey, customFields, getCustomValues, isDisabled, organizationId, customerId, }: ContactFormProps) => React.JSX.Element;
+export default ContactForm;