pixelize-design-library 2.1.18 → 2.1.20

package/dist/Components/Search/Search.js

@@ -1,66 +0,0 @@
-"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 styled_1 = __importDefault(require("@emotion/styled"));
-var lucide_react_1 = require("lucide-react");
-var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  padding: 0.5rem 0.7rem 0.5rem 0.7rem;\n  width: 100%;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  border-radius: 20px;\n  background: #fff;\n  border: 1px solid #f1f1f1;\n"], ["\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  padding: 0.5rem 0.7rem 0.5rem 0.7rem;\n  width: 100%;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  border-radius: 20px;\n  background: #fff;\n  border: 1px solid #f1f1f1;\n"])));
-var Input = styled_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  border: none;\n  outline: none;\n  margin-left: 0.5rem;\n  background: transparent;\n"], ["\n  flex: 1;\n  border: none;\n  outline: none;\n  margin-left: 0.5rem;\n  background: transparent;\n"])));
-var SearchIcon = (0, styled_1.default)(lucide_react_1.Search)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: #888;\n"], ["\n  color: #888;\n"])));
-var CloseIcon = (0, styled_1.default)(lucide_react_1.X)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: #888;\n  font-size: 1.5rem;\n"], ["\n  color: #888;\n  font-size: 1.5rem;\n"])));
-var Shortcut = styled_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: auto;\n  padding-left: 0.5rem;\n  color: #888;\n  font-size: 0.9rem;\n"], ["\n  margin-left: auto;\n  padding-left: 0.5rem;\n  color: #888;\n  font-size: 0.9rem;\n"])));
-function Search(_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? "Search..." : _b, onSearch = _a.onSearch, onclose = _a.onclose, _c = _a.shortcut, shortcut = _c === void 0 ? "Ctrl+K" : _c, query = _a.query;
-    var inputRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
-        var handleKeyDown = function (event) {
-            var _a;
-            if (shortcut &&
-                event.ctrlKey &&
-                event.key === shortcut.split("+")[1].toLowerCase()) {
-                event.preventDefault();
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        return function () {
-            window.removeEventListener("keydown", handleKeyDown);
-        };
-    }, [shortcut]);
-    return (react_1.default.createElement(Container, null,
-        react_1.default.createElement(SearchIcon, null),
-        react_1.default.createElement(Input, { ref: inputRef, type: "text", value: query, onChange: onSearch, placeholder: placeholder }),
-        query && react_1.default.createElement(CloseIcon, { onClick: onclose }),
-        shortcut && react_1.default.createElement(Shortcut, null, shortcut)));
-}
-exports.default = Search;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/Components/Search/SearchProps.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export type SearchProps = {
-    placeholder?: string;
-    onSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    shortcut?: "Ctrl+K";
-    query?: string;
-    onclose: () => void;
-};

package/dist/Components/Search/SearchProps.js

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

package/dist/Components/SearchSelect/SearchSelect.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { SearchSelectProps } from './SearchSelectProps';
-declare const SearchSelect: ({ id, label, options, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, height, size, chip, information, rightIcon, addNew, isSelectAll, pagination, insideSelect, isRemoveAllIcon }: SearchSelectProps) => React.JSX.Element;
-export default SearchSelect;

package/dist/Components/SearchSelect/SearchSelect.js

@@ -1,237 +0,0 @@
-"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-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("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
-var FormLabel_1 = require("../Common/FormLabel");
-var Tag_1 = __importDefault(require("../Tag/Tag"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-var HelperText_1 = __importDefault(require("../Common/HelperText"));
-var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-var SelectTruncatedLabel_1 = __importDefault(require("./SelectTruncatedLabel"));
-var normalizeSingleValue = function (val) {
-    if (typeof val === 'object' && val !== null && 'id' in val && 'label' in val) {
-        return val;
-    }
-    return undefined;
-};
-var normalizeMultiValue = function (val) {
-    if (Array.isArray(val)) {
-        return val.filter(function (v) { return v && typeof v === 'object' && 'id' in v && 'label' in v; });
-    }
-    return [];
-};
-var SearchSelect = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _g = _a.isOptionLoading, isOptionLoading = _g === void 0 ? false : _g, _h = _a.isLoading, isLoading = _h === void 0 ? false : _h, _j = _a.loadingText, loadingText = _j === void 0 ? 'Loading...' : _j, _k = _a.placeholder, placeholder = _k === void 0 ? 'Select' : _k, value = _a.value, _l = _a.searchQuery, searchQuery = _l === void 0 ? '' : _l, _m = _a.isMultiple, isMultiple = _m === void 0 ? false : _m, _o = _a.isRequired, isRequired = _o === void 0 ? false : _o, _p = _a.error, error = _p === void 0 ? false : _p, errorMessage = _a.errorMessage, helperText = _a.helperText, _q = _a.width, width = _q === void 0 ? '100%' : _q, _r = _a.height, height = _r === void 0 ? "2.75rem" : _r, _s = _a.size, size = _s === void 0 ? 'md' : _s, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _t = _a.isSelectAll, isSelectAll = _t === void 0 ? false : _t, pagination = _a.pagination, insideSelect = _a.insideSelect, isRemoveAllIcon = _a.isRemoveAllIcon;
-    var _u = (0, react_1.useState)(searchQuery), inputValue = _u[0], setInputValue = _u[1];
-    var _v = (0, react_1.useState)(false), isOpen = _v[0], setIsOpen = _v[1];
-    var _w = (0, react_1.useState)(true), hasMore = _w[0], setHasMore = _w[1];
-    var inputRef = (0, react_1.useRef)(null);
-    var containerRef = (0, react_1.useRef)(null);
-    var scrollTimeoutRef = (0, react_1.useRef)(null);
-    var _x = (0, react_1.useState)(false), focused = _x[0], setFocused = _x[1];
-    var _y = (0, react_1.useState)(false), customSelectOpen = _y[0], setCustomSelectOpen = _y[1];
-    var customSelectRef = (0, react_1.useRef)(null);
-    var _z = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), customSelectPos = _z[0], setCustomSelectPos = _z[1];
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    (0, react_2.useOutsideClick)({
-        ref: containerRef,
-        handler: function () {
-            setIsOpen(false);
-        },
-    });
-    var selectedValues = isMultiple
-        ? normalizeMultiValue(value)
-        : normalizeSingleValue(value)
-            ? [normalizeSingleValue(value)]
-            : [];
-    var filteredOptions = options.filter(function (option) { var _a, _b; return (_b = (_a = option === null || option === void 0 ? void 0 : option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()); });
-    (0, react_1.useEffect)(function () {
-        var delayDebounce = setTimeout(function () {
-            onSearch === null || onSearch === void 0 ? void 0 : onSearch(inputValue);
-        }, 1000);
-        return function () { return clearTimeout(delayDebounce); };
-    }, [inputValue, onSearch]);
-    (0, react_1.useEffect)(function () {
-        if (pagination === null || pagination === void 0 ? void 0 : pagination.limit) {
-            setHasMore(options.length % pagination.limit === 0);
-        }
-    }, [options.length, pagination === null || pagination === void 0 ? void 0 : pagination.limit]);
-    var handleSelect = function (option) {
-        if (isMultiple) {
-            var exists = selectedValues.find(function (v) { return v.id === option.id; });
-            var updated = exists
-                ? selectedValues.filter(function (v) { return v.id !== option.id; })
-                : __spreadArray(__spreadArray([], selectedValues, true), [option], false);
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
-        }
-        else {
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
-            setIsOpen(false);
-        }
-        setInputValue('');
-    };
-    var handleRemove = function (id) {
-        var updated = selectedValues.filter(function (v) { return v.id !== id; });
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
-    };
-    var handleClearAll = function () {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(isMultiple ? [] : undefined);
-        setInputValue('');
-    };
-    var handleSelectAll = function () {
-        var allSelected = filteredOptions.every(function (opt) {
-            return selectedValues.some(function (sel) { return sel.id === opt.id; });
-        });
-        if (allSelected) {
-            var updated = selectedValues.filter(function (sel) { return !filteredOptions.some(function (opt) { return opt.id === sel.id; }); });
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
-        }
-        else {
-            var filteredNotSelected = filteredOptions.filter(function (opt) { return !selectedValues.some(function (sel) { return sel.id === opt.id; }); });
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(__spreadArray(__spreadArray([], selectedValues, true), filteredNotSelected, true));
-        }
-        setInputValue('');
-    };
-    var isSelected = function (id) {
-        return selectedValues.some(function (v) { return v.id === id; });
-    };
-    var isValidIcon = function (icon) {
-        return react_1.default.isValidElement(icon);
-    };
-    var allFilteredSelected = filteredOptions.length > 0 &&
-        filteredOptions.every(function (opt) {
-            return selectedValues.some(function (sel) { return sel.id === opt.id; });
-        });
-    var handleScroll = (0, react_1.useCallback)(function (e) {
-        if (!pagination || !pagination.onScroll || pagination.scrollLoading || !hasMore)
-            return;
-        var target = e.currentTarget;
-        var nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 5;
-        if (nearBottom) {
-            if (scrollTimeoutRef.current)
-                clearTimeout(scrollTimeoutRef.current);
-            scrollTimeoutRef.current = setTimeout(function () {
-                var _a;
-                var startIndex = options.length + 1;
-                (_a = pagination.onScroll) === null || _a === void 0 ? void 0 : _a.call(pagination, startIndex, pagination.limit || 10, inputValue);
-            }, 200);
-        }
-    }, [pagination, options.length, inputValue, hasMore]);
-    (0, react_2.useOutsideClick)({
-        ref: customSelectRef,
-        handler: function (e) {
-            var dropdown = document.getElementById('custom-select-portal');
-            if (dropdown && dropdown.contains(e.target))
-                return;
-            setCustomSelectOpen(false);
-        },
-    });
-    var handleCustomSelect = function (item) {
-        if (typeof (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.onSelect) === 'function') {
-            insideSelect.onSelect(item);
-        }
-        setCustomSelectOpen(false);
-    };
-    (0, react_1.useEffect)(function () {
-        if (customSelectOpen && customSelectRef.current) {
-            var rect = customSelectRef.current.getBoundingClientRect();
-            setCustomSelectPos({
-                top: rect.bottom + window.scrollY,
-                left: rect.left + window.scrollX,
-                width: rect.width + 30,
-            });
-        }
-    }, [customSelectOpen]);
-    return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
-        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: information === null || information === void 0 ? void 0 : information.informationMessage })),
-        react_1.default.createElement(react_2.InputGroup, { size: size },
-            react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: "2.85rem", px: 3, display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.375rem", border: "0.063rem solid", borderColor: error ? theme.colors.semantic.error[500] : theme.colors.primary[500], borderRadius: "0.25rem", bg: "white", boxShadow: focused ? error ? "0 0 0 0.125rem ".concat((_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.error) : "0 0 0 0.125rem ".concat((_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.primary) : 'none', transition: "box-shadow 0.2s, border-color 0.2s" },
-                insideSelect && (react_1.default.createElement(react_2.Box, { position: "relative", ref: customSelectRef, backgroundColor: theme.colors.gray[200], ml: "-0.75rem", h: "-webkit-fill-available", borderRadius: "0.25rem 0 0 0.25rem", onClick: function () { return setCustomSelectOpen(function (prev) { return !prev; }); } },
-                    react_1.default.createElement(react_2.Box, { minW: "5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", width: insideSelect.width, height: height, pl: "0.5rem", pr: "0.5rem" },
-                        react_1.default.createElement(SelectTruncatedLabel_1.default, { label: (_e = (_d = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : "", maxWidth: (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.width) || "6rem" }),
-                        customSelectOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })),
-                    customSelectOpen && (react_1.default.createElement(react_2.Portal, null,
-                        react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 1400, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (_f = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _f === void 0 ? void 0 : _f.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, display: "flex", alignItems: "center", height: "2.5rem", px: "0.75rem", fontSize: "sm", _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
-                                e.stopPropagation();
-                                handleCustomSelect(item);
-                            } }, item.label)); })))))),
-                isMultiple
-                    ? selectedValues.slice(0, (chip === null || chip === void 0 ? void 0 : chip.maxChips) || selectedValues.length).map(function (item) { return (react_1.default.createElement(Tag_1.default, { key: item.id, label: (chip === null || chip === void 0 ? void 0 : chip.maxText) && item.label.length > chip.maxText
-                            ? item.label.slice(0, chip.maxText) + '…'
-                            : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? function () { return handleRemove(item === null || item === void 0 ? void 0 : item.id); } : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: "sm" })); })
-                    : selectedValues.length === 1 &&
-                        inputValue === '' && (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: function () { return setIsOpen(true); }, fontSize: "sm", color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0 }, selectedValues[0].label)),
-                (chip === null || chip === void 0 ? void 0 : chip.maxChips) &&
-                    isMultiple &&
-                    selectedValues.length > chip.maxChips && (react_1.default.createElement(Tag_1.default, { key: "extra-count", label: "+ ".concat(selectedValues.length - chip.maxChips), colorScheme: "gray", size: "sm" })),
-                (isMultiple || inputValue || !selectedValues.length || !isMultiple) && (react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "unstyled", flex: "1", minW: "5rem", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onFocus: function () {
-                        setFocused(true);
-                        setIsOpen(true);
-                    }, onBlur: function () { return setFocused(false); }, placeholder: placeholder })),
-                react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 1 },
-                    isRemoveAllIcon && selectedValues.length > 0 && (react_1.default.createElement(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
-                        react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.X, { size: 12, color: theme.colors.black }), "aria-label": "Clear all", variant: "ghost", size: "sm", onClick: handleClearAll, sx: {
-                                bg: 'transparent',
-                                _hover: { bg: 'transparent' },
-                                _active: { bg: 'transparent' },
-                                _focus: { boxShadow: 'none', bg: 'transparent' },
-                            } }))),
-                    isLoading ? (react_1.default.createElement(react_2.Spinner, { size: "sm" })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? (react_1.default.createElement(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: "sm", onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : (react_1.default.createElement(react_2.Box, { as: "button", onClick: function (e) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            setIsOpen(function (prev) { return !prev; });
-                        }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center" }, isOpen ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 16 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 16 })))))),
-        isOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", zIndex: 10, width: "100%", maxH: "20rem", borderWidth: 1, borderRadius: "sm", bg: "white", boxShadow: "md", display: "flex", flexDirection: "column" },
-            isMultiple && isSelectAll && (react_1.default.createElement(react_2.Box, { p: 2, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
-                react_1.default.createElement(react_2.Checkbox, { isChecked: allFilteredSelected, pointerEvents: "none" }),
-                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, allFilteredSelected ? 'Unselect All' : 'Select All'))),
-            react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200] }, isOptionLoading ? (react_1.default.createElement(react_2.Box, { p: 3, display: "flex", alignItems: "center", gap: 2 },
-                react_1.default.createElement(react_2.Spinner, { size: "sm" }),
-                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, loadingText))) : filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: "sm", color: theme.colors.gray[500] }, "No results found")) : (filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, p: 2, px: 3, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : 'transparent', _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
-                isMultiple && (react_1.default.createElement(react_2.Checkbox, { isChecked: isSelected(option.id), pointerEvents: "none", colorScheme: "blue" })),
-                option.view ? react_1.default.createElement(react_1.default.Fragment, null, option.view) : react_1.default.createElement(react_2.Text, { fontSize: "sm" }, option.label))); }))),
-            (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { p: 2, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: "white", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
-                addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: 16 }),
-                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, addNew.text || 'Add New'))))),
-        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText }),
-        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage })));
-};
-exports.default = SearchSelect;

package/dist/Components/SearchSelect/SearchSelectProps.d.ts

@@ -1,60 +0,0 @@
-/// <reference types="react" />
-export type SearchSelectProps = {
-    id?: string;
-    label?: string;
-    options: Options[];
-    onSelect?: (options: Options | Options[] | undefined) => void;
-    onSearch?: (value: string) => void;
-    isOptionLoading?: boolean;
-    isLoading?: boolean;
-    loadingText?: string;
-    placeholder?: string;
-    value?: Options[] | Options;
-    searchQuery?: string;
-    isMultiple?: boolean;
-    isRequired?: boolean;
-    error?: boolean;
-    errorMessage?: string;
-    helperText?: string;
-    width?: string | number;
-    height?: string | number;
-    size?: "xs" | "sm" | "md" | "lg";
-    chip?: {
-        maxChips?: number;
-        maxText?: number;
-        onClick?: (options: Options | Options[]) => void;
-    };
-    information?: {
-        isInformation?: boolean;
-        informationMessage?: string;
-    };
-    rightIcon?: {
-        icon?: React.ReactNode;
-        onClick?: () => void;
-    };
-    addNew?: {
-        enabled: boolean;
-        icon?: React.ReactNode;
-        text?: string;
-        onClick?: () => void;
-    };
-    isRemoveAllIcon?: boolean;
-    isSelectAll?: boolean;
-    pagination?: {
-        onScroll?: (startIndex: number, limit: number, query: string) => void;
-        limit?: number;
-        scrollLoading?: boolean;
-    };
-    virtualization?: boolean;
-    insideSelect?: {
-        onSelect?: (options: Options) => void;
-        value?: Options;
-        option?: Options[];
-        width?: string;
-    };
-};
-export type Options = {
-    id: string | number;
-    label: string;
-    view?: React.ReactNode;
-};

package/dist/Components/SearchSelect/SearchSelectProps.js

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

package/dist/Components/SearchSelect/SelectTruncatedLabel.d.ts

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

package/dist/Components/SearchSelect/SelectTruncatedLabel.js

@@ -1,45 +0,0 @@
-"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 });
-var react_1 = require("@chakra-ui/react");
-var react_2 = __importStar(require("react"));
-var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-var SelectTruncatedLabel = function (_a) {
-    var label = _a.label, _b = _a.maxWidth, maxWidth = _b === void 0 ? "6rem" : _b;
-    var textRef = (0, react_2.useRef)(null);
-    var _c = (0, react_2.useState)(false), isOverflowing = _c[0], setIsOverflowing = _c[1];
-    (0, react_2.useEffect)(function () {
-        var el = textRef.current;
-        if (el) {
-            setIsOverflowing(el.scrollWidth > el.clientWidth);
-        }
-    }, [label, maxWidth]);
-    var textElement = (react_2.default.createElement(react_1.Text, { ref: textRef, maxW: maxWidth, isTruncated: true, whiteSpace: "nowrap", fontWeight: 500, fontSize: "0.875rem", letterSpacing: "0.044rem" }, label));
-    return isOverflowing ? react_2.default.createElement(ToolTip_1.default, { label: label, placement: "top" }, textElement) : textElement;
-};
-exports.default = SelectTruncatedLabel;

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

@@ -1,3 +0,0 @@
-import React from "react";
-import { chakraSelectProps } from "./SelectProps";
-export default function Select({ placeholder, size, variant, icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, height, formControlStyle, isInformation, informationMessage, selectStyle, }: chakraSelectProps): React.JSX.Element;

package/dist/Components/Select/Select.js

@@ -1,54 +0,0 @@
-"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 });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var FormLabel_1 = require("../Common/FormLabel");
-var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-var HelperText_1 = __importDefault(require("../Common/HelperText"));
-function Select(_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.value, value = _f === void 0 ? "" : _f, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _g = _a.options, options = _g === void 0 ? [] : _g, _h = _a.width, width = _h === void 0 ? 500 : _h, _j = _a.height, height = _j === void 0 ? "2.75rem" : _j, formControlStyle = _a.formControlStyle, _k = _a.isInformation, isInformation = _k === void 0 ? false : _k, informationMessage = _a.informationMessage, selectStyle = _a.selectStyle;
-    var getOptionsList = (0, react_1.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)); });
-    }, [options]);
-    var handleOnChange = function (event) {
-        var selectedValue = event.target.value;
-        var selectedOption = options.find(function (option) { return option.id.toString() === selectedValue.toString(); });
-        if (selectedOption && onChange) {
-            onChange(selectedOption);
-        }
-    };
-    return (react_1.default.createElement(react_2.FormControl, { isInvalid: error, style: formControlStyle, width: width },
-        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: variant, icon: icon, isInvalid: error, value: value, onChange: handleOnChange, width: width, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, minH: height }, getOptionsList()),
-        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
-        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
-}
-exports.default = Select;

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

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

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

@@ -1,8 +0,0 @@
-"use strict";
-// import React from "react";
-// import { Meta, StoryFn } from "@storybook/react";
-// import { ChakraProvider } from "@chakra-ui/react";
-// import { useState } from "react";
-// import Select from "./Select";
-// import { chakraSelectProps } from "./SelectProps";
-Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/Components/Select/Select.styles.js

@@ -1,98 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
-exports.Select = {
-    baseStyle: {
-        field: {
-            fontWeight: 500,
-            fontSize: "0.875rem",
-            letterSpacing: "0.044rem",
-            borderRadius: "0.25rem",
-            minWidth: "0",
-            width: "100%",
-            maxWidth: "100%",
-            _placeholder: {
-                fontStyle: "italic",
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-            },
-        },
-        icon: {
-            width: "1.25rem",
-            height: "1.25rem",
-        },
-    },
-    sizes: {
-        sm: {
-            field: {
-                h: "2.125rem",
-                fontSize: "0.8125rem",
-                px: "0.5rem",
-                py: "0.5rem",
-            },
-        },
-        md: {
-            field: {
-                h: "2.375rem",
-                fontSize: "0.875rem",
-                px: "0.75rem",
-                py: "0.5rem",
-            },
-        },
-        lg: {
-            field: {
-                h: "2.75rem",
-                fontSize: "0.9375rem",
-                px: "1rem",
-                py: "0.5rem",
-            },
-        },
-    },
-    variants: {
-        outline: function (props) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            var theme = props.theme;
-            var errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
-            var borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.300";
-            var shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
-            var shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
-            var primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";
-            return {
-                field: {
-                    bg: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "gray.50",
-                    border: "0.063rem solid",
-                    borderColor: borderColor,
-                    _hover: {
-                        borderColor: primary,
-                        boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
-                    },
-                    _focus: {
-                        borderColor: primary,
-                        boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
-                    },
-                    _disabled: {
-                        opacity: 0.4,
-                        cursor: "not-allowed",
-                    },
-                    _invalid: {
-                        borderColor: errorColor,
-                        boxShadow: "0 0 0 0.125rem ".concat(shadowError),
-                        _hover: {
-                            borderColor: errorColor,
-                            boxShadow: "0 0 0 0.125rem ".concat(shadowError),
-                        },
-                        _focus: {
-                            borderColor: errorColor,
-                            boxShadow: "0 0 0 0.125rem ".concat(shadowError),
-                        },
-                    },
-                },
-            };
-        },
-    },
-    defaultProps: {
-        variant: "outline",
-        size: "md",
-    },
-};