@zidsa/zidmui 2.0.2 → 2.1.0

package/dist/react/cjs/components/app-status.js

@@ -51,6 +51,10 @@ const StatusElement = material.styled(material.Chip, {
   ...color2 === "blue" ? {
     backgroundColor: theme.palette.colors.blue[300],
     color: theme.palette.colors.blue[900]
+  } : void 0,
+  ...color2 === "primary" ? {
+    backgroundColor: theme.palette.colors.primary[300],
+    color: theme.palette.colors.primary[900]
   } : void 0
 }));
 exports.AppStatus = AppStatus;

package/dist/react/cjs/components/app-status.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-status.js","sources":["../../../../src/components/app-status.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled, ChipProps, Chip, TooltipProps } from '@mui/material';\n\nimport { AppTooltip } from './app-tooltip';\n\n//\n//\n\nexport type AppStatusColor =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'default'\n  | 'disabled'\n  | 'info'\n  | 'orange'\n  | 'blue';\n\nexport type AppStatusProps = Omit<ChipProps, 'color' | 'variant' | 'size'> & {\n  size?: 'small' | 'medium';\n  color?: AppStatusColor;\n  tooltip?: TooltipProps['title'];\n  tooltipProps?: Omit<TooltipProps, 'title' | 'children'>;\n};\n\nexport const AppStatus: React.FC<AppStatusProps> = ({\n  ref,\n  color = 'neutral',\n  size = 'small',\n  tooltip,\n  tooltipProps,\n  ...props\n}) => {\n  if (color === 'default') color = 'neutral';\n\n  const element = <StatusElement color2={color} size={size} ref={ref} {...props} />;\n\n  //\n\n  if (!tooltip) return element;\n\n  return (\n    <AppTooltip description={tooltip} {...tooltipProps}>\n      {element}\n    </AppTooltip>\n  );\n};\n\nAppStatus.displayName = 'AppStatus';\n\n//\n\nconst StatusElement = styled(Chip, {\n  shouldForwardProp: prop => prop !== 'color2',\n})<{ color2?: AppStatusProps['color'] }>(({ theme, color2 = 'neutral' }) => ({\n  ...(color2 === 'success'\n    ? {\n        backgroundColor: theme.palette.colors.green[300],\n        color: theme.palette.colors.green[900],\n      }\n    : undefined),\n  ...(color2 === 'error'\n    ? {\n        backgroundColor: theme.palette.colors.red[200],\n        color: theme.palette.colors.red[900],\n      }\n    : undefined),\n  ...(color2 === 'warning'\n    ? {\n        backgroundColor: theme.palette.colors.yellow[300],\n        color: theme.palette.colors.yellow[1000],\n      }\n    : undefined),\n  ...(color2 === 'neutral'\n    ? {\n        backgroundColor: theme.palette.colors.neutral[100],\n        color: theme.palette.colors.neutral[600],\n      }\n    : undefined),\n  ...(color2 === 'disabled'\n    ? {\n        backgroundColor: theme.palette.colors.neutral[50],\n        color: theme.palette.colors.neutral[400],\n      }\n    : undefined),\n  ...(color2 === 'info'\n    ? {\n        backgroundColor: theme.palette.colors.primary[200],\n        color: theme.palette.colors.primary[800],\n      }\n    : undefined),\n  ...(color2 === 'orange'\n    ? {\n        backgroundColor: theme.palette.colors.orange[200],\n        color: theme.palette.colors.orange[700],\n      }\n    : undefined),\n  ...(color2 === 'blue'\n    ? {\n        backgroundColor: theme.palette.colors.blue[300],\n        color: theme.palette.colors.blue[900],\n      }\n    : undefined),\n}));\n"],"names":["AppTooltip","styled","Chip"],"mappings":";;;;;AA2BO,MAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,UAAU,UAAW,SAAQ;AAEjC,QAAM,yCAAW,eAAA,EAAc,QAAQ,OAAO,MAAY,KAAW,GAAG,OAAO;AAI/E,MAAI,CAAC,QAAS,QAAO;AAErB,wCACGA,WAAAA,YAAA,EAAW,aAAa,SAAU,GAAG,cACnC,UAAA,SACH;AAEJ;AAEA,UAAU,cAAc;AAIxB,MAAM,gBAAgBC,SAAAA,OAAOC,eAAM;AAAA,EACjC,mBAAmB,UAAQ,SAAS;AACtC,CAAC,EAAwC,CAAC,EAAE,OAAO,SAAS,iBAAiB;AAAA,EAC3E,GAAI,WAAW,YACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,MAAM,GAAG;AAAA,IAC/C,OAAO,MAAM,QAAQ,OAAO,MAAM,GAAG;AAAA,EAAA,IAEvC;AAAA,EACJ,GAAI,WAAW,UACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,IAAI,GAAG;AAAA,IAC7C,OAAO,MAAM,QAAQ,OAAO,IAAI,GAAG;AAAA,EAAA,IAErC;AAAA,EACJ,GAAI,WAAW,YACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,IAChD,OAAO,MAAM,QAAQ,OAAO,OAAO,GAAI;AAAA,EAAA,IAEzC;AAAA,EACJ,GAAI,WAAW,YACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,IACjD,OAAO,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,EAAA,IAEzC;AAAA,EACJ,GAAI,WAAW,aACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,EAAE;AAAA,IAChD,OAAO,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,EAAA,IAEzC;AAAA,EACJ,GAAI,WAAW,SACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,IACjD,OAAO,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,EAAA,IAEzC;AAAA,EACJ,GAAI,WAAW,WACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,IAChD,OAAO,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA,IAExC;AAAA,EACJ,GAAI,WAAW,SACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,KAAK,GAAG;AAAA,IAC9C,OAAO,MAAM,QAAQ,OAAO,KAAK,GAAG;AAAA,EAAA,IAEtC;AACN,EAAE;;"}
+{"version":3,"file":"app-status.js","sources":["../../../../src/components/app-status.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled, ChipProps, Chip, TooltipProps } from '@mui/material';\n\nimport { AppTooltip } from './app-tooltip';\n\n//\n//\n\nexport type AppStatusColor =\n  | 'primary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'default'\n  | 'disabled'\n  | 'info'\n  | 'orange'\n  | 'blue';\n\nexport type AppStatusProps = Omit<ChipProps, 'color' | 'variant' | 'size'> & {\n  size?: 'small' | 'medium';\n  color?: AppStatusColor;\n  tooltip?: TooltipProps['title'];\n  tooltipProps?: Omit<TooltipProps, 'title' | 'children'>;\n};\n\nexport const AppStatus: React.FC<AppStatusProps> = ({\n  ref,\n  color = 'neutral',\n  size = 'small',\n  tooltip,\n  tooltipProps,\n  ...props\n}) => {\n  if (color === 'default') color = 'neutral';\n\n  const element = <StatusElement color2={color} size={size} ref={ref} {...props} />;\n\n  //\n\n  if (!tooltip) return element;\n\n  return (\n    <AppTooltip description={tooltip} {...tooltipProps}>\n      {element}\n    </AppTooltip>\n  );\n};\n\nAppStatus.displayName = 'AppStatus';\n\n//\n\nconst StatusElement = styled(Chip, {\n  shouldForwardProp: prop => prop !== 'color2',\n})<{ color2?: AppStatusProps['color'] }>(({ theme, color2 = 'neutral' }) => ({\n  ...(color2 === 'success'\n    ? {\n        backgroundColor: theme.palette.colors.green[300],\n        color: theme.palette.colors.green[900],\n      }\n    : undefined),\n  ...(color2 === 'error'\n    ? {\n        backgroundColor: theme.palette.colors.red[200],\n        color: theme.palette.colors.red[900],\n      }\n    : undefined),\n  ...(color2 === 'warning'\n    ? {\n        backgroundColor: theme.palette.colors.yellow[300],\n        color: theme.palette.colors.yellow[1000],\n      }\n    : undefined),\n  ...(color2 === 'neutral'\n    ? {\n        backgroundColor: theme.palette.colors.neutral[100],\n        color: theme.palette.colors.neutral[600],\n      }\n    : undefined),\n  ...(color2 === 'disabled'\n    ? {\n        backgroundColor: theme.palette.colors.neutral[50],\n        color: theme.palette.colors.neutral[400],\n      }\n    : undefined),\n  ...(color2 === 'info'\n    ? {\n        backgroundColor: theme.palette.colors.primary[200],\n        color: theme.palette.colors.primary[800],\n      }\n    : undefined),\n  ...(color2 === 'orange'\n    ? {\n        backgroundColor: theme.palette.colors.orange[200],\n        color: theme.palette.colors.orange[700],\n      }\n    : undefined),\n  ...(color2 === 'blue'\n    ? {\n        backgroundColor: theme.palette.colors.blue[300],\n        color: theme.palette.colors.blue[900],\n      }\n    : undefined),\n  ...(color2 === 'primary'\n    ? {\n        backgroundColor: theme.palette.colors.primary[300],\n        color: theme.palette.colors.primary[900],\n      }\n    : undefined),\n}));\n"],"names":["AppTooltip","styled","Chip"],"mappings":";;;;;AA4BO,MAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,UAAU,UAAW,SAAQ;AAEjC,QAAM,yCAAW,eAAA,EAAc,QAAQ,OAAO,MAAY,KAAW,GAAG,OAAO;AAI/E,MAAI,CAAC,QAAS,QAAO;AAErB,wCACGA,WAAAA,YAAA,EAAW,aAAa,SAAU,GAAG,cACnC,UAAA,SACH;AAEJ;AAEA,UAAU,cAAc;AAIxB,MAAM,gBAAgBC,SAAAA,OAAOC,eAAM;AAAA,EACjC,mBAAmB,UAAQ,SAAS;AACtC,CAAC,EAAwC,CAAC,EAAE,OAAO,SAAS,iBAAiB;AAAA,EAC3E,GAAI,WAAW,YACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,MAAM,GAAG;AAAA,IAC/C,OAAO,MAAM,QAAQ,OAAO,MAAM,GAAG;AAAA,EAAA,IAEvC;AAAA,EACJ,GAAI,WAAW,UACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,IAAI,GAAG;AAAA,IAC7C,OAAO,MAAM,QAAQ,OAAO,IAAI,GAAG;AAAA,EAAA,IAErC;AAAA,EACJ,GAAI,WAAW,YACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,IAChD,OAAO,MAAM,QAAQ,OAAO,OAAO,GAAI;AAAA,EAAA,IAEzC;AAAA,EACJ,GAAI,WAAW,YACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,IACjD,OAAO,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,EAAA,IAEzC;AAAA,EACJ,GAAI,WAAW,aACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,EAAE;AAAA,IAChD,OAAO,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,EAAA,IAEzC;AAAA,EACJ,GAAI,WAAW,SACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,IACjD,OAAO,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,EAAA,IAEzC;AAAA,EACJ,GAAI,WAAW,WACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,IAChD,OAAO,MAAM,QAAQ,OAAO,OAAO,GAAG;AAAA,EAAA,IAExC;AAAA,EACJ,GAAI,WAAW,SACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,KAAK,GAAG;AAAA,IAC9C,OAAO,MAAM,QAAQ,OAAO,KAAK,GAAG;AAAA,EAAA,IAEtC;AAAA,EACJ,GAAI,WAAW,YACX;AAAA,IACE,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,IACjD,OAAO,MAAM,QAAQ,OAAO,QAAQ,GAAG;AAAA,EAAA,IAEzC;AACN,EAAE;;"}

package/dist/react/cjs/components/app-switch-group.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const appSwitch = require("./app-switch.js");
+const material = require("@mui/material");
+const AppSwitchGroup = ({
+  options,
+  label,
+  helperText,
+  required,
+  color = "primary",
+  disabled,
+  error,
+  formControlProps
+}) => {
+  const hasError = error;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.FormControl,
+    {
+      component: "fieldset",
+      variant: "standard",
+      error,
+      disabled,
+      ...formControlProps,
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(material.FormLabel, { color: "primary", sx: { mb: 1 }, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.FormGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 1, children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(appSwitch.AppSwitch, { required, color, ...option }, option.name)) }) }),
+        (helperText?.length || !!error) && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { error: hasError, children: error || helperText })
+      ]
+    }
+  );
+};
+exports.AppSwitchGroup = AppSwitchGroup;
+//# sourceMappingURL=app-switch-group.js.map

package/dist/react/cjs/components/app-switch-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-switch-group.js","sources":["../../../../src/components/app-switch-group.tsx"],"sourcesContent":["import { AppSwitch, AppSwitchProps } from './app-switch';\nimport {\n  FormControlProps,\n  FormControl,\n  FormLabel,\n  FormGroup,\n  Box,\n  FormHelperText,\n} from '@mui/material';\n\nexport type AppSwitchGroupProps = {\n  options: AppSwitchProps[];\n  label?: React.ReactNode;\n  helperText?: string;\n  color?: 'primary' | 'error';\n  disabled?: boolean;\n  required?: boolean;\n  error?: boolean;\n  formControlProps?: FormControlProps;\n};\n\nexport const AppSwitchGroup = ({\n  options,\n  label,\n  helperText,\n  required,\n  color = 'primary',\n  disabled,\n  error,\n  formControlProps,\n}: AppSwitchGroupProps) => {\n  const hasError = error;\n\n  return (\n    <FormControl\n      component=\"fieldset\"\n      variant=\"standard\"\n      error={error}\n      disabled={disabled}\n      {...formControlProps}\n    >\n      {label && (\n        <FormLabel color=\"primary\" sx={{ mb: 1 }}>\n          {label}\n        </FormLabel>\n      )}\n      <FormGroup>\n        <Box display=\"flex\" flexDirection=\"column\" alignItems=\"flex-start\" gap={1}>\n          {options.map(option => (\n            <AppSwitch required={required} key={option.name} color={color} {...option} />\n          ))}\n        </Box>\n      </FormGroup>\n      {(helperText?.length || !!error) && (\n        <FormHelperText error={hasError}>{error || helperText}</FormHelperText>\n      )}\n    </FormControl>\n  );\n};\n"],"names":["jsxs","FormControl","jsx","FormLabel","FormGroup","Box","AppSwitch","FormHelperText"],"mappings":";;;;;AAqBO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,WAAW;AAEjB,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,SACCC,2BAAAA,IAACC,sBAAU,OAAM,WAAU,IAAI,EAAE,IAAI,EAAA,GAClC,UAAA,MAAA,CACH;AAAA,QAEFD,2BAAAA,IAACE,SAAAA,WAAA,EACC,UAAAF,2BAAAA,IAACG,SAAAA,KAAA,EAAI,SAAQ,QAAO,eAAc,UAAS,YAAW,cAAa,KAAK,GACrE,kBAAQ,IAAI,CAAA,WACXH,2BAAAA,IAACI,UAAAA,WAAA,EAAU,UAAsC,OAAe,GAAG,OAAA,GAA/B,OAAO,IAAgC,CAC5E,EAAA,CACH,EAAA,CACF;AAAA,SACE,YAAY,UAAU,CAAC,CAAC,yCACvBC,yBAAA,EAAe,OAAO,UAAW,UAAA,SAAS,WAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI9D;;"}

package/dist/react/cjs/components/app-switch.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const AppSwitch = ({
+  name,
+  label,
+  color = "primary",
+  switchProps,
+  labelProps,
+  ...props
+}) => {
+  if (!label) return /* @__PURE__ */ jsxRuntime.jsx(material.Switch, { name, color, ...switchProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.FormControlLabel,
+    {
+      label,
+      control: /* @__PURE__ */ jsxRuntime.jsx(material.Switch, { name, color, ...switchProps }),
+      slotProps: { typography: { ...labelProps } },
+      ...props
+    }
+  );
+};
+exports.AppSwitch = AppSwitch;
+//# sourceMappingURL=app-switch.js.map

package/dist/react/cjs/components/app-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-switch.js","sources":["../../../../src/components/app-switch.tsx"],"sourcesContent":["import { FC } from 'react';\n\nimport {\n  FormControlLabel,\n  type FormControlLabelProps,\n  Switch,\n  type SwitchProps,\n  type TypographyProps,\n} from '@mui/material';\n\n//\n//\n\nexport type AppSwitchProps = {\n  name: string;\n  color?: 'primary' | 'error';\n  label?: React.ReactNode;\n  labelProps?: TypographyProps;\n  switchProps?: SwitchProps;\n} & Omit<FormControlLabelProps, 'size' | 'control' | 'label'>;\n\nexport const AppSwitch: FC<AppSwitchProps> = ({\n  name,\n  label,\n  color = 'primary',\n  switchProps,\n  labelProps,\n  ...props\n}) => {\n  if (!label) return <Switch name={name} color={color} {...switchProps} />;\n\n  return (\n    <FormControlLabel\n      label={label}\n      control={<Switch name={name} color={color} {...switchProps} />}\n      slotProps={{ typography: { ...labelProps } }}\n      {...props}\n    />\n  );\n};\n\n//\n"],"names":["jsx","Switch","FormControlLabel"],"mappings":";;;;AAqBO,MAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,CAAC,MAAO,QAAOA,+BAACC,SAAAA,UAAO,MAAY,OAAe,GAAG,aAAa;AAEtE,SACED,2BAAAA;AAAAA,IAACE,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,SAASF,2BAAAA,IAACC,iBAAA,EAAO,MAAY,OAAe,GAAG,aAAa;AAAA,MAC5D,WAAW,EAAE,YAAY,EAAE,GAAG,aAAW;AAAA,MACxC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;;"}

package/dist/react/cjs/components/app-tabs.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const appStatus = require("./app-status.js");
+const stackRow = require("./stack-row.js");
+const AppTabs = ({ tabs, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Tabs,
+    {
+      variant: "scrollable",
+      textColor: "secondary",
+      slotProps: { indicator: { hidden: true } },
+      ...props,
+      children: [
+        tabs?.map(({ key, ...tabProps }) => /* @__PURE__ */ jsxRuntime.jsx(AppTab, { ...tabProps }, key)),
+        children
+      ]
+    }
+  );
+};
+const AppTab = ({ label, chip, icon, ...props }) => {
+  const iconWithDefaults = React.isValidElement(icon) ? (
+    // @ts-expect-error: type
+    React.cloneElement(icon, { fontSize: "small", color: "action", ...icon.props ?? {} })
+  ) : icon;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Tab,
+    {
+      label: /* @__PURE__ */ jsxRuntime.jsxs(stackRow.StackRow, { children: [
+        iconWithDefaults ? iconWithDefaults : null,
+        label,
+        chip && /* @__PURE__ */ jsxRuntime.jsx(appStatus.AppStatus, { color: "primary", size: "small", sx: { minWidth: 24 }, ...chip })
+      ] }),
+      ...props
+    }
+  );
+};
+const formatNumber = (amount) => {
+  const formatter = new Intl.NumberFormat(void 0, {
+    style: "decimal",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2
+  });
+  return formatter.format(amount);
+};
+exports.AppTab = AppTab;
+exports.AppTabs = AppTabs;
+exports.formatNumber = formatNumber;
+//# sourceMappingURL=app-tabs.js.map

package/dist/react/cjs/components/app-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-tabs.js","sources":["../../../../src/components/app-tabs.tsx"],"sourcesContent":["import { cloneElement, isValidElement } from 'react';\n\nimport { Tab, TabProps, Tabs, TabsProps } from '@mui/material';\nimport { AppStatus, AppStatusProps } from './app-status';\nimport { StackRow } from './stack-row';\n\n//\n//\n\nexport type AppTabsProps = Omit<TabsProps, 'textColor'> & { tabs?: AppTabProps[] };\n\nexport const AppTabs = ({ tabs, children, ...props }: AppTabsProps) => {\n  return (\n    <Tabs\n      variant=\"scrollable\"\n      textColor=\"secondary\"\n      slotProps={{ indicator: { hidden: true } }}\n      {...props}\n    >\n      {tabs?.map(({ key, ...tabProps }) => (\n        <AppTab key={key} {...tabProps} />\n      ))}\n      {children}\n    </Tabs>\n  );\n};\n\n//\n\nexport type AppTabProps = TabProps & {\n  count?: number;\n  icon?: React.ReactNode;\n  chip?: AppStatusProps;\n};\n\nexport const AppTab = ({ label, chip, icon, ...props }: AppTabProps) => {\n  const iconWithDefaults = isValidElement(icon)\n    ? // @ts-expect-error: type\n      cloneElement(icon, { fontSize: 'small', color: 'action', ...(icon.props ?? {}) })\n    : icon;\n\n  return (\n    <Tab\n      label={\n        <StackRow>\n          {iconWithDefaults ? iconWithDefaults : null}\n\n          {label}\n\n          {chip && <AppStatus color=\"primary\" size=\"small\" sx={{ minWidth: 24 }} {...chip} />}\n        </StackRow>\n      }\n      {...props}\n    />\n  );\n};\n\nexport const formatNumber = (amount: number) => {\n  const formatter = new Intl.NumberFormat(undefined, {\n    style: 'decimal',\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 2,\n  });\n\n  return formatter.format(amount);\n};\n"],"names":["jsxs","Tabs","jsx","isValidElement","cloneElement","Tab","StackRow","AppStatus"],"mappings":";;;;;;;AAWO,MAAM,UAAU,CAAC,EAAE,MAAM,UAAU,GAAG,YAA0B;AACrE,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,WAAW,EAAE,WAAW,EAAE,QAAQ,OAAK;AAAA,MACtC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,MAAM,IAAI,CAAC,EAAE,KAAK,GAAG,SAAA,MACpBC,2BAAAA,IAAC,QAAA,EAAkB,GAAG,SAAA,GAAT,GAAmB,CACjC;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAUO,MAAM,SAAS,CAAC,EAAE,OAAO,MAAM,MAAM,GAAG,YAAyB;AACtE,QAAM,mBAAmBC,MAAAA,eAAe,IAAI;AAAA;AAAA,IAExCC,mBAAa,MAAM,EAAE,UAAU,SAAS,OAAO,UAAU,GAAI,KAAK,SAAS,GAAC,CAAI;AAAA,MAChF;AAEJ,SACEF,2BAAAA;AAAAA,IAACG,SAAAA;AAAAA,IAAA;AAAA,MACC,uCACGC,mBAAA,EACE,UAAA;AAAA,QAAA,mBAAmB,mBAAmB;AAAA,QAEtC;AAAA,QAEA,QAAQJ,2BAAAA,IAACK,UAAAA,WAAA,EAAU,OAAM,WAAU,MAAK,SAAQ,IAAI,EAAE,UAAU,GAAA,GAAO,GAAG,KAAA,CAAM;AAAA,MAAA,GACnF;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEO,MAAM,eAAe,CAAC,WAAmB;AAC9C,QAAM,YAAY,IAAI,KAAK,aAAa,QAAW;AAAA,IACjD,OAAO;AAAA,IACP,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,EAAA,CACxB;AAED,SAAO,UAAU,OAAO,MAAM;AAChC;;;;"}

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

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

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

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

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

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

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

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