@zidsa/zidmui 2.1.8 → 2.3.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zidsa/zidmui",
   "type": "module",
-  "version": "2.1.8",
+  "version": "2.3.0-beta.0",
   "description": "Zid MUI shared components and utilities",
   "author": "Abdulaziz Homaily <a.homaily@gmail.com>",
   "license": "MIT",
@@ -156,7 +156,10 @@
       "import": "./dist/react/es/components/*.js"
     },
     "./styles/*": "./dist/styles/*",
-    "./styles/components/*": "./dist/styles/components/*"
+    "./styles/components/*": "./dist/styles/components/*",
+    "./illustrations/*": "./dist/illustrations/*",
+    "./logos/payments/*": "./dist/logos/payments/*",
+    "./logos/delivery/*": "./dist/logos/delivery/*"
   },
   "peerDependencies": {
     "@emotion/styled": "11.14.1",

package/dist/react/cjs/stories/css/Alert.stories.js

@@ -1,69 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-;/* empty css                   */
-const closeLine = require("../../icons/system/close-line.js");
-const icons = {
-  success: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }),
-  info: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }),
-  warning: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }),
-  error: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) })
-};
-const meta = {
-  title: "CSS Styles/Components/Alert",
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"]
-};
-const WithTitle = {
-  render: () => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "h3",
-        {
-          style: {
-            marginBottom: "8px",
-            fontFamily: "var(--zid-font-family)"
-          },
-          children: "Alerts with Title"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert zid-alert--success", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__icon", children: icons.success }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert__content", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__title", children: "Success" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__message", children: "Your order has been placed successfully." })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-alert__close", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert zid-alert--info", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__icon", children: icons.info }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert__content", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__title", children: "Information" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__message", children: "This alert has a title and a message for more context." })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-alert__close", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert zid-alert--warning", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__icon", children: icons.warning }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert__content", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__title", children: "Warning" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__message", children: "Your session will expire in 5 minutes." })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-alert__close", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert zid-alert--error", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__icon", children: icons.error }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert__content", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__title", children: "Error" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__message", children: "Failed to save changes. Please try again." })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-alert__close", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
-      ] })
-    ] });
-  }
-};
-exports.WithTitle = WithTitle;
-exports.default = meta;
-//# sourceMappingURL=Alert.stories.js.map

package/dist/react/cjs/stories/css/Alert.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.stories.js","sources":["../../../../../src/stories/css/Alert.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\nimport { IconCloseLine } from '~/icons/system/close-line';\n\n//\n//\n\nconst icons = {\n  success: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\" />\n    </svg>\n  ),\n  info: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\" />\n    </svg>\n  ),\n  warning: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n    </svg>\n  ),\n  error: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\n    </svg>\n  ),\n};\n\n// Meta\nconst meta = {\n  title: 'CSS Styles/Components/Alert',\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const WithTitle: Story = {\n  render: () => {\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>\n        <h3\n          style={{\n            marginBottom: '8px',\n            fontFamily: 'var(--zid-font-family)',\n          }}\n        >\n          Alerts with Title\n        </h3>\n\n        <div className=\"zid-alert zid-alert--success\">\n          <div className=\"zid-alert__icon\">{icons.success}</div>\n          <div className=\"zid-alert__content\">\n            <div className=\"zid-alert__title\">Success</div>\n            <div className=\"zid-alert__message\">Your order has been placed successfully.</div>\n          </div>\n          <button className=\"zid-alert__close\" aria-label=\"Close\">\n            <IconCloseLine />\n          </button>\n        </div>\n\n        <div className=\"zid-alert zid-alert--info\">\n          <div className=\"zid-alert__icon\">{icons.info}</div>\n          <div className=\"zid-alert__content\">\n            <div className=\"zid-alert__title\">Information</div>\n            <div className=\"zid-alert__message\">\n              This alert has a title and a message for more context.\n            </div>\n          </div>\n          <button className=\"zid-alert__close\" aria-label=\"Close\">\n            <IconCloseLine />\n          </button>\n        </div>\n\n        <div className=\"zid-alert zid-alert--warning\">\n          <div className=\"zid-alert__icon\">{icons.warning}</div>\n          <div className=\"zid-alert__content\">\n            <div className=\"zid-alert__title\">Warning</div>\n            <div className=\"zid-alert__message\">Your session will expire in 5 minutes.</div>\n          </div>\n          <button className=\"zid-alert__close\" aria-label=\"Close\">\n            <IconCloseLine />\n          </button>\n        </div>\n\n        <div className=\"zid-alert zid-alert--error\">\n          <div className=\"zid-alert__icon\">{icons.error}</div>\n          <div className=\"zid-alert__content\">\n            <div className=\"zid-alert__title\">Error</div>\n            <div className=\"zid-alert__message\">Failed to save changes. Please try again.</div>\n          </div>\n          <button className=\"zid-alert__close\" aria-label=\"Close\">\n            <IconCloseLine />\n          </button>\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":["jsx","jsxs","IconCloseLine"],"mappings":"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"}

package/dist/react/cjs/stories/css/Button.stories.js

@@ -1,133 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-;/* empty css                   */
-const meta = {
-  title: "CSS Styles/Components/Button",
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"]
-};
-const Variants = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Contained" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Primary" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--secondary zid-button--md", children: "Secondary" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--error zid-button--md", children: "Error" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", disabled: true, children: "Disabled" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Outlined" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--primary zid-button--md", children: "Primary" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Secondary" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--error zid-button--md", children: "Error" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--primary zid-button--md", disabled: true, children: "Disabled" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Text" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--md", children: "Primary" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--md", children: "Secondary" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--error zid-button--md", children: "Error" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--md", disabled: true, children: "Disabled" })
-      ] })
-    ] })
-  ] })
-};
-const Sizes = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Contained Sizes" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", alignItems: "center", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--sm", children: "Small" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Medium" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--lg", children: "Large" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Outlined Sizes" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", alignItems: "center", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--primary zid-button--sm", children: "Small" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--primary zid-button--md", children: "Medium" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--primary zid-button--lg", children: "Large" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Text Sizes" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", alignItems: "center", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--sm", children: "Small" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--md", children: "Medium" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--lg", children: "Large" })
-      ] })
-    ] })
-  ] })
-};
-const States = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Interactive States (hover to see)" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Default" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", disabled: true, children: "Disabled" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "All Colors - Disabled State" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", disabled: true, children: "Primary" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", disabled: true, children: "Secondary" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--error zid-button--md", disabled: true, children: "Error" })
-      ] })
-    ] })
-  ] })
-};
-const FullWidth = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px", width: "400px" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Full Width Buttons" }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md zid-button--full-width", children: "Full Width Primary" }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md zid-button--full-width", children: "Full Width Secondary" }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--error zid-button--md zid-button--full-width", children: "Full Width Error" })
-  ] })
-};
-const IconButton = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Icon Only Buttons" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", alignItems: "center", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--sm zid-button--icon-only", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md zid-button--icon-only", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--lg zid-button--icon-only", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Buttons with Icons" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }),
-          "Add Item"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }) }),
-          "Edit"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "zid-button zid-button--text zid-button--error zid-button--md", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }) }),
-          "Delete"
-        ] })
-      ] })
-    ] })
-  ] })
-};
-exports.FullWidth = FullWidth;
-exports.IconButton = IconButton;
-exports.Sizes = Sizes;
-exports.States = States;
-exports.Variants = Variants;
-exports.default = meta;
-//# sourceMappingURL=Button.stories.js.map

package/dist/react/cjs/stories/css/Button.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.stories.js","sources":["../../../../../src/stories/css/Button.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n  title: 'CSS Styles/Components/Button',\n  parameters: {\n    layout: 'centered',\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: '32px' }}>\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Contained</h3>\n        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\">Primary</button>\n          <button className=\"zid-button zid-button--contained zid-button--secondary zid-button--md\">Secondary</button>\n          <button className=\"zid-button zid-button--contained zid-button--error zid-button--md\">Error</button>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\" disabled>Disabled</button>\n        </div>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Outlined</h3>\n        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--outlined zid-button--primary zid-button--md\">Primary</button>\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Secondary</button>\n          <button className=\"zid-button zid-button--outlined zid-button--error zid-button--md\">Error</button>\n          <button className=\"zid-button zid-button--outlined zid-button--primary zid-button--md\" disabled>Disabled</button>\n        </div>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Text</h3>\n        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--text zid-button--primary zid-button--md\">Primary</button>\n          <button className=\"zid-button zid-button--text zid-button--secondary zid-button--md\">Secondary</button>\n          <button className=\"zid-button zid-button--text zid-button--error zid-button--md\">Error</button>\n          <button className=\"zid-button zid-button--text zid-button--primary zid-button--md\" disabled>Disabled</button>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const Sizes: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Contained Sizes</h3>\n        <div style={{ display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--sm\">Small</button>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\">Medium</button>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--lg\">Large</button>\n        </div>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Outlined Sizes</h3>\n        <div style={{ display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--outlined zid-button--primary zid-button--sm\">Small</button>\n          <button className=\"zid-button zid-button--outlined zid-button--primary zid-button--md\">Medium</button>\n          <button className=\"zid-button zid-button--outlined zid-button--primary zid-button--lg\">Large</button>\n        </div>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Text Sizes</h3>\n        <div style={{ display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--text zid-button--primary zid-button--sm\">Small</button>\n          <button className=\"zid-button zid-button--text zid-button--primary zid-button--md\">Medium</button>\n          <button className=\"zid-button zid-button--text zid-button--primary zid-button--lg\">Large</button>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\n\nexport const States: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Interactive States (hover to see)</h3>\n        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\">Default</button>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\" disabled>Disabled</button>\n        </div>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>All Colors - Disabled State</h3>\n        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\" disabled>Primary</button>\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\" disabled>Secondary</button>\n          <button className=\"zid-button zid-button--text zid-button--error zid-button--md\" disabled>Error</button>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const FullWidth: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '400px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Full Width Buttons</h3>\n      <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md zid-button--full-width\">\n        Full Width Primary\n      </button>\n      <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md zid-button--full-width\">\n        Full Width Secondary\n      </button>\n      <button className=\"zid-button zid-button--text zid-button--error zid-button--md zid-button--full-width\">\n        Full Width Error\n      </button>\n    </div>\n  ),\n};\n\nexport const IconButton: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Icon Only Buttons</h3>\n        <div style={{ display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--sm zid-button--icon-only\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/>\n            </svg>\n          </button>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md zid-button--icon-only\">\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/>\n            </svg>\n          </button>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--lg zid-button--icon-only\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/>\n            </svg>\n          </button>\n        </div>\n      </div>\n\n      <div>\n        <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Buttons with Icons</h3>\n        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n          <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/>\n            </svg>\n            Add Item\n          </button>\n          <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"/>\n            </svg>\n            Edit\n          </button>\n          <button className=\"zid-button zid-button--text zid-button--error zid-button--md\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n              <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\"/>\n            </svg>\n            Delete\n          </button>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":["jsxs","jsx"],"mappings":"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"}

package/dist/react/cjs/stories/css/Card.stories.js

@@ -1,145 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-;/* empty css                   */
-const meta = {
-  title: "CSS Styles/Components/Card",
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"]
-};
-const Elevation = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Elevation Levels" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card zid-card--elevation-0", style: { width: "150px" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "Elevation 0" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card zid-card--elevation-1", style: { width: "150px" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "Elevation 1" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card zid-card--elevation-2", style: { width: "150px" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "Elevation 2" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card zid-card--elevation-4", style: { width: "150px" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "Elevation 4" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card zid-card--elevation-8", style: { width: "150px" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "Elevation 8" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card zid-card--elevation-16", style: { width: "150px" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "Elevation 16" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card zid-card--elevation-24", style: { width: "150px" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "Elevation 24" }) })
-    ] })
-  ] })
-};
-const Variants = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Card Variants" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card zid-card--elevation-1", style: { width: "200px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__header", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "zid-card__title", children: "Default" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "Standard card with shadow" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card zid-card--outlined", style: { width: "200px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__header", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "zid-card__title", children: "Outlined" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "Card with border, no shadow" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card zid-card--selected", style: { width: "200px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__header", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "zid-card__title", children: "Selected" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "Selected state card" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card zid-card--clickable zid-card--elevation-1", style: { width: "200px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__header", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "zid-card__title", children: "Clickable" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "Hover to see effect" })
-      ] })
-    ] })
-  ] })
-};
-const WithSubtitle = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "With Subtitle" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card zid-card--elevation-1", style: { width: "300px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__header", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "zid-card__title", children: "Card Title" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "zid-card__subtitle", children: "Subtitle or description text" })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "This card has both a title and subtitle in the header." })
-    ] })
-  ] })
-};
-const WithActions = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "With Action Buttons" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card zid-card--elevation-1", style: { width: "300px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__header", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "zid-card__title", children: "Card with Actions" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "zid-card__subtitle", children: "Subtitle text here" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "This card has a footer with action buttons." }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card__actions", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--sm", children: "Cancel" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--sm", children: "Save" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card zid-card--elevation-1", style: { width: "300px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__header", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "zid-card__title", children: "Confirm Action" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "Are you sure you want to delete this item? This action cannot be undone." }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card__actions", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--sm", children: "Cancel" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--error zid-button--sm", children: "Delete" })
-        ] })
-      ] })
-    ] })
-  ] })
-};
-const WithMedia = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "With Media" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card zid-card--elevation-1", style: { width: "280px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__media", style: { height: "140px", background: "linear-gradient(135deg, var(--zid-color-primary-400), var(--zid-color-primary-700))" } }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card__header", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "zid-card__title", children: "Product Name" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "zid-card__subtitle", children: "$99.99" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "A brief description of the product goes here." }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__actions", children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--sm", children: "Add to Cart" }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card zid-card--elevation-1", style: { width: "280px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__media", style: { height: "140px", background: "linear-gradient(135deg, var(--zid-color-green-400), var(--zid-color-green-700))" } }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card__header", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "zid-card__title", children: "Another Product" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "zid-card__subtitle", children: "$149.99" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card__content", children: "Another product description with more details." }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card__actions", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--sm", children: "Learn More" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--sm", children: "Buy Now" })
-        ] })
-      ] })
-    ] })
-  ] })
-};
-const SelectableCards = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Selectable Cards" }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)", color: "var(--zid-text-secondary)" }, children: "Click to select (visual demo)" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card zid-card--clickable zid-card--elevation-1", style: { width: "180px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card__content", style: { textAlign: "center" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "32px", marginBottom: "8px" }, children: "📦" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 500 }, children: "Standard" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--zid-text-secondary)", fontSize: "14px" }, children: "Free shipping" })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card zid-card--clickable zid-card--selected", style: { width: "180px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card__content", style: { textAlign: "center" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "32px", marginBottom: "8px" }, children: "🚀" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 500 }, children: "Express" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--zid-text-secondary)", fontSize: "14px" }, children: "2-day delivery" })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-card zid-card--clickable zid-card--elevation-1", style: { width: "180px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card__content", style: { textAlign: "center" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "32px", marginBottom: "8px" }, children: "⚡" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 500 }, children: "Priority" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--zid-text-secondary)", fontSize: "14px" }, children: "Next-day delivery" })
-      ] }) })
-    ] })
-  ] })
-};
-exports.Elevation = Elevation;
-exports.SelectableCards = SelectableCards;
-exports.Variants = Variants;
-exports.WithActions = WithActions;
-exports.WithMedia = WithMedia;
-exports.WithSubtitle = WithSubtitle;
-exports.default = meta;
-//# sourceMappingURL=Card.stories.js.map

package/dist/react/cjs/stories/css/Card.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.stories.js","sources":["../../../../../src/stories/css/Card.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n  title: 'CSS Styles/Components/Card',\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Elevation: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n      <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Elevation Levels</h3>\n      <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n        <div className=\"zid-card zid-card--elevation-0\" style={{ width: '150px' }}>\n          <div className=\"zid-card__content\">Elevation 0</div>\n        </div>\n        <div className=\"zid-card zid-card--elevation-1\" style={{ width: '150px' }}>\n          <div className=\"zid-card__content\">Elevation 1</div>\n        </div>\n        <div className=\"zid-card zid-card--elevation-2\" style={{ width: '150px' }}>\n          <div className=\"zid-card__content\">Elevation 2</div>\n        </div>\n        <div className=\"zid-card zid-card--elevation-4\" style={{ width: '150px' }}>\n          <div className=\"zid-card__content\">Elevation 4</div>\n        </div>\n        <div className=\"zid-card zid-card--elevation-8\" style={{ width: '150px' }}>\n          <div className=\"zid-card__content\">Elevation 8</div>\n        </div>\n        <div className=\"zid-card zid-card--elevation-16\" style={{ width: '150px' }}>\n          <div className=\"zid-card__content\">Elevation 16</div>\n        </div>\n        <div className=\"zid-card zid-card--elevation-24\" style={{ width: '150px' }}>\n          <div className=\"zid-card__content\">Elevation 24</div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const Variants: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n      <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Card Variants</h3>\n      <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n        <div className=\"zid-card zid-card--elevation-1\" style={{ width: '200px' }}>\n          <div className=\"zid-card__header\">\n            <h3 className=\"zid-card__title\">Default</h3>\n          </div>\n          <div className=\"zid-card__content\">Standard card with shadow</div>\n        </div>\n        <div className=\"zid-card zid-card--outlined\" style={{ width: '200px' }}>\n          <div className=\"zid-card__header\">\n            <h3 className=\"zid-card__title\">Outlined</h3>\n          </div>\n          <div className=\"zid-card__content\">Card with border, no shadow</div>\n        </div>\n        <div className=\"zid-card zid-card--selected\" style={{ width: '200px' }}>\n          <div className=\"zid-card__header\">\n            <h3 className=\"zid-card__title\">Selected</h3>\n          </div>\n          <div className=\"zid-card__content\">Selected state card</div>\n        </div>\n        <div className=\"zid-card zid-card--clickable zid-card--elevation-1\" style={{ width: '200px' }}>\n          <div className=\"zid-card__header\">\n            <h3 className=\"zid-card__title\">Clickable</h3>\n          </div>\n          <div className=\"zid-card__content\">Hover to see effect</div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\n\nexport const WithSubtitle: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>With Subtitle</h3>\n      <div className=\"zid-card zid-card--elevation-1\" style={{ width: '300px' }}>\n        <div className=\"zid-card__header\">\n          <div>\n            <h3 className=\"zid-card__title\">Card Title</h3>\n            <p className=\"zid-card__subtitle\">Subtitle or description text</p>\n          </div>\n        </div>\n        <div className=\"zid-card__content\">This card has both a title and subtitle in the header.</div>\n      </div>\n    </div>\n  ),\n};\n\nexport const WithActions: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n      <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>With Action Buttons</h3>\n      <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n        <div className=\"zid-card zid-card--elevation-1\" style={{ width: '300px' }}>\n          <div className=\"zid-card__header\">\n            <div>\n              <h3 className=\"zid-card__title\">Card with Actions</h3>\n              <p className=\"zid-card__subtitle\">Subtitle text here</p>\n            </div>\n          </div>\n          <div className=\"zid-card__content\">This card has a footer with action buttons.</div>\n          <div className=\"zid-card__actions\">\n            <button className=\"zid-button zid-button--text zid-button--secondary zid-button--sm\">Cancel</button>\n            <button className=\"zid-button zid-button--contained zid-button--primary zid-button--sm\">Save</button>\n          </div>\n        </div>\n        <div className=\"zid-card zid-card--elevation-1\" style={{ width: '300px' }}>\n          <div className=\"zid-card__header\">\n            <h3 className=\"zid-card__title\">Confirm Action</h3>\n          </div>\n          <div className=\"zid-card__content\">Are you sure you want to delete this item? This action cannot be undone.</div>\n          <div className=\"zid-card__actions\">\n            <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--sm\">Cancel</button>\n            <button className=\"zid-button zid-button--contained zid-button--error zid-button--sm\">Delete</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const WithMedia: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>With Media</h3>\n      <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n        <div className=\"zid-card zid-card--elevation-1\" style={{ width: '280px' }}>\n          <div className=\"zid-card__media\" style={{ height: '140px', background: 'linear-gradient(135deg, var(--zid-color-primary-400), var(--zid-color-primary-700))' }}></div>\n          <div className=\"zid-card__header\">\n            <h3 className=\"zid-card__title\">Product Name</h3>\n            <p className=\"zid-card__subtitle\">$99.99</p>\n          </div>\n          <div className=\"zid-card__content\">A brief description of the product goes here.</div>\n          <div className=\"zid-card__actions\">\n            <button className=\"zid-button zid-button--contained zid-button--primary zid-button--sm\">Add to Cart</button>\n          </div>\n        </div>\n        <div className=\"zid-card zid-card--elevation-1\" style={{ width: '280px' }}>\n          <div className=\"zid-card__media\" style={{ height: '140px', background: 'linear-gradient(135deg, var(--zid-color-green-400), var(--zid-color-green-700))' }}></div>\n          <div className=\"zid-card__header\">\n            <h3 className=\"zid-card__title\">Another Product</h3>\n            <p className=\"zid-card__subtitle\">$149.99</p>\n          </div>\n          <div className=\"zid-card__content\">Another product description with more details.</div>\n          <div className=\"zid-card__actions\">\n            <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--sm\">Learn More</button>\n            <button className=\"zid-button zid-button--contained zid-button--primary zid-button--sm\">Buy Now</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const SelectableCards: Story = {\n  render: () => (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n      <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Selectable Cards</h3>\n      <p style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)', color: 'var(--zid-text-secondary)' }}>Click to select (visual demo)</p>\n      <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>\n        <div className=\"zid-card zid-card--clickable zid-card--elevation-1\" style={{ width: '180px' }}>\n          <div className=\"zid-card__content\" style={{ textAlign: 'center' }}>\n            <div style={{ fontSize: '32px', marginBottom: '8px' }}>📦</div>\n            <div style={{ fontWeight: 500 }}>Standard</div>\n            <div style={{ color: 'var(--zid-text-secondary)', fontSize: '14px' }}>Free shipping</div>\n          </div>\n        </div>\n        <div className=\"zid-card zid-card--clickable zid-card--selected\" style={{ width: '180px' }}>\n          <div className=\"zid-card__content\" style={{ textAlign: 'center' }}>\n            <div style={{ fontSize: '32px', marginBottom: '8px' }}>🚀</div>\n            <div style={{ fontWeight: 500 }}>Express</div>\n            <div style={{ color: 'var(--zid-text-secondary)', fontSize: '14px' }}>2-day delivery</div>\n          </div>\n        </div>\n        <div className=\"zid-card zid-card--clickable zid-card--elevation-1\" style={{ width: '180px' }}>\n          <div className=\"zid-card__content\" style={{ textAlign: 'center' }}>\n            <div style={{ fontSize: '32px', marginBottom: '8px' }}>⚡</div>\n            <div style={{ fontWeight: 500 }}>Priority</div>\n            <div style={{ color: 'var(--zid-text-secondary)', fontSize: '14px' }}>Next-day delivery</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":["jsxs","jsx"],"mappings":"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"}