oneslash-design-system 1.1.6 → 1.1.8

package/dist/components/iconButton.jsx

@@ -1,126 +0,0 @@
-'use client';
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useState, useEffect, useCallback } from 'react';
-export default function IconButton(_a) {
-    var _this = this;
-    var variant = _a.variant, color = _a.color, state = _a.state, iconName = _a.iconName, onClick = _a.onClick;
-    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
-    var _c = useState(null), Icon = _c[0], setIcon = _c[1];
-    // import icon
-    var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
-        var module_1, Icon_1, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!iconName)
-                        return [2 /*return*/, null];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, import('@heroicons/react/24/outline')];
-                case 2:
-                    module_1 = _a.sent();
-                    Icon_1 = module_1[iconName];
-                    return [2 /*return*/, Icon_1 || null];
-                case 3:
-                    error_1 = _a.sent();
-                    console.error("Failed to load icon ".concat(iconName, ":"), error_1);
-                    return [2 /*return*/, null];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); }, []);
-    // Load icons on mount and when props change
-    useEffect(function () {
-        var fetchIcons = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (!(typeof iconName === 'string')) return [3 /*break*/, 2];
-                        _a = setIcon;
-                        return [4 /*yield*/, loadIcon(iconName)];
-                    case 1:
-                        _a.apply(void 0, [_b.sent()]);
-                        _b.label = 2;
-                    case 2: return [2 /*return*/];
-                }
-            });
-        }); };
-        fetchIcons();
-    }, [iconName, loadIcon]);
-    // padding, corner
-    var baseClasses = variant === 'contained'
-        ? 'p-2 rounded-[8px] leading-none '
-        : 'p-2 rounded-[8px] leading-none ';
-    // bg color
-    var bgColor = variant === 'contained'
-        ? color === 'primary'
-            ? 'bg-light-primary-main dark:bg-dark-primary-main' // contained && primary
-            : 'bg-light-background-accent200 dark:bg-dark-background-accent200' // contained && secondary
-        : color === 'primary'
-            ? ' ' // textOnly && primary
-            : ' '; // textOnly && secondary
-    // bg color hover
-    var bgColorHover = variant === 'contained'
-        ? color === 'primary'
-            ? 'hover:bg-light-primary-dark hover:dark:bg-dark-primary-dark' // contained && primary
-            : 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300' // contained && secondary
-        : color === 'primary'
-            ? 'hover:bg-light-action-hover hover:dark:bg-dark-action-hover' // textOnly && primary
-            : 'hover:bg-light-action-hover hover:dark:bg-dark-action-hover'; // textOnly && secondary
-    // icon color
-    var iconColor = variant === 'contained'
-        ? color === 'primary'
-            ? 'text-light-primary-contrast dark:text-dark-primary-contrast' // contained && primary
-            : 'text-light-text-primary dark:text-dark-text-primary' // contained && secondary
-        : color === 'primary'
-            ? ' text-light-text-primary dark:text-dark-text-primary' // textOnly && primary
-            : ' text-light-text-primary dark:text-dark-text-primary'; // textOnly && secondary
-    // state
-    var stateClasses = state === 'disabled'
-        ? 'cursor-not-allowed opacity-50'
-        : state === 'selected'
-            ? 'cursor-pointer ring-2 ring-offset-2 ring-blue-500'
-            : isHovered
-                ? 'cursor-pointer hover:bg-opacity-75'
-                : 'cursor-pointer';
-    return (<button className={"".concat(baseClasses, " ").concat(bgColor, " ").concat(iconColor, " ").concat(bgColorHover, " ").concat(stateClasses, " transition-colors duration-300 ease-in-out")} disabled={state === 'disabled'} onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick}>
-        {Icon && <Icon className="size-6"/>}
-    </button>);
-}

package/dist/components/loadingScreen.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export default function LoadingScreen(): React.JSX.Element;
-export declare function LoadingSmall(): React.JSX.Element;

package/dist/components/loadingScreen.jsx

@@ -1,14 +0,0 @@
-'use client';
-import React from 'react';
-export default function LoadingScreen() {
-    return (<div className="flex justify-center items-center h-full w-full min-h-[200px]">
-        <div className="w-12 h-12 border-4 border-t-transparent border-light-accent-main rounded-full animate-spin"></div>
-    </div>);
-}
-;
-export function LoadingSmall() {
-    return (<div className="flex justify-center items-center h-[40px] w-[40px]">
-      <div className="w-[40px] h-[40px] border-4 border-t-transparent border-light-accent-main rounded-full animate-spin"></div>
-    </div>);
-}
-;

package/dist/components/menuItem.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-interface MenuItemProps {
-    href?: string;
-    iconName?: string;
-    label: string;
-    isSelected?: boolean;
-    onClick: any;
-}
-export default function MenuItem({ href, iconName, label, isSelected, onClick, }: MenuItemProps): React.JSX.Element;
-export {};

package/dist/components/menuItem.jsx

@@ -1,96 +0,0 @@
-'use client';
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useState, useEffect, useCallback } from 'react';
-import NextLink from 'next/link';
-export default function MenuItem(_a) {
-    var _this = this;
-    var _b = _a.href, href = _b === void 0 ? '#' : _b, iconName = _a.iconName, label = _a.label, isSelected = _a.isSelected, onClick = _a.onClick;
-    var _c = useState(null), Icon = _c[0], setIcon = _c[1];
-    // Import icon dynamically
-    var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
-        var module_1, IconComponent, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!iconName)
-                        return [2 /*return*/, null];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, import('@heroicons/react/24/outline')];
-                case 2:
-                    module_1 = _a.sent();
-                    IconComponent = module_1[iconName];
-                    return [2 /*return*/, IconComponent || null];
-                case 3:
-                    error_1 = _a.sent();
-                    console.error("Failed to load icon ".concat(iconName, ":"), error_1);
-                    return [2 /*return*/, null];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); }, []);
-    useEffect(function () {
-        var fetchIcon = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (!iconName) return [3 /*break*/, 2];
-                        _a = setIcon;
-                        return [4 /*yield*/, loadIcon(iconName)];
-                    case 1:
-                        _a.apply(void 0, [_b.sent()]);
-                        _b.label = 2;
-                    case 2: return [2 /*return*/];
-                }
-            });
-        }); };
-        fetchIcon();
-    }, [iconName, loadIcon]);
-    return (<NextLink href={href}>
-      <div className={"\n          flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start\n          ".concat(isSelected
-            ? 'bg-light-action-selected dark:bg-dark-action-selected'
-            : 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100', "\n        ")} style={{ width: '100%' }} onClick={onClick}>
-        {Icon && <Icon className="w-6 h-6"/>}
-        <span className="whitespace-nowrap text-body1 px-2">
-          {label}
-        </span>
-      </div>
-    </NextLink>);
-}

package/dist/components/modal.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-interface ModalProps {
-    isOpen: boolean;
-    title?: string;
-    children: React.ReactNode;
-    onClose: () => void;
-    actions?: React.ReactNode;
-    size?: 'medium' | 'large';
-}
-export default function Modal({ isOpen, title, children, onClose, actions, size, }: ModalProps): React.JSX.Element | null;
-export {};

package/dist/components/modal.jsx

@@ -1,49 +0,0 @@
-'use client';
-import React, { useEffect } from 'react';
-export default function Modal(_a) {
-    var isOpen = _a.isOpen, title = _a.title, children = _a.children, onClose = _a.onClose, actions = _a.actions, _b = _a.size, size = _b === void 0 ? 'medium' : _b;
-    if (!isOpen)
-        return null;
-    // close modal by clicking elsewhere
-    var handleOverlayClick = function (e) {
-        if (e.target === e.currentTarget) {
-            onClose();
-        }
-    };
-    // close modal by esc keypress
-    useEffect(function () {
-        var handleKeyDown = function (e) {
-            if (e.key === 'Escape') {
-                onClose();
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return function () {
-            window.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [onClose]);
-    // Determine width based on size prop
-    var modalWidth = size === 'large' ? 'w-[1200px]' : 'w-[600px]';
-    var maxWidth = size === 'large' ? '1200px' : '600px';
-    return (<div className="fixed inset-[-32px] bg-black bg-opacity-50 flex items-center justify-center z-50" onClick={handleOverlayClick} role="dialog" aria-labelledby="modal-title" aria-modal="true" tabIndex={-1}>
-      <div className={"flex flex-col bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4 ".concat(modalWidth)} style={{
-            maxWidth: maxWidth,
-            width: 'calc(100vw - 64px)',
-            maxHeight: '800px',
-            height: 'auto',
-            overflowY: 'auto',
-        }}>
-        {title && (<h2 id="modal-title" className="text-h6">
-            {title}
-          </h2>)}
-        <div className="text-body1">
-          {children}
-        </div>
-        {actions && (<div className='pt-6 border-t border-light-misc-divider dark:border-dark-misc-divider'>
-            <div className="flex justify-between">
-              {actions}
-            </div>
-          </div>)}
-      </div>
-    </div>);
-}

package/dist/components/popover.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-interface PopoverProps {
-    id?: string;
-    anchorEl?: HTMLElement | null;
-    open: boolean;
-    onClose: () => void;
-    children: React.ReactNode;
-}
-export default function Popover({ id, anchorEl, open, onClose, children, }: PopoverProps): React.ReactPortal | null;
-export {};

package/dist/components/popover.jsx

@@ -1,52 +0,0 @@
-'use client';
-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);
-};
-import React, { useState, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { usePopper } from 'react-popper';
-export default function Popover(_a) {
-    var id = _a.id, anchorEl = _a.anchorEl, open = _a.open, onClose = _a.onClose, children = _a.children;
-    var _b = useState(null), popoverElement = _b[0], setPopoverElement = _b[1];
-    var _c = useState(false), hasMounted = _c[0], setHasMounted = _c[1];
-    // Initialize Popper.js
-    var _d = usePopper(anchorEl, popoverElement, {
-        placement: 'bottom-start', // Default placement, can be customized
-        modifiers: [
-            { name: 'offset', options: { offset: [0, 8] } }, // Offset for spacing between anchor and popover
-        ],
-    }), styles = _d.styles, attributes = _d.attributes;
-    // Handle outside clicks to close the popover
-    useEffect(function () {
-        var handleClickOutside = function (event) {
-            if (popoverElement && !popoverElement.contains(event.target) && anchorEl) {
-                onClose();
-            }
-        };
-        if (open) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-        return function () {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [open, anchorEl, popoverElement, onClose]);
-    // Ensure popover is only rendered after the component mounts
-    useEffect(function () {
-        setHasMounted(true);
-    }, []);
-    if (!open || !hasMounted || !anchorEl)
-        return null;
-    // Render popover in a portal to prevent layout shifts and positioning issues
-    return createPortal(<div id={id} ref={setPopoverElement} style={__assign(__assign({}, styles.popper), { display: open ? 'block' : 'none', zIndex: 10000 })} {...attributes.popper} className="bg-light-background-accent100 dark:bg-dark-background-accent100 rounded-[8px] shadow-lg p-2" role="dialog">
-      {children}
-    </div>, document.body // Mounting the popover in the document body for isolation
-    );
-}

package/dist/components/tab.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-type TabProps = {
-    label: string;
-    href?: string;
-    isSelected: boolean;
-    onClickTab: () => void;
-    onClickActionIcon?: any;
-    decoIcon?: string;
-    actionIcon?: string;
-};
-export default function Tab({ label, href, isSelected, onClickTab, onClickActionIcon, decoIcon, actionIcon }: TabProps): React.JSX.Element;
-export {};

package/dist/components/tab.jsx

@@ -1,113 +0,0 @@
-'use client';
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useState, useEffect, useCallback } from 'react';
-import { useRouter, usePathname } from 'next/navigation';
-export default function Tab(_a) {
-    var _this = this;
-    var label = _a.label, href = _a.href, isSelected = _a.isSelected, onClickTab = _a.onClickTab, onClickActionIcon = _a.onClickActionIcon, decoIcon = _a.decoIcon, actionIcon = _a.actionIcon;
-    var router = useRouter();
-    var pathname = usePathname();
-    var _b = useState(null), IconLeft = _b[0], setIconLeft = _b[1];
-    var _c = useState(null), IconRight = _c[0], setIconRight = _c[1];
-    // Load icon dynamically
-    var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
-        var module_1, Icon, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!iconName)
-                        return [2 /*return*/, null];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, import('@heroicons/react/24/outline')];
-                case 2:
-                    module_1 = _a.sent();
-                    Icon = module_1[iconName];
-                    return [2 /*return*/, Icon || null];
-                case 3:
-                    error_1 = _a.sent();
-                    console.error("Failed to load icon ".concat(iconName, ":"), error_1);
-                    return [2 /*return*/, null];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); }, []);
-    useEffect(function () {
-        var fetchIcons = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        if (!decoIcon) return [3 /*break*/, 2];
-                        _a = setIconLeft;
-                        return [4 /*yield*/, loadIcon(decoIcon)];
-                    case 1:
-                        _a.apply(void 0, [_c.sent()]);
-                        _c.label = 2;
-                    case 2:
-                        if (!actionIcon) return [3 /*break*/, 4];
-                        _b = setIconRight;
-                        return [4 /*yield*/, loadIcon(actionIcon)];
-                    case 3:
-                        _b.apply(void 0, [_c.sent()]);
-                        _c.label = 4;
-                    case 4: return [2 /*return*/];
-                }
-            });
-        }); };
-        fetchIcons();
-    }, [decoIcon, actionIcon, loadIcon]);
-    var handleClick = function () {
-        onClickTab();
-        if (href) {
-            router.push(href);
-        }
-    };
-    return (<div className={"\n        flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start\n        ".concat(isSelected
-            ? 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast'
-            : 'bg-light-action-selected dark:bg-dark-action-selected hover:bg-light-background-default dark:hover:bg-dark-action-hover', "\n      ")} onClick={handleClick}>
-      {IconLeft && <IconLeft className="w-5 h-5"/>}
-      <span className="whitespace-nowrap text-body1 px-2">
-        {label}
-      </span>
-      {IconRight && (<div onClick={onClickActionIcon} className="cursor-pointer">
-          <IconRight className="w-5 h-5"/>
-        </div>)}
-    </div>);
-}

package/dist/components/tag.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import * as HeroIcons from '@heroicons/react/24/outline';
-interface TagProps {
-    key?: any;
-    variant: "contained" | "textOnly";
-    size: "medium" | "small";
-    state?: "enabled" | "selected";
-    label: any;
-    iconName?: keyof typeof HeroIcons;
-    isDeletable?: keyof typeof HeroIcons;
-    onClick?: any;
-    color?: 'default' | 'info';
-}
-export default function Tag({ key, variant, size, state, label, iconName, isDeletable, onClick, color, }: TagProps): React.JSX.Element;
-export {};

package/dist/components/tag.jsx

@@ -1,123 +0,0 @@
-'use client';
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import React, { useState, useEffect, useCallback } from 'react';
-export default function Tag(_a) {
-    var _this = this;
-    var key = _a.key, variant = _a.variant, size = _a.size, state = _a.state, label = _a.label, iconName = _a.iconName, isDeletable = _a.isDeletable, onClick = _a.onClick, _b = _a.color, color = _b === void 0 ? 'default' : _b;
-    var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
-    var _d = useState(null), Icon = _d[0], setIcon = _d[1];
-    var _e = useState(null), DeleteIcon = _e[0], setDeleteIcon = _e[1];
-    var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
-        var module_1, Icon_1, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!iconName)
-                        return [2 /*return*/, null];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, import('@heroicons/react/24/outline')];
-                case 2:
-                    module_1 = _a.sent();
-                    Icon_1 = module_1[iconName];
-                    return [2 /*return*/, Icon_1 || null];
-                case 3:
-                    error_1 = _a.sent();
-                    console.error("Failed to load icon ".concat(iconName, ":"), error_1);
-                    return [2 /*return*/, null];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); }, []);
-    useEffect(function () {
-        var fetchIcons = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        if (!(typeof iconName === 'string')) return [3 /*break*/, 2];
-                        _a = setIcon;
-                        return [4 /*yield*/, loadIcon(iconName)];
-                    case 1:
-                        _a.apply(void 0, [_c.sent()]);
-                        _c.label = 2;
-                    case 2:
-                        if (!(typeof isDeletable === 'string')) return [3 /*break*/, 4];
-                        _b = setDeleteIcon;
-                        return [4 /*yield*/, loadIcon(isDeletable)];
-                    case 3:
-                        _b.apply(void 0, [_c.sent()]);
-                        _c.label = 4;
-                    case 4: return [2 /*return*/];
-                }
-            });
-        }); };
-        fetchIcons();
-    }, [iconName, isDeletable, loadIcon]);
-    // size and padding
-    var sizeClasses = size === 'medium' ? 'text-body2 px-2 py-1' : 'text-caption px-2 py-[3px]';
-    // bg color
-    var bgClasses = variant === 'contained'
-        ? (color === 'info'
-            ? 'bg-light-info-main dark:bg-dark-info-main' // info 
-            : 'bg-light-background-accent200 dark:bg-dark-background-accent200') // default 
-        : ''; // textOnly
-    // font color
-    var fontClasses = variant === 'textOnly'
-        ? (color === 'info'
-            ? 'text-light-info-main dark:text-dark-info-main' // info
-            : 'text-light-text-primary dark:text-dark-text-primary') // default
-        : 'text-light-text-primary dark:text-dark-text-primary'; // contained
-    // state
-    var stateClasses = state === 'selected'
-        ? 'bg-light-accent-main dark:bg-dark-accent-main text-white'
-        : 'cursor-pointer';
-    // hover
-    var hoverClasses = isHovered ? (variant === 'contained' ? 'hover:bg-dark-background-accent300' : '') : '';
-    return (<div className={"flex items-center space-x-1 rounded-full \n        ".concat(sizeClasses, " ").concat(bgClasses, " ").concat(fontClasses, " ").concat(stateClasses, " ").concat(hoverClasses, " \n        transition-colors duration-300 ease-in-out")} onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick}>
-      {Icon && <Icon className="w-4 h-4"/>}
-      <span>{label}</span>
-      {isDeletable && (<button className="ml-2 text-red-500" onClick={function (e) {
-                e.stopPropagation();
-                // Handle delete action
-            }}>
-          {DeleteIcon && <DeleteIcon className="w-4 h-4"/>}
-        </button>)}
-    </div>);
-}