@kenpan/zds-r8f3v1 0.2.0 → 0.3.0

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/Step/Step.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { clsx } from "../../../../clsx/dist/clsx.js";
 import StepperContext from "../Stepper/StepperContext.js";
 import StepContext from "./StepContext.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/StepConnector/StepConnector.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { clsx } from "../../../../clsx/dist/clsx.js";
 import memoTheme from "../utils/memoTheme.js";
 import StepperContext from "../Stepper/StepperContext.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/StepIcon/StepIcon.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { clsx } from "../../../../clsx/dist/clsx.js";
 import memoTheme from "../utils/memoTheme.js";
 import CheckCircle from "../internal/svg-icons/CheckCircle.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/StepLabel/StepLabel.js

@@ -1,5 +1,5 @@
 import { clsx } from "../../../../clsx/dist/clsx.js";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import * as React from "react";
 import StepContext from "../Step/StepContext.js";
 import StepperContext from "../Stepper/StepperContext.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/Stepper/Stepper.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { clsx } from "../../../../clsx/dist/clsx.js";
 import { getStepperUtilityClass } from "./stepperClasses.js";
 import StepperContext from "./StepperContext.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/SvgIcon/SvgIcon.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { clsx } from "../../../../clsx/dist/clsx.js";
 import memoTheme from "../utils/memoTheme.js";
 import { getSvgIconUtilityClass } from "./svgIconClasses.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/Switch/Switch.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { clsx } from "../../../../clsx/dist/clsx.js";
 import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import SwitchBase from "../internal/SwitchBase.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/Tab/Tab.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { clsx } from "../../../../clsx/dist/clsx.js";
 import memoTheme from "../utils/memoTheme.js";
 import tabClasses, { getTabUtilityClass } from "./tabClasses.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/TabScrollButton/TabScrollButton.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { clsx } from "../../../../clsx/dist/clsx.js";
 import { useRtl } from "../../../system/esm/RtlProvider/index.js";
 import KeyboardArrowLeft from "../internal/svg-icons/KeyboardArrowLeft.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/Tabs/ScrollbarSize.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { jsx } from "react/jsx-runtime";
 import useEnhancedEffect from "../../../utils/esm/useEnhancedEffect/useEnhancedEffect.js";
 import debounce from "../../../utils/esm/debounce/debounce.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/Tabs/Tabs.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { r as reactIsExports } from "../../../../../../../_virtual/index.js";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import { r as reactIsExports } from "../../../../../../../_virtual/index2.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { clsx } from "../../../../clsx/dist/clsx.js";
 import { useRtl } from "../../../system/esm/RtlProvider/index.js";
 import useTheme from "../styles/useTheme.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/TextField/TextField.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { clsx } from "../../../../clsx/dist/clsx.js";
 import { getTextFieldUtilityClass } from "./textFieldClasses.js";
 import useSlot from "../utils/useSlot.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/TextareaAutosize/TextareaAutosize.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import useForkRef from "../../../utils/esm/useForkRef/useForkRef.js";
 import ownerWindow from "../../../utils/esm/ownerWindow/ownerWindow.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/Toolbar/Toolbar.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { clsx } from "../../../../clsx/dist/clsx.js";
 import memoTheme from "../utils/memoTheme.js";
 import { getToolbarUtilityClass } from "./toolbarClasses.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { clsx } from "../../../../clsx/dist/clsx.js";
 import { useRtl } from "../../../system/esm/RtlProvider/index.js";
 import useTheme from "../styles/useTheme.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { clsx } from "../../../../clsx/dist/clsx.js";
 import { internal_createExtendSxProp } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/Unstable_TrapFocus/FocusTrap.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import useForkRef from "../../../utils/esm/useForkRef/useForkRef.js";
 import getReactElementRef from "../../../utils/esm/getReactElementRef/getReactElementRef.js";

package/dist/packages/zenith-ui/node_modules/@mui/material/esm/internal/SwitchBase.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 import useFormControl from "../FormControl/useFormControl.js";
 import { getSwitchBaseUtilityClass } from "./switchBaseClasses.js";

package/dist/packages/zenith-ui/node_modules/@mui/system/esm/DefaultPropsProvider/DefaultPropsProvider.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import "react/jsx-runtime";
 import resolveProps from "../../../utils/esm/resolveProps/resolveProps.js";
 const PropsContext = /* @__PURE__ */ React.createContext(void 0);

package/dist/packages/zenith-ui/node_modules/@mui/system/esm/RtlProvider/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import "react/jsx-runtime";
 const RtlContext = /* @__PURE__ */ React.createContext();
 process.env.NODE_ENV !== "production" ? {

package/dist/packages/zenith-ui/node_modules/@mui/system/esm/responsivePropType/responsivePropType.js

@@ -1,4 +1,4 @@
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 const responsivePropType = process.env.NODE_ENV !== "production" ? PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]) : {};
 export {
   responsivePropType as default

package/dist/packages/zenith-ui/node_modules/@mui/utils/esm/deepmerge/deepmerge.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { r as reactIsExports } from "../../../../../../../_virtual/index.js";
+import { r as reactIsExports } from "../../../../../../../_virtual/index2.js";
 function isPlainObject(item) {
   if (typeof item !== "object" || item === null) {
     return false;

package/dist/packages/zenith-ui/node_modules/@mui/utils/esm/elementAcceptingRef/elementAcceptingRef.js

@@ -1,4 +1,4 @@
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import chainPropTypes from "../chainPropTypes/chainPropTypes.js";
 function isClassComponent(elementType) {
   const {

package/dist/packages/zenith-ui/node_modules/@mui/utils/esm/elementTypeAcceptingRef/elementTypeAcceptingRef.js

@@ -1,4 +1,4 @@
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 import * as React from "react";
 import chainPropTypes from "../chainPropTypes/chainPropTypes.js";
 function isClassComponent(elementType) {

package/dist/packages/zenith-ui/node_modules/@mui/utils/esm/getDisplayName/getDisplayName.js

@@ -1,4 +1,4 @@
-import { r as reactIsExports } from "../../../../../../../_virtual/index.js";
+import { r as reactIsExports } from "../../../../../../../_virtual/index2.js";
 function getFunctionComponentName(Component, fallback = "") {
   return Component.displayName || Component.name || fallback;
 }

package/dist/packages/zenith-ui/node_modules/@mui/utils/esm/refType/refType.js

@@ -1,4 +1,4 @@
-import PropTypes from "../../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../../_virtual/index.js";
 const refType = PropTypes.oneOfType([PropTypes.func, PropTypes.object]);
 export {
   refType as default

package/dist/packages/zenith-ui/node_modules/prop-types/index.js

@@ -1,4 +1,4 @@
-import { __module as propTypes } from "../../../../_virtual/index2.js";
+import { __module as propTypes } from "../../../../_virtual/index3.js";
 import { __require as requireReactIs } from "./node_modules/react-is/index.js";
 import { __require as requireFactoryWithTypeCheckers } from "./factoryWithTypeCheckers.js";
 import { __require as requireFactoryWithThrowingShims } from "./factoryWithThrowingShims.js";

package/dist/packages/zenith-ui/node_modules/prop-types/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as reactIs } from "../../../../../../_virtual/index3.js";
+import { __module as reactIs } from "../../../../../../_virtual/index4.js";
 import { __require as requireReactIs_production_min } from "./cjs/react-is.production.min.js";
 import { __require as requireReactIs_development } from "./cjs/react-is.development.js";
 var hasRequiredReactIs;

package/dist/packages/zenith-ui/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as reactIs } from "../../../../_virtual/index4.js";
+import { __module as reactIs } from "../../../../_virtual/index5.js";
 import { __require as requireReactIs_production } from "./cjs/react-is.production.js";
 import { __require as requireReactIs_development } from "./cjs/react-is.development.js";
 var hasRequiredReactIs;

package/dist/packages/zenith-ui/node_modules/react-transition-group/esm/Transition.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "../../@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js";
 import _inheritsLoose from "../../@babel/runtime/helpers/esm/inheritsLoose.js";
-import PropTypes from "../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../_virtual/index.js";
 import React__default from "react";
 import ReactDOM__default from "react-dom";
 import config from "./config.js";

package/dist/packages/zenith-ui/node_modules/react-transition-group/esm/TransitionGroup.js

@@ -2,7 +2,7 @@ import _objectWithoutPropertiesLoose from "../../@babel/runtime/helpers/esm/obje
 import _extends from "../../@babel/runtime/helpers/esm/extends.js";
 import _assertThisInitialized from "../../@babel/runtime/helpers/esm/assertThisInitialized.js";
 import _inheritsLoose from "../../@babel/runtime/helpers/esm/inheritsLoose.js";
-import PropTypes from "../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../_virtual/index.js";
 import React__default from "react";
 import TransitionGroupContext from "./TransitionGroupContext.js";
 import { getInitialChildMapping, getNextChildMapping, getChildMapping } from "./utils/ChildMapping.js";

package/dist/packages/zenith-ui/node_modules/react-transition-group/esm/utils/PropTypes.js

@@ -1,4 +1,4 @@
-import PropTypes from "../../../../../../_virtual/index5.js";
+import PropTypes from "../../../../../../_virtual/index.js";
 var timeoutsShape = process.env.NODE_ENV !== "production" ? PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
   enter: PropTypes.number,
   exit: PropTypes.number,

package/guidelines/Guidelines.md

@@ -0,0 +1,67 @@
+# ZDS Design System Guidelines
+
+This project has access to a custom Design System called ZDS (Zenith Design System) that's installed via the `@kenpan/zds-r8f3v1` npm package. Files in the guidelines directory show how to use ZDS.
+
+## How to Read Guidelines
+
+**Always read:**
+- All files with a name that starts with `overview-`
+- All files in the `design-tokens/` folder
+
+**Read component guidelines when needed:**
+Read the files in the `guidelines/components/` directory when you want to use the component with that name. For example, if you want to use Button, read `guidelines/components/button.md`.
+
+## Component Usage Guidelines - READ THIS FIRST
+
+**IMPORTANT:** Always prefer to use components from ZDS if they exist. For example, prefer to use a Button component from ZDS, rather than regular button or MUI button components.
+
+**IMPORTANT:** Follow these steps IN ORDER before writing any code:
+
+### Step 1: Read Overview Files (REQUIRED)
+Read ALL files with a name that starts with "overview-" in the guidelines directory:
+- `overview-components.md`
+- `overview-icons.md`
+
+### Step 2: Read Design Tokens (REQUIRED)
+Read ALL files in the `design-tokens/` folder. Do NOT skip this step.
+
+### Step 3: Plan what components you need to use (REQUIRED)
+
+### Step 4: Read Component Guidelines BEFORE Using Components (REQUIRED)
+BEFORE using ANY component, you MUST read its guidelines file first:
+- Using Button? → Read `guidelines/components/button.md` FIRST
+- Using Dialog? → Read `guidelines/components/dialog.md` FIRST
+- Using Table? → Read `guidelines/components/table.md` FIRST
+- Using Forms? → Read `guidelines/components/forms.md` FIRST
+
+### Step 5: Plan what icons you need to use (REQUIRED)
+Before using ANY icon, you must check to see if that icon exists in the ZDS package. If it doesn't, pick a different icon and verify the new icon.
+
+**DO NOT write code using a component until you have read its specific guidelines.**
+
+## Quick Start
+
+```tsx
+import { ThemeProvider } from '@mui/material/styles'
+import { theme, Button, Card, Alert } from '@kenpan/zds-r8f3v1'
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Card>
+        <Alert color="info" size="sm">Welcome to ZDS</Alert>
+        <Button variant="primary" size="medium">Get Started</Button>
+      </Card>
+    </ThemeProvider>
+  )
+}
+```
+
+## Package Structure
+
+```
+@kenpan/zds-r8f3v1
+├── (main)     - All components and utilities
+├── /theme     - Theme configuration and design tokens
+└── /icons     - Icon components (1194 icons)
+```

package/guidelines/components/button.md

@@ -1,89 +1,173 @@
 # Button Component
 
-The Button component is the primary action element in ZDS. It supports multiple variants, sizes, and states.
+**Purpose**: Trigger actions or navigate users. Use for primary and secondary actions.
 
-## When to Use
+**Import**:
+```tsx
+import { Button } from '@kenpan/zds-r8f3v1'
+```
 
-- **Primary buttons**: Use for the main action on a page (e.g., "Submit", "Save", "Confirm")
-- **Secondary buttons**: Use for secondary actions that support the primary action
-- **Tertiary buttons**: Use for less prominent actions
-- **Link buttons**: Use for navigation or inline actions that look like links
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'primary' \| 'secondary-gray' \| 'secondary-color' \| 'tertiary-gray' \| 'tertiary-color' \| 'link-gray' \| 'link-color'` | `'primary'` | Button style variant |
+| `size` | `'xs' \| 'small' \| 'medium' \| 'large' \| 'xl' \| 'xxl'` | `'medium'` | Button size |
+| `destructive` | `boolean` | `false` | Use red color for destructive actions |
+| `disabled` | `boolean` | `false` | Disable the button |
+| `iconLeading` | `ReactNode` | - | Icon before text |
+| `iconTrailing` | `ReactNode` | - | Icon after text |
+| `iconOnly` | `boolean` | `false` | Icon-only button (no text) |
+| `fullWidth` | `boolean` | `false` | Full width button |
+| `loading` | `boolean` | `false` | Show loading state |
+| `children` | `ReactNode` | - | Button text |
+| `onClick` | `(e) => void` | - | Click handler |
 
 ## Variants
 
-### Primary (Default)
+### Primary
+Main call-to-action. Use sparingly - one per section.
+```tsx
+<Button variant="primary">Save Changes</Button>
+```
+
+### Secondary (Gray)
+Secondary actions that complement primary.
+```tsx
+<Button variant="secondary-gray">Cancel</Button>
+```
+
+### Secondary (Color)
+Secondary actions with brand color.
+```tsx
+<Button variant="secondary-color">Learn More</Button>
+```
+
+### Tertiary (Gray)
+Low-emphasis actions.
 ```tsx
-<Button variant="primary">Primary Action</Button>
-<Button variant="primary" color="destructive">Delete</Button>
+<Button variant="tertiary-gray">Edit</Button>
 ```
 
-### Secondary
+### Tertiary (Color)
+Low-emphasis actions with brand color.
 ```tsx
-<Button variant="secondary">Secondary Action</Button>
-<Button variant="secondary-gray">Gray Secondary</Button>
+<Button variant="tertiary-color">View Details</Button>
 ```
 
-### Tertiary
+### Link (Gray)
+Text-like buttons for inline actions.
 ```tsx
-<Button variant="tertiary">Tertiary Action</Button>
-<Button variant="tertiary-gray">Gray Tertiary</Button>
+<Button variant="link-gray">Forgot password?</Button>
 ```
 
-### Link
+### Link (Color)
+Colored link buttons.
 ```tsx
-<Button variant="link">Link Action</Button>
-<Button variant="link-gray">Gray Link</Button>
+<Button variant="link-color">Learn more</Button>
 ```
 
 ## Sizes
 
 ```tsx
-<Button size="small">Small</Button>
-<Button size="medium">Medium</Button>   {/* Default */}
-<Button size="large">Large</Button>
-<Button size="xlarge">Extra Large</Button>
-<Button size="2xlarge">2X Large</Button>
+<Button size="xs">Extra Small</Button>      // 32px height
+<Button size="small">Small</Button>         // 36px height
+<Button size="medium">Medium</Button>       // 40px height (default)
+<Button size="large">Large</Button>         // 44px height
+<Button size="xl">Extra Large</Button>      // 48px height
+<Button size="xxl">XXL</Button>             // 60px height
 ```
 
 ## With Icons
 
 ```tsx
-import { ArrowRightIcon } from '@kenpan/zds-r8f3v1/icons'
+import { PlusIcon, ChevronRightIcon } from '@kenpan/zds-r8f3v1/icons'
 
-// Icon at start
-<Button startIcon={<ArrowRightIcon />}>Continue</Button>
+// Leading icon
+<Button variant="primary" iconLeading={<PlusIcon size={20} />}>
+  Add Item
+</Button>
 
-// Icon at end
-<Button endIcon={<ArrowRightIcon />}>Next</Button>
+// Trailing icon
+<Button variant="secondary-gray" iconTrailing={<ChevronRightIcon size={20} />}>
+  Next
+</Button>
 
 // Icon only
-<Button iconOnly><ArrowRightIcon /></Button>
+<Button variant="tertiary-gray" iconOnly iconLeading={<PlusIcon size={20} />} />
+```
+
+## Destructive Actions
+
+Use `destructive` prop for delete/remove actions:
+```tsx
+<Button variant="primary" destructive>Delete</Button>
+<Button variant="secondary-gray" destructive>Remove</Button>
+<Button variant="tertiary-gray" destructive>Cancel Subscription</Button>
 ```
 
 ## States
 
 ```tsx
 // Disabled
-<Button disabled>Disabled</Button>
+<Button disabled>Can't Click</Button>
 
-// Loading (implement with startIcon)
-<Button startIcon={<LoadingIndicator size="sm" />}>Loading...</Button>
+// Loading
+<Button loading>Saving...</Button>
+
+// Full width
+<Button fullWidth>Submit Form</Button>
 ```
 
-## Destructive Actions
+## Usage Guidelines
 
-For dangerous actions like delete:
+### Do:
+- Use primary buttons for the main action in a section
+- Use secondary/tertiary for supporting actions
+- Keep button text short and action-oriented (e.g., "Save", "Cancel", "Add Item")
+- Use destructive variant for irreversible actions
+- Use appropriate size for context (medium for most cases)
 
+### Don't:
+- Don't use multiple primary buttons in the same section
+- Don't use long button text (more than 3-4 words)
+- Don't use buttons for navigation (use links instead)
+- Don't disable buttons without explaining why
+
+## Common Patterns
+
+### Form Actions
 ```tsx
-<Button variant="primary" color="destructive">Delete Item</Button>
-<Button variant="secondary" color="destructive">Remove</Button>
-<Button variant="tertiary" color="destructive">Cancel</Button>
+<Stack direction="row" spacing={3}>
+  <Button variant="secondary-gray">Cancel</Button>
+  <Button variant="primary">Save Changes</Button>
+</Stack>
 ```
 
-## Best Practices
+### Dialog Actions
+```tsx
+<DialogFooter>
+  <Button variant="secondary-gray" onClick={onClose}>Cancel</Button>
+  <Button variant="primary" onClick={onConfirm}>Confirm</Button>
+</DialogFooter>
+```
+
+### Destructive Confirmation
+```tsx
+<Stack direction="row" spacing={3}>
+  <Button variant="secondary-gray">Keep</Button>
+  <Button variant="primary" destructive>Delete</Button>
+</Stack>
+```
 
-1. **One primary button per section** - Avoid multiple primary buttons that compete for attention
-2. **Clear labels** - Use action verbs like "Save", "Submit", "Create"
-3. **Destructive confirmation** - Always confirm destructive actions with a dialog
-4. **Loading states** - Show loading indicators for async actions
-5. **Keyboard accessible** - All buttons are keyboard focusable by default
+### Icon Button
+```tsx
+import { DotsVerticalIcon } from '@kenpan/zds-r8f3v1/icons'
+
+<Button 
+  variant="tertiary-gray" 
+  iconOnly 
+  iconLeading={<DotsVerticalIcon size={20} />}
+  aria-label="More options"
+/>
+```