@kenpan/zds-r8f3v1 0.3.0 → 0.4.0

package/README.md

@@ -1,14 +1,15 @@
 # ZDS Component Library
 
-A modern React component library built with MUI (Material-UI) and TypeScript. Designed for building beautiful, accessible, and consistent user interfaces.
+A modern React component library built with MUI (Material-UI) and TypeScript. Designed for building beautiful, accessible, and consistent user interfaces. Optimized for Figma Make integration.
 
 ## Features
 
 - **60+ Production-Ready Components** - Buttons, forms, dialogs, tables, navigation, and more
+- **1194 Icons** - Comprehensive icon library as React components
 - **MUI Foundation** - Built on Material-UI for robust theming and accessibility
 - **TypeScript First** - Full type safety with comprehensive type exports
 - **Design Tokens** - Consistent spacing, colors, typography, and shadows
-- **Figma Make Ready** - Optimized for integration with Figma Make
+- **Figma Make Ready** - Optimized with guidelines for AI-powered code generation
 - **Accessible** - WCAG 2.1 compliant focus states and keyboard navigation
 
 ## Installation
@@ -17,6 +18,19 @@ A modern React component library built with MUI (Material-UI) and TypeScript. De
 npm install @kenpan/zds-r8f3v1 @mui/material @emotion/react @emotion/styled
 ```
 
+### Peer Dependencies
+
+```json
+{
+  "@emotion/react": "^11.0.0",
+  "@emotion/styled": "^11.0.0",
+  "@mui/material": "^6.0.0 || ^7.0.0",
+  "@mui/x-data-grid": "^7.0.0 || ^8.0.0",
+  "react": "^18.0.0 || ^19.0.0",
+  "react-dom": "^18.0.0 || ^19.0.0"
+}
+```
+
 ## Quick Start
 
 ### 1. Set up the Theme Provider
@@ -39,40 +53,64 @@ function App() {
 ### 2. Import and Use Components
 
 ```tsx
-import { Button, Card, CardHeader, Badge } from '@kenpan/zds-r8f3v1'
+import { Button, Card, CardHeader, Badge, Alert } from '@kenpan/zds-r8f3v1'
+import { PlusIcon } from '@kenpan/zds-r8f3v1/icons'
 
 function MyComponent() {
   return (
     <Card>
       <CardHeader 
-        title="Welcome" 
-        trailing={<Badge status="success">Active</Badge>}
+        title="Dashboard" 
+        actions={
+          <Button variant="primary" iconLeading={<PlusIcon size={20} />}>
+            Add Item
+          </Button>
+        }
       />
-      <Button variant="primary">Get Started</Button>
+      <Alert color="success">Welcome to ZDS!</Alert>
     </Card>
   )
 }
 ```
 
+## Package Exports
+
+```tsx
+// Main components
+import { Button, Card, Alert, Dialog, Table } from '@kenpan/zds-r8f3v1'
+
+// Theme and design tokens
+import { theme, gray, primaryScale, typography } from '@kenpan/zds-r8f3v1/theme'
+
+// Icons (1194 icons available)
+import { PlusIcon, ChevronDownIcon, SearchSmIcon } from '@kenpan/zds-r8f3v1/icons'
+```
+
 ## Component Categories
 
 ### Base Components
 - Button, ButtonGroup
 - Card, CardHeader
 - Badge, StatusBadge, IndicatorBadge
-- Tag, Tooltip, Icon
+- Tag, Dot, Tooltip, Icon
 - Accordion, AccordionItem
 
 ### Form Components
-- InputField, InputTextarea
+- InputField, InputNumber, InputSearch
+- InputDropdown
 - Checkbox, Radio, Switch
-- Slider, DatePicker
-- FileUpload, DropZone
+- Slider
+
+### Feedback Components
+- Alert
+- Toast
+- EmptyState
+- Skeleton
 
 ### Layout Components
 - PageHeader, SectionHeader
-- FooterNavigation
 - ContentDivider
+- BackgroundOverlay
 
 ### Navigation Components
 - HeaderNavigation
@@ -81,23 +119,48 @@ function MyComponent() {
 - SlideoutMenu
 
 ### Overlay Components
-- Dialog, DialogHeader, DialogContent, DialogFooter
+- Dialog, DialogHeader, DialogFooter
 - Popover, PopoverHeader, PopoverContent, PopoverFooter
-- Toast, BackgroundOverlay
 - Dropdown, DropdownMenu
 
 ### Data Display Components
 - Table, TableCell
-- Skeleton, EmptyState
 - ProgressBar, ProgressIndicator, LoadingIndicator
-- Scorecard, Tile, Carousel
+- Scorecard, Tile, DonutChart
 - ActivityFeed, SelectionGroup
+- Carousel
 
 ### Product Components
 - ProductCard
 - ProductBadges, ProductDescription
 
-## Theme Customization
+## Icons
+
+The library includes 1194 pre-built icon components:
+
+```tsx
+import { 
+  // Navigation
+  ChevronDownIcon, ChevronUpIcon, ChevronLeftIcon, ChevronRightIcon,
+  ArrowLeftIcon, ArrowRightIcon,
+  
+  // Actions
+  PlusIcon, MinusIcon, XCloseIcon, CheckIcon,
+  EditOneIcon, TrashOneIcon, SearchSmIcon,
+  
+  // Status
+  CheckCircleIcon, AlertCircleIcon, InfoCircleIcon, HelpCircleIcon,
+  
+  // UI
+  HomeLineIcon, SettingsOneIcon, UserOneIcon, BellOneIcon,
+} from '@kenpan/zds-r8f3v1/icons'
+
+// Usage
+<PlusIcon size={24} />
+<SearchSmIcon size={16} color="#376BFD" />
+```
+
+## Theme & Design Tokens
 
 Access design tokens through the theme:
 
@@ -110,8 +173,19 @@ function MyComponent() {
   return (
     <Box
       sx={{
+        // Colors
         color: theme.palette.primary.main,
-        padding: theme.spacing(2),
+        bgcolor: theme.palette.grey[50],
+        
+        // Spacing (4px base)
+        padding: theme.spacing(4), // 16px
+        gap: theme.spacing(2), // 8px
+        
+        // Typography
+        fontSize: 14,
+        fontWeight: 500,
+        
+        // Shadows
         boxShadow: theme.shadows[1],
       }}
     >
@@ -121,24 +195,67 @@ function MyComponent() {
 }
 ```
 
+### Color Palette
+
+| Color | Main | Usage |
+|-------|------|-------|
+| Primary | `#376BFD` | Primary actions, links |
+| Success | `#17B26A` | Success states |
+| Error | `#F04438` | Error states |
+| Warning | `#F79009` | Warning states |
+| Gray | `#697586` | Secondary text, borders |
+
 ## Figma Make Integration
 
-This library is optimized for Figma Make. After publishing to npm:
+This library is optimized for Figma Make with comprehensive guidelines:
 
 1. Create a new Figma Make file
-2. Install the package: `npm install @kenpan/zds-r8f3v1`
-3. The AI will automatically use the guidelines to understand component usage
+2. Ask the AI to install: `install @kenpan/zds-r8f3v1`
+3. The AI reads `guidelines/` to understand component usage
+
+### Guidelines Structure
 
-See the `guidelines/` directory for component documentation that Figma Make uses.
+```
+guidelines/
+├── Guidelines.md              # Main entry point
+├── overview-components.md     # Component overview
+├── overview-icons.md          # Icon system
+├── design-tokens/
+│   ├── colors.md             # Color tokens
+│   ├── typography.md         # Typography tokens
+│   └── spacing.md            # Spacing system
+└── components/
+    ├── button.md
+    ├── dialog.md
+    ├── forms.md
+    ├── table.md
+    ├── alert.md
+    ├── card.md
+    ├── badge.md
+    ├── navigation.md
+    └── layout.md
+```
 
 ## Documentation
 
-- [Overview](./guidelines/overview.md) - Getting started guide
-- [Design Tokens](./guidelines/tokens.md) - Colors, typography, spacing
-- [Button](./guidelines/components/button.md) - Button variants and usage
-- [Forms](./guidelines/components/forms.md) - Form component patterns
-- [Dialog](./guidelines/components/dialog.md) - Modal dialog patterns
-- [Table](./guidelines/components/table.md) - Data table patterns
+- [Guidelines.md](./guidelines/Guidelines.md) - Main entry point for Figma Make
+- [overview-components.md](./guidelines/overview-components.md) - Component overview
+- [overview-icons.md](./guidelines/overview-icons.md) - Icon system guide
+- [design-tokens/colors.md](./guidelines/design-tokens/colors.md) - Color tokens
+- [design-tokens/typography.md](./guidelines/design-tokens/typography.md) - Typography
+- [design-tokens/spacing.md](./guidelines/design-tokens/spacing.md) - Spacing system
+
+### Component Guidelines
+
+- [Button](./guidelines/components/button.md)
+- [Dialog](./guidelines/components/dialog.md)
+- [Forms](./guidelines/components/forms.md)
+- [Table](./guidelines/components/table.md)
+- [Alert](./guidelines/components/alert.md)
+- [Card](./guidelines/components/card.md)
+- [Badge](./guidelines/components/badge.md)
+- [Navigation](./guidelines/components/navigation.md)
+- [Layout](./guidelines/components/layout.md)
 
 ## Development
 
@@ -146,6 +263,9 @@ See the `guidelines/` directory for component documentation that Figma Make uses
 # Install dependencies
 npm install
 
+# Generate icons
+npm run generate:icons
+
 # Build the library
 npm run build
 

package/dist/_virtual/index.js

@@ -1,8 +1,6 @@
-import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
-import { __require as requirePropTypes } from "../packages/zenith-ui/node_modules/prop-types/index.js";
-var propTypesExports = /* @__PURE__ */ requirePropTypes();
-const PropTypes = /* @__PURE__ */ getDefaultExportFromCjs(propTypesExports);
+import { __require as requireReactIs } from "../node_modules/react-is/index.js";
+var reactIsExports = /* @__PURE__ */ requireReactIs();
 export {
-  PropTypes as default
+  reactIsExports as r
 };
 //# sourceMappingURL=index.js.map

package/dist/_virtual/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/_virtual/index2.js

@@ -1,6 +1,5 @@
-import { __require as requireReactIs } from "../packages/zenith-ui/node_modules/react-is/index.js";
-var reactIsExports = /* @__PURE__ */ requireReactIs();
+var propTypes = { exports: {} };
 export {
-  reactIsExports as r
+  propTypes as __module
 };
 //# sourceMappingURL=index2.js.map

package/dist/_virtual/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/index3.js

@@ -1,5 +1,8 @@
-var propTypes = { exports: {} };
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+import { __require as requirePropTypes } from "../node_modules/prop-types/index.js";
+var propTypesExports = /* @__PURE__ */ requirePropTypes();
+const PropTypes = /* @__PURE__ */ getDefaultExportFromCjs(propTypesExports);
 export {
-  propTypes as __module
+  PropTypes as default
 };
 //# sourceMappingURL=index3.js.map

package/dist/_virtual/index3.js.map

@@ -1 +1 @@
-{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/Accordion.js

@@ -2,10 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon } from "./Icon.js";
 import { HelpIcon } from "./HelpIcon.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";
-import Typography from "../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
-import Collapse from "../packages/zenith-ui/node_modules/@mui/material/esm/Collapse/Collapse.js";
+import useTheme from "../node_modules/@mui/material/esm/styles/useTheme.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
+import Typography from "../node_modules/@mui/material/esm/Typography/Typography.js";
+import Collapse from "../node_modules/@mui/material/esm/Collapse/Collapse.js";
 function getPaddingY(size) {
   return size === "sm" ? 4 : 5;
 }

package/dist/components/ActionBar.js

@@ -5,10 +5,10 @@ import { Tooltip } from "./Tooltip.js";
 import { DropdownMenu } from "./DropdownMenu.js";
 import { Icon } from "./Icon.js";
 import { Badge } from "./badge/Badge.js";
-import useTheme from "../packages/zenith-ui/node_modules/@mui/material/esm/styles/useTheme.js";
-import Stack from "../packages/zenith-ui/node_modules/@mui/material/esm/Stack/Stack.js";
-import Typography from "../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
-import IconButton from "../packages/zenith-ui/node_modules/@mui/material/esm/IconButton/IconButton.js";
+import useTheme from "../node_modules/@mui/material/esm/styles/useTheme.js";
+import Stack from "../node_modules/@mui/material/esm/Stack/Stack.js";
+import Typography from "../node_modules/@mui/material/esm/Typography/Typography.js";
+import IconButton from "../node_modules/@mui/material/esm/IconButton/IconButton.js";
 const BREAKPOINTS = {
   sm: 480,
   md: 768,

package/dist/components/ActivityFeed.js

@@ -2,11 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Tag } from "./Tag.js";
 import { Icon } from "./Icon.js";
-import Box from "../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
-import useTheme from "../packages/zenith-ui/node_modules/@mui/material/esm/styles/useTheme.js";
-import Typography from "../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
+import useTheme from "../node_modules/@mui/material/esm/styles/useTheme.js";
+import Typography from "../node_modules/@mui/material/esm/Typography/Typography.js";
 import { Avatar } from "./avatar/Avatar.js";
-import styled from "../packages/zenith-ui/node_modules/@mui/material/esm/styles/styled.js";
+import styled from "../node_modules/@mui/material/esm/styles/styled.js";
 const ItemContainer = styled(Box)(({ theme }) => ({
   display: "flex",
   position: "relative",

package/dist/components/Alert.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import useMediaQuery from "../packages/zenith-ui/node_modules/@mui/material/esm/useMediaQuery/index.js";
+import useMediaQuery from "../node_modules/@mui/material/esm/useMediaQuery/index.js";
 import { Button } from "./Button.js";
 import { Badge } from "./badge/Badge.js";
 import { Icon } from "./Icon.js";
 import { overlay } from "../utils/colorUtils.js";
-import useTheme from "../packages/zenith-ui/node_modules/@mui/material/esm/styles/useTheme.js";
-import IconButton from "../packages/zenith-ui/node_modules/@mui/material/esm/IconButton/IconButton.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 Collapse from "../packages/zenith-ui/node_modules/@mui/material/esm/Collapse/Collapse.js";
+import useTheme from "../node_modules/@mui/material/esm/styles/useTheme.js";
+import IconButton from "../node_modules/@mui/material/esm/IconButton/IconButton.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
+import Typography from "../node_modules/@mui/material/esm/Typography/Typography.js";
+import Collapse from "../node_modules/@mui/material/esm/Collapse/Collapse.js";
 const DS_COLORS = {
   surface: "#FFFFFF",
   primaryContainerOpacity12: "rgba(178, 221, 255, 0.12)"

package/dist/components/BackgroundOverlay.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
-import useTheme from "../packages/zenith-ui/node_modules/@mui/material/esm/styles/useTheme.js";
-import styled from "../packages/zenith-ui/node_modules/@mui/material/esm/styles/styled.js";
-import Backdrop from "../packages/zenith-ui/node_modules/@mui/material/esm/Backdrop/Backdrop.js";
+import useTheme from "../node_modules/@mui/material/esm/styles/useTheme.js";
+import styled from "../node_modules/@mui/material/esm/styles/styled.js";
+import Backdrop from "../node_modules/@mui/material/esm/Backdrop/Backdrop.js";
 const StyledBackdrop = styled(Backdrop, {
   shouldForwardProp: (prop) => prop !== "variant" && prop !== "blurLevel"
 })(({ theme, variant, blurLevel }) => {

package/dist/components/BaseDropdownListItem.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import useTheme from "../packages/zenith-ui/node_modules/@mui/material/esm/styles/useTheme.js";
-import MenuItem from "../packages/zenith-ui/node_modules/@mui/material/esm/MenuItem/MenuItem.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 ListItemText from "../packages/zenith-ui/node_modules/@mui/material/esm/ListItemText/ListItemText.js";
-import ListItemIcon from "../packages/zenith-ui/node_modules/@mui/material/esm/ListItemIcon/ListItemIcon.js";
+import useTheme from "../node_modules/@mui/material/esm/styles/useTheme.js";
+import MenuItem from "../node_modules/@mui/material/esm/MenuItem/MenuItem.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
+import Typography from "../node_modules/@mui/material/esm/Typography/Typography.js";
+import ListItemText from "../node_modules/@mui/material/esm/ListItemText/ListItemText.js";
+import ListItemIcon from "../node_modules/@mui/material/esm/ListItemIcon/ListItemIcon.js";
 import { Avatar } from "./avatar/Avatar.js";
 const getDesignTokenColors = (theme) => {
   const onprimary = theme.palette.dsTokens?.semantic?.onprimary ?? theme.palette.ds?.onprimary ?? theme.palette.common.white;

package/dist/components/BasePaginationNumber.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { getDesignTokens } from "../utils/themeUtils.js";
-import ButtonBase from "../packages/zenith-ui/node_modules/@mui/material/esm/ButtonBase/ButtonBase.js";
-import Box from "../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import ButtonBase from "../node_modules/@mui/material/esm/ButtonBase/ButtonBase.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
 const BasePaginationNumber = React.forwardRef(function BasePaginationNumber2(props, ref) {
   const {
     children,

package/dist/components/Button.js

@@ -2,9 +2,9 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { Dot as Dot$1 } from "./Dot.js";
 import { Badge } from "./badge/Badge.js";
-import Button$1 from "../packages/zenith-ui/node_modules/@mui/material/esm/Button/Button.js";
-import CircularProgress from "../packages/zenith-ui/node_modules/@mui/material/esm/CircularProgress/CircularProgress.js";
-import Box from "../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import Button$1 from "../node_modules/@mui/material/esm/Button/Button.js";
+import CircularProgress from "../node_modules/@mui/material/esm/CircularProgress/CircularProgress.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
 const Button = React.forwardRef(
   function Button2(props, ref) {
     const {

package/dist/components/ButtonGroup.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Button } from "./Button.js";
 import { Icon } from "./Icon.js";
 import { Dropdown } from "./Dropdown.js";
-import Box from "../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
 const getButtonVariant = (hierarchy, current) => {
   if (hierarchy === "primary") {
     return "primary";

package/dist/components/Card.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import Paper from "../packages/zenith-ui/node_modules/@mui/material/esm/Paper/Paper.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 Paper from "../node_modules/@mui/material/esm/Paper/Paper.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
+import Typography from "../node_modules/@mui/material/esm/Typography/Typography.js";
 function Card({
   title,
   subtitle,

package/dist/components/CardHeader.js

@@ -3,11 +3,11 @@ import "react";
 import { HelpIcon } from "./HelpIcon.js";
 import { BadgePillColor } from "./badge/BadgePillColor.js";
 import { Dropdown } from "./Dropdown.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";
+import useTheme from "../node_modules/@mui/material/esm/styles/useTheme.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
 import { Avatar } from "./avatar/Avatar.js";
-import Typography from "../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
-import Divider from "../packages/zenith-ui/node_modules/@mui/material/esm/Divider/Divider.js";
+import Typography from "../node_modules/@mui/material/esm/Typography/Typography.js";
+import Divider from "../node_modules/@mui/material/esm/Divider/Divider.js";
 function CardHeader({
   title,
   supportingText,

package/dist/components/ContentDivider.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-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 Divider from "../packages/zenith-ui/node_modules/@mui/material/esm/Divider/Divider.js";
-import styled from "../packages/zenith-ui/node_modules/@mui/material/esm/styles/styled.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
+import Typography from "../node_modules/@mui/material/esm/Typography/Typography.js";
+import Divider from "../node_modules/@mui/material/esm/Divider/Divider.js";
+import styled from "../node_modules/@mui/material/esm/styles/styled.js";
 const BackgroundFillBase = styled(Box)(({ theme }) => ({
   width: "100%",
   backgroundColor: theme.palette.gray?.[50] || "#F9FAFB",

package/dist/components/Dot.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import Box from "../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
 const getSizeConfig = (theme, size) => {
   switch (size) {
     case "sm":

package/dist/components/Dropdown.js

@@ -3,12 +3,12 @@ import * as React from "react";
 import { Button } from "./Button.js";
 import { Icon } from "./Icon.js";
 import { BaseDropdownListItem } from "./BaseDropdownListItem.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";
-import Menu from "../packages/zenith-ui/node_modules/@mui/material/esm/Menu/Menu.js";
-import Divider from "../packages/zenith-ui/node_modules/@mui/material/esm/Divider/Divider.js";
+import useTheme from "../node_modules/@mui/material/esm/styles/useTheme.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
+import Menu from "../node_modules/@mui/material/esm/Menu/Menu.js";
+import Divider from "../node_modules/@mui/material/esm/Divider/Divider.js";
 import { Avatar } from "./avatar/Avatar.js";
-import Typography from "../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
+import Typography from "../node_modules/@mui/material/esm/Typography/Typography.js";
 const getDesignTokenColors = (theme) => {
   const onprimary = theme.palette.dsTokens?.semantic?.onprimary ?? theme.palette.ds?.onprimary ?? "#FFFFFF";
   const outlinevariant = theme.palette.dsTokens?.semantic?.outlinevariant ?? theme.palette.buttonTokens?.outlineVariant ?? theme.palette.ds?.outlinevariant ?? "#D4DCE7";

package/dist/components/DropdownMenu.js

@@ -6,15 +6,15 @@ import { BadgePillColor } from "./badge/BadgePillColor.js";
 import { Checkbox } from "./forms/Checkbox.js";
 import { overlay } from "../utils/colorUtils.js";
 import { BaseDropdownListItem } from "./BaseDropdownListItem.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";
-import Menu from "../packages/zenith-ui/node_modules/@mui/material/esm/Menu/Menu.js";
-import Divider from "../packages/zenith-ui/node_modules/@mui/material/esm/Divider/Divider.js";
+import useTheme from "../node_modules/@mui/material/esm/styles/useTheme.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
+import Menu from "../node_modules/@mui/material/esm/Menu/Menu.js";
+import Divider from "../node_modules/@mui/material/esm/Divider/Divider.js";
 import { Avatar } from "./avatar/Avatar.js";
-import Typography from "../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
-import MenuItem from "../packages/zenith-ui/node_modules/@mui/material/esm/MenuItem/MenuItem.js";
-import ListItemIcon from "../packages/zenith-ui/node_modules/@mui/material/esm/ListItemIcon/ListItemIcon.js";
-import ListItemText from "../packages/zenith-ui/node_modules/@mui/material/esm/ListItemText/ListItemText.js";
+import Typography from "../node_modules/@mui/material/esm/Typography/Typography.js";
+import MenuItem from "../node_modules/@mui/material/esm/MenuItem/MenuItem.js";
+import ListItemIcon from "../node_modules/@mui/material/esm/ListItemIcon/ListItemIcon.js";
+import ListItemText from "../node_modules/@mui/material/esm/ListItemText/ListItemText.js";
 const ZENITH_MENU_SHADOW = "rgba(18, 25, 38, 0.03) 0px 4px 6px -2px, rgba(18, 25, 38, 0.08) 0px 12px 16px -4px";
 const ZENITH_HOVER_BG = "#F8FAFC";
 const ZENITH_DESTRUCTIVE = "#B42318";

package/dist/components/EmptyState.js

@@ -2,9 +2,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Button } from "./Button.js";
 import { FeaturedIcon } from "./FeaturedIcon.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 styled from "../packages/zenith-ui/node_modules/@mui/material/esm/styles/styled.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
+import Typography from "../node_modules/@mui/material/esm/Typography/Typography.js";
+import styled from "../node_modules/@mui/material/esm/styles/styled.js";
 const MediaContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== "type" && prop !== "alignment" && prop !== "emptyStateSize"
 })(({ theme, type, alignment, emptyStateSize }) => ({

package/dist/components/FeaturedIcon.js

@@ -1,7 +1,7 @@
 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";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
 const colorMap = {
   error: { bg: "#FEF3F2", border: "#FEE4E2", icon: "#D92D20" },
   gray: { bg: "#F9FAFB", border: "#EAECF0", icon: "#667085" },

package/dist/components/FileUpload.js

@@ -2,10 +2,10 @@ 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 Box from "../node_modules/@mui/material/esm/Box/Box.js";
+import Typography from "../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";
+import styled from "../node_modules/@mui/material/esm/styles/styled.js";
 const FileItemContainer = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",

package/dist/components/HelpIcon.js

@@ -2,8 +2,8 @@ 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";
+import useTheme from "../node_modules/@mui/material/esm/styles/useTheme.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
 const mapPlacement = (placement) => {
   switch (placement) {
     case "top-no-arrow":

package/dist/components/Icon.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { getIcon } from "../icons/generated/iconMap.js";
-import Box from "../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import Box from "../node_modules/@mui/material/esm/Box/Box.js";
 const iconAliases = {
   insights: "Insight",
   Insights: "Insight"