@zidsa/zidmui 1.4.40 → 1.5.0

package/dist/es/stories/AppListItem.stories.js

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { styled, Box, Divider } from "@mui/material";
+import { AppListItem } from "../components/app-list-item.js";
+import { AppStatus } from "../components/app-status.js";
+import { AppTypography } from "../components/app-typography.js";
+import { StackColumn } from "../components/stack-column.js";
+import { IconBankLine } from "../icons/buildings/bank-line.js";
+const meta = {
+  title: "App List Item",
+  component: AppListItem,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    textLabel: {
+      control: "text"
+    },
+    textDescription: {
+      control: "text"
+    },
+    textContent: {
+      control: "text"
+    },
+    tooltip: {
+      control: "text"
+    }
+  },
+  args: {
+    textLabel: "List item label",
+    textDescription: "Description text"
+  }
+};
+const Playground = {
+  args: {}
+};
+const Variants = {
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, children: [
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", sx: { px: 1 }, children: "Label Only" }),
+    /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(AppListItem, { textLabel: "Sample Label" }) }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", sx: { px: 1 }, children: "Label and Description" }),
+    /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(AppListItem, { textLabel: "Another Item", textDescription: "This is a description" }) }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", sx: { px: 1 }, children: "With Icon" }),
+    /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(
+      AppListItem,
+      {
+        textLabel: "List Item with Icon",
+        textDescription: "This is a description",
+        icon: /* @__PURE__ */ jsx(IconBankLine, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", sx: { px: 1 }, children: "With Label Suffix" }),
+    /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(
+      AppListItem,
+      {
+        textLabel: "List Item with Label Suffix",
+        textDescription: "This is a description",
+        labelSuffix: /* @__PURE__ */ jsx(AppStatus, { color: "success", label: "Active", size: "small" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", sx: { px: 1 }, children: "With Text Content" }),
+    /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(
+      AppListItem,
+      {
+        textLabel: "List Item with Text Content",
+        textDescription: "This is a description",
+        textContent: "Some text content here to demonstrate the textContent prop"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", sx: { px: 1 }, children: "With Tooltip" }),
+    /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(
+      AppListItem,
+      {
+        textLabel: "List Item with Tooltip",
+        textDescription: "Hover the icon to see the tooltip",
+        tooltip: "This is a helpful tooltip"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", sx: { px: 1 }, children: "Full Example" }),
+    /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(
+      AppListItem,
+      {
+        textLabel: "Complete List Item",
+        textDescription: "This item uses all available props",
+        textContent: "Additional content text",
+        icon: /* @__PURE__ */ jsx(IconBankLine, {}),
+        labelSuffix: /* @__PURE__ */ jsx(AppStatus, { color: "info", label: "New", size: "small" }),
+        tooltip: "Tooltip with extra info"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(AppTypography, { variant: "h6", sx: { px: 1 }, children: "With Children" }),
+    /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(
+      AppListItem,
+      {
+        textLabel: "List Item with Children",
+        textDescription: "This is a description",
+        textContent: "Some text content",
+        children: "Additional content"
+      }
+    ) })
+  ] })
+};
+const Container = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(0),
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: theme.palette.colors.base.white,
+  minWidth: 200,
+  maxWidth: 400
+}));
+export {
+  Playground,
+  Variants,
+  meta as default
+};
+//# sourceMappingURL=AppListItem.stories.js.map

package/dist/es/stories/AppListItem.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppListItem.stories.js","sources":["../../../src/stories/AppListItem.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Box, Divider, styled } from '@mui/material';\n\nimport { AppListItem } from '../components/app-list-item';\nimport { AppStatus } from '../components/app-status';\nimport { AppTypography } from '../components/app-typography';\nimport { StackColumn } from '../components/stack-column';\nimport { IconBankLine } from '../icons/buildings/bank-line';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'App List Item',\n  component: AppListItem,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    textLabel: {\n      control: 'text',\n    },\n    textDescription: {\n      control: 'text',\n    },\n    textContent: {\n      control: 'text',\n    },\n    tooltip: {\n      control: 'text',\n    },\n  },\n  args: {\n    textLabel: 'List item label',\n    textDescription: 'Description text',\n  },\n} satisfies Meta<typeof AppListItem>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Playground: Story = {\n  args: {},\n};\n\n//\n\nexport const Variants: Story = {\n  render: () => (\n    <StackColumn gap={2}>\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>Label Only</AppTypography>\n\n      <Container>\n        <AppListItem textLabel=\"Sample Label\" />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>Label and Description</AppTypography>\n\n      <Container>\n        <AppListItem textLabel=\"Another Item\" textDescription=\"This is a description\" />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>With Icon</AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"List Item with Icon\"\n          textDescription=\"This is a description\"\n          icon={<IconBankLine />}\n        />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>With Label Suffix</AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"List Item with Label Suffix\"\n          textDescription=\"This is a description\"\n          labelSuffix={<AppStatus color=\"success\" label=\"Active\" size=\"small\" />}\n        />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>With Text Content</AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"List Item with Text Content\"\n          textDescription=\"This is a description\"\n          textContent=\"Some text content here to demonstrate the textContent prop\"\n        />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>With Tooltip</AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"List Item with Tooltip\"\n          textDescription=\"Hover the icon to see the tooltip\"\n          tooltip=\"This is a helpful tooltip\"\n        />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>Full Example</AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"Complete List Item\"\n          textDescription=\"This item uses all available props\"\n          textContent=\"Additional content text\"\n          icon={<IconBankLine />}\n          labelSuffix={<AppStatus color=\"info\" label=\"New\" size=\"small\" />}\n          tooltip=\"Tooltip with extra info\"\n        />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>With Children</AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"List Item with Children\"\n          textDescription=\"This is a description\"\n          textContent=\"Some text content\"\n        >\n          Additional content\n        </AppListItem>\n      </Container>\n    </StackColumn>\n  ),\n};\n\nconst Container = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(0),\n  border: `1px solid ${theme.palette.divider}`,\n  borderRadius: theme.shape.borderRadius,\n  backgroundColor: theme.palette.colors.base.white,\n  minWidth: 200,\n  maxWidth: 400,\n}));\n"],"names":[],"mappings":"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"}

package/dist/es/stories/AppOverflownTextWithTooltip.stories.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { styled, Box, Divider } from "@mui/material";
+import { AppOverflownTextWithTooltip } from "../components/app-overflown-text-with-tooltip.js";
+import { StackColumn } from "../components/stack-column.js";
+const meta = {
+  title: "App Overflown Text With Tooltip",
+  component: AppOverflownTextWithTooltip,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {}
+};
+const Variants = {
+  args: {
+    title: "Sample Label"
+  },
+  render: () => /* @__PURE__ */ jsxs(StackColumn, { gap: 2, children: [
+    /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(AppOverflownTextWithTooltip, { title: "This is a very long title that will be truncated" }) }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(
+      AppOverflownTextWithTooltip,
+      {
+        title: "This is a very very long title that will be truncated and should show tooltip when hovered to see the full text with the rest of the content",
+        twoLines: true
+      }
+    ) })
+  ] })
+};
+const Container = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(1),
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: theme.palette.colors.base.white,
+  maxWidth: 200
+}));
+export {
+  Variants,
+  meta as default
+};
+//# sourceMappingURL=AppOverflownTextWithTooltip.stories.js.map

package/dist/es/stories/AppOverflownTextWithTooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppOverflownTextWithTooltip.stories.js","sources":["../../../src/stories/AppOverflownTextWithTooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Box, Divider, styled } from '@mui/material';\n\nimport { AppOverflownTextWithTooltip } from '../components/app-overflown-text-with-tooltip';\nimport { StackColumn } from '../components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'App Overflown Text With Tooltip',\n  component: AppOverflownTextWithTooltip,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {},\n} satisfies Meta<typeof AppOverflownTextWithTooltip>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Variants: Story = {\n  args: {\n    title: 'Sample Label',\n  },\n  render: () => (\n    <StackColumn gap={2}>\n      <Container>\n        <AppOverflownTextWithTooltip title=\"This is a very long title that will be truncated\" />\n      </Container>\n\n      <Divider />\n\n      <Container>\n        <AppOverflownTextWithTooltip\n          title=\"This is a very very long title that will be truncated and should show tooltip when hovered to see the full text with the rest of the content\"\n          twoLines\n        />\n      </Container>\n    </StackColumn>\n  ),\n};\n\nconst Container = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(1),\n  border: `1px solid ${theme.palette.divider}`,\n  borderRadius: theme.shape.borderRadius,\n  backgroundColor: theme.palette.colors.base.white,\n  maxWidth: 200,\n}));\n"],"names":[],"mappings":";;;;AAWA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU,CAAA;AACZ;AAOO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ,MACN,qBAAC,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,IAAA,oBAAC,WAAA,EACC,UAAA,oBAAC,6BAAA,EAA4B,OAAM,oDAAmD,GACxF;AAAA,wBAEC,SAAA,EAAQ;AAAA,wBAER,WAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,UAAQ;AAAA,MAAA;AAAA,IAAA,EACV,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEA,MAAM,YAAY,OAAO,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC5C,SAAS,MAAM,QAAQ,CAAC;AAAA,EACxB,QAAQ,aAAa,MAAM,QAAQ,OAAO;AAAA,EAC1C,cAAc,MAAM,MAAM;AAAA,EAC1B,iBAAiB,MAAM,QAAQ,OAAO,KAAK;AAAA,EAC3C,UAAU;AACZ,EAAE;"}

package/dist/es/stories/AppStatus.stories.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Stack, Divider } from "@mui/material";
+import { AppStatus } from "../components/app-status.js";
+const meta = {
+  title: "App Status",
+  component: AppStatus,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    color: {
+      control: "select"
+    }
+  }
+};
+const Playground = {
+  args: {
+    color: "success",
+    label: "Text",
+    size: "small",
+    tooltip: "Tooltip sample",
+    tooltipProps: {
+      placement: "top"
+    }
+  }
+};
+const Variants = {
+  render: () => /* @__PURE__ */ jsxs(Stack, { spacing: 0, gap: 4, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0, gap: 2, flexWrap: "wrap", justifyContent: "center", children: [
+      /* @__PURE__ */ jsx(AppStatus, { label: "Success", color: "success" }),
+      /* @__PURE__ */ jsx(AppStatus, { label: "Warning", color: "warning" }),
+      /* @__PURE__ */ jsx(AppStatus, { label: "Error", color: "error" }),
+      /* @__PURE__ */ jsx(AppStatus, { label: "Neutral", color: "neutral" }),
+      /* @__PURE__ */ jsx(AppStatus, { label: "Disabled", color: "disabled" }),
+      /* @__PURE__ */ jsx(AppStatus, { label: "Info", color: "info" }),
+      /* @__PURE__ */ jsx(AppStatus, { label: "Orange", color: "orange" }),
+      /* @__PURE__ */ jsx(AppStatus, { label: "Blue", color: "blue" }),
+      /* @__PURE__ */ jsx(AppStatus, { label: "With Tooltip", color: "neutral", tooltip: "Tooltip sample" })
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0, gap: 2, flexWrap: "wrap", justifyContent: "center", children: [
+      /* @__PURE__ */ jsx(AppStatus, { label: "Success", color: "success", size: "medium" }),
+      /* @__PURE__ */ jsx(AppStatus, { label: "Warning", color: "warning", size: "medium" }),
+      /* @__PURE__ */ jsx(AppStatus, { label: "Error", color: "error", size: "medium" }),
+      /* @__PURE__ */ jsx(AppStatus, { label: "Neutral", color: "neutral", size: "medium" }),
+      /* @__PURE__ */ jsx(AppStatus, { label: "Disabled", color: "disabled", size: "medium" }),
+      /* @__PURE__ */ jsx(AppStatus, { label: "Info", color: "info", size: "medium" }),
+      /* @__PURE__ */ jsx(AppStatus, { label: "Orange", color: "orange", size: "medium" }),
+      /* @__PURE__ */ jsx(AppStatus, { label: "Blue", color: "blue", size: "medium" }),
+      /* @__PURE__ */ jsx(
+        AppStatus,
+        {
+          label: "With Tooltip size medium",
+          color: "neutral",
+          size: "medium",
+          tooltip: "Tooltip sample"
+        }
+      )
+    ] })
+  ] })
+};
+export {
+  Playground,
+  Variants,
+  meta as default
+};
+//# sourceMappingURL=AppStatus.stories.js.map

package/dist/es/stories/AppStatus.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppStatus.stories.js","sources":["../../../src/stories/AppStatus.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Divider, Stack } from '@mui/material';\n\nimport { AppStatus } from '../components/app-status';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'App Status',\n  component: AppStatus,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    color: {\n      control: 'select',\n    },\n  },\n} satisfies Meta<typeof AppStatus>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Playground: Story = {\n  args: {\n    color: 'success',\n    label: 'Text',\n    size: 'small',\n    tooltip: 'Tooltip sample',\n    tooltipProps: {\n      placement: 'top',\n    },\n  },\n};\n\nexport const Variants: Story = {\n  render: () => (\n    <Stack spacing={0} gap={4}>\n      <Stack direction=\"row\" spacing={0} gap={2} flexWrap=\"wrap\" justifyContent=\"center\">\n        <AppStatus label=\"Success\" color=\"success\" />\n        <AppStatus label=\"Warning\" color=\"warning\" />\n        <AppStatus label=\"Error\" color=\"error\" />\n        <AppStatus label=\"Neutral\" color=\"neutral\" />\n        <AppStatus label=\"Disabled\" color=\"disabled\" />\n        <AppStatus label=\"Info\" color=\"info\" />\n        <AppStatus label=\"Orange\" color=\"orange\" />\n        <AppStatus label=\"Blue\" color=\"blue\" />\n        <AppStatus label=\"With Tooltip\" color=\"neutral\" tooltip=\"Tooltip sample\" />\n      </Stack>\n\n      <Divider />\n\n      <Stack direction=\"row\" spacing={0} gap={2} flexWrap=\"wrap\" justifyContent=\"center\">\n        <AppStatus label=\"Success\" color=\"success\" size=\"medium\" />\n        <AppStatus label=\"Warning\" color=\"warning\" size=\"medium\" />\n        <AppStatus label=\"Error\" color=\"error\" size=\"medium\" />\n        <AppStatus label=\"Neutral\" color=\"neutral\" size=\"medium\" />\n        <AppStatus label=\"Disabled\" color=\"disabled\" size=\"medium\" />\n        <AppStatus label=\"Info\" color=\"info\" size=\"medium\" />\n        <AppStatus label=\"Orange\" color=\"orange\" size=\"medium\" />\n        <AppStatus label=\"Blue\" color=\"blue\" size=\"medium\" />\n        <AppStatus\n          label=\"With Tooltip size medium\"\n          color=\"neutral\"\n          size=\"medium\"\n          tooltip=\"Tooltip sample\"\n        />\n      </Stack>\n    </Stack>\n  ),\n};\n"],"names":[],"mappings":";;;AAUA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAOO,MAAM,aAAoB;AAAA,EAC/B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,cAAc;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAEO,MAAM,WAAkB;AAAA,EAC7B,QAAQ,MACN,qBAAC,SAAM,SAAS,GAAG,KAAK,GACtB,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,KAAK,GAAG,UAAS,QAAO,gBAAe,UACxE,UAAA;AAAA,MAAA,oBAAC,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU;AAAA,MAC3C,oBAAC,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU;AAAA,MAC3C,oBAAC,WAAA,EAAU,OAAM,SAAQ,OAAM,SAAQ;AAAA,MACvC,oBAAC,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU;AAAA,MAC3C,oBAAC,WAAA,EAAU,OAAM,YAAW,OAAM,YAAW;AAAA,MAC7C,oBAAC,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO;AAAA,MACrC,oBAAC,WAAA,EAAU,OAAM,UAAS,OAAM,UAAS;AAAA,MACzC,oBAAC,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO;AAAA,0BACpC,WAAA,EAAU,OAAM,gBAAe,OAAM,WAAU,SAAQ,iBAAA,CAAiB;AAAA,IAAA,GAC3E;AAAA,wBAEC,SAAA,EAAQ;AAAA,IAET,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,KAAK,GAAG,UAAS,QAAO,gBAAe,UACxE,UAAA;AAAA,MAAA,oBAAC,aAAU,OAAM,WAAU,OAAM,WAAU,MAAK,UAAS;AAAA,0BACxD,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU,MAAK,UAAS;AAAA,0BACxD,WAAA,EAAU,OAAM,SAAQ,OAAM,SAAQ,MAAK,UAAS;AAAA,0BACpD,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU,MAAK,UAAS;AAAA,0BACxD,WAAA,EAAU,OAAM,YAAW,OAAM,YAAW,MAAK,UAAS;AAAA,0BAC1D,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO,MAAK,UAAS;AAAA,0BAClD,WAAA,EAAU,OAAM,UAAS,OAAM,UAAS,MAAK,UAAS;AAAA,0BACtD,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO,MAAK,UAAS;AAAA,MACnD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,MAAK;AAAA,UACL,SAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IACV,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;"}

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

@@ -0,0 +1,119 @@
+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: "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/es/stories/AppTooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppTooltip.stories.js","sources":["../../../src/stories/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: '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":";;;;;;;;AAeA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,WAAW;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,IAEF,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAOO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,aAAa;AAAA,IACb,UAAU,oBAAA,UAAA,EAAE;AAAA,IACZ,WAAW;AAAA,EAAA;AAAA,EAEb,QAAQ,CAAA,SAAQ,oBAAC,aAAA,EAAa,GAAG,KAAA,CAAM;AACzC;AAIA,MAAM,cAAc,CAAC,UAA2B;AAC9C,QAAM,SAAS,UAAA;AACf,QAAM,QAAQ,SAAA;AAEd,SACE,qBAAC,UAAA,EAAS,KAAK,GACb,UAAA;AAAA,IAAA,qBAAC,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAY,GAAG,OAAO,aAAY,IACjC,8BAAC,WAAA,EAAU,SAAQ,YAAW,UAAA,UAAA,CAAO,GACvC;AAAA,MAEA,oBAAC,YAAA,EAAW,sBAAoB,MAAE,GAAG,OAAO,UAAS,IACnD,UAAA,oBAAC,WAAA,EAAU,SAAQ,YAAW,4BAAc,GAC9C;AAAA,MAEA,oBAAC,YAAA,EAAW,sBAAoB,MAAE,GAAG,OACnC,UAAA,oBAAC,WAAA,EAAU,SAAQ,YAAW,UAAA,iBAAA,CAAc,GAC9C;AAAA,MAEA,oBAAC,YAAA,EAAW,sBAAoB,MAAC,sBAAoB,MAAE,GAAG,OACxD,UAAA,oBAAC,WAAA,EAAU,SAAQ,YAAW,mBAAK,GACrC;AAAA,MAEA,oBAAC,mBAAA,EAAkB,aAAa,OAAO,KACrC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,OAAO;AAAA,UAChB,MAAM,OAAO;AAAA,UACb,sBAAoB;AAAA,UACpB,sBAAoB;AAAA,UACpB,sBAAoB;AAAA,UACpB,WAAW;AAAA,YACT,QAAQ;AAAA,cACN,eAAe;AAAA,YAAA;AAAA,UACjB;AAAA,UAED,GAAG;AAAA,UAEJ,8BAAC,WAAA,EAAU,SAAQ,YAAW,SAAS,OAAO,IAAI,UAAA,QAAA,CAElD;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA,GACF;AAAA,IAIA,qBAAC,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAY,GAAG,OAAO,UAAS,yBAAwB,aAAY,IAClE,UAAA,oBAAC,WAAA,EAAU,SAAQ,YAAW,UAAA,gBAAA,CAAa,GAC7C;AAAA,MAEA,oBAAC,YAAA,EAAY,GAAG,OAAO,UAAS,IAAG,aAAY,4BAC7C,UAAA,oBAAC,WAAA,EAAU,SAAQ,YAAW,8BAAgB,GAChD;AAAA,MAEA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,UAAS;AAAA,UACT,aAAY;AAAA,UAEZ,UAAA,oBAAC,WAAA,EAAU,SAAQ,YAAW,UAAA,2BAAA,CAAwB;AAAA,QAAA;AAAA,MAAA;AAAA,MAGxD,oBAAC,YAAA,EAAY,GAAG,OAAO,UAAS,oCAC9B,UAAA,oBAAC,WAAA,EAAU,SAAQ,YAAW,UAAA,2BAAA,CAAwB,GACxD;AAAA,MAEA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,8BACG,KAAA,EACC,UAAA;AAAA,YAAA,qBAAC,uBAAA,EAAsB,WAAU,QAAO,OAAO,MAAM,QAAQ,OAAO,MAAM,GAAG,GAAG,UAAA;AAAA,cAAA;AAAA,cAChE;AAAA,YAAA,GAChB;AAAA,YACA,oBAAC,uBAAA,EAAsB,WAAU,QAAO,OAAO,MAAM,QAAQ,OAAO,QAAQ,GAAG,GAAG,UAAA,iEAAA,CAElF;AAAA,UAAA,GACF;AAAA,UAGF,UAAA,oBAAC,WAAA,EAAU,SAAQ,YAAW,UAAA,sBAAA,CAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,IACnD,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAIA,MAAM,wBAAwB,OAAO,aAAa,EAAE,CAAC,EAAE,aAAa;AAAA,EAClE,YAAY;AAAA,EACZ,UAAU,MAAM,QAAQ,GAAG;AAC7B,EAAE;"}

package/dist/es/stories/Colors.stories.js

@@ -0,0 +1,136 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { styled, Box, Typography, useTheme } from "@mui/material";
+const ColorSwatchContainer = styled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  gap: "32px",
+  padding: "24px",
+  maxWidth: "1200px"
+});
+const ColorGroupTitle = styled(Typography)(({ theme }) => ({
+  fontSize: theme.spacing(3),
+  fontWeight: 600,
+  marginBottom: theme.spacing(2),
+  textTransform: "capitalize"
+}));
+const ColorRow = styled(Box)({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "12px"
+});
+const ColorSwatch = styled(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 = styled("span")({
+  fontWeight: 600,
+  marginBottom: "2px"
+});
+const SwatchHex = 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] = useState(null);
+  const handleCopy = (shade, hex) => {
+    navigator.clipboard.writeText(hex);
+    setCopiedKey(shade);
+    setTimeout(() => setCopiedKey(null), 1500);
+  };
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(ColorGroupTitle, { children: name }),
+    /* @__PURE__ */ jsx(ColorRow, { children: Object.entries(colors).map(([shade, hex]) => /* @__PURE__ */ jsxs(
+      ColorSwatch,
+      {
+        bgColor: hex,
+        isLight: isLightColor(hex),
+        onClick: () => handleCopy(shade, hex),
+        title: `Click to copy ${hex}`,
+        children: [
+          /* @__PURE__ */ jsx(SwatchLabel, { children: copiedKey === shade ? "Copied!" : shade }),
+          /* @__PURE__ */ jsx(SwatchHex, { children: hex })
+        ]
+      },
+      shade
+    )) })
+  ] });
+};
+const ColorsDisplay = () => {
+  const theme = 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__ */ jsxs(ColorSwatchContainer, { children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h4", sx: { mb: 1 }, children: "Parcel Design System Colors" }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 4 }, children: [
+        "Access colors via ",
+        /* @__PURE__ */ jsx("code", { children: "theme.palette.colors.{colorName}[shade]" })
+      ] })
+    ] }),
+    colorScales.map(({ name, colors: colors2 }) => /* @__PURE__ */ jsx(ColorScaleDisplay, { name, colors: colors2 }, name))
+  ] });
+};
+const meta = {
+  title: "Design System/Colors",
+  component: ColorsDisplay,
+  parameters: {
+    layout: "fullscreen"
+  },
+  tags: ["autodocs"]
+};
+const AllColors = {};
+export {
+  AllColors,
+  meta as default
+};
+//# sourceMappingURL=Colors.stories.js.map

package/dist/es/stories/Colors.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Colors.stories.js","sources":["../../../src/stories/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: 4 }}>\n          Access colors via <code>theme.palette.colors.&#123;colorName&#125;[shade]</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":["colors"],"mappings":";;;AAQA,MAAM,uBAAuB,OAAO,GAAG,EAAE;AAAA,EACvC,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK;AAAA,EACL,SAAS;AAAA,EACT,UAAU;AACZ,CAAC;AAED,MAAM,kBAAkB,OAAO,UAAU,EAAE,CAAC,EAAE,aAAa;AAAA,EACzD,UAAU,MAAM,QAAQ,CAAC;AAAA,EACzB,YAAY;AAAA,EACZ,cAAc,MAAM,QAAQ,CAAC;AAAA,EAC7B,eAAe;AACjB,EAAE;AAEF,MAAM,WAAW,OAAO,GAAG,EAAE;AAAA,EAC3B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,KAAK;AACP,CAAC;AAED,MAAM,cAAc,OAAO,GAAG,EAA0C,CAAC,EAAE,SAAS,eAAe;AAAA,EACjG,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO,UAAU,YAAY;AAAA,EAC7B,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,WAAW;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,EAAA;AAAA,EAEb,YAAY;AAAA,IACV,WAAW;AAAA,EAAA;AAEf,EAAE;AAEF,MAAM,cAAc,OAAO,MAAM,EAAE;AAAA,EACjC,YAAY;AAAA,EACZ,cAAc;AAChB,CAAC;AAED,MAAM,YAAY,OAAO,MAAM,EAAE;AAAA,EAC/B,SAAS;AAAA,EACT,UAAU;AACZ,CAAC;AASD,MAAM,eAAe,CAAC,UAA2B;AAC/C,MAAI,GAAW,GAAW;AAG1B,MAAI,MAAM,WAAW,MAAM,GAAG;AAC5B,UAAM,QAAQ,MAAM,MAAM,gCAAgC;AAE1D,QAAI,OAAO;AACT,UAAI,SAAS,MAAM,CAAC,GAAG,EAAE;AACzB,UAAI,SAAS,MAAM,CAAC,GAAG,EAAE;AACzB,UAAI,SAAS,MAAM,CAAC,GAAG,EAAE;AAAA,IAC3B,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,OAAO;AAEL,UAAM,MAAM,MAAM,QAAQ,KAAK,EAAE;AACjC,QAAI,SAAS,IAAI,UAAU,GAAG,CAAC,GAAG,EAAE;AACpC,QAAI,SAAS,IAAI,UAAU,GAAG,CAAC,GAAG,EAAE;AACpC,QAAI,SAAS,IAAI,UAAU,GAAG,CAAC,GAAG,EAAE;AAAA,EACtC;AAEA,QAAM,aAAa,QAAQ,IAAI,QAAQ,IAAI,QAAQ,KAAK;AAExD,SAAO,YAAY;AACrB;AAEA,MAAM,oBAAoB,CAAC,EAAE,MAAM,aAAmD;AACpF,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAE9D,QAAM,aAAa,CAAC,OAAe,QAAgB;AACjD,cAAU,UAAU,UAAU,GAAG;AACjC,iBAAa,KAAK;AAClB,eAAW,MAAM,aAAa,IAAI,GAAG,IAAI;AAAA,EAC3C;AAEA,8BACG,KAAA,EACC,UAAA;AAAA,IAAA,oBAAC,mBAAiB,UAAA,KAAA,CAAK;AAAA,IACvB,oBAAC,UAAA,EACE,UAAA,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,OAAO,GAAG,MACtC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,SAAS;AAAA,QACT,SAAS,aAAa,GAAG;AAAA,QACzB,SAAS,MAAM,WAAW,OAAO,GAAG;AAAA,QACpC,OAAO,iBAAiB,GAAG;AAAA,QAE3B,UAAA;AAAA,UAAA,oBAAC,aAAA,EAAa,UAAA,cAAc,QAAQ,YAAY,OAAM;AAAA,UACtD,oBAAC,aAAW,UAAA,IAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAPX;AAAA,IAAA,CASR,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,gBAAgB,MAAM;AAC1B,QAAM,QAAQ,SAAA;AACd,QAAM,EAAE,WAAW,MAAM;AAEzB,QAAM,cAAc;AAAA,IAClB,EAAE,MAAM,WAAW,QAAQ,OAAO,QAAA;AAAA,IAClC,EAAE,MAAM,aAAa,QAAQ,OAAO,UAAA;AAAA,IACpC,EAAE,MAAM,WAAW,QAAQ,OAAO,QAAA;AAAA,IAClC,EAAE,MAAM,SAAS,QAAQ,OAAO,MAAA;AAAA,IAChC,EAAE,MAAM,QAAQ,QAAQ,OAAO,KAAA;AAAA,IAC/B,EAAE,MAAM,UAAU,QAAQ,OAAO,OAAA;AAAA,IACjC,EAAE,MAAM,UAAU,QAAQ,OAAO,OAAA;AAAA,IACjC,EAAE,MAAM,OAAO,QAAQ,OAAO,IAAA;AAAA,IAC9B,EAAE,MAAM,QAAQ,QAAQ,OAAO,KAAA;AAAA,EAAK;AAGtC,8BACG,sBAAA,EACC,UAAA;AAAA,IAAA,qBAAC,KAAA,EACC,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,SAAQ,MAAK,IAAI,EAAE,IAAI,EAAA,GAAK,UAAA,8BAAA,CAExC;AAAA,MACA,qBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,IAAI,EAAE,IAAI,EAAA,GAAK,UAAA;AAAA,QAAA;AAAA,QAC9C,oBAAC,UAAK,UAAA,0CAAA,CAAiD;AAAA,MAAA,EAAA,CAC3E;AAAA,IAAA,GACF;AAAA,IAEC,YAAY,IAAI,CAAC,EAAE,MAAM,QAAAA,QAAAA,MACxB,oBAAC,mBAAA,EAA6B,MAAY,QAAQA,QAAAA,GAA1B,IAAkC,CAC3D;AAAA,EAAA,GACH;AAEJ;AAKA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AACnB;AAKO,MAAM,YAAmB,CAAA;"}