@intlayer/design-system 6.1.6 → 7.0.0-canary.1

package/dist/esm/components/Table/Table.mjs

@@ -0,0 +1,197 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { Button } from "../Button/Button.mjs";
+import { Modal, ModalSize } from "../Modal/Modal.mjs";
+import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
+import { MoveDiagonal } from "lucide-react";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Table/Table.tsx
+/**
+* Table component that provides an enhanced table experience with modal expansion and collapsible content
+*
+* The Table component wraps a standard HTML table element with additional functionality:
+* - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal
+* - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving
+* - **Responsive Design**: Handles large tables gracefully with modal overflow
+* - **Sticky Controls**: Table controls remain accessible even when scrolling
+*
+* ## Features
+* - **Modal View**: Full-screen modal for better viewing of large tables
+* - **Expand/Collapse**: Optional collapsible wrapper to save space
+* - **Responsive**: Handles overflow and responsive behavior automatically
+* - **Accessibility**: Maintains proper table semantics and keyboard navigation
+* - **Customizable**: Supports all standard HTML table attributes and styling
+*
+* ## Best Practices
+* - Use semantic HTML table structure (thead, tbody, tfoot)
+* - Provide proper column headers with scope attributes
+* - Use the isRollable prop for large tables that might need space management
+* - Apply consistent styling through the className prop
+* - Consider pagination for very large datasets
+*
+* @param {TableProps} props - The properties for the Table component
+* @returns {JSX.Element} The rendered table with enhanced functionality
+*
+* @example
+* ```tsx
+* // Simple data table
+* <Table>
+*   <thead>
+*     <tr>
+*       <th scope="col">Name</th>
+*       <th scope="col">Email</th>
+*       <th scope="col">Status</th>
+*     </tr>
+*   </thead>
+*   <tbody>
+*     <tr>
+*       <td>John Doe</td>
+*       <td>john@example.com</td>
+*       <td>
+*         <span className="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">
+*           Active
+*         </span>
+*       </td>
+*     </tr>
+*     <tr>
+*       <td>Jane Smith</td>
+*       <td>jane@example.com</td>
+*       <td>
+*         <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">
+*           Pending
+*         </span>
+*       </td>
+*     </tr>
+*   </tbody>
+* </Table>
+*
+* // Large collapsible table with custom styling
+* <Table
+*   isRollable
+*   className="border border-gray-200 rounded-lg overflow-hidden"
+* >
+*   <thead className="bg-gray-50">
+*     <tr>
+*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+*         Product ID
+*       </th>
+*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+*         Name
+*       </th>
+*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+*         Category
+*       </th>
+*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+*         Price
+*       </th>
+*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+*         Stock
+*       </th>
+*     </tr>
+*   </thead>
+*   <tbody className="bg-white divide-y divide-gray-200">
+*     {products.map((product) => (
+*       <tr key={product.id} className="hover:bg-gray-50">
+*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+*           #{product.id}
+*         </td>
+*         <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+*           {product.name}
+*         </td>
+*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+*           {product.category}
+*         </td>
+*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+*           ${product.price.toFixed(2)}
+*         </td>
+*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+*           {product.stock} units
+*         </td>
+*       </tr>
+*     ))}
+*   </tbody>
+* </Table>
+*
+* // Financial data table with formatted numbers
+* <Table className="w-full border-collapse">
+*   <thead>
+*     <tr className="border-b-2 border-gray-300">
+*       <th scope="col" className="text-left py-3 px-4">Quarter</th>
+*       <th scope="col" className="text-right py-3 px-4">Revenue</th>
+*       <th scope="col" className="text-right py-3 px-4">Profit</th>
+*       <th scope="col" className="text-right py-3 px-4">Growth</th>
+*     </tr>
+*   </thead>
+*   <tbody>
+*     <tr className="border-b border-gray-200">
+*       <td className="py-3 px-4 font-medium">Q1 2024</td>
+*       <td className="py-3 px-4 text-right">$2,450,000</td>
+*       <td className="py-3 px-4 text-right text-green-600">$345,000</td>
+*       <td className="py-3 px-4 text-right text-green-600">+12.5%</td>
+*     </tr>
+*     <tr className="border-b border-gray-200">
+*       <td className="py-3 px-4 font-medium">Q2 2024</td>
+*       <td className="py-3 px-4 text-right">$2,780,000</td>
+*       <td className="py-3 px-4 text-right text-green-600">$398,000</td>
+*       <td className="py-3 px-4 text-right text-green-600">+13.5%</td>
+*     </tr>
+*   </tbody>
+* </Table>
+* ```
+*
+* @see {@link ExpandCollapse} - Component used for collapsible table content
+* @see {@link Modal} - Component used for full-screen table view
+* @see {@link Button} - Component used for the modal trigger button
+*/
+const Table = ({ className, isRollable = false, displayModal,...props }) => {
+	const [isModalOpen, setIsModalOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [
+			displayModal && /* @__PURE__ */ jsx("div", {
+				className: "sticky top-48 z-10",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "absolute top-4 right-2",
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "hoverable",
+						size: "icon-md",
+						onClick: () => {
+							setIsModalOpen(true);
+						},
+						label: "Move",
+						Icon: MoveDiagonal
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(ExpandCollapse, {
+				isRollable,
+				className: "max-w-full overflow-x-auto",
+				children: /* @__PURE__ */ jsx("table", {
+					className: cn("min-w-full max-w-full table-auto overflow-x-auto bg-background text-left", className),
+					...props
+				})
+			}),
+			/* @__PURE__ */ jsx(Modal, {
+				isOpen: isModalOpen,
+				onClose: () => setIsModalOpen(false),
+				size: ModalSize.XL,
+				hasCloseButton: true,
+				children: isModalOpen ? /* @__PURE__ */ jsx("div", {
+					className: "grid",
+					children: /* @__PURE__ */ jsx("table", {
+						className: cn("min-w-full max-w-full table-auto text-left", className),
+						...props
+					})
+				}) : /* @__PURE__ */ jsx(Fragment$1, {})
+			})
+		]
+	});
+};
+
+//#endregion
+export { Table };
+//# sourceMappingURL=Table.mjs.map

package/dist/esm/components/Table/Table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.mjs","names":["Table: FC<TableProps>"],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { MoveDiagonal } from 'lucide-react';\nimport { type FC, type HTMLAttributes, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\n/**\n * Properties for the Table component that extends standard HTML table attributes\n *\n * @interface TableProps\n * @extends {HTMLAttributes<HTMLTableElement>}\n *\n * @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {string} [className] - Additional CSS classes for custom styling\n * @property {ReactNode} children - The table content including thead, tbody, tfoot elements\n *\n * @example\n * ```tsx\n * // Basic table usage\n * <Table>\n *   <thead>\n *     <tr>\n *       <th>Name</th>\n *       <th>Email</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <td>John Doe</td>\n *       <td>john@example.com</td>\n *     </tr>\n *   </tbody>\n * </Table>\n *\n * // Collapsible table with custom styling\n * <Table isRollable className=\"border border-gray-300 rounded-lg\">\n *   <thead>\n *     <tr>\n *       <th>Product</th>\n *       <th>Price</th>\n *       <th>Stock</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <td>Laptop</td>\n *       <td>$999</td>\n *       <td>15</td>\n *     </tr>\n *   </tbody>\n * </Table>\n * ```\n */\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n  isRollable?: boolean;\n  displayModal?: boolean;\n};\n\n/**\n * Table component that provides an enhanced table experience with modal expansion and collapsible content\n *\n * The Table component wraps a standard HTML table element with additional functionality:\n * - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal\n * - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving\n * - **Responsive Design**: Handles large tables gracefully with modal overflow\n * - **Sticky Controls**: Table controls remain accessible even when scrolling\n *\n * ## Features\n * - **Modal View**: Full-screen modal for better viewing of large tables\n * - **Expand/Collapse**: Optional collapsible wrapper to save space\n * - **Responsive**: Handles overflow and responsive behavior automatically\n * - **Accessibility**: Maintains proper table semantics and keyboard navigation\n * - **Customizable**: Supports all standard HTML table attributes and styling\n *\n * ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n *\n * @param {TableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n *\n * @example\n * ```tsx\n * // Simple data table\n * <Table>\n *   <thead>\n *     <tr>\n *       <th scope=\"col\">Name</th>\n *       <th scope=\"col\">Email</th>\n *       <th scope=\"col\">Status</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <td>John Doe</td>\n *       <td>john@example.com</td>\n *       <td>\n *         <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n *           Active\n *         </span>\n *       </td>\n *     </tr>\n *     <tr>\n *       <td>Jane Smith</td>\n *       <td>jane@example.com</td>\n *       <td>\n *         <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n *           Pending\n *         </span>\n *       </td>\n *     </tr>\n *   </tbody>\n * </Table>\n *\n * // Large collapsible table with custom styling\n * <Table\n *   isRollable\n *   className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n *   <thead className=\"bg-gray-50\">\n *     <tr>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Product ID\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Name\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Category\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Price\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Stock\n *       </th>\n *     </tr>\n *   </thead>\n *   <tbody className=\"bg-white divide-y divide-gray-200\">\n *     {products.map((product) => (\n *       <tr key={product.id} className=\"hover:bg-gray-50\">\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n *           #{product.id}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n *           {product.name}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n *           {product.category}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n *           ${product.price.toFixed(2)}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n *           {product.stock} units\n *         </td>\n *       </tr>\n *     ))}\n *   </tbody>\n * </Table>\n *\n * // Financial data table with formatted numbers\n * <Table className=\"w-full border-collapse\">\n *   <thead>\n *     <tr className=\"border-b-2 border-gray-300\">\n *       <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr className=\"border-b border-gray-200\">\n *       <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n *       <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n *     </tr>\n *     <tr className=\"border-b border-gray-200\">\n *       <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n *       <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n *     </tr>\n *   </tbody>\n * </Table>\n * ```\n *\n * @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const Table: FC<TableProps> = ({\n  className,\n  isRollable = false,\n  displayModal,\n  ...props\n}) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      {displayModal && (\n        <div className=\"sticky top-48 z-10\">\n          <div className=\"absolute top-4 right-2\">\n            <Button\n              variant=\"hoverable\"\n              size=\"icon-md\"\n              onClick={() => {\n                setIsModalOpen(true);\n              }}\n              label=\"Move\"\n              Icon={MoveDiagonal}\n            />\n          </div>\n        </div>\n      )}\n      <ExpandCollapse\n        isRollable={isRollable}\n        className=\"max-w-full overflow-x-auto\"\n      >\n        <table\n          className={cn(\n            'min-w-full max-w-full table-auto overflow-x-auto bg-background text-left',\n            className\n          )}\n          {...props}\n        />\n      </ExpandCollapse>\n\n      <Modal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        size={ModalSize.XL}\n        hasCloseButton\n      >\n        {isModalOpen ? (\n          <div className=\"grid\">\n            <table\n              className={cn(\n                'min-w-full max-w-full table-auto text-left',\n                className\n              )}\n              {...props}\n            />\n          </div>\n        ) : (\n          <></>\n        )}\n      </Modal>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsMA,MAAaA,SAAyB,EACpC,WACA,aAAa,OACb,aACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;AAErD,QACE,qBAAC;EAAI,WAAU;;GACZ,gBACC,oBAAC;IAAI,WAAU;cACb,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,SAAQ;MACR,MAAK;MACL,eAAe;AACb,sBAAe,KAAK;;MAEtB,OAAM;MACN,MAAM;OACN;MACE;KACF;GAER,oBAAC;IACa;IACZ,WAAU;cAEV,oBAAC;KACC,WAAW,GACT,4EACA,UACD;KACD,GAAI;MACJ;KACa;GAEjB,oBAAC;IACC,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC,MAAM,UAAU;IAChB;cAEC,cACC,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,WAAW,GACT,8CACA,UACD;MACD,GAAI;OACJ;MACE,GAEN,mCAAK;KAED;;GACJ"}

package/dist/esm/components/Table/index.mjs

@@ -0,0 +1,3 @@
+import { Table } from "./Table.mjs";
+
+export { Table };

package/dist/esm/components/Table/table.content.mjs

@@ -0,0 +1,37 @@
+import { t } from "intlayer";
+
+//#region src/components/Table/table.content.ts
+const tableContent = {
+	key: "table",
+	content: { show: t({
+		en: "Show all table content",
+		fr: "Afficher tout le contenu du tableau",
+		es: "Mostrar todo el contenido de la tabla",
+		"en-GB": "Show all table content",
+		de: "Alle Tabellendaten anzeigen",
+		ja: "テーブルのすべての内容を表示",
+		ko: "테이블의 모든 내용 표시",
+		zh: "显示表格的所有内容",
+		it: "Mostra tutto il contenuto della tabella",
+		pt: "Mostrar todo o conteúdo da tabela",
+		hi: "सभी तालिका सामग्री दिखाएं",
+		ar: "اظهار جميع محتويات الجدول",
+		ru: "Показать все данные таблицы",
+		tr: "Tüm tablo içeriğini göster",
+		pl: "Pokaż całą zawartość tabeli",
+		id: "Tampilkan semua isi tabel",
+		vi: "Hiển thị tất cả nội dung bảng"
+	}) },
+	title: "Table component content",
+	description: "Content declaration related to the Table component, specifically for UI message to display all table content.",
+	tags: [
+		"table",
+		"component content",
+		"design system"
+	]
+};
+var table_content_default = tableContent;
+
+//#endregion
+export { table_content_default as default };
+//# sourceMappingURL=table.content.mjs.map

package/dist/esm/components/Table/table.content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.content.mjs","names":[],"sources":["../../../../src/components/Table/table.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst tableContent = {\n  key: 'table',\n  content: {\n    show: t({\n      en: 'Show all table content',\n      fr: 'Afficher tout le contenu du tableau',\n      es: 'Mostrar todo el contenido de la tabla',\n      'en-GB': 'Show all table content',\n      de: 'Alle Tabellendaten anzeigen',\n      ja: 'テーブルのすべての内容を表示',\n      ko: '테이블의 모든 내용 표시',\n      zh: '显示表格的所有内容',\n      it: 'Mostra tutto il contenuto della tabella',\n      pt: 'Mostrar todo o conteúdo da tabela',\n      hi: 'सभी तालिका सामग्री दिखाएं',\n      ar: 'اظهار جميع محتويات الجدول',\n      ru: 'Показать все данные таблицы',\n      tr: 'Tüm tablo içeriğini göster',\n      pl: 'Pokaż całą zawartość tabeli',\n      id: 'Tampilkan semua isi tabel',\n      vi: 'Hiển thị tất cả nội dung bảng',\n    }),\n  },\n  title: 'Table component content',\n  description:\n    'Content declaration related to the Table component, specifically for UI message to display all table content.',\n  tags: ['table', 'component content', 'design system'],\n} satisfies Dictionary;\n\nexport default tableContent;\n"],"mappings":";;;AAEA,MAAM,eAAe;CACnB,KAAK;CACL,SAAS,EACP,MAAM,EAAE;EACN,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CAAC,EACH;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAS;EAAqB;EAAgB;CACtD;AAED,4BAAe"}

package/dist/esm/components/Tag/index.mjs

@@ -0,0 +1,293 @@
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Tag/index.tsx
+/**
+* Enumeration for tag border radius sizes
+*
+* Controls the roundedness of tag corners, from sharp edges to fully rounded pills.
+*
+* @enum {string} TagRoundedSize
+* @property {string} NONE - 'none' - No border radius (sharp corners)
+* @property {string} SM - 'sm' - Small border radius (2px)
+* @property {string} MD - 'md' - Medium border radius (6px)
+* @property {string} LG - 'lg' - Large border radius (8px)
+* @property {string} XL - 'xl' - Extra large border radius (12px)
+* @property {string} XXL - '2xl' - 2x large border radius (16px)
+* @property {string} XXXL - '3xl' - 3x large border radius (24px)
+* @property {string} FULL - 'full' - Fully rounded (50% border radius, pill shape)
+*
+* @example
+* ```tsx
+* // Sharp corners
+* <Tag roundedSize={TagRoundedSize.NONE}>Sharp Tag</Tag>
+*
+* // Pill-shaped tag
+* <Tag roundedSize={TagRoundedSize.FULL}>Pill Tag</Tag>
+*
+* // Medium rounded corners
+* <Tag roundedSize={TagRoundedSize.MD}>Rounded Tag</Tag>
+* ```
+*/
+let TagRoundedSize = /* @__PURE__ */ function(TagRoundedSize$1) {
+	TagRoundedSize$1["NONE"] = "none";
+	TagRoundedSize$1["SM"] = "sm";
+	TagRoundedSize$1["MD"] = "md";
+	TagRoundedSize$1["LG"] = "lg";
+	TagRoundedSize$1["XL"] = "xl";
+	TagRoundedSize$1["XXL"] = "2xl";
+	TagRoundedSize$1["XXXL"] = "3xl";
+	TagRoundedSize$1["FULL"] = "full";
+	return TagRoundedSize$1;
+}({});
+/**
+* Enumeration for tag color themes
+*
+* Provides semantic color options for different tag purposes and meanings.
+* Each color includes background, border, and text color variations.
+*
+* @enum {string} TagColor
+* @property {string} SUCCESS - 'success' - Green theme for positive states, success messages, or completed items
+* @property {string} ERROR - 'error' - Red theme for error states, warnings, or failed operations
+* @property {string} WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices
+* @property {string} NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content
+* @property {string} TEXT - 'text' - Default text color theme for general purpose tags
+*
+* @example
+* ```tsx
+* // Status indicators
+* <Tag color={TagColor.SUCCESS}>Completed</Tag>
+* <Tag color={TagColor.ERROR}>Failed</Tag>
+* <Tag color={TagColor.WARNING}>Pending</Tag>
+*
+* // Category tags
+* <Tag color={TagColor.NEUTRAL}>Category</Tag>
+* <Tag color={TagColor.TEXT}>General</Tag>
+* ```
+*/
+let TagColor = /* @__PURE__ */ function(TagColor$1) {
+	TagColor$1["SUCCESS"] = "success";
+	TagColor$1["ERROR"] = "error";
+	TagColor$1["WARNING"] = "warning";
+	TagColor$1["NEUTRAL"] = "neutral";
+	TagColor$1["TEXT"] = "text";
+	return TagColor$1;
+}({});
+/**
+* Enumeration for tag size variants
+*
+* Controls the overall size of tags including padding, font size, and border thickness.
+* Sizes are designed to maintain visual hierarchy and readability.
+*
+* @enum {string} TagSize
+* @property {string} XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)
+* @property {string} SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)
+* @property {string} MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size
+* @property {string} LG - 'lg' - Large (2rem padding, text-lg, 2px border)
+* @property {string} XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)
+*
+* @example
+* ```tsx
+* // Different sizes for hierarchy
+* <Tag size={TagSize.XS}>Small detail</Tag>
+* <Tag size={TagSize.SM}>Minor category</Tag>
+* <Tag size={TagSize.MD}>Standard tag</Tag>
+* <Tag size={TagSize.LG}>Important label</Tag>
+* <Tag size={TagSize.XL}>Hero tag</Tag>
+* ```
+*/
+let TagSize = /* @__PURE__ */ function(TagSize$1) {
+	TagSize$1["XS"] = "xs";
+	TagSize$1["SM"] = "sm";
+	TagSize$1["MD"] = "md";
+	TagSize$1["LG"] = "lg";
+	TagSize$1["XL"] = "xl";
+	return TagSize$1;
+}({});
+/**
+* Enumeration for tag border visibility
+*
+* Controls whether a border is displayed around the tag.
+*
+* @enum {string} TagBorder
+* @property {string} NONE - 'none' - No border (default)
+* @property {string} WITH - 'with' - Show border with 1.5px thickness
+*
+* @example
+* ```tsx
+* <Tag border={TagBorder.NONE}>Borderless</Tag>
+* <Tag border={TagBorder.WITH}>With Border</Tag>
+* ```
+*/
+let TagBorder = /* @__PURE__ */ function(TagBorder$1) {
+	TagBorder$1["NONE"] = "none";
+	TagBorder$1["WITH"] = "with";
+	return TagBorder$1;
+}({});
+/**
+* Enumeration for tag background visibility
+*
+* Controls the background styling of the tag.
+*
+* @enum {string} TagBackground
+* @property {string} NONE - 'none' - No background styling
+* @property {string} WITH - 'with' - Apply background styling
+*
+* @example
+* ```tsx
+* <Tag background={TagBackground.NONE}>No Background</Tag>
+* <Tag background={TagBackground.WITH}>With Background</Tag>
+* ```
+*/
+let TagBackground = /* @__PURE__ */ function(TagBackground$1) {
+	TagBackground$1["NONE"] = "none";
+	TagBackground$1["WITH"] = "with";
+	return TagBackground$1;
+}({});
+const containerVariants = cva("w-fit backdrop-blur", {
+	variants: {
+		roundedSize: {
+			[`${TagRoundedSize.NONE}`]: "rounded-none",
+			[`${TagRoundedSize.SM}`]: "rounded-sm",
+			[`${TagRoundedSize.MD}`]: "rounded-md",
+			[`${TagRoundedSize.LG}`]: "rounded-lg",
+			[`${TagRoundedSize.XL}`]: "rounded-xl",
+			[`${TagRoundedSize.XXL}`]: "rounded-2xl",
+			[`${TagRoundedSize.XXXL}`]: "rounded-3xl",
+			[`${TagRoundedSize.FULL}`]: "rounded-full"
+		},
+		color: {
+			[`${TagColor.SUCCESS}`]: "border-success bg-success/10 text-success",
+			[`${TagColor.ERROR}`]: "border-error bg-error/10 text-error",
+			[`${TagColor.WARNING}`]: "border-warning bg-warning/10 text-warning",
+			[`${TagColor.NEUTRAL}`]: "/10 border-neutral bg-neutral/10 text-neutral",
+			[`${TagColor.TEXT}`]: "border-text bg-text/10 text-text"
+		},
+		size: {
+			[`${TagSize.XS}`]: "border-[1.2px] px-2 py-0.5 text-xs",
+			[`${TagSize.SM}`]: "border-[1.5px] px-2 py-0.5 text-sm",
+			[`${TagSize.MD}`]: "border-2 px-2 py-1 text-base",
+			[`${TagSize.LG}`]: "border-2 px-3 py-2 text-lg",
+			[`${TagSize.XL}`]: "border-2 px-5 py-4 text-xl"
+		},
+		border: {
+			[`${TagBorder.NONE}`]: "border-none",
+			[`${TagBorder.WITH}`]: "border-[1.5px] border-text"
+		},
+		background: {
+			[`${TagBackground.NONE}`]: "bg-none",
+			[`${TagBackground.WITH}`]: ""
+		}
+	},
+	defaultVariants: {
+		roundedSize: TagRoundedSize.FULL,
+		border: TagBorder.NONE,
+		color: TagColor.TEXT,
+		size: TagSize.MD
+	}
+});
+/**
+* Tag component for displaying labels, categories, status indicators, and badges
+*
+* The Tag component is a versatile labeling element that supports multiple visual variants
+* for different use cases. It provides semantic color options, flexible sizing, and
+* customizable styling options for borders and backgrounds.
+*
+* ## Features
+* - **Semantic Colors**: Success, error, warning, neutral, and text color themes
+* - **Flexible Sizing**: Five size variants from extra small to extra large
+* - **Border Radius Options**: Eight rounding options from none to fully rounded
+* - **Border Control**: Optional borders for enhanced visual separation
+* - **Background Control**: Configurable background styling
+* - **Accessibility**: Proper HTML semantics and keyboard navigation support
+*
+* ## Use Cases
+* - **Status Indicators**: Show completion, error, or pending states
+* - **Category Labels**: Organize and categorize content
+* - **Badges**: Display counts, notifications, or achievements
+* - **Keywords**: Tag content with relevant keywords or topics
+* - **Metadata**: Show additional information like dates, authors, or types
+*
+* ## Design Principles
+* - Maintains readability across all size and color combinations
+* - Uses backdrop blur effect for subtle transparency
+* - Follows consistent spacing and typography scales
+* - Provides sufficient color contrast for accessibility
+*
+* @param {TagProps} props - The properties for the Tag component
+* @returns {JSX.Element} The rendered tag element
+*
+* @example
+* ```tsx
+* // Basic status tags
+* <Tag color={TagColor.SUCCESS}>Completed</Tag>
+* <Tag color={TagColor.ERROR}>Failed</Tag>
+* <Tag color={TagColor.WARNING}>In Progress</Tag>
+*
+* // Category tags with borders
+* <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>
+*   Technology
+* </Tag>
+* <Tag color={TagColor.TEXT} border={TagBorder.WITH}>
+*   Design
+* </Tag>
+*
+* // Size variations for hierarchy
+* <div className="flex items-center gap-2">
+*   <Tag size={TagSize.XS} color={TagColor.NEUTRAL}>Minor</Tag>
+*   <Tag size={TagSize.SM} color={TagColor.TEXT}>Standard</Tag>
+*   <Tag size={TagSize.LG} color={TagColor.SUCCESS}>Important</Tag>
+* </div>
+*
+* // Rounded variations
+* <div className="flex gap-2">
+*   <Tag roundedSize={TagRoundedSize.NONE}>Sharp</Tag>
+*   <Tag roundedSize={TagRoundedSize.MD}>Rounded</Tag>
+*   <Tag roundedSize={TagRoundedSize.FULL}>Pill</Tag>
+* </div>
+*
+* // Custom styled tag
+* <Tag
+*   color={TagColor.WARNING}
+*   size={TagSize.LG}
+*   border={TagBorder.WITH}
+*   roundedSize={TagRoundedSize.LG}
+*   className="font-bold uppercase tracking-wide"
+* >
+*   Custom Style
+* </Tag>
+*
+* // Interactive tags with click handlers
+* <Tag
+*   color={TagColor.SUCCESS}
+*   onClick={() => console.log('Tag clicked')}
+*   className="cursor-pointer hover:opacity-80 transition-opacity"
+* >
+*   Clickable Tag
+* </Tag>
+* ```
+*
+* @see {@link TagColor} - Available color theme options
+* @see {@link TagSize} - Available size variants
+* @see {@link TagRoundedSize} - Available border radius options
+* @see {@link TagBorder} - Border visibility options
+* @see {@link TagBackground} - Background styling options
+*/
+const Tag = ({ children, color, roundedSize, size, border, background, className,...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: containerVariants({
+			color,
+			roundedSize,
+			size,
+			border,
+			background,
+			className
+		}),
+		...props,
+		children
+	});
+};
+
+//#endregion
+export { Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/Tag/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Tag: FC<TagProps>"],"sources":["../../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/**\n * Properties for the Tag component extending HTML div attributes and variant options\n *\n * @interface TagProps\n * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}\n * @extends {HTMLAttributes<HTMLDivElement>}\n *\n * @property {ReactNode} children - The content to display inside the tag\n * @property {TagColor} [color] - Color theme variant of the tag\n * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag\n * @property {TagSize} [size] - Size variant affecting padding and font size\n * @property {TagBorder} [border] - Whether to show a border around the tag\n * @property {TagBackground} [background] - Background visibility option\n * @property {string} [className] - Additional CSS classes for custom styling\n *\n * @example\n * ```tsx\n * // Basic tag\n * <Tag>Default Tag</Tag>\n *\n * // Success tag with border\n * <Tag color={TagColor.SUCCESS} border={TagBorder.WITH}>\n *   Success Status\n * </Tag>\n *\n * // Large warning tag\n * <Tag color={TagColor.WARNING} size={TagSize.LG}>\n *   Important Warning\n * </Tag>\n * ```\n */\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n  HTMLAttributes<HTMLDivElement>;\n\n/**\n * Enumeration for tag border radius sizes\n *\n * Controls the roundedness of tag corners, from sharp edges to fully rounded pills.\n *\n * @enum {string} TagRoundedSize\n * @property {string} NONE - 'none' - No border radius (sharp corners)\n * @property {string} SM - 'sm' - Small border radius (2px)\n * @property {string} MD - 'md' - Medium border radius (6px)\n * @property {string} LG - 'lg' - Large border radius (8px)\n * @property {string} XL - 'xl' - Extra large border radius (12px)\n * @property {string} XXL - '2xl' - 2x large border radius (16px)\n * @property {string} XXXL - '3xl' - 3x large border radius (24px)\n * @property {string} FULL - 'full' - Fully rounded (50% border radius, pill shape)\n *\n * @example\n * ```tsx\n * // Sharp corners\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp Tag</Tag>\n *\n * // Pill-shaped tag\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill Tag</Tag>\n *\n * // Medium rounded corners\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded Tag</Tag>\n * ```\n */\nexport enum TagRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  XXL = '2xl',\n  XXXL = '3xl',\n  FULL = 'full',\n}\n\n/**\n * Enumeration for tag color themes\n *\n * Provides semantic color options for different tag purposes and meanings.\n * Each color includes background, border, and text color variations.\n *\n * @enum {string} TagColor\n * @property {string} SUCCESS - 'success' - Green theme for positive states, success messages, or completed items\n * @property {string} ERROR - 'error' - Red theme for error states, warnings, or failed operations\n * @property {string} WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices\n * @property {string} NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content\n * @property {string} TEXT - 'text' - Default text color theme for general purpose tags\n *\n * @example\n * ```tsx\n * // Status indicators\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>Pending</Tag>\n *\n * // Category tags\n * <Tag color={TagColor.NEUTRAL}>Category</Tag>\n * <Tag color={TagColor.TEXT}>General</Tag>\n * ```\n */\nexport enum TagColor {\n  SUCCESS = 'success',\n  ERROR = 'error',\n  WARNING = 'warning',\n  NEUTRAL = 'neutral',\n  TEXT = 'text',\n}\n\n/**\n * Enumeration for tag size variants\n *\n * Controls the overall size of tags including padding, font size, and border thickness.\n * Sizes are designed to maintain visual hierarchy and readability.\n *\n * @enum {string} TagSize\n * @property {string} XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)\n * @property {string} SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)\n * @property {string} MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size\n * @property {string} LG - 'lg' - Large (2rem padding, text-lg, 2px border)\n * @property {string} XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)\n *\n * @example\n * ```tsx\n * // Different sizes for hierarchy\n * <Tag size={TagSize.XS}>Small detail</Tag>\n * <Tag size={TagSize.SM}>Minor category</Tag>\n * <Tag size={TagSize.MD}>Standard tag</Tag>\n * <Tag size={TagSize.LG}>Important label</Tag>\n * <Tag size={TagSize.XL}>Hero tag</Tag>\n * ```\n */\nexport enum TagSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\n/**\n * Enumeration for tag border visibility\n *\n * Controls whether a border is displayed around the tag.\n *\n * @enum {string} TagBorder\n * @property {string} NONE - 'none' - No border (default)\n * @property {string} WITH - 'with' - Show border with 1.5px thickness\n *\n * @example\n * ```tsx\n * <Tag border={TagBorder.NONE}>Borderless</Tag>\n * <Tag border={TagBorder.WITH}>With Border</Tag>\n * ```\n */\nexport enum TagBorder {\n  NONE = 'none',\n  WITH = 'with',\n}\n\n/**\n * Enumeration for tag background visibility\n *\n * Controls the background styling of the tag.\n *\n * @enum {string} TagBackground\n * @property {string} NONE - 'none' - No background styling\n * @property {string} WITH - 'with' - Apply background styling\n *\n * @example\n * ```tsx\n * <Tag background={TagBackground.NONE}>No Background</Tag>\n * <Tag background={TagBackground.WITH}>With Background</Tag>\n * ```\n */\nexport enum TagBackground {\n  NONE = 'none',\n  WITH = 'with',\n}\n\nconst containerVariants = cva('w-fit backdrop-blur', {\n  variants: {\n    roundedSize: {\n      [`${TagRoundedSize.NONE}`]: 'rounded-none',\n      [`${TagRoundedSize.SM}`]: 'rounded-sm',\n      [`${TagRoundedSize.MD}`]: 'rounded-md',\n      [`${TagRoundedSize.LG}`]: 'rounded-lg',\n      [`${TagRoundedSize.XL}`]: 'rounded-xl',\n      [`${TagRoundedSize.XXL}`]: 'rounded-2xl',\n      [`${TagRoundedSize.XXXL}`]: 'rounded-3xl',\n      [`${TagRoundedSize.FULL}`]: 'rounded-full',\n    },\n    color: {\n      [`${TagColor.SUCCESS}`]: 'border-success bg-success/10 text-success',\n      [`${TagColor.ERROR}`]: 'border-error bg-error/10 text-error',\n      [`${TagColor.WARNING}`]: 'border-warning bg-warning/10 text-warning',\n      [`${TagColor.NEUTRAL}`]: '/10 border-neutral bg-neutral/10 text-neutral',\n      [`${TagColor.TEXT}`]: 'border-text bg-text/10 text-text',\n    },\n    size: {\n      [`${TagSize.XS}`]: 'border-[1.2px] px-2 py-0.5 text-xs',\n      [`${TagSize.SM}`]: 'border-[1.5px] px-2 py-0.5 text-sm',\n      [`${TagSize.MD}`]: 'border-2 px-2 py-1 text-base',\n      [`${TagSize.LG}`]: 'border-2 px-3 py-2 text-lg',\n      [`${TagSize.XL}`]: 'border-2 px-5 py-4 text-xl',\n    },\n    border: {\n      [`${TagBorder.NONE}`]: 'border-none',\n      [`${TagBorder.WITH}`]: 'border-[1.5px] border-text',\n    },\n    background: {\n      [`${TagBackground.NONE}`]: 'bg-none',\n      [`${TagBackground.WITH}`]: '',\n    },\n  },\n\n  defaultVariants: {\n    roundedSize: TagRoundedSize.FULL,\n    border: TagBorder.NONE,\n    color: TagColor.TEXT,\n    size: TagSize.MD,\n  },\n});\n\n/**\n * Tag component for displaying labels, categories, status indicators, and badges\n *\n * The Tag component is a versatile labeling element that supports multiple visual variants\n * for different use cases. It provides semantic color options, flexible sizing, and\n * customizable styling options for borders and backgrounds.\n *\n * ## Features\n * - **Semantic Colors**: Success, error, warning, neutral, and text color themes\n * - **Flexible Sizing**: Five size variants from extra small to extra large\n * - **Border Radius Options**: Eight rounding options from none to fully rounded\n * - **Border Control**: Optional borders for enhanced visual separation\n * - **Background Control**: Configurable background styling\n * - **Accessibility**: Proper HTML semantics and keyboard navigation support\n *\n * ## Use Cases\n * - **Status Indicators**: Show completion, error, or pending states\n * - **Category Labels**: Organize and categorize content\n * - **Badges**: Display counts, notifications, or achievements\n * - **Keywords**: Tag content with relevant keywords or topics\n * - **Metadata**: Show additional information like dates, authors, or types\n *\n * ## Design Principles\n * - Maintains readability across all size and color combinations\n * - Uses backdrop blur effect for subtle transparency\n * - Follows consistent spacing and typography scales\n * - Provides sufficient color contrast for accessibility\n *\n * @param {TagProps} props - The properties for the Tag component\n * @returns {JSX.Element} The rendered tag element\n *\n * @example\n * ```tsx\n * // Basic status tags\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>In Progress</Tag>\n *\n * // Category tags with borders\n * <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>\n *   Technology\n * </Tag>\n * <Tag color={TagColor.TEXT} border={TagBorder.WITH}>\n *   Design\n * </Tag>\n *\n * // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n *   <Tag size={TagSize.XS} color={TagColor.NEUTRAL}>Minor</Tag>\n *   <Tag size={TagSize.SM} color={TagColor.TEXT}>Standard</Tag>\n *   <Tag size={TagSize.LG} color={TagColor.SUCCESS}>Important</Tag>\n * </div>\n *\n * // Rounded variations\n * <div className=\"flex gap-2\">\n *   <Tag roundedSize={TagRoundedSize.NONE}>Sharp</Tag>\n *   <Tag roundedSize={TagRoundedSize.MD}>Rounded</Tag>\n *   <Tag roundedSize={TagRoundedSize.FULL}>Pill</Tag>\n * </div>\n *\n * // Custom styled tag\n * <Tag\n *   color={TagColor.WARNING}\n *   size={TagSize.LG}\n *   border={TagBorder.WITH}\n *   roundedSize={TagRoundedSize.LG}\n *   className=\"font-bold uppercase tracking-wide\"\n * >\n *   Custom Style\n * </Tag>\n *\n * // Interactive tags with click handlers\n * <Tag\n *   color={TagColor.SUCCESS}\n *   onClick={() => console.log('Tag clicked')}\n *   className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n * >\n *   Clickable Tag\n * </Tag>\n * ```\n *\n * @see {@link TagColor} - Available color theme options\n * @see {@link TagSize} - Available size variants\n * @see {@link TagRoundedSize} - Available border radius options\n * @see {@link TagBorder} - Border visibility options\n * @see {@link TagBackground} - Background styling options\n */\nexport const Tag: FC<TagProps> = ({\n  children,\n  color,\n  roundedSize,\n  size,\n  border,\n  background,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={containerVariants({\n        color,\n        roundedSize,\n        size,\n        border,\n        background,\n        className,\n      })}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAY,4DAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BF,IAAY,gDAAL;AACL;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BF,IAAY,8CAAL;AACL;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;AAkBF,IAAY,kDAAL;AACL;AACA;;;;;;;;;;;;;;;;;;AAkBF,IAAY,0DAAL;AACL;AACA;;;AAGF,MAAM,oBAAoB,IAAI,uBAAuB;CACnD,UAAU;EACR,aAAa;IACV,GAAG,eAAe,SAAS;IAC3B,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,QAAQ;IAC1B,GAAG,eAAe,SAAS;IAC3B,GAAG,eAAe,SAAS;GAC7B;EACD,OAAO;IACJ,GAAG,SAAS,YAAY;IACxB,GAAG,SAAS,UAAU;IACtB,GAAG,SAAS,YAAY;IACxB,GAAG,SAAS,YAAY;IACxB,GAAG,SAAS,SAAS;GACvB;EACD,MAAM;IACH,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;GACpB;EACD,QAAQ;IACL,GAAG,UAAU,SAAS;IACtB,GAAG,UAAU,SAAS;GACxB;EACD,YAAY;IACT,GAAG,cAAc,SAAS;IAC1B,GAAG,cAAc,SAAS;GAC5B;EACF;CAED,iBAAiB;EACf,aAAa,eAAe;EAC5B,QAAQ,UAAU;EAClB,OAAO,SAAS;EAChB,MAAM,QAAQ;EACf;CACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFF,MAAaA,OAAqB,EAChC,UACA,OACA,aACA,MACA,QACA,YACA,UACA,GAAG,YACC;AACJ,QACE,oBAAC;EACC,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACF,GAAI;EAEH;GACG"}