@zidsa/zidmui 2.1.8 → 2.3.0-beta.0

package/dist/react/cjs/stories/design/Colors.stories.js

@@ -1,142 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const material = require("@mui/material");
-const ColorSwatchContainer = material.styled(material.Box)({
-  display: "flex",
-  flexDirection: "column",
-  gap: "32px",
-  padding: "24px",
-  maxWidth: "1200px"
-});
-const ColorGroupTitle = material.styled(material.Typography)(({ theme }) => ({
-  fontSize: theme.spacing(3),
-  fontWeight: 600,
-  marginBottom: theme.spacing(2),
-  textTransform: "capitalize"
-}));
-const ColorRow = material.styled(material.Box)({
-  display: "flex",
-  flexWrap: "wrap",
-  gap: "12px"
-});
-const ColorSwatch = material.styled(material.Box)(({ bgColor, isLight }) => ({
-  width: "100px",
-  height: "80px",
-  backgroundColor: bgColor,
-  borderRadius: "8px",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "flex-end",
-  padding: "8px",
-  border: "1px solid rgba(0, 0, 0, 0.1)",
-  color: isLight ? "#0E0217" : "#FFFFFF",
-  fontSize: "11px",
-  fontFamily: "monospace",
-  cursor: "pointer",
-  transition: "transform 0.15s ease, box-shadow 0.15s ease",
-  "&:hover": {
-    transform: "scale(1.05)",
-    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
-  },
-  "&:active": {
-    transform: "scale(0.98)"
-  }
-}));
-const SwatchLabel = material.styled("span")({
-  fontWeight: 600,
-  marginBottom: "2px"
-});
-const SwatchHex = material.styled("span")({
-  opacity: 0.8,
-  fontSize: "10px"
-});
-const isLightColor = (color) => {
-  let r, g, b;
-  if (color.startsWith("rgba")) {
-    const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-    if (match) {
-      r = parseInt(match[1], 10);
-      g = parseInt(match[2], 10);
-      b = parseInt(match[3], 10);
-    } else {
-      return true;
-    }
-  } else {
-    const hex = color.replace("#", "");
-    r = parseInt(hex.substring(0, 2), 16);
-    g = parseInt(hex.substring(2, 4), 16);
-    b = parseInt(hex.substring(4, 6), 16);
-  }
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance > 0.5;
-};
-const ColorScaleDisplay = ({ name, colors }) => {
-  const [copiedKey, setCopiedKey] = React.useState(null);
-  const handleCopy = (shade, hex) => {
-    navigator.clipboard.writeText(hex);
-    setCopiedKey(shade);
-    setTimeout(() => setCopiedKey(null), 1500);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ColorGroupTitle, { children: name }),
-    /* @__PURE__ */ jsxRuntime.jsx(ColorRow, { children: Object.entries(colors).map(([shade, hex]) => /* @__PURE__ */ jsxRuntime.jsxs(
-      ColorSwatch,
-      {
-        bgColor: hex,
-        isLight: isLightColor(hex),
-        onClick: () => handleCopy(shade, hex),
-        title: `Click to copy ${hex}`,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SwatchLabel, { children: copiedKey === shade ? "Copied!" : shade }),
-          /* @__PURE__ */ jsxRuntime.jsx(SwatchHex, { children: hex })
-        ]
-      },
-      shade
-    )) })
-  ] });
-};
-const ColorsDisplay = () => {
-  const theme = material.useTheme();
-  const { colors } = theme.palette;
-  const colorScales = [
-    { name: "Primary", colors: colors.primary },
-    { name: "Secondary", colors: colors.secondary },
-    { name: "Neutral", colors: colors.neutral },
-    { name: "Green", colors: colors.green },
-    { name: "Blue", colors: colors.blue },
-    { name: "Yellow", colors: colors.yellow },
-    { name: "Orange", colors: colors.orange },
-    { name: "Red", colors: colors.red },
-    { name: "Base", colors: colors.base }
-  ];
-  return /* @__PURE__ */ jsxRuntime.jsxs(ColorSwatchContainer, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h4", sx: { mb: 1 }, children: "Parcel Design System Colors" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "How to use in React:" }),
-        " ",
-        /* @__PURE__ */ jsxRuntime.jsx("code", { children: "theme.palette.colors.{name}[shade]" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 4 }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "How to use in CSS:" }),
-        " ",
-        /* @__PURE__ */ jsxRuntime.jsx("code", { children: "var(--zid-color-{name}-{shade})" })
-      ] })
-    ] }),
-    colorScales.map(({ name, colors: colors2 }) => /* @__PURE__ */ jsxRuntime.jsx(ColorScaleDisplay, { name, colors: colors2 }, name))
-  ] });
-};
-const meta = {
-  title: "Design System/Colors",
-  component: ColorsDisplay,
-  parameters: {
-    layout: "fullscreen"
-  },
-  tags: ["autodocs"]
-};
-const AllColors = {};
-exports.AllColors = AllColors;
-exports.default = meta;
-//# sourceMappingURL=Colors.stories.js.map

package/dist/react/cjs/stories/design/Colors.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Colors.stories.js","sources":["../../../../../src/stories/design/Colors.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\nimport { useState } from 'react';\n\nimport { Box, Typography, useTheme, styled } from '@mui/material';\n\n//\n//\n\nconst ColorSwatchContainer = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '32px',\n  padding: '24px',\n  maxWidth: '1200px',\n});\n\nconst ColorGroupTitle = styled(Typography)(({ theme }) => ({\n  fontSize: theme.spacing(3),\n  fontWeight: 600,\n  marginBottom: theme.spacing(2),\n  textTransform: 'capitalize',\n}));\n\nconst ColorRow = styled(Box)({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '12px',\n});\n\nconst ColorSwatch = styled(Box)<{ bgColor: string; isLight?: boolean }>(({ bgColor, isLight }) => ({\n  width: '100px',\n  height: '80px',\n  backgroundColor: bgColor,\n  borderRadius: '8px',\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'flex-end',\n  padding: '8px',\n  border: '1px solid rgba(0, 0, 0, 0.1)',\n  color: isLight ? '#0E0217' : '#FFFFFF',\n  fontSize: '11px',\n  fontFamily: 'monospace',\n  cursor: 'pointer',\n  transition: 'transform 0.15s ease, box-shadow 0.15s ease',\n  '&:hover': {\n    transform: 'scale(1.05)',\n    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',\n  },\n  '&:active': {\n    transform: 'scale(0.98)',\n  },\n}));\n\nconst SwatchLabel = styled('span')({\n  fontWeight: 600,\n  marginBottom: '2px',\n});\n\nconst SwatchHex = styled('span')({\n  opacity: 0.8,\n  fontSize: '10px',\n});\n\n//\n//\n\ninterface ColorScale {\n  [key: string]: string;\n}\n\nconst isLightColor = (color: string): boolean => {\n  let r: number, g: number, b: number;\n\n  // Handle rgba format: rgba(255, 255, 255, 0.8)\n  if (color.startsWith('rgba')) {\n    const match = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n\n    if (match) {\n      r = parseInt(match[1], 10);\n      g = parseInt(match[2], 10);\n      b = parseInt(match[3], 10);\n    } else {\n      return true; // Default to light if parsing fails\n    }\n  } else {\n    // Handle hex format: #FFFFFF\n    const hex = color.replace('#', '');\n    r = parseInt(hex.substring(0, 2), 16);\n    g = parseInt(hex.substring(2, 4), 16);\n    b = parseInt(hex.substring(4, 6), 16);\n  }\n\n  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n\n  return luminance > 0.5;\n};\n\nconst ColorScaleDisplay = ({ name, colors }: { name: string; colors: ColorScale }) => {\n  const [copiedKey, setCopiedKey] = useState<string | null>(null);\n\n  const handleCopy = (shade: string, hex: string) => {\n    navigator.clipboard.writeText(hex);\n    setCopiedKey(shade);\n    setTimeout(() => setCopiedKey(null), 1500);\n  };\n\n  return (\n    <Box>\n      <ColorGroupTitle>{name}</ColorGroupTitle>\n      <ColorRow>\n        {Object.entries(colors).map(([shade, hex]) => (\n          <ColorSwatch\n            key={shade}\n            bgColor={hex}\n            isLight={isLightColor(hex)}\n            onClick={() => handleCopy(shade, hex)}\n            title={`Click to copy ${hex}`}\n          >\n            <SwatchLabel>{copiedKey === shade ? 'Copied!' : shade}</SwatchLabel>\n            <SwatchHex>{hex}</SwatchHex>\n          </ColorSwatch>\n        ))}\n      </ColorRow>\n    </Box>\n  );\n};\n\n//\n//\n\nconst ColorsDisplay = () => {\n  const theme = useTheme();\n  const { colors } = theme.palette;\n\n  const colorScales = [\n    { name: 'Primary', colors: colors.primary },\n    { name: 'Secondary', colors: colors.secondary },\n    { name: 'Neutral', colors: colors.neutral },\n    { name: 'Green', colors: colors.green },\n    { name: 'Blue', colors: colors.blue },\n    { name: 'Yellow', colors: colors.yellow },\n    { name: 'Orange', colors: colors.orange },\n    { name: 'Red', colors: colors.red },\n    { name: 'Base', colors: colors.base },\n  ];\n\n  return (\n    <ColorSwatchContainer>\n      <Box>\n        <Typography variant=\"h4\" sx={{ mb: 1 }}>\n          Parcel Design System Colors\n        </Typography>\n        <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mb: 2 }}>\n          <strong>How to use in React:</strong> <code>theme.palette.colors.&#123;name&#125;[shade]</code>\n        </Typography>\n        <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mb: 4 }}>\n          <strong>How to use in CSS:</strong> <code>var(--zid-color-&#123;name&#125;-&#123;shade&#125;)</code>\n        </Typography>\n      </Box>\n\n      {colorScales.map(({ name, colors }) => (\n        <ColorScaleDisplay key={name} name={name} colors={colors} />\n      ))}\n    </ColorSwatchContainer>\n  );\n};\n\n//\n//\n\nconst meta = {\n  title: 'Design System/Colors',\n  component: ColorsDisplay,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof ColorsDisplay>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const AllColors: Story = {};\n"],"names":["styled","Box","Typography","useState","jsx","jsxs","useTheme","colors"],"mappings":"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"}

package/dist/react/cjs/stories/design/Typography.stories.js

@@ -1,116 +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: "Design System/Typography/CSS",
-  parameters: {
-    layout: "fullscreen"
-  }
-};
-const CSSTypography = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "24px", maxWidth: "900px", fontFamily: "var(--zid-font-family)" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "32px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "8px" }, children: "Typography Scale" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { color: "var(--zid-text-secondary)" }, children: [
-        "Access typography via CSS variables: ",
-        /* @__PURE__ */ jsxRuntime.jsx("code", { children: "var(--zid-font-{property})" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "48px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px" }, children: "Font Family" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "20px", background: "var(--zid-base-neutral)", borderRadius: "8px", marginBottom: "16px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "24px", margin: 0 }, children: "IBM Plex Sans Arabic" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: "var(--zid-text-secondary)", margin: "8px 0 0 0" }, children: "The quick brown fox jumps over the lazy dog" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", fontSize: "13px", margin: 0 }, children: `font-family: var(--zid-font-family);` })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "48px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px" }, children: "Font Sizes" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
-        { name: "4xl (36px)", var: "--zid-font-size-4xl" },
-        { name: "3xl (30px)", var: "--zid-font-size-3xl" },
-        { name: "2xl (24px)", var: "--zid-font-size-2xl" },
-        { name: "xl (20px)", var: "--zid-font-size-xl" },
-        { name: "lg (18px)", var: "--zid-font-size-lg" },
-        { name: "base (16px)", var: "--zid-font-size-base" },
-        { name: "sm (14px)", var: "--zid-font-size-sm" },
-        { name: "xs (12px)", var: "--zid-font-size-xs" }
-      ].map((size) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "16px", padding: "12px 0", borderBottom: "1px solid var(--zid-divider)" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100px", fontFamily: "monospace", fontSize: "13px", color: "var(--zid-text-secondary)" }, children: size.name }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: `var(${size.var})`, flex: 1 }, children: "Heading Text" })
-      ] }, size.name)) })
-    ] })
-  ] })
-};
-const FontWeights = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "24px", maxWidth: "900px", fontFamily: "var(--zid-font-family)" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "24px" }, children: "Font Weights" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px", marginBottom: "32px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "16px", padding: "16px", background: "var(--zid-base-neutral)", borderRadius: "8px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "120px", fontFamily: "monospace", fontSize: "13px" }, children: "regular (400)" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "24px", fontWeight: "var(--zid-font-weight-regular)", flex: 1 }, children: "The quick brown fox" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "16px", padding: "16px", background: "var(--zid-base-neutral)", borderRadius: "8px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "120px", fontFamily: "monospace", fontSize: "13px" }, children: "medium (500)" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "24px", fontWeight: "var(--zid-font-weight-medium)", flex: 1 }, children: "The quick brown fox" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "16px", padding: "16px", background: "var(--zid-base-neutral)", borderRadius: "8px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "120px", fontFamily: "monospace", fontSize: "13px" }, children: "semibold (600)" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "24px", fontWeight: "var(--zid-font-weight-semibold)", flex: 1 }, children: "The quick brown fox" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "16px", padding: "16px", background: "var(--zid-base-neutral)", borderRadius: "8px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "120px", fontFamily: "monospace", fontSize: "13px" }, children: "bold (700)" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "24px", fontWeight: "var(--zid-font-weight-bold)", flex: 1 }, children: "The quick brown fox" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", fontSize: "13px" }, children: `font-weight: var(--zid-font-weight-regular);  /* 400 */
-font-weight: var(--zid-font-weight-medium);   /* 500 */
-font-weight: var(--zid-font-weight-semibold); /* 600 */
-font-weight: var(--zid-font-weight-bold);     /* 700 */` })
-  ] })
-};
-const UsageExamples = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "24px", maxWidth: "900px", fontFamily: "var(--zid-font-family)" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "24px" }, children: "Usage Examples" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "48px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px" }, children: "Page Header" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "24px", background: "var(--zid-base-neutral)", borderRadius: "8px", marginBottom: "16px" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: "var(--zid-font-size-3xl)", fontWeight: "var(--zid-font-weight-bold)", margin: "0 0 8px 0" }, children: "Dashboard Overview" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "var(--zid-font-size-base)", color: "var(--zid-text-secondary)", margin: 0 }, children: "Welcome back! Here's what's happening today." })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", fontSize: "13px", margin: 0 }, children: `.page-title {
-  font-size: var(--zid-font-size-3xl);
-  font-weight: var(--zid-font-weight-bold);
-}
-
-.page-subtitle {
-  font-size: var(--zid-font-size-base);
-  color: var(--zid-text-secondary);
-}` })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px" }, children: "Card Content" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-card zid-card--elevation-1", style: { padding: "20px", marginBottom: "16px" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { fontSize: "var(--zid-font-size-lg)", fontWeight: "var(--zid-font-weight-semibold)", margin: "0 0 8px 0" }, children: "Card Title" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "var(--zid-font-size-sm)", color: "var(--zid-text-secondary)", lineHeight: "var(--zid-line-height-normal)", margin: 0 }, children: "This is the card description with proper typography settings applied." })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("pre", { style: { background: "#1f0433", color: "#fff", padding: "16px", borderRadius: "8px", fontSize: "13px", margin: 0 }, children: `.card-title {
-  font-size: var(--zid-font-size-lg);
-  font-weight: var(--zid-font-weight-semibold);
-}
-
-.card-description {
-  font-size: var(--zid-font-size-sm);
-  line-height: var(--zid-line-height-normal);
-}` })
-      ] })
-    ] })
-  ] })
-};
-exports.CSSTypography = CSSTypography;
-exports.FontWeights = FontWeights;
-exports.UsageExamples = UsageExamples;
-exports.default = meta;
-//# sourceMappingURL=Typography.stories.js.map

package/dist/react/cjs/stories/design/Typography.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Typography.stories.js","sources":["../../../../../src/stories/design/Typography.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n  title: 'Design System/Typography/CSS',\n  parameters: {\n    layout: 'fullscreen',\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const CSSTypography: Story = {\n  render: () => (\n    <div style={{ padding: '24px', maxWidth: '900px', fontFamily: 'var(--zid-font-family)' }}>\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '8px' }}>Typography Scale</h2>\n        <p style={{ color: 'var(--zid-text-secondary)' }}>Access typography via CSS variables: <code>var(--zid-font-&#123;property&#125;)</code></p>\n      </div>\n\n      <div style={{ marginBottom: '48px' }}>\n        <h3 style={{ marginBottom: '16px' }}>Font Family</h3>\n        <div style={{ padding: '20px', background: 'var(--zid-base-neutral)', borderRadius: '8px', marginBottom: '16px' }}>\n          <p style={{ fontSize: '24px', margin: 0 }}>IBM Plex Sans Arabic</p>\n          <p style={{ fontSize: '14px', color: 'var(--zid-text-secondary)', margin: '8px 0 0 0' }}>The quick brown fox jumps over the lazy dog</p>\n        </div>\n        <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', fontSize: '13px', margin: 0 }}>\n{`font-family: var(--zid-font-family);`}\n        </pre>\n      </div>\n\n      <div style={{ marginBottom: '48px' }}>\n        <h3 style={{ marginBottom: '16px' }}>Font Sizes</h3>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n          {[\n            { name: '4xl (36px)', var: '--zid-font-size-4xl' },\n            { name: '3xl (30px)', var: '--zid-font-size-3xl' },\n            { name: '2xl (24px)', var: '--zid-font-size-2xl' },\n            { name: 'xl (20px)', var: '--zid-font-size-xl' },\n            { name: 'lg (18px)', var: '--zid-font-size-lg' },\n            { name: 'base (16px)', var: '--zid-font-size-base' },\n            { name: 'sm (14px)', var: '--zid-font-size-sm' },\n            { name: 'xs (12px)', var: '--zid-font-size-xs' },\n          ].map(size => (\n            <div key={size.name} style={{ display: 'flex', alignItems: 'baseline', gap: '16px', padding: '12px 0', borderBottom: '1px solid var(--zid-divider)' }}>\n              <div style={{ width: '100px', fontFamily: 'monospace', fontSize: '13px', color: 'var(--zid-text-secondary)' }}>{size.name}</div>\n              <div style={{ fontSize: `var(${size.var})`, flex: 1 }}>Heading Text</div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  ),\n};\n\nexport const FontWeights: Story = {\n  render: () => (\n    <div style={{ padding: '24px', maxWidth: '900px', fontFamily: 'var(--zid-font-family)' }}>\n      <h2 style={{ marginBottom: '24px' }}>Font Weights</h2>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginBottom: '32px' }}>\n        <div style={{ display: 'flex', alignItems: 'center', gap: '16px', padding: '16px', background: 'var(--zid-base-neutral)', borderRadius: '8px' }}>\n          <div style={{ width: '120px', fontFamily: 'monospace', fontSize: '13px' }}>regular (400)</div>\n          <div style={{ fontSize: '24px', fontWeight: 'var(--zid-font-weight-regular)', flex: 1 }}>The quick brown fox</div>\n        </div>\n        <div style={{ display: 'flex', alignItems: 'center', gap: '16px', padding: '16px', background: 'var(--zid-base-neutral)', borderRadius: '8px' }}>\n          <div style={{ width: '120px', fontFamily: 'monospace', fontSize: '13px' }}>medium (500)</div>\n          <div style={{ fontSize: '24px', fontWeight: 'var(--zid-font-weight-medium)', flex: 1 }}>The quick brown fox</div>\n        </div>\n        <div style={{ display: 'flex', alignItems: 'center', gap: '16px', padding: '16px', background: 'var(--zid-base-neutral)', borderRadius: '8px' }}>\n          <div style={{ width: '120px', fontFamily: 'monospace', fontSize: '13px' }}>semibold (600)</div>\n          <div style={{ fontSize: '24px', fontWeight: 'var(--zid-font-weight-semibold)', flex: 1 }}>The quick brown fox</div>\n        </div>\n        <div style={{ display: 'flex', alignItems: 'center', gap: '16px', padding: '16px', background: 'var(--zid-base-neutral)', borderRadius: '8px' }}>\n          <div style={{ width: '120px', fontFamily: 'monospace', fontSize: '13px' }}>bold (700)</div>\n          <div style={{ fontSize: '24px', fontWeight: 'var(--zid-font-weight-bold)', flex: 1 }}>The quick brown fox</div>\n        </div>\n      </div>\n      <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', fontSize: '13px' }}>\n{`font-weight: var(--zid-font-weight-regular);  /* 400 */\nfont-weight: var(--zid-font-weight-medium);   /* 500 */\nfont-weight: var(--zid-font-weight-semibold); /* 600 */\nfont-weight: var(--zid-font-weight-bold);     /* 700 */`}\n      </pre>\n    </div>\n  ),\n};\n\nexport const UsageExamples: Story = {\n  render: () => (\n    <div style={{ padding: '24px', maxWidth: '900px', fontFamily: 'var(--zid-font-family)' }}>\n      <h2 style={{ marginBottom: '24px' }}>Usage Examples</h2>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '48px' }}>\n        <div>\n          <h3 style={{ marginBottom: '16px' }}>Page Header</h3>\n          <div style={{ padding: '24px', background: 'var(--zid-base-neutral)', borderRadius: '8px', marginBottom: '16px' }}>\n            <h1 style={{ fontSize: 'var(--zid-font-size-3xl)', fontWeight: 'var(--zid-font-weight-bold)', margin: '0 0 8px 0' }}>Dashboard Overview</h1>\n            <p style={{ fontSize: 'var(--zid-font-size-base)', color: 'var(--zid-text-secondary)', margin: 0 }}>Welcome back! Here's what's happening today.</p>\n          </div>\n          <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', fontSize: '13px', margin: 0 }}>\n{`.page-title {\n  font-size: var(--zid-font-size-3xl);\n  font-weight: var(--zid-font-weight-bold);\n}\n\n.page-subtitle {\n  font-size: var(--zid-font-size-base);\n  color: var(--zid-text-secondary);\n}`}\n          </pre>\n        </div>\n        <div>\n          <h3 style={{ marginBottom: '16px' }}>Card Content</h3>\n          <div className=\"zid-card zid-card--elevation-1\" style={{ padding: '20px', marginBottom: '16px' }}>\n            <h4 style={{ fontSize: 'var(--zid-font-size-lg)', fontWeight: 'var(--zid-font-weight-semibold)', margin: '0 0 8px 0' }}>Card Title</h4>\n            <p style={{ fontSize: 'var(--zid-font-size-sm)', color: 'var(--zid-text-secondary)', lineHeight: 'var(--zid-line-height-normal)', margin: 0 }}>This is the card description with proper typography settings applied.</p>\n          </div>\n          <pre style={{ background: '#1f0433', color: '#fff', padding: '16px', borderRadius: '8px', fontSize: '13px', margin: 0 }}>\n{`.card-title {\n  font-size: var(--zid-font-size-lg);\n  font-weight: var(--zid-font-weight-semibold);\n}\n\n.card-description {\n  font-size: var(--zid-font-size-sm);\n  line-height: var(--zid-line-height-normal);\n}`}\n          </pre>\n        </div>\n      </div>\n    </div>\n  ),\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;AAGA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAEZ;AAKO,MAAM,gBAAuB;AAAA,EAClC,QAAQ,MACNA,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,UAAU,SAAS,YAAY,yBAAA,GAC5D,UAAA;AAAA,IAAAA,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,cAAc,UAC1B,UAAA;AAAA,MAAAC,+BAAC,QAAG,OAAO,EAAE,cAAc,MAAA,GAAS,UAAA,oBAAgB;AAAA,sCACnD,KAAA,EAAE,OAAO,EAAE,OAAO,+BAA+B,UAAA;AAAA,QAAA;AAAA,QAAqCA,2BAAAA,IAAC,UAAK,UAAA,6BAAA,CAAoC;AAAA,MAAA,EAAA,CAAO;AAAA,IAAA,GAC1I;AAAA,oCAEC,OAAA,EAAI,OAAO,EAAE,cAAc,UAC1B,UAAA;AAAA,MAAAA,+BAAC,QAAG,OAAO,EAAE,cAAc,OAAA,GAAU,UAAA,eAAW;AAAA,MAChDD,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,2BAA2B,cAAc,OAAO,cAAc,OAAA,GACvG,UAAA;AAAA,QAAAC,2BAAAA,IAAC,KAAA,EAAE,OAAO,EAAE,UAAU,QAAQ,QAAQ,EAAA,GAAK,UAAA,uBAAA,CAAoB;AAAA,QAC/DA,2BAAAA,IAAC,KAAA,EAAE,OAAO,EAAE,UAAU,QAAQ,OAAO,6BAA6B,QAAQ,eAAe,UAAA,8CAAA,CAA2C;AAAA,MAAA,GACtI;AAAA,qCACC,OAAA,EAAI,OAAO,EAAE,YAAY,WAAW,OAAO,QAAQ,SAAS,QAAQ,cAAc,OAAO,UAAU,QAAQ,QAAQ,KAC3H,UAAA,uCAAA,CACO;AAAA,IAAA,GACF;AAAA,oCAEC,OAAA,EAAI,OAAO,EAAE,cAAc,UAC1B,UAAA;AAAA,MAAAA,+BAAC,QAAG,OAAO,EAAE,cAAc,OAAA,GAAU,UAAA,cAAU;AAAA,MAC/CA,2BAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC1D,UAAA;AAAA,QACC,EAAE,MAAM,cAAc,KAAK,sBAAA;AAAA,QAC3B,EAAE,MAAM,cAAc,KAAK,sBAAA;AAAA,QAC3B,EAAE,MAAM,cAAc,KAAK,sBAAA;AAAA,QAC3B,EAAE,MAAM,aAAa,KAAK,qBAAA;AAAA,QAC1B,EAAE,MAAM,aAAa,KAAK,qBAAA;AAAA,QAC1B,EAAE,MAAM,eAAe,KAAK,uBAAA;AAAA,QAC5B,EAAE,MAAM,aAAa,KAAK,qBAAA;AAAA,QAC1B,EAAE,MAAM,aAAa,KAAK,qBAAA;AAAA,MAAqB,EAC/C,IAAI,CAAA,SACJD,2BAAAA,KAAC,OAAA,EAAoB,OAAO,EAAE,SAAS,QAAQ,YAAY,YAAY,KAAK,QAAQ,SAAS,UAAU,cAAc,kCACnH,UAAA;AAAA,QAAAC,2BAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,YAAY,aAAa,UAAU,QAAQ,OAAO,4BAAA,GAAgC,eAAK,MAAK;AAAA,QAC1HA,2BAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,UAAU,OAAO,KAAK,GAAG,KAAK,MAAM,EAAA,GAAK,UAAA,eAAA,CAAY;AAAA,MAAA,KAF3D,KAAK,IAGf,CACD,EAAA,CACH;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEO,MAAM,cAAqB;AAAA,EAChC,QAAQ,MACND,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,UAAU,SAAS,YAAY,yBAAA,GAC5D,UAAA;AAAA,IAAAC,+BAAC,QAAG,OAAO,EAAE,cAAc,OAAA,GAAU,UAAA,gBAAY;AAAA,IACjDD,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,QAAQ,cAAc,OAAA,GACjF,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,QAAQ,SAAS,QAAQ,YAAY,2BAA2B,cAAc,SACtI,UAAA;AAAA,QAAAC,2BAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,YAAY,aAAa,UAAU,OAAA,GAAU,UAAA,gBAAA,CAAa;AAAA,QACxFA,2BAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,UAAU,QAAQ,YAAY,kCAAkC,MAAM,KAAK,UAAA,sBAAA,CAAmB;AAAA,MAAA,GAC9G;AAAA,sCACC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,QAAQ,SAAS,QAAQ,YAAY,2BAA2B,cAAc,SACtI,UAAA;AAAA,QAAAA,2BAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,YAAY,aAAa,UAAU,OAAA,GAAU,UAAA,eAAA,CAAY;AAAA,QACvFA,2BAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,UAAU,QAAQ,YAAY,iCAAiC,MAAM,KAAK,UAAA,sBAAA,CAAmB;AAAA,MAAA,GAC7G;AAAA,sCACC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,QAAQ,SAAS,QAAQ,YAAY,2BAA2B,cAAc,SACtI,UAAA;AAAA,QAAAA,2BAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,YAAY,aAAa,UAAU,OAAA,GAAU,UAAA,iBAAA,CAAc;AAAA,QACzFA,2BAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,UAAU,QAAQ,YAAY,mCAAmC,MAAM,KAAK,UAAA,sBAAA,CAAmB;AAAA,MAAA,GAC/G;AAAA,sCACC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,QAAQ,SAAS,QAAQ,YAAY,2BAA2B,cAAc,SACtI,UAAA;AAAA,QAAAA,2BAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,YAAY,aAAa,UAAU,OAAA,GAAU,UAAA,aAAA,CAAU;AAAA,QACrFA,2BAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,UAAU,QAAQ,YAAY,+BAA+B,MAAM,KAAK,UAAA,sBAAA,CAAmB;AAAA,MAAA,EAAA,CAC3G;AAAA,IAAA,GACF;AAAA,IACAA,2BAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,YAAY,WAAW,OAAO,QAAQ,SAAS,QAAQ,cAAc,OAAO,UAAU,UACzG,UAAA;AAAA;AAAA;AAAA,yDAAA,CAIK;AAAA,EAAA,EAAA,CACF;AAEJ;AAEO,MAAM,gBAAuB;AAAA,EAClC,QAAQ,MACND,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,UAAU,SAAS,YAAY,yBAAA,GAC5D,UAAA;AAAA,IAAAC,+BAAC,QAAG,OAAO,EAAE,cAAc,OAAA,GAAU,UAAA,kBAAc;AAAA,IACnDD,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC3D,UAAA;AAAA,MAAAA,gCAAC,OAAA,EACC,UAAA;AAAA,QAAAC,+BAAC,QAAG,OAAO,EAAE,cAAc,OAAA,GAAU,UAAA,eAAW;AAAA,QAChDD,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,2BAA2B,cAAc,OAAO,cAAc,OAAA,GACvG,UAAA;AAAA,UAAAC,2BAAAA,IAAC,MAAA,EAAG,OAAO,EAAE,UAAU,4BAA4B,YAAY,+BAA+B,QAAQ,YAAA,GAAe,UAAA,qBAAA,CAAkB;AAAA,UACvIA,2BAAAA,IAAC,KAAA,EAAE,OAAO,EAAE,UAAU,6BAA6B,OAAO,6BAA6B,QAAQ,KAAK,UAAA,+CAAA,CAA4C;AAAA,QAAA,GAClJ;AAAA,uCACC,OAAA,EAAI,OAAO,EAAE,YAAY,WAAW,OAAO,QAAQ,SAAS,QAAQ,cAAc,OAAO,UAAU,QAAQ,QAAQ,KAC7H,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAA,CASS;AAAA,MAAA,GACF;AAAA,sCACC,OAAA,EACC,UAAA;AAAA,QAAAA,+BAAC,QAAG,OAAO,EAAE,cAAc,OAAA,GAAU,UAAA,gBAAY;AAAA,QACjDD,2BAAAA,KAAC,OAAA,EAAI,WAAU,kCAAiC,OAAO,EAAE,SAAS,QAAQ,cAAc,OAAA,GACtF,UAAA;AAAA,UAAAC,2BAAAA,IAAC,MAAA,EAAG,OAAO,EAAE,UAAU,2BAA2B,YAAY,mCAAmC,QAAQ,YAAA,GAAe,UAAA,aAAA,CAAU;AAAA,UAClIA,2BAAAA,IAAC,KAAA,EAAE,OAAO,EAAE,UAAU,2BAA2B,OAAO,6BAA6B,YAAY,iCAAiC,QAAQ,EAAA,GAAK,UAAA,wEAAA,CAAqE;AAAA,QAAA,GACtN;AAAA,uCACC,OAAA,EAAI,OAAO,EAAE,YAAY,WAAW,OAAO,QAAQ,SAAS,QAAQ,cAAc,OAAO,UAAU,QAAQ,QAAQ,KAC7H,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAA,CASS;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;;;;;"}

package/dist/react/cjs/stories/design/spacing/CSS.stories.js

@@ -1,61 +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: "Design System/Spacing/CSS",
-  parameters: {
-    layout: "fullscreen"
-  },
-  tags: ["autodocs"]
-};
-const spacingTokens = [
-  { name: "0", px: "0px" },
-  { name: "0-25", px: "2px" },
-  { name: "0-5", px: "4px" },
-  { name: "0-75", px: "6px" },
-  { name: "1", px: "8px" },
-  { name: "1-5", px: "12px" },
-  { name: "2", px: "16px" },
-  { name: "2-5", px: "20px" },
-  { name: "3", px: "24px" },
-  { name: "3-5", px: "28px" },
-  { name: "4", px: "32px" },
-  { name: "5", px: "40px" },
-  { name: "6", px: "48px" },
-  { name: "7", px: "56px" },
-  { name: "8", px: "64px" },
-  { name: "9", px: "72px" },
-  { name: "10", px: "80px" },
-  { name: "11", px: "88px" },
-  { name: "12", px: "96px" }
-];
-const SpacingScale = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "24px", maxWidth: "900px", fontFamily: "var(--zid-font-family)" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "32px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { marginBottom: "8px" }, children: "CSS Spacing Scale" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { color: "var(--zid-text-secondary)", marginBottom: "8px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "How to use in CSS:" }),
-        " ",
-        /* @__PURE__ */ jsxRuntime.jsx("code", { children: "var(--zid-spacing-{value})" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "16px", padding: "12px 0", borderBottom: "2px solid var(--zid-divider)", fontWeight: 600, fontSize: "14px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "80px" }, children: "Token" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "60px" }, children: "Value" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: "Preview (gap between boxes)" })
-    ] }),
-    spacingTokens.map((token) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "16px", padding: "12px 0", borderBottom: "1px solid var(--zid-divider)" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "80px", fontFamily: "monospace", fontSize: "14px" }, children: token.name }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "60px", color: "var(--zid-text-secondary)", fontSize: "14px" }, children: token.px }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, display: "flex", gap: token.px }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "40px", height: "40px", backgroundColor: "var(--zid-primary-main)", borderRadius: "4px" } }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "40px", height: "40px", backgroundColor: "var(--zid-primary-main)", borderRadius: "4px" } }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "40px", height: "40px", backgroundColor: "var(--zid-primary-main)", borderRadius: "4px" } })
-      ] })
-    ] }, token.name))
-  ] })
-};
-exports.SpacingScale = SpacingScale;
-exports.default = meta;
-//# sourceMappingURL=CSS.stories.js.map

package/dist/react/cjs/stories/design/spacing/CSS.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CSS.stories.js","sources":["../../../../../../src/stories/design/spacing/CSS.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\nimport '../../../css/index.css';\n\n//\n//\n\nconst meta = {\n  title: 'Design System/Spacing/CSS',\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n// CSS Spacing Tokens\n//\n\nconst spacingTokens = [\n  { name: '0', px: '0px' },\n  { name: '0-25', px: '2px' },\n  { name: '0-5', px: '4px' },\n  { name: '0-75', px: '6px' },\n  { name: '1', px: '8px' },\n  { name: '1-5', px: '12px' },\n  { name: '2', px: '16px' },\n  { name: '2-5', px: '20px' },\n  { name: '3', px: '24px' },\n  { name: '3-5', px: '28px' },\n  { name: '4', px: '32px' },\n  { name: '5', px: '40px' },\n  { name: '6', px: '48px' },\n  { name: '7', px: '56px' },\n  { name: '8', px: '64px' },\n  { name: '9', px: '72px' },\n  { name: '10', px: '80px' },\n  { name: '11', px: '88px' },\n  { name: '12', px: '96px' },\n];\n\nexport const SpacingScale: Story = {\n  render: () => (\n    <div style={{ padding: '24px', maxWidth: '900px', fontFamily: 'var(--zid-font-family)' }}>\n      <div style={{ marginBottom: '32px' }}>\n        <h2 style={{ marginBottom: '8px' }}>CSS Spacing Scale</h2>\n        <p style={{ color: 'var(--zid-text-secondary)', marginBottom: '8px' }}>\n          <strong>How to use in CSS:</strong> <code>var(--zid-spacing-&#123;value&#125;)</code>\n        </p>\n      </div>\n      <div style={{ display: 'flex', alignItems: 'center', gap: '16px', padding: '12px 0', borderBottom: '2px solid var(--zid-divider)', fontWeight: 600, fontSize: '14px' }}>\n        <div style={{ width: '80px' }}>Token</div>\n        <div style={{ width: '60px' }}>Value</div>\n        <div style={{ flex: 1 }}>Preview (gap between boxes)</div>\n      </div>\n      {spacingTokens.map(token => (\n        <div key={token.name} style={{ display: 'flex', alignItems: 'center', gap: '16px', padding: '12px 0', borderBottom: '1px solid var(--zid-divider)' }}>\n          <div style={{ width: '80px', fontFamily: 'monospace', fontSize: '14px' }}>{token.name}</div>\n          <div style={{ width: '60px', color: 'var(--zid-text-secondary)', fontSize: '14px' }}>{token.px}</div>\n          <div style={{ flex: 1, display: 'flex', gap: token.px }}>\n            <div style={{ width: '40px', height: '40px', backgroundColor: 'var(--zid-primary-main)', borderRadius: '4px' }}></div>\n            <div style={{ width: '40px', height: '40px', backgroundColor: 'var(--zid-primary-main)', borderRadius: '4px' }}></div>\n            <div style={{ width: '40px', height: '40px', backgroundColor: 'var(--zid-primary-main)', borderRadius: '4px' }}></div>\n          </div>\n        </div>\n      ))}\n    </div>\n  ),\n};\n"],"names":["jsxs","jsx"],"mappings":"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"}

package/dist/react/cjs/stories/design/spacing/React.stories.js

@@ -1,102 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const material = require("@mui/material");
-const React = require("react");
-const stackColumn = require("../../../components/stack-column.js");
-const stackRow = require("../../../components/stack-row.js");
-const appTooltip = require("../../../components/app-tooltip.js");
-const fileCopyLine = require("../../../icons/document/file-copy-line.js");
-const checkLine = require("../../../icons/system/check-line.js");
-const appTypography = require("../../../components/app-typography.js");
-const meta = {
-  title: "Design System/Spacing/React",
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"]
-};
-const DemoBox = ({ color = "#1976d2" }) => /* @__PURE__ */ jsxRuntime.jsx(
-  material.Box,
-  {
-    sx: {
-      width: 60,
-      height: 60,
-      backgroundColor: color,
-      borderRadius: 1,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      color: "white",
-      fontSize: "12px",
-      fontWeight: "bold"
-    },
-    children: "Box"
-  }
-);
-const CopyButton = ({ value }) => {
-  const [copied, setCopied] = React.useState(false);
-  const handleCopy = () => {
-    navigator.clipboard.writeText(`gap={${value}}`);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2e3);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(appTooltip.AppTooltip, { description: copied ? "Copied!" : "Copy", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size: "small", onClick: handleCopy, children: copied ? /* @__PURE__ */ jsxRuntime.jsx(checkLine.IconCheckLine, { fontSize: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(fileCopyLine.IconFileCopyLine, { fontSize: "small" }) }) });
-};
-const spacingValues = [
-  1,
-  1.25,
-  1.5,
-  1.75,
-  2,
-  2.25,
-  2.5,
-  2.75,
-  3,
-  3.25,
-  3.5,
-  3.75,
-  4,
-  4.25,
-  4.5,
-  4.75,
-  5
-];
-const StackRowSpacing = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsx(stackColumn.StackColumn, { gap: 3, children: spacingValues.map((spacing) => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 0.75, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(stackRow.StackRow, { gap: 0, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(appTypography.AppTypography, { variant: "subtitle1", minWidth: 60, children: [
-        "Gap: ",
-        spacing
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value: spacing })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(stackRow.StackRow, { gap: spacing, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, {})
-    ] })
-  ] }, `row-${spacing}`)) })
-};
-const StackColumnSpacing = {
-  render: () => /* @__PURE__ */ jsxRuntime.jsx(stackColumn.StackColumn, { gap: 3, children: spacingValues.map((spacing) => /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 0.75, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(stackRow.StackRow, { gap: 0, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(appTypography.AppTypography, { variant: "subtitle1", minWidth: 60, children: [
-        "Gap: ",
-        spacing
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value: spacing })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: spacing, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, { color: "#dc3545" }),
-      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, { color: "#dc3545" }),
-      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, { color: "#dc3545" }),
-      /* @__PURE__ */ jsxRuntime.jsx(DemoBox, { color: "#dc3545" })
-    ] })
-  ] }, `col-${spacing}`)) })
-};
-exports.StackColumnSpacing = StackColumnSpacing;
-exports.StackRowSpacing = StackRowSpacing;
-exports.default = meta;
-//# sourceMappingURL=React.stories.js.map

package/dist/react/cjs/stories/design/spacing/React.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"React.stories.js","sources":["../../../../../../src/stories/design/spacing/React.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\nimport { Box, IconButton } from '@mui/material';\nimport { useState } from 'react';\nimport { StackColumn } from '~/components/stack-column';\nimport { StackRow } from '~/components/stack-row';\nimport { AppTooltip } from '~/components/app-tooltip';\nimport { IconFileCopyLine } from '~/icons/document/file-copy-line';\nimport { IconCheckLine } from '~/icons/system/check-line';\nimport { AppTypography } from '~/components/app-typography';\n\n//\n//\n\nconst meta = {\n  title: 'Design System/Spacing/React',\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nconst DemoBox = ({ color = '#1976d2' }: { color?: string }) => (\n  <Box\n    sx={{\n      width: 60,\n      height: 60,\n      backgroundColor: color,\n      borderRadius: 1,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'white',\n      fontSize: '12px',\n      fontWeight: 'bold',\n    }}\n  >\n    Box\n  </Box>\n);\n\nconst CopyButton = ({ value }: { value: number | string }) => {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(`gap={${value}}`);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <AppTooltip description={copied ? 'Copied!' : 'Copy'}>\n      <IconButton size=\"small\" onClick={handleCopy}>\n        {copied ? <IconCheckLine fontSize=\"small\" /> : <IconFileCopyLine fontSize=\"small\" />}\n      </IconButton>\n    </AppTooltip>\n  );\n};\n\nconst spacingValues = [\n  1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4, 4.25, 4.5, 4.75, 5,\n];\n\nexport const StackRowSpacing: Story = {\n  render: () => (\n    <StackColumn gap={3}>\n      {spacingValues.map(spacing => (\n        <StackColumn key={`row-${spacing}`} gap={0.75}>\n          <StackRow gap={0}>\n            <AppTypography variant=\"subtitle1\" minWidth={60}>\n              Gap: {spacing}\n            </AppTypography>\n            <CopyButton value={spacing} />\n          </StackRow>\n\n          <StackRow gap={spacing}>\n            <DemoBox />\n            <DemoBox />\n            <DemoBox />\n            <DemoBox />\n          </StackRow>\n        </StackColumn>\n      ))}\n    </StackColumn>\n  ),\n};\n\nexport const StackColumnSpacing: Story = {\n  render: () => (\n    <StackColumn gap={3}>\n      {spacingValues.map(spacing => (\n        <StackColumn key={`col-${spacing}`} gap={0.75}>\n          <StackRow gap={0}>\n            <AppTypography variant=\"subtitle1\" minWidth={60}>\n              Gap: {spacing}\n            </AppTypography>\n            <CopyButton value={spacing} />\n          </StackRow>\n          <StackColumn gap={spacing}>\n            <DemoBox color=\"#dc3545\" />\n            <DemoBox color=\"#dc3545\" />\n            <DemoBox color=\"#dc3545\" />\n            <DemoBox color=\"#dc3545\" />\n          </StackColumn>\n        </StackColumn>\n      ))}\n    </StackColumn>\n  ),\n};\n"],"names":["jsx","Box","useState","AppTooltip","IconButton","IconCheckLine","IconFileCopyLine","StackColumn","jsxs","StackRow","AppTypography"],"mappings":"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"}