pixelize-design-library 1.0.30 → 1.0.32

package/README.md

@@ -29,6 +29,7 @@ PixelizeDesign Library Components Are Below
 - Breadcrumbs,
 - Button,
 - Checkbox,
+- Card,
 - ButtonGroupIcon,
 - TextInput,
 - InputTextArea,
@@ -47,5 +48,8 @@ PixelizeDesign Library Components Are Below
 - Skeletons,
 - Table,
 - Toaster,
-  - - useToaster,
+  - useToaster,
 - ToolTip,
+- Switch,
+- NoteTextArea,
+- Dropdown,

package/dist/@mf-types.d.ts

@@ -0,0 +1,3 @@
+
+    export type RemoteKeys = 'REMOTE_ALIAS_IDENTIFIER/Version' | 'REMOTE_ALIAS_IDENTIFIER/TextInput' | 'REMOTE_ALIAS_IDENTIFIER/InputTextArea' | 'REMOTE_ALIAS_IDENTIFIER/Select' | 'REMOTE_ALIAS_IDENTIFIER/Checkbox' | 'REMOTE_ALIAS_IDENTIFIER/Button' | 'REMOTE_ALIAS_IDENTIFIER/Toaster' | 'REMOTE_ALIAS_IDENTIFIER/Modal' | 'REMOTE_ALIAS_IDENTIFIER/theme' | 'REMOTE_ALIAS_IDENTIFIER/Sidebar' | 'REMOTE_ALIAS_IDENTIFIER/Navbar' | 'REMOTE_ALIAS_IDENTIFIER/Loading' | 'REMOTE_ALIAS_IDENTIFIER/Skeletons' | 'REMOTE_ALIAS_IDENTIFIER/RadioButton' | 'REMOTE_ALIAS_IDENTIFIER/ButtonGroupIcon' | 'REMOTE_ALIAS_IDENTIFIER/ProgressBar' | 'REMOTE_ALIAS_IDENTIFIER/NumberInput' | 'REMOTE_ALIAS_IDENTIFIER/PinInput' | 'REMOTE_ALIAS_IDENTIFIER/ProfileCard' | 'REMOTE_ALIAS_IDENTIFIER/Breadcrumb' | 'REMOTE_ALIAS_IDENTIFIER/TableComponent' | 'REMOTE_ALIAS_IDENTIFIER/Tooltip' | 'REMOTE_ALIAS_IDENTIFIER/ApexBarChart' | 'REMOTE_ALIAS_IDENTIFIER/ApexPieChart' | 'REMOTE_ALIAS_IDENTIFIER/ProfilePhotoViewer';
+    type PackageType<T> = T extends 'REMOTE_ALIAS_IDENTIFIER/ProfilePhotoViewer' ? typeof import('REMOTE_ALIAS_IDENTIFIER/ProfilePhotoViewer') :T extends 'REMOTE_ALIAS_IDENTIFIER/ApexPieChart' ? typeof import('REMOTE_ALIAS_IDENTIFIER/ApexPieChart') :T extends 'REMOTE_ALIAS_IDENTIFIER/ApexBarChart' ? typeof import('REMOTE_ALIAS_IDENTIFIER/ApexBarChart') :T extends 'REMOTE_ALIAS_IDENTIFIER/Tooltip' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Tooltip') :T extends 'REMOTE_ALIAS_IDENTIFIER/TableComponent' ? typeof import('REMOTE_ALIAS_IDENTIFIER/TableComponent') :T extends 'REMOTE_ALIAS_IDENTIFIER/Breadcrumb' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Breadcrumb') :T extends 'REMOTE_ALIAS_IDENTIFIER/ProfileCard' ? typeof import('REMOTE_ALIAS_IDENTIFIER/ProfileCard') :T extends 'REMOTE_ALIAS_IDENTIFIER/PinInput' ? typeof import('REMOTE_ALIAS_IDENTIFIER/PinInput') :T extends 'REMOTE_ALIAS_IDENTIFIER/NumberInput' ? typeof import('REMOTE_ALIAS_IDENTIFIER/NumberInput') :T extends 'REMOTE_ALIAS_IDENTIFIER/ProgressBar' ? typeof import('REMOTE_ALIAS_IDENTIFIER/ProgressBar') :T extends 'REMOTE_ALIAS_IDENTIFIER/ButtonGroupIcon' ? typeof import('REMOTE_ALIAS_IDENTIFIER/ButtonGroupIcon') :T extends 'REMOTE_ALIAS_IDENTIFIER/RadioButton' ? typeof import('REMOTE_ALIAS_IDENTIFIER/RadioButton') :T extends 'REMOTE_ALIAS_IDENTIFIER/Skeletons' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Skeletons') :T extends 'REMOTE_ALIAS_IDENTIFIER/Loading' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Loading') :T extends 'REMOTE_ALIAS_IDENTIFIER/Navbar' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Navbar') :T extends 'REMOTE_ALIAS_IDENTIFIER/Sidebar' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Sidebar') :T extends 'REMOTE_ALIAS_IDENTIFIER/theme' ? typeof import('REMOTE_ALIAS_IDENTIFIER/theme') :T extends 'REMOTE_ALIAS_IDENTIFIER/Modal' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Modal') :T extends 'REMOTE_ALIAS_IDENTIFIER/Toaster' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Toaster') :T extends 'REMOTE_ALIAS_IDENTIFIER/Button' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Button') :T extends 'REMOTE_ALIAS_IDENTIFIER/Checkbox' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Checkbox') :T extends 'REMOTE_ALIAS_IDENTIFIER/Select' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Select') :T extends 'REMOTE_ALIAS_IDENTIFIER/InputTextArea' ? typeof import('REMOTE_ALIAS_IDENTIFIER/InputTextArea') :T extends 'REMOTE_ALIAS_IDENTIFIER/TextInput' ? typeof import('REMOTE_ALIAS_IDENTIFIER/TextInput') :T extends 'REMOTE_ALIAS_IDENTIFIER/Version' ? typeof import('REMOTE_ALIAS_IDENTIFIER/Version') :any;

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.d.ts

@@ -1,4 +1 @@
-import { ApexBarChartProps } from './ApexBarChartProps';
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/dist/types-a5624094").R, import("@storybook/csf").Args>;
-export default _default;
-export declare const Primary: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, ApexBarChartProps>;
+export {};

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.js

@@ -1,50 +1,6 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import ApexBarChart from './ApexBarChart';
+// import { ApexBarChartProps } from './ApexBarChartProps';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Primary = void 0;
-var react_1 = __importDefault(require("react"));
-var ApexBarChart_1 = __importDefault(require("./ApexBarChart"));
-exports.default = {
-    title: 'Components/ApexCharts/ApexBarChart',
-    component: ApexBarChart_1.default,
-    argTypes: {
-        backgroundColor: { control: 'color' },
-    },
-};
-var Template = function (args) { return react_1.default.createElement(ApexBarChart_1.default, __assign({}, args)); };
-exports.Primary = Template.bind({});
-exports.Primary.args = {
-    data: [44, 55, 41, 64, 22, 43, 21],
-    Labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    title: 'Weekly Sales',
-    titlePosition: 'left',
-    height: 400,
-    width: 500,
-    barColor: ['#3182ce'],
-    xAxisStyle: {
-        color: '#ffffff',
-    },
-    yAxisStyle: {
-        color: '#ffffff',
-    },
-    titleStyle: {
-        color: '#3182ce',
-        fontSize: '16px',
-        fontWeight: 600,
-        fontFamily: 'Arial',
-    },
-};
-// You can add more variations of the component by adding more exports like the Primary example.

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

@@ -1,4 +1 @@
-import { ApexPieChartProps } from './ApexPieChartProps';
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/dist/types-a5624094").R, import("@storybook/csf").Args>;
-export default _default;
-export declare const Primary: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, ApexPieChartProps>;
+export {};

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.stories.js

@@ -1,44 +1,6 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import ApexPieChart from './ApexPieChart';
+// import { ApexPieChartProps } from './ApexPieChartProps';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Primary = void 0;
-var react_1 = __importDefault(require("react"));
-var ApexPieChart_1 = __importDefault(require("./ApexPieChart"));
-exports.default = {
-    title: 'Components/ApexCharts/ApexPieChart',
-    component: ApexPieChart_1.default,
-    argTypes: {
-        backgroundColor: { control: 'color' },
-    },
-};
-var Template = function (args) { return react_1.default.createElement(ApexPieChart_1.default, __assign({}, args)); };
-exports.Primary = Template.bind({});
-exports.Primary.args = {
-    data: [44, 55, 41, 64, 22, 43, 21],
-    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    title: 'Weekly Sales',
-    titlePosition: 'left',
-    height: 400,
-    width: 500,
-    chartColor: ['#3182ce', '#ff6384', '#36a2eb', '#cc65fe', '#ffce56', '#ff6384', '#36a2eb'],
-    titleStyle: {
-        color: '#3182ce',
-        fontSize: '16px',
-        fontWeight: 600,
-        fontFamily: 'Arial',
-    },
-};
-// You can add more variations of the component by adding more exports like the Primary example.

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

@@ -1,4 +1 @@
-import { BreadcrumbsProps } from './BreadcrumbsProps';
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/dist/types-a5624094").R, import("@storybook/csf").Args>;
-export default _default;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, BreadcrumbsProps>;
+export {};

package/dist/Components/Breadcrumbs/Breadcrumbs.stories.js

@@ -1,38 +1,6 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react/types-6-0';
+// import Breadcrumbs from './Breadcrumbs';
+// import { BreadcrumbsProps } from './BreadcrumbsProps';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
-var react_1 = __importDefault(require("react"));
-var Breadcrumbs_1 = __importDefault(require("./Breadcrumbs"));
-exports.default = {
-    title: 'Components/Breadcrumbs/Breadcrumb',
-    component: Breadcrumbs_1.default,
-};
-var Template = function (args) { return react_1.default.createElement(Breadcrumbs_1.default, __assign({}, args)); };
-exports.Default = Template.bind({});
-exports.Default.args = {
-    spacing: "8px",
-    separator: "/",
-    fontWeight: "normal",
-    fontSize: "1rem",
-    isCurrentPage: true,
-    handleClick: function (path) { return console.log("Clicked: ".concat(path)); },
-    items: [
-        { path: '/home', label: 'Home' },
-        { path: '/about', label: 'About' },
-        { path: '/contact', label: 'Contact' },
-    ],
-};

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

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

package/dist/Components/Button/Button.stories.js

@@ -1,31 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+// import React from 'react';
+// import { Meta, StoryObj } from '@storybook/react';
+// import Button from './Button';
+// import { fn } from '@storybook/test';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Primary = void 0;
-var Button_1 = __importDefault(require("./Button"));
-var test_1 = require("@storybook/test");
-var meta = {
-    title: 'Components/Button/Button',
-    component: Button_1.default,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs']
-};
-exports.default = meta;
-exports.Primary = {
-    args: {
-        label: 'Button',
-        width: '',
-        color: 'blue',
-        variant: 'solid',
-        size: 'md',
-        isDisabled: false,
-        isLoading: false,
-        loadingText: 'Loading',
-        type: 'button',
-        onClick: (0, test_1.fn)()
-    },
-};

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

@@ -1,4 +1 @@
-import { ButtonGroupIconProps } from './ButtonGoupIconProps';
-declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react/dist/types-a5624094").R, import("@storybook/csf").Args>;
-export default _default;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react/dist/types-a5624094").R, ButtonGroupIconProps>;
+export {};

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

@@ -1,49 +1,7 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+// 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';
+// import { FiHome } from 'react-icons/fi';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
-var react_1 = __importDefault(require("react"));
-var ButtonGroupIcon_1 = __importDefault(require("./ButtonGroupIcon")); // Adjust the import path and component type if needed
-var fi_1 = require("react-icons/fi");
-exports.default = {
-    title: 'Components/ButtonGroupIcon/ButtonGroupIcon',
-    component: ButtonGroupIcon_1.default,
-    argTypes: {
-        size: { control: { type: 'select', options: ['sm', 'md', 'lg'] } },
-        variant: {
-            control: { type: 'select', options: ["solid", "outline", "ghost", "link"] },
-            defaultValue: 'solid'
-        },
-        color: {
-            control: { type: 'select', options: ["gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "whiteAlpha", "blackAlpha"] },
-            defaultValue: 'blue'
-        },
-    },
-};
-var Template = function (args) { return react_1.default.createElement(ButtonGroupIcon_1.default, __assign({}, args)); };
-exports.Default = Template.bind({});
-exports.Default.args = {
-    leftIcon: react_1.default.createElement(fi_1.FiHome, null),
-    rightIcon: react_1.default.createElement(fi_1.FiHome, null),
-    onLeftIconClick: function () { return console.log('Left icon clicked'); },
-    onRightIconClick: function () { return console.log('Right icon clicked'); },
-    buttonText: 'Button Text',
-    onButtonClick: function () { return console.log('Button clicked'); },
-    onButtongroupClick: function () { return console.log('Button group clicked'); },
-    size: 'md',
-    variant: 'solid',
-    color: 'blue',
-};

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, }: 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;
+    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, mr: 10 }, 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"> & {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+    variant?: "elevated" | "outlein" | "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.stories.d.ts

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

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

@@ -1,77 +1,7 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __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 };
-};
+// 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 });
-exports.Check_box = void 0;
-var react_1 = __importStar(require("react"));
-var Checkbox_1 = __importDefault(require("./Checkbox"));
-var test_1 = require("@storybook/test");
-var meta = {
-    title: 'Components/CheckBox/CheckBox',
-    component: Checkbox_1.default,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs']
-};
-exports.default = meta;
-var CheckBoxTemplate = function (args) {
-    var _a = (0, react_1.useState)(true), check = _a[0], setCheck = _a[1];
-    var handleCheck = function (e) {
-        setCheck(!check);
-    };
-    return react_1.default.createElement(Checkbox_1.default, __assign({}, args, { onChange: handleCheck, isChecked: check }));
-};
-exports.Check_box = {
-    args: {
-        label: 'Checkbox',
-        spacing: 6,
-        isInvalid: false,
-        color: 'blue',
-        iconColor: 'white',
-        iconSize: '1em',
-        isChecked: true,
-        isIndeterminate: false,
-        isDisabled: false,
-        size: 'md',
-        value: 'checkbox',
-        defaultChecked: false,
-        onChange: (0, test_1.fn)()
-    },
-    render: function (args) { return CheckBoxTemplate(args); }
-};

package/dist/Components/Dropdown/DropDown.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DropdownProps } from "./DropdownProps";
+declare const Dropdown: ({ ButtonText, options, handleOptionSelect, }: DropdownProps) => React.JSX.Element;
+export default Dropdown;

package/dist/Components/Dropdown/DropDown.js

@@ -0,0 +1,73 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 });
+var react_1 = __importStar(require("react"));
+var react_2 = require("react");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var fi_1 = require("react-icons/fi");
+var DropdownContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n"], ["\n  position: relative;\n  display: inline-block;\n"])));
+var DropdownButton = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background-color: #d5eaff;\n  color: #338cf0;\n  padding: 0.3rem 1rem;\n  border: none;\n  cursor: pointer;\n  border: 1px solid #56a4ee;\n  width: 100%;\n  &:hover {\n    background-color: #c9dff8;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background-color: #d5eaff;\n  color: #338cf0;\n  padding: 0.3rem 1rem;\n  border: none;\n  cursor: pointer;\n  border: 1px solid #56a4ee;\n  width: 100%;\n  &:hover {\n    background-color: #c9dff8;\n  }\n"])));
+var DropdownContent = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: none;\n  position: absolute;\n  background-color: #f9f9f9;\n  min-width: 160px;\n  width: fit-content;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 1;\n  &.show {\n    display: block;\n  }\n"], ["\n  display: none;\n  position: absolute;\n  background-color: #f9f9f9;\n  min-width: 160px;\n  width: fit-content;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 1;\n  &.show {\n    display: block;\n  }\n"])));
+var ListItem = styled_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: black;\n  padding: 5px 10px;\n  text-decoration: none;\n  display: block;\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  align-items: center;\n  &:hover {\n    background-color: #f1f1f1;\n  }\n"], ["\n  color: black;\n  padding: 5px 10px;\n  text-decoration: none;\n  display: block;\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  align-items: center;\n  &:hover {\n    background-color: #f1f1f1;\n  }\n"])));
+var ImageContainer = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: 0.5rem;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-left: 0.5rem;\n"])));
+var Dropdown = function (_a) {
+    var ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect;
+    var _b = (0, react_2.useState)(false), isVisible = _b[0], setIsVisible = _b[1];
+    var toggleDropdown = function () { return setIsVisible(!isVisible); };
+    var dropdownRef = (0, react_1.useRef)(null);
+    var handleListItemClick = function (optionId) {
+        setIsVisible(false);
+        handleOptionSelect(optionId);
+    };
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsVisible(false); // Step 4
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside); // Step 5
+        };
+    }, [dropdownRef]);
+    return (react_1.default.createElement(DropdownContainer, { ref: dropdownRef },
+        react_1.default.createElement(DropdownButton, { onClick: toggleDropdown },
+            ButtonText,
+            react_1.default.createElement(ImageContainer, null, isVisible ? react_1.default.createElement(fi_1.FiChevronUp, null) : react_1.default.createElement(fi_1.FiChevronDown, null))),
+        react_1.default.createElement(DropdownContent, { className: isVisible ? "show" : "" },
+            react_1.default.createElement("ul", null, options.map(function (option) { return (react_1.default.createElement(ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id); } },
+                option.image && (react_1.default.createElement(ImageContainer, { style: { marginRight: "4px", marginLeft: "0px" } }, option.image)),
+                option.label)); })))));
+};
+exports.default = Dropdown;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/Components/Dropdown/DropdownProps.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export type DropdownProps = {
+    ButtonText: string;
+    options: Option[];
+    handleOptionSelect: (id: string | number) => void;
+};
+type Option = {
+    id: string | number;
+    label: string;
+    image?: JSX.Element;
+};
+export {};

package/dist/Components/Dropdown/DropdownProps.js

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

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

@@ -1,5 +1,3 @@
 import { TextInputProps } from "./TextInputProps";
 import React from "react";
-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;
+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;

package/dist/Components/Input/TextInput.js

@@ -15,4 +15,5 @@ function TextInput(_a) {
         error && react_2.default.createElement(react_1.FormErrorMessage, { pl: 4 }, errorMessage),
         helperText && !error && (react_2.default.createElement(react_1.FormHelperText, { pl: 4 }, helperText))));
 }
-exports.default = react_2.default.memo(TextInput);
+exports.default = TextInput;
+// export default React.memo(TextInput);

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

@@ -1,6 +1 @@
-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>;
-export declare const Primary: Story;
+export {};

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

@@ -1,55 +1,8 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+// import React from "react";
+// import type { Meta, StoryObj } from "@storybook/react";
+// import { fn } from "@storybook/test";
+// import { TextInputProps } from "./TextInputProps";
+// import TextInput from "./TextInput";
+// import { useState } from "react";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Primary = void 0;
-var react_1 = __importDefault(require("react"));
-var test_1 = require("@storybook/test");
-var TextInput_1 = __importDefault(require("./TextInput"));
-var react_2 = require("react");
-var meta = {
-    title: "Components/Input/TextInput",
-    component: TextInput_1.default,
-    parameters: {
-        layout: "centered",
-    },
-    tags: ["autodocs"],
-};
-exports.default = meta;
-var TextInputTemplate = function (args) {
-    var _a = (0, react_2.useState)(""), value = _a[0], setValue = _a[1];
-    var handleChange = function (e) {
-        setValue(e.target.value);
-    };
-    return react_1.default.createElement(TextInput_1.default, __assign({}, args, { onChange: handleChange, value: value }));
-};
-exports.Primary = {
-    args: {
-        label: "Button",
-        onChange: (0, test_1.fn)(),
-        onBlur: (0, test_1.fn)(),
-        onFocus: (0, test_1.fn)(),
-        isDisabled: false,
-        isReadOnly: false,
-        isRequired: false,
-        value: "",
-        placeholder: "Placeholder",
-        width: 500,
-        error: true,
-        errorMessage: "jhkjhkjh",
-        helperText: "",
-    },
-    render: function (args) { return TextInputTemplate(args); },
-};