@kenpan/zds-r8f3v1 0.1.0

package/dist/components/FeaturedIcon.js

@@ -0,0 +1,134 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import Box from "../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+const colorMap = {
+  error: { bg: "#FEF3F2", border: "#FEE4E2", icon: "#D92D20" },
+  gray: { bg: "#F9FAFB", border: "#EAECF0", icon: "#667085" },
+  primary: { bg: "#EFF8FF", border: "#D1E9FF", icon: "#1570EF" },
+  warning: { bg: "#FFFAEB", border: "#FEDF89", icon: "#DC6803" },
+  success: { bg: "#ECFDF3", border: "#ABEFC6", icon: "#079455" }
+};
+const sizeMap = {
+  sm: { container: 32, icon: 16, borderWidth: 4 },
+  md: { container: 40, icon: 20, borderWidth: 6 },
+  lg: { container: 48, icon: 24, borderWidth: 8 },
+  xl: { container: 56, icon: 28, borderWidth: 10 }
+};
+const normalizeTheme = (iconTheme) => {
+  if (iconTheme === "light") return "light-circle";
+  if (iconTheme === "dark") return "dark-circle";
+  return iconTheme;
+};
+const getFeaturedIconStyles = (color = "gray", iconTheme = "outline", size = "md") => {
+  const colors = colorMap[color];
+  const sizes = sizeMap[size];
+  const normalizedTheme = normalizeTheme(iconTheme);
+  const baseContainer = {
+    width: sizes.container,
+    height: sizes.container,
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxSizing: "border-box"
+  };
+  if (normalizedTheme === "outline") {
+    return {
+      container: {
+        ...baseContainer,
+        backgroundColor: "#FFFFFF",
+        border: `1px solid ${colors.border}`,
+        boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)"
+      },
+      iconColor: colors.icon,
+      iconSize: sizes.icon
+    };
+  }
+  if (normalizedTheme === "light-circle") {
+    return {
+      container: {
+        ...baseContainer,
+        backgroundColor: colors.bg
+      },
+      iconColor: colors.icon,
+      iconSize: sizes.icon
+    };
+  }
+  if (normalizedTheme === "light-circle-outline") {
+    return {
+      container: {
+        ...baseContainer,
+        backgroundColor: colors.border,
+        // Medium color as inner background
+        border: `${sizes.borderWidth}px solid ${colors.bg}`
+        // Lighter color as outer ring
+      },
+      iconColor: colors.icon,
+      iconSize: sizes.icon
+    };
+  }
+  return {
+    container: {
+      ...baseContainer,
+      backgroundColor: colors.icon,
+      border: `${sizes.borderWidth}px solid ${colors.border}`
+    },
+    iconColor: "#FFFFFF",
+    iconSize: sizes.icon
+  };
+};
+const FeaturedIcon = React.forwardRef(
+  function FeaturedIcon2(props, ref) {
+    const {
+      icon = "Placeholder",
+      color = "gray",
+      size = "md",
+      iconTheme,
+      theme,
+      onClick,
+      sx
+    } = props;
+    const resolvedTheme = iconTheme ?? theme ?? "outline";
+    const styles = getFeaturedIconStyles(color, resolvedTheme, size);
+    const iconName = icon === "Circle" ? "Placeholder" : icon;
+    const containerSx = [
+      {
+        ...styles.container,
+        flexShrink: 0,
+        ...onClick && {
+          cursor: "pointer",
+          "&:hover": {
+            opacity: 0.8
+          }
+        }
+      },
+      ...Array.isArray(sx) ? sx : [sx]
+    ];
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        "data-component": "FeaturedIcon",
+        onClick,
+        sx: containerSx,
+        role: onClick ? "button" : void 0,
+        tabIndex: onClick ? 0 : void 0,
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: iconName,
+            size: styles.iconSize,
+            color: styles.iconColor
+          }
+        )
+      }
+    );
+  }
+);
+FeaturedIcon.displayName = "FeaturedIcon";
+export {
+  FeaturedIcon,
+  getFeaturedIconStyles
+};
+//# sourceMappingURL=FeaturedIcon.js.map

package/dist/components/FeaturedIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeaturedIcon.js","sources":["../../src/components/FeaturedIcon.tsx"],"sourcesContent":["// src/components/zenith/FeaturedIcon.tsx\n// FeaturedIcon component\nimport * as React from 'react'\nimport Box from '@mui/material/Box'\nimport type { SxProps, Theme } from '@mui/material/styles'\nimport { Icon } from './Icon'\nimport type { SupportedIconName } from './Icon'\n\n// ============================================================================\n// TYPES - Matching Storybook API\n// ============================================================================\n\nexport type FeaturedIconColor = 'error' | 'gray' | 'primary' | 'warning' | 'success'\nexport type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl'\n// Storybook iconTheme values: outline, light-circle, light-circle-outline, dark-circle\n// We also support simplified aliases: outline, light, dark\nexport type FeaturedIconTheme = \n  | 'outline' \n  | 'light-circle' \n  | 'light-circle-outline' \n  | 'dark-circle'\n  // Aliases for backward compatibility\n  | 'light' \n  | 'dark'\n\n// ============================================================================\n// PROPS - Matching Storybook API\n// ============================================================================\n\nexport interface FeaturedIconProps {\n  /** Icon name to display (required in Storybook, optional here with default \"Placeholder\") */\n  icon?: SupportedIconName | 'Circle' | 'Placeholder'\n  /** Color theme of the featured icon */\n  color?: FeaturedIconColor\n  /** Size of the featured icon: sm, md, lg, xl */\n  size?: FeaturedIconSize\n  /** \n   * Visual theme (iconTheme in Storybook):\n   * - outline: white bg with border\n   * - light-circle: colored bg (same as 'light')\n   * - light-circle-outline: colored bg with border\n   * - dark-circle: dark bg with white icon (same as 'dark')\n   */\n  iconTheme?: FeaturedIconTheme\n  /** @deprecated Use iconTheme instead. Kept for backward compatibility */\n  theme?: FeaturedIconTheme\n  /** Click handler */\n  onClick?: () => void\n  /** Custom sx styles */\n  sx?: SxProps<Theme>\n}\n\n// ============================================================================\n// STYLES\n// ============================================================================\n\nconst colorMap: Record<FeaturedIconColor, { bg: string; border: string; icon: string }> = {\n  error: { bg: '#FEF3F2', border: '#FEE4E2', icon: '#D92D20' },\n  gray: { bg: '#F9FAFB', border: '#EAECF0', icon: '#667085' },\n  primary: { bg: '#EFF8FF', border: '#D1E9FF', icon: '#1570EF' },\n  warning: { bg: '#FFFAEB', border: '#FEDF89', icon: '#DC6803' },\n  success: { bg: '#ECFDF3', border: '#ABEFC6', icon: '#079455' },\n}\n\n// Storybook measurements: container and icon sizes\n// sm: container=32px, icon=16px, border=4px (for outline themes)\n// md: container=40px, icon=20px, border=6px\n// lg: container=48px, icon=24px, border=8px\n// xl: container=56px, icon=28px, border=10px\nconst sizeMap: Record<FeaturedIconSize, { container: number; icon: number; borderWidth: number }> = {\n  sm: { container: 32, icon: 16, borderWidth: 4 },\n  md: { container: 40, icon: 20, borderWidth: 6 },\n  lg: { container: 48, icon: 24, borderWidth: 8 },\n  xl: { container: 56, icon: 28, borderWidth: 10 },\n}\n\n// Normalize theme aliases\nconst normalizeTheme = (iconTheme: FeaturedIconTheme): 'outline' | 'light-circle' | 'light-circle-outline' | 'dark-circle' => {\n  if (iconTheme === 'light') return 'light-circle'\n  if (iconTheme === 'dark') return 'dark-circle'\n  return iconTheme as 'outline' | 'light-circle' | 'light-circle-outline' | 'dark-circle'\n}\n\nexport const getFeaturedIconStyles = (\n  color: FeaturedIconColor = 'gray',\n  iconTheme: FeaturedIconTheme = 'outline',\n  size: FeaturedIconSize = 'md'\n) => {\n  const colors = colorMap[color]\n  const sizes = sizeMap[size]\n  const normalizedTheme = normalizeTheme(iconTheme)\n\n  // Common container base styles\n  const baseContainer = {\n    width: sizes.container,\n    height: sizes.container,\n    borderRadius: '50%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    boxSizing: 'border-box' as const,\n  }\n\n  // outline: white background with 1px colored border + shadow\n  // Storybook: sm=32px, md=40px, lg=48px, xl=56px, border=1px\n  if (normalizedTheme === 'outline') {\n    return {\n      container: {\n        ...baseContainer,\n        backgroundColor: '#FFFFFF',\n        border: `1px solid ${colors.border}`,\n        boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)',\n      },\n      iconColor: colors.icon,\n      iconSize: sizes.icon,\n    }\n  }\n\n  // light-circle: colored background, no border\n  // Storybook: sm=32px, md=40px, lg=48px, xl=56px, border=0px\n  if (normalizedTheme === 'light-circle') {\n    return {\n      container: {\n        ...baseContainer,\n        backgroundColor: colors.bg,\n      },\n      iconColor: colors.icon,\n      iconSize: sizes.icon,\n    }\n  }\n\n  // light-circle-outline: medium colored bg + thick lighter border\n  // Storybook: border=4/6/8/10px, bg=colors.border, borderColor=colors.bg (lighter)\n  if (normalizedTheme === 'light-circle-outline') {\n    return {\n      container: {\n        ...baseContainer,\n        backgroundColor: colors.border,  // Medium color as inner background\n        border: `${sizes.borderWidth}px solid ${colors.bg}`,  // Lighter color as outer ring\n      },\n      iconColor: colors.icon,\n      iconSize: sizes.icon,\n    }\n  }\n\n  // dark-circle: icon color background + medium border, white icon\n  // Storybook: border=4/6/8/10px, bg=colors.icon, borderColor=colors.border\n  return {\n    container: {\n      ...baseContainer,\n      backgroundColor: colors.icon,\n      border: `${sizes.borderWidth}px solid ${colors.border}`,\n    },\n    iconColor: '#FFFFFF',\n    iconSize: sizes.icon,\n  }\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const FeaturedIcon = React.forwardRef<HTMLDivElement, FeaturedIconProps>(\n  function FeaturedIcon(props, ref) {\n    const {\n      icon = 'Placeholder',\n      color = 'gray',\n      size = 'md',\n      iconTheme,\n      theme,\n      onClick,\n      sx,\n    } = props\n\n    // Use iconTheme if provided, fallback to theme for backward compatibility\n    const resolvedTheme = iconTheme ?? theme ?? 'outline'\n    \n    const styles = getFeaturedIconStyles(color, resolvedTheme, size)\n\n    // Map \"Circle\" to \"Placeholder\" icon\n    const iconName = icon === 'Circle' ? 'Placeholder' : icon\n\n    const containerSx = [\n      {\n        ...styles.container,\n        flexShrink: 0,\n        ...(onClick && {\n          cursor: 'pointer',\n          '&:hover': {\n            opacity: 0.8,\n          },\n        }),\n      },\n      ...(Array.isArray(sx) ? sx : [sx]),\n    ]\n\n    return (\n      <Box\n        ref={ref}\n        data-component=\"FeaturedIcon\"\n        onClick={onClick}\n        sx={containerSx}\n        role={onClick ? 'button' : undefined}\n        tabIndex={onClick ? 0 : undefined}\n      >\n        <Icon\n          name={iconName}\n          size={styles.iconSize}\n          color={styles.iconColor}\n        />\n      </Box>\n    )\n  }\n)\n\nFeaturedIcon.displayName = 'FeaturedIcon'\n\nexport default FeaturedIcon\n"],"names":["FeaturedIcon"],"mappings":"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"}

package/dist/components/FileUpload.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+export interface UploadedFileProps {
+    /** File name or title */
+    text: string;
+    /** Subtext (e.g., file size) */
+    subText?: string;
+    /** Icon name (e.g., "PDF", "PNG") */
+    icon?: string;
+    /** Type of icon display */
+    iconType?: 'file-type' | 'simple';
+    /** Progress percentage (0-100) */
+    progressValue?: number;
+    /** Whether to show the progress indicator */
+    showProgressIndicator?: boolean;
+    /** Visual variant */
+    variant?: 'progress-bar' | 'progress-fill' | 'read-only';
+    /** Removal callback */
+    onDelete?: () => void;
+    /** Custom sx styles */
+    sx?: any;
+}
+export declare const UploadedFile: React.FC<UploadedFileProps>;
+export interface DropZoneProps {
+    /** Hint text or label */
+    label?: React.ReactNode;
+    /** Accepted file types string */
+    accept?: string;
+    /** Text for the primary upload button/link */
+    buttonLabel?: string;
+    /** Whether to use a destructive (error) style */
+    destructive?: boolean;
+    /** Whether the dropzone is disabled */
+    disabled?: boolean;
+    /** Icon properties */
+    iconProps?: {
+        icon: string;
+    };
+    /** Callback when files are dropped */
+    onDrop?: (files: File[]) => void;
+    /** Whether the zone is currently dragging over */
+    isDragging?: boolean;
+    /** Custom data attributes */
+    dataAttributes?: Record<string, any>;
+}
+export declare const DropZone: React.FC<DropZoneProps>;
+export interface FileUploadProps {
+    /** List of already uploaded files */
+    files?: UploadedFileProps[];
+    /** Properties for the DropZone */
+    dropZoneProps?: DropZoneProps;
+    /** Removal callback for files */
+    onRemoveFile?: (index: number) => void;
+    /** Custom sx styles */
+    sx?: any;
+}
+export declare const FileUpload: React.FC<FileUploadProps>;
+export default FileUpload;
+//# sourceMappingURL=FileUpload.d.ts.map

package/dist/components/FileUpload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../src/components/FileUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,MAAM,WAAW,iBAAiB;IAChC,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;IACjC,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,6CAA6C;IAC7C,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,qBAAqB;IACrB,OAAO,CAAC,EAAE,cAAc,GAAG,eAAe,GAAG,WAAW,CAAA;IACxD,uBAAuB;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,uBAAuB;IACvB,EAAE,CAAC,EAAE,GAAG,CAAA;CACT;AAaD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0CpD,CAAA;AAID,MAAM,WAAW,aAAa;IAC5B,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB;IACtB,SAAS,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5B,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAChC,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACrC;AAsBD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2C5C,CAAA;AAID,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC3B,kCAAkC;IAClC,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,uBAAuB;IACvB,EAAE,CAAC,EAAE,GAAG,CAAA;CACT;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsBhD,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/components/FileUpload.js

@@ -0,0 +1,133 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Icon } from "./Icon.js";
+import { Button } from "./Button.js";
+import Box from "../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import Typography from "../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
+import { ProgressIndicator } from "./progress/ProgressIndicator.js";
+import styled from "../packages/zenith-ui/node_modules/@mui/material/esm/styles/styled.js";
+const FileItemContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  padding: theme.spacing(2),
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  gap: theme.spacing(2),
+  marginBottom: theme.spacing(1),
+  position: "relative"
+}));
+const UploadedFile = ({
+  text,
+  subText,
+  icon = "FileDefault",
+  iconType: _iconType,
+  progressValue,
+  showProgressIndicator = true,
+  variant = "progress-bar",
+  onDelete,
+  sx
+}) => {
+  return /* @__PURE__ */ jsxs(FileItemContainer, { sx, children: [
+    /* @__PURE__ */ jsx(Box, { sx: { color: "primary.main", display: "flex" }, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 32 }) }),
+    /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", mb: 0.5 }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "text-sm-medium", color: "text.primary", noWrap: true, children: text }),
+        /* @__PURE__ */ jsx(Typography, { variant: "text-xs-regular", color: "text.secondary", children: subText })
+      ] }),
+      showProgressIndicator && progressValue !== void 0 && variant !== "read-only" && /* @__PURE__ */ jsx(Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx(
+        ProgressIndicator,
+        {
+          value: progressValue,
+          size: "sm",
+          variant: variant === "progress-fill" ? "determinate" : "determinate"
+        }
+      ) })
+    ] }),
+    onDelete && variant !== "read-only" && /* @__PURE__ */ jsx(Button, { variant: "tertiary-gray", size: "small", onClick: onDelete, sx: { minWidth: "auto", p: 0.5 }, children: /* @__PURE__ */ jsx(Icon, { name: "Trash", size: 20 }) })
+  ] });
+};
+const DropZoneContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "isDragging" && prop !== "destructive" && prop !== "disabled"
+})(({ theme, isDragging, destructive, disabled }) => {
+  const borderRadiusValue = typeof theme.shape.borderRadius === "number" ? theme.shape.borderRadius : 4;
+  return {
+    border: `2px dashed ${destructive ? theme.palette.error.main : isDragging ? theme.palette.primary.main : theme.palette.divider}`,
+    borderRadius: borderRadiusValue * 2,
+    padding: theme.spacing(4),
+    textAlign: "center",
+    backgroundColor: isDragging ? "rgba(21, 112, 239, 0.04)" : destructive ? "rgba(217, 45, 32, 0.02)" : theme.palette.gray?.[25] || "#FCFCFC",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    transition: "all 0.2s ease-in-out",
+    "&:hover": {
+      borderColor: disabled ? theme.palette.divider : destructive ? theme.palette.error.main : theme.palette.primary.main,
+      backgroundColor: disabled ? "transparent" : destructive ? "rgba(217, 45, 32, 0.04)" : "rgba(21, 112, 239, 0.02)"
+    }
+  };
+});
+const DropZone = ({
+  label = "SVG, PNG, JPG or GIF (max. 800x400px)",
+  accept: _accept,
+  buttonLabel = "Click to upload or drag and drop",
+  destructive,
+  disabled,
+  iconProps = { icon: "UploadCloud" },
+  onDrop: _onDrop,
+  isDragging,
+  dataAttributes
+}) => {
+  return /* @__PURE__ */ jsx(
+    DropZoneContainer,
+    {
+      isDragging,
+      destructive,
+      disabled,
+      ...dataAttributes,
+      children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1.5 }, children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              width: 48,
+              height: 48,
+              borderRadius: "50%",
+              backgroundColor: destructive ? "error.50" : "gray.100",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: destructive ? "error.main" : "text.secondary",
+              mb: 1
+            },
+            children: /* @__PURE__ */ jsx(Icon, { name: iconProps.icon, size: 24 })
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "text-sm-semibold", color: destructive ? "error.main" : "primary.main", children: buttonLabel }),
+        /* @__PURE__ */ jsx(Typography, { variant: "text-xs-regular", color: "text.secondary", children: label })
+      ] })
+    }
+  );
+};
+const FileUpload = ({
+  files = [],
+  dropZoneProps,
+  onRemoveFile,
+  sx
+}) => {
+  return /* @__PURE__ */ jsxs(Box, { sx, children: [
+    /* @__PURE__ */ jsx(DropZone, { ...dropZoneProps }),
+    files.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { mt: 3 }, children: files.map((file, index) => /* @__PURE__ */ jsx(
+      UploadedFile,
+      {
+        ...file,
+        onDelete: () => onRemoveFile?.(index)
+      },
+      index
+    )) })
+  ] });
+};
+export {
+  DropZone,
+  FileUpload,
+  UploadedFile
+};
+//# sourceMappingURL=FileUpload.js.map

package/dist/components/FileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.js","sources":["../../src/components/FileUpload.tsx"],"sourcesContent":["import * as React from 'react'\nimport Box from '@mui/material/Box'\nimport Typography from '@mui/material/Typography'\nimport { styled } from '@mui/material/styles'\nimport { Icon } from './Icon'\nimport { Button } from './Button'\nimport { ProgressIndicator } from './progress'\n\n// --- UploadedFile ---\n\nexport interface UploadedFileProps {\n  /** File name or title */\n  text: string\n  /** Subtext (e.g., file size) */\n  subText?: string\n  /** Icon name (e.g., \"PDF\", \"PNG\") */\n  icon?: string\n  /** Type of icon display */\n  iconType?: 'file-type' | 'simple'\n  /** Progress percentage (0-100) */\n  progressValue?: number\n  /** Whether to show the progress indicator */\n  showProgressIndicator?: boolean\n  /** Visual variant */\n  variant?: 'progress-bar' | 'progress-fill' | 'read-only'\n  /** Removal callback */\n  onDelete?: () => void\n  /** Custom sx styles */\n  sx?: any\n}\n\nconst FileItemContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  padding: theme.spacing(2),\n  border: `1px solid ${theme.palette.divider}`,\n  borderRadius: theme.shape.borderRadius,\n  gap: theme.spacing(2),\n  marginBottom: theme.spacing(1),\n  position: 'relative',\n}))\n\nexport const UploadedFile: React.FC<UploadedFileProps> = ({\n  text,\n  subText,\n  icon = 'FileDefault',\n  iconType: _iconType,\n  progressValue,\n  showProgressIndicator = true,\n  variant = 'progress-bar',\n  onDelete,\n  sx,\n}) => {\n  return (\n    <FileItemContainer sx={sx}>\n      <Box sx={{ color: 'primary.main', display: 'flex' }}>\n        <Icon name={icon} size={32} />\n      </Box>\n      <Box sx={{ flex: 1, minWidth: 0 }}>\n        <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>\n          <Typography variant=\"text-sm-medium\" color=\"text.primary\" noWrap>\n            {text}\n          </Typography>\n          <Typography variant=\"text-xs-regular\" color=\"text.secondary\">\n            {subText}\n          </Typography>\n        </Box>\n        {showProgressIndicator && progressValue !== undefined && variant !== 'read-only' && (\n          <Box sx={{ mt: 1 }}>\n            <ProgressIndicator\n              value={progressValue}\n              size=\"sm\"\n              variant={variant === 'progress-fill' ? 'determinate' : 'determinate'} // Assuming progress-fill is also determinate\n            />\n          </Box>\n        )}\n      </Box>\n      {onDelete && variant !== 'read-only' && (\n        <Button variant=\"tertiary-gray\" size=\"small\" onClick={onDelete} sx={{ minWidth: 'auto', p: 0.5 }}>\n          <Icon name=\"Trash\" size={20} />\n        </Button>\n      )}\n    </FileItemContainer>\n  )\n}\n\n// --- DropZone ---\n\nexport interface DropZoneProps {\n  /** Hint text or label */\n  label?: React.ReactNode\n  /** Accepted file types string */\n  accept?: string\n  /** Text for the primary upload button/link */\n  buttonLabel?: string\n  /** Whether to use a destructive (error) style */\n  destructive?: boolean\n  /** Whether the dropzone is disabled */\n  disabled?: boolean\n  /** Icon properties */\n  iconProps?: { icon: string }\n  /** Callback when files are dropped */\n  onDrop?: (files: File[]) => void\n  /** Whether the zone is currently dragging over */\n  isDragging?: boolean\n  /** Custom data attributes */\n  dataAttributes?: Record<string, any>\n}\n\nconst DropZoneContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'isDragging' && prop !== 'destructive' && prop !== 'disabled',\n})<{ isDragging?: boolean; destructive?: boolean; disabled?: boolean }>(({ theme, isDragging, destructive, disabled }) => {\n  const borderRadiusValue = typeof theme.shape.borderRadius === 'number' ? theme.shape.borderRadius : 4\n  return {\n  border: `2px dashed ${destructive ? theme.palette.error.main : (isDragging ? theme.palette.primary.main : theme.palette.divider)}`,\n    borderRadius: borderRadiusValue * 2,\n  padding: theme.spacing(4),\n  textAlign: 'center',\n  backgroundColor: isDragging ? 'rgba(21, 112, 239, 0.04)' : (destructive ? 'rgba(217, 45, 32, 0.02)' : theme.palette.gray?.[25] || '#FCFCFC'),\n  cursor: disabled ? 'not-allowed' : 'pointer',\n  opacity: disabled ? 0.5 : 1,\n  transition: 'all 0.2s ease-in-out',\n  '&:hover': {\n    borderColor: disabled ? theme.palette.divider : (destructive ? theme.palette.error.main : theme.palette.primary.main),\n    backgroundColor: disabled ? 'transparent' : (destructive ? 'rgba(217, 45, 32, 0.04)' : 'rgba(21, 112, 239, 0.02)'),\n  },\n  }\n})\n\nexport const DropZone: React.FC<DropZoneProps> = ({\n  label = 'SVG, PNG, JPG or GIF (max. 800x400px)',\n  accept: _accept,\n  buttonLabel = 'Click to upload or drag and drop',\n  destructive,\n  disabled,\n  iconProps = { icon: 'UploadCloud' },\n  onDrop: _onDrop,\n  isDragging,\n  dataAttributes,\n}) => {\n  return (\n    <DropZoneContainer\n      isDragging={isDragging}\n      destructive={destructive}\n      disabled={disabled}\n      {...dataAttributes}\n    >\n      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1.5 }}>\n        <Box\n          sx={{\n            width: 48,\n            height: 48,\n            borderRadius: '50%',\n            backgroundColor: destructive ? 'error.50' : 'gray.100',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            color: destructive ? 'error.main' : 'text.secondary',\n            mb: 1,\n          }}\n        >\n          <Icon name={iconProps.icon} size={24} />\n        </Box>\n        <Typography variant=\"text-sm-semibold\" color={destructive ? 'error.main' : 'primary.main'}>\n          {buttonLabel}\n        </Typography>\n        <Typography variant=\"text-xs-regular\" color=\"text.secondary\">\n          {label}\n        </Typography>\n      </Box>\n    </DropZoneContainer>\n  )\n}\n\n// --- FileUpload ---\n\nexport interface FileUploadProps {\n  /** List of already uploaded files */\n  files?: UploadedFileProps[]\n  /** Properties for the DropZone */\n  dropZoneProps?: DropZoneProps\n  /** Removal callback for files */\n  onRemoveFile?: (index: number) => void\n  /** Custom sx styles */\n  sx?: any\n}\n\nexport const FileUpload: React.FC<FileUploadProps> = ({\n  files = [],\n  dropZoneProps,\n  onRemoveFile,\n  sx,\n}) => {\n  return (\n    <Box sx={sx}>\n      <DropZone {...dropZoneProps} />\n      {files.length > 0 && (\n        <Box sx={{ mt: 3 }}>\n          {files.map((file, index) => (\n            <UploadedFile\n              key={index}\n              {...file}\n              onDelete={() => onRemoveFile?.(index)}\n            />\n          ))}\n        </Box>\n      )}\n    </Box>\n  )\n}\n\nexport default FileUpload\n"],"names":[],"mappings":"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"}

package/dist/components/HelpIcon.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export type HelpIconTooltipPlacement = 'top-no-arrow' | 'top-center' | 'top-right' | 'top-left' | 'bottom-center' | 'bottom-right' | 'bottom-left' | 'right' | 'left';
+export interface HelpIconProps {
+    title: string;
+    supportingText?: string;
+    tooltipPlacement?: HelpIconTooltipPlacement;
+    iconSize?: number;
+    iconColor?: string;
+}
+export declare const HelpIcon: React.ForwardRefExoticComponent<HelpIconProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=HelpIcon.d.ts.map

package/dist/components/HelpIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpIcon.d.ts","sourceRoot":"","sources":["../../src/components/HelpIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,MAAM,wBAAwB,GAChC,cAAc,GACd,YAAY,GACZ,WAAW,GACX,UAAU,GACV,eAAe,GACf,cAAc,GACd,aAAa,GACb,OAAO,GACP,MAAM,CAAA;AAEV,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,wBAAwB,CAAA;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA8BD,eAAO,MAAM,QAAQ,sFA6BpB,CAAA"}

package/dist/components/HelpIcon.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Icon } from "./Icon.js";
+import { Tooltip } from "./Tooltip.js";
+import useTheme from "../packages/zenith-ui/node_modules/@mui/material/esm/styles/useTheme.js";
+import Box from "../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+const mapPlacement = (placement) => {
+  switch (placement) {
+    case "top-no-arrow":
+      return { placement: "top", arrow: false };
+    case "top-center":
+      return { placement: "top", arrow: true };
+    case "top-right":
+      return { placement: "top-end", arrow: true };
+    case "top-left":
+      return { placement: "top-start", arrow: true };
+    case "bottom-center":
+      return { placement: "bottom", arrow: true };
+    case "bottom-right":
+      return { placement: "bottom-end", arrow: true };
+    case "bottom-left":
+      return { placement: "bottom-start", arrow: true };
+    case "right":
+      return { placement: "right", arrow: true };
+    case "left":
+      return { placement: "left", arrow: true };
+    default:
+      return { placement: "top", arrow: false };
+  }
+};
+const HelpIcon = React.forwardRef(
+  function HelpIcon2(props, ref) {
+    const {
+      title,
+      supportingText,
+      tooltipPlacement = "top-no-arrow",
+      iconSize = 20,
+      iconColor
+    } = props;
+    const theme = useTheme();
+    const { placement, arrow } = mapPlacement(tooltipPlacement);
+    const defaultColor = theme.palette.gray?.[500] ?? theme.palette.text.secondary;
+    const finalColor = iconColor ?? defaultColor;
+    return /* @__PURE__ */ jsx(Box, { ref, sx: { display: "inline-flex" }, children: /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        title,
+        supportingText,
+        theme: "dark",
+        placement,
+        arrow,
+        children: /* @__PURE__ */ jsx(Icon, { name: "HelpCircle", size: iconSize, color: finalColor })
+      }
+    ) });
+  }
+);
+export {
+  HelpIcon
+};
+//# sourceMappingURL=HelpIcon.js.map

package/dist/components/HelpIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpIcon.js","sources":["../../src/components/HelpIcon.tsx"],"sourcesContent":["// src/components/zenith/HelpIcon.tsx\nimport * as React from 'react'\nimport Box from '@mui/material/Box'\nimport { useTheme } from '@mui/material/styles'\nimport { Icon } from './Icon'\nimport { Tooltip } from './Tooltip'\nimport type { TooltipPlacement } from './Tooltip'\n\nexport type HelpIconTooltipPlacement =\n  | 'top-no-arrow'\n  | 'top-center'\n  | 'top-right'\n  | 'top-left'\n  | 'bottom-center'\n  | 'bottom-right'\n  | 'bottom-left'\n  | 'right'\n  | 'left'\n\nexport interface HelpIconProps {\n  title: string\n  supportingText?: string\n  tooltipPlacement?: HelpIconTooltipPlacement\n  iconSize?: number\n  iconColor?: string\n}\n\n// Map HelpIcon placement to Tooltip placement and arrow\nconst mapPlacement = (\n  placement: HelpIconTooltipPlacement,\n): { placement: TooltipPlacement; arrow: boolean } => {\n  switch (placement) {\n    case 'top-no-arrow':\n      return { placement: 'top', arrow: false }\n    case 'top-center':\n      return { placement: 'top', arrow: true }\n    case 'top-right':\n      return { placement: 'top-end', arrow: true }\n    case 'top-left':\n      return { placement: 'top-start', arrow: true }\n    case 'bottom-center':\n      return { placement: 'bottom', arrow: true }\n    case 'bottom-right':\n      return { placement: 'bottom-end', arrow: true }\n    case 'bottom-left':\n      return { placement: 'bottom-start', arrow: true }\n    case 'right':\n      return { placement: 'right', arrow: true }\n    case 'left':\n      return { placement: 'left', arrow: true }\n    default:\n      return { placement: 'top', arrow: false }\n  }\n}\n\nexport const HelpIcon = React.forwardRef<HTMLDivElement, HelpIconProps>(\n  function HelpIcon(props, ref) {\n    const {\n      title,\n      supportingText,\n      tooltipPlacement = 'top-no-arrow',\n      iconSize = 20,\n      iconColor,\n    } = props\n\n    const theme = useTheme()\n    const { placement, arrow } = mapPlacement(tooltipPlacement)\n    const defaultColor = theme.palette.gray?.[500] ?? theme.palette.text.secondary\n    const finalColor = iconColor ?? defaultColor\n\n    return (\n      <Box ref={ref} sx={{ display: 'inline-flex' }}>\n        <Tooltip\n          title={title}\n          supportingText={supportingText}\n          theme=\"dark\"\n          placement={placement}\n          arrow={arrow}\n        >\n          <Icon name=\"HelpCircle\" size={iconSize} color={finalColor} />\n        </Tooltip>\n      </Box>\n    )\n  },\n)\n"],"names":["HelpIcon"],"mappings":";;;;;;AA4BA,MAAM,eAAe,CACnB,cACoD;AACpD,UAAQ,WAAA;AAAA,IACN,KAAK;AACH,aAAO,EAAE,WAAW,OAAO,OAAO,MAAA;AAAA,IACpC,KAAK;AACH,aAAO,EAAE,WAAW,OAAO,OAAO,KAAA;AAAA,IACpC,KAAK;AACH,aAAO,EAAE,WAAW,WAAW,OAAO,KAAA;AAAA,IACxC,KAAK;AACH,aAAO,EAAE,WAAW,aAAa,OAAO,KAAA;AAAA,IAC1C,KAAK;AACH,aAAO,EAAE,WAAW,UAAU,OAAO,KAAA;AAAA,IACvC,KAAK;AACH,aAAO,EAAE,WAAW,cAAc,OAAO,KAAA;AAAA,IAC3C,KAAK;AACH,aAAO,EAAE,WAAW,gBAAgB,OAAO,KAAA;AAAA,IAC7C,KAAK;AACH,aAAO,EAAE,WAAW,SAAS,OAAO,KAAA;AAAA,IACtC,KAAK;AACH,aAAO,EAAE,WAAW,QAAQ,OAAO,KAAA;AAAA,IACrC;AACE,aAAO,EAAE,WAAW,OAAO,OAAO,MAAA;AAAA,EAAM;AAE9C;AAEO,MAAM,WAAW,MAAM;AAAA,EAC5B,SAASA,UAAS,OAAO,KAAK;AAC5B,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB,WAAW;AAAA,MACX;AAAA,IAAA,IACE;AAEJ,UAAM,QAAQ,SAAA;AACd,UAAM,EAAE,WAAW,UAAU,aAAa,gBAAgB;AAC1D,UAAM,eAAe,MAAM,QAAQ,OAAO,GAAG,KAAK,MAAM,QAAQ,KAAK;AACrE,UAAM,aAAa,aAAa;AAEhC,+BACG,KAAA,EAAI,KAAU,IAAI,EAAE,SAAS,iBAC5B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QAEA,8BAAC,MAAA,EAAK,MAAK,cAAa,MAAM,UAAU,OAAO,WAAA,CAAY;AAAA,MAAA;AAAA,IAAA,GAE/D;AAAA,EAEJ;AACF;"}

package/dist/components/Icon.d.ts

@@ -0,0 +1,32 @@
+import { BoxProps } from '@mui/material/Box';
+import * as React from 'react';
+export type SupportedIconName = string;
+type IconNameProp = {
+    name: SupportedIconName;
+    iconId?: never;
+} | {
+    iconId: SupportedIconName;
+    name?: never;
+};
+export type IconProps = IconNameProp & {
+    size?: number;
+    color?: string;
+    rotate?: number;
+} & Omit<BoxProps, 'color'>;
+export declare const Icon: React.ForwardRefExoticComponent<(Omit<{
+    name: SupportedIconName;
+    iconId?: never;
+} & {
+    size?: number;
+    color?: string;
+    rotate?: number;
+} & Omit<BoxProps, "color">, "ref"> | Omit<{
+    iconId: SupportedIconName;
+    name?: never;
+} & {
+    size?: number;
+    color?: string;
+    rotate?: number;
+} & Omit<BoxProps, "color">, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Icon.d.ts.map

package/dist/components/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/components/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAMtD,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAA;AAEtC,KAAK,YAAY,GACb;IAAE,IAAI,EAAE,iBAAiB,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GAC3C;IAAE,MAAM,EAAE,iBAAiB,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAA;AAE/C,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG;IACrC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;AAa3B,eAAO,MAAM,IAAI;UApBL,iBAAiB;aAAW,KAAK;;WAIpC,MAAM;YACL,MAAM;aACL,MAAM;;YALH,iBAAiB;WAAS,KAAK;;WAGpC,MAAM;YACL,MAAM;aACL,MAAM;2EAwEf,CAAA"}

package/dist/components/Icon.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useMemo, Suspense } from "react";
+import { loadIcon } from "../utils/iconLoader.js";
+import Box from "../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+const IconPlaceholder = ({ size = 24 }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      width: size,
+      height: size,
+      display: "inline-block"
+    }
+  }
+);
+const Icon = React.forwardRef(function Icon2(props, ref) {
+  const {
+    size = 24,
+    color,
+    rotate,
+    sx,
+    name,
+    iconId,
+    ...boxProps
+  } = props;
+  const iconName = iconId ?? name;
+  const IconComponent = useMemo(() => {
+    return iconName ? loadIcon(iconName) : null;
+  }, [iconName]);
+  if (!IconComponent) {
+    console.warn(`Icon "${iconName}" not found`);
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      sx: [
+        {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: size,
+          height: size,
+          lineHeight: 0,
+          ...color ? { color } : null,
+          ...rotate ? { transform: `rotate(${rotate}deg)`, transformOrigin: "center" } : null,
+          "& span": {
+            display: "inline-flex",
+            width: "100%",
+            height: "100%"
+          },
+          "& svg": {
+            display: "block",
+            width: "100%",
+            height: "100%"
+          }
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      ...boxProps,
+      children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(IconPlaceholder, { size }), children: /* @__PURE__ */ jsx(IconComponent, {}) })
+    }
+  );
+});
+export {
+  Icon
+};
+//# sourceMappingURL=Icon.js.map

package/dist/components/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../src/components/Icon.tsx"],"sourcesContent":["// src/components/zenith/Icon.tsx - Icon\n// Optimized with dynamic loading for code splitting\nimport * as React from 'react'\nimport { Suspense, useMemo } from 'react'\nimport Box, { type BoxProps } from '@mui/material/Box'\nimport { loadIcon } from '../utils/iconLoader'\n\n// NOTE:\n// Zenith Storybook exposes hundreds of icon names (PascalCase like \"Folder\", \"ActivityHeart\", etc.).\n// For pixel-perfect parity we accept any string and resolve via `iconLoader` (Vite glob).\nexport type SupportedIconName = string\n\ntype IconNameProp =\n  | { name: SupportedIconName; iconId?: never }\n  | { iconId: SupportedIconName; name?: never }\n\nexport type IconProps = IconNameProp & {\n  size?: number\n  color?: string\n  rotate?: number\n} & Omit<BoxProps, 'color'>\n\n// Placeholder component for loading state\nconst IconPlaceholder = ({ size = 24 }: { size?: number }) => (\n  <Box\n    sx={{\n      width: size,\n      height: size,\n      display: 'inline-block',\n    }}\n  />\n)\n\nexport const Icon = React.forwardRef<HTMLDivElement, IconProps>(function Icon(\n  props,\n  ref,\n) {\n  const {\n    size = 24,\n    color,\n    rotate,\n    sx,\n    name,\n    iconId,\n    ...boxProps\n  } = props as IconProps & { name?: SupportedIconName; iconId?: SupportedIconName }\n  const iconName = iconId ?? name\n\n  // Dynamically load icon component\n  const IconComponent = useMemo(() => {\n    return iconName ? loadIcon(iconName) : null\n  }, [iconName])\n\n  if (!IconComponent) {\n    console.warn(`Icon \"${iconName}\" not found`)\n    return null\n  }\n\n  return (\n    <Box\n      ref={ref}\n      sx={[\n        {\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: size,\n          height: size,\n          lineHeight: 0,\n          ...(color ? { color } : null),\n          ...(rotate ? { transform: `rotate(${rotate}deg)`, transformOrigin: 'center' } : null),\n          '& span': {\n            display: 'inline-flex',\n            width: '100%',\n            height: '100%',\n          },\n          '& svg': {\n            display: 'block',\n            width: '100%',\n            height: '100%',\n          },\n        },\n        ...(Array.isArray(sx) ? sx : [sx]),\n      ]}\n      {...boxProps}\n    >\n      <Suspense fallback={<IconPlaceholder size={size} />}>\n        <IconComponent />\n      </Suspense>\n    </Box>\n  )\n})\n"],"names":["Icon"],"mappings":";;;;;AAuBA,MAAM,kBAAkB,CAAC,EAAE,OAAO,SAChC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,IAAI;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AACF;AAGK,MAAM,OAAO,MAAM,WAAsC,SAASA,MACvE,OACA,KACA;AACA,QAAM;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,WAAW,UAAU;AAG3B,QAAM,gBAAgB,QAAQ,MAAM;AAClC,WAAO,WAAW,SAAS,QAAQ,IAAI;AAAA,EACzC,GAAG,CAAC,QAAQ,CAAC;AAEb,MAAI,CAAC,eAAe;AAClB,YAAQ,KAAK,SAAS,QAAQ,aAAa;AAC3C,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,QACF;AAAA,UACE,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,GAAI,QAAQ,EAAE,MAAA,IAAU;AAAA,UACxB,GAAI,SAAS,EAAE,WAAW,UAAU,MAAM,QAAQ,iBAAiB,SAAA,IAAa;AAAA,UAChF,UAAU;AAAA,YACR,SAAS;AAAA,YACT,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,UAEV,SAAS;AAAA,YACP,SAAS;AAAA,YACT,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,QAEF,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,CAAC,EAAE;AAAA,MAAA;AAAA,MAEjC,GAAG;AAAA,MAEJ,UAAA,oBAAC,YAAS,UAAU,oBAAC,mBAAgB,KAAA,CAAY,GAC/C,UAAA,oBAAC,eAAA,CAAA,CAAc,EAAA,CACjB;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/components/InlineCTAs.d.ts

@@ -0,0 +1,46 @@
+import { InputFieldProps as InputProps } from './forms/InputField';
+import * as React from 'react';
+export interface InlineCTAItem {
+    label: string;
+    onClick?: () => void;
+    variant?: any;
+    size?: any;
+    [key: string]: any;
+}
+export interface InlineCTAsProps {
+    /** Main title text */
+    headerText?: string;
+    /** Description or supporting text */
+    supportingText?: string;
+    /** Array of CTA buttons */
+    inlineCTAsItem?: InlineCTAItem[];
+    /** Properties for an optional input field */
+    inputFieldProps?: InputProps;
+    /** Properties for a featured icon */
+    featuredIconProps?: {
+        icon: string;
+        color?: string;
+    };
+    /** Properties for a file type icon */
+    fileTypeIconProps?: {
+        icon: string;
+    };
+    /** Properties for a payment icon */
+    paymentIconProps?: {
+        icon: string;
+    };
+    /** Properties for an image */
+    imageProps?: {
+        src: string;
+        alt?: string;
+        width?: number;
+        height?: number;
+    };
+    /** Alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Custom sx styles */
+    sx?: any;
+}
+export declare const InlineCTAs: React.FC<InlineCTAsProps>;
+export default InlineCTAs;
+//# sourceMappingURL=InlineCTAs.d.ts.map

package/dist/components/InlineCTAs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineCTAs.d.ts","sourceRoot":"","sources":["../../src/components/InlineCTAs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAuB,KAAK,eAAe,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAE5F,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,GAAG,CAAA;IACb,IAAI,CAAC,EAAE,GAAG,CAAA;IACV,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,aAAa,EAAE,CAAA;IAChC,6CAA6C;IAC7C,eAAe,CAAC,EAAE,UAAU,CAAA;IAC5B,qCAAqC;IACrC,iBAAiB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACpD,sCAAsC;IACtC,iBAAiB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACpC,oCAAoC;IACpC,gBAAgB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACnC,8BAA8B;IAC9B,UAAU,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3E,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,uBAAuB;IACvB,EAAE,CAAC,EAAE,GAAG,CAAA;CACT;AAsCD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoGhD,CAAA;AAED,eAAe,UAAU,CAAA"}