@zidsa/zidmui 2.1.8 → 2.3.0-beta.0

package/dist/react/es/stories/css/Switch.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Switch.stories.js","sources":["../../../../../src/stories/css/Switch.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n  title: 'CSS Styles/Components/Switch',\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Colors: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n      <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Color Variants (Checked)</h3>\n      <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap', alignItems: 'center' }}>\n        <label className=\"zid-switch zid-switch--primary\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n          <span className=\"zid-switch__label\">Primary (Success)</span>\n        </label>\n        <label className=\"zid-switch zid-switch--secondary\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n          <span className=\"zid-switch__label\">Secondary (Purple)</span>\n        </label>\n        <label className=\"zid-switch zid-switch--error\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n          <span className=\"zid-switch__label\">Error</span>\n        </label>\n      </div>\n    </div>\n  ),\n};\n\nexport const States: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n      <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Switch States</h3>\n      <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap', alignItems: 'center' }}>\n        <label className=\"zid-switch zid-switch--primary\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n          <span className=\"zid-switch__label\">Off</span>\n        </label>\n        <label className=\"zid-switch zid-switch--primary\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n          <span className=\"zid-switch__label\">On</span>\n        </label>\n        <label className=\"zid-switch zid-switch--primary zid-switch--disabled\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" disabled />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n          <span className=\"zid-switch__label\">Disabled Off</span>\n        </label>\n        <label className=\"zid-switch zid-switch--primary zid-switch--disabled\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked disabled />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n          <span className=\"zid-switch__label\">Disabled On</span>\n        </label>\n      </div>\n    </div>\n  ),\n};\n\n\nexport const WithoutLabel: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Without Label</h3>\n      <div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>\n        <label className=\"zid-switch zid-switch--primary\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n        </label>\n        <label className=\"zid-switch zid-switch--primary\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n        </label>\n        <label className=\"zid-switch zid-switch--secondary\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n        </label>\n        <label className=\"zid-switch zid-switch--error\">\n          <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n          <span className=\"zid-switch__track\">\n            <span className=\"zid-switch__thumb\"></span>\n          </span>\n        </label>\n      </div>\n    </div>\n  ),\n};\n\nexport const SettingsExample: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '400px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Settings Example</h3>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--zid-divider)' }}>\n          <div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontWeight: 500 }}>Email Notifications</div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontSize: '14px', color: 'var(--zid-text-secondary)' }}>Receive email updates about your account</div>\n          </div>\n          <label className=\"zid-switch zid-switch--primary\">\n            <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n            <span className=\"zid-switch__track\">\n              <span className=\"zid-switch__thumb\"></span>\n            </span>\n          </label>\n        </div>\n        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--zid-divider)' }}>\n          <div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontWeight: 500 }}>Push Notifications</div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontSize: '14px', color: 'var(--zid-text-secondary)' }}>Receive push notifications on your device</div>\n          </div>\n          <label className=\"zid-switch zid-switch--primary\">\n            <input type=\"checkbox\" className=\"zid-switch__input\" />\n            <span className=\"zid-switch__track\">\n              <span className=\"zid-switch__thumb\"></span>\n            </span>\n          </label>\n        </div>\n        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--zid-divider)' }}>\n          <div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontWeight: 500 }}>Dark Mode</div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontSize: '14px', color: 'var(--zid-text-secondary)' }}>Use dark theme for the interface</div>\n          </div>\n          <label className=\"zid-switch zid-switch--secondary\">\n            <input type=\"checkbox\" className=\"zid-switch__input\" defaultChecked />\n            <span className=\"zid-switch__track\">\n              <span className=\"zid-switch__thumb\"></span>\n            </span>\n          </label>\n        </div>\n        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--zid-divider)' }}>\n          <div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontWeight: 500, color: 'var(--zid-text-disabled)' }}>Beta Features</div>\n            <div style={{ fontFamily: 'var(--zid-font-family)', fontSize: '14px', color: 'var(--zid-text-disabled)' }}>Not available for your account</div>\n          </div>\n          <label className=\"zid-switch zid-switch--primary zid-switch--disabled\">\n            <input type=\"checkbox\" className=\"zid-switch__input\" disabled />\n            <span className=\"zid-switch__track\">\n              <span className=\"zid-switch__thumb\"></span>\n            </span>\n          </label>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":[],"mappings":"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"}

package/dist/react/es/stories/css/Table.stories.js

@@ -1,171 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-/* empty css                  */
-const sampleData = [
-  { id: 1, name: "John Doe", email: "john@example.com", status: "Active", role: "Admin" },
-  { id: 2, name: "Jane Smith", email: "jane@example.com", status: "Pending", role: "User" },
-  { id: 3, name: "Bob Johnson", email: "bob@example.com", status: "Inactive", role: "User" },
-  { id: 4, name: "Alice Brown", email: "alice@example.com", status: "Active", role: "Editor" },
-  { id: 5, name: "Charlie Wilson", email: "charlie@example.com", status: "Active", role: "User" }
-];
-const meta = {
-  title: "CSS Styles/Components/Table",
-  parameters: {
-    layout: "padded"
-  },
-  tags: ["autodocs"]
-};
-const Variants = {
-  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "48px" }, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Default" }),
-      /* @__PURE__ */ jsxs("table", { className: "zid-table", children: [
-        /* @__PURE__ */ jsx("thead", { className: "zid-table__head", children: /* @__PURE__ */ jsxs("tr", { className: "zid-table__row", children: [
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "ID" }),
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Name" }),
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Email" }),
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Status" })
-        ] }) }),
-        /* @__PURE__ */ jsx("tbody", { className: "zid-table__body", children: sampleData.slice(0, 4).map((row) => /* @__PURE__ */ jsxs("tr", { className: "zid-table__row", children: [
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.id }),
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.name }),
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.email }),
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.status })
-        ] }, row.id)) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Striped" }),
-      /* @__PURE__ */ jsxs("table", { className: "zid-table zid-table--striped", children: [
-        /* @__PURE__ */ jsx("thead", { className: "zid-table__head", children: /* @__PURE__ */ jsxs("tr", { className: "zid-table__row", children: [
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "ID" }),
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Name" }),
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Email" }),
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Status" })
-        ] }) }),
-        /* @__PURE__ */ jsx("tbody", { className: "zid-table__body", children: sampleData.slice(0, 4).map((row) => /* @__PURE__ */ jsxs("tr", { className: "zid-table__row", children: [
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.id }),
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.name }),
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.email }),
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.status })
-        ] }, row.id)) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Bordered" }),
-      /* @__PURE__ */ jsxs("table", { className: "zid-table zid-table--bordered", children: [
-        /* @__PURE__ */ jsx("thead", { className: "zid-table__head", children: /* @__PURE__ */ jsxs("tr", { className: "zid-table__row", children: [
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "ID" }),
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Name" }),
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Email" }),
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Status" })
-        ] }) }),
-        /* @__PURE__ */ jsx("tbody", { className: "zid-table__body", children: sampleData.slice(0, 4).map((row) => /* @__PURE__ */ jsxs("tr", { className: "zid-table__row", children: [
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.id }),
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.name }),
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.email }),
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.status })
-        ] }, row.id)) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Hoverable" }),
-      /* @__PURE__ */ jsxs("table", { className: "zid-table zid-table--hoverable", children: [
-        /* @__PURE__ */ jsx("thead", { className: "zid-table__head", children: /* @__PURE__ */ jsxs("tr", { className: "zid-table__row", children: [
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "ID" }),
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Name" }),
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Email" }),
-          /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Status" })
-        ] }) }),
-        /* @__PURE__ */ jsx("tbody", { className: "zid-table__body", children: sampleData.slice(0, 4).map((row) => /* @__PURE__ */ jsxs("tr", { className: "zid-table__row", children: [
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.id }),
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.name }),
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.email }),
-          /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.status })
-        ] }, row.id)) })
-      ] })
-    ] })
-  ] })
-};
-const statusMap = {
-  "Active": /* @__PURE__ */ jsxs("span", { className: "zid-status zid-status--success zid-status--sm", children: [
-    /* @__PURE__ */ jsx("span", { className: "zid-status__dot" }),
-    "Active"
-  ] }),
-  "Pending": /* @__PURE__ */ jsxs("span", { className: "zid-status zid-status--warning zid-status--sm", children: [
-    /* @__PURE__ */ jsx("span", { className: "zid-status__dot" }),
-    "Pending"
-  ] }),
-  "Inactive": /* @__PURE__ */ jsxs("span", { className: "zid-status zid-status--error zid-status--sm", children: [
-    /* @__PURE__ */ jsx("span", { className: "zid-status__dot" }),
-    "Inactive"
-  ] })
-};
-const WithStatusBadges = {
-  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
-    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "With Status Badges" }),
-    /* @__PURE__ */ jsxs("table", { className: "zid-table zid-table--hoverable", children: [
-      /* @__PURE__ */ jsx("thead", { className: "zid-table__head", children: /* @__PURE__ */ jsxs("tr", { className: "zid-table__row", children: [
-        /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "ID" }),
-        /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Name" }),
-        /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Email" }),
-        /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Role" }),
-        /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Status" })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { className: "zid-table__body", children: sampleData.map((row) => /* @__PURE__ */ jsxs("tr", { className: "zid-table__row", children: [
-        /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.id }),
-        /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.name }),
-        /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.email }),
-        /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.role }),
-        /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: statusMap[row.status] })
-      ] }, row.id)) })
-    ] })
-  ] })
-};
-const WithActions = {
-  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
-    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "With Action Buttons" }),
-    /* @__PURE__ */ jsxs("table", { className: "zid-table zid-table--hoverable", children: [
-      /* @__PURE__ */ jsx("thead", { className: "zid-table__head", children: /* @__PURE__ */ jsxs("tr", { className: "zid-table__row", children: [
-        /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "ID" }),
-        /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Name" }),
-        /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Email" }),
-        /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Actions" })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { className: "zid-table__body", children: sampleData.map((row) => /* @__PURE__ */ jsxs("tr", { className: "zid-table__row", children: [
-        /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.id }),
-        /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.name }),
-        /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: row.email }),
-        /* @__PURE__ */ jsx("td", { className: "zid-table__cell", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
-          /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--sm", children: "Edit" }),
-          /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--error zid-button--sm", children: "Delete" })
-        ] }) })
-      ] }, row.id)) })
-    ] })
-  ] })
-};
-const EmptyState = {
-  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
-    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Empty State" }),
-    /* @__PURE__ */ jsxs("table", { className: "zid-table", children: [
-      /* @__PURE__ */ jsx("thead", { className: "zid-table__head", children: /* @__PURE__ */ jsxs("tr", { className: "zid-table__row", children: [
-        /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "ID" }),
-        /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Name" }),
-        /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Email" }),
-        /* @__PURE__ */ jsx("th", { className: "zid-table__cell", children: "Status" })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { className: "zid-table__body", children: /* @__PURE__ */ jsx("tr", { className: "zid-table__row", children: /* @__PURE__ */ jsx("td", { className: "zid-table__cell", colSpan: 4, style: { textAlign: "center", padding: "48px" }, children: /* @__PURE__ */ jsxs("div", { style: { color: "var(--zid-text-secondary)", fontFamily: "var(--zid-font-family)" }, children: [
-        /* @__PURE__ */ jsx("div", { style: { fontSize: "48px", marginBottom: "16px" }, children: "📭" }),
-        /* @__PURE__ */ jsx("div", { style: { fontSize: "16px", fontWeight: 500, marginBottom: "8px" }, children: "No data found" }),
-        /* @__PURE__ */ jsx("div", { style: { fontSize: "14px" }, children: "Try adjusting your search or filters" })
-      ] }) }) }) })
-    ] })
-  ] })
-};
-export {
-  EmptyState,
-  Variants,
-  WithActions,
-  WithStatusBadges,
-  meta as default
-};
-//# sourceMappingURL=Table.stories.js.map

package/dist/react/es/stories/css/Table.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Table.stories.js","sources":["../../../../../src/stories/css/Table.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport type { ReactNode } from 'react';\nimport '../../css/index.css';\n\nconst sampleData = [\n  { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active', role: 'Admin' },\n  { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Pending', role: 'User' },\n  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'Inactive', role: 'User' },\n  { id: 4, name: 'Alice Brown', email: 'alice@example.com', status: 'Active', role: 'Editor' },\n  { id: 5, name: 'Charlie Wilson', email: 'charlie@example.com', status: 'Active', role: 'User' },\n];\n\nconst meta = {\n  title: 'CSS Styles/Components/Table',\n  parameters: {\n    layout: 'padded',\n  },\n  tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Variants: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '48px' }}>\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Default</h3>\n        <table className=\"zid-table\">\n          <thead className=\"zid-table__head\">\n            <tr className=\"zid-table__row\">\n              <th className=\"zid-table__cell\">ID</th>\n              <th className=\"zid-table__cell\">Name</th>\n              <th className=\"zid-table__cell\">Email</th>\n              <th className=\"zid-table__cell\">Status</th>\n            </tr>\n          </thead>\n          <tbody className=\"zid-table__body\">\n            {sampleData.slice(0, 4).map(row => (\n              <tr key={row.id} className=\"zid-table__row\">\n                <td className=\"zid-table__cell\">{row.id}</td>\n                <td className=\"zid-table__cell\">{row.name}</td>\n                <td className=\"zid-table__cell\">{row.email}</td>\n                <td className=\"zid-table__cell\">{row.status}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Striped</h3>\n        <table className=\"zid-table zid-table--striped\">\n          <thead className=\"zid-table__head\">\n            <tr className=\"zid-table__row\">\n              <th className=\"zid-table__cell\">ID</th>\n              <th className=\"zid-table__cell\">Name</th>\n              <th className=\"zid-table__cell\">Email</th>\n              <th className=\"zid-table__cell\">Status</th>\n            </tr>\n          </thead>\n          <tbody className=\"zid-table__body\">\n            {sampleData.slice(0, 4).map(row => (\n              <tr key={row.id} className=\"zid-table__row\">\n                <td className=\"zid-table__cell\">{row.id}</td>\n                <td className=\"zid-table__cell\">{row.name}</td>\n                <td className=\"zid-table__cell\">{row.email}</td>\n                <td className=\"zid-table__cell\">{row.status}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Bordered</h3>\n        <table className=\"zid-table zid-table--bordered\">\n          <thead className=\"zid-table__head\">\n            <tr className=\"zid-table__row\">\n              <th className=\"zid-table__cell\">ID</th>\n              <th className=\"zid-table__cell\">Name</th>\n              <th className=\"zid-table__cell\">Email</th>\n              <th className=\"zid-table__cell\">Status</th>\n            </tr>\n          </thead>\n          <tbody className=\"zid-table__body\">\n            {sampleData.slice(0, 4).map(row => (\n              <tr key={row.id} className=\"zid-table__row\">\n                <td className=\"zid-table__cell\">{row.id}</td>\n                <td className=\"zid-table__cell\">{row.name}</td>\n                <td className=\"zid-table__cell\">{row.email}</td>\n                <td className=\"zid-table__cell\">{row.status}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Hoverable</h3>\n        <table className=\"zid-table zid-table--hoverable\">\n          <thead className=\"zid-table__head\">\n            <tr className=\"zid-table__row\">\n              <th className=\"zid-table__cell\">ID</th>\n              <th className=\"zid-table__cell\">Name</th>\n              <th className=\"zid-table__cell\">Email</th>\n              <th className=\"zid-table__cell\">Status</th>\n            </tr>\n          </thead>\n          <tbody className=\"zid-table__body\">\n            {sampleData.slice(0, 4).map(row => (\n              <tr key={row.id} className=\"zid-table__row\">\n                <td className=\"zid-table__cell\">{row.id}</td>\n                <td className=\"zid-table__cell\">{row.name}</td>\n                <td className=\"zid-table__cell\">{row.email}</td>\n                <td className=\"zid-table__cell\">{row.status}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  ),\n};\n\n\nconst statusMap: Record<string, ReactNode> = {\n  'Active': <span className=\"zid-status zid-status--success zid-status--sm\"><span className=\"zid-status__dot\"></span>Active</span>,\n  'Pending': <span className=\"zid-status zid-status--warning zid-status--sm\"><span className=\"zid-status__dot\"></span>Pending</span>,\n  'Inactive': <span className=\"zid-status zid-status--error zid-status--sm\"><span className=\"zid-status__dot\"></span>Inactive</span>,\n};\n\nexport const WithStatusBadges: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>With Status Badges</h3>\n      <table className=\"zid-table zid-table--hoverable\">\n        <thead className=\"zid-table__head\">\n          <tr className=\"zid-table__row\">\n            <th className=\"zid-table__cell\">ID</th>\n            <th className=\"zid-table__cell\">Name</th>\n            <th className=\"zid-table__cell\">Email</th>\n            <th className=\"zid-table__cell\">Role</th>\n            <th className=\"zid-table__cell\">Status</th>\n          </tr>\n        </thead>\n        <tbody className=\"zid-table__body\">\n          {sampleData.map(row => (\n            <tr key={row.id} className=\"zid-table__row\">\n              <td className=\"zid-table__cell\">{row.id}</td>\n              <td className=\"zid-table__cell\">{row.name}</td>\n              <td className=\"zid-table__cell\">{row.email}</td>\n              <td className=\"zid-table__cell\">{row.role}</td>\n              <td className=\"zid-table__cell\">{statusMap[row.status]}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  ),\n};\n\nexport const WithActions: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>With Action Buttons</h3>\n      <table className=\"zid-table zid-table--hoverable\">\n        <thead className=\"zid-table__head\">\n          <tr className=\"zid-table__row\">\n            <th className=\"zid-table__cell\">ID</th>\n            <th className=\"zid-table__cell\">Name</th>\n            <th className=\"zid-table__cell\">Email</th>\n            <th className=\"zid-table__cell\">Actions</th>\n          </tr>\n        </thead>\n        <tbody className=\"zid-table__body\">\n          {sampleData.map(row => (\n            <tr key={row.id} className=\"zid-table__row\">\n              <td className=\"zid-table__cell\">{row.id}</td>\n              <td className=\"zid-table__cell\">{row.name}</td>\n              <td className=\"zid-table__cell\">{row.email}</td>\n              <td className=\"zid-table__cell\">\n                <div style={{ display: 'flex', gap: '8px' }}>\n                  <button className=\"zid-button zid-button--text zid-button--primary zid-button--sm\">Edit</button>\n                  <button className=\"zid-button zid-button--text zid-button--error zid-button--sm\">Delete</button>\n                </div>\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  ),\n};\n\nexport const EmptyState: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Empty State</h3>\n      <table className=\"zid-table\">\n        <thead className=\"zid-table__head\">\n          <tr className=\"zid-table__row\">\n            <th className=\"zid-table__cell\">ID</th>\n            <th className=\"zid-table__cell\">Name</th>\n            <th className=\"zid-table__cell\">Email</th>\n            <th className=\"zid-table__cell\">Status</th>\n          </tr>\n        </thead>\n        <tbody className=\"zid-table__body\">\n          <tr className=\"zid-table__row\">\n            <td className=\"zid-table__cell\" colSpan={4} style={{ textAlign: 'center', padding: '48px' }}>\n              <div style={{ color: 'var(--zid-text-secondary)', fontFamily: 'var(--zid-font-family)' }}>\n                <div style={{ fontSize: '48px', marginBottom: '16px' }}>📭</div>\n                <div style={{ fontSize: '16px', fontWeight: 500, marginBottom: '8px' }}>No data found</div>\n                <div style={{ fontSize: '14px' }}>Try adjusting your search or filters</div>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  ),\n};\n"],"names":[],"mappings":"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"}

package/dist/react/es/stories/css/Tooltip.stories.js

@@ -1,99 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-/* empty css                  */
-const meta = {
-  title: "CSS Styles/Components/Tooltip",
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"]
-};
-const Positions = {
-  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "80px", padding: "80px" }, children: [
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
-      /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Top" }),
-      /* @__PURE__ */ jsx("div", { className: "zid-tooltip__content zid-tooltip__content--top", children: /* @__PURE__ */ jsx("div", { className: "zid-tooltip__description", children: "Tooltip on top" }) })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Left" }),
-        /* @__PURE__ */ jsx("div", { className: "zid-tooltip__content zid-tooltip__content--left", children: /* @__PURE__ */ jsx("div", { className: "zid-tooltip__description", children: "Tooltip on left" }) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Right" }),
-        /* @__PURE__ */ jsx("div", { className: "zid-tooltip__content zid-tooltip__content--right", children: /* @__PURE__ */ jsx("div", { className: "zid-tooltip__description", children: "Tooltip on right" }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
-      /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Bottom" }),
-      /* @__PURE__ */ jsx("div", { className: "zid-tooltip__content zid-tooltip__content--bottom", children: /* @__PURE__ */ jsx("div", { className: "zid-tooltip__description", children: "Tooltip on bottom" }) })
-    ] }) })
-  ] })
-};
-const WithTitle = {
-  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", padding: "80px" }, children: [
-    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Tooltip with Title" }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "32px", flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "With Title" }),
-        /* @__PURE__ */ jsxs("div", { className: "zid-tooltip__content zid-tooltip__content--top zid-tooltip__content--multiline", children: [
-          /* @__PURE__ */ jsx("div", { className: "zid-tooltip__title", children: "Tooltip Title" }),
-          /* @__PURE__ */ jsx("div", { className: "zid-tooltip__description", children: "This is a longer description that provides more context about the element." })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Help Info" }),
-        /* @__PURE__ */ jsxs("div", { className: "zid-tooltip__content zid-tooltip__content--top zid-tooltip__content--multiline", children: [
-          /* @__PURE__ */ jsx("div", { className: "zid-tooltip__title", children: "Need Help?" }),
-          /* @__PURE__ */ jsx("div", { className: "zid-tooltip__description", children: "Click here to access our help center and documentation." })
-        ] })
-      ] })
-    ] })
-  ] })
-};
-const SimpleTooltips = {
-  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", padding: "60px" }, children: [
-    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Simple Tooltips" }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "32px", flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--sm", children: "Edit" }),
-        /* @__PURE__ */ jsx("div", { className: "zid-tooltip__content zid-tooltip__content--top", children: /* @__PURE__ */ jsx("div", { className: "zid-tooltip__description", children: "Edit item" }) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--error zid-button--sm", children: "Delete" }),
-        /* @__PURE__ */ jsx("div", { className: "zid-tooltip__content zid-tooltip__content--top", children: /* @__PURE__ */ jsx("div", { className: "zid-tooltip__description", children: "Delete item" }) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "zid-tooltip zid-tooltip--open", children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--sm", children: "Copy" }),
-        /* @__PURE__ */ jsx("div", { className: "zid-tooltip__content zid-tooltip__content--top", children: /* @__PURE__ */ jsx("div", { className: "zid-tooltip__description", children: "Copy to clipboard" }) })
-      ] })
-    ] })
-  ] })
-};
-const Interactive = {
-  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", padding: "60px" }, children: [
-    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Interactive Demo (Hover to show)" }),
-    /* @__PURE__ */ jsx("p", { style: { fontFamily: "var(--zid-font-family)", color: "var(--zid-text-secondary)", marginBottom: "16px" }, children: "Hover over the buttons to see tooltips appear" }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "24px", flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsxs("div", { className: "zid-tooltip", children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Hover me" }),
-        /* @__PURE__ */ jsx("div", { className: "zid-tooltip__content zid-tooltip__content--top", children: /* @__PURE__ */ jsx("div", { className: "zid-tooltip__description", children: "I appear on hover!" }) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "zid-tooltip", children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Or me" }),
-        /* @__PURE__ */ jsx("div", { className: "zid-tooltip__content zid-tooltip__content--bottom", children: /* @__PURE__ */ jsx("div", { className: "zid-tooltip__description", children: "I appear below!" }) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "zid-tooltip", children: [
-        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--md", children: "Me too" }),
-        /* @__PURE__ */ jsx("div", { className: "zid-tooltip__content zid-tooltip__content--right", children: /* @__PURE__ */ jsx("div", { className: "zid-tooltip__description", children: "I appear on the right!" }) })
-      ] })
-    ] })
-  ] })
-};
-export {
-  Interactive,
-  Positions,
-  SimpleTooltips,
-  WithTitle,
-  meta as default
-};
-//# sourceMappingURL=Tooltip.stories.js.map

package/dist/react/es/stories/css/Tooltip.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tooltip.stories.js","sources":["../../../../../src/stories/css/Tooltip.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n  title: 'CSS Styles/Components/Tooltip',\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Positions: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '80px', padding: '80px' }}>\n      <div style={{ display: 'flex', justifyContent: 'center' }}>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Top</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--top\">\n            <div className=\"zid-tooltip__description\">Tooltip on top</div>\n          </div>\n        </div>\n      </div>\n      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Left</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--left\">\n            <div className=\"zid-tooltip__description\">Tooltip on left</div>\n          </div>\n        </div>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Right</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--right\">\n            <div className=\"zid-tooltip__description\">Tooltip on right</div>\n          </div>\n        </div>\n      </div>\n      <div style={{ display: 'flex', justifyContent: 'center' }}>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Bottom</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--bottom\">\n            <div className=\"zid-tooltip__description\">Tooltip on bottom</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const WithTitle: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', padding: '80px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Tooltip with Title</h3>\n      <div style={{ display: 'flex', gap: '32px', flexWrap: 'wrap' }}>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">With Title</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--top zid-tooltip__content--multiline\">\n            <div className=\"zid-tooltip__title\">Tooltip Title</div>\n            <div className=\"zid-tooltip__description\">This is a longer description that provides more context about the element.</div>\n          </div>\n        </div>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Help Info</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--top zid-tooltip__content--multiline\">\n            <div className=\"zid-tooltip__title\">Need Help?</div>\n            <div className=\"zid-tooltip__description\">Click here to access our help center and documentation.</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const SimpleTooltips: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', padding: '60px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Simple Tooltips</h3>\n      <div style={{ display: 'flex', gap: '32px', flexWrap: 'wrap' }}>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--text zid-button--secondary zid-button--sm\">Edit</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--top\">\n            <div className=\"zid-tooltip__description\">Edit item</div>\n          </div>\n        </div>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--text zid-button--error zid-button--sm\">Delete</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--top\">\n            <div className=\"zid-tooltip__description\">Delete item</div>\n          </div>\n        </div>\n        <div className=\"zid-tooltip zid-tooltip--open\">\n          <button className=\"zid-button zid-button--text zid-button--secondary zid-button--sm\">Copy</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--top\">\n            <div className=\"zid-tooltip__description\">Copy to clipboard</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const Interactive: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', padding: '60px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Interactive Demo (Hover to show)</h3>\n      <p style={{ fontFamily: 'var(--zid-font-family)', color: 'var(--zid-text-secondary)', marginBottom: '16px' }}>Hover over the buttons to see tooltips appear</p>\n      <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>\n        <div className=\"zid-tooltip\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Hover me</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--top\">\n            <div className=\"zid-tooltip__description\">I appear on hover!</div>\n          </div>\n        </div>\n        <div className=\"zid-tooltip\">\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Or me</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--bottom\">\n            <div className=\"zid-tooltip__description\">I appear below!</div>\n          </div>\n        </div>\n        <div className=\"zid-tooltip\">\n          <button className=\"zid-button zid-button--text zid-button--secondary zid-button--md\">Me too</button>\n          <div className=\"zid-tooltip__content zid-tooltip__content--right\">\n            <div className=\"zid-tooltip__description\">I appear on the right!</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":[],"mappings":"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"}

package/dist/react/es/stories/css/Utilities.stories.js

@@ -1,136 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-/* empty css                  */
-const meta = {
-  title: "CSS Styles/Utilities",
-  tags: ["autodocs"],
-  parameters: {
-    layout: "fullscreen"
-  }
-};
-const UtilityClasses = {
-  render: () => /* @__PURE__ */ jsxs("div", { style: { padding: "32px", maxWidth: "900px", fontFamily: "var(--zid-font-family, system-ui)" }, children: [
-    /* @__PURE__ */ jsx("h1", { style: { marginBottom: "8px" }, children: "Utility Classes" }),
-    /* @__PURE__ */ jsx("p", { style: { color: "#75727B", marginBottom: "32px" }, children: "Helper classes for common styling needs" }),
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "32px" }, children: [
-      /* @__PURE__ */ jsx("h2", { style: { marginBottom: "16px" }, children: "Display" }),
-      /* @__PURE__ */ jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", overflow: "auto", fontSize: "14px" }, children: `.zid-d-flex      /* display: flex */
-.zid-d-block     /* display: block */
-.zid-d-inline    /* display: inline */
-.zid-d-none      /* display: none */
-.zid-d-grid      /* display: grid */` })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "32px" }, children: [
-      /* @__PURE__ */ jsx("h2", { style: { marginBottom: "16px" }, children: "Flexbox" }),
-      /* @__PURE__ */ jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", overflow: "auto", fontSize: "14px" }, children: `/* Direction */
-.zid-flex-row        /* flex-direction: row */
-.zid-flex-col        /* flex-direction: column */
-
-/* Justify Content */
-.zid-justify-start   /* justify-content: flex-start */
-.zid-justify-end     /* justify-content: flex-end */
-.zid-justify-center  /* justify-content: center */
-.zid-justify-between /* justify-content: space-between */
-.zid-justify-around  /* justify-content: space-around */
-
-/* Align Items */
-.zid-align-start     /* align-items: flex-start */
-.zid-align-end       /* align-items: flex-end */
-.zid-align-center    /* align-items: center */
-.zid-align-stretch   /* align-items: stretch */
-
-/* Flex Wrap */
-.zid-flex-wrap       /* flex-wrap: wrap */
-.zid-flex-nowrap     /* flex-wrap: nowrap */
-
-/* Gap */
-.zid-gap-1           /* gap: 8px */
-.zid-gap-2           /* gap: 16px */
-.zid-gap-3           /* gap: 24px */
-.zid-gap-4           /* gap: 32px */` })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "32px" }, children: [
-      /* @__PURE__ */ jsx("h2", { style: { marginBottom: "16px" }, children: "Spacing (Margin & Padding)" }),
-      /* @__PURE__ */ jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", overflow: "auto", fontSize: "14px" }, children: `/* Margin - all sides */
-.zid-m-0, .zid-m-1, .zid-m-2, .zid-m-3, .zid-m-4
-
-/* Margin - specific sides */
-.zid-mt-{0-4}   /* margin-top */
-.zid-mr-{0-4}   /* margin-right */
-.zid-mb-{0-4}   /* margin-bottom */
-.zid-ml-{0-4}   /* margin-left */
-.zid-mx-{0-4}   /* margin-left + margin-right */
-.zid-my-{0-4}   /* margin-top + margin-bottom */
-
-/* Padding - all sides */
-.zid-p-0, .zid-p-1, .zid-p-2, .zid-p-3, .zid-p-4
-
-/* Padding - specific sides */
-.zid-pt-{0-4}   /* padding-top */
-.zid-pr-{0-4}   /* padding-right */
-.zid-pb-{0-4}   /* padding-bottom */
-.zid-pl-{0-4}   /* padding-left */
-.zid-px-{0-4}   /* padding-left + padding-right */
-.zid-py-{0-4}   /* padding-top + padding-bottom */` })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "32px" }, children: [
-      /* @__PURE__ */ jsx("h2", { style: { marginBottom: "16px" }, children: "Text" }),
-      /* @__PURE__ */ jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", overflow: "auto", fontSize: "14px" }, children: `/* Text alignment */
-.zid-text-left
-.zid-text-center
-.zid-text-right
-
-/* Text colors */
-.zid-text-primary
-.zid-text-secondary
-.zid-text-error
-.zid-text-success
-.zid-text-warning
-
-/* Font weight */
-.zid-font-regular
-.zid-font-medium
-.zid-font-bold` })
-    ] })
-  ] })
-};
-const UtilityExamples = {
-  render: () => /* @__PURE__ */ jsxs("div", { style: { padding: "32px", maxWidth: "900px", fontFamily: "var(--zid-font-family, system-ui)" }, children: [
-    /* @__PURE__ */ jsx("h1", { style: { marginBottom: "8px" }, children: "Utility Examples" }),
-    /* @__PURE__ */ jsx("p", { style: { color: "#75727B", marginBottom: "32px" }, children: "Live examples of utility classes" }),
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "32px" }, children: [
-      /* @__PURE__ */ jsx("h2", { style: { marginBottom: "16px" }, children: "Flexbox Layout" }),
-      /* @__PURE__ */ jsxs("div", { className: "zid-d-flex zid-justify-between zid-align-center zid-gap-2 zid-p-3", style: { background: "var(--zid-base-neutral, #F5F4F6)", borderRadius: "8px" }, children: [
-        /* @__PURE__ */ jsx("div", { style: { padding: "16px", background: "var(--zid-primary-main, #AE72FF)", color: "white", borderRadius: "4px" }, children: "Item 1" }),
-        /* @__PURE__ */ jsx("div", { style: { padding: "16px", background: "var(--zid-primary-main, #AE72FF)", color: "white", borderRadius: "4px" }, children: "Item 2" }),
-        /* @__PURE__ */ jsx("div", { style: { padding: "16px", background: "var(--zid-primary-main, #AE72FF)", color: "white", borderRadius: "4px" }, children: "Item 3" })
-      ] }),
-      /* @__PURE__ */ jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "12px", borderRadius: "8px", marginTop: "12px", fontSize: "13px" }, children: `<div class="zid-d-flex zid-justify-between zid-align-center zid-gap-2 zid-p-3">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</div>` })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "32px" }, children: [
-      /* @__PURE__ */ jsx("h2", { style: { marginBottom: "16px" }, children: "Spacing" }),
-      /* @__PURE__ */ jsxs("div", { style: { background: "var(--zid-base-neutral, #F5F4F6)", borderRadius: "8px", padding: "16px" }, children: [
-        /* @__PURE__ */ jsx("div", { className: "zid-mb-2", style: { padding: "12px", background: "var(--zid-color-blue-200, #E9FAFA)", borderRadius: "4px" }, children: "Box with margin-bottom (zid-mb-2)" }),
-        /* @__PURE__ */ jsx("div", { className: "zid-p-3", style: { background: "var(--zid-color-green-200, #EFFBEE)", borderRadius: "4px" }, children: "Box with padding (zid-p-3)" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "32px" }, children: [
-      /* @__PURE__ */ jsx("h2", { style: { marginBottom: "16px" }, children: "Text Colors" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
-        /* @__PURE__ */ jsx("span", { className: "zid-text-primary", style: { fontSize: "16px" }, children: "Primary text color" }),
-        /* @__PURE__ */ jsx("span", { className: "zid-text-secondary", style: { fontSize: "16px" }, children: "Secondary text color" }),
-        /* @__PURE__ */ jsx("span", { className: "zid-text-error", style: { fontSize: "16px" }, children: "Error text color" }),
-        /* @__PURE__ */ jsx("span", { className: "zid-text-success", style: { fontSize: "16px" }, children: "Success text color" })
-      ] })
-    ] })
-  ] })
-};
-export {
-  UtilityClasses,
-  UtilityExamples,
-  meta as default
-};
-//# sourceMappingURL=Utilities.stories.js.map

package/dist/react/es/stories/css/Utilities.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Utilities.stories.js","sources":["../../../../../src/stories/css/Utilities.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n  title: 'CSS Styles/Utilities',\n  tags: ['autodocs'],\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const UtilityClasses: Story = {\n  render: () => (\n    <div style={{ padding: '32px', maxWidth: '900px', fontFamily: 'var(--zid-font-family, system-ui)' }}>\n      <h1 style={{ marginBottom: '8px' }}>Utility Classes</h1>\n      <p style={{ color: '#75727B', marginBottom: '32px' }}>Helper classes for common styling needs</p>\n\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '16px' }}>Display</h2>\n        <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', overflow: 'auto', fontSize: '14px' }}>\n{`.zid-d-flex      /* display: flex */\n.zid-d-block     /* display: block */\n.zid-d-inline    /* display: inline */\n.zid-d-none      /* display: none */\n.zid-d-grid      /* display: grid */`}\n        </pre>\n      </div>\n\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '16px' }}>Flexbox</h2>\n        <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', overflow: 'auto', fontSize: '14px' }}>\n{`/* Direction */\n.zid-flex-row        /* flex-direction: row */\n.zid-flex-col        /* flex-direction: column */\n\n/* Justify Content */\n.zid-justify-start   /* justify-content: flex-start */\n.zid-justify-end     /* justify-content: flex-end */\n.zid-justify-center  /* justify-content: center */\n.zid-justify-between /* justify-content: space-between */\n.zid-justify-around  /* justify-content: space-around */\n\n/* Align Items */\n.zid-align-start     /* align-items: flex-start */\n.zid-align-end       /* align-items: flex-end */\n.zid-align-center    /* align-items: center */\n.zid-align-stretch   /* align-items: stretch */\n\n/* Flex Wrap */\n.zid-flex-wrap       /* flex-wrap: wrap */\n.zid-flex-nowrap     /* flex-wrap: nowrap */\n\n/* Gap */\n.zid-gap-1           /* gap: 8px */\n.zid-gap-2           /* gap: 16px */\n.zid-gap-3           /* gap: 24px */\n.zid-gap-4           /* gap: 32px */`}\n        </pre>\n      </div>\n\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '16px' }}>Spacing (Margin & Padding)</h2>\n        <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', overflow: 'auto', fontSize: '14px' }}>\n{`/* Margin - all sides */\n.zid-m-0, .zid-m-1, .zid-m-2, .zid-m-3, .zid-m-4\n\n/* Margin - specific sides */\n.zid-mt-{0-4}   /* margin-top */\n.zid-mr-{0-4}   /* margin-right */\n.zid-mb-{0-4}   /* margin-bottom */\n.zid-ml-{0-4}   /* margin-left */\n.zid-mx-{0-4}   /* margin-left + margin-right */\n.zid-my-{0-4}   /* margin-top + margin-bottom */\n\n/* Padding - all sides */\n.zid-p-0, .zid-p-1, .zid-p-2, .zid-p-3, .zid-p-4\n\n/* Padding - specific sides */\n.zid-pt-{0-4}   /* padding-top */\n.zid-pr-{0-4}   /* padding-right */\n.zid-pb-{0-4}   /* padding-bottom */\n.zid-pl-{0-4}   /* padding-left */\n.zid-px-{0-4}   /* padding-left + padding-right */\n.zid-py-{0-4}   /* padding-top + padding-bottom */`}\n        </pre>\n      </div>\n\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '16px' }}>Text</h2>\n        <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', overflow: 'auto', fontSize: '14px' }}>\n{`/* Text alignment */\n.zid-text-left\n.zid-text-center\n.zid-text-right\n\n/* Text colors */\n.zid-text-primary\n.zid-text-secondary\n.zid-text-error\n.zid-text-success\n.zid-text-warning\n\n/* Font weight */\n.zid-font-regular\n.zid-font-medium\n.zid-font-bold`}\n        </pre>\n      </div>\n    </div>\n  ),\n};\n\nexport const UtilityExamples: Story = {\n  render: () => (\n    <div style={{ padding: '32px', maxWidth: '900px', fontFamily: 'var(--zid-font-family, system-ui)' }}>\n      <h1 style={{ marginBottom: '8px' }}>Utility Examples</h1>\n      <p style={{ color: '#75727B', marginBottom: '32px' }}>Live examples of utility classes</p>\n\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '16px' }}>Flexbox Layout</h2>\n        <div className=\"zid-d-flex zid-justify-between zid-align-center zid-gap-2 zid-p-3\" style={{ background: 'var(--zid-base-neutral, #F5F4F6)', borderRadius: '8px' }}>\n          <div style={{ padding: '16px', background: 'var(--zid-primary-main, #AE72FF)', color: 'white', borderRadius: '4px' }}>Item 1</div>\n          <div style={{ padding: '16px', background: 'var(--zid-primary-main, #AE72FF)', color: 'white', borderRadius: '4px' }}>Item 2</div>\n          <div style={{ padding: '16px', background: 'var(--zid-primary-main, #AE72FF)', color: 'white', borderRadius: '4px' }}>Item 3</div>\n        </div>\n        <pre style={{ background: '#1f0433', color: '#fff', padding: '12px', borderRadius: '8px', marginTop: '12px', fontSize: '13px' }}>\n{`<div class=\"zid-d-flex zid-justify-between zid-align-center zid-gap-2 zid-p-3\">\n  <div>Item 1</div>\n  <div>Item 2</div>\n  <div>Item 3</div>\n</div>`}\n        </pre>\n      </div>\n\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '16px' }}>Spacing</h2>\n        <div style={{ background: 'var(--zid-base-neutral, #F5F4F6)', borderRadius: '8px', padding: '16px' }}>\n          <div className=\"zid-mb-2\" style={{ padding: '12px', background: 'var(--zid-color-blue-200, #E9FAFA)', borderRadius: '4px' }}>\n            Box with margin-bottom (zid-mb-2)\n          </div>\n          <div className=\"zid-p-3\" style={{ background: 'var(--zid-color-green-200, #EFFBEE)', borderRadius: '4px' }}>\n            Box with padding (zid-p-3)\n          </div>\n        </div>\n      </div>\n\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '16px' }}>Text Colors</h2>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n          <span className=\"zid-text-primary\" style={{ fontSize: '16px' }}>Primary text color</span>\n          <span className=\"zid-text-secondary\" style={{ fontSize: '16px' }}>Secondary text color</span>\n          <span className=\"zid-text-error\" style={{ fontSize: '16px' }}>Error text color</span>\n          <span className=\"zid-text-success\" style={{ fontSize: '16px' }}>Success text color</span>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAEZ;AAKO,MAAM,iBAAwB;AAAA,EACnC,QAAQ,MACN,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,UAAU,SAAS,YAAY,oCAAA,GAC5D,UAAA;AAAA,IAAA,oBAAC,QAAG,OAAO,EAAE,cAAc,MAAA,GAAS,UAAA,mBAAe;AAAA,IACnD,oBAAC,OAAE,OAAO,EAAE,OAAO,WAAW,cAAc,OAAA,GAAU,UAAA,0CAAA,CAAuC;AAAA,yBAE5F,OAAA,EAAI,OAAO,EAAE,cAAc,UAC1B,UAAA;AAAA,MAAA,oBAAC,QAAG,OAAO,EAAE,cAAc,OAAA,GAAU,UAAA,WAAO;AAAA,0BAC3C,OAAA,EAAI,OAAO,EAAE,YAAY,WAAW,OAAO,QAAQ,SAAS,QAAQ,cAAc,OAAO,UAAU,QAAQ,UAAU,UAC7H,UAAA;AAAA;AAAA;AAAA;AAAA,sCAAA,CAKO;AAAA,IAAA,GACF;AAAA,yBAEC,OAAA,EAAI,OAAO,EAAE,cAAc,UAC1B,UAAA;AAAA,MAAA,oBAAC,QAAG,OAAO,EAAE,cAAc,OAAA,GAAU,UAAA,WAAO;AAAA,0BAC3C,OAAA,EAAI,OAAO,EAAE,YAAY,WAAW,OAAO,QAAQ,SAAS,QAAQ,cAAc,OAAO,UAAU,QAAQ,UAAU,UAC7H,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAAA,CA0BO;AAAA,IAAA,GACF;AAAA,yBAEC,OAAA,EAAI,OAAO,EAAE,cAAc,UAC1B,UAAA;AAAA,MAAA,oBAAC,QAAG,OAAO,EAAE,cAAc,OAAA,GAAU,UAAA,8BAA0B;AAAA,0BAC9D,OAAA,EAAI,OAAO,EAAE,YAAY,WAAW,OAAO,QAAQ,SAAS,QAAQ,cAAc,OAAO,UAAU,QAAQ,UAAU,UAC7H,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oDAAA,CAqBO;AAAA,IAAA,GACF;AAAA,yBAEC,OAAA,EAAI,OAAO,EAAE,cAAc,UAC1B,UAAA;AAAA,MAAA,oBAAC,QAAG,OAAO,EAAE,cAAc,OAAA,GAAU,UAAA,QAAI;AAAA,0BACxC,OAAA,EAAI,OAAO,EAAE,YAAY,WAAW,OAAO,QAAQ,SAAS,QAAQ,cAAc,OAAO,UAAU,QAAQ,UAAU,UAC7H,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAA,CAgBO;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEO,MAAM,kBAAyB;AAAA,EACpC,QAAQ,MACN,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,UAAU,SAAS,YAAY,oCAAA,GAC5D,UAAA;AAAA,IAAA,oBAAC,QAAG,OAAO,EAAE,cAAc,MAAA,GAAS,UAAA,oBAAgB;AAAA,IACpD,oBAAC,OAAE,OAAO,EAAE,OAAO,WAAW,cAAc,OAAA,GAAU,UAAA,mCAAA,CAAgC;AAAA,yBAErF,OAAA,EAAI,OAAO,EAAE,cAAc,UAC1B,UAAA;AAAA,MAAA,oBAAC,QAAG,OAAO,EAAE,cAAc,OAAA,GAAU,UAAA,kBAAc;AAAA,MACnD,qBAAC,OAAA,EAAI,WAAU,qEAAoE,OAAO,EAAE,YAAY,oCAAoC,cAAc,MAAA,GACxJ,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,oCAAoC,OAAO,SAAS,cAAc,MAAA,GAAS,UAAA,UAAM;AAAA,QAC5H,oBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,oCAAoC,OAAO,SAAS,cAAc,MAAA,GAAS,UAAA,UAAM;AAAA,QAC5H,oBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,oCAAoC,OAAO,SAAS,cAAc,MAAA,GAAS,UAAA,SAAA,CAAM;AAAA,MAAA,GAC9H;AAAA,0BACC,OAAA,EAAI,OAAO,EAAE,YAAY,WAAW,OAAO,QAAQ,SAAS,QAAQ,cAAc,OAAO,WAAW,QAAQ,UAAU,UAC9H,UAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CAKO;AAAA,IAAA,GACF;AAAA,yBAEC,OAAA,EAAI,OAAO,EAAE,cAAc,UAC1B,UAAA;AAAA,MAAA,oBAAC,QAAG,OAAO,EAAE,cAAc,OAAA,GAAU,UAAA,WAAO;AAAA,MAC5C,qBAAC,OAAA,EAAI,OAAO,EAAE,YAAY,oCAAoC,cAAc,OAAO,SAAS,OAAA,GAC1F,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAU,YAAW,OAAO,EAAE,SAAS,QAAQ,YAAY,sCAAsC,cAAc,MAAA,GAAS,UAAA,qCAE7H;AAAA,QACA,oBAAC,OAAA,EAAI,WAAU,WAAU,OAAO,EAAE,YAAY,uCAAuC,cAAc,SAAS,UAAA,6BAAA,CAE5G;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,yBAEC,OAAA,EAAI,OAAO,EAAE,cAAc,UAC1B,UAAA;AAAA,MAAA,oBAAC,QAAG,OAAO,EAAE,cAAc,OAAA,GAAU,UAAA,eAAW;AAAA,MAChD,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,MAAA,GAC3D,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,oBAAmB,OAAO,EAAE,UAAU,OAAA,GAAU,UAAA,qBAAA,CAAkB;AAAA,QAClF,oBAAC,UAAK,WAAU,sBAAqB,OAAO,EAAE,UAAU,OAAA,GAAU,UAAA,uBAAA,CAAoB;AAAA,QACtF,oBAAC,UAAK,WAAU,kBAAiB,OAAO,EAAE,UAAU,OAAA,GAAU,UAAA,mBAAA,CAAgB;AAAA,QAC9E,oBAAC,UAAK,WAAU,oBAAmB,OAAO,EAAE,UAAU,OAAA,GAAU,UAAA,qBAAA,CAAkB;AAAA,MAAA,EAAA,CACpF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;"}