@zidsa/zidmui 2.0.2 → 2.1.0

package/dist/react/es/components/app-pagination.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { Pagination } from "@mui/material";
+const AppPagination = (props) => {
+  return /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      variant: "outlined",
+      size: "medium",
+      shape: "rounded",
+      showFirstButton: true,
+      showLastButton: true,
+      ...props
+    }
+  );
+};
+export {
+  AppPagination
+};
+//# sourceMappingURL=app-pagination.js.map

package/dist/react/es/components/app-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-pagination.js","sources":["../../../../src/components/app-pagination.tsx"],"sourcesContent":["import { Pagination, type PaginationProps } from '@mui/material';\n\n//\n//\n\nexport type AppPaginationProps = Omit<PaginationProps, 'variant' | 'color' | 'shape' | 'size'> & {\n  size?: 'medium' | 'large';\n};\n\nexport const AppPagination = (props: AppPaginationProps) => {\n  return (\n    <Pagination\n      variant=\"outlined\"\n      size=\"medium\"\n      shape=\"rounded\"\n      showFirstButton\n      showLastButton\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;AASO,MAAM,gBAAgB,CAAC,UAA8B;AAC1D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,iBAAe;AAAA,MACf,gBAAc;AAAA,MACb,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/react/es/components/app-radio-group.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { styled, FormControlLabel, FormLabel, Box, RadioGroup, Radio } from "@mui/material";
+const AppRadioGroup = ({
+  name,
+  label,
+  options,
+  disabled = false,
+  row = true,
+  value,
+  onChange,
+  labelProps,
+  radioSize = "medium",
+  sx
+}) => {
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    label && /* @__PURE__ */ jsx(AppRadioGroupLegend, { disabled, component: "legend", children: label }),
+    /* @__PURE__ */ jsx(RadioGroup, { row, name, onChange, sx, value, children: options.map((option, i) => /* @__PURE__ */ jsx(
+      AppRadioGroupLabel,
+      {
+        disabled,
+        ...option,
+        control: /* @__PURE__ */ jsx(Radio, { disableRipple: true, size: radioSize }),
+        ...labelProps
+      },
+      i
+    )) })
+  ] });
+};
+const AppRadioGroupLabel = styled(FormControlLabel)(({ theme }) => {
+  return {
+    marginInline: 0,
+    gap: theme.spacing(0.5)
+  };
+});
+const AppRadioGroupLegend = styled(FormLabel)(({ theme }) => {
+  return {
+    fontWeight: theme.typography.subtitle2.fontWeight,
+    fontSize: theme.typography.subtitle2.fontSize,
+    lineHeight: theme.typography.subtitle2.lineHeight,
+    marginBottom: theme.spacing(1.5)
+  };
+});
+export {
+  AppRadioGroup
+};
+//# sourceMappingURL=app-radio-group.js.map

package/dist/react/es/components/app-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-radio-group.js","sources":["../../../../src/components/app-radio-group.tsx"],"sourcesContent":["import {\n  RadioGroupProps,\n  FormControlLabelProps,\n  Box,\n  RadioGroup,\n  Radio,\n  FormControlLabel,\n  FormLabel,\n  styled,\n} from '@mui/material';\n\n//\n//\n\n// For this component, the control is omitted from the options\n// to ensure that developers do not pass different controls.\nexport interface AppRadioGroupProps extends RadioGroupProps {\n  name: string;\n  label?: string;\n  options: Omit<FormControlLabelProps, 'control'>[];\n  disabled?: boolean;\n  row?: boolean;\n  value?: string;\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  labelProps?: Omit<FormControlLabelProps, 'control' | 'label'>;\n  radioSize?: 'small' | 'medium' | 'large';\n}\n\nexport const AppRadioGroup: React.FC<AppRadioGroupProps> = ({\n  name,\n  label,\n  options,\n  disabled = false,\n  row = true,\n  value,\n  onChange,\n  labelProps,\n  radioSize = 'medium',\n  sx,\n}: AppRadioGroupProps) => {\n  return (\n    <Box>\n      {label && (\n        <AppRadioGroupLegend disabled={disabled} component=\"legend\">\n          {label}\n        </AppRadioGroupLegend>\n      )}\n\n      <RadioGroup row={row} name={name} onChange={onChange} sx={sx} value={value}>\n        {options.map((option, i) => (\n          <AppRadioGroupLabel\n            key={i}\n            disabled={disabled}\n            {...option}\n            control={<Radio disableRipple size={radioSize} />}\n            {...labelProps}\n          />\n        ))}\n      </RadioGroup>\n    </Box>\n  );\n};\n\n//\n\nconst AppRadioGroupLabel = styled(FormControlLabel)(({ theme }) => {\n  return {\n    marginInline: 0,\n    gap: theme.spacing(0.5),\n  };\n});\n\nconst AppRadioGroupLegend = styled(FormLabel)<{ component?: string }>(({ theme }) => {\n  return {\n    fontWeight: theme.typography.subtitle2.fontWeight,\n    fontSize: theme.typography.subtitle2.fontSize,\n    lineHeight: theme.typography.subtitle2.lineHeight,\n    marginBottom: theme.spacing(1.5),\n  };\n});\n"],"names":[],"mappings":";;AA4BO,MAAM,gBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,MAA0B;AACxB,8BACG,KAAA,EACE,UAAA;AAAA,IAAA,SACC,oBAAC,qBAAA,EAAoB,UAAoB,WAAU,UAChD,UAAA,OACH;AAAA,IAGF,oBAAC,YAAA,EAAW,KAAU,MAAY,UAAoB,IAAQ,OAC3D,UAAA,QAAQ,IAAI,CAAC,QAAQ,MACpB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACC,GAAG;AAAA,QACJ,SAAS,oBAAC,OAAA,EAAM,eAAa,MAAC,MAAM,WAAW;AAAA,QAC9C,GAAG;AAAA,MAAA;AAAA,MAJC;AAAA,IAAA,CAMR,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAIA,MAAM,qBAAqB,OAAO,gBAAgB,EAAE,CAAC,EAAE,YAAY;AACjE,SAAO;AAAA,IACL,cAAc;AAAA,IACd,KAAK,MAAM,QAAQ,GAAG;AAAA,EAAA;AAE1B,CAAC;AAED,MAAM,sBAAsB,OAAO,SAAS,EAA0B,CAAC,EAAE,YAAY;AACnF,SAAO;AAAA,IACL,YAAY,MAAM,WAAW,UAAU;AAAA,IACvC,UAAU,MAAM,WAAW,UAAU;AAAA,IACrC,YAAY,MAAM,WAAW,UAAU;AAAA,IACvC,cAAc,MAAM,QAAQ,GAAG;AAAA,EAAA;AAEnC,CAAC;"}

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

@@ -49,6 +49,10 @@ const StatusElement = styled(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
 }));
 export {

package/dist/react/es/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":[],"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,8BAAW,eAAA,EAAc,QAAQ,OAAO,MAAY,KAAW,GAAG,OAAO;AAI/E,MAAI,CAAC,QAAS,QAAO;AAErB,6BACG,YAAA,EAAW,aAAa,SAAU,GAAG,cACnC,UAAA,SACH;AAEJ;AAEA,UAAU,cAAc;AAIxB,MAAM,gBAAgB,OAAO,MAAM;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":[],"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,8BAAW,eAAA,EAAc,QAAQ,OAAO,MAAY,KAAW,GAAG,OAAO;AAI/E,MAAI,CAAC,QAAS,QAAO;AAErB,6BACG,YAAA,EAAW,aAAa,SAAU,GAAG,cACnC,UAAA,SACH;AAEJ;AAEA,UAAU,cAAc;AAIxB,MAAM,gBAAgB,OAAO,MAAM;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/es/components/app-switch-group.js

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

package/dist/react/es/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":[],"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,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,SACC,oBAAC,aAAU,OAAM,WAAU,IAAI,EAAE,IAAI,EAAA,GAClC,UAAA,MAAA,CACH;AAAA,QAEF,oBAAC,WAAA,EACC,UAAA,oBAAC,KAAA,EAAI,SAAQ,QAAO,eAAc,UAAS,YAAW,cAAa,KAAK,GACrE,kBAAQ,IAAI,CAAA,WACX,oBAAC,WAAA,EAAU,UAAsC,OAAe,GAAG,OAAA,GAA/B,OAAO,IAAgC,CAC5E,EAAA,CACH,EAAA,CACF;AAAA,SACE,YAAY,UAAU,CAAC,CAAC,8BACvB,gBAAA,EAAe,OAAO,UAAW,UAAA,SAAS,WAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI9D;"}

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

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { Switch, FormControlLabel } from "@mui/material";
+const AppSwitch = ({
+  name,
+  label,
+  color = "primary",
+  switchProps,
+  labelProps,
+  ...props
+}) => {
+  if (!label) return /* @__PURE__ */ jsx(Switch, { name, color, ...switchProps });
+  return /* @__PURE__ */ jsx(
+    FormControlLabel,
+    {
+      label,
+      control: /* @__PURE__ */ jsx(Switch, { name, color, ...switchProps }),
+      slotProps: { typography: { ...labelProps } },
+      ...props
+    }
+  );
+};
+export {
+  AppSwitch
+};
+//# sourceMappingURL=app-switch.js.map

package/dist/react/es/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":[],"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,QAAO,oBAAC,UAAO,MAAY,OAAe,GAAG,aAAa;AAEtE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,oBAAC,QAAA,EAAO,MAAY,OAAe,GAAG,aAAa;AAAA,MAC5D,WAAW,EAAE,YAAY,EAAE,GAAG,aAAW;AAAA,MACxC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { isValidElement, cloneElement } from "react";
+import { Tabs, Tab } from "@mui/material";
+import { AppStatus } from "./app-status.js";
+import { StackRow } from "./stack-row.js";
+const AppTabs = ({ tabs, children, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      variant: "scrollable",
+      textColor: "secondary",
+      slotProps: { indicator: { hidden: true } },
+      ...props,
+      children: [
+        tabs?.map(({ key, ...tabProps }) => /* @__PURE__ */ jsx(AppTab, { ...tabProps }, key)),
+        children
+      ]
+    }
+  );
+};
+const AppTab = ({ label, chip, icon, ...props }) => {
+  const iconWithDefaults = isValidElement(icon) ? (
+    // @ts-expect-error: type
+    cloneElement(icon, { fontSize: "small", color: "action", ...icon.props ?? {} })
+  ) : icon;
+  return /* @__PURE__ */ jsx(
+    Tab,
+    {
+      label: /* @__PURE__ */ jsxs(StackRow, { children: [
+        iconWithDefaults ? iconWithDefaults : null,
+        label,
+        chip && /* @__PURE__ */ jsx(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);
+};
+export {
+  AppTab,
+  AppTabs,
+  formatNumber
+};
+//# sourceMappingURL=app-tabs.js.map

package/dist/react/es/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":[],"mappings":";;;;;AAWO,MAAM,UAAU,CAAC,EAAE,MAAM,UAAU,GAAG,YAA0B;AACrE,SACE;AAAA,IAAC;AAAA,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,MACpB,oBAAC,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,mBAAmB,eAAe,IAAI;AAAA;AAAA,IAExC,aAAa,MAAM,EAAE,UAAU,SAAS,OAAO,UAAU,GAAI,KAAK,SAAS,GAAC,CAAI;AAAA,MAChF;AAEJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,4BACG,UAAA,EACE,UAAA;AAAA,QAAA,mBAAmB,mBAAmB;AAAA,QAEtC;AAAA,QAEA,QAAQ,oBAAC,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/es/stories/css/Button.stories.js

@@ -0,0 +1,133 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+/* empty css                  */
+const meta = {
+  title: "CSS Styles/Components/Button",
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+const Variants = {
+  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Contained" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Primary" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--secondary zid-button--md", children: "Secondary" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--error zid-button--md", children: "Error" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", disabled: true, children: "Disabled" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Outlined" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--primary zid-button--md", children: "Primary" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Secondary" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--error zid-button--md", children: "Error" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--primary zid-button--md", disabled: true, children: "Disabled" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Text" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--md", children: "Primary" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--md", children: "Secondary" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--error zid-button--md", children: "Error" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--md", disabled: true, children: "Disabled" })
+      ] })
+    ] })
+  ] })
+};
+const Sizes = {
+  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Contained Sizes" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", alignItems: "center", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--sm", children: "Small" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Medium" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--lg", children: "Large" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Outlined Sizes" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", alignItems: "center", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--primary zid-button--sm", children: "Small" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--primary zid-button--md", children: "Medium" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--primary zid-button--lg", children: "Large" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Text Sizes" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", alignItems: "center", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--sm", children: "Small" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--md", children: "Medium" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--primary zid-button--lg", children: "Large" })
+      ] })
+    ] })
+  ] })
+};
+const States = {
+  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Interactive States (hover to see)" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Default" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", disabled: true, children: "Disabled" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "All Colors - Disabled State" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", disabled: true, children: "Primary" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", disabled: true, children: "Secondary" }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--text zid-button--error zid-button--md", disabled: true, children: "Error" })
+      ] })
+    ] })
+  ] })
+};
+const FullWidth = {
+  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px", width: "400px" }, children: [
+    /* @__PURE__ */ jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Full Width Buttons" }),
+    /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md zid-button--full-width", children: "Full Width Primary" }),
+    /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md zid-button--full-width", children: "Full Width Secondary" }),
+    /* @__PURE__ */ 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__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Icon Only Buttons" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", alignItems: "center", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--sm zid-button--icon-only", children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }) }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md zid-button--icon-only", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }) }),
+        /* @__PURE__ */ jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--lg zid-button--icon-only", children: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Buttons with Icons" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsxs("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: [
+          /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) }),
+          "Add Item"
+        ] }),
+        /* @__PURE__ */ jsxs("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: [
+          /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsxs("button", { className: "zid-button zid-button--text zid-button--error zid-button--md", children: [
+          /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ 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"
+        ] })
+      ] })
+    ] })
+  ] })
+};
+export {
+  FullWidth,
+  IconButton,
+  Sizes,
+  States,
+  Variants,
+  meta as default
+};
+//# sourceMappingURL=Button.stories.js.map

package/dist/react/es/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":[],"mappings":";;AAGA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AACnB;AAKO,MAAM,WAAkB;AAAA,EAC7B,QAAQ,MACN,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC3D,UAAA;AAAA,IAAA,qBAAC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,YAAA,CAAS;AAAA,MACpF,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,UAAU,OAAA,GACpD,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,WAAU,uEAAsE,UAAA,WAAO;AAAA,QAC/F,oBAAC,UAAA,EAAO,WAAU,yEAAwE,UAAA,aAAS;AAAA,QACnG,oBAAC,UAAA,EAAO,WAAU,qEAAoE,UAAA,SAAK;AAAA,4BAC1F,UAAA,EAAO,WAAU,uEAAsE,UAAQ,MAAC,UAAA,WAAA,CAAQ;AAAA,MAAA,EAAA,CAC3G;AAAA,IAAA,GACF;AAAA,yBAEC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,WAAA,CAAQ;AAAA,MACnF,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,UAAU,OAAA,GACpD,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,WAAU,sEAAqE,UAAA,WAAO;AAAA,QAC9F,oBAAC,UAAA,EAAO,WAAU,wEAAuE,UAAA,aAAS;AAAA,QAClG,oBAAC,UAAA,EAAO,WAAU,oEAAmE,UAAA,SAAK;AAAA,4BACzF,UAAA,EAAO,WAAU,sEAAqE,UAAQ,MAAC,UAAA,WAAA,CAAQ;AAAA,MAAA,EAAA,CAC1G;AAAA,IAAA,GACF;AAAA,yBAEC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,OAAA,CAAI;AAAA,MAC/E,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,UAAU,OAAA,GACpD,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,WAAU,kEAAiE,UAAA,WAAO;AAAA,QAC1F,oBAAC,UAAA,EAAO,WAAU,oEAAmE,UAAA,aAAS;AAAA,QAC9F,oBAAC,UAAA,EAAO,WAAU,gEAA+D,UAAA,SAAK;AAAA,4BACrF,UAAA,EAAO,WAAU,kEAAiE,UAAQ,MAAC,UAAA,WAAA,CAAQ;AAAA,MAAA,EAAA,CACtG;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEO,MAAM,QAAe;AAAA,EAC1B,QAAQ,MACN,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC3D,UAAA;AAAA,IAAA,qBAAC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,kBAAA,CAAe;AAAA,MAC1F,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,YAAY,UAAU,UAAU,OAAA,GAC1E,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,WAAU,uEAAsE,UAAA,SAAK;AAAA,QAC7F,oBAAC,UAAA,EAAO,WAAU,uEAAsE,UAAA,UAAM;AAAA,QAC9F,oBAAC,UAAA,EAAO,WAAU,uEAAsE,UAAA,QAAA,CAAK;AAAA,MAAA,EAAA,CAC/F;AAAA,IAAA,GACF;AAAA,yBAEC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,iBAAA,CAAc;AAAA,MACzF,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,YAAY,UAAU,UAAU,OAAA,GAC1E,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,WAAU,sEAAqE,UAAA,SAAK;AAAA,QAC5F,oBAAC,UAAA,EAAO,WAAU,sEAAqE,UAAA,UAAM;AAAA,QAC7F,oBAAC,UAAA,EAAO,WAAU,sEAAqE,UAAA,QAAA,CAAK;AAAA,MAAA,EAAA,CAC9F;AAAA,IAAA,GACF;AAAA,yBAEC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,aAAA,CAAU;AAAA,MACrF,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,YAAY,UAAU,UAAU,OAAA,GAC1E,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,WAAU,kEAAiE,UAAA,SAAK;AAAA,QACxF,oBAAC,UAAA,EAAO,WAAU,kEAAiE,UAAA,UAAM;AAAA,QACzF,oBAAC,UAAA,EAAO,WAAU,kEAAiE,UAAA,QAAA,CAAK;AAAA,MAAA,EAAA,CAC1F;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAGO,MAAM,SAAgB;AAAA,EAC3B,QAAQ,MACN,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC3D,UAAA;AAAA,IAAA,qBAAC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,oCAAA,CAAiC;AAAA,MAC5G,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,UAAU,OAAA,GACpD,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,WAAU,uEAAsE,UAAA,WAAO;AAAA,4BAC9F,UAAA,EAAO,WAAU,uEAAsE,UAAQ,MAAC,UAAA,WAAA,CAAQ;AAAA,MAAA,EAAA,CAC3G;AAAA,IAAA,GACF;AAAA,yBAEC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,8BAAA,CAA2B;AAAA,MACtG,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,UAAU,OAAA,GACpD,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,WAAU,uEAAsE,UAAQ,MAAC,UAAA,WAAO;AAAA,4BACvG,UAAA,EAAO,WAAU,wEAAuE,UAAQ,MAAC,UAAA,aAAS;AAAA,4BAC1G,UAAA,EAAO,WAAU,gEAA+D,UAAQ,MAAC,UAAA,QAAA,CAAK;AAAA,MAAA,EAAA,CACjG;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEO,MAAM,YAAmB;AAAA,EAC9B,QAAQ,MACN,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,QAAQ,OAAO,WAC1E,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,OAAO,YAAY,yBAAA,GAA4B,UAAA,qBAAA,CAAkB;AAAA,IAC5F,oBAAC,UAAA,EAAO,WAAU,8FAA6F,UAAA,sBAE/G;AAAA,IACA,oBAAC,UAAA,EAAO,WAAU,+FAA8F,UAAA,wBAEhH;AAAA,IACA,oBAAC,UAAA,EAAO,WAAU,uFAAsF,UAAA,mBAAA,CAExG;AAAA,EAAA,EAAA,CACF;AAEJ;AAEO,MAAM,aAAoB;AAAA,EAC/B,QAAQ,MACN,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC3D,UAAA;AAAA,IAAA,qBAAC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,oBAAA,CAAiB;AAAA,MAC5F,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,YAAY,UAAU,UAAU,OAAA,GAC1E,UAAA;AAAA,QAAA,oBAAC,YAAO,WAAU,6FAChB,8BAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA,oBAAC,UAAK,GAAE,uCAAqC,GAC/C,EAAA,CACF;AAAA,4BACC,UAAA,EAAO,WAAU,6FAChB,UAAA,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA,oBAAC,UAAK,GAAE,uCAAqC,GAC/C,EAAA,CACF;AAAA,4BACC,UAAA,EAAO,WAAU,6FAChB,UAAA,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA,oBAAC,UAAK,GAAE,sCAAA,CAAqC,GAC/C,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,yBAEC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,qBAAA,CAAkB;AAAA,MAC7F,qBAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,UAAU,OAAA,GACpD,UAAA;AAAA,QAAA,qBAAC,UAAA,EAAO,WAAU,uEAChB,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA,oBAAC,QAAA,EAAK,GAAE,uCAAqC,GAC/C;AAAA,UAAM;AAAA,QAAA,GAER;AAAA,QACA,qBAAC,UAAA,EAAO,WAAU,wEAChB,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA,oBAAC,QAAA,EAAK,GAAE,yJAAuJ,GACjK;AAAA,UAAM;AAAA,QAAA,GAER;AAAA,QACA,qBAAC,UAAA,EAAO,WAAU,gEAChB,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA,oBAAC,QAAA,EAAK,GAAE,iFAA+E,GACzF;AAAA,UAAM;AAAA,QAAA,EAAA,CAER;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;"}

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

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