@zidsa/zidmui 2.1.8 → 2.3.0-beta.0

package/dist/react/es/stories/react/AppTooltip.stories.js

@@ -1,119 +0,0 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { styled, useTheme, ClickAwayListener, Box } from "@mui/material";
-import { AppButton } from "../../components/app-button.js";
-import { AppTooltip } from "../../components/app-tooltip.js";
-import { AppTypography } from "../../components/app-typography.js";
-import { StackColumn } from "../../components/stack-column.js";
-import { StackRow } from "../../components/stack-row.js";
-import { useToggle } from "../../hooks/use-toggle.js";
-const meta = {
-  title: "React/App Tooltip",
-  component: AppTooltip,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    arrow: {
-      control: "boolean"
-    },
-    placement: {
-      control: "select",
-      options: [
-        "auto",
-        "auto-start",
-        "auto-end",
-        "top",
-        "bottom",
-        "left",
-        "right",
-        "top-start",
-        "top-end",
-        "bottom-start",
-        "bottom-end",
-        "right-start",
-        "right-end",
-        "left-start",
-        "left-end"
-      ]
-    },
-    children: {
-      control: "text"
-    }
-  }
-};
-const Variants = {
-  args: {
-    headline: "Total sales over time",
-    description: "Amount spent (subtotal, taxes, shipping, returns, discounts, fees, etc.)",
-    children: /* @__PURE__ */ jsx(Fragment, {}),
-    placement: "top"
-  },
-  render: (args) => /* @__PURE__ */ jsx(AppTooltips, { ...args })
-};
-const AppTooltips = (props) => {
-  const toggle = useToggle();
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(StackRow, { gap: 4, children: [
-    /* @__PURE__ */ jsxs(StackColumn, { gap: 4, children: [
-      /* @__PURE__ */ jsx(AppTooltip, { ...props, description: "", children: /* @__PURE__ */ jsx(AppButton, { variant: "outlined", children: "Default" }) }),
-      /* @__PURE__ */ jsx(AppTooltip, { disableFocusListener: true, ...props, headline: "", children: /* @__PURE__ */ jsx(AppButton, { variant: "outlined", children: "Hover or touch" }) }),
-      /* @__PURE__ */ jsx(AppTooltip, { disableHoverListener: true, ...props, children: /* @__PURE__ */ jsx(AppButton, { variant: "outlined", children: "Focus or touch" }) }),
-      /* @__PURE__ */ jsx(AppTooltip, { disableFocusListener: true, disableTouchListener: true, ...props, children: /* @__PURE__ */ jsx(AppButton, { variant: "outlined", children: "Hover" }) }),
-      /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: toggle.off, children: /* @__PURE__ */ jsx(
-        AppTooltip,
-        {
-          onClose: toggle.off,
-          open: toggle.value,
-          disableFocusListener: true,
-          disableHoverListener: true,
-          disableTouchListener: true,
-          slotProps: {
-            popper: {
-              disablePortal: true
-            }
-          },
-          ...props,
-          children: /* @__PURE__ */ jsx(AppButton, { variant: "outlined", onClick: toggle.on, children: "Click" })
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsxs(StackColumn, { gap: 4, children: [
-      /* @__PURE__ */ jsx(AppTooltip, { ...props, headline: "This is headline only", description: "", children: /* @__PURE__ */ jsx(AppButton, { variant: "outlined", children: "Headline only" }) }),
-      /* @__PURE__ */ jsx(AppTooltip, { ...props, headline: "", description: "This is description only", children: /* @__PURE__ */ jsx(AppButton, { variant: "outlined", children: "Description only" }) }),
-      /* @__PURE__ */ jsx(
-        AppTooltip,
-        {
-          ...props,
-          headline: "This is headline and description",
-          description: "This is description",
-          children: /* @__PURE__ */ jsx(AppButton, { variant: "outlined", children: "Headline and description" })
-        }
-      ),
-      /* @__PURE__ */ jsx(AppTooltip, { ...props, headline: "This is headline and description", children: /* @__PURE__ */ jsx(AppButton, { variant: "outlined", children: "Headline and description" }) }),
-      /* @__PURE__ */ jsx(
-        AppTooltip,
-        {
-          ...props,
-          content: /* @__PURE__ */ jsxs(Box, { children: [
-            /* @__PURE__ */ jsxs(DescriptionTypography, { component: "span", color: theme.palette.colors.green[400], children: [
-              "Total sales =",
-              " "
-            ] }),
-            /* @__PURE__ */ jsx(DescriptionTypography, { component: "span", color: theme.palette.colors.primary[400], children: "net sales + additonal fees + duties + shipping charges + taxes" })
-          ] }),
-          children: /* @__PURE__ */ jsx(AppButton, { variant: "outlined", children: "With custom content" })
-        }
-      )
-    ] })
-  ] });
-};
-const DescriptionTypography = styled(AppTypography)(({ theme }) => ({
-  fontWeight: 400,
-  fontSize: theme.spacing(1.5)
-}));
-export {
-  Variants,
-  meta as default
-};
-//# sourceMappingURL=AppTooltip.stories.js.map

package/dist/react/es/stories/react/AppTooltip.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AppTooltip.stories.js","sources":["../../../../../src/stories/react/AppTooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Box, ClickAwayListener, styled, useTheme } from '@mui/material';\n\nimport { AppButton } from '~/components/app-button';\nimport { AppTooltip, AppTooltipProps } from '~/components/app-tooltip';\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\nimport { StackRow } from '~/components/stack-row';\nimport { useToggle } from '~/hooks/use-toggle';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Tooltip',\n  component: AppTooltip,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    arrow: {\n      control: 'boolean',\n    },\n    placement: {\n      control: 'select',\n      options: [\n        'auto',\n        'auto-start',\n        'auto-end',\n        'top',\n        'bottom',\n        'left',\n        'right',\n        'top-start',\n        'top-end',\n        'bottom-start',\n        'bottom-end',\n        'right-start',\n        'right-end',\n        'left-start',\n        'left-end',\n      ],\n    },\n    children: {\n      control: 'text',\n    },\n  },\n} satisfies Meta<typeof AppTooltip>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Variants: Story = {\n  args: {\n    headline: 'Total sales over time',\n    description: 'Amount spent (subtotal, taxes, shipping, returns, discounts, fees, etc.)',\n    children: <></>,\n    placement: 'top',\n  },\n  render: args => <AppTooltips {...args} />,\n};\n\n//\n\nconst AppTooltips = (props: AppTooltipProps) => {\n  const toggle = useToggle();\n  const theme = useTheme();\n\n  return (\n    <StackRow gap={4}>\n      <StackColumn gap={4}>\n        <AppTooltip {...props} description=\"\">\n          <AppButton variant=\"outlined\">Default</AppButton>\n        </AppTooltip>\n\n        <AppTooltip disableFocusListener {...props} headline=\"\">\n          <AppButton variant=\"outlined\">Hover or touch</AppButton>\n        </AppTooltip>\n\n        <AppTooltip disableHoverListener {...props}>\n          <AppButton variant=\"outlined\">Focus or touch</AppButton>\n        </AppTooltip>\n\n        <AppTooltip disableFocusListener disableTouchListener {...props}>\n          <AppButton variant=\"outlined\">Hover</AppButton>\n        </AppTooltip>\n\n        <ClickAwayListener onClickAway={toggle.off}>\n          <AppTooltip\n            onClose={toggle.off}\n            open={toggle.value}\n            disableFocusListener\n            disableHoverListener\n            disableTouchListener\n            slotProps={{\n              popper: {\n                disablePortal: true,\n              },\n            }}\n            {...props}\n          >\n            <AppButton variant=\"outlined\" onClick={toggle.on}>\n              Click\n            </AppButton>\n          </AppTooltip>\n        </ClickAwayListener>\n      </StackColumn>\n\n      {/*  */}\n\n      <StackColumn gap={4}>\n        <AppTooltip {...props} headline=\"This is headline only\" description=\"\">\n          <AppButton variant=\"outlined\">Headline only</AppButton>\n        </AppTooltip>\n\n        <AppTooltip {...props} headline=\"\" description=\"This is description only\">\n          <AppButton variant=\"outlined\">Description only</AppButton>\n        </AppTooltip>\n\n        <AppTooltip\n          {...props}\n          headline=\"This is headline and description\"\n          description=\"This is description\"\n        >\n          <AppButton variant=\"outlined\">Headline and description</AppButton>\n        </AppTooltip>\n\n        <AppTooltip {...props} headline=\"This is headline and description\">\n          <AppButton variant=\"outlined\">Headline and description</AppButton>\n        </AppTooltip>\n\n        <AppTooltip\n          {...props}\n          content={\n            <Box>\n              <DescriptionTypography component=\"span\" color={theme.palette.colors.green[400]}>\n                Total sales ={' '}\n              </DescriptionTypography>\n              <DescriptionTypography component=\"span\" color={theme.palette.colors.primary[400]}>\n                net sales + additonal fees + duties + shipping charges + taxes\n              </DescriptionTypography>\n            </Box>\n          }\n        >\n          <AppButton variant=\"outlined\">With custom content</AppButton>\n        </AppTooltip>\n      </StackColumn>\n    </StackRow>\n  );\n};\n\n//\n\nconst DescriptionTypography = styled(AppTypography)(({ theme }) => ({\n  fontWeight: 400,\n  fontSize: theme.spacing(1.5),\n}));\n"],"names":[],"mappings":"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"}

package/dist/react/es/stories/react/AppTypography.stories.js

@@ -1,172 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { AppTypography } from "../../components/app-typography.js";
-import { StackColumn } from "../../components/stack-column.js";
-const meta = {
-  title: "React/App Typography",
-  component: AppTypography,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "select",
-      options: [
-        "h1",
-        "h2",
-        "h3",
-        "h4",
-        "h5",
-        "h6",
-        "subtitle1",
-        "subtitle2",
-        "body1",
-        "body2",
-        "caption",
-        "overline"
-      ]
-    },
-    color: {
-      control: "select",
-      options: ["primary", "secondary", "textPrimary", "textSecondary", "error"]
-    },
-    align: {
-      control: "select",
-      options: ["left", "center", "right", "justify"]
-    },
-    tooltip: {
-      control: "text"
-    }
-  }
-};
-const Default = {
-  args: {
-    children: "Default typography text"
-  }
-};
-const Headings = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, children: [
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h1", children: "Heading 1" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h2", children: "Heading 2" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h3", children: "Heading 3" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h4", children: "Heading 4" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h5", children: "Heading 5" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "Heading 6" })
-  ] })
-};
-const BodyText = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, children: [
-    /* @__PURE__ */ jsx(AppTypography, { variant: "body1", children: "Body 1 - Regular body text" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "body2", children: "Body 2 - Smaller body text" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "subtitle1", children: "Subtitle 1" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "subtitle2", children: "Subtitle 2" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "caption", children: "Caption text" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "overline", children: "Overline text" })
-  ] })
-};
-const WithTooltip = {
-  args: {
-    children: "Hover over me to see the tooltip",
-    tooltip: "This is a helpful tooltip message"
-  }
-};
-const Colors = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, children: [
-    /* @__PURE__ */ jsx(AppTypography, { color: "primary", children: "Primary color" }),
-    /* @__PURE__ */ jsx(AppTypography, { color: "secondary", children: "Secondary color" }),
-    /* @__PURE__ */ jsx(AppTypography, { color: "textPrimary", children: "Text Primary" }),
-    /* @__PURE__ */ jsx(AppTypography, { color: "textSecondary", children: "Text Secondary" }),
-    /* @__PURE__ */ jsx(AppTypography, { color: "error", children: "Error color" })
-  ] })
-};
-const Alignment = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, sx: { width: 300 }, children: [
-    /* @__PURE__ */ jsx(AppTypography, { align: "left", children: "Left aligned text" }),
-    /* @__PURE__ */ jsx(AppTypography, { align: "center", children: "Center aligned text" }),
-    /* @__PURE__ */ jsx(AppTypography, { align: "right", children: "Right aligned text" })
-  ] })
-};
-const ArabicHeadings = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, dir: "rtl", children: [
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h1", children: "العنوان الأول" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h2", children: "العنوان الثاني" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h3", children: "العنوان الثالث" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h4", children: "العنوان الرابع" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h5", children: "العنوان الخامس" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", children: "العنوان السادس" })
-  ] })
-};
-const ArabicBodyText = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, dir: "rtl", children: [
-    /* @__PURE__ */ jsx(AppTypography, { variant: "body1", children: "النص الأساسي - هذا مثال على النص العربي" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "body2", children: "النص الثانوي - نص أصغر حجماً" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "subtitle1", children: "العنوان الفرعي الأول" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "subtitle2", children: "العنوان الفرعي الثاني" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "caption", children: "نص توضيحي صغير" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "overline", children: "نص علوي" })
-  ] })
-};
-const ArabicWithTooltip = {
-  args: {
-    children: "مرر الماوس هنا لرؤية التلميح",
-    tooltip: "هذه رسالة تلميح مفيدة"
-  }
-};
-const ArabicParagraph = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, dir: "rtl", sx: { maxWidth: 500 }, children: [
-    /* @__PURE__ */ jsx(AppTypography, { variant: "h4", children: "مرحباً بك في منصتنا" }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "body1", children: "نحن نقدم لك أفضل الحلول التقنية لإدارة متجرك الإلكتروني. ابدأ رحلتك معنا اليوم واكتشف كيف يمكننا مساعدتك في تحقيق أهدافك التجارية." }),
-    /* @__PURE__ */ jsx(AppTypography, { variant: "body2", color: "textSecondary", children: "للمزيد من المعلومات، تواصل مع فريق الدعم الفني." })
-  ] })
-};
-const MixedContent = {
-  args: {
-    children: null
-  },
-  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 3, children: [
-    /* @__PURE__ */ jsxs(StackColumn, { gap: 1, children: [
-      /* @__PURE__ */ jsx(AppTypography, { variant: "h5", children: "English Title" }),
-      /* @__PURE__ */ jsx(AppTypography, { variant: "body1", children: "This is English content for comparison." })
-    ] }),
-    /* @__PURE__ */ jsxs(StackColumn, { gap: 1, dir: "rtl", children: [
-      /* @__PURE__ */ jsx(AppTypography, { variant: "h5", children: "عنوان عربي" }),
-      /* @__PURE__ */ jsx(AppTypography, { variant: "body1", children: "هذا محتوى عربي للمقارنة." })
-    ] })
-  ] })
-};
-export {
-  Alignment,
-  ArabicBodyText,
-  ArabicHeadings,
-  ArabicParagraph,
-  ArabicWithTooltip,
-  BodyText,
-  Colors,
-  Default,
-  Headings,
-  MixedContent,
-  WithTooltip,
-  meta as default
-};
-//# sourceMappingURL=AppTypography.stories.js.map

package/dist/react/es/stories/react/AppTypography.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AppTypography.stories.js","sources":["../../../../../src/stories/react/AppTypography.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Typography',\n  component: AppTypography,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: [\n        'h1',\n        'h2',\n        'h3',\n        'h4',\n        'h5',\n        'h6',\n        'subtitle1',\n        'subtitle2',\n        'body1',\n        'body2',\n        'caption',\n        'overline',\n      ],\n    },\n    color: {\n      control: 'select',\n      options: ['primary', 'secondary', 'textPrimary', 'textSecondary', 'error'],\n    },\n    align: {\n      control: 'select',\n      options: ['left', 'center', 'right', 'justify'],\n    },\n    tooltip: {\n      control: 'text',\n    },\n  },\n} satisfies Meta<typeof AppTypography>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Default: Story = {\n  args: {\n    children: 'Default typography text',\n  },\n};\n\n//\n\nexport const Headings: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={2}>\n      <AppTypography variant=\"h1\">Heading 1</AppTypography>\n      <AppTypography variant=\"h2\">Heading 2</AppTypography>\n      <AppTypography variant=\"h3\">Heading 3</AppTypography>\n      <AppTypography variant=\"h4\">Heading 4</AppTypography>\n      <AppTypography variant=\"h5\">Heading 5</AppTypography>\n      <AppTypography variant=\"h6\">Heading 6</AppTypography>\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const BodyText: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={2}>\n      <AppTypography variant=\"body1\">Body 1 - Regular body text</AppTypography>\n      <AppTypography variant=\"body2\">Body 2 - Smaller body text</AppTypography>\n      <AppTypography variant=\"subtitle1\">Subtitle 1</AppTypography>\n      <AppTypography variant=\"subtitle2\">Subtitle 2</AppTypography>\n      <AppTypography variant=\"caption\">Caption text</AppTypography>\n      <AppTypography variant=\"overline\">Overline text</AppTypography>\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const WithTooltip: Story = {\n  args: {\n    children: 'Hover over me to see the tooltip',\n    tooltip: 'This is a helpful tooltip message',\n  },\n};\n\n//\n\nexport const Colors: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={2}>\n      <AppTypography color=\"primary\">Primary color</AppTypography>\n      <AppTypography color=\"secondary\">Secondary color</AppTypography>\n      <AppTypography color=\"textPrimary\">Text Primary</AppTypography>\n      <AppTypography color=\"textSecondary\">Text Secondary</AppTypography>\n      <AppTypography color=\"error\">Error color</AppTypography>\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const Alignment: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={2} sx={{ width: 300 }}>\n      <AppTypography align=\"left\">Left aligned text</AppTypography>\n      <AppTypography align=\"center\">Center aligned text</AppTypography>\n      <AppTypography align=\"right\">Right aligned text</AppTypography>\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const ArabicHeadings: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={2} dir=\"rtl\">\n      <AppTypography variant=\"h1\">العنوان الأول</AppTypography>\n      <AppTypography variant=\"h2\">العنوان الثاني</AppTypography>\n      <AppTypography variant=\"h3\">العنوان الثالث</AppTypography>\n      <AppTypography variant=\"h4\">العنوان الرابع</AppTypography>\n      <AppTypography variant=\"h5\">العنوان الخامس</AppTypography>\n      <AppTypography variant=\"h6\">العنوان السادس</AppTypography>\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const ArabicBodyText: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={2} dir=\"rtl\">\n      <AppTypography variant=\"body1\">النص الأساسي - هذا مثال على النص العربي</AppTypography>\n      <AppTypography variant=\"body2\">النص الثانوي - نص أصغر حجماً</AppTypography>\n      <AppTypography variant=\"subtitle1\">العنوان الفرعي الأول</AppTypography>\n      <AppTypography variant=\"subtitle2\">العنوان الفرعي الثاني</AppTypography>\n      <AppTypography variant=\"caption\">نص توضيحي صغير</AppTypography>\n      <AppTypography variant=\"overline\">نص علوي</AppTypography>\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const ArabicWithTooltip: Story = {\n  args: {\n    children: 'مرر الماوس هنا لرؤية التلميح',\n    tooltip: 'هذه رسالة تلميح مفيدة',\n  },\n};\n\n//\n\nexport const ArabicParagraph: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={2} dir=\"rtl\" sx={{ maxWidth: 500 }}>\n      <AppTypography variant=\"h4\">مرحباً بك في منصتنا</AppTypography>\n      <AppTypography variant=\"body1\">\n        نحن نقدم لك أفضل الحلول التقنية لإدارة متجرك الإلكتروني. ابدأ رحلتك معنا اليوم واكتشف كيف\n        يمكننا مساعدتك في تحقيق أهدافك التجارية.\n      </AppTypography>\n      <AppTypography variant=\"body2\" color=\"textSecondary\">\n        للمزيد من المعلومات، تواصل مع فريق الدعم الفني.\n      </AppTypography>\n    </StackColumn>\n  ),\n};\n\n//\n\nexport const MixedContent: Story = {\n  args: {\n    children: null,\n  },\n  render: () => (\n    <StackColumn gap={3}>\n      <StackColumn gap={1}>\n        <AppTypography variant=\"h5\">English Title</AppTypography>\n        <AppTypography variant=\"body1\">This is English content for comparison.</AppTypography>\n      </StackColumn>\n      <StackColumn gap={1} dir=\"rtl\">\n        <AppTypography variant=\"h5\">عنوان عربي</AppTypography>\n        <AppTypography variant=\"body1\">هذا محتوى عربي للمقارنة.</AppTypography>\n      </StackColumn>\n    </StackColumn>\n  ),\n};\n"],"names":[],"mappings":"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"}