pixelize-design-library 1.0.23 → 1.0.25

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { ApexPieChartProps } from "./ApexPieChartProps";
 export default function ApexPieChart({ data, labels, title, titlePosition, height, width, chartColor, titleStyle, }: ApexPieChartProps): React.JSX.Element;

package/dist/Components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { BreadcrumbsProps } from "./BreadcrumbsProps";
-export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items }: BreadcrumbsProps): React.JSX.Element;
+export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }: BreadcrumbsProps): React.JSX.Element;

package/dist/Components/Breadcrumbs/Breadcrumbs.js

@@ -9,7 +9,7 @@ function Breadcrumbs(_a) {
     var spacing = _a.spacing, separator = _a.separator, fontWeight = _a.fontWeight, fontSize = _a.fontSize, isCurrentPage = _a.isCurrentPage, handleClick = _a.handleClick, items = _a.items;
     return (react_1.default.createElement(react_2.ChakraProvider, null,
         react_1.default.createElement(react_2.Breadcrumb, { spacing: spacing, separator: separator, fontWeight: fontWeight, fontSize: fontSize }, items.map(function (item, index) { return (react_1.default.createElement(react_2.BreadcrumbItem, { key: index, isCurrentPage: isCurrentPage && index === items.length - 1 },
-            react_1.default.createElement(react_2.BreadcrumbLink, { href: item.path, sx: { '&:hover, &:active': { textDecoration: 'none' } }, onClick: function (event) {
+            react_1.default.createElement(react_2.BreadcrumbLink, { href: item.path, sx: { "&:hover, &:active": { textDecoration: "none" } }, onClick: function (event) {
                     event.preventDefault();
                     handleClick(item.path);
                 } }, item.label))); }))));

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ButtonProps } from './ButtonProps';
-export default function Button({ label, width, onClick, color, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type }: ButtonProps): React.JSX.Element;
+export default function Button({ label, width, onClick, color, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, }: ButtonProps): React.JSX.Element;

package/dist/Components/Button/Button.js

@@ -6,8 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 function Button(_a) {
-    var label = _a.label, _b = _a.width, width = _b === void 0 ? "120px" : _b, onClick = _a.onClick, color = _a.color, variant = _a.variant, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.loadingText, loadingText = _e === void 0 ? "Loading" : _e, type = _a.type;
+    var label = _a.label, _b = _a.width, width = _b === void 0 ? "100%" : _b, onClick = _a.onClick, color = _a.color, variant = _a.variant, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.loadingText, loadingText = _e === void 0 ? "Loading" : _e, type = _a.type;
     return (react_1.default.createElement(react_2.ChakraProvider, null,
-        react_1.default.createElement(react_2.Button, { type: type, onClick: onClick, width: width, colorScheme: color, variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon }, label)));
+        react_1.default.createElement(react_2.Button, { type: type, onClick: onClick, width: width, colorScheme: color, variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon },
+            react_1.default.createElement(react_2.Box, { sx: {
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    maxWidth: '100%',
+                } }, label))));
 }
 exports.default = Button;

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

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { ButtonGroupIconProps } from "./ButtonGoupIconProps";
-export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color }: ButtonGroupIconProps): React.JSX.Element;
+export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, }: ButtonGroupIconProps): React.JSX.Element;

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -9,8 +9,8 @@ function ButtonGroupIcon(_a) {
     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;
     return (react_1.default.createElement(react_2.ChakraProvider, null,
         react_1.default.createElement(react_2.ButtonGroup, { size: size, isAttached: true, variant: variant, onClick: onButtongroupClick, colorScheme: color },
-            leftIcon && react_1.default.createElement(react_2.IconButton, { "aria-label": 'Left icon button', icon: leftIcon, onClick: onLeftIconClick }),
+            leftIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, onClick: onLeftIconClick })),
             react_1.default.createElement(react_2.Button, { onClick: onButtonClick }, buttonText),
-            rightIcon && react_1.default.createElement(react_2.IconButton, { "aria-label": 'Right icon button', icon: rightIcon, onClick: onRightIconClick }))));
+            rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick })))));
 }
 exports.default = ButtonGroupIcon;

package/dist/Components/Input/TextInput.d.ts

@@ -1,3 +1,5 @@
 import { TextInputProps } from "./TextInputProps";
 import React from "react";
-export default function TextInput({ label, type, id, name, onChange, onBlur, onFocus, isDisabled, isReadOnly, isRequired, value, placeholder, width, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputGroupStyle, inputStyle, }: TextInputProps): React.JSX.Element;
+declare function TextInput({ label, type, id, name, onChange, onBlur, onFocus, isDisabled, isReadOnly, isRequired, value, placeholder, width, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputGroupStyle, inputStyle, }: TextInputProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TextInput>;
+export default _default;

package/dist/Components/Input/TextInput.js

@@ -7,13 +7,16 @@ var react_1 = require("@chakra-ui/react");
 var react_2 = __importDefault(require("react"));
 function TextInput(_a) {
     var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "250px" : _g, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle;
-    return (react_2.default.createElement(react_1.ChakraProvider, null,
-        react_2.default.createElement(react_1.FormControl, { isRequired: isRequired, isInvalid: error },
-            label && react_2.default.createElement(react_1.FormLabel, { mb: "0.25rem" }, label),
-            react_2.default.createElement(react_1.InputGroup, { width: width, style: inputGroupStyle },
-                react_2.default.createElement(react_1.Input, { type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, errorBorderColor: error ? "crimson" : "", isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, style: inputStyle }),
-                inputRightIcon && (react_2.default.createElement(react_1.InputRightElement, { children: inputRightIcon, onClick: onRightIconclick }))),
-            error && react_2.default.createElement(react_1.FormErrorMessage, { pl: 4 }, errorMessage),
-            helperText && !error && (react_2.default.createElement(react_1.FormHelperText, { pl: 4 }, helperText)))));
+    return (
+    // <ChakraProvider>
+    react_2.default.createElement(react_1.FormControl, { isRequired: isRequired, isInvalid: error },
+        label && react_2.default.createElement(react_1.FormLabel, { mb: "0.25rem" }, label),
+        react_2.default.createElement(react_1.InputGroup, { width: width, style: inputGroupStyle },
+            react_2.default.createElement(react_1.Input, { type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, errorBorderColor: error ? "crimson" : "", isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, style: inputStyle }),
+            inputRightIcon && (react_2.default.createElement(react_1.InputRightElement, { children: inputRightIcon, onClick: onRightIconclick }))),
+        error && react_2.default.createElement(react_1.FormErrorMessage, { pl: 4 }, errorMessage),
+        helperText && !error && (react_2.default.createElement(react_1.FormHelperText, { pl: 4 }, helperText)))
+    // </ChakraProvider>
+    );
 }
-exports.default = TextInput;
+exports.default = react_2.default.memo(TextInput);

package/dist/Components/Input/TextInput.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import TextInput from './TextInput';
+import type { Meta, StoryObj } from "@storybook/react";
+import TextInput from "./TextInput";
 declare const meta: Meta<typeof TextInput>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/Components/Input/TextInput.stories.js

@@ -20,12 +20,12 @@ var test_1 = require("@storybook/test");
 var TextInput_1 = __importDefault(require("./TextInput"));
 var react_2 = require("react");
 var meta = {
-    title: 'Components/Input/TextInput',
+    title: "Components/Input/TextInput",
     component: TextInput_1.default,
     parameters: {
-        layout: 'centered',
+        layout: "centered",
     },
-    tags: ['autodocs'],
+    tags: ["autodocs"],
 };
 exports.default = meta;
 var TextInputTemplate = function (args) {
@@ -37,7 +37,7 @@ var TextInputTemplate = function (args) {
 };
 exports.Primary = {
     args: {
-        label: 'Button',
+        label: "Button",
         onChange: (0, test_1.fn)(),
         onBlur: (0, test_1.fn)(),
         onFocus: (0, test_1.fn)(),
@@ -49,7 +49,7 @@ exports.Primary = {
         width: 500,
         error: true,
         errorMessage: "jhkjhkjh",
-        helperText: ""
+        helperText: "",
     },
-    render: function (args) { return TextInputTemplate(args); }
+    render: function (args) { return TextInputTemplate(args); },
 };

package/dist/Components/InputTextArea/InputTextArea.stories.js

@@ -37,8 +37,8 @@ var TextAreaTemplate = function (args) {
 exports.Primary = {
     args: {
         label: "hello",
-        helperText: 'Hello',
-        errorMessage: 'Required',
+        helperText: "Hello",
+        errorMessage: "Required",
         error: true,
         rows: 5,
         onChange: function () { },
@@ -53,5 +53,6 @@ exports.Primary = {
         variant: "outline",
         focusBorderColor: "blue.500",
         errorBorderColor: "red.500",
-    }, render: function (args) { return TextAreaTemplate(args); }
+    },
+    render: function (args) { return TextAreaTemplate(args); },
 };

package/dist/Components/Loading/Loading.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { LoadingProps } from "./LoadingProps";
 export default function Loading({ text, isLoading }: LoadingProps): React.JSX.Element | null;

package/dist/Components/Modal/Modal.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { ChakraModelProps } from "./ModalProps";
 export default function Modal({ size, isOpen, onClose, title, footer, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, motionPreset, scrollBehavior, children, }: ChakraModelProps): React.JSX.Element;

package/dist/Components/Modal/Modal.js

@@ -15,7 +15,11 @@ function Modal(_a) {
             react_1.default.createElement(react_2.ModalContent, null,
                 react_1.default.createElement(react_2.ModalHeader, null, title),
                 react_1.default.createElement(react_2.ModalCloseButton, null),
-                react_1.default.createElement(react_2.ModalBody, null, children),
+                react_1.default.createElement(react_2.ModalBody, { sx: {
+                        whiteSpace: "normal",
+                        wordBreak: "break-word",
+                        overflowWrap: "break-word",
+                    } }, children),
                 react_1.default.createElement(react_2.ModalFooter, null, footer)))));
 }
 exports.default = Modal;

package/dist/Components/NavigationBar/NavigationBar.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { NavbarProps } from "./NavigationBarProps";
-export default function NavBar({ userAvathar, userName, navMenu, handleNavOnClick, handleLogout, logoutText }: NavbarProps): React.JSX.Element;
+export default function NavBar({ userAvathar, userName, navMenu, handleNavOnClick, handleLogout, logoutText, }: NavbarProps): React.JSX.Element;

package/dist/Components/NavigationBar/NavigationBar.js

@@ -9,17 +9,17 @@ function NavBar(_a) {
     var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText;
     return (react_1.default.createElement(react_2.ChakraProvider, null,
         react_1.default.createElement(react_2.Box, { bg: "#ffffff", px: 4, boxShadow: "0 4px 12px 0 rgba(0, 0, 0, 0.05)" },
-            react_1.default.createElement(react_2.Flex, { h: 16, alignItems: 'center', justifyContent: 'space-between' },
+            react_1.default.createElement(react_2.Flex, { h: 16, alignItems: "center", justifyContent: "space-between" },
                 react_1.default.createElement(react_2.Box, null),
-                react_1.default.createElement(react_2.Flex, { alignItems: 'center' },
-                    react_1.default.createElement(react_2.Stack, { direction: 'row', spacing: 7 },
+                react_1.default.createElement(react_2.Flex, { alignItems: "center" },
+                    react_1.default.createElement(react_2.Stack, { direction: "row", spacing: 7 },
                         react_1.default.createElement(react_2.Menu, null,
-                            react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: 'full', variant: 'link', cursor: 'pointer', minW: 0 },
-                                react_1.default.createElement(react_2.Avatar, { size: 'sm', src: userAvathar })),
-                            react_1.default.createElement(react_2.MenuList, { alignItems: 'center' },
+                            react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0 },
+                                react_1.default.createElement(react_2.Avatar, { size: "sm", src: userAvathar })),
+                            react_1.default.createElement(react_2.MenuList, { alignItems: "center" },
                                 react_1.default.createElement("br", null),
                                 react_1.default.createElement(react_2.Center, null,
-                                    react_1.default.createElement(react_2.Avatar, { size: '2xl', src: userAvathar })),
+                                    react_1.default.createElement(react_2.Avatar, { size: "2xl", src: userAvathar })),
                                 react_1.default.createElement("br", null),
                                 react_1.default.createElement(react_2.Center, null,
                                     react_1.default.createElement("p", null, userName)),

package/dist/Components/NumberInput/NumberInput.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { NumberInputProps } from "./NumberInputProps";
-export default function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive }: NumberInputProps): React.JSX.Element;
+export default function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, }: NumberInputProps): React.JSX.Element;

package/dist/Components/PinInput/PinInput.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { ChakraPinInputProps } from "./PinInputProps";
-export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color, variant, pins, label }: ChakraPinInputProps): React.JSX.Element;
+export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color, variant, pins, label, }: ChakraPinInputProps): React.JSX.Element;

package/dist/Components/PinInput/PinInput.js

@@ -8,7 +8,7 @@ var react_2 = require("@chakra-ui/react");
 function PinInputs(_a) {
     var otp = _a.otp, mask = _a.mask, defaultValue = _a.defaultValue, placeholder = _a.placeholder, manageFocus = _a.manageFocus, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, onChange = _a.onChange, onComplete = _a.onComplete, type = _a.type, color = _a.color, variant = _a.variant, _b = _a.pins, pins = _b === void 0 ? 3 : _b, label = _a.label;
     return (react_1.default.createElement(react_2.ChakraProvider, null,
-        label && react_1.default.createElement(react_2.Text, { fontWeight: "bold", marginBottom: "8px" }, label),
+        label && (react_1.default.createElement(react_2.Text, { fontWeight: "bold", marginBottom: "8px" }, label)),
         react_1.default.createElement(react_2.HStack, null,
             react_1.default.createElement(react_2.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index })); })))));
 }

package/dist/Components/ProfileCard/ProfileCard.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { ProfileCardProps } from "./ProfileCardProps";
 export default function ProfileCard({ key, maxW, align, variant, direction, justify, header, footer, children, size, color, overflow, dividercolor, dividersize, dividervariant, }: ProfileCardProps): React.JSX.Element;

package/dist/Components/ProfileCard/ProfileCard.js

@@ -9,8 +9,9 @@ function ProfileCard(_a) {
     var key = _a.key, maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, header = _a.header, footer = _a.footer, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, dividercolor = _a.dividercolor, dividersize = _a.dividersize, dividervariant = _a.dividervariant;
     return (react_1.default.createElement(react_2.ChakraProvider, null,
         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, mr: 10 },
-            react_1.default.createElement(react_2.CardHeader, null, header),
-            react_1.default.createElement(react_2.Divider, { colorScheme: dividercolor, size: dividersize, variant: dividervariant }),
+            header && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(react_2.CardHeader, null, header),
+                react_1.default.createElement(react_2.Divider, { colorScheme: dividercolor, size: dividersize, variant: dividervariant }))),
             react_1.default.createElement(react_2.CardBody, null, children),
             react_1.default.createElement(react_2.CardFooter, null, footer))));
 }

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
-export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle }: ProfilePhotoViewerProps): React.JSX.Element;
+export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, }: ProfilePhotoViewerProps): React.JSX.Element;

package/dist/Components/ProgressBar/ProgressBar.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { ProgressBarProps } from "./ProgressBarProps";
 export default function ProgressBar({ size, isIndeterminate, color, hasStripe, height, value, isAnimated, max, min, variant, }: ProgressBarProps): React.JSX.Element;

package/dist/Components/RadioButton/RadioButton.js

@@ -17,6 +17,6 @@ var RadioButtonGroup = function (_a) {
     var options = _a.options, onChange = _a.onChange, value = _a.value, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, size = _a.size, colorScheme = _a.colorScheme;
     return (react_1.default.createElement(react_2.ChakraProvider, null,
         react_1.default.createElement(react_2.RadioGroup, { onChange: onChange, value: value, defaultValue: defaultValue },
-            react_1.default.createElement(react_2.Stack, { direction: "row", spacing: 4 }, options.map(function (option) { return (react_1.default.createElement(RadioButton, { key: option.value, label: option.label, value: option.value, isDisabled: isDisabled, size: size, colorScheme: colorScheme })); })))));
+            react_1.default.createElement(react_2.Stack, { direction: "row", spacing: 4 }, options.map(function (option) { return (react_1.default.createElement(RadioButton, { key: option.id, label: option.label, value: option.id, isDisabled: isDisabled, size: size, colorScheme: colorScheme })); })))));
 };
 exports.RadioButtonGroup = RadioButtonGroup;

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

@@ -8,7 +8,7 @@ export declare const SingleRadioButton: import("@storybook/types").AnnotatedStor
 export declare const RadioButtonGroupStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, Pick<import("@chakra-ui/radio/dist/radio-group").RadioGroupProps, "isDisabled" | "colorScheme" | "value" | "defaultValue" | "size"> & {
     options: {
         label: string;
-        value: string;
+        id: string;
     }[];
     onChange?: ((value: string) => void) | undefined;
 }>;

package/dist/Components/RadioButton/RadioButton.stories.js

@@ -65,9 +65,9 @@ var RadioButtonGroupTemplate = function (args) {
 exports.RadioButtonGroupStory = RadioButtonGroupTemplate.bind({});
 exports.RadioButtonGroupStory.args = {
     options: [
-        { label: 'Option 1', value: '1' },
-        { label: 'Option 2', value: '2' },
-        { label: 'Option 3', value: '3' },
+        { label: 'Option 1', id: '1' },
+        { label: 'Option 2', id: '2' },
+        { label: 'Option 3', id: '3' },
     ],
     value: '1',
     colorScheme: 'blue',

package/dist/Components/RadioButton/RadioButtonProps.d.ts

@@ -5,7 +5,7 @@ export type ChakraRadioProps = Pick<RadioProps, "size" | "colorScheme" | "isChec
 export type ChakraRadioGroupProps = Pick<RadioGroupProps, "size" | "colorScheme" | "isDisabled" | "defaultValue" | "value"> & {
     options: {
         label: string;
-        value: string;
+        id: string;
     }[];
     onChange?: (value: string) => void;
 };

package/dist/Components/Select/Select.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { chakraSelectProps } from "./SelectProps";
 export default function Select({ placeholder, size, variant, icon, bg, borderColor, color, error, isRequired, label, errorMessage, helperText, options, value, onChange, width, }: chakraSelectProps): React.JSX.Element;

package/dist/Components/Select/Select.js

@@ -11,13 +11,13 @@ function Select(_a) {
     var getOptionsList = (0, react_3.useCallback)(function () {
         if (!options.length)
             return react_1.default.createElement("option", { value: "" }, "No Options");
-        return options.map(function (option) { return react_1.default.createElement("option", { key: option.id, value: option.id }, option.label); });
+        return options.map(function (option) { return (react_1.default.createElement("option", { key: option.id, value: option.id }, option.label)); });
     }, [options]);
     return (react_1.default.createElement(react_2.ChakraProvider, null,
         react_1.default.createElement(react_2.FormControl, { isRequired: isRequired, isInvalid: error },
             label && react_1.default.createElement(react_2.FormLabel, { mb: "0.25rem" }, label),
             react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: variant, icon: icon, bg: bg, borderColor: borderColor, color: color, isInvalid: error, value: value, onChange: onChange, width: width }, getOptionsList()),
-            error && (react_1.default.createElement(react_2.FormErrorMessage, { pl: 4 }, errorMessage)),
-            helperText && !error && react_1.default.createElement(react_2.FormHelperText, { pl: 4 }, helperText))));
+            error && react_1.default.createElement(react_2.FormErrorMessage, { pl: 4 }, errorMessage),
+            helperText && !error && (react_1.default.createElement(react_2.FormHelperText, { pl: 4 }, helperText)))));
 }
 exports.default = Select;

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

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/react';
-import Select from './Select';
-import { chakraSelectProps } from './SelectProps';
+import { Meta } from "@storybook/react";
+import Select from "./Select";
+import { chakraSelectProps } from "./SelectProps";
 declare const meta: Meta<typeof Select>;
 export default meta;
 export declare const Primary: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, chakraSelectProps>;

package/dist/Components/Select/Select.stories.js

@@ -20,12 +20,12 @@ var react_2 = require("@chakra-ui/react");
 var react_3 = require("react");
 var Select_1 = __importDefault(require("./Select"));
 var meta = {
-    title: 'Components/Input/Select',
+    title: "Components/Input/Select",
     component: Select_1.default,
     parameters: {
-        layout: 'centered',
+        layout: "centered",
     },
-    tags: ['autodocs'],
+    tags: ["autodocs"],
 };
 exports.default = meta;
 var SelectTemplate = function (args) {
@@ -50,13 +50,13 @@ exports.Primary.args = {
     color: undefined,
     error: false,
     isRequired: false,
-    label: 'Select Input',
+    label: "Select Input",
     errorMessage: "",
     helperText: "",
     options: [
-        { id: '1', label: 'Option 1' },
-        { id: '2', label: 'Option 2' },
-        { id: '3', label: 'Option 3' },
+        { id: "1", label: "Option 1" },
+        { id: "2", label: "Option 2" },
+        { id: "3", label: "Option 3" },
     ],
     value: "",
     width: 500,

package/dist/Components/Skeletons/Skeletons.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { SkeletonProps } from "./SkeletonProps";
-export default function Skeletons({ startColor, endColor, height, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width }: SkeletonProps): React.JSX.Element;
+export default function Skeletons({ startColor, endColor, height, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }: SkeletonProps): React.JSX.Element;

package/dist/Components/Table/Table.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { TableProps } from "./TableProps";
 export default function Table({ data, headers, tableHeaderBgColor, tableHeaderColor, handleExportChange, exportOptions, exportLabel, isLoading, loadingContaxt, loadingBoxStyle, }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -46,14 +46,13 @@ function Table(_a) {
     }, {})), visibleColumns = _p[0], setVisibleColumns = _p[1];
     if (isLoading) {
         return (react_1.default.createElement(react_2.ChakraProvider, null,
-            react_1.default.createElement(react_2.Box, { width: "full", overflowX: "auto", style: loadingBoxStyle }, loadingContaxt ? loadingContaxt :
-                react_1.default.createElement(react_2.Spinner, { thickness: '4px', speed: '0.65s', emptyColor: 'gray.200', color: 'blue.500', size: 'xl' }))));
+            react_1.default.createElement(react_2.Box, { width: "full", overflowX: "auto", style: loadingBoxStyle }, loadingContaxt ? (loadingContaxt) : (react_1.default.createElement(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: "blue.500", size: "xl" })))));
     }
     var handlePageSizeChange = function (event) {
         setRowsPerPage(Number(event.target.value));
         setCurrentPage(0);
     };
-    var pageSizeOptions = [5, 10, 20, 50, 100].filter(function (size) { return size <= data.length; });
+    var pageSizeOptions = [5, 10, 20, 30, 40, 50, 75, 100].filter(function (size) { return size <= data.length; });
     var sortedData = __spreadArray([], data, true).sort(function (a, b) {
         if (!sortField)
             return 0;
@@ -63,7 +62,21 @@ function Table(_a) {
             return sortDirection === "asc" ? 1 : -1;
         return 0;
     });
-    var handleSort = function (field) {
+    var getValue = function (header) {
+        var value = data.reduce(function (acc, item) {
+            var itemValue = item[header];
+            if (itemValue !== undefined &&
+                itemValue !== null &&
+                !acc.includes(itemValue)) {
+                acc.push(itemValue);
+            }
+            return acc;
+        }, []);
+        return value;
+    };
+    var handleSort = function (field, sort) {
+        if (!sort)
+            return;
         setSortField(field);
         setSortDirection(sortDirection === "asc" ? "desc" : "asc");
     };
@@ -72,6 +85,33 @@ function Table(_a) {
             var _a;
             return (__assign(__assign({}, prev), (_a = {}, _a[header] = operation, _a)));
         });
+        var list_ofdata = getValue(header);
+        if (operation === "between") {
+            var smallestValue_1 = String(Math.min.apply(Math, list_ofdata));
+            var highestValue_1 = String(Math.max.apply(Math, list_ofdata));
+            setBetweenValues(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[header] = { min: smallestValue_1, max: highestValue_1 }, _a)));
+            });
+            setSearchTerms(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[header] = "between", _a)));
+            });
+        }
+        else {
+            if (operation === "blank" || operation === "notBlank") {
+                setSearchTerms(function (prev) {
+                    var _a;
+                    return (__assign(__assign({}, prev), (_a = {}, _a[header] = "", _a)));
+                });
+            }
+            else {
+                setSearchTerms(function (prev) {
+                    var _a;
+                    return (__assign(__assign({}, prev), (_a = {}, _a[header] = list_ofdata[0], _a)));
+                });
+            }
+        }
     };
     var handleSearch = function (field, term) {
         if (searchOperation[field] === "between") {
@@ -87,7 +127,10 @@ function Table(_a) {
             });
         }
     };
-    var handleHeaderClick = function (header) {
+    var handleHeaderClick = function (header, search) {
+        if (!search) {
+            return;
+        }
         setActiveHeader(header);
         setPopoverOpen(true);
     };
@@ -96,9 +139,9 @@ function Table(_a) {
     };
     var filteredData = sortedData.filter(function (item) {
         return Object.keys(searchTerms).every(function (key) {
-            var term = searchTerms[key].toLowerCase();
+            var term = String(searchTerms[key]).toLowerCase();
             var value = String(item[key]).toLowerCase();
-            var operation = searchOperation[key] || "contains";
+            var operation = searchOperation[key] || "notBlank";
             switch (operation) {
                 case "contains":
                     return value.includes(term);
@@ -148,40 +191,53 @@ function Table(_a) {
         var _a, _b;
         var fieldType = getFieldType(header);
         return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_2.Select, { value: searchOperation[header] || "notBlank", onChange: function (e) { return handleSearchOperation(header, e.target.value); }, style: { background: "#3182ce", color: "white" } }, fieldType === "number" ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("option", { value: "equals" }, "Equals"),
-                react_1.default.createElement("option", { value: "notEquals" }, "Does not equal"),
-                react_1.default.createElement("option", { value: "greaterThan" }, "Greater than"),
-                react_1.default.createElement("option", { value: "greaterThanOrEqual" }, "Greater than or equal to"),
-                react_1.default.createElement("option", { value: "lessThan" }, "Less than"),
-                react_1.default.createElement("option", { value: "lessThanOrEqual" }, "Less than or equal to"),
-                react_1.default.createElement("option", { value: "between" }, "Between"),
-                react_1.default.createElement("option", { value: "blank" }, "Blank"),
-                react_1.default.createElement("option", { value: "notBlank" }, "Not blank"))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("option", { value: "contains" }, "Contains"),
-                react_1.default.createElement("option", { value: "notContains" }, "Does not contain"),
+            react_1.default.createElement(react_2.Select, { value: searchOperation[header] || "notBlank", onChange: function (e) { return handleSearchOperation(header, e.target.value); }, style: { background: "#3182ce", color: "white" } },
                 react_1.default.createElement("option", { value: "equals" }, "Equals"),
                 react_1.default.createElement("option", { value: "notEquals" }, "Does not equal"),
-                react_1.default.createElement("option", { value: "beginsWith" }, "Begins with"),
-                react_1.default.createElement("option", { value: "endsWith" }, "Ends with"),
+                fieldType === "number" ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("option", { value: "greaterThan" }, "Greater than"),
+                    react_1.default.createElement("option", { value: "greaterThanOrEqual" }, "Greater than or equal to"),
+                    react_1.default.createElement("option", { value: "lessThan" }, "Less than"),
+                    react_1.default.createElement("option", { value: "lessThanOrEqual" }, "Less than or equal to"),
+                    react_1.default.createElement("option", { value: "between" }, "Between"))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("option", { value: "contains" }, "Contains"),
+                    react_1.default.createElement("option", { value: "notContains" }, "Does not contain"),
+                    react_1.default.createElement("option", { value: "beginsWith" }, "Begins with"),
+                    react_1.default.createElement("option", { value: "endsWith" }, "Ends with"))),
                 react_1.default.createElement("option", { value: "blank" }, "Blank"),
-                react_1.default.createElement("option", { value: "notBlank" }, "Not blank")))),
-            react_1.default.createElement("br", null),
-            searchOperation[header] === "between" && fieldType === "number" ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("option", { value: "notBlank" }, "Not blank")),
+            searchOperation[header] !== undefined &&
+                searchOperation[header] === "between" &&
+                fieldType === "number" && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("br", null),
                 react_1.default.createElement(react_2.Input, { value: ((_a = betweenValues[header]) === null || _a === void 0 ? void 0 : _a.min) || "", onChange: function (e) {
-                        return setBetweenValues(function (prev) {
+                        setBetweenValues(function (prev) {
                             var _a;
                             return (__assign(__assign({}, prev), (_a = {}, _a[header] = __assign(__assign({}, prev[header]), { min: e.target.value }), _a)));
                         });
+                        setSearchTerms(function (prev) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[header] = "between", _a)));
+                        });
                     }, placeholder: "Min...", background: "white", color: "black" }),
                 react_1.default.createElement("br", null),
                 react_1.default.createElement("br", null),
                 react_1.default.createElement(react_2.Input, { value: ((_b = betweenValues[header]) === null || _b === void 0 ? void 0 : _b.max) || "", onChange: function (e) {
-                        return setBetweenValues(function (prev) {
+                        setBetweenValues(function (prev) {
                             var _a;
                             return (__assign(__assign({}, prev), (_a = {}, _a[header] = __assign(__assign({}, prev[header]), { max: e.target.value }), _a)));
                         });
-                    }, placeholder: "Max...", background: "white", color: "black" }))) : (react_1.default.createElement(react_2.Input, { value: searchTerms[header] || "", onChange: function (e) { return handleSearch(header, e.target.value); }, placeholder: "Search...", background: "white", color: "black" }))));
+                        setSearchTerms(function (prev) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[header] = "between", _a)));
+                        });
+                    }, placeholder: "Max...", background: "white", color: "black" }))),
+            searchOperation[header] !== undefined &&
+                searchOperation[header] !== "between" &&
+                searchOperation[header] !== "blank" &&
+                searchOperation[header] !== "notBlank" && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("br", null),
+                react_1.default.createElement(react_2.Input, { value: searchTerms[header] || "", onChange: function (e) { return handleSearch(header, e.target.value); }, placeholder: "Search...", background: "white", color: "black" })))));
     };
     var handleColumnVisibilityChange = function (header) {
         setVisibleColumns(function (prev) {
@@ -203,19 +259,43 @@ function Table(_a) {
         setHoveredHeaderIndex(null);
         closePopover();
     };
+    var removeSearchOptionTerm = function (key, index) {
+        var newSearchTerms = __assign({}, searchTerms);
+        var newSearchOperation = __assign({}, searchOperation);
+        var newBetweenValues = __assign({}, betweenValues);
+        delete newSearchTerms[key];
+        delete newSearchOperation[key];
+        delete newBetweenValues[key];
+        setSearchTerms(newSearchTerms);
+        setSearchOperation(newSearchOperation);
+        setBetweenValues(newBetweenValues);
+    };
     return (react_1.default.createElement(react_2.ChakraProvider, null,
-        react_1.default.createElement("div", { style: { width: "97%" } },
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(react_2.Wrap, null, searchOperation &&
+                Object.keys(searchOperation).map(function (key, index) {
+                    var _a, _b;
+                    return (react_1.default.createElement(react_2.Tag, { size: "sm", key: index, borderRadius: "full", variant: "solid", colorScheme: "gray", m: 1 },
+                        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center" },
+                            react_1.default.createElement(react_2.TagLabel, null, key),
+                            react_1.default.createElement(react_2.TagLabel, { mx: 2 }, searchOperation[key]),
+                            searchOperation[key] === "between" ? (react_1.default.createElement(react_2.TagLabel, null, (_a = betweenValues[key]) === null || _a === void 0 ? void 0 :
+                                _a.min,
+                                " - ", (_b = betweenValues[key]) === null || _b === void 0 ? void 0 :
+                                _b.max)) : (react_1.default.createElement(react_2.TagLabel, null, searchTerms[key]))),
+                        react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return removeSearchOptionTerm(key, index); } })));
+                })),
             react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "flex-end" }, exportOptions && exportOptions.length > 0 && (react_1.default.createElement(react_2.Select, { placeholder: "Exports", width: 160, onChange: function (e) {
                     handleExportChange && handleExportChange(e.target.value);
-                }, value: exportLabel }, exportOptions.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.label)); })))),
+                }, value: exportLabel, key: exportLabel }, exportOptions.map(function (option) { return (react_1.default.createElement("option", { key: option.id, value: option.id }, option.label)); })))),
             react_1.default.createElement("br", null),
             react_1.default.createElement(react_2.TableContainer, null,
-                react_1.default.createElement(react_3.Table, { variant: "simple", colorScheme: "teal", size: "md", overflowX: "scroll" },
+                react_1.default.createElement(react_3.Table, { variant: "simple", colorScheme: "teal", size: "md", overflowX: "scroll", minW: "100%" },
                     react_1.default.createElement(react_3.Thead, { background: tableHeaderBgColor },
                         react_1.default.createElement(react_3.Tr, null, headers.map(function (header, index) {
                             var isFrozen = header.columnFreeze;
                             var leftOffset = calculateLeftOffset(headers, index);
-                            return (visibleColumns[header.label] && (react_1.default.createElement(react_3.Th, { key: index, style: {
+                            return (visibleColumns[header.label] && (react_1.default.createElement(react_3.Th, { key: index + 1, style: {
                                     textTransform: "capitalize",
                                     color: tableHeaderColor,
                                     fontSize: "medium",
@@ -227,32 +307,43 @@ function Table(_a) {
                                     zIndex: isFrozen ? 2 : 1,
                                     background: tableHeaderBgColor,
                                     textAlign: "center",
+                                    width: "300px",
                                 }, onMouseEnter: function () { return handleMouseEnter(index); }, onMouseLeave: handleMouseLeave },
-                                header.sort ? (react_1.default.createElement(react_2.Button, { onClick: function () { return handleSort(header.label); }, style: {
+                                react_1.default.createElement(react_2.Button, { onClick: function () {
+                                        return handleSort(header.label, header.sort ? header.sort : false);
+                                    }, style: {
                                         textTransform: "capitalize",
                                         color: "white",
                                         background: "none",
+                                        paddingRight: "0px",
                                     } },
                                     header.label,
-                                    sortField === header.label &&
-                                        (sortDirection === "asc" ? (react_1.default.createElement(icons_1.ArrowUpIcon, { w: 15, h: 15 })) : (react_1.default.createElement(icons_1.ArrowDownIcon, { w: 15, h: 15 }))))) : (react_1.default.createElement("span", null, header.label)),
-                                header.search && (react_1.default.createElement(react_2.Popover, { isOpen: activeHeader === header.label && isPopoverOpen, onClose: closePopover, placement: "bottom-start", closeOnBlur: false },
-                                    react_1.default.createElement(react_2.PopoverTrigger, null,
-                                        react_1.default.createElement(icons_1.HamburgerIcon, { w: 15, h: 15, onClick: function () { return handleHeaderClick(header.label); }, style: {
-                                                cursor: "pointer",
-                                                display: hoveredHeaderIndex === index
-                                                    ? "inline"
-                                                    : "none",
-                                            } })),
-                                    react_1.default.createElement(react_2.PopoverContent, { width: 200, zIndex: 3 },
-                                        react_1.default.createElement(react_2.PopoverBody, { background: "#deeefd" }, searchFeatures(header.label))))))));
+                                    react_1.default.createElement("span", { style: { width: "20px" } }, sortField === header.label &&
+                                        (sortDirection === "asc" ? (react_1.default.createElement(icons_1.ArrowUpIcon, { w: 15, h: 15 })) : (react_1.default.createElement(icons_1.ArrowDownIcon, { w: 15, h: 15 }))))),
+                                react_1.default.createElement("div", { style: { display: "inline-block", width: "10px" } },
+                                    react_1.default.createElement(react_2.Popover, { isOpen: activeHeader === header.label &&
+                                            isPopoverOpen &&
+                                            header.search, onClose: closePopover, placement: "bottom-start", closeOnBlur: false },
+                                        react_1.default.createElement(react_2.PopoverTrigger, null,
+                                            react_1.default.createElement("span", null,
+                                                react_1.default.createElement(icons_1.HamburgerIcon, { w: 15, h: 15, onClick: function () {
+                                                        return handleHeaderClick(header.label, header.search ? header.search : false);
+                                                    }, style: {
+                                                        cursor: "pointer",
+                                                        display: hoveredHeaderIndex === index &&
+                                                            header.search
+                                                            ? "inline"
+                                                            : "none",
+                                                    } }))),
+                                        react_1.default.createElement(react_2.PopoverContent, { width: 200, zIndex: 3 },
+                                            react_1.default.createElement(react_2.PopoverBody, { background: "#deeefd" }, searchFeatures(header.label))))))));
                         }))),
-                    react_1.default.createElement(react_3.Tbody, null, filteredData.slice(startRow, endRow).map(function (row, index) { return (react_1.default.createElement(react_3.Tr, { key: index, style: {
+                    react_1.default.createElement(react_3.Tbody, null, filteredData.slice(startRow, endRow).map(function (row, index) { return (react_1.default.createElement(react_3.Tr, { key: index + 1, style: {
                             backgroundColor: index % 2 === 0 ? "#f7f7f7" : "white",
                         }, border: "none" }, headers.map(function (header, headerIndex) {
                         var isFrozen = header.columnFreeze;
                         var leftOffset = calculateLeftOffset(headers, headerIndex);
-                        return (visibleColumns[header.label] && (react_1.default.createElement(react_3.Td, { key: headerIndex, style: {
+                        return (visibleColumns[header.label] && (react_1.default.createElement(react_3.Td, { key: headerIndex + 1, style: {
                                 border: "none",
                                 textAlign: "center",
                                 position: isFrozen ? "sticky" : undefined,
@@ -261,6 +352,8 @@ function Table(_a) {
                                     : undefined,
                                 zIndex: isFrozen ? 1 : 0,
                                 backgroundColor: index % 2 === 0 ? "#f7f7f7" : "white",
+                                // overflow: "hidden",
+                                textOverflow: "ellipsis",
                             } }, typeof header.accessor_function === "function" &&
                             header.accessor_key in row
                             ? header.accessor_function(row[header.accessor_key])

package/dist/Components/Table/TableProps.d.ts

@@ -29,5 +29,5 @@ export type TableHeader = {
 };
 export type ExportOption = {
     label: string;
-    value: string;
+    id: string;
 };

package/dist/Components/Toaster/Toaster.js

@@ -31,7 +31,7 @@ function ToasterProvider(_a) {
     var children = _a.children;
     var toast = (0, react_2.useToast)();
     var showToast = function (_a) {
-        var title = _a.title, description = _a.description, status = _a.status, _b = _a.duration, duration = _b === void 0 ? 5000 : _b, _c = _a.isClosable, isClosable = _c === void 0 ? true : _c, position = _a.position, onClose = _a.onClose;
+        var title = _a.title, description = _a.description, status = _a.status, _b = _a.duration, duration = _b === void 0 ? 5000 : _b, _c = _a.isClosable, isClosable = _c === void 0 ? true : _c, _d = _a.position, position = _d === void 0 ? "top-right" : _d, onClose = _a.onClose;
         toast({
             title: title,
             description: description,

package/dist/Components/ToolTip/ToolTip.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 import { ToolTipProps } from "./ToolTipProps";
-export default function ToolTip({ placement, label, children, hasArrow, fontSize, bg, color, isDisabled, isOpen, defaultIsOpen, openDelay, closeDelay, arrowSize, closeOnClick, size, width, height, arrowPadding, arrowShadowColor, direction, gutter, onClose, modifiers, closeOnPointerDown }: ToolTipProps): React.JSX.Element;
+export default function ToolTip({ placement, label, children, hasArrow, fontSize, bg, color, isDisabled, isOpen, defaultIsOpen, openDelay, closeDelay, arrowSize, closeOnClick, size, width, height, arrowPadding, arrowShadowColor, direction, gutter, onClose, modifiers, closeOnPointerDown, }: ToolTipProps): React.JSX.Element;

package/dist/Layout.js

@@ -147,9 +147,9 @@ var Layout = function () {
     };
     var _e = (0, react_2.useState)("1"), selectedValue = _e[0], setSelectedValue = _e[1];
     var radioOptions = [
-        { label: "Option 1", value: "1" },
-        { label: "Option 2", value: "2" },
-        { label: "Option 3", value: "3" },
+        { label: "Option 1", id: "1" },
+        { label: "Option 2", id: "2" },
+        { label: "Option 3", id: "3" },
     ];
     var handleChange = function (value) {
         setSelectedValue(value);
@@ -170,16 +170,15 @@ var Layout = function () {
         {
             label: "name",
             accessor_key: "name",
-            sort: false,
+            sort: true,
             search: false,
-            columnFreeze: true,
+            columnFreeze: false,
         },
         {
             label: "email",
             accessor_key: "email",
             sort: true,
             search: true,
-            columnFreeze: true,
         },
         {
             label: "role",
@@ -190,7 +189,7 @@ var Layout = function () {
                 return react_2.default.createElement("div", { onClick: function () { return console.log("hello"); } }, value.toUpperCase());
             },
         },
-        { label: "age", accessor_key: "age", sort: true, search: true },
+        { label: "age", accessor_key: "age", sort: false, search: true },
         { label: "age1", accessor_key: "age1", sort: true, search: true },
         { label: "age2", accessor_key: "age2", sort: true, search: true },
         { label: "age3", accessor_key: "age3", sort: true, search: true },
@@ -202,7 +201,7 @@ var Layout = function () {
         { label: "age9", accessor_key: "age9", sort: true, search: true },
         { label: "age10", accessor_key: "age10", sort: true, search: true },
     ];
-    var tableData = Array.from({ length: 20 }, function (_, i) { return ({
+    var tableData = Array.from({ length: 9 }, function (_, i) { return ({
         id: i + 1,
         name: "User ".concat(i + 1),
         email: "user".concat(i + 1, "@example.com"),
@@ -238,10 +237,9 @@ var Layout = function () {
         return windowSize;
     }
     var _g = useWindowSize(), width = _g.width, height = _g.height;
-    // console.log(width, height);
     var exportOptions = [
-        { value: "PDF", label: "Export as PDF" },
-        { value: "XLS", label: "Export as XLS" },
+        { id: "PDF", label: "Export as PDF" },
+        { id: "XLS", label: "Export as XLS" },
     ];
     var data = Array.from({ length: 10 }, function () {
         return Math.floor(Math.random() * 100);
@@ -277,7 +275,7 @@ var Layout = function () {
                             console.log(e.target.files);
                         } }),
                     react_2.default.createElement("br", null),
-                    react_2.default.createElement(Button_1.default, { label: "Tosterbutton", onClick: handleOnclick, width: 250, variant: "solid", color: "blue" }),
+                    react_2.default.createElement(Button_1.default, { label: "Tosterbuttonjhgbjhbjhbjhbjhbjhbjhbjhbkjhbkjbkjbkjbkjbkjbkjbkjbkjbkjbkjn", onClick: handleOnclick, variant: "solid", color: "blue", size: "md", width: 500 }),
                     react_2.default.createElement("br", null),
                     react_2.default.createElement("br", null),
                     react_2.default.createElement(Checkbox_1.default, { label: "hello world" }),
@@ -285,7 +283,7 @@ var Layout = function () {
                     react_2.default.createElement("br", null),
                     react_2.default.createElement(Button_1.default, { label: "ModelButton", onClick: handleOnclick2, width: 250, variant: "solid", color: "blue" }),
                     react_2.default.createElement("br", null),
-                    react_2.default.createElement(Modal_1.default, { isOpen: isOpen, onClose: function () { return setIsOpen(false); }, overlaybg: "blackAlpha.300", overlaybackdropFilter: "blur(10px) hue-rotate(90deg)", size: "sm", isCentered: true }, "helldddddlo"),
+                    react_2.default.createElement(Modal_1.default, { isOpen: isOpen, onClose: function () { return setIsOpen(false); }, overlaybg: "blackAlpha.300", overlaybackdropFilter: "blur(10px) hue-rotate(90deg)", size: "sm", isCentered: true }, "helldddddlokdfjsvhbsdflijvbsdfpijvbdfpsivb pdfisjbnvpdfjibnvpidfjbnvpidfjnbvpdfijnvpdifjnvpijdfbnvijdfnvpijdfbovu hbdsouhv bdsohu vbsdhv bskhj bsdkh"),
                     react_2.default.createElement("br", null),
                     react_2.default.createElement(Select_1.default, { options: [
                             { id: 1, label: "mages" },
@@ -333,7 +331,7 @@ var Layout = function () {
                         // }}
                         exportOptions: exportOptions, handleExportChange: function (value) {
                             console.log("click label", value);
-                        }, isLoading: true, loadingContaxt: react_2.default.createElement(react_1.Stack, { spacing: 4 },
+                        }, isLoading: false, loadingContaxt: react_2.default.createElement(react_1.Stack, { spacing: 4 },
                             react_2.default.createElement(react_1.Stack, { direction: "row", justifyContent: "space-between", paddingX: "4", paddingY: "2" },
                                 react_2.default.createElement(react_1.Skeleton, { height: "20px", width: "10%" }),
                                 react_2.default.createElement(react_1.Skeleton, { height: "20px", width: "20%" }),

package/dist/Theme/Default/theme.js

@@ -283,7 +283,14 @@ var theme = (0, react_1.extendTheme)({
         cssVarPrefix: 'ck',
     },
     components: {
-    // Component style overrides go here
+        Select: {
+            baseStyle: {
+                field: {
+                    background: "#3182ce",
+                    color: "white",
+                },
+            },
+        },
     },
 });
 exports.default = theme;

package/dist/index.d.ts

@@ -19,6 +19,6 @@ import Select from "./Components/Select/Select";
 import SideBar from "./Components/SideBar/SideBar";
 import Skeletons from "./Components/Skeletons/Skeletons";
 import Table from "./Components/Table/Table";
-import Toaster from "./Components/Toaster/Toaster";
+import Toaster, { useToaster } from "./Components/Toaster/Toaster";
 import ToolTip from "./Components/ToolTip/ToolTip";
-export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, Checkbox, ButtonGroupIcon, TextInput, InputTextArea, Loading, Modal, NavigationBar, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Select, SideBar, Skeletons, Table, Toaster, ToolTip };
+export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, Checkbox, ButtonGroupIcon, TextInput, InputTextArea, Loading, Modal, NavigationBar, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Select, SideBar, Skeletons, Table, Toaster, ToolTip, useToaster, };

package/dist/index.js

@@ -1,9 +1,32 @@
 "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.ToolTip = exports.Toaster = exports.Table = exports.Skeletons = exports.SideBar = exports.Select = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.TextInput = exports.ButtonGroupIcon = exports.Checkbox = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
+exports.useToaster = exports.ToolTip = exports.Toaster = exports.Table = exports.Skeletons = exports.SideBar = exports.Select = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.TextInput = exports.ButtonGroupIcon = exports.Checkbox = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
 var ApexBarChart_1 = __importDefault(require("./Components/Apexcharts/ApexBarChart/ApexBarChart"));
 exports.ApexBarChart = ApexBarChart_1.default;
 var ApexPieChart_1 = __importDefault(require("./Components/Apexcharts/ApexPieChart/ApexPieChart"));
@@ -47,7 +70,8 @@ var Skeletons_1 = __importDefault(require("./Components/Skeletons/Skeletons"));
 exports.Skeletons = Skeletons_1.default;
 var Table_1 = __importDefault(require("./Components/Table/Table"));
 exports.Table = Table_1.default;
-var Toaster_1 = __importDefault(require("./Components/Toaster/Toaster"));
+var Toaster_1 = __importStar(require("./Components/Toaster/Toaster"));
 exports.Toaster = Toaster_1.default;
+Object.defineProperty(exports, "useToaster", { enumerable: true, get: function () { return Toaster_1.useToaster; } });
 var ToolTip_1 = __importDefault(require("./Components/ToolTip/ToolTip"));
 exports.ToolTip = ToolTip_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

package/webpack.config.js

@@ -1,48 +1,48 @@
-const path = require('path');
-
+/* eslint-disable */
+const path = require("path");
 module.exports = {
-    // Entry point of your application
-    entry: './src/index.ts',
-    // Development mode for better debugging
-    mode: 'development',
-    module: {
-        rules: [
-            // TypeScript loader
-            {
-                test: /\.tsx?$/,
-                use: 'ts-loader',
-                exclude: /node_modules/,
-            },
-            // CSS loader
-            {
-                test: /\.css$/,
-                use: ['style-loader', 'css-loader'],
-            },
-            // File loader for image assets
-            {
-                test: /\.(png|svg|jpg|jpeg|gif)$/i,
-                type: 'asset/resource',
-            },
-        ],
+  // Entry point of your application
+  entry: "./src/index.ts",
+  // Development mode for better debugging
+  mode: "development",
+  module: {
+    rules: [
+      // TypeScript loader
+      {
+        test: /\.tsx?$/,
+        use: "ts-loader",
+        exclude: /node_modules/,
+      },
+      // CSS loader
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+      // File loader for image assets
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: "asset/resource",
+      },
+    ],
+  },
+  resolve: {
+    // Add `.ts` and `.tsx` as resolvable extensions.
+    extensions: [".tsx", ".ts", ".js"],
+  },
+  output: {
+    // Output directory
+    path: path.resolve(__dirname, "dist"),
+    // Output file name
+    filename: "bundle.js",
+  },
+  // Source maps for debugging
+  devtool: "inline-source-map",
+  // Dev server configuration
+  devServer: {
+    static: {
+      directory: path.join(__dirname, "public"),
     },
-    resolve: {
-        // Add `.ts` and `.tsx` as resolvable extensions.
-        extensions: ['.tsx', '.ts', '.js'],
-    },
-    output: {
-        // Output directory
-        path: path.resolve(__dirname, 'dist'),
-        // Output file name
-        filename: 'bundle.js',
-    },
-    // Source maps for debugging
-    devtool: 'inline-source-map',
-    // Dev server configuration
-    devServer: {
-        static: {
-            directory: path.join(__dirname, 'public'),
-        },
-        compress: true,
-        port: 9000,
-    },
-};
+    compress: true,
+    port: 9000,
+  },
+};